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

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