refactor: share common code in a dedicated package

.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)

projects/_shared/.gitignore

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

projects/_shared/README.md

@@ -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/css/rubber-band.css

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

projects/_shared/package.json

@@ -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/sveltekit-ts/src/lib/custom-shapes.ts → projects/_shared/src/custom-shapes.ts

@@ -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/src/generate-graph.ts

@@ -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' },
+        });
+    });
+}

projects/_shared/src/index.ts

@@ -0,0 +1 @@
+export {initializeGraph} from './generate-graph';

projects/_shared/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "outDir": "lib",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": false,
+    "declaration": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true
+  },
+  "include": ["src"]
+}

projects/lit-ts/src/index.ts

@@ -1,41 +1,11 @@
-import './style.css';
-import {type CellStyle, Graph, InternalEvent, RubberBandHandler} from '@maxgraph/core';
-import {registerCustomShapes} from "./custom-shapes";
-import {html, LitElement} from "lit";
-import { customElement } from "lit/decorators.js";
-
-// TODO mainly duplicated with other projects
-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
-  // WARN: as the maxGraph css files are not available in the npm package (at least for now), dedicated CSS class must be defined in style.css
-  new RubberBandHandler(graph); // Enables rubber band selection
+import '@maxgraph/core/css/common.css';
+import 'maxgraph-examples-shared/css/rubber-band.css'
+import 'maxgraph-examples-shared/css/general-style.css'
 
-  // shapes and styles
-  registerCustomShapes();
-  // @ts-ignore TODO fix TS2532: Object is possibly 'undefined'.
-  graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle'; // TODO use constants.EDGESTYLE instead of 'orthogonalEdgeStyle'
+import {initializeGraph} from 'maxgraph-examples-shared';
 
-  // 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(() => {
-    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, <CellStyle>{shape: 'ellipse', fillColor: 'orange'});
-    graph.insertEdge(parent, null, 'a regular edge', vertex01, vertex02);
-
-    // insert vertices using custom shapes
-    // TODO type issue in CellStyle type, shape should allow string to manage custom implementation
-    const vertex11 = graph.insertVertex(parent, null, 'a custom rectangle', 20, 200, 100, 100, /*<CellStyle>*/{shape: 'customRectangle'});
-    const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /*<CellStyle>*/{shape: 'customEllipse'});
-    graph.insertEdge(parent, null, 'another edge', vertex11, vertex12);
-  });
-};
+import {html, LitElement} from "lit";
+import {customElement} from "lit/decorators.js";
 
 @customElement("maxgraph-graph")
 export class GraphElement extends LitElement {