diff --git a/modeler-esbuild/.gitignore b/modeler-esbuild/.gitignore new file mode 100644 index 00000000..04c01ba7 --- /dev/null +++ b/modeler-esbuild/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +dist/ \ No newline at end of file diff --git a/modeler-esbuild/.npmrc b/modeler-esbuild/.npmrc new file mode 100644 index 00000000..9cf94950 --- /dev/null +++ b/modeler-esbuild/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/modeler-esbuild/README.md b/modeler-esbuild/README.md new file mode 100644 index 00000000..7967f3ad --- /dev/null +++ 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 new file mode 100644 index 00000000..4f2cb8fb --- /dev/null +++ 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|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 new file mode 100644 index 00000000..ec27d533 --- /dev/null +++ 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 new file mode 100644 index 00000000..8ab58f7e --- /dev/null +++ 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 new file mode 100644 index 00000000..5c04be9c --- /dev/null +++ b/modeler-esbuild/src/index.html @@ -0,0 +1,28 @@ + + + + bpmn-js modeler demo + + + + +
+
+
+ + + diff --git a/modeler-esbuild/src/main.css b/modeler-esbuild/src/main.css new file mode 100644 index 00000000..423f29c6 --- /dev/null +++ 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 new file mode 100644 index 00000000..9bd09e93 --- /dev/null +++ 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 new file mode 100644 index 00000000..605e4a47 --- /dev/null +++ b/modeler-esbuild/src/resources/newDiagram.bpmn @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file