bpmn-js 17.6.4 → 17.7.1

package/LICENSE

@@ -1,23 +1,23 @@
-Copyright (c) 2014-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The source code responsible for displaying the bpmn.io project watermark that
-links back to https://bpmn.io as part of rendered diagrams MUST NOT be
-removed or changed. When this software is being used in a website or application,
-the watermark must stay fully visible and not visually overlapped by other elements.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
-OR OTHER DEALINGS IN THE SOFTWARE.
+Copyright (c) 2014-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,93 +1,93 @@
-# bpmn-js - BPMN 2.0 for the web
-
-[![Build Status](https://github.com/bpmn-io/bpmn-js/workflows/CI/badge.svg)](https://github.com/bpmn-io/bpmn-js/actions?query=workflow%3ACI)
-
-View and edit BPMN 2.0 diagrams in the browser.
-
-[![bpmn-js screencast](./resources/screencast.gif "bpmn-js in action")](http://demo.bpmn.io/s/start)
-
-## Installation
-
-Use the library [pre-packaged](https://github.com/bpmn-io/bpmn-js-examples/tree/main/pre-packaged)
-or include it [via npm](https://github.com/bpmn-io/bpmn-js-examples/tree/main/bundling)
-into your node-style web-application.
-
-## Usage
-
-To get started, create a [bpmn-js](https://github.com/bpmn-io/bpmn-js) instance
-and render [BPMN 2.0 diagrams](https://www.omg.org/spec/BPMN/2.0.2/) in the browser:
-
-```javascript
-const xml = '...'; // my BPMN 2.0 xml
-const viewer = new BpmnJS({
-  container: 'body'
-});
-
-try {
-  const { warnings } = await viewer.importXML(xml);
-
-  console.log('rendered');
-} catch (err) {
-  console.log('error rendering', err);
-}
-```
-
-Checkout our [examples](https://github.com/bpmn-io/bpmn-js-examples) for many
-more supported usage scenarios.
-
-### Dynamic Attach/Detach
-
-You may attach or detach the viewer dynamically to any element on the page, too:
-
-```javascript
-const viewer = new BpmnJS();
-
-// attach it to some element
-viewer.attachTo('#container');
-
-// detach the panel
-viewer.detach();
-```
-
-## Resources
-
-* [Demo](http://demo.bpmn.io)
-* [Issues](https://github.com/bpmn-io/bpmn-js/issues)
-* [Examples](https://github.com/bpmn-io/bpmn-js-examples)
-* [Forum](https://forum.bpmn.io)
-* [Changelog](./CHANGELOG.md)
-
-## Build and Run
-
-Prepare the project by installing all dependencies:
-
-```sh
-npm install
-```
-
-Then, depending on your use-case you may run any of the following commands:
-
-```sh
-# build the library and run all tests
-npm run all
-
-# spin up a single local modeler instance
-npm start
-
-# run the full development setup
-npm run dev
-```
-
-You may need to perform [additional project setup](./docs/project/SETUP.md) when
-building the latest development snapshot.
-
-## Related
-
-bpmn-js builds on top of a few powerful tools:
-
-* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): Read / write support for BPMN 2.0 XML in the browsers
-* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
-
-## License
-
-Use under the terms of the [bpmn.io license](http://bpmn.io/license).
+# bpmn-js - BPMN 2.0 for the web
+
+[![Build Status](https://github.com/bpmn-io/bpmn-js/workflows/CI/badge.svg)](https://github.com/bpmn-io/bpmn-js/actions?query=workflow%3ACI)
+
+View and edit BPMN 2.0 diagrams in the browser.
+
+[![bpmn-js screencast](./resources/screencast.gif "bpmn-js in action")](http://demo.bpmn.io/s/start)
+
+## Installation
+
+Use the library [pre-packaged](https://github.com/bpmn-io/bpmn-js-examples/tree/main/pre-packaged)
+or include it [via npm](https://github.com/bpmn-io/bpmn-js-examples/tree/main/bundling)
+into your node-style web-application.
+
+## Usage
+
+To get started, create a [bpmn-js](https://github.com/bpmn-io/bpmn-js) instance
+and render [BPMN 2.0 diagrams](https://www.omg.org/spec/BPMN/2.0.2/) in the browser:
+
+```javascript
+const xml = '...'; // my BPMN 2.0 xml
+const viewer = new BpmnJS({
+  container: 'body'
+});
+
+try {
+  const { warnings } = await viewer.importXML(xml);
+
+  console.log('rendered');
+} catch (err) {
+  console.log('error rendering', err);
+}
+```
+
+Checkout our [examples](https://github.com/bpmn-io/bpmn-js-examples) for many
+more supported usage scenarios.
+
+### Dynamic Attach/Detach
+
+You may attach or detach the viewer dynamically to any element on the page, too:
+
+```javascript
+const viewer = new BpmnJS();
+
+// attach it to some element
+viewer.attachTo('#container');
+
+// detach the panel
+viewer.detach();
+```
+
+## Resources
+
+* [Demo](http://demo.bpmn.io)
+* [Issues](https://github.com/bpmn-io/bpmn-js/issues)
+* [Examples](https://github.com/bpmn-io/bpmn-js-examples)
+* [Forum](https://forum.bpmn.io)
+* [Changelog](./CHANGELOG.md)
+
+## Build and Run
+
+Prepare the project by installing all dependencies:
+
+```sh
+npm install
+```
+
+Then, depending on your use-case you may run any of the following commands:
+
+```sh
+# build the library and run all tests
+npm run all
+
+# spin up a single local modeler instance
+npm start
+
+# run the full development setup
+npm run dev
+```
+
+You may need to perform [additional project setup](./docs/project/SETUP.md) when
+building the latest development snapshot.
+
+## Related
+
+bpmn-js builds on top of a few powerful tools:
+
+* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): Read / write support for BPMN 2.0 XML in the browsers
+* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
+
+## License
+
+Use under the terms of the [bpmn.io license](http://bpmn.io/license).

package/dist/assets/bpmn-js.css

@@ -1,145 +1,145 @@
-.bjs-container {
-  --bjs-font-family: Arial, sans-serif;
-
-  --color-grey-225-10-15: hsl(225, 10%, 15%);
-  --color-grey-225-10-35: hsl(225, 10%, 35%);
-  --color-grey-225-10-55: hsl(225, 10%, 55%);
-  --color-grey-225-10-75: hsl(225, 10%, 75%);
-  --color-grey-225-10-80: hsl(225, 10%, 80%);
-  --color-grey-225-10-85: hsl(225, 10%, 85%);
-  --color-grey-225-10-90: hsl(225, 10%, 90%);
-  --color-grey-225-10-95: hsl(225, 10%, 95%);
-  --color-grey-225-10-97: hsl(225, 10%, 97%);
-
-  --color-blue-205-100-45: hsl(205, 100%, 45%);
-  --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
-  --color-blue-205-100-50: hsl(205, 100%, 50%);
-  --color-blue-205-100-95: hsl(205, 100%, 95%);
-
-  --color-green-150-86-44: hsl(150, 86%, 44%);
-
-  --color-red-360-100-40: hsl(360, 100%, 40%);
-  --color-red-360-100-45: hsl(360, 100%, 45%);
-  --color-red-360-100-92: hsl(360, 100%, 92%);
-  --color-red-360-100-97: hsl(360, 100%, 97%);
-
-  --color-white: hsl(0, 0%, 100%);
-  --color-black: hsl(0, 0%, 0%);
-  --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
-  --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
-
-  --breadcrumbs-font-family: var(--bjs-font-family);
-  --breadcrumbs-item-color: var(--color-blue-205-100-50);
-  --breadcrumbs-arrow-color: var(--color-black);
-  --drilldown-fill-color: var(--color-white);
-  --drilldown-background-color: var(--color-blue-205-100-50);
-}
-
-.bjs-breadcrumbs {
-  position: absolute;
-  display: none;
-  flex-wrap: wrap;
-  align-items: center;
-  top: 30px;
-  left: 30px;
-  padding: 0px;
-  margin: 0px;
-  font-family: var(--breadcrumbs-font-family);
-  font-size: 16px;
-  line-height: normal;
-}
-
-.bjs-breadcrumbs-shown .bjs-breadcrumbs {
-  display: flex;
-}
-
-.djs-palette-shown .bjs-breadcrumbs {
-  left: 90px;
-}
-
-.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
-  left: 140px;
-}
-
-.bjs-breadcrumbs li {
-  display: inline-flex;
-  padding-bottom: 5px;
-  align-items: center;
-}
-
-.bjs-breadcrumbs li a {
-  cursor: pointer;
-  color: var(--breadcrumbs-item-color);
-}
-
-.bjs-breadcrumbs li:last-of-type a {
-  color: inherit;
-  cursor: default;
-}
-
-.bjs-breadcrumbs li:not(:first-child)::before {
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>');
-  padding: 0 8px;
-  color: var(--breadcrumbs-arrow-color);
-  height: 1em;
-}
-
-.bjs-breadcrumbs .bjs-crumb {
-  display: inline-block;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.bjs-drilldown {
-  width: 20px;
-  height: 20px;
-
-  padding: 0px;
-  margin-left: -20px;
-
-  cursor: pointer;
-  border: none;
-  border-radius: 2px;
-  outline: none;
-
-  fill: var(--drilldown-fill-color);
-  background-color: var(--drilldown-background-color);
-}
-
-.bjs-drilldown-empty {
-  display: none;
-}
-
-.selected .bjs-drilldown-empty {
-  display: inherit;
-}
-
-[data-popup="align-elements"] .djs-popup-results {
-  display: flex;
-}
-
-[data-popup="align-elements"] .djs-popup-body [data-group] + [data-group] {
-  border-left: 1px solid var(--popup-border-color);
-}
-
-[data-popup="align-elements"] [data-group="align"] {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-[data-popup="align-elements"] .djs-popup-body .entry {
-  padding: 6px 8px;
-}
-
-[data-popup="align-elements"] .djs-popup-body .entry:not(:first-child) {
-  margin-top: 0;
-}
-
-[data-popup="align-elements"] .djs-popup-entry-icon {
-  display: block;
-  margin: 0;
-  height: 20px;
-  width: 20px;
-}
+.bjs-container {
+  --bjs-font-family: Arial, sans-serif;
+
+  --color-grey-225-10-15: hsl(225, 10%, 15%);
+  --color-grey-225-10-35: hsl(225, 10%, 35%);
+  --color-grey-225-10-55: hsl(225, 10%, 55%);
+  --color-grey-225-10-75: hsl(225, 10%, 75%);
+  --color-grey-225-10-80: hsl(225, 10%, 80%);
+  --color-grey-225-10-85: hsl(225, 10%, 85%);
+  --color-grey-225-10-90: hsl(225, 10%, 90%);
+  --color-grey-225-10-95: hsl(225, 10%, 95%);
+  --color-grey-225-10-97: hsl(225, 10%, 97%);
+
+  --color-blue-205-100-45: hsl(205, 100%, 45%);
+  --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
+  --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-95: hsl(205, 100%, 95%);
+
+  --color-green-150-86-44: hsl(150, 86%, 44%);
+
+  --color-red-360-100-40: hsl(360, 100%, 40%);
+  --color-red-360-100-45: hsl(360, 100%, 45%);
+  --color-red-360-100-92: hsl(360, 100%, 92%);
+  --color-red-360-100-97: hsl(360, 100%, 97%);
+
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%);
+  --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
+  --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
+
+  --breadcrumbs-font-family: var(--bjs-font-family);
+  --breadcrumbs-item-color: var(--color-blue-205-100-50);
+  --breadcrumbs-arrow-color: var(--color-black);
+  --drilldown-fill-color: var(--color-white);
+  --drilldown-background-color: var(--color-blue-205-100-50);
+}
+
+.bjs-breadcrumbs {
+  position: absolute;
+  display: none;
+  flex-wrap: wrap;
+  align-items: center;
+  top: 30px;
+  left: 30px;
+  padding: 0px;
+  margin: 0px;
+  font-family: var(--breadcrumbs-font-family);
+  font-size: 16px;
+  line-height: normal;
+}
+
+.bjs-breadcrumbs-shown .bjs-breadcrumbs {
+  display: flex;
+}
+
+.djs-palette-shown .bjs-breadcrumbs {
+  left: 90px;
+}
+
+.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
+  left: 140px;
+}
+
+.bjs-breadcrumbs li {
+  display: inline-flex;
+  padding-bottom: 5px;
+  align-items: center;
+}
+
+.bjs-breadcrumbs li a {
+  cursor: pointer;
+  color: var(--breadcrumbs-item-color);
+}
+
+.bjs-breadcrumbs li:last-of-type a {
+  color: inherit;
+  cursor: default;
+}
+
+.bjs-breadcrumbs li:not(:first-child)::before {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>');
+  padding: 0 8px;
+  color: var(--breadcrumbs-arrow-color);
+  height: 1em;
+}
+
+.bjs-breadcrumbs .bjs-crumb {
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bjs-drilldown {
+  width: 20px;
+  height: 20px;
+
+  padding: 0px;
+  margin-left: -20px;
+
+  cursor: pointer;
+  border: none;
+  border-radius: 2px;
+  outline: none;
+
+  fill: var(--drilldown-fill-color);
+  background-color: var(--drilldown-background-color);
+}
+
+.bjs-drilldown-empty {
+  display: none;
+}
+
+.selected .bjs-drilldown-empty {
+  display: inherit;
+}
+
+[data-popup="align-elements"] .djs-popup-results {
+  display: flex;
+}
+
+[data-popup="align-elements"] .djs-popup-body [data-group] + [data-group] {
+  border-left: 1px solid var(--popup-border-color);
+}
+
+[data-popup="align-elements"] [data-group="align"] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+[data-popup="align-elements"] .djs-popup-body .entry {
+  padding: 6px 8px;
+}
+
+[data-popup="align-elements"] .djs-popup-body .entry:not(:first-child) {
+  margin-top: 0;
+}
+
+[data-popup="align-elements"] .djs-popup-entry-icon {
+  display: block;
+  margin: 0;
+  height: 20px;
+  width: 20px;
+}

package/dist/assets/diagram-js.css

@@ -59,6 +59,7 @@
   --popup-font-size: 14px;
   --popup-header-entry-selected-color: var(--color-blue-205-100-50);
   --popup-header-font-weight: bolder;
+  --popup-header-group-divider-color: var(--color-grey-225-10-75);
   --popup-background-color: var(--color-white);
   --popup-border-color: transparent;
   --popup-shadow-color: var(--color-black-opacity-30);
@@ -568,6 +569,29 @@ marker.djs-dragger tspan {
   color: inherit;
 }
 
+.djs-popup-header-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.djs-popup-header-group .entry {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.djs-popup-header-group + .djs-popup-header-group:before {
+  content: '';
+  width: 1px;
+  height: 20px;
+  background: var(--popup-header-group-divider-color);
+  margin: 0 5px;
+}
+
 .djs-popup-search {
   margin: 10px 12px;
 }