feat: add a project with maxGraph as a lit Web Component (#38)

maxGraph · Jul 6, 2023 · 7aba9f2 · 7aba9f2
1 parent d79ff3d
commit 7aba9f2
Show file tree

Hide file tree

Showing 12 changed files with 480 additions and 3 deletions.
diff --git a/.github/workflows/check-typescript-projects.yml b/.github/workflows/check-typescript-projects.yml
@@ -19,7 +19,7 @@ on:
       - 'projects/**/*'
 
 jobs:
-  build_maxgraph_package:
+  build_maxgraph_dev_package:
     runs-on: ubuntu-22.04
     steps:
      - uses: actions/checkout@v3
@@ -43,12 +43,16 @@ jobs:
 
   build_projects:
     runs-on: ubuntu-22.04
-    needs: [build_maxgraph_package]
+    needs: [build_maxgraph_dev_package]
     strategy:
       # don't cancel running jobs even if one fails
       fail-fast: false
       matrix:
-        project: [parcel-ts, rollup-ts, vitejs-ts]
+        project:
+          - lit-ts
+          - parcel-ts
+          - rollup-ts
+          - vitejs-ts
         npm-package: ['release', 'development']
     defaults:
       run:

diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 Demonstrate how to integrate [maxGraph](https://github.com/maxGraph/maxGraph/) in projects.
 
+⏩ Find the live demo at https://maxgraph.github.io/maxgraph-integration-examples/
+
 ## Getting started
 
 ### Setup
@@ -18,13 +20,16 @@ If the Node version is not installed, `nvm` will state how to install the requir
 
 ### Available projects
 
+- [TypeScript with Lit](./projects/lit-ts/README.md)
 - [TypeScript with Parcel](./projects/parcel-ts/README.md)
 - [TypeScript with Rollup](./projects/rollup-ts/README.md)
 - [TypeScript with ViteJs](./projects/vitejs-ts/README.md)
 
 
 ### <a id="maxgraph-dev-version"></a> Use the maxGraph development version
 
+**Note**: the `maxGraph` development version is tested in a [GitHub Workflow](./.github/workflows/check-typescript-projects.yml) that uses the procedure explained below.
+
 Build [maxGraph](https://github.com/maxGraph/maxGraph/) locally:
   - from the `maxGraph` project root, run: `npm install`
   - then, from the `packages/core` folder, run: `npm pack`

diff --git a/projects/lit-ts/README.md b/projects/lit-ts/README.md
@@ -0,0 +1,18 @@
+# lit-ts
+
+Demonstrate how to integrate maxGraph in a Web Component created with [lit](https://lit.dev/).
+
+The application is built with [Vite](https://vitejs.dev/).
+
+## Setup
+
+From the project root, run `npm install`.
+
+If you want to use the maxGraph development version (built locally), see the README about maxGraph integration.
+
+## Running the project
+
+Run `npm run dev` and go to http://localhost:5173/
+
+If you want to bundle the application, run `npm run build` and then run `npm run preview` to access to a preview of the
+bundle application.
diff --git a/projects/lit-ts/favicon.svg b/projects/lit-ts/favicon.svg
diff --git a/projects/lit-ts/index.html b/projects/lit-ts/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>maxGraph Lit integration example</title>
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <script type="module" src="/src/index.ts"></script>
+  </head>
+  <body>
+    <h1>maxGraph TypeScript example</h1>
+    <p>Display a test graph. Activated behaviours:</p>
+    <ul>
+      <li>Panning: use mouse right button</li>
+      <li>Cells selection with Rubberband: use mouse left button</li>
+    </ul>
+    <maxgraph-graph></maxgraph-graph>
+  </body>
+</html>
diff --git a/projects/lit-ts/package-lock.json b/projects/lit-ts/package-lock.json
diff --git a/projects/lit-ts/package.json b/projects/lit-ts/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "maxgraph-ts-example-integrating-in-lit",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build --base ./",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@maxgraph/core": "0.2.1",
+    "lit": "~2.7.5"
+  },
+  "devDependencies": {
+    "vite": "~4.3.9",
+    "typescript": "~5.1.6"
+  }
+}