├── .github └── workflows │ └── CI.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── example ├── README.md ├── docs │ └── screenshot.png ├── package-lock.json ├── package.json └── public │ ├── diagram.bpmn │ └── index.html ├── package-lock.json ├── package.json ├── renovate.json ├── rollup.config.js └── src └── index.jsx /.github/workflows/CI.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [ push, pull_request ] 3 | jobs: 4 | Build: 5 | 6 | strategy: 7 | matrix: 8 | os: [ ubuntu-latest ] 9 | node-version: [ 16 ] 10 | 11 | runs-on: ${{ matrix.os }} 12 | 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v4 16 | - name: Use Node.js 17 | uses: actions/setup-node@v4 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | cache: 'npm' 21 | - name: Install dependencies 22 | run: npm ci 23 | - name: Build 24 | run: npm run all 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to [react-bpmn](https://github.com/bpmn-io/react-bpmn) are documented here. We use [semantic versioning](http://semver.org/) for releases. 4 | 5 | ## Unreleased 6 | 7 | ___Note:__ Yet to be released changes appear here._ 8 | 9 | ## 0.2.0 10 | 11 | * `FEAT`: allow open pre-loaded diagram (via `diagramXML` prop) 12 | 13 | ## 0.1.1 14 | 15 | * `FIX`: correct url update handling 16 | 17 | ## 0.1.0 18 | 19 | _Initial Release._ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019-present Camunda Services GmbH 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-bpmn 2 | 3 | [![CI](https://github.com/bpmn-io/react-bpmn/workflows/CI/badge.svg)](https://github.com/bpmn-io/react-bpmn/actions?query=workflow%3ACI) 4 | 5 | Use [bpmn-js](https://github.com/bpmn-io/bpmn-js) to display BPMN 2.0 diagrams in a [React](https://reactjs.org/) application. 6 | 7 | 8 | ## Usage 9 | 10 | ```javascript 11 | import ReactBpmn from 'react-bpmn'; 12 | 13 | 14 | function App(props) { 15 | 16 | function onShown() { 17 | console.log('diagram shown'); 18 | } 19 | 20 | function onLoading() { 21 | console.log('diagram loading'); 22 | } 23 | 24 | function onError(err) { 25 | console.log('failed to show diagram'); 26 | } 27 | 28 | return ( 29 | 35 | ); 36 | } 37 | ``` 38 | 39 | ## Development 40 | 41 | To get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) installed. 42 | As soon as you are set up, clone the project and execute 43 | 44 | ``` 45 | npm install 46 | npm run all 47 | ``` 48 | 49 | ## Example 50 | 51 | To run the example, execute `npm run start` and open http://localhost:9869/public in your Webbrowser. 52 | 53 | ## Resources 54 | 55 | * [Issues](https://github.com/bpmn-io/react-bpmn/issues) 56 | * [Example](./example) 57 | 58 | 59 | ## License 60 | 61 | MIT -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # react-bpmn Example 2 | 3 | An example how to use [react-bpmn](../) to display a BPMN 2.0 diagram in a React app. 4 | 5 | ![react-bpmn example screenshot](./docs/screenshot.png) 6 | 7 | 8 | ## Run the Example 9 | 10 | To run the example: 11 | 12 | ``` 13 | npm install 14 | npm start 15 | ``` 16 | 17 | This puts up the example to [localhost:9869/public/index.html](http://localhost:9869/public/index.html). 18 | 19 | 20 | ## License 21 | 22 | MIT -------------------------------------------------------------------------------- /example/docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bpmn-io/react-bpmn/333de6b855a5ea699e1f6282a5d1d8263ed96bc5/example/docs/screenshot.png -------------------------------------------------------------------------------- /example/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bpmn-example", 3 | "version": "0.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "react-bpmn-example", 9 | "version": "0.0.0", 10 | "license": "MIT", 11 | "dependencies": { 12 | "bpmn-js": "^18.0.0", 13 | "react-bpmn": "^0.2.0" 14 | }, 15 | "devDependencies": { 16 | "sirv-cli": "^3.0.0" 17 | } 18 | }, 19 | "node_modules/@bpmn-io/diagram-js-ui": { 20 | "version": "0.2.3", 21 | "resolved": "https://registry.npmjs.org/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.3.tgz", 22 | "integrity": "sha512-OGyjZKvGK8tHSZ0l7RfeKhilGoOGtFDcoqSGYkX0uhFlo99OVZ9Jn1K7TJGzcE9BdKwvA5Y5kGqHEhdTxHvFfw==", 23 | "dependencies": { 24 | "htm": "^3.1.1", 25 | "preact": "^10.11.2" 26 | } 27 | }, 28 | "node_modules/@polka/url": { 29 | "version": "1.0.0-next.28", 30 | "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz", 31 | "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==", 32 | "dev": true 33 | }, 34 | "node_modules/bpmn-js": { 35 | "version": "18.0.0", 36 | "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.0.0.tgz", 37 | "integrity": "sha512-eZR4hqk2BT0m9jAGGtp/f1TD0m7LXXKfYle99q75d+NjSmxetIuvxGn48S9W+H8arJ7vgsls2GELzXoDuEE0eg==", 38 | "dependencies": { 39 | "bpmn-moddle": "^9.0.1", 40 | "diagram-js": "^15.1.0", 41 | "diagram-js-direct-editing": "^3.2.0", 42 | "ids": "^1.0.5", 43 | "inherits-browser": "^0.1.0", 44 | "min-dash": "^4.1.1", 45 | "min-dom": "^4.2.1", 46 | "tiny-svg": "^3.1.2" 47 | }, 48 | "engines": { 49 | "node": "*" 50 | } 51 | }, 52 | "node_modules/bpmn-moddle": { 53 | "version": "9.0.1", 54 | "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-9.0.1.tgz", 55 | "integrity": "sha512-jO2P5RBx0cZCCd+imqhpNE5anttaYuGd71u76NEA/qMZwJSW1t5ETAtw9/E2InfiPU2w0TR8oxPyopJXRc9VQg==", 56 | "dependencies": { 57 | "min-dash": "^4.2.1", 58 | "moddle": "^7.0.0", 59 | "moddle-xml": "^11.0.0" 60 | }, 61 | "engines": { 62 | "node": ">= 18" 63 | } 64 | }, 65 | "node_modules/clsx": { 66 | "version": "2.1.1", 67 | "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", 68 | "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", 69 | "engines": { 70 | "node": ">=6" 71 | } 72 | }, 73 | "node_modules/component-event": { 74 | "version": "0.2.1", 75 | "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz", 76 | "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==" 77 | }, 78 | "node_modules/console-clear": { 79 | "version": "1.1.1", 80 | "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz", 81 | "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==", 82 | "dev": true, 83 | "engines": { 84 | "node": ">=4" 85 | } 86 | }, 87 | "node_modules/diagram-js": { 88 | "version": "15.1.0", 89 | "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.1.0.tgz", 90 | "integrity": "sha512-Lrixuc4as/PGrkhf23k8yss+rLhyH2Zrln/CJxex0nOfC2P0ODb5lsDY0+MdDgjP2ADFFINqUXAGFcSSL8tw4g==", 91 | "dependencies": { 92 | "@bpmn-io/diagram-js-ui": "^0.2.3", 93 | "clsx": "^2.1.0", 94 | "didi": "^10.2.2", 95 | "inherits-browser": "^0.1.0", 96 | "min-dash": "^4.1.0", 97 | "min-dom": "^4.2.1", 98 | "object-refs": "^0.4.0", 99 | "path-intersection": "^3.0.0", 100 | "tiny-svg": "^3.1.2" 101 | }, 102 | "engines": { 103 | "node": "*" 104 | } 105 | }, 106 | "node_modules/diagram-js-direct-editing": { 107 | "version": "3.2.0", 108 | "resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-3.2.0.tgz", 109 | "integrity": "sha512-+pyxeQGBSdLiZX0/tmmsm2qZSvm9YtVzod5W3RMHSTR7VrkUMD6E7EX/W9JQv3ebxO7oIdqFmytmNDDpSHnYEw==", 110 | "dependencies": { 111 | "min-dash": "^4.0.0", 112 | "min-dom": "^4.2.1" 113 | }, 114 | "engines": { 115 | "node": "*" 116 | }, 117 | "peerDependencies": { 118 | "diagram-js": "*" 119 | } 120 | }, 121 | "node_modules/didi": { 122 | "version": "10.2.2", 123 | "resolved": "https://registry.npmjs.org/didi/-/didi-10.2.2.tgz", 124 | "integrity": "sha512-l8NYkYFXV1izHI65EyT8EXOjUZtKmQkHLTT89cSP7HU5J/G7AOj0dXKtLc04EXYlga99PBY18IPjOeZ+c3DI4w==", 125 | "engines": { 126 | "node": ">= 16" 127 | } 128 | }, 129 | "node_modules/domify": { 130 | "version": "1.4.2", 131 | "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.2.tgz", 132 | "integrity": "sha512-m4yreHcUWHBncGVV7U+yQzc12vIlq0jMrtHZ5mW6dQMiL/7skSYNVX9wqKwOtyO9SGCgevrAFEgOCAHmamHTUA==", 133 | "funding": { 134 | "url": "https://github.com/sponsors/sindresorhus" 135 | } 136 | }, 137 | "node_modules/get-port": { 138 | "version": "5.1.1", 139 | "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz", 140 | "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==", 141 | "dev": true, 142 | "engines": { 143 | "node": ">=8" 144 | }, 145 | "funding": { 146 | "url": "https://github.com/sponsors/sindresorhus" 147 | } 148 | }, 149 | "node_modules/htm": { 150 | "version": "3.1.1", 151 | "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz", 152 | "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==" 153 | }, 154 | "node_modules/ids": { 155 | "version": "1.0.5", 156 | "resolved": "https://registry.npmjs.org/ids/-/ids-1.0.5.tgz", 157 | "integrity": "sha512-XQ0yom/4KWTL29sLG+tyuycy7UmeaM/79GRtSJq6IG9cJGIPeBz5kwDCguie3TwxaMNIc3WtPi0cTa1XYHicpw==" 158 | }, 159 | "node_modules/inherits-browser": { 160 | "version": "0.1.0", 161 | "resolved": "https://registry.npmjs.org/inherits-browser/-/inherits-browser-0.1.0.tgz", 162 | "integrity": "sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==" 163 | }, 164 | "node_modules/kleur": { 165 | "version": "4.1.5", 166 | "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", 167 | "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==", 168 | "dev": true, 169 | "engines": { 170 | "node": ">=6" 171 | } 172 | }, 173 | "node_modules/local-access": { 174 | "version": "1.1.0", 175 | "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz", 176 | "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==", 177 | "dev": true, 178 | "engines": { 179 | "node": ">=6" 180 | } 181 | }, 182 | "node_modules/min-dash": { 183 | "version": "4.2.2", 184 | "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz", 185 | "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==" 186 | }, 187 | "node_modules/min-dom": { 188 | "version": "4.2.1", 189 | "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz", 190 | "integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==", 191 | "dependencies": { 192 | "component-event": "^0.2.1", 193 | "domify": "^1.4.1", 194 | "min-dash": "^4.2.1" 195 | } 196 | }, 197 | "node_modules/moddle": { 198 | "version": "7.0.0", 199 | "resolved": "https://registry.npmjs.org/moddle/-/moddle-7.0.0.tgz", 200 | "integrity": "sha512-Hpte2hfKDwoZWPvDngsEHjloPnO+sKMUVkAPc0r9PrpnVLqsyPUTV0ZQU8CAp87YmRZ9QzeQMJxdKbaP9vEIKA==", 201 | "dependencies": { 202 | "min-dash": "^4.2.1" 203 | } 204 | }, 205 | "node_modules/moddle-xml": { 206 | "version": "11.0.0", 207 | "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-11.0.0.tgz", 208 | "integrity": "sha512-L3Sseepfcq9Uy0iIfqEDTXSoYLva1Y/JGbN/4AMOeQ6cqbu8Ma/SDJIdOFm7smsAa64j2z3SwCGG3FIilQVnUg==", 209 | "dependencies": { 210 | "min-dash": "^4.0.0", 211 | "saxen": "^10.0.0" 212 | }, 213 | "engines": { 214 | "node": ">= 18" 215 | }, 216 | "peerDependencies": { 217 | "moddle": ">= 6.2.0" 218 | } 219 | }, 220 | "node_modules/mri": { 221 | "version": "1.1.6", 222 | "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz", 223 | "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==", 224 | "dev": true, 225 | "engines": { 226 | "node": ">=4" 227 | } 228 | }, 229 | "node_modules/mrmime": { 230 | "version": "2.0.0", 231 | "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", 232 | "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==", 233 | "dev": true, 234 | "engines": { 235 | "node": ">=10" 236 | } 237 | }, 238 | "node_modules/object-refs": { 239 | "version": "0.4.0", 240 | "resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz", 241 | "integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==", 242 | "engines": { 243 | "node": "*" 244 | } 245 | }, 246 | "node_modules/path-intersection": { 247 | "version": "3.0.0", 248 | "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-3.0.0.tgz", 249 | "integrity": "sha512-Rdnfb33F9+qadWe3ZyzDpw3KSXQhsK1MByL44QzSDIQtMAujd0zFx9f+kt4SaQp1JOoXl5pl5K28EoEuAEgarA==", 250 | "engines": { 251 | "node": ">= 14.20" 252 | } 253 | }, 254 | "node_modules/preact": { 255 | "version": "10.24.3", 256 | "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz", 257 | "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==", 258 | "funding": { 259 | "type": "opencollective", 260 | "url": "https://opencollective.com/preact" 261 | } 262 | }, 263 | "node_modules/react-bpmn": { 264 | "version": "0.2.0", 265 | "resolved": "https://registry.npmjs.org/react-bpmn/-/react-bpmn-0.2.0.tgz", 266 | "integrity": "sha512-GBIlVw7On32k2IdCHbbN/2y9r7C5iLyzKvBmMclqQ/vMOXH5QEiCcO7qV/70LETvLLL1RZO/AhrvCIYD1pBZqQ==" 267 | }, 268 | "node_modules/sade": { 269 | "version": "1.7.4", 270 | "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz", 271 | "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==", 272 | "dev": true, 273 | "dependencies": { 274 | "mri": "^1.1.0" 275 | }, 276 | "engines": { 277 | "node": ">= 6" 278 | } 279 | }, 280 | "node_modules/saxen": { 281 | "version": "10.0.0", 282 | "resolved": "https://registry.npmjs.org/saxen/-/saxen-10.0.0.tgz", 283 | "integrity": "sha512-RXsmWok/SAWqOG/f5ADEz51DN9WtZEzqih3e08ranldcaXekxjx8NBKjGh/y5hlowjo0JH/LekBu6gtPFD1G6g==", 284 | "engines": { 285 | "node": ">= 18" 286 | } 287 | }, 288 | "node_modules/semiver": { 289 | "version": "1.1.0", 290 | "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz", 291 | "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==", 292 | "dev": true, 293 | "engines": { 294 | "node": ">=6" 295 | } 296 | }, 297 | "node_modules/sirv": { 298 | "version": "3.0.0", 299 | "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz", 300 | "integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==", 301 | "dev": true, 302 | "dependencies": { 303 | "@polka/url": "^1.0.0-next.24", 304 | "mrmime": "^2.0.0", 305 | "totalist": "^3.0.0" 306 | }, 307 | "engines": { 308 | "node": ">=18" 309 | } 310 | }, 311 | "node_modules/sirv-cli": { 312 | "version": "3.0.0", 313 | "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-3.0.0.tgz", 314 | "integrity": "sha512-p88yHl8DmTOUJroRiW2o9ezJc/YRLxphBydX2NGQc3naKBA09B3EM4Q/yaN8FYF0e50fRSZP7dyatr72b1u5Jw==", 315 | "dev": true, 316 | "dependencies": { 317 | "console-clear": "^1.1.0", 318 | "get-port": "^5.1.1", 319 | "kleur": "^4.1.4", 320 | "local-access": "^1.0.1", 321 | "sade": "^1.6.0", 322 | "semiver": "^1.0.0", 323 | "sirv": "^3.0.0", 324 | "tinydate": "^1.0.0" 325 | }, 326 | "bin": { 327 | "sirv": "bin.js" 328 | }, 329 | "engines": { 330 | "node": ">=18" 331 | } 332 | }, 333 | "node_modules/tiny-svg": { 334 | "version": "3.1.3", 335 | "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-3.1.3.tgz", 336 | "integrity": "sha512-9mwnPqXInRsBmH/DO6NMxBE++9LsqpVXQSSTZGc5bomoKKvL5OX/Hlotw7XVXP6XLRcHWIzZpxfovGqWKgCypQ==" 337 | }, 338 | "node_modules/tinydate": { 339 | "version": "1.3.0", 340 | "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz", 341 | "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==", 342 | "dev": true, 343 | "engines": { 344 | "node": ">=4" 345 | } 346 | }, 347 | "node_modules/totalist": { 348 | "version": "3.0.0", 349 | "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz", 350 | "integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==", 351 | "dev": true, 352 | "engines": { 353 | "node": ">=6" 354 | } 355 | } 356 | }, 357 | "dependencies": { 358 | "@bpmn-io/diagram-js-ui": { 359 | "version": "0.2.3", 360 | "resolved": "https://registry.npmjs.org/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.3.tgz", 361 | "integrity": "sha512-OGyjZKvGK8tHSZ0l7RfeKhilGoOGtFDcoqSGYkX0uhFlo99OVZ9Jn1K7TJGzcE9BdKwvA5Y5kGqHEhdTxHvFfw==", 362 | "requires": { 363 | "htm": "^3.1.1", 364 | "preact": "^10.11.2" 365 | } 366 | }, 367 | "@polka/url": { 368 | "version": "1.0.0-next.28", 369 | "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz", 370 | "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==", 371 | "dev": true 372 | }, 373 | "bpmn-js": { 374 | "version": "18.0.0", 375 | "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.0.0.tgz", 376 | "integrity": "sha512-eZR4hqk2BT0m9jAGGtp/f1TD0m7LXXKfYle99q75d+NjSmxetIuvxGn48S9W+H8arJ7vgsls2GELzXoDuEE0eg==", 377 | "requires": { 378 | "bpmn-moddle": "^9.0.1", 379 | "diagram-js": "^15.1.0", 380 | "diagram-js-direct-editing": "^3.2.0", 381 | "ids": "^1.0.5", 382 | "inherits-browser": "^0.1.0", 383 | "min-dash": "^4.1.1", 384 | "min-dom": "^4.2.1", 385 | "tiny-svg": "^3.1.2" 386 | } 387 | }, 388 | "bpmn-moddle": { 389 | "version": "9.0.1", 390 | "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-9.0.1.tgz", 391 | "integrity": "sha512-jO2P5RBx0cZCCd+imqhpNE5anttaYuGd71u76NEA/qMZwJSW1t5ETAtw9/E2InfiPU2w0TR8oxPyopJXRc9VQg==", 392 | "requires": { 393 | "min-dash": "^4.2.1", 394 | "moddle": "^7.0.0", 395 | "moddle-xml": "^11.0.0" 396 | } 397 | }, 398 | "clsx": { 399 | "version": "2.1.1", 400 | "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", 401 | "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" 402 | }, 403 | "component-event": { 404 | "version": "0.2.1", 405 | "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz", 406 | "integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==" 407 | }, 408 | "console-clear": { 409 | "version": "1.1.1", 410 | "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz", 411 | "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==", 412 | "dev": true 413 | }, 414 | "diagram-js": { 415 | "version": "15.1.0", 416 | "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.1.0.tgz", 417 | "integrity": "sha512-Lrixuc4as/PGrkhf23k8yss+rLhyH2Zrln/CJxex0nOfC2P0ODb5lsDY0+MdDgjP2ADFFINqUXAGFcSSL8tw4g==", 418 | "requires": { 419 | "@bpmn-io/diagram-js-ui": "^0.2.3", 420 | "clsx": "^2.1.0", 421 | "didi": "^10.2.2", 422 | "inherits-browser": "^0.1.0", 423 | "min-dash": "^4.1.0", 424 | "min-dom": "^4.2.1", 425 | "object-refs": "^0.4.0", 426 | "path-intersection": "^3.0.0", 427 | "tiny-svg": "^3.1.2" 428 | } 429 | }, 430 | "diagram-js-direct-editing": { 431 | "version": "3.2.0", 432 | "resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-3.2.0.tgz", 433 | "integrity": "sha512-+pyxeQGBSdLiZX0/tmmsm2qZSvm9YtVzod5W3RMHSTR7VrkUMD6E7EX/W9JQv3ebxO7oIdqFmytmNDDpSHnYEw==", 434 | "requires": { 435 | "min-dash": "^4.0.0", 436 | "min-dom": "^4.2.1" 437 | } 438 | }, 439 | "didi": { 440 | "version": "10.2.2", 441 | "resolved": "https://registry.npmjs.org/didi/-/didi-10.2.2.tgz", 442 | "integrity": "sha512-l8NYkYFXV1izHI65EyT8EXOjUZtKmQkHLTT89cSP7HU5J/G7AOj0dXKtLc04EXYlga99PBY18IPjOeZ+c3DI4w==" 443 | }, 444 | "domify": { 445 | "version": "1.4.2", 446 | "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.2.tgz", 447 | "integrity": "sha512-m4yreHcUWHBncGVV7U+yQzc12vIlq0jMrtHZ5mW6dQMiL/7skSYNVX9wqKwOtyO9SGCgevrAFEgOCAHmamHTUA==" 448 | }, 449 | "get-port": { 450 | "version": "5.1.1", 451 | "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz", 452 | "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==", 453 | "dev": true 454 | }, 455 | "htm": { 456 | "version": "3.1.1", 457 | "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz", 458 | "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==" 459 | }, 460 | "ids": { 461 | "version": "1.0.5", 462 | "resolved": "https://registry.npmjs.org/ids/-/ids-1.0.5.tgz", 463 | "integrity": "sha512-XQ0yom/4KWTL29sLG+tyuycy7UmeaM/79GRtSJq6IG9cJGIPeBz5kwDCguie3TwxaMNIc3WtPi0cTa1XYHicpw==" 464 | }, 465 | "inherits-browser": { 466 | "version": "0.1.0", 467 | "resolved": "https://registry.npmjs.org/inherits-browser/-/inherits-browser-0.1.0.tgz", 468 | "integrity": "sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==" 469 | }, 470 | "kleur": { 471 | "version": "4.1.5", 472 | "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", 473 | "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==", 474 | "dev": true 475 | }, 476 | "local-access": { 477 | "version": "1.1.0", 478 | "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz", 479 | "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==", 480 | "dev": true 481 | }, 482 | "min-dash": { 483 | "version": "4.2.2", 484 | "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz", 485 | "integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==" 486 | }, 487 | "min-dom": { 488 | "version": "4.2.1", 489 | "resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz", 490 | "integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==", 491 | "requires": { 492 | "component-event": "^0.2.1", 493 | "domify": "^1.4.1", 494 | "min-dash": "^4.2.1" 495 | } 496 | }, 497 | "moddle": { 498 | "version": "7.0.0", 499 | "resolved": "https://registry.npmjs.org/moddle/-/moddle-7.0.0.tgz", 500 | "integrity": "sha512-Hpte2hfKDwoZWPvDngsEHjloPnO+sKMUVkAPc0r9PrpnVLqsyPUTV0ZQU8CAp87YmRZ9QzeQMJxdKbaP9vEIKA==", 501 | "requires": { 502 | "min-dash": "^4.2.1" 503 | } 504 | }, 505 | "moddle-xml": { 506 | "version": "11.0.0", 507 | "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-11.0.0.tgz", 508 | "integrity": "sha512-L3Sseepfcq9Uy0iIfqEDTXSoYLva1Y/JGbN/4AMOeQ6cqbu8Ma/SDJIdOFm7smsAa64j2z3SwCGG3FIilQVnUg==", 509 | "requires": { 510 | "min-dash": "^4.0.0", 511 | "saxen": "^10.0.0" 512 | } 513 | }, 514 | "mri": { 515 | "version": "1.1.6", 516 | "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz", 517 | "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==", 518 | "dev": true 519 | }, 520 | "mrmime": { 521 | "version": "2.0.0", 522 | "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", 523 | "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==", 524 | "dev": true 525 | }, 526 | "object-refs": { 527 | "version": "0.4.0", 528 | "resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz", 529 | "integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==" 530 | }, 531 | "path-intersection": { 532 | "version": "3.0.0", 533 | "resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-3.0.0.tgz", 534 | "integrity": "sha512-Rdnfb33F9+qadWe3ZyzDpw3KSXQhsK1MByL44QzSDIQtMAujd0zFx9f+kt4SaQp1JOoXl5pl5K28EoEuAEgarA==" 535 | }, 536 | "preact": { 537 | "version": "10.24.3", 538 | "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz", 539 | "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==" 540 | }, 541 | "react-bpmn": { 542 | "version": "0.2.0", 543 | "resolved": "https://registry.npmjs.org/react-bpmn/-/react-bpmn-0.2.0.tgz", 544 | "integrity": "sha512-GBIlVw7On32k2IdCHbbN/2y9r7C5iLyzKvBmMclqQ/vMOXH5QEiCcO7qV/70LETvLLL1RZO/AhrvCIYD1pBZqQ==" 545 | }, 546 | "sade": { 547 | "version": "1.7.4", 548 | "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz", 549 | "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==", 550 | "dev": true, 551 | "requires": { 552 | "mri": "^1.1.0" 553 | } 554 | }, 555 | "saxen": { 556 | "version": "10.0.0", 557 | "resolved": "https://registry.npmjs.org/saxen/-/saxen-10.0.0.tgz", 558 | "integrity": "sha512-RXsmWok/SAWqOG/f5ADEz51DN9WtZEzqih3e08ranldcaXekxjx8NBKjGh/y5hlowjo0JH/LekBu6gtPFD1G6g==" 559 | }, 560 | "semiver": { 561 | "version": "1.1.0", 562 | "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz", 563 | "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==", 564 | "dev": true 565 | }, 566 | "sirv": { 567 | "version": "3.0.0", 568 | "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz", 569 | "integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==", 570 | "dev": true, 571 | "requires": { 572 | "@polka/url": "^1.0.0-next.24", 573 | "mrmime": "^2.0.0", 574 | "totalist": "^3.0.0" 575 | } 576 | }, 577 | "sirv-cli": { 578 | "version": "3.0.0", 579 | "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-3.0.0.tgz", 580 | "integrity": "sha512-p88yHl8DmTOUJroRiW2o9ezJc/YRLxphBydX2NGQc3naKBA09B3EM4Q/yaN8FYF0e50fRSZP7dyatr72b1u5Jw==", 581 | "dev": true, 582 | "requires": { 583 | "console-clear": "^1.1.0", 584 | "get-port": "^5.1.1", 585 | "kleur": "^4.1.4", 586 | "local-access": "^1.0.1", 587 | "sade": "^1.6.0", 588 | "semiver": "^1.0.0", 589 | "sirv": "^3.0.0", 590 | "tinydate": "^1.0.0" 591 | } 592 | }, 593 | "tiny-svg": { 594 | "version": "3.1.3", 595 | "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-3.1.3.tgz", 596 | "integrity": "sha512-9mwnPqXInRsBmH/DO6NMxBE++9LsqpVXQSSTZGc5bomoKKvL5OX/Hlotw7XVXP6XLRcHWIzZpxfovGqWKgCypQ==" 597 | }, 598 | "tinydate": { 599 | "version": "1.3.0", 600 | "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz", 601 | "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==", 602 | "dev": true 603 | }, 604 | "totalist": { 605 | "version": "3.0.0", 606 | "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz", 607 | "integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==", 608 | "dev": true 609 | } 610 | } 611 | } 612 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bpmn-example", 3 | "version": "0.0.0", 4 | "description": "An example using react-bpmn inside a React application", 5 | "private": true, 6 | "scripts": { 7 | "start": "sirv . start --dev --port=9869" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "bpmn-js": "^18.0.0", 12 | "react-bpmn": "^0.2.0" 13 | }, 14 | "devDependencies": { 15 | "sirv-cli": "^3.0.0" 16 | } 17 | } -------------------------------------------------------------------------------- /example/public/diagram.bpmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26 11 | sid-E49425CF-8287-4798-B622-D2A7D78EF00B 12 | sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138 13 | sid-E433566C-2289-4BEB-A19C-1697048900D2 14 | sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9 15 | SCAN_OK 16 | 17 | 18 | 19 | sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D 20 | sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A 21 | 22 | 23 | sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB 24 | sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C 25 | 26 | 27 | sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD 28 | 29 | 30 | sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C 31 | 32 | 33 | sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD 34 | sid-337A23B9-A923-4CCE-B613-3E247B773CCE 35 | sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D 36 | 37 | 38 | sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A 39 | sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB 40 | sid-337A23B9-A923-4CCE-B613-3E247B773CCE 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | react-bpmn example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 29 | 30 | 31 |
32 |

Display BPMN 2.0 Diagrams Using React

33 | 34 |

35 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a tincidunt dolor. Nam semper est ut mauris cursus, vel laoreet nunc vehicula. Mauris nec semper ipsum. Integer feugiat mi at elementum fringilla. Nunc malesuada ante sed ligula pretium, eu lobortis lorem rhoncus. Praesent et ipsum ante. Aliquam est mi, ultrices ut neque eget, mollis pulvinar sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam auctor porta sapien in venenatis. 36 |

37 | 38 |

39 | In fringilla suscipit odio quis tincidunt. Morbi felis elit, blandit a volutpat eget, rutrum ut mi. Duis ac orci at nibh semper vehicula. Quisque vulputate, nibh vitae laoreet convallis, urna erat imperdiet eros, et interdum arcu arcu ac risus. Maecenas in tellus nisi. Mauris quis lectus luctus, condimentum orci eu, rhoncus sapien. Aliquam at lobortis mauris, eget facilisis arcu. Quisque metus purus, rhoncus et tortor id, ornare maximus neque. Donec et ex tincidunt, malesuada lacus in, volutpat eros. Cras nisi arcu, dapibus quis odio sit amet, placerat blandit elit. Nullam at dictum mauris. Nulla feugiat elit ex, a pulvinar velit faucibus a. Nulla tincidunt velit purus, in faucibus ligula ornare venenatis. 40 |

41 | 42 |
43 | 44 |

45 | Ut vestibulum, magna at molestie tempus, enim sem molestie est, vel tincidunt orci leo vel sapien. Vivamus convallis, purus in rhoncus ultricies, mauris sapien condimentum sapien, vel porta urna est eu leo. Nam dui erat, venenatis at metus ut, rutrum rutrum lacus. Fusce non eros vehicula, aliquet nibh vitae, bibendum dolor. Sed hendrerit lectus ex. Mauris id venenatis metus. In hac habitasse platea dictumst. 46 |

47 | 48 |

49 | Etiam molestie, erat eget tincidunt rutrum, nulla odio pulvinar nibh, in pulvinar felis mauris a nunc. Sed eu ullamcorper ex, id tincidunt metus. Quisque lectus enim, vehicula eget aliquam sit amet, semper ut nisl. Vivamus ultrices, cras odio massa, sagittis in luctus sed, mattis eu massa. Nam erat nibh, pulvinar vel hendrerit quis, ultricies eu sapien. Integer fringilla sapien ex, et posuere arcu euismod et. 50 |

51 | 52 |

53 | Suspendisse potenti. In ut lorem vitae dolor molestie commodo. Vivamus mattis gravida metus, porttitor ornare augue lacinia suscipit. Duis condimentum fringilla nisl, non consequat odio mollis id. Nulla tincidunt interdum elit, sed tristique ex laoreet lobortis. Suspendisse in felis vitae magna convallis semper. Nullam odio risus, venenatis eget erat ac, pretium aliquet urna. Duis luctus lobortis maximus. 54 |

55 |
56 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bpmn", 3 | "version": "0.2.0", 4 | "description": "Embed BPMN 2.0 diagrams in your React app", 5 | "main": "dist/index.js", 6 | "files": [ 7 | "dist", 8 | "src" 9 | ], 10 | "scripts": { 11 | "all": "npm run bundle", 12 | "bundle": "cross-env NODE_ENV=production rollup -c --bundleConfigAsCjs", 13 | "prepublishOnly": "npm run bundle", 14 | "postinstall": "cd example && npm install", 15 | "start": "cd example && npm start" 16 | }, 17 | "module": "dist/index.esm.js", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/bpmn-io/react-bpmn.git" 21 | }, 22 | "keywords": [ 23 | "bpmn-js", 24 | "bpmn", 25 | "react-js", 26 | "react" 27 | ], 28 | "author": { 29 | "name": "Nico Rehwaldt", 30 | "url": "https://github.com/nikku" 31 | }, 32 | "license": "MIT", 33 | "devDependencies": { 34 | "@babel/core": "^7.19.0", 35 | "@babel/preset-env": "^7.19.0", 36 | "@rollup/plugin-babel": "^6.0.4", 37 | "@rollup/plugin-commonjs": "^28.0.0", 38 | "@rollup/plugin-node-resolve": "^16.0.0", 39 | "@rollup/plugin-replace": "^6.0.0", 40 | "babel-preset-react-app": "^10.0.1", 41 | "cross-env": "^7.0.3", 42 | "react": "^19.0.0", 43 | "react-dom": "^19.0.0", 44 | "rollup": "^4.18.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "github>bpmn-io/renovate-config:recommended" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json'; 2 | 3 | import cjs from '@rollup/plugin-commonjs'; 4 | 5 | import { babel } from '@rollup/plugin-babel'; 6 | 7 | import nodeResolve from '@rollup/plugin-node-resolve'; 8 | 9 | import replace from '@rollup/plugin-replace'; 10 | 11 | function pgl() { 12 | return [ 13 | cjs(), 14 | nodeResolve(), 15 | replace({ 16 | 'process.env.NODE_ENV': JSON.stringify( 'production' ) 17 | }), 18 | babel({ 19 | babelrc: false, 20 | babelHelpers: 'runtime', 21 | exclude: 'node_modules/**', 22 | presets: [ 23 | ['@babel/env', { modules: false }], 24 | 'react-app' 25 | ] 26 | }) 27 | ]; 28 | } 29 | 30 | export default [ 31 | { 32 | input: './src/index.jsx', 33 | output: { 34 | name: 'ReactBpmn', 35 | file: `dist/react-bpmn.umd.js`, 36 | format: 'umd' 37 | }, 38 | plugins: pgl() 39 | }, 40 | { 41 | input: './src/index.jsx', 42 | output: [ 43 | { file: pkg.main, format: 'cjs' }, 44 | { file: pkg.module, format: 'es' } 45 | ], 46 | plugins: pgl() 47 | } 48 | ]; -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js'; 4 | 5 | 6 | export default class ReactBpmn extends React.Component { 7 | 8 | constructor(props) { 9 | super(props); 10 | 11 | this.state = { }; 12 | 13 | this.containerRef = React.createRef(); 14 | } 15 | 16 | componentDidMount() { 17 | 18 | const { 19 | url, 20 | diagramXML 21 | } = this.props; 22 | 23 | const container = this.containerRef.current; 24 | 25 | this.bpmnViewer = new BpmnJS({ container }); 26 | 27 | this.bpmnViewer.on('import.done', (event) => { 28 | const { 29 | error, 30 | warnings 31 | } = event; 32 | 33 | if (error) { 34 | return this.handleError(error); 35 | } 36 | 37 | this.bpmnViewer.get('canvas').zoom('fit-viewport'); 38 | 39 | return this.handleShown(warnings); 40 | }); 41 | 42 | if (url) { 43 | return this.fetchDiagram(url); 44 | } 45 | 46 | if (diagramXML) { 47 | return this.displayDiagram(diagramXML); 48 | } 49 | } 50 | 51 | componentWillUnmount() { 52 | this.bpmnViewer.destroy(); 53 | } 54 | 55 | componentDidUpdate(prevProps, prevState) { 56 | const { 57 | props, 58 | state 59 | } = this; 60 | 61 | if (props.url !== prevProps.url) { 62 | return this.fetchDiagram(props.url); 63 | } 64 | 65 | const currentXML = props.diagramXML || state.diagramXML; 66 | 67 | const previousXML = prevProps.diagramXML || prevState.diagramXML; 68 | 69 | if (currentXML && currentXML !== previousXML) { 70 | return this.displayDiagram(currentXML); 71 | } 72 | } 73 | 74 | displayDiagram(diagramXML) { 75 | this.bpmnViewer.importXML(diagramXML); 76 | } 77 | 78 | fetchDiagram(url) { 79 | 80 | this.handleLoading(); 81 | 82 | fetch(url) 83 | .then(response => response.text()) 84 | .then(text => this.setState({ diagramXML: text })) 85 | .catch(err => this.handleError(err)); 86 | } 87 | 88 | handleLoading() { 89 | const { onLoading } = this.props; 90 | 91 | if (onLoading) { 92 | onLoading(); 93 | } 94 | } 95 | 96 | handleError(err) { 97 | const { onError } = this.props; 98 | 99 | if (onError) { 100 | onError(err); 101 | } 102 | } 103 | 104 | handleShown(warnings) { 105 | const { onShown } = this.props; 106 | 107 | if (onShown) { 108 | onShown(warnings); 109 | } 110 | } 111 | 112 | render() { 113 | return ( 114 |
115 | ); 116 | } 117 | } 118 | --------------------------------------------------------------------------------