bpmn-js 8.8.3 → 8.9.0

package/CHANGELOG.md

@@ -6,6 +6,16 @@ All notable changes to [bpmn-js](https://github.com/bpmn-io/bpmn-js) are documen
 
 ___Note:__ Yet to be released changes appear here._
 
+## 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))

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);
 }
 
 /**

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v8.8.3
+ * bpmn-js - bpmn-modeler v8.9.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-12-03
+ * Date: 2022-01-14
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -5323,13 +5323,17 @@
 	 * Scrolls the viewbox to contain the given element.
 	 * Optionally specify a padding to be applied to the edges.
 	 *
-	 * @param {Object} [element] the element to scroll to.
+	 * @param {Object|String} [element] the element to scroll to.
 	 * @param {Object|Number} [padding=100] the padding to be applied. Can also specify top, bottom, left and right.
 	 *
 	 */
 	Canvas.prototype.scrollToElement = function(element, padding) {
 	  var defaultPadding = 100;
 
+	  if (typeof element === 'string') {
+	    element = this._elementRegistry.get(element);
+	  }
+
 	  // switch to correct Plane
 	  var targetPlane = this.findPlane(element);
 	  if (targetPlane !== this._activePlane) {
@@ -25509,14 +25513,23 @@
 	  // the touch recognizer
 	  var recognizer;
 
-	  function handler(type) {
+	  function handler(type, buttonType) {
 
 	    return function(event) {
 
-	      interactionEvents.fire(type, event);
+	      var gfx = getGfx(event.target),
+	          element = gfx && elementRegistry.get(gfx);
+
+	      // translate into an actual mouse click event
+	      if (buttonType) {
+	        event.srcEvent.button = buttonType;
+	      }
+
+	      return interactionEvents.fire(type, event, element);
 	    };
 	  }
 
+
 	  function getGfx(target) {
 	    var node = closest(target, 'svg, .djs-element', true);
 	    return node;
@@ -25527,10 +25540,6 @@
 	    // touch recognizer
 	    recognizer = createTouchRecognizer(svg);
 
-	    recognizer.on('doubletap', handler('element.dblclick'));
-
-	    recognizer.on('tap', handler('element.click'));
-
 	    function startGrabCanvas(event) {
 
 	      var lx = 0, ly = 0;
@@ -25598,6 +25607,9 @@
 	      recognizer.on('pinchcancel', end);
 	    }
 
+	    recognizer.on('tap', handler('element.click'));
+	    recognizer.on('doubletap', handler('element.dblclick', 1));
+
 	    recognizer.on('panstart', startGrab);
 	    recognizer.on('press', startGrab);
 
@@ -39195,7 +39207,7 @@
 
 	  function activateDirectEdit(element, force) {
 	    if (force ||
-	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Group' ]) ||
+	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
 	        isCollapsedSubProcess(element)) {
 
 	      directEditing.activate(element);
@@ -48091,7 +48103,8 @@
 
 	BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
-	    bpmnElement: semantic
+	    bpmnElement: semantic,
+	    waypoint: this.createDiWaypoints(waypoints)
 	  }, attrs));
 	};
 
@@ -52276,12 +52289,26 @@
 	    // TODO @barmac: remove once we drop bpmn.io properties
 	    ensureLegacySupport(assignedDi);
 
-	    self._commandStack.execute('element.updateProperties', {
-	      element: element,
-	      properties: {
-	        di: assignedDi
-	      }
-	    });
+	    if (element.labelTarget) {
+
+	      // set label colors as bpmndi:BPMNLabel#color
+	      self._commandStack.execute('element.updateModdleProperties', {
+	        element: element,
+	        moddleElement: element.businessObject.di.label,
+	        properties: {
+	          color: di['background-color']
+	        }
+	      });
+	    } else {
+
+	      // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
+	      self._commandStack.execute('element.updateProperties', {
+	        element: element,
+	        properties: {
+	          di: assignedDi
+	        }
+	      });
+	    }
 	  });
 
 	};
@@ -54391,7 +54418,9 @@
 	    ENTRY_SELECTOR = '.entry',
 	    ELEMENT_SELECTOR = TOGGLE_SELECTOR + ', ' + ENTRY_SELECTOR;
 
-	var PALETTE_OPEN_CLS = 'open',
+	var PALETTE_PREFIX = 'djs-palette-',
+	    PALETTE_SHOWN_CLS = 'shown',
+	    PALETTE_OPEN_CLS = 'open',
 	    PALETTE_TWO_COLUMN_CLS = 'two-column';
 
 	var DEFAULT_PRIORITY = 1000;
@@ -54509,6 +54538,7 @@
 	  var container = this._container = domify(Palette.HTML_MARKUP);
 
 	  parentContainer.appendChild(container);
+	  classes$1(parentContainer).add(PALETTE_PREFIX + PALETTE_SHOWN_CLS);
 
 	  delegate.bind(container, ELEMENT_SELECTOR, 'click', function(event) {
 
@@ -54566,7 +54596,8 @@
 
 	  var twoColumn;
 
-	  var cls = classes$1(container);
+	  var cls = classes$1(container),
+	      parentCls = classes$1(parent);
 
 	  if ('twoColumn' in state) {
 	    twoColumn = state.twoColumn;
@@ -54576,9 +54607,11 @@
 
 	  // always update two column
 	  cls.toggle(PALETTE_TWO_COLUMN_CLS, twoColumn);
+	  parentCls.toggle(PALETTE_PREFIX + PALETTE_TWO_COLUMN_CLS, twoColumn);
 
 	  if ('open' in state) {
 	    cls.toggle(PALETTE_OPEN_CLS, state.open);
+	    parentCls.toggle(PALETTE_PREFIX + PALETTE_OPEN_CLS, state.open);
 	  }
 
 	  eventBus.fire('palette.changed', {
@@ -55485,7 +55518,7 @@
 
 	    create.start(event, [ subProcess, startEvent ], {
 	      hints: {
-	        autoSelect: [ startEvent ]
+	        autoSelect: [ subProcess ]
 	      }
 	    });
 	  }