From 7aba9f2019d7a62a2fe12333d5f1118f9810254a Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Thu, 6 Jul 2023 06:49:26 +0200
Subject: [PATCH] feat: add a project with maxGraph as a lit Web Component
(#38)
---
.../workflows/check-typescript-projects.yml | 10 +-
README.md | 5 +
projects/lit-ts/README.md | 18 ++
projects/lit-ts/favicon.svg | 13 +
projects/lit-ts/index.html | 19 ++
projects/lit-ts/package-lock.json | 249 ++++++++++++++++++
projects/lit-ts/package.json | 18 ++
projects/lit-ts/src/custom-shapes.ts | 43 +++
projects/lit-ts/src/index.ts | 49 ++++
projects/lit-ts/src/style.css | 37 +++
projects/lit-ts/src/vite-env.d.ts | 1 +
projects/lit-ts/tsconfig.json | 21 ++
12 files changed, 480 insertions(+), 3 deletions(-)
create mode 100644 projects/lit-ts/README.md
create mode 100644 projects/lit-ts/favicon.svg
create mode 100644 projects/lit-ts/index.html
create mode 100644 projects/lit-ts/package-lock.json
create mode 100644 projects/lit-ts/package.json
create mode 100644 projects/lit-ts/src/custom-shapes.ts
create mode 100644 projects/lit-ts/src/index.ts
create mode 100644 projects/lit-ts/src/style.css
create mode 100644 projects/lit-ts/src/vite-env.d.ts
create mode 100644 projects/lit-ts/tsconfig.json
diff --git a/.github/workflows/check-typescript-projects.yml b/.github/workflows/check-typescript-projects.yml
index 6052b9c..23f0402 100644
--- 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
index 939bd0e..a0f1176 100644
--- 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,6 +20,7 @@ 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)
@@ -25,6 +28,8 @@ If the Node version is not installed, `nvm` will state how to install the requir
### 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
new file mode 100644
index 0000000..df9257f
--- /dev/null
+++ 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
new file mode 100644
index 0000000..20eaec4
--- /dev/null
+++ b/projects/lit-ts/favicon.svg
@@ -0,0 +1,13 @@
+
\ No newline at end of file
diff --git a/projects/lit-ts/index.html b/projects/lit-ts/index.html
new file mode 100644
index 0000000..cab0f7c
--- /dev/null
+++ b/projects/lit-ts/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ maxGraph Lit integration example
+
+
+
+
+
maxGraph TypeScript example
+
Display a test graph. Activated behaviours:
+
+
Panning: use mouse right button
+
Cells selection with Rubberband: use mouse left button