diff --git a/.github/workflows/check-typescript-projects.yml b/.github/workflows/check-typescript-projects.yml index 6a32726..a575430 100644 --- a/.github/workflows/check-typescript-projects.yml +++ b/.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 diff --git a/README.md b/README.md index 6a49169..ec153de 100644 --- a/README.md +++ b/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) diff --git a/package-lock.json b/package-lock.json index 195534a..3a842cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5985,6 +5985,10 @@ "node": ">=12" } }, + "node_modules/maxgraph-examples-shared": { + "resolved": "projects/_shared", + "link": true + }, "node_modules/maxgraph-ts-example-built-with-parcel": { "resolved": "projects/parcel-ts", "link": true @@ -8343,6 +8347,7 @@ "node": ">=8" } }, + "projects/_shared": {}, "projects/lit-ts": { "name": "maxgraph-ts-example-integrating-in-lit", "dependencies": { diff --git a/projects/_shared/.gitignore b/projects/_shared/.gitignore new file mode 100644 index 0000000..a65b417 --- /dev/null +++ b/projects/_shared/.gitignore @@ -0,0 +1 @@ +lib diff --git a/projects/_shared/README.md b/projects/_shared/README.md new file mode 100644 index 0000000..463f792 --- /dev/null +++ b/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`. diff --git a/projects/sveltekit-ts/src/style.css b/projects/_shared/css/general-style.css similarity index 100% rename from projects/sveltekit-ts/src/style.css rename to projects/_shared/css/general-style.css diff --git a/projects/_shared/css/rubber-band.css b/projects/_shared/css/rubber-band.css new file mode 100644 index 0000000..c8d1006 --- /dev/null +++ b/projects/_shared/css/rubber-band.css @@ -0,0 +1,5 @@ +/* For rubber band selection, override maxGraph defaults */ +div.mxRubberband { + border-color: #b18426; + background: #db9b0b; +} diff --git a/projects/_shared/package.json b/projects/_shared/package.json new file mode 100644 index 0000000..5fd543d --- /dev/null +++ b/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" + ] +} diff --git a/projects/sveltekit-ts/src/lib/custom-shapes.ts b/projects/_shared/src/custom-shapes.ts similarity index 83% rename from projects/sveltekit-ts/src/lib/custom-shapes.ts rename to projects/_shared/src/custom-shapes.ts index 113d910..aee39ba 100644 --- a/projects/sveltekit-ts/src/lib/custom-shapes.ts +++ b/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) { diff --git a/projects/_shared/src/generate-graph.ts b/projects/_shared/src/generate-graph.ts new file mode 100644 index 0000000..e32c3a9 --- /dev/null +++ b/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' }, + }); + }); +} diff --git a/projects/_shared/src/index.ts b/projects/_shared/src/index.ts new file mode 100644 index 0000000..c3c1bb2 --- /dev/null +++ b/projects/_shared/src/index.ts @@ -0,0 +1 @@ +export {initializeGraph} from './generate-graph'; diff --git a/projects/_shared/tsconfig.json b/projects/_shared/tsconfig.json new file mode 100644 index 0000000..dc0e497 --- /dev/null +++ b/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"] +} diff --git a/projects/lit-ts/src/custom-shapes.ts b/projects/lit-ts/src/custom-shapes.ts deleted file mode 100644 index e0fc162..0000000 --- a/projects/lit-ts/src/custom-shapes.ts +++ /dev/null @@ -1,43 +0,0 @@ -// TODO fully duplicated with other projects - -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); - 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); - } -} diff --git a/projects/lit-ts/src/index.ts b/projects/lit-ts/src/index.ts index 14d9440..4bf85f1 100644 --- a/projects/lit-ts/src/index.ts +++ b/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, {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, /**/{shape: 'customRectangle'}); - const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /**/{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 { diff --git a/projects/lit-ts/src/style.css b/projects/lit-ts/src/style.css deleted file mode 100644 index 1a5bc9e..0000000 --- a/projects/lit-ts/src/style.css +++ /dev/null @@ -1,37 +0,0 @@ -/*TODO fully duplicated with other projects*/ - -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; -} diff --git a/projects/parcel-ts/src/custom-shapes.ts b/projects/parcel-ts/src/custom-shapes.ts deleted file mode 100644 index e0fc162..0000000 --- a/projects/parcel-ts/src/custom-shapes.ts +++ /dev/null @@ -1,43 +0,0 @@ -// TODO fully duplicated with other projects - -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); - 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); - } -} diff --git a/projects/parcel-ts/src/main.ts b/projects/parcel-ts/src/main.ts index 649ed21..e4d0a21 100644 --- a/projects/parcel-ts/src/main.ts +++ b/projects/parcel-ts/src/main.ts @@ -1,41 +1,13 @@ -// TODO fully duplicated with other projects +import '@maxgraph/core/css/common.css'; +import 'maxgraph-examples-shared/css/rubber-band.css' +import 'maxgraph-examples-shared/css/general-style.css' -import './style.css'; -import {type CellStyle, Client, Graph, InternalEvent, RubberBandHandler} from '@maxgraph/core'; -import {registerCustomShapes} from "./custom-shapes"; +import {Client} from '@maxgraph/core'; +import {initializeGraph} from 'maxgraph-examples-shared'; // display the maxGraph version in the footer const footer = document.querySelector('footer')!; footer.innerText = `Built with maxGraph ${Client.VERSION}`; // Creates the graph inside the given container -const container = 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, {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, /**/{shape: 'customRectangle'}); - const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /**/{shape: 'customEllipse'}); - graph.insertEdge(parent, null, 'another edge', vertex11, vertex12); -}); +initializeGraph(document.querySelector('#graph-container')); diff --git a/projects/parcel-ts/src/style.css b/projects/parcel-ts/src/style.css deleted file mode 100644 index 1a5bc9e..0000000 --- a/projects/parcel-ts/src/style.css +++ /dev/null @@ -1,37 +0,0 @@ -/*TODO fully duplicated with other projects*/ - -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; -} diff --git a/projects/rollup-ts/public/style.css b/projects/rollup-ts/public/style.css index 1a5bc9e..a77aec3 100644 --- a/projects/rollup-ts/public/style.css +++ b/projects/rollup-ts/public/style.css @@ -1,4 +1,4 @@ -/*TODO fully duplicated with other projects*/ +/*TODO fully duplicated with style in _shared and provided by @maxgraph/core */ body { font-family: Avenir, Helvetica, Arial, sans-serif; diff --git a/projects/rollup-ts/src/custom-shapes.ts b/projects/rollup-ts/src/custom-shapes.ts deleted file mode 100644 index e0fc162..0000000 --- a/projects/rollup-ts/src/custom-shapes.ts +++ /dev/null @@ -1,43 +0,0 @@ -// TODO fully duplicated with other projects - -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); - 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); - } -} diff --git a/projects/rollup-ts/src/main.ts b/projects/rollup-ts/src/main.ts index 1ac3796..5a8af01 100644 --- a/projects/rollup-ts/src/main.ts +++ b/projects/rollup-ts/src/main.ts @@ -1,41 +1,12 @@ -// TODO fully duplicated with other projects - // import './style.css'; currently loaded by the HTML page -import {type CellStyle, Client, Graph, InternalEvent, RubberBandHandler} from '@maxgraph/core'; -import {registerCustomShapes} from "./custom-shapes"; +import {Client} from '@maxgraph/core'; +import {initializeGraph} from 'maxgraph-examples-shared'; // display the maxGraph version in the footer const footer = document.querySelector('footer')!; footer.innerText = `Built with maxGraph ${Client.VERSION}`; // Creates the graph inside the given container -const container = 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, {shape: 'ellipse', fillColor: 'orange'}); - graph.insertEdge(parent, null, 'a regular edge', vertex01, vertex02); +const container = document.querySelector('#graph-container')!; - // 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, /**/{shape: 'customRectangle'}); - const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /**/{shape: 'customEllipse'}); - graph.insertEdge(parent, null, 'another edge', vertex11, vertex12); -}); +initializeGraph(container); diff --git a/projects/sveltekit-ts/src/routes/+layout.svelte b/projects/sveltekit-ts/src/routes/+layout.svelte index 84981aa..9aaeea4 100644 --- a/projects/sveltekit-ts/src/routes/+layout.svelte +++ b/projects/sveltekit-ts/src/routes/+layout.svelte @@ -1,6 +1,7 @@ diff --git a/projects/sveltekit-ts/src/routes/+page.svelte b/projects/sveltekit-ts/src/routes/+page.svelte index 575e1ea..379680b 100644 --- a/projects/sveltekit-ts/src/routes/+page.svelte +++ b/projects/sveltekit-ts/src/routes/+page.svelte @@ -1,101 +1,11 @@ diff --git a/projects/vitejs-ts/src/custom-shapes.ts b/projects/vitejs-ts/src/custom-shapes.ts deleted file mode 100644 index e0fc162..0000000 --- a/projects/vitejs-ts/src/custom-shapes.ts +++ /dev/null @@ -1,43 +0,0 @@ -// TODO fully duplicated with other projects - -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); - 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); - } -} diff --git a/projects/vitejs-ts/src/main.ts b/projects/vitejs-ts/src/main.ts index 649ed21..e4d0a21 100644 --- a/projects/vitejs-ts/src/main.ts +++ b/projects/vitejs-ts/src/main.ts @@ -1,41 +1,13 @@ -// TODO fully duplicated with other projects +import '@maxgraph/core/css/common.css'; +import 'maxgraph-examples-shared/css/rubber-band.css' +import 'maxgraph-examples-shared/css/general-style.css' -import './style.css'; -import {type CellStyle, Client, Graph, InternalEvent, RubberBandHandler} from '@maxgraph/core'; -import {registerCustomShapes} from "./custom-shapes"; +import {Client} from '@maxgraph/core'; +import {initializeGraph} from 'maxgraph-examples-shared'; // display the maxGraph version in the footer const footer = document.querySelector('footer')!; footer.innerText = `Built with maxGraph ${Client.VERSION}`; // Creates the graph inside the given container -const container = 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, {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, /**/{shape: 'customRectangle'}); - const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /**/{shape: 'customEllipse'}); - graph.insertEdge(parent, null, 'another edge', vertex11, vertex12); -}); +initializeGraph(document.querySelector('#graph-container')); diff --git a/projects/vitejs-ts/src/style.css b/projects/vitejs-ts/src/style.css deleted file mode 100644 index 1a5bc9e..0000000 --- a/projects/vitejs-ts/src/style.css +++ /dev/null @@ -1,37 +0,0 @@ -/*TODO fully duplicated with other projects*/ - -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; -}