bpmn-js 9.0.0-subprocesses.1 → 9.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/dist/assets/bpmn-js.css +69 -14
  3. package/dist/assets/diagram-js.css +81 -78
  4. package/dist/bpmn-modeler.development.js +2897 -1810
  5. package/dist/bpmn-modeler.production.min.js +8 -8
  6. package/dist/bpmn-navigated-viewer.development.js +1458 -1101
  7. package/dist/bpmn-navigated-viewer.production.min.js +6 -6
  8. package/dist/bpmn-viewer.development.js +1457 -1100
  9. package/dist/bpmn-viewer.production.min.js +6 -6
  10. package/lib/BaseViewer.js +1 -1
  11. package/lib/Viewer.js +2 -2
  12. package/lib/draw/BpmnRenderer.js +303 -373
  13. package/lib/features/auto-resize/BpmnAutoResizeProvider.js +6 -0
  14. package/lib/features/copy-paste/BpmnCopyPaste.js +1 -0
  15. package/lib/features/di-ordering/BpmnDiOrdering.js +15 -11
  16. package/lib/features/drilldown/DrilldownBreadcrumbs.js +122 -0
  17. package/lib/features/drilldown/DrilldownCentering.js +118 -0
  18. package/lib/features/drilldown/DrilldownOverlayBehavior.js +181 -0
  19. package/lib/features/drilldown/SubprocessCompatibility.js +201 -0
  20. package/lib/features/drilldown/index.js +17 -0
  21. package/lib/features/label-editing/LabelEditingProvider.js +1 -1
  22. package/lib/features/label-editing/cmd/UpdateLabelHandler.js +29 -2
  23. package/lib/features/modeling/BpmnFactory.js +5 -1
  24. package/lib/features/modeling/BpmnUpdater.js +43 -1
  25. package/lib/features/modeling/ElementFactory.js +4 -0
  26. package/lib/features/modeling/behavior/CreateParticipantBehavior.js +59 -84
  27. package/lib/features/modeling/behavior/DropOnFlowBehavior.js +2 -2
  28. package/lib/features/modeling/behavior/RemoveEmbeddedLabelBoundsBehavior.js +34 -0
  29. package/lib/features/modeling/behavior/SubProcessPlaneBehavior.js +557 -0
  30. package/lib/features/modeling/behavior/ToggleCollapseConnectionBehaviour.js +74 -0
  31. package/lib/features/modeling/behavior/UnclaimIdBehavior.js +3 -1
  32. package/lib/features/modeling/behavior/index.js +27 -18
  33. package/lib/features/modeling/cmd/SetColorHandler.js +23 -6
  34. package/lib/features/modeling/cmd/UpdateCanvasRootHandler.js +4 -2
  35. package/lib/features/modeling/util/ModelingUtil.js +2 -20
  36. package/lib/features/ordering/BpmnOrderingProvider.js +3 -3
  37. package/lib/features/palette/PaletteProvider.js +1 -1
  38. package/lib/features/popup-menu/ReplaceMenuProvider.js +1 -1
  39. package/lib/import/BpmnImporter.js +17 -60
  40. package/lib/import/Importer.js +130 -10
  41. package/lib/util/DrilldownUtil.js +66 -0
  42. package/lib/util/ModelUtil.js +19 -0
  43. package/package.json +2 -2
  44. package/test/helper/index.js +1 -6
  45. package/lib/features/subprocess-navigation/SubprocessCentering.js +0 -55
  46. package/lib/features/subprocess-navigation/SubprocessCompatibility.js +0 -135
  47. package/lib/features/subprocess-navigation/SubprocessElements.js +0 -55
  48. package/lib/features/subprocess-navigation/SubprocessFlows.js +0 -109
  49. package/lib/features/subprocess-navigation/SubprocessOverlays.js +0 -104
  50. package/lib/features/subprocess-navigation/index.js +0 -18
package/CHANGELOG.md CHANGED
@@ -2,14 +2,60 @@
2
2
 
3
3
  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.
4
4
 
5
+
5
6
  ## Unreleased
6
7
 
7
8
  ___Note:__ Yet to be released changes appear here._
8
9
 
10
+
11
+ ## 9.0.1
12
+
13
+ * `FIX`: use ES5 everywhere ([#1605](https://github.com/bpmn-io/bpmn-js/pull/1605))
14
+ * `FIX`: support DIs without associated business object ([#1605](https://github.com/bpmn-io/bpmn-js/pull/1605))
15
+ * `DEPS`: bump to `diagram-js@8.1.2` ([bdf9cf3](https://github.com/bpmn-io/bpmn-js/commit/bdf9cf3e752254a4c8172031d8a493955a9fca9c))
16
+
17
+
18
+ ## 9.0.0
19
+
20
+ * `FEAT`: support drilldown and modeling of collapsed subprocesses ([#1443](https://github.com/bpmn-io/bpmn-js/issues/1443))
21
+ * `FEAT`: update embedded label bounds when shape is moved ([#1586](https://github.com/bpmn-io/bpmn-js/pull/1586))
22
+ * `FIX`: create di for embedded labels ([#1579](https://github.com/bpmn-io/bpmn-js/pull/1579))
23
+ * `CHORE`: expose `BpmnRenderer` extension points ([#1585](https://github.com/bpmn-io/bpmn-js/pull/1585))
24
+ * `CHORE`: bump to `diagram-js@8.1.1`
25
+
9
26
  ### Breaking Changes
10
27
 
11
28
  * 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)
29
+ * Reworked `viewer.open` behavior for single planes. ([#1576](https://github.com/bpmn-io/bpmn-js/pull/1576))
12
30
  * Reworked import and `BpmnFactory` APIs. [#1472](https://github.com/bpmn-io/bpmn-js/issues/1472)
31
+ * Added `bpmn-js.css`, which is required to display drilldown overlays correctly.
32
+
33
+ ## 8.10.0
34
+
35
+ * `CHORE`: provide `ModelUtil#isAny` utility ([#https://github.com/bpmn-io/bpmn-js/pull/1604](https://github.com/bpmn-io/bpmn-js/pull/1604))
36
+ * `CHORE`: provide `ModelUtil#getDi` utility ([#https://github.com/bpmn-io/bpmn-js/pull/1604](https://github.com/bpmn-io/bpmn-js/pull/1604))
37
+
38
+ ## 8.9.1
39
+
40
+ * `FIX`: re-use process for redo of first participant ([#1439](https://github.com/bpmn-io/bpmn-js/issues/1439))
41
+ * `FIX`: ensure IDs are claimed when used ([#1555](https://github.com/bpmn-io/bpmn-js/issues/1555))
42
+ * `FIX`: prevent morphing data stores outside participants ([#1508](https://github.com/bpmn-io/bpmn-js/issues/1508))
43
+
44
+ ## 8.9.0
45
+
46
+ * `FEAT`: select newly created sub-process ([`6214772b`](https://github.com/bpmn-io/bpmn-js/commit/6214772b8519cb82f61c4867b16c112bc6344922))
47
+ * `FEAT`: select newly created group for immediate resizing ([`56eb34cc`](https://github.com/bpmn-io/bpmn-js/commit/56eb34cc826ca0dc8ee788575a504d5fda301292))
48
+ * `FEAT`: simplify color scheme
49
+ * `FIX`: set label color on `bpmndi:BPMNLabel#color` ([#1543](https://github.com/bpmn-io/bpmn-js/pull/1543))
50
+ * `FIX`: don't create illegal `bpmndi:BPMNEdge#waypoints` property ([#1544](https://github.com/bpmn-io/bpmn-js/issues/1544))
51
+ * `FIX`: correct direct editing on touch devices
52
+ * `DEPS`: update to diagram-js@7.8.2
53
+
54
+ ## 8.8.3
55
+
56
+ * `FIX`: correct resize handles hidden behind element ([#1520](https://github.com/bpmn-io/bpmn-js/issues/1520))
57
+ * `FIX`: handle close to source or target drop on flow ([#1541](https://github.com/bpmn-io/bpmn-js/issues/1541))
58
+ * `CHORE`: bump to `diagram-js@7.6.3`
13
59
 
14
60
  ## 8.8.2
15
61
 
package/dist/assets/bpmn-js.css CHANGED
@@ -1,36 +1,83 @@
1
1
  .bjs-container {
2
2
  --bjs-font-family: Arial, sans-serif;
3
+
4
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
5
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
6
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
7
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
8
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
9
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
10
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
11
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
12
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
13
+
14
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
15
+ --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
16
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
17
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
18
+
19
+ --color-green-150-86-44: hsl(150, 86%, 44%);
20
+
21
+ --color-red-360-100-40: hsl(360, 100%, 40%);
22
+ --color-red-360-100-45: hsl(360, 100%, 45%);
23
+ --color-red-360-100-92: hsl(360, 100%, 92%);
24
+ --color-red-360-100-97: hsl(360, 100%, 97%);
25
+
26
+ --color-white: hsl(0, 0%, 100%);
27
+ --color-black: hsl(0, 0%, 0%);
28
+ --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
29
+ --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
30
+
31
+ --breadcrumbs-font-family: var(--bjs-font-family);
32
+ --breadcrumbs-item-color: var(--color-blue-205-100-50);
33
+ --breadcrumbs-arrow-color: var(--color-black);
34
+ --drilldown-fill-color: var(--color-white);
35
+ --drilldown-background-color: var(--color-blue-205-100-50);
3
36
  }
4
37
 
5
38
  .bjs-breadcrumbs {
6
- width: 100%;
7
- display: flex;
39
+ position: absolute;
40
+ display: none;
41
+ flex-wrap: wrap;
8
42
  align-items: center;
9
- margin: 0;
10
- font-family: var(--bjs-font-family);
43
+ top: 10px;
44
+ font-family: var(--breadcrumbs-font-family);
11
45
  font-size: 16px;
46
+ line-height: normal;
47
+ }
48
+
49
+ .bjs-breadcrumbs-shown .bjs-breadcrumbs {
50
+ display: flex;
51
+ }
52
+
53
+ .djs-palette-shown .bjs-breadcrumbs {
54
+ left: 50px;
55
+ }
56
+
57
+ .djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
58
+ left: 100px;
12
59
  }
13
60
 
14
61
  .bjs-breadcrumbs li {
15
62
  display: inline-flex;
16
- color: var(--blue-base-65);
17
- cursor: pointer;
63
+ padding-bottom: 5px;
18
64
  }
19
65
 
20
- .bjs-breadcrumbs .bjs-drilldown {
21
- margin-right: 5px;
66
+ .bjs-breadcrumbs li a {
67
+ cursor: pointer;
68
+ color: var(--breadcrumbs-item-color);
22
69
  }
23
70
 
24
- .bjs-breadcrumbs li:last-of-type {
71
+ .bjs-breadcrumbs li:last-of-type a {
25
72
  color: inherit;
26
73
  cursor: default;
27
74
  }
28
75
 
29
- .bjs-breadcrumbs li:not(:first-of-type)::before {
76
+ .bjs-breadcrumbs li:not(:first-child)::before {
30
77
  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>');
31
- height: 16px;
32
78
  padding: 0 8px;
33
- color: black;
79
+ color: var(--breadcrumbs-arrow-color);
80
+ height: 1em;
34
81
  }
35
82
 
36
83
  .bjs-breadcrumbs .bjs-crumb {
@@ -53,6 +100,14 @@
53
100
  border-radius: 2px;
54
101
  outline: none;
55
102
 
56
- fill: white;
57
- background-color: var(--blue-base-65);
103
+ fill: var(--drilldown-fill-color);
104
+ background-color: var(--drilldown-background-color);
105
+ }
106
+
107
+ .bjs-drilldown-empty {
108
+ display: none;
58
109
  }
110
+
111
+ .selected .bjs-drilldown-empty {
112
+ display: inherit;
113
+ }
package/dist/assets/diagram-js.css CHANGED
@@ -2,84 +2,86 @@
2
2
  * color definitions
3
3
  */
4
4
  .djs-container {
5
- --blue-base-65: #4d90ff;
6
- --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3);
7
- --blue-darken-48: #005df7;
8
- --blue-darken-55: #1a70ff;
9
- --blue-lighten-82: #a2c5ff;
10
-
11
- --red-base-62: #ff3d3d;
12
- --red-base-62-lighten-90: rgb(255, 235, 235);
13
-
14
- --silver-darken-94: #efefef;
15
-
16
- --color-000000: #000000;
17
- --color-000000-opacity-05: rgba(0, 0, 0, 0.05);
18
- --color-000000-opacity-10: rgba(0, 0, 0, 0.1);
19
- --color-333333: #333333;
20
- --color-666666: #666666;
21
- --color-aaaaaa: #aaaaaa;
22
- --color-cccccc: #cccccc;
23
- --color-cdcdcd: #cdcdcd;
24
- --color-dddddd: #dddddd;
25
- --color-f6f6f6: #f6f6f6;
26
- --color-fafafa: #fafafa;
27
- --color-fefefe: #fefefe;
28
- --color-ffffff: #ffffff;
29
-
30
- --bendpoint-fill-color: var(--blue-base-65-opacity-30);
31
- --bendpoint-stroke-color: var(--blue-base-65);
32
-
33
- --context-pad-entry-background-color: var(--color-fefefe);
34
- --context-pad-entry-hover-background-color: var(--silver-darken-94);
35
-
36
- --element-dragger-color: var(--blue-base-65);
37
- --element-hover-outline-fill-color: var(--blue-darken-48);
38
- --element-selected-outline-stroke-color: var(--blue-base-65);
39
-
40
- --lasso-fill-color: var(--color-000000-opacity-05);
41
- --lasso-stroke-color: var(--color-000000);
42
-
43
- --palette-entry-color: var(--color-333333);
44
- --palette-entry-hover-color: var(--blue-darken-48);
45
- --palette-entry-selected-color: var(--blue-base-65);
46
- --palette-separator-color: var(--color-aaaaaa);
47
- --palette-toggle-hover-background-color: var(--color-666666);
48
- --palette-background-color: var(--color-fafafa);
49
- --palette-border-color: var(--color-cccccc);
50
-
51
- --popup-body-background-color: var(--color-fefefe);
52
- --popup-header-entry-selected-color: var(--blue-base-65);
53
- --popup-header-entry-selected-background-color: var(--color-000000-opacity-10);
54
- --popup-header-separator-color: var(--color-dddddd);
55
- --popup-background-color: var(--color-fafafa);
56
- --popup-border-color: var(--color-cccccc);
57
-
58
- --resizer-fill-color: var(--blue-base-65-opacity-30);
59
- --resizer-stroke-color: var(--blue-base-65);
60
-
61
- --search-container-background-color: var(--color-fafafa);
62
- --search-container-border-color: var(--blue-darken-55);
63
- --search-container-box-shadow-color: var(--blue-lighten-82);
64
- --search-container-box-shadow-inset-color: var(--color-cdcdcd);
65
- --search-input-border-color: var(--color-cccccc);
66
- --search-result-border-color: var(--color-aaaaaa);
67
- --search-result-highlight-color: var(--color-000000);
68
- --search-result-selected-color: var(--blue-base-65-opacity-30);
69
-
70
- --shape-attach-allowed-stroke-color: var(--blue-base-65);
71
- --shape-connect-allowed-fill-color: var(--color-f6f6f6);
72
- --shape-drop-allowed-fill-color: var(--color-f6f6f6);
73
- --shape-drop-not-allowed-fill-color: var(--red-base-62-lighten-90);
74
- --shape-resize-preview-stroke-color: var(--blue-base-65);
75
-
76
- --snap-line-stroke-color: var(--blue-base-65-opacity-30);
77
-
78
- --space-tool-crosshair-stroke-color: var(--color-000000);
79
-
80
- --tooltip-error-background-color: var(--red-base-62-lighten-90);
81
- --tooltip-error-border-color: var(--red-base-62);
82
- --tooltip-error-color: var(--red-base-62);
5
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
6
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
7
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
8
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
9
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
10
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
11
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
12
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
13
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
14
+
15
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
16
+ --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
17
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
18
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
19
+
20
+ --color-green-150-86-44: hsl(150, 86%, 44%);
21
+
22
+ --color-red-360-100-40: hsl(360, 100%, 40%);
23
+ --color-red-360-100-45: hsl(360, 100%, 45%);
24
+ --color-red-360-100-92: hsl(360, 100%, 92%);
25
+ --color-red-360-100-97: hsl(360, 100%, 97%);
26
+
27
+ --color-white: hsl(0, 0%, 100%);
28
+ --color-black: hsl(0, 0%, 0%);
29
+ --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
30
+ --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
31
+
32
+ --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30);
33
+ --bendpoint-stroke-color: var(--color-blue-205-100-50);
34
+
35
+ --context-pad-entry-background-color: var(--color-white);
36
+ --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
37
+
38
+ --element-dragger-color: var(--color-blue-205-100-50);
39
+ --element-hover-outline-fill-color: var(--color-blue-205-100-45);
40
+ --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
41
+
42
+ --lasso-fill-color: var(--color-black-opacity-05);
43
+ --lasso-stroke-color: var(--color-black);
44
+
45
+ --palette-entry-color: var(--color-grey-225-10-15);
46
+ --palette-entry-hover-color: var(--color-blue-205-100-45);
47
+ --palette-entry-selected-color: var(--color-blue-205-100-50);
48
+ --palette-separator-color: var(--color-grey-225-10-75);
49
+ --palette-toggle-hover-background-color: var(--color-grey-225-10-55);
50
+ --palette-background-color: var(--color-grey-225-10-97);
51
+ --palette-border-color: var(--color-grey-225-10-75);
52
+
53
+ --popup-body-background-color: var(--color-white);
54
+ --popup-header-entry-selected-color: var(--color-blue-205-100-50);
55
+ --popup-header-entry-selected-background-color: var(--color-black-opacity-10);
56
+ --popup-header-separator-color: var(--color-grey-225-10-75);
57
+ --popup-background-color: var(--color-grey-225-10-97);
58
+ --popup-border-color: var(--color-grey-225-10-75);
59
+
60
+ --resizer-fill-color: var(--color-blue-205-100-45-opacity-30);
61
+ --resizer-stroke-color: var(--color-blue-205-100-50);
62
+
63
+ --search-container-background-color: var(--color-grey-225-10-97);
64
+ --search-container-border-color: var(--color-blue-205-100-50);
65
+ --search-container-box-shadow-color: var(--color-blue-205-100-95);
66
+ --search-container-box-shadow-inset-color: var(--color-grey-225-10-80);
67
+ --search-input-border-color: var(--color-grey-225-10-75);
68
+ --search-result-border-color: var(--color-grey-225-10-75);
69
+ --search-result-highlight-color: var(--color-black);
70
+ --search-result-selected-color: var(--color-blue-205-100-45-opacity-30);
71
+
72
+ --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
73
+ --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
74
+ --shape-drop-allowed-fill-color: var(--color-grey-225-10-97);
75
+ --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97);
76
+ --shape-resize-preview-stroke-color: var(--color-blue-205-100-50);
77
+
78
+ --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30);
79
+
80
+ --space-tool-crosshair-stroke-color: var(--color-black);
81
+
82
+ --tooltip-error-background-color: var(--color-red-360-100-97);
83
+ --tooltip-error-border-color: var(--color-red-360-100-45);
84
+ --tooltip-error-color: var(--color-red-360-100-45);
83
85
  }
84
86
 
85
87
  /**
@@ -751,6 +753,7 @@ marker.djs-dragger tspan {
751
753
  width: 100%;
752
754
  padding: 6px 10px;
753
755
  border: 1px solid var(--search-input-border-color);
756
+ box-sizing: border-box;
754
757
  }
755
758
 
756
759
  .djs-search-input input:focus {