Feature: New Modeler Example with Esbuild and Typescript

bpmn-io · Sep 4, 2022 · 8689fc0 · 8689fc0
1 parent 28ae32f
commit 8689fc0
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 0 deletions.
diff --git a/modeler-esbuild/.gitignore b/modeler-esbuild/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/modeler-esbuild/.npmrc b/modeler-esbuild/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/modeler-esbuild/README.md b/modeler-esbuild/README.md
@@ -0,0 +1,22 @@
+# bpmn-js Modeler
+
+This example uses [bpmn-js](https://github.com/bpmn-io/bpmn-js)
+
+## About
+
+build something like this: https://demo.bpmn.io/bpmn
+
+## Building the Example
+
+I choose pnpm, but feel free to use npm or yarn.
+
+
+```
+pnpm install
+```
+
+Build the example in nullkommanix using [esbuild](https://esbuild.github.io/) via
+
+```
+pnpm run build
+```
diff --git a/modeler-esbuild/bpmn.d.ts b/modeler-esbuild/bpmn.d.ts
@@ -0,0 +1,50 @@
+
+declare module 'bpmn-js/lib/Modeler' {
+
+    import BaseViewer from "bpmn-js/lib/BaseViewer";
+
+    /**
+     * Make the Modeler compatible with Typescript, as ES5 inheritance via prototype cant be typed.
+     */
+    export default class BpmnModeler {
+        /**
+         * @param options configuration options to pass to the viewer
+         * @param options.container the container to attach to
+         * @param options.width the width of the viewer
+         * @param options.height the height of the viewer
+         * @param options.moddleExtensions extension packages to provide
+         * @param options.modules a list of modules to override the default modules
+         * @param options.additionalModules a list of modules to use with the default modules
+         */
+        constructor(options?: {
+            container?: HTMLElement|string,
+            width?: string|number,
+            heigt?: string|number,
+            moddleExtensions?: object,
+            modules?: any[],
+            additionalModules?: any[],
+        });
+
+        /**
+         * @see BaseViewer.importXML
+         * 
+         * @param xml the BPMN 2.0 xml
+         * @param {ModdleElement<BPMNDiagram>|string} bpmnDiagram BPMN diagram or id of diagram to render (if not provided, the first one will be rendered)
+         */
+        importXML(xml: string, bpmnDiagram?: string): Promise<{warnings: string[]}>;
+
+        /**
+         * @see BaseViewer.saveXML
+         * 
+         * @param {Object} options export options
+         * @param {boolean} [options.format=false] output formatted XML
+         * @param {boolean} [options.preamble=true] output preamble
+         */
+        saveXML(options?: { format?: boolean, preamble?: boolean }): Promise<{xml: string}>;
+
+        /**
+         * @see BaseViewer.saveSVG
+         */
+        saveSVG(): Promise<{svg: string}>;
+    }
+}
diff --git a/modeler-esbuild/build.mjs b/modeler-esbuild/build.mjs
@@ -0,0 +1,18 @@
+import esbuild from "esbuild";
+
+esbuild.build({
+    entryPoints: [
+        "./src/main.ts",
+        "./src/main.css",
+        "./src/index.html",
+    ],
+    outdir: "./dist",
+    bundle: true,
+    minify: true,
+    loader: {
+        ".html": "copy",
+        ".bpmn": "text",
+        ".svg": "text",
+        ".eot": "text",
+    }
+})
diff --git a/modeler-esbuild/package.json b/modeler-esbuild/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "bpmn-js-example-esbuild",
+  "version": "0.0.0",
+  "description": "A bpmn-js modeler esbuild example",
+  "scripts": {
+    "build": "node build.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bpmn-io/bpmn-js-examples"
+  },
+  "keywords": [
+    "bpmnjs-example",
+    "esbuild"
+  ],
+  "author": {
+    "name": "Marc Henry Schultz",
+    "url": "https://github.com/mhsdesign"
+  },
+  "contributors": [
+    {
+      "name": "bpmn.io contributors",
+      "url": "https://github.com/bpmn-io"
+    }
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "bpmn-js": "^9.4.0",
+    "diagram-js": "^8.9.0",
+    "file-saver": "^2.0.5",
+    "lodash.debounce": "^4.0.8"
+  },
+  "devDependencies": {
+    "esbuild": "^0.15.6"
+  }
+}
diff --git a/modeler-esbuild/src/index.html b/modeler-esbuild/src/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>bpmn-js modeler demo</title>
+  <link rel="stylesheet" href="main.css" />
+  <script src="main.js" defer></script>
+</head>
+<body>
+  <div class="content">
+    <div class="canvas" id="js-canvas"></div>
+  </div>
+
+  <ul class="buttons">
+    <li>
+      download
+    </li>
+    <li>
+      <a id="js-download-diagram" href title="download bpmn diagram">
+        bpmn diagram
+      </a>
+    </li>
+    <li>
+      <a id="js-download-svg" href title="download as SVG image">
+        SVG image
+      </a>
+    </li>
+  </ul>
+</html>
diff --git a/modeler-esbuild/src/main.css b/modeler-esbuild/src/main.css
@@ -0,0 +1,47 @@
+@import url("bpmn-js/dist/assets/diagram-js.css");
+@import url("bpmn-js/dist/assets/bpmn-js.css");
+@import url("bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css");
+
+* {
+  box-sizing: border-box;
+}
+
+body,
+html {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  font-size: 12px;
+
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.content,
+.content > div {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.buttons {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.buttons > li {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.buttons > li > a {
+  background: #ddd;
+  border: solid 1px #666;
+  display: inline-block;
+  padding: 5px;
+}
diff --git a/modeler-esbuild/src/main.ts b/modeler-esbuild/src/main.ts
@@ -0,0 +1,32 @@
+import BpmnModeler from 'bpmn-js/lib/Modeler';
+
+/** @ts-expect-error */
+import { saveAs } from 'file-saver';
+
+/** @ts-expect-error */
+import newDiagramXML from "./resources/newDiagram.bpmn";
+
+const bpmnModeler = new BpmnModeler({
+  container: "#js-canvas",
+});
+
+const openDiagram = (xml) => {
+  return bpmnModeler.importXML(xml)
+}
+
+openDiagram(newDiagramXML);
+
+const downloadCmmnLink = document.getElementById("js-download-diagram")!;
+const downloadSvgLink = document.getElementById("js-download-svg")!;
+
+downloadCmmnLink.addEventListener("click", async (e) => {
+  e.preventDefault();
+  const { xml } = await bpmnModeler.saveXML({ format: true })
+  saveAs(new Blob([xml], {type:"application/bpmn20-xml;charset=UTF-8"}), "diagram.bpmn")
+});
+
+downloadSvgLink.addEventListener("click", async (e) => {
+  e.preventDefault();
+  const { svg } = await bpmnModeler.saveSVG()
+  saveAs(new Blob([svg], {type:"image/svg+xml;charset=utf-8"}), "diagram.svg")
+});
diff --git a/modeler-esbuild/src/resources/newDiagram.bpmn b/modeler-esbuild/src/resources/newDiagram.bpmn
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn2:process id="Process_1" isExecutable="false">
+    <bpmn2:startEvent id="StartEvent_1"/>
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>