Skip to content

Commit 7408ef0

Browse files
tbouffardtbouffard
authored
refactor: remove duplication in projects (#195)
Allow a single CSS import. When possible, fill the HTML with shared code. In all projects, add link to the bundler/tool in the title.
1 parent 5de4c50 commit 7408ef0

File tree

14 files changed

+64
-104
lines changed

14 files changed

+64
-104
lines changed

‎projects/_shared/css/all.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import url('@maxgraph/core/css/common.css');
2+
3+
@import url('./rubber-band.css');
4+
@import url('./general-style.css');

‎projects/_shared/src/fill-html-content.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {Client} from "@maxgraph/core";
2+
3+
/** Display the maxGraph version in the footer. */
4+
const fillFooter = (): void => {
5+
const footer = document.querySelector<HTMLElement>('footer')!;
6+
footer.innerText = `Built with maxGraph ${Client.VERSION}`;
7+
};
8+
9+
export type FillMainContainerOptions = {
10+
toolName: string;
11+
toolUrl: string;
12+
};
13+
14+
export const fillMainContainerInnerHtml = (cssSelector: string, options: FillMainContainerOptions): void => {
15+
document.querySelector<HTMLDivElement>(cssSelector)!.innerHTML = `
16+
<h1>maxGraph <a href="${options.toolUrl}" target="_blank" rel="noopener noreferrer">${options.toolName}</a> TypeScript example</h1>
17+
<p>Display a test graph. Activated behaviours:</p>
18+
<ul>
19+
<li>Panning: use mouse right button</li>
20+
<li>Cells selection with Rubberband: use mouse left button</li>
21+
</ul>
22+
<div id="graph-container"></div>
23+
<footer></footer>
24+
`;
25+
fillFooter();
26+
};

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@ import {
99
} from '@maxgraph/core';
1010
import {registerCustomShapes} from "./custom-shapes";
1111

12-
export const initializeGraph = (container: HTMLElement) => {
12+
/**
13+
* Initializes the graph inside the given container.
14+
* @param container if not set, use the element matching the selector '#graph-container'
15+
*/
16+
export const initializeGraph = (container?: HTMLElement) => {
17+
container ??= document.querySelector<HTMLElement>('#graph-container')!;
18+
1319
// Disables the built-in context menu
1420
InternalEvent.disableContextMenu(container);
1521

‎projects/_shared/src/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1+
import { initializeGraph } from './generate-graph';
2+
import {fillMainContainerInnerHtml, FillMainContainerOptions} from "./fill-html-content";
3+
14
export {initializeGraph} from './generate-graph';
5+
6+
export const initializeHtmlAndGraph = (cssSelector: string, options: FillMainContainerOptions): void => {
7+
fillMainContainerInnerHtml(cssSelector, options);
8+
initializeGraph();
9+
};

‎projects/farm-ts/src/main.ts‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,4 @@
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'
1+
import 'maxgraph-examples-shared/css/all.css';
2+
import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
43

5-
import {Client} from "@maxgraph/core";
6-
import {initializeGraph} from 'maxgraph-examples-shared';
7-
8-
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
9-
<h1>maxGraph Farm TypeScript example</h1>
10-
<p>Display a test graph. Activated behaviours:</p>
11-
<ul>
12-
<li>Panning: use mouse right button</li>
13-
<li>Cells selection with Rubberband: use mouse left button</li>
14-
</ul>
15-
<div id="graph-container"></div>
16-
<footer></footer>
17-
`;
18-
19-
const footer = document.querySelector<HTMLElement>('footer')!;
20-
footer.innerText = `Built with maxGraph ${Client.VERSION}`;
21-
22-
// Creates the graph inside the given container
23-
initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
4+
initializeHtmlAndGraph('#app', {toolName: 'Farm', toolUrl: 'https://www.farmfe.org/'})

‎projects/lit-ts/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script type="module" src="/src/index.ts"></script>
99
</head>
1010
<body>
11-
<h1>maxGraph Lit Typescript example</h1>
11+
<h1>maxGraph <a href="https://lit.dev/" target="_blank" rel="noopener noreferrer">Lit</a> Typescript example</h1>
1212
<p>Display a test graph. Activated behaviours:</p>
1313
<ul>
1414
<li>Panning: use mouse right button</li>

‎projects/parcel-ts/index.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,6 @@
88
<script type="module" src="src/main.ts"></script>
99
</head>
1010
<body>
11-
<h1>maxGraph Parcel TypeScript example</h1>
12-
<p>Display a test graph. Activated behaviours:</p>
13-
<ul>
14-
<li>Panning: use mouse right button</li>
15-
<li>Cells selection with Rubberband: use mouse left button</li>
16-
</ul>
17-
<div id="graph-container"></div>
18-
<footer></footer>
11+
<div id="app"></div>
1912
</body>
2013
</html>

‎projects/parcel-ts/src/main.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,6 @@ import '@maxgraph/core/css/common.css';
22
import 'maxgraph-examples-shared/css/rubber-band.css'
33
import 'maxgraph-examples-shared/css/general-style.css'
44

5-
import {Client} from '@maxgraph/core';
6-
import {initializeGraph} from 'maxgraph-examples-shared';
5+
import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
76

8-
// display the maxGraph version in the footer
9-
const footer = document.querySelector<HTMLElement>('footer')!;
10-
footer.innerText = `Built with maxGraph ${Client.VERSION}`;
11-
12-
// Creates the graph inside the given container
13-
initializeGraph(<HTMLElement>document.querySelector('#graph-container'));
7+
initializeHtmlAndGraph('#app', {toolName: 'Parcel', toolUrl: 'https://parceljs.org/'})

‎projects/rollup-ts/public/index.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,6 @@
99
<script type="module" src='bundle.js'></script>
1010
</head>
1111
<body>
12-
<h1>maxGraph Rollup TypeScript example</h1>
13-
<p>Display a test graph. Activated behaviours:</p>
14-
<ul>
15-
<li>Panning: use mouse right button</li>
16-
<li>Cells selection with Rubberband: mouse left button</li>
17-
</ul>
18-
<div id="graph-container"></div>
19-
<footer></footer>
12+
<div id="app"></div>
2013
</body>
2114
</html>

‎projects/rollup-ts/src/main.ts‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
11
// import './style.css'; currently loaded by the HTML page
2-
import {Client} from '@maxgraph/core';
3-
import {initializeGraph} from 'maxgraph-examples-shared';
2+
import {initializeHtmlAndGraph} from 'maxgraph-examples-shared';
43

5-
// display the maxGraph version in the footer
6-
const footer = document.querySelector<HTMLElement>('footer')!;
7-
footer.innerText = `Built with maxGraph ${Client.VERSION}`;
8-
9-
// Creates the graph inside the given container
10-
const container = document.querySelector<HTMLElement>('#graph-container')!;
11-
12-
initializeGraph(container);
4+
initializeHtmlAndGraph('#app', {toolName: 'Rollup', toolUrl: 'https://rollupjs.org/'})

0 commit comments

Comments
 (0)