bpmn-js 9.0.4 → 9.2.1

package/CHANGELOG.md

@@ -7,6 +7,36 @@ All notable changes to [bpmn-js](https://github.com/bpmn-io/bpmn-js) are documen
 
 ___Note:__ Yet to be released changes appear here._
 
+## 9.2.1
+
+* `FIX`: cancel direct editing before shape deletion ([#1677](https://github.com/bpmn-io/bpmn-js/issues/1677))
+
+## 9.2.0
+
+* `FEAT`: rework select and hover interaction on the diagram ([#1616](https://github.com/bpmn-io/bpmn-js/issues/1616), [#640](https://github.com/bpmn-io/diagram-js/pull/640), [#643](https://github.com/bpmn-io/diagram-js/pull/643))
+* `FEAT`: rework diagram interaction handles ([#640](https://github.com/bpmn-io/diagram-js/pull/640))
+* `FEAT`: clearly distinguish select and hover states ([#1616](https://github.com/bpmn-io/bpmn-js/issues/1616))
+* `FEAT`: allow text annotation on sequence flows ([#1652](https://github.com/bpmn-io/bpmn-js/pull/1652))
+* `FEAT`: add multi-element context pad ([#1525](https://github.com/bpmn-io/bpmn-js/pull/1525))
+* `FEAT`: change default color to off black ([#1656](https://github.com/bpmn-io/bpmn-js/pull/1656))
+* `FEAT`: select connection after connect ([#644](https://github.com/bpmn-io/diagram-js/pull/644))
+* `FIX`: copy elements with `string` extension properties ([#1518](https://github.com/bpmn-io/bpmn-js/issues/1518))
+* `FIX`: cancel direct editing before shape deletion ([#1664](https://github.com/bpmn-io/bpmn-js/issues/1664))
+* `FIX`: remove connection on source connection deletion ([#1663](https://github.com/bpmn-io/bpmn-js/issues/1663))
+* `FIX`: set correct label color when batch coloring elements ([#1653](https://github.com/bpmn-io/bpmn-js/issues/1653))
+* `FIX`: always reconnect labels and associations ([#1659](https://github.com/bpmn-io/bpmn-js/pull/1659))
+* `FIX`: correct connection drop highlighting
+* `DEPS`: replace `inherits` with `inherits-browser`
+* `DEPS`: bump to `diagram-js@8.5.0`
+
+## 9.1.0
+
+* `FEAT`: allow to select participant and subprocess via click on body ([#1646](https://github.com/bpmn-io/bpmn-js/pull/1646))
+* `FIX`: comply with strict style-src CSP ([#1625](https://github.com/bpmn-io/bpmn-js/issues/1625))
+* `FIX`: complete direct editing when selection changes ([#1648](https://github.com/bpmn-io/bpmn-js/pull/1648))
+* `DEPS`: update to `diagram-js@8.3.0`
+* `DEPS`: update to `min-dom@3.2.0`
+
 ## 9.0.4
 
 * `FIX`: remove `label` property on empty label ([#1637](https://github.com/bpmn-io/bpmn-js/issues/1637))

package/dist/assets/diagram-js.css

@@ -9,12 +9,14 @@
   --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-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-50-opacity-15: hsla(205, 100%, 50%, 15%);
+  --color-blue-205-100-70: hsl(205, 100%, 75%);
   --color-blue-205-100-95: hsl(205, 100%, 95%);
 
   --color-green-150-86-44: hsl(150, 86%, 44%);
@@ -25,12 +27,13 @@
   --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: hsl(0, 0%, 0%);
   --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);
+  --canvas-fill-color: var(--color-white);
+
+  --bendpoint-fill-color: var(--color-blue-205-100-45);
+  --bendpoint-stroke-color: var(--canvas-fill-color);
 
   --context-pad-entry-background-color: var(--color-white);
   --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
@@ -38,9 +41,10 @@
   --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);
+  --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70);
 
-  --lasso-fill-color: var(--color-black-opacity-05);
-  --lasso-stroke-color: var(--color-black);
+  --lasso-fill-color: var(--color-blue-205-100-50-opacity-15);
+  --lasso-stroke-color: var(--element-selected-outline-stroke-color);
 
   --palette-entry-color: var(--color-grey-225-10-15);
   --palette-entry-hover-color: var(--color-blue-205-100-45);
@@ -57,8 +61,8 @@
   --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);
+  --resizer-fill-color: var(--color-blue-205-100-45);
+  --resizer-stroke-color: var(--canvas-fill-color);
 
   --search-container-background-color: var(--color-grey-225-10-97);
   --search-container-border-color: var(--color-blue-205-100-50);
@@ -88,26 +92,29 @@
  * outline styles
  */
 
-.djs-outline {
+.djs-outline,
+.djs-selection-outline {
   fill: none;
+  shape-rendering: geometricPrecision;
+  stroke-width: 2px;
+}
+
+.djs-outline {
   visibility: hidden;
 }
 
-.djs-element.hover .djs-outline,
-.djs-element.selected .djs-outline {
-  visibility: visible;
-  shape-rendering: geometricPrecision;
-  stroke-dasharray: 3,3;
+.djs-selection-outline {
+  stroke: var(--element-selected-outline-stroke-color);
 }
 
 .djs-element.selected .djs-outline {
+  visibility: visible;
+
   stroke: var(--element-selected-outline-stroke-color);
-  stroke-width: 1px;
 }
 
-.djs-element.hover .djs-outline {
-  stroke: var(--element-hover-outline-fill-color);
-  stroke-width: 1px;
+.djs-multi-select .djs-element.selected .djs-outline {
+  stroke: var(--element-selected-outline-secondary-stroke-color);
 }
 
 .djs-shape.connect-ok .djs-visual > :nth-child(1) {
@@ -131,19 +138,20 @@ svg.new-parent {
   background: var(--shape-drop-allowed-fill-color) !important;
 }
 
-.djs-connection.connect-ok .djs-visual > :nth-child(1),
-.djs-connection.drop-ok .djs-visual > :nth-child(1) {
-  stroke: var(--shape-drop-allowed-fill-color) !important;
-}
 
-.djs-connection.connect-not-ok .djs-visual > :nth-child(1),
-.djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
-  stroke: var(--shape-drop-not-allowed-fill-color) !important;
+/* Override move cursor during drop and connect */
+.drop-not-ok,
+.connect-not-ok,
+.drop-not-ok *,
+.connect-not-ok * {
+  cursor: not-allowed !important;
 }
 
-.drop-not-ok,
-.connect-not-ok {
-  cursor: not-allowed;
+.drop-ok,
+.connect-ok,
+.drop-ok *,
+.connect-ok * {
+  cursor: default !important;
 }
 
 .djs-element.attach-ok .djs-visual > :nth-child(1) {
@@ -164,10 +172,8 @@ svg.new-parent {
 */
 .djs-lasso-overlay {
   fill: var(--lasso-fill-color);
-
-  stroke-dasharray: 5 1 3 1;
   stroke: var(--lasso-stroke-color);
-
+  stroke-width: 2px;
   shape-rendering: geometricPrecision;
   pointer-events: none;
 }
@@ -192,9 +198,8 @@ svg.new-parent {
 .djs-resizer-visual {
   fill: var(--resizer-fill-color);
   stroke-width: 1px;
-  stroke-opacity: 0.5;
   stroke: var(--resizer-stroke-color);
-  shape-rendering: geometricprecision;
+  shape-rendering: geometricPrecision;
 }
 
 .djs-resizer:hover .djs-resizer-visual {
@@ -296,7 +301,8 @@ marker.djs-dragger tspan {
 /**
  * all pointer events for hit shape
  */
-.djs-element > .djs-hit-all {
+.djs-element > .djs-hit-all,
+.djs-element > .djs-hit-no-move {
   pointer-events: all;
 }
 
@@ -305,13 +311,6 @@ marker.djs-dragger tspan {
   pointer-events: stroke;
 }
 
-/**
- * all pointer events for hit shape
- */
-.djs-drag-active .djs-element > .djs-hit-click-stroke {
-  pointer-events: all;
-}
-
 /**
  * shape / connection basic styles
  */
@@ -367,7 +366,7 @@ marker.djs-dragger tspan {
   stroke-linecap: round;
   stroke-width: 1px;
   pointer-events: none;
-  shape-rendering: crispEdges;
+  shape-rendering: geometricPrecision;
   stroke-dasharray: 5, 5;
 }
 
@@ -385,7 +384,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-palette .separator {
-  margin: 0 5px;
+  margin: 5px;
   padding-top: 5px;
 
   border: none;
@@ -395,7 +394,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-palette .entry:before {
-  vertical-align: text-bottom;
+  vertical-align: initial;
 }
 
 .djs-palette .djs-palette-toggle {
@@ -477,6 +476,7 @@ marker.djs-dragger tspan {
   position: absolute;
   display: none;
   pointer-events: none;
+  line-height: 1;
 }
 
 .djs-context-pad .entry {
@@ -494,10 +494,7 @@ marker.djs-dragger tspan {
   background-color: var(--context-pad-entry-background-color);
   box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color);
   pointer-events: all;
-}
-
-.djs-context-pad .entry:before {
-  vertical-align: top;
+  vertical-align: middle;
 }
 
 .djs-context-pad .entry:hover {
@@ -552,7 +549,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-body .entry {
-  padding: 4px 10px 4px 5px;
+  padding: 4px 5px;
 }
 
 .djs-popup-body .entry > span {
@@ -625,7 +622,6 @@ marker.djs-dragger tspan {
   fill: var(--bendpoint-fill-color);
   stroke: var(--bendpoint-stroke-color);
   stroke-width: 1px;
-  stroke-opacity: 0.5;
 }
 
 .djs-segment-dragger:hover,
@@ -684,6 +680,8 @@ marker.djs-dragger tspan {
 .djs-updating .djs-context-pad,
 .djs-updating .djs-outline,
 .djs-updating .djs-bendpoint,
+.djs-multi-select .djs-bendpoint,
+.djs-multi-select .djs-segment-dragger,
 .connect-ok .djs-bendpoint,
 .connect-not-ok .djs-bendpoint,
 .drop-ok .djs-bendpoint,
@@ -817,3 +815,9 @@ marker.djs-dragger tspan {
 .djs-label-hidden .djs-label {
   display: none !important;
 }
+
+.djs-element .djs-hit-stroke,
+.djs-element .djs-hit-click-stroke,
+.djs-element .djs-hit-all {
+  cursor: move;
+}