refactor: share common code in a dedicated package (#55)

Introduce a "shared" package that contains all the initialization code
for the Graph example used in all projects.
The projects only implement the glue code between the shared code and
the specific framework.
Also share the common assets (style).

Author: tbouffard

.github/workflows/check-typescript-projects.yml

@@ -81,7 +81,7 @@ jobs:
         # use wildcard as the file contains the version, and we don't know it
         run: npm install ${{steps.download.outputs.download-path}}/maxgraph-core*.tgz
       - name: Build project
-        run: npm run build -w projects/${{matrix.project}}
+        run: npm run build -w projects/_shared -w projects/${{matrix.project}}
       - name: Upload project archive
         if: ${{ matrix.npm-package == 'release' }}
         uses: actions/upload-artifact@v3

README.md

@@ -22,6 +22,10 @@ Install dependencies by running
 npm install
 ```
 
+Build the "shared" package:
+- this package is used in all projects, so it must be built first.
+- for more details, see its [dedicated README](projects/_shared/README.md).
+
 ### Available projects
 
 - [TypeScript with Lit](./projects/lit-ts/README.md)

package-lock.json

@@ -0,0 +1 @@
+lib

projects/_shared/.gitignore

@@ -0,0 +1,16 @@
+# maxgraph-examples-shared
+
+This package contains the code and assets that are shared between all projects.
+
+It mainly includes the code calling `@maxGraph/core` to initialize the `Graph`.
+
+## Setup
+
+From the repository root, run `npm install`. For more details, see the [root README](../../README.md#setup).
+
+## Develop
+
+From the repository root, run `npm run dev -w projects/_shared`. The package will be continuously built making any change
+available in other projects using it.
+
+To build a static version of the "shared" package, run `npm run build -w projects/_shared`.

projects/_shared/README.md

@@ -0,0 +1,5 @@
+/* For rubber band selection, override maxGraph defaults */
+div.mxRubberband {
+    border-color: #b18426;
+    background: #db9b0b;
+}

projects/sveltekit-ts/src/style.css projects/_shared/css/general-style.cssprojects/sveltekit-ts/src/style.css renamed to projects/_shared/css/general-style.css

@@ -0,0 +1,15 @@
+{
+  "name": "maxgraph-examples-shared",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc"
+  },
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "css",
+    "lib"
+  ]
+}

projects/_shared/css/rubber-band.css

@@ -1,22 +1,14 @@
-// TODO fully duplicated with other projects
+import type {AbstractCanvas2D, ColorValue, Rectangle} from '@maxgraph/core';
+import {CellRenderer, EllipseShape, RectangleShape} from '@maxgraph/core';
 
-import type { ColorValue } from '@maxgraph/core';
-import {
-  type AbstractCanvas2D,
-  CellRenderer,
-  EllipseShape,
-  type Rectangle,
-  RectangleShape,
-} from '@maxgraph/core';
-
-export function registerCustomShapes(): void {
+export const registerCustomShapes = (): void => {
   console.info('Registering custom shapes...');
   // @ts-ignore TODO fix CellRenderer. Calls to this function are also marked as 'ts-ignore' in CellRenderer
   CellRenderer.registerShape('customRectangle', CustomRectangleShape);
   // @ts-ignore
   CellRenderer.registerShape('customEllipse', CustomEllipseShape);
   console.info('Custom shapes registered');
-}
+};
 
 class CustomRectangleShape extends RectangleShape {
   constructor(bounds: Rectangle, fill: ColorValue, stroke: ColorValue) {

projects/_shared/package.json

@@ -0,0 +1,95 @@
+import {
+    Graph,
+    InternalEvent,
+    Perimeter,
+    RubberBandHandler,
+} from '@maxgraph/core';
+import {registerCustomShapes} from "./custom-shapes";
+
+export const initializeGraph = (container: HTMLElement) => {
+    // Disables the built-in context menu
+    InternalEvent.disableContextMenu(container);
+
+    const graph = new Graph(container);
+    graph.setPanning(true); // Use mouse right button for panning
+    new RubberBandHandler(graph); // Enables rubber band selection
+
+    // shapes and styles
+    registerCustomShapes();
+    // create a dedicated style for "ellipse" to share properties
+    graph.getStylesheet().putCellStyle('myEllipse', {
+        perimeter: Perimeter.EllipsePerimeter,
+        shape: 'ellipse',
+        verticalAlign: 'top',
+        verticalLabelPosition: 'bottom',
+    });
+
+    // Gets the default parent for inserting new cells. This
+    // is normally the first child of the root (ie. layer 0).
+    const parent = graph.getDefaultParent();
+
+    // Adds cells to the model in a single step
+    graph.batchUpdate(() => {
+        // use the legacy insertVertex method
+        const vertex01 = graph.insertVertex(
+            parent,
+            null,
+            'a regular rectangle',
+            10,
+            10,
+            100,
+            100
+        );
+        const vertex02 = graph.insertVertex(
+            parent,
+            null,
+            'a regular ellipse',
+            350,
+            90,
+            50,
+            50,
+            {
+                baseStyleNames: ['myEllipse'],
+                fillColor: 'orange',
+            }
+        );
+        // use the legacy insertEdge method
+        graph.insertEdge(parent, null, 'an orthogonal style edge', vertex01, vertex02, {
+            // TODO cannot use constants.EDGESTYLE.ORTHOGONAL
+            // TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
+            // See https://github.com/maxGraph/maxGraph/issues/205
+            edgeStyle: 'orthogonalEdgeStyle',
+            rounded: true,
+        });
+
+        // insert vertex using custom shapes using the new insertVertex method
+        const vertex11 = graph.insertVertex({
+            parent,
+            value: 'a custom rectangle',
+            position: [20, 200],
+            size: [100, 100],
+            style: { shape: 'customRectangle' },
+        });
+        // use the new insertVertex method using position and size parameters
+        const vertex12 = graph.insertVertex({
+            parent,
+            value: 'a custom ellipse',
+            x: 150,
+            y: 350,
+            width: 70,
+            height: 70,
+            style: {
+                baseStyleNames: ['myEllipse'],
+                shape: 'customEllipse',
+            },
+        });
+        // use the new insertEdge method
+        graph.insertEdge({
+            parent,
+            value: 'another edge',
+            source: vertex11,
+            target: vertex12,
+            style: { endArrow: 'block' },
+        });
+    });
+}