Skip to content

Commit baaa4f4

Browse files
tbouffardtbouffard
authored
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).
1 parent 669f985 commit baaa4f4

26 files changed

+195
-527
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ jobs:
8181
# use wildcard as the file contains the version, and we don't know it
8282
run: npm install ${{steps.download.outputs.download-path}}/maxgraph-core*.tgz
8383
- name: Build project
84-
run: npm run build -w projects/${{matrix.project}}
84+
run: npm run build -w projects/_shared -w projects/${{matrix.project}}
8585
- name: Upload project archive
8686
if: ${{ matrix.npm-package == 'release' }}
8787
uses: actions/upload-artifact@v3

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ Install dependencies by running
2222
npm install
2323
```
2424

25+
Build the "shared" package:
26+
- this package is used in all projects, so it must be built first.
27+
- for more details, see its [dedicated README](projects/_shared/README.md).
28+
2529
### Available projects
2630

2731
- [TypeScript with Lit](./projects/lit-ts/README.md)

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/_shared/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
lib

‎projects/_shared/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# maxgraph-examples-shared
2+
3+
This package contains the code and assets that are shared between all projects.
4+
5+
It mainly includes the code calling `@maxGraph/core` to initialize the `Graph`.
6+
7+
## Setup
8+
9+
From the repository root, run `npm install`. For more details, see the [root README](../../README.md#setup).
10+
11+
## Develop
12+
13+
From the repository root, run `npm run dev -w projects/_shared`. The package will be continuously built making any change
14+
available in other projects using it.
15+
16+
To build a static version of the "shared" package, run `npm run build -w projects/_shared`.

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

File renamed without changes.

‎projects/_shared/css/rubber-band.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* For rubber band selection, override maxGraph defaults */
2+
div.mxRubberband {
3+
border-color: #b18426;
4+
background: #db9b0b;
5+
}

‎projects/_shared/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "maxgraph-examples-shared",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "tsc --watch",
7+
"build": "tsc"
8+
},
9+
"module": "./lib/index.js",
10+
"types": "./lib/index.d.ts",
11+
"files": [
12+
"css",
13+
"lib"
14+
]
15+
}

‎projects/sveltekit-ts/src/lib/custom-shapes.ts renamed to ‎projects/_shared/src/custom-shapes.ts

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
1-
// TODO fully duplicated with other projects
1+
import type {AbstractCanvas2D, ColorValue, Rectangle} from '@maxgraph/core';
2+
import {CellRenderer, EllipseShape, RectangleShape} from '@maxgraph/core';
23

3-
import type { ColorValue } from '@maxgraph/core';
4-
import {
5-
type AbstractCanvas2D,
6-
CellRenderer,
7-
EllipseShape,
8-
type Rectangle,
9-
RectangleShape,
10-
} from '@maxgraph/core';
11-
12-
export function registerCustomShapes(): void {
4+
export const registerCustomShapes = (): void => {
135
console.info('Registering custom shapes...');
146
// @ts-ignore TODO fix CellRenderer. Calls to this function are also marked as 'ts-ignore' in CellRenderer
157
CellRenderer.registerShape('customRectangle', CustomRectangleShape);
168
// @ts-ignore
179
CellRenderer.registerShape('customEllipse', CustomEllipseShape);
1810
console.info('Custom shapes registered');
19-
}
11+
};
2012

2113
class CustomRectangleShape extends RectangleShape {
2214
constructor(bounds: Rectangle, fill: ColorValue, stroke: ColorValue) {

‎projects/_shared/src/generate-graph.ts

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import {
2+
Graph,
3+
InternalEvent,
4+
Perimeter,
5+
RubberBandHandler,
6+
} from '@maxgraph/core';
7+
import {registerCustomShapes} from "./custom-shapes";
8+
9+
export const initializeGraph = (container: HTMLElement) => {
10+
// Disables the built-in context menu
11+
InternalEvent.disableContextMenu(container);
12+
13+
const graph = new Graph(container);
14+
graph.setPanning(true); // Use mouse right button for panning
15+
new RubberBandHandler(graph); // Enables rubber band selection
16+
17+
// shapes and styles
18+
registerCustomShapes();
19+
// create a dedicated style for "ellipse" to share properties
20+
graph.getStylesheet().putCellStyle('myEllipse', {
21+
perimeter: Perimeter.EllipsePerimeter,
22+
shape: 'ellipse',
23+
verticalAlign: 'top',
24+
verticalLabelPosition: 'bottom',
25+
});
26+
27+
// Gets the default parent for inserting new cells. This
28+
// is normally the first child of the root (ie. layer 0).
29+
const parent = graph.getDefaultParent();
30+
31+
// Adds cells to the model in a single step
32+
graph.batchUpdate(() => {
33+
// use the legacy insertVertex method
34+
const vertex01 = graph.insertVertex(
35+
parent,
36+
null,
37+
'a regular rectangle',
38+
10,
39+
10,
40+
100,
41+
100
42+
);
43+
const vertex02 = graph.insertVertex(
44+
parent,
45+
null,
46+
'a regular ellipse',
47+
350,
48+
90,
49+
50,
50+
50,
51+
{
52+
baseStyleNames: ['myEllipse'],
53+
fillColor: 'orange',
54+
}
55+
);
56+
// use the legacy insertEdge method
57+
graph.insertEdge(parent, null, 'an orthogonal style edge', vertex01, vertex02, {
58+
// TODO cannot use constants.EDGESTYLE.ORTHOGONAL
59+
// TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
60+
// See https://github.com/maxGraph/maxGraph/issues/205
61+
edgeStyle: 'orthogonalEdgeStyle',
62+
rounded: true,
63+
});
64+
65+
// insert vertex using custom shapes using the new insertVertex method
66+
const vertex11 = graph.insertVertex({
67+
parent,
68+
value: 'a custom rectangle',
69+
position: [20, 200],
70+
size: [100, 100],
71+
style: { shape: 'customRectangle' },
72+
});
73+
// use the new insertVertex method using position and size parameters
74+
const vertex12 = graph.insertVertex({
75+
parent,
76+
value: 'a custom ellipse',
77+
x: 150,
78+
y: 350,
79+
width: 70,
80+
height: 70,
81+
style: {
82+
baseStyleNames: ['myEllipse'],
83+
shape: 'customEllipse',
84+
},
85+
});
86+
// use the new insertEdge method
87+
graph.insertEdge({
88+
parent,
89+
value: 'another edge',
90+
source: vertex11,
91+
target: vertex12,
92+
style: { endArrow: 'block' },
93+
});
94+
});
95+
}

‎projects/_shared/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {initializeGraph} from './generate-graph';

‎projects/_shared/tsconfig.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "lib",
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"module": "ESNext",
7+
"lib": ["ESNext", "DOM"],
8+
"moduleResolution": "Node",
9+
"strict": true,
10+
"sourceMap": true,
11+
"resolveJsonModule": true,
12+
"isolatedModules": true,
13+
"esModuleInterop": true,
14+
"noEmit": false,
15+
"declaration": true,
16+
"noUnusedLocals": true,
17+
"noUnusedParameters": true,
18+
"noImplicitReturns": true
19+
},
20+
"include": ["src"]
21+
}

‎projects/lit-ts/src/custom-shapes.ts

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎projects/lit-ts/src/index.ts

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,11 @@
1-
import './style.css';
2-
import {type CellStyle, Graph, InternalEvent, RubberBandHandler} from '@maxgraph/core';
3-
import {registerCustomShapes} from "./custom-shapes";
4-
import {html, LitElement} from "lit";
5-
import { customElement } from "lit/decorators.js";
6-
7-
// TODO mainly duplicated with other projects
8-
const initializeGraph = (container: HTMLElement) => {
9-
// Disables the built-in context menu
10-
InternalEvent.disableContextMenu(container);
11-
12-
const graph = new Graph(container);
13-
graph.setPanning(true); // Use mouse right button for panning
14-
// 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
15-
new RubberBandHandler(graph); // Enables rubber band selection
1+
import '@maxgraph/core/css/common.css';
2+
import 'maxgraph-examples-shared/css/rubber-band.css'
3+
import 'maxgraph-examples-shared/css/general-style.css'
164

17-
// shapes and styles
18-
registerCustomShapes();
19-
// @ts-ignore TODO fix TS2532: Object is possibly 'undefined'.
20-
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle'; // TODO use constants.EDGESTYLE instead of 'orthogonalEdgeStyle'
5+
import {initializeGraph} from 'maxgraph-examples-shared';
216

22-
// Gets the default parent for inserting new cells. This
23-
// is normally the first child of the root (ie. layer 0).
24-
const parent = graph.getDefaultParent();
25-
26-
// Adds cells to the model in a single step
27-
graph.batchUpdate(() => {
28-
const vertex01 = graph.insertVertex(parent, null, 'a regular rectangle', 10, 10, 100, 100);
29-
const vertex02 = graph.insertVertex(parent, null, 'a regular ellipse', 350, 90, 50, 50, <CellStyle>{shape: 'ellipse', fillColor: 'orange'});
30-
graph.insertEdge(parent, null, 'a regular edge', vertex01, vertex02);
31-
32-
// insert vertices using custom shapes
33-
// TODO type issue in CellStyle type, shape should allow string to manage custom implementation
34-
const vertex11 = graph.insertVertex(parent, null, 'a custom rectangle', 20, 200, 100, 100, /*<CellStyle>*/{shape: 'customRectangle'});
35-
const vertex12 = graph.insertVertex(parent, null, 'a custom ellipse', 150, 350, 70, 70, /*<CellStyle>*/{shape: 'customEllipse'});
36-
graph.insertEdge(parent, null, 'another edge', vertex11, vertex12);
37-
});
38-
};
7+
import {html, LitElement} from "lit";
8+
import {customElement} from "lit/decorators.js";
399

4010
@customElement("maxgraph-graph")
4111
export class GraphElement extends LitElement {

‎projects/lit-ts/src/style.css

Lines changed: 0 additions & 37 deletions
This file was deleted.

0 commit comments

Comments
 (0)