bpmn-js 9.0.0-subprocesses.0 → 9.0.0

package/CHANGELOG.md

@@ -2,13 +2,85 @@
 
 All notable changes to [bpmn-js](https://github.com/bpmn-io/bpmn-js) are documented here. We use [semantic versioning](http://semver.org/) for releases.
 
+
 ## Unreleased
 
 ___Note:__ Yet to be released changes appear here._
 
+## 9.0.0
+
+* `FEAT`: update umbedded label bounds when shape is moved ([#1586](https://github.com/bpmn-io/bpmn-js/pull/1586))
+* `FIX`: ensure plane ID change is undoable ([#1600](https://github.com/bpmn-io/bpmn-js/pull/1600))
+* `FIX`: allow groups and associations to be created in subprocesses ([#1599](https://github.com/bpmn-io/bpmn-js/pull/1599))
+* `CHORE`: expose `BpmnRenderer` extension points ([#1585](https://github.com/bpmn-io/bpmn-js/pull/1585))
+
+## 9.0.0-alpha.2
+
+* `FIX`: use active plane for svg export ([#1592](https://github.com/bpmn-io/bpmn-js/issues/1592))
+* `FIX`: prevent infinite loop on root property change ([#1593](https://github.com/bpmn-io/bpmn-js/pull/1593))
+
+## 9.0.0-alpha.1
+
+* `FEAT`: support modeling of collapsed subprocesses ([#1443](https://github.com/bpmn-io/bpmn-js/issues/1443))
+* `FIX`: create di for embedded labels ([#1579](https://github.com/bpmn-io/bpmn-js/pull/1579))
+* `CHORE`: bump to `diagram-js@8.1.1`
+
+### Breaking Changes
+
+* Reworked `viewer.open` behavior for single planes. ([#1576](https://github.com/bpmn-io/bpmn-js/pull/1576))
+
+## 9.0.0-alpha.0
+
+* `FEAT`: support drilldown into collapsed subprocesses ([#1443](https://github.com/bpmn-io/bpmn-js/issues/1443))
+* `CHORE`: bump to `diagram-js@8.0.1`
+
 ### Breaking Changes
 
 * Reworked the link of elements to bpmn DIs. You must access the `di` directly from the diagram element instead of the `businessObject`. [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472)
+* Reworked import and `BpmnFactory` APIs. [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472)
+* Added `bpmn-js.css`, which is required to display drilldown overlays correctly.
+
+## 8.10.0
+
+* `CHORE`: provide `ModelUtil#isAny` utility ([#https://github.com/bpmn-io/bpmn-js/pull/1604](https://github.com/bpmn-io/bpmn-js/pull/1604))
+* `CHORE`: provide `ModelUtil#getDi` utility ([#https://github.com/bpmn-io/bpmn-js/pull/1604](https://github.com/bpmn-io/bpmn-js/pull/1604))
+
+## 8.9.1
+
+* `FIX`: re-use process for redo of first participant ([#1439](https://github.com/bpmn-io/bpmn-js/issues/1439))
+* `FIX`: ensure IDs are claimed when used ([#1555](https://github.com/bpmn-io/bpmn-js/issues/1555))
+* `FIX`: prevent morphing data stores outside participants ([#1508](https://github.com/bpmn-io/bpmn-js/issues/1508))
+
+## 8.9.0
+
+* `FEAT`: select newly created sub-process ([`6214772b`](https://github.com/bpmn-io/bpmn-js/commit/6214772b8519cb82f61c4867b16c112bc6344922))
+* `FEAT`: select newly created group for immediate resizing ([`56eb34cc`](https://github.com/bpmn-io/bpmn-js/commit/56eb34cc826ca0dc8ee788575a504d5fda301292))
+* `FEAT`: simplify color scheme
+* `FIX`: set label color on `bpmndi:BPMNLabel#color` ([#1543](https://github.com/bpmn-io/bpmn-js/pull/1543))
+* `FIX`: don't create illegal `bpmndi:BPMNEdge#waypoints` property ([#1544](https://github.com/bpmn-io/bpmn-js/issues/1544))
+* `FIX`: correct direct editing on touch devices
+* `DEPS`: update to diagram-js@7.8.2
+
+## 8.8.3
+
+* `FIX`: correct resize handles hidden behind element ([#1520](https://github.com/bpmn-io/bpmn-js/issues/1520))
+* `FIX`: handle close to source or target drop on flow ([#1541](https://github.com/bpmn-io/bpmn-js/issues/1541))
+* `CHORE`: bump to `diagram-js@7.6.3`
+
+## 8.8.2
+
+* `FIX`: properly re-use ID of a copied element if available ([#1503](https://github.com/bpmn-io/bpmn-js/pull/1509))
+
+## 8.8.1
+
+* `FIX`: re-use ID of a copied element if available ([#1503](https://github.com/bpmn-io/bpmn-js/pull/1503))
+* `CHORE`: unbuild circular dependency with `ResizeUtil` ([#1500](https://github.com/bpmn-io/bpmn-js/pull/1500))
+
+## 8.8.0
+
+* `FEAT`: give `keyboard` fine-grained control over which events to handle ([#1493](https://github.com/bpmn-io/bpmn-js/issues/1493))
+* `FIX`: correct keyboard shortcuts not working in direct editing mode ([#1493](https://github.com/bpmn-io/bpmn-js/issues/1493))
+* `DEPS`: update to `diagram-js@7.15`
 
 ## 8.7.3
 
@@ -21,7 +93,7 @@ ___Note:__ Yet to be released changes appear here._
 
 ## 8.7.1
 
-* `FIX`: allow connecting `bpmn:MessageFlow` to `bpmn:CallActivity` ([#1467](https://github.com/bpmn-io/bpmn-js/issues/1467)) 
+* `FIX`: allow connecting `bpmn:MessageFlow` to `bpmn:CallActivity` ([#1467](https://github.com/bpmn-io/bpmn-js/issues/1467))
 * `DEPS`: update to `bpmn-moddle@7.1.2`
 
 ## 8.7.0

package/dist/assets/bpmn-js.css

@@ -0,0 +1,113 @@
+.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: 10px;
+  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: 50px;
+}
+
+.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
+  left: 100px;
+}
+
+.bjs-breadcrumbs li {
+  display: inline-flex;
+  padding-bottom: 5px;
+}
+
+.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;
+}

package/dist/assets/diagram-js.css

@@ -2,84 +2,86 @@
  * color definitions
  */
 .djs-container {
-  --blue-base-65: #4d90ff;
-  --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3);
-  --blue-darken-48: #005df7;
-  --blue-darken-55: #1a70ff;
-  --blue-lighten-82: #a2c5ff;
-
-  --red-base-62: #ff3d3d;
-  --red-base-62-lighten-90: rgb(255, 235, 235);
-
-  --silver-darken-94: #efefef;
-
-  --color-000000: #000000;
-  --color-000000-opacity-05: rgba(0, 0, 0, 0.05);
-  --color-000000-opacity-10: rgba(0, 0, 0, 0.1);
-  --color-333333: #333333;
-  --color-666666: #666666;
-  --color-aaaaaa: #aaaaaa;
-  --color-cccccc: #cccccc;
-  --color-cdcdcd: #cdcdcd;
-  --color-dddddd: #dddddd;
-  --color-f6f6f6: #f6f6f6;
-  --color-fafafa: #fafafa;
-  --color-fefefe: #fefefe;
-  --color-ffffff: #ffffff;
-
-  --bendpoint-fill-color: var(--blue-base-65-opacity-30);
-  --bendpoint-stroke-color: var(--blue-base-65);
-
-  --context-pad-entry-background-color: var(--color-fefefe);
-  --context-pad-entry-hover-background-color: var(--silver-darken-94);
-
-  --element-dragger-color: var(--blue-base-65);
-  --element-hover-outline-fill-color: var(--blue-darken-48);
-  --element-selected-outline-stroke-color: var(--blue-base-65);
-
-  --lasso-fill-color: var(--color-000000-opacity-05);
-  --lasso-stroke-color: var(--color-000000);
-
-  --palette-entry-color: var(--color-333333);
-  --palette-entry-hover-color: var(--blue-darken-48);
-  --palette-entry-selected-color: var(--blue-base-65);
-  --palette-separator-color: var(--color-aaaaaa);
-  --palette-toggle-hover-background-color: var(--color-666666);
-  --palette-background-color: var(--color-fafafa);
-  --palette-border-color: var(--color-cccccc);
-
-  --popup-body-background-color: var(--color-fefefe);
-  --popup-header-entry-selected-color: var(--blue-base-65);
-  --popup-header-entry-selected-background-color: var(--color-000000-opacity-10);
-  --popup-header-separator-color: var(--color-dddddd);
-  --popup-background-color: var(--color-fafafa);
-  --popup-border-color: var(--color-cccccc);
-
-  --resizer-fill-color: var(--blue-base-65-opacity-30);
-  --resizer-stroke-color: var(--blue-base-65);
-
-  --search-container-background-color: var(--color-fafafa);
-  --search-container-border-color: var(--blue-darken-55);
-  --search-container-box-shadow-color: var(--blue-lighten-82);
-  --search-container-box-shadow-inset-color: var(--color-cdcdcd);
-  --search-input-border-color: var(--color-cccccc);
-  --search-result-border-color: var(--color-aaaaaa);
-  --search-result-highlight-color: var(--color-000000);
-  --search-result-selected-color: var(--blue-base-65-opacity-30);
-
-  --shape-attach-allowed-stroke-color: var(--blue-base-65);
-  --shape-connect-allowed-fill-color: var(--color-f6f6f6);
-  --shape-drop-allowed-fill-color: var(--color-f6f6f6);
-  --shape-drop-not-allowed-fill-color: var(--red-base-62-lighten-90);
-  --shape-resize-preview-stroke-color: var(--blue-base-65);
-
-  --snap-line-stroke-color: var(--blue-base-65-opacity-30);
-
-  --space-tool-crosshair-stroke-color: var(--color-000000);
-
-  --tooltip-error-background-color: var(--red-base-62-lighten-90);
-  --tooltip-error-border-color: var(--red-base-62);
-  --tooltip-error-color: var(--red-base-62);
+  --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%);
+
+  --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30);
+  --bendpoint-stroke-color: var(--color-blue-205-100-50);
+
+  --context-pad-entry-background-color: var(--color-white);
+  --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
+
+  --element-dragger-color: var(--color-blue-205-100-50);
+  --element-hover-outline-fill-color: var(--color-blue-205-100-45);
+  --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
+
+  --lasso-fill-color: var(--color-black-opacity-05);
+  --lasso-stroke-color: var(--color-black);
+
+  --palette-entry-color: var(--color-grey-225-10-15);
+  --palette-entry-hover-color: var(--color-blue-205-100-45);
+  --palette-entry-selected-color: var(--color-blue-205-100-50);
+  --palette-separator-color: var(--color-grey-225-10-75);
+  --palette-toggle-hover-background-color: var(--color-grey-225-10-55);
+  --palette-background-color: var(--color-grey-225-10-97);
+  --palette-border-color: var(--color-grey-225-10-75);
+
+  --popup-body-background-color: var(--color-white);
+  --popup-header-entry-selected-color: var(--color-blue-205-100-50);
+  --popup-header-entry-selected-background-color: var(--color-black-opacity-10);
+  --popup-header-separator-color: var(--color-grey-225-10-75);
+  --popup-background-color: var(--color-grey-225-10-97);
+  --popup-border-color: var(--color-grey-225-10-75);
+
+  --resizer-fill-color: var(--color-blue-205-100-45-opacity-30);
+  --resizer-stroke-color: var(--color-blue-205-100-50);
+
+  --search-container-background-color: var(--color-grey-225-10-97);
+  --search-container-border-color: var(--color-blue-205-100-50);
+  --search-container-box-shadow-color: var(--color-blue-205-100-95);
+  --search-container-box-shadow-inset-color: var(--color-grey-225-10-80);
+  --search-input-border-color: var(--color-grey-225-10-75);
+  --search-result-border-color: var(--color-grey-225-10-75);
+  --search-result-highlight-color: var(--color-black);
+  --search-result-selected-color: var(--color-blue-205-100-45-opacity-30);
+
+  --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
+  --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
+  --shape-drop-allowed-fill-color: var(--color-grey-225-10-97);
+  --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97);
+  --shape-resize-preview-stroke-color: var(--color-blue-205-100-50);
+
+  --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30);
+
+  --space-tool-crosshair-stroke-color: var(--color-black);
+
+  --tooltip-error-background-color: var(--color-red-360-100-97);
+  --tooltip-error-border-color: var(--color-red-360-100-45);
+  --tooltip-error-color: var(--color-red-360-100-45);
 }
 
 /**
@@ -468,6 +470,7 @@ marker.djs-dragger tspan {
  */
 .djs-overlay-context-pad {
   width: 72px;
+  z-index: 100;
 }
 
 .djs-context-pad {
@@ -750,6 +753,7 @@ marker.djs-dragger tspan {
   width: 100%;
   padding: 6px 10px;
   border: 1px solid var(--search-input-border-color);
+  box-sizing: border-box;
 }
 
 .djs-search-input input:focus {