chore: improve the configuration to build the npm package (#87)

Root and all package.json files
  - Fix license, version and authors
  - Remove the non-relevant .npmignore file at the project. It was designed for mxgraph, the whole directory structure
  changed, and we don't plan to publish the root package

`core` package
  - Generate type definition and javascript files for ESM output
    - dedicated folder for `esm` and `types` in the `dist` folder to clearly separate concerns
    - exported in the package.json
  - Add npm script for `npm pack` configuration
  - Drop the `postinstall` npm script that built the `core` bundle. It would have been run when the package is installed
  in dependent projects at dependencies install. And it would have failed as it tries to build the project from TypeScript
  sources that are not available in the npm package.

fix: ConstraintHandler now loads image as everywhere else in the code using `Client.imageBasePath`
Using import doesn't work as the image is not available in the npm package. It generated error like this in ViteJS
project:
Failed to resolve import "../../../images/point.gif" from "../core/dist/esm/view/handler/ConstraintHandler.js". Does the file exist?
This gif import had been introduced to make `Anchors.stories.js` retrieve the gif file. Configuring `imageBasePath` as
already done in other stories fixes the issue.

Don't export EditorCodec and StylesheetCodec as they generate errors.
This is a temporary solution to avoid error in dependent project (at least, with ViteJS projects).

.github/workflows/build.yml

@@ -31,12 +31,22 @@ jobs:
       matrix:
         os: ['ubuntu-20.04', 'macos-11', 'windows-2019']
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: '16'
-      - name: Install dependencies and build @maxgraph/core
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
         run: npm install
-      - name: Generate TypeScript declaration files
+      - name: Build @maxgraph/core - umd
+        working-directory: packages/core
+        run: npm run build
+      - name: Build @maxgraph/core - esm
+        working-directory: packages/core
+        run: npm run generate-esm
+      - name: Generate @maxgraph/core types
+        working-directory: packages/core
         run: npm run generate-types
+      - name: Build ts-example
+        working-directory: packages/ts-example
+        run: npm run build

.gitignore

@@ -7,6 +7,7 @@ javascript/examples/**/dist
 *.iml
 dist
 package-lock.json
+*.tgz
 
 # dependencies
 /node_modules

.npmignore

@@ -1,22 +0,0 @@
-.classpath
-.idea/
-.jshintrc
-.project
-.settings
-.vs
-*.sln
-bin
-build.sh
-classes
-docs/
-dotnet/
-index.html
-java/
-javascript/debug/
-javascript/devel/
-javascript/examples/
-javascript/index.html
-mxgraph-dotnet.*suo
-php/
-pom.xml
-target

.nvmrc

@@ -0,0 +1 @@
+16

README.md

@@ -32,7 +32,7 @@ Chrome, Edge, Firefox, Safari, Chromium based browsers (Brave, Opera, ....) for
 maxGraph is under active development. An alpha version will be released soon with the npm package once [licensing](#license)
 and [versioning](https://github.com/maxGraph/maxGraph/issues/92) issues have been resolved.
 
-In the meantime, you can test the project by running the [Storybook examples](#development).
+In the meantime, you can test the project by running the [Storybook examples](#development) or [build the npm package locally](#build-local-npm-package).
 
 
 ## <a id="license"></a> Transition to Apache 2.0 license
@@ -52,10 +52,11 @@ const container = <HTMLElement>document.getElementById('graph-container');
 // Disables the built-in context menu
 InternalEvent.disableContextMenu(container);
 
+const graph = new Graph(container);
+graph.setPanning(true); // Use mouse right button for panning
 // Gets the default parent for inserting new cells. This
 // is normally the first child of the root (ie. layer 0).
 const parent = graph.getDefaultParent();
-graph.setPanning(true); // Use mouse right button for panning
 
 // Adds cells to the model in a single step
 graph.batchUpdate(() => {
@@ -65,7 +66,7 @@ graph.batchUpdate(() => {
 });
 ```
 
-You will see something like in the following:
+You will see something like in the following _maxGraph panning_ demo:
 
 ![maxGraph panning demo](docs/maxgraph_demo.gif "maxGraph panning demo")
 
@@ -162,6 +163,12 @@ and select `@mxgraph/html`.
 Since both commands are in watch mode, so it's recommended to open two terminals and run them separately. When a file is saved from the core package, the html storybook will be automatically updated.
 
 
-### Building the npm package for local usage
+### <a id="build-local-npm-package"></a> Building the npm package for usage in external project
 
-Will be documented soon.
+Run
+- from the project root: `npm install`
+- then, from the `packages/core` folder: `npm pack`
+
+The `packages/core` folder or the generated `packages/core/maxgraph-core-***.tgz` file are now ready for use in an external project, using [npm link](https://docs.npmjs.com/cli/v8/commands/npm-link) or `npm install`.
+
+Examples of use can be found in this [repository].(https://github.com/tbouffard/maxgraph-integration-examples).

package.json

@@ -1,13 +1,9 @@
 {
   "name": "maxgraph",
-  "description": "max-graph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
-  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "version": "0.1.0",
+  "description": "maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
   "homepage": "https://github.com/maxGraph/maxGraph",
-  "author": {
-    "name": "",
-    "email": ""
-  },
-  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/maxGraph/maxGraph"
@@ -15,13 +11,11 @@
   "bugs": {
     "url": "https://github.com/maxGraph/maxGraph/issues"
   },
-  "main": "./javascript/dist/build.js",
   "scripts": {
     "dev": "node ./scripts/dev",
     "bootstrap": "lerna bootstrap --no-ci",
     "postinstall": "lerna bootstrap --no-ci",
-    "docs": "jsdoc -c jsdoc.json",
-    "generate-types": "lerna run generate-types"
+    "docs": "jsdoc -c jsdoc.json"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -33,6 +27,7 @@
     "babel-loader": "^8.2.3",
     "better-docs": "^2.3.2",
     "css-loader": "^6.5.1",
+    "cross-env": "~7.0.3",
     "file-loader": "^6.2.0",
     "jsdoc": "^3.6.7",
     "lerna": "^4.0.0",
@@ -44,6 +39,5 @@
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1",
     "webpack-merge": "^5.8.0"
-  },
-  "sideEffects": true
+  }
 }

packages/core/index.d.ts

@@ -1 +0,0 @@
-declare module '*.gif';

packages/core/package.json

@@ -1,23 +1,32 @@
 {
   "name": "@maxgraph/core",
-  "version": "1.0.0",
-  "description": "",
-  "module": "./src/index.ts",
-  "main": "./dist/maxgraph.js",
-  "types": "./dist/maxgraph.d.ts",
+  "license": "Apache-2.0",
+  "version": "0.1.0",
+  "description": "maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
+  "main": "dist/maxgraph.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "./dist"
+    "dist"
   ],
+  "homepage": "https://github.com/maxGraph/maxGraph",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maxGraph/maxGraph"
+  },
+  "bugs": {
+    "url": "https://github.com/maxGraph/maxGraph/issues"
+  },
   "scripts": {
     "dev": "webpack --watch --mode=development",
-    "build": "NODE_ENV=production webpack --mode=production",
-    "postinstall": "webpack --mode=development",
-    "generate-types": "tsc --emitDeclarationOnly"
+    "build": "cross-env NODE_ENV=production webpack --mode=production",
+    "generate-types": "tsc --emitDeclarationOnly",
+    "generate-esm": "tsc --emitDeclarationOnly false --declaration false --declarationDir null",
+    "prepack": "run-s generate-types generate-esm build"
   },
-  "author": "",
-  "license": "ISC",
   "devDependencies": {
-    "circular-dependency-plugin": "^5.2.2"
+    "circular-dependency-plugin": "^5.2.2",
+    "npm-run-all": "~4.1.5"
   },
   "sideEffects": true
 }

packages/core/src/Client.ts

@@ -5,22 +5,9 @@
 
 class Client {
   /**
-   * Class: Client
-   *
-   * Bootstrapping mechanism for the mxGraph thin client. The production version
-   * of this file contains all code required to run the mxGraph thin client, as
-   * well as global constants to identify the browser and operating system in
-   * use. You may have to load chrome://global/content/contentAreaUtils.js in
-   * your page to disable certain security restrictions in Mozilla.
-   *
-   * Contains the current version of the mxGraph library. The strings that
-   * communicate versions of mxGraph use the following format.
-   *
-   * versionMajor.versionMinor.buildNumber.revisionNumber
-   *
-   * Current version is 4.2.2.
+   * Contains the current version of the maxGraph library.
    */
-  static VERSION = '4.2.2';
+  static VERSION = '0.1.0';
 
   /**
    * Optional global config variable to specify the extension of resource files.
@@ -37,7 +24,7 @@ class Client {
 
   static setResourceExtension = (value: string) => {
     Client.mxResourceExtension = value;
-    
+
     // Removes dependency with mxResources.
     // Client.mxResourceExtension can be used instead.
     // mxResources.extension = value;
@@ -143,7 +130,7 @@ class Client {
    * contains the assignment. Trailing slashes are automatically removed.
    */
   static imageBasePath = '.';
-  
+
   static setImageBasePath = (value: string) => {
     if (typeof value !== 'undefined' && value.length > 0) {
       // Adds a trailing slash if required
@@ -416,9 +403,9 @@ class Client {
    * @param id unique id for the link element to check if it already exists
    */
   static link = (
-    rel: string, 
-    href: string, 
-    doc: Document | null=null, 
+    rel: string,
+    href: string,
+    doc: Document | null=null,
     id: string | null=null
   ) => {
     doc = doc || document;

packages/core/src/editor/EditorToolbar.ts

@@ -24,7 +24,7 @@ import { NODETYPE } from '../util/Constants';
 import Translations from '../util/Translations';
 import MaxLog from '../gui/MaxLog';
 import Codec from '../serialization/Codec';
-import { DropHandler } from 'src/view/other/DragSource';
+import type { DropHandler } from '../view/other/DragSource';
 
 /**
  * Toolbar for the editor. This modifies the state of the graph
@@ -204,10 +204,10 @@ export class EditorToolbar {
    * @param funct - Optional JavaScript function that takes the {@link Editor} as the first and only argument that is executed after the mode has been selected.
    */
   addMode(
-    title: string, 
-    icon: string, 
-    mode: string, 
-    pressed: string | null=null, 
+    title: string,
+    icon: string,
+    mode: string,
+    pressed: string | null=null,
     funct: Function | null=null
   ): any {
     const clickHandler = () => {
@@ -238,11 +238,11 @@ export class EditorToolbar {
    * Default is true.
    */
   addPrototype(
-    title: string, 
-    icon: string, 
-    ptype: Function | Cell, 
-    pressed: string, 
-    insert: (editor: Editor, cell: Cell, me: MouseEvent, cellUnderMousePointer?: Cell | null) => void, 
+    title: string,
+    icon: string,
+    ptype: Function | Cell,
+    pressed: string,
+    insert: (editor: Editor, cell: Cell, me: MouseEvent, cellUnderMousePointer?: Cell | null) => void,
     toggle: boolean=true
   ): HTMLImageElement | HTMLButtonElement {
     // Creates a wrapper function that is in charge of constructing

packages/core/src/index.ts

@@ -48,7 +48,11 @@ export { default as VisibleChange } from './view/undoable_changes/VisibleChange'
 
 export { EditorKeyHandler, EditorKeyHandlerCodec } from './editor/EditorKeyHandler';
 export { EditorPopupMenu, EditorPopupMenuCodec } from './editor/EditorPopupMenu';
-export { EditorToolbar, EditorToolbarCodec } from './editor/EditorToolbar';
+// TODO restore EditorToolbarCodec if needed
+// currently, the following error occurs when running vitejs build
+// [ERROR] No matching export in "../core/dist/esm/editor/EditorToolbar.js" for import "EditorToolbarCodec"
+// export { EditorToolbar, EditorToolbarCodec } from './editor/EditorToolbar';
+export { EditorToolbar } from './editor/EditorToolbar';
 export { Editor, EditorCodec } from './editor/Editor';
 
 export { default as CellHighlight } from './view/cell/CellHighlight';
@@ -156,7 +160,11 @@ export { default as Rectangle } from './view/geometry/Rectangle';
 export { default as EdgeStyle } from './view/style/EdgeStyle';
 export { default as Perimeter } from './view/style/Perimeter';
 export { default as StyleRegistry } from './view/style/StyleRegistry';
-export { Stylesheet, StylesheetCodec } from './view/style/Stylesheet';
+// TODO restore StylesheetCodec if needed
+// currently, the following error occurs when running vitejs build
+// [ERROR] No matching export in "../core/dist/esm/view/style/Stylesheet.js" for import "StylesheetCodec"
+// export { Stylesheet, StylesheetCodec } from './view/style/Stylesheet';
+export { Stylesheet } from './view/style/Stylesheet';
 
 export * as DomHelpers from './util/domHelpers';
 
@@ -200,3 +208,6 @@ export { default as CellArray } from './view/cell/CellArray';
 export { default as TemporaryCellStates } from './view/cell/TemporaryCellStates';
 export { default as ConnectionConstraint } from './view/other/ConnectionConstraint';
 export { default as Multiplicity } from './view/other/Multiplicity';
+
+// Ensure types are exported in the type definitions
+export * from './types';

packages/core/src/util/styleUtils.ts

@@ -19,7 +19,7 @@ import Rectangle from '../view/geometry/Rectangle';
 import Cell from '../view/cell/Cell';
 import GraphDataModel from '../view/GraphDataModel';
 import CellArray from '../view/cell/CellArray';
-import { CellStateStyle, CellStyle, NumericCellStateStyleKeys } from 'src/types';
+import type { CellStateStyle, CellStyle, NumericCellStateStyleKeys } from '../types';
 
 /**
  * Removes the cursors from the style of the given DOM node and its

packages/core/src/view/handler/ConstraintHandler.ts

@@ -26,8 +26,6 @@ import ConnectionConstraint from '../other/ConnectionConstraint';
 import Point from '../geometry/Point';
 import Cell from '../cell/Cell';
 
-import pointImg from '../../../images/point.gif';
-
 /**
  * Handles constraints on connection targets. This class is in charge of
  * showing fixed points when the mouse is over a vertex and handles constraints
@@ -39,8 +37,7 @@ class ConstraintHandler {
   /**
    * {@link Image} to be used as the image for fixed connection points.
    */
-  // pointImage: mxImage;
-  pointImage = new Image(pointImg, 5, 5);
+  pointImage = new Image(`${Client.imageBasePath}/point.gif`, 5, 5);
 
   /**
    * Reference to the enclosing {@link mxGraph}.

packages/core/src/view/mixins/EdgeMixin.ts

@@ -9,7 +9,7 @@ import InternalEvent from '../event/InternalEvent';
 import Dictionary from '../../util/Dictionary';
 import { Graph } from '../Graph';
 import Point from '../geometry/Point';
-import { CellStyle } from 'src/types';
+import type { CellStyle } from '../../types';
 
 declare module '../Graph' {
   interface Graph {

packages/core/src/view/mixins/VertexMixin.ts

@@ -3,7 +3,7 @@ import Geometry from '../geometry/Geometry';
 import { Graph } from '../Graph';
 import CellArray from '../cell/CellArray';
 import { mixInto } from '../../util/Utils';
-import { CellStyle } from 'src/types';
+import type { CellStyle } from '../../types';
 
 declare module '../Graph' {
   interface Graph {

packages/core/tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "allowSyntheticDefaultImports": true,
     "declaration": true,
-    "declarationDir": "./dist",
+    "declarationDir": "./dist/types",
     "declarationMap": false,
     "emitDeclarationOnly": true,
     "esModuleInterop": true,
@@ -11,7 +11,7 @@
     "module": "ES2020",
     "lib": ["dom"],
     "moduleResolution": "node",
-    "outDir": "./dist",
+    "outDir": "./dist/esm",
     "strict": true,
     "target": "ES2020",
     "skipLibCheck": false,

packages/html/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@maxgraph/html",
-  "version": "1.0.0",
-  "description": "",
+  "license": "Apache-2.0",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Storybook stories",
   "main": "index.js",
   "scripts": {
     "dev": "start-storybook -p 8901"
   },
-  "author": "",
-  "license": "ISC",
   "dependencies": {
     "@maxgraph/core": "*"
   },

packages/html/stories/Anchors.stories.js

@@ -1,4 +1,5 @@
 import {
+  Client,
   Graph,
   InternalEvent,
   RubberBandHandler,
@@ -24,6 +25,8 @@ export default {
 };
 
 const Template = ({ label, ...args }) => {
+  Client.setImageBasePath('/images');
+
   const container = document.createElement('div');
   container.style.position = 'relative';
   container.style.overflow = 'hidden';

packages/ts-example/README.md

@@ -0,0 +1,11 @@
+# TypeScript project using the maxGraph npm package 
+
+Initialized from https://github.com/vitejs/vite/tree/v2.9.8/packages/create-vite/template-vanilla-ts
+
+Do not forget to initialize all packages (you may also need to build the maxgraph@core package)
+> From the repository root, run `npm install`.
+
+Run `npm run dev` and go to http://localhost:3000/
+
+If you want to bundle the application, run `npm run build` and then run `npm run preview` to access to a preview of the
+bundle application.

packages/ts-example/favicon.svg

@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>

packages/ts-example/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>maxGraph TypeScript Integration with Vite</title>
+    <script type="module" src="/src/main.ts"></script>
+    <style>
+
+    </style>
+  </head>
+  <body>
+    <h1>maxGraph TypeScript Integration with Vite</h1>
+    <p>Display a test graph. Activated behaviours:</p>
+    <ul>
+      <li>Panning: use mouse right button</li>
+      <li>Cells selection with Rubberband: use mouse left button</li>
+    </ul>
+    <div id="graph-container"></div>
+    <footer></footer>
+  </body>
+</html>
+

packages/ts-example/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@maxgraph/ts-example-built-with-vite",
+  "license": "Apache-2.0",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@maxgraph/core": "*"
+  },
+  "devDependencies": {
+    "vite": "~2.9.12"
+  }
+}

packages/ts-example/src/custom-shapes.ts

@@ -0,0 +1,42 @@
+import {AbstractCanvas2D, CellRenderer, type ColorValue, EllipseShape, Rectangle, RectangleShape} from '@maxgraph/core';
+
+export function 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) {
+        super(bounds, fill, stroke, 3);
+        // TODO if set, the shape is not painted
+        // this.isRounded = true; // force rounded shape
+    }
+
+    paintBackground(c: AbstractCanvas2D, x: number, y: number, w: number, h: number): void {
+        c.setFillColor('Chartreuse');
+        super.paintBackground(c, x, y, w, h);
+    }
+
+    paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) {
+        c.setStrokeColor('Black');
+        super.paintVertexShape(c, x, y, w, h);
+    }
+
+}
+
+class CustomEllipseShape extends EllipseShape {
+    constructor(bounds: Rectangle, fill: string, stroke: string) {
+        super(bounds, fill, stroke, 5);
+    }
+
+    paintVertexShape(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) {
+        c.setFillColor('Yellow');
+        c.setStrokeColor('Red');
+        super.paintVertexShape(c, x, y, w, h);
+    }
+}

packages/ts-example/src/main.ts

@@ -0,0 +1,39 @@
+import './style.css';
+import {type CellStyle, Client, Graph, InternalEvent, RubberBandHandler} from '@maxgraph/core';
+import {registerCustomShapes} from "./custom-shapes";
+
+// display the maxGraph version in the footer
+const footer = document.querySelector<HTMLElement>('footer')!;
+footer.innerText = `Built with maxGraph ${Client.VERSION}`;
+
+// Creates the graph inside the given container
+const container = <HTMLElement>document.getElementById('graph-container');
+// 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
+
+// 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'
+
+// 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);
+});

packages/ts-example/src/style.css

@@ -0,0 +1,35 @@
+body {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+
+h1 {
+  text-align: center;
+  margin-top: 3rem;
+}
+
+footer {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+  font-weight: 800;
+}
+
+#graph-container {
+  border: #B0B0B0 1px solid;
+  height: 70vh;
+  overflow: hidden;
+}
+
+/* For rubber band selection as we don't have access to the maxGraph CSS files in the project */
+div.mxRubberband {
+  position: absolute;
+  overflow: hidden;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #b18426;
+  background: #db9b0b;
+}

packages/ts-example/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/ts-example/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    // TODO required because some type definitions in the @maxgraph/core package generate errors: https://github.com/maxGraph/maxGraph/issues/96
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}