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

Lines changed: 195 additions & 527 deletions

‎.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+
}

0 commit comments

Comments
 (0)