Skip to content

Commit 7aba9f2

Browse files
tbouffardtbouffard
authored
feat: add a project with maxGraph as a lit Web Component (#38)
1 parent d79ff3d commit 7aba9f2

File tree

12 files changed

+480
-3
lines changed

12 files changed

+480
-3
lines changed

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ on:
1919
- 'projects/**/*'
2020

2121
jobs:
22-
build_maxgraph_package:
22+
build_maxgraph_dev_package:
2323
runs-on: ubuntu-22.04
2424
steps:
2525
- uses: actions/checkout@v3
@@ -43,12 +43,16 @@ jobs:
4343
4444
build_projects:
4545
runs-on: ubuntu-22.04
46-
needs: [build_maxgraph_package]
46+
needs: [build_maxgraph_dev_package]
4747
strategy:
4848
# don't cancel running jobs even if one fails
4949
fail-fast: false
5050
matrix:
51-
project: [parcel-ts, rollup-ts, vitejs-ts]
51+
project:
52+
- lit-ts
53+
- parcel-ts
54+
- rollup-ts
55+
- vitejs-ts
5256
npm-package: ['release', 'development']
5357
defaults:
5458
run:

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Demonstrate how to integrate [maxGraph](https://github.com/maxGraph/maxGraph/) in projects.
44

5+
⏩ Find the live demo at https://maxgraph.github.io/maxgraph-integration-examples/
6+
57
## Getting started
68

79
### Setup
@@ -18,13 +20,16 @@ If the Node version is not installed, `nvm` will state how to install the requir
1820

1921
### Available projects
2022

23+
- [TypeScript with Lit](./projects/lit-ts/README.md)
2124
- [TypeScript with Parcel](./projects/parcel-ts/README.md)
2225
- [TypeScript with Rollup](./projects/rollup-ts/README.md)
2326
- [TypeScript with ViteJs](./projects/vitejs-ts/README.md)
2427

2528

2629
### <a id="maxgraph-dev-version"></a> Use the maxGraph development version
2730

31+
**Note**: the `maxGraph` development version is tested in a [GitHub Workflow](./.github/workflows/check-typescript-projects.yml) that uses the procedure explained below.
32+
2833
Build [maxGraph](https://github.com/maxGraph/maxGraph/) locally:
2934
- from the `maxGraph` project root, run: `npm install`
3035
- then, from the `packages/core` folder, run: `npm pack`

‎projects/lit-ts/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# lit-ts
2+
3+
Demonstrate how to integrate maxGraph in a Web Component created with [lit](https://lit.dev/).
4+
5+
The application is built with [Vite](https://vitejs.dev/).
6+
7+
## Setup
8+
9+
From the project root, run `npm install`.
10+
11+
If you want to use the maxGraph development version (built locally), see the README about maxGraph integration.
12+
13+
## Running the project
14+
15+
Run `npm run dev` and go to http://localhost:5173/
16+
17+
If you want to bundle the application, run `npm run build` and then run `npm run preview` to access to a preview of the
18+
bundle application.

‎projects/lit-ts/favicon.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎projects/lit-ts/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>maxGraph Lit integration example</title>
7+
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
8+
<script type="module" src="/src/index.ts"></script>
9+
</head>
10+
<body>
11+
<h1>maxGraph 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+
<maxgraph-graph></maxgraph-graph>
18+
</body>
19+
</html>

‎projects/lit-ts/package-lock.json‎

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

‎projects/lit-ts/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "maxgraph-ts-example-integrating-in-lit",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc && vite build --base ./",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"@maxgraph/core": "0.2.1",
12+
"lit": "~2.7.5"
13+
},
14+
"devDependencies": {
15+
"vite": "~4.3.9",
16+
"typescript": "~5.1.6"
17+
}
18+
}

0 commit comments

Comments
 (0)