@metadev/daga 4.0.1 → 4.0.2

package/Changelog.md

@@ -6,6 +6,17 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.0.2
+
+- Add grid style [#261](https://github.com/metadevpro/daga/pull/261)
+- Fix bug where user could perform an action they are not allowed to by using the keyboard [#264](https://github.com/metadevpro/daga/pull/264)
+- Fix bug with boolean input not displaying properly in React [#266](https://github.com/metadevpro/daga/pull/266)
+- Fix bug with not being able to edit nested value sets in property editor in React [#267](https://github.com/metadevpro/daga/pull/267)
+- Fix bug with hexadecimal characters not allowed in colors [#268](https://github.com/metadevpro/daga/pull/268)
+- Make diagram decorators behave as extensions of their diagram node when clicking or hovering over them [#270](https://github.com/metadevpro/daga/pull/270)
+- Make zoom not affect multiple selection rectangle [#271](https://github.com/metadevpro/daga/pull/271)
+- Enable making decorators inherent to a node type [#272](https://github.com/metadevpro/daga/pull/272)
+
 ## v. 4.0.1
 
 - Ensure borders of nodes are fully contained within palette [#253](https://github.com/metadevpro/daga/pull/253)

package/index.cjs.js

@@ -1167,24 +1167,6 @@ class DiagramElementSet extends DiagramEntitySet {
   }
 }
 
-/**
- * Returns whether the incoming timestamp wins over the existing timestamp.
- *
- * In the DiagramModel, timestamps that have never been set are left null;
- * `timestampWins` treats that as an "initial timestamp" that loses to all LogicalTimestamps.
- */
-function timestampWins(incoming, existing) {
-  if (!existing) return true;
-  if (incoming[0] > existing[0]) return true;
-  if (incoming[0] === existing[0]) {
-    // In case of equality, declare the incoming timestamp the "winner".
-    // This occurs if a client reuses a timestamp for multiple actions in a row,
-    // in which case the last created should win.
-    return incoming[1] >= existing[1];
-  }
-  return false;
-}
-
 /**
  * A property which is part of a property set and defines what values a value in a value set can take.
  * @public
@@ -1301,6 +1283,121 @@ class PropertySet {
     return this.propertyList.length > 0;
   }
 }
+
+/**
+ * Returns whether the incoming timestamp wins over the existing timestamp.
+ *
+ * In the DiagramModel, timestamps that have never been set are left null;
+ * `timestampWins` treats that as an "initial timestamp" that loses to all LogicalTimestamps.
+ */
+function timestampWins(incoming, existing) {
+  if (!existing) return true;
+  if (incoming[0] > existing[0]) return true;
+  if (incoming[0] === existing[0]) {
+    // In case of equality, declare the incoming timestamp the "winner".
+    // This occurs if a client reuses a timestamp for multiple actions in a row,
+    // in which case the last created should win.
+    return incoming[1] >= existing[1];
+  }
+  return false;
+}
+
+/**
+ * Checks if the given value is not empty.
+ * @private
+ * @param a A value.
+ * @returns `true` if the given value is not `undefined`, `null`, `''`, `[]` or `{}`; `false` otherwise.
+ */
+const empty = a => {
+  return a === undefined || a === null || a === '' || a instanceof Array && a.length === 0 || a instanceof Object && Object.keys(a).length === 0;
+};
+/**
+ * Checks whether the given values are equal.
+ * @public
+ * @param a A value.
+ * @param b A value.
+ * @returns `true` if the given values are equal, `false` otherwise.
+ */
+const equals = (a, b) => {
+  return a === b || JSON.stringify(a) === JSON.stringify(b);
+};
+/**
+ * Calculates the differences between the two given objects and returns two objects containing the differences in each relative to the other.
+ *
+ * For each key that holds a different value in the two objects, the resulting objects will contain the differences in the values under that key.
+ *
+ * This function is recursive, that is, if the value under the key is an object, the function will be applied to that value recursively.
+ *
+ * @public
+ * @param a An object.
+ * @param b An object.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+const diff = (a, b) => {
+  const aDiff = {};
+  const bDiff = {};
+  const allKeys = [];
+  for (const key in a) {
+    allKeys.push(key);
+  }
+  for (const key in b) {
+    if (!(key in a)) {
+      allKeys.push(key);
+    }
+  }
+  for (const key of allKeys) {
+    if (isObject(a[key]) && isObject(b[key])) {
+      const diffAB = diff(a[key], b[key]);
+      // only add the key if differences are detected
+      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
+        aDiff[key] = diffAB[0];
+        bDiff[key] = diffAB[1];
+      }
+    } else {
+      if (!equals(a[key], b[key])) {
+        aDiff[key] = a[key];
+        bDiff[key] = b[key];
+      }
+    }
+  }
+  return [aDiff, bDiff];
+};
+/**
+ * Calculates the differences between the two given values of a valueset and returns two objects containing the differences in each relative to the other.
+ *
+ * @param a An object.
+ * @param b An object.
+ * @param valueSet A ValueSet to use as reference for the keys and types of each property.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+const diffProperties = (a, b, valueSet) => {
+  const aDiff = {};
+  const bDiff = {};
+  for (const key in valueSet.propertySet.propertyMap) {
+    if (valueSet.propertySet.propertyMap[key].type === exports.Type.Object) {
+      const diffAB = diffProperties(a[key], b[key], valueSet.getSubValueSet(key));
+      // only add the key if differences are detected
+      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
+        aDiff[key] = diffAB[0];
+        bDiff[key] = diffAB[1];
+      }
+    } else {
+      if (!equals(a[key], b[key])) {
+        aDiff[key] = a[key];
+        bDiff[key] = b[key];
+      }
+    }
+  }
+  return [aDiff, bDiff];
+};
+/**
+ * Checks if the given value is an object.
+ * @public
+ * @param x A value.
+ * @returns `true` if the given value is an object, `false` otherwise.
+ */
+const isObject = x => x !== undefined && x !== null && x.constructor === Object;
+
 /**
  * A set of values corresponding to a set of properties.
  * @public
@@ -1652,101 +1749,6 @@ class ValueSet {
     }
   }
 }
-/**
- * Checks if the given value is not empty.
- * @private
- * @param a A value.
- * @returns `true` if the given value is not `undefined`, `null`, `''`, `[]` or `{}`; `false` otherwise.
- */
-const empty = a => {
-  return a === undefined || a === null || a === '' || a instanceof Array && a.length === 0 || a instanceof Object && Object.keys(a).length === 0;
-};
-/**
- * Checks whether the given values are equal.
- * @public
- * @param a A value.
- * @param b A value.
- * @returns `true` if the given values are equal, `false` otherwise.
- */
-const equals = (a, b) => {
-  return a === b || JSON.stringify(a) === JSON.stringify(b);
-};
-/**
- * Calculates the differences between the two given objects and returns two objects containing the differences in each relative to the other.
- *
- * For each key that holds a different value in the two objects, the resulting objects will contain the differences in the values under that key.
- *
- * This function is recursive, that is, if the value under the key is an object, the function will be applied to that value recursively.
- *
- * @public
- * @param a An object.
- * @param b An object.
- * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
- */
-const diff = (a, b) => {
-  const aDiff = {};
-  const bDiff = {};
-  const allKeys = [];
-  for (const key in a) {
-    allKeys.push(key);
-  }
-  for (const key in b) {
-    if (!(key in a)) {
-      allKeys.push(key);
-    }
-  }
-  for (const key of allKeys) {
-    if (isObject(a[key]) && isObject(b[key])) {
-      const diffAB = diff(a[key], b[key]);
-      // only add the key if differences are detected
-      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
-        aDiff[key] = diffAB[0];
-        bDiff[key] = diffAB[1];
-      }
-    } else {
-      if (!equals(a[key], b[key])) {
-        aDiff[key] = a[key];
-        bDiff[key] = b[key];
-      }
-    }
-  }
-  return [aDiff, bDiff];
-};
-/**
- * Calculates the differences between the two given values of a valueset and returns two objects containing the differences in each relative to the other.
- *
- * @param a An object.
- * @param b An object.
- * @param valueSet A ValueSet to use as reference for the keys and types of each property.
- * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
- */
-const diffProperties = (a, b, valueSet) => {
-  const aDiff = {};
-  const bDiff = {};
-  for (const key in valueSet.propertySet.propertyMap) {
-    if (valueSet.propertySet.propertyMap[key].type === exports.Type.Object) {
-      const diffAB = diffProperties(a[key], b[key], valueSet.getSubValueSet(key));
-      // only add the key if differences are detected
-      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
-        aDiff[key] = diffAB[0];
-        bDiff[key] = diffAB[1];
-      }
-    } else {
-      if (!equals(a[key], b[key])) {
-        aDiff[key] = a[key];
-        bDiff[key] = b[key];
-      }
-    }
-  }
-  return [aDiff, bDiff];
-};
-/**
- * Checks if the given value is an object.
- * @public
- * @param x A value.
- * @returns `true` if the given value is an object, `false` otherwise.
- */
-const isObject = x => x !== undefined && x !== null && x.constructor === Object;
 
 /**
  * Default values of the parameters of a diagram connection.
@@ -2983,6 +2985,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   padding: 0,
   label: null,
   ports: [],
+  decorators: [],
   sectionGrid: null,
   look: DIAGRAM_NODE_LOOK_DEFAULTS,
   isUnique: false,
@@ -3013,6 +3016,7 @@ class DiagramNodeType {
     this.topPadding = getTopPadding(values);
     this.label = values.label;
     this.ports = values.ports;
+    this.decorators = values.decorators;
     this.sectionGrid = values.sectionGrid ? new DiagramSectionGrid(values.sectionGrid) : null;
     const looks = extractLooksFromConfig(values.look);
     this.defaultLook = looks.defaultLook;
@@ -3654,7 +3658,7 @@ class DiagramNodeSet extends DiagramElementSet {
       for (let i = 0; i < nodeType.ports.length; ++i) {
         const portConfig = nodeType.ports[i];
         const portType = portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined;
-        const port = this.model.ports.new(portType, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_${i}`);
+        const port = this.model.ports.new(portType, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_port_${i}`);
         if ((_e = port.type) === null || _e === undefined ? undefined : _e.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === undefined ? undefined : _f.label);
           const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
@@ -3681,6 +3685,13 @@ class DiagramNodeSet extends DiagramElementSet {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), nodeType.label);
       this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
     }
+    // add node decorators
+    if (nodeType.decorators.length > 0) {
+      for (let i = 0; i < nodeType.decorators.length; ++i) {
+        const decoratorConfig = nodeType.decorators[i];
+        this.model.decorators.new(node, [node.coords[0] + decoratorConfig.coords[0], node.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, node.getPriority(), decoratorConfig.html, `${node.id}_decorator_${i}`);
+      }
+    }
     node.valueSet.resetValues();
     (_g = node.model.canvas) === null || _g === undefined ? undefined : _g.fitNodeInView(node.id);
     return node;
@@ -4209,6 +4220,13 @@ class DagaImporter {
       newNode.width = node.width;
       newNode.height = node.height;
       if (node.label) {
+        // add node decorators
+        if (newNodeType.decorators) {
+          for (let i = 0; i < newNodeType.decorators.length; ++i) {
+            const decoratorConfig = newNodeType.decorators[i];
+            model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
+          }
+        }
         // add node label
         if (newNodeType.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
@@ -5930,6 +5948,32 @@ const updateLook = selection => {
   selection.filter('.stretchable-image-look').select('image.bottom-image').attr('x', d => d.look.leftMargin).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.width - d.look.rightMargin - d.look.leftMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottom);
   selection.filter('.stretchable-image-look').select('image.bottom-right-image').attr('x', d => d.width - d.look.rightMargin).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.look.rightMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottomRight);
 };
+const GRID_DEFAULTS = {
+  enabled: true,
+  style: 'dots',
+  color: 'rgba(0, 0, 0, 0.1)',
+  snap: false,
+  spacing: 10,
+  thickness: 0.05
+};
+const initializeGrid = (canvas, canvasView, backgroundPatternId) => {
+  const canvasDefs = canvasView.append('defs');
+  if (canvas.gridSize > 0 && isFinite(canvas.gridSize)) {
+    const canvasBackgroundPattern = canvasDefs.append('pattern').attr('id', backgroundPatternId).attr('x', -canvas.gridSize / 2).attr('y', -canvas.gridSize / 2).attr('width', canvas.gridSize).attr('height', canvas.gridSize).attr('patternUnits', 'userSpaceOnUse');
+    canvasBackgroundPattern.append('rect').attr('x', 0).attr('y', 0).attr('width', canvas.gridSize).attr('height', canvas.gridSize).attr('fill', canvas.backgroundColor);
+    switch (canvas.gridStyle) {
+      case 'dots':
+        canvasBackgroundPattern.append('circle').attr('cx', canvas.gridSize / 2).attr('cy', canvas.gridSize / 2).attr('r', canvas.gridSize * canvas.gridThickness).attr('fill', canvas.gridColor);
+        break;
+      case 'lines':
+        canvasBackgroundPattern.append('line').attr('x1', canvas.gridSize / 2).attr('x2', canvas.gridSize / 2).attr('y1', 0).attr('y2', canvas.gridSize).attr('stroke-width', canvas.gridSize * canvas.gridThickness).attr('stroke', canvas.gridColor);
+        canvasBackgroundPattern.append('line').attr('x1', 0).attr('x2', (canvas.gridSize - canvas.gridSize * canvas.gridThickness) / 2).attr('y1', canvas.gridSize / 2).attr('y2', canvas.gridSize / 2).attr('stroke-width', canvas.gridSize * canvas.gridThickness).attr('stroke', canvas.gridColor);
+        canvasBackgroundPattern.append('line').attr('x1', (canvas.gridSize + canvas.gridSize * canvas.gridThickness) / 2).attr('x2', canvas.gridSize).attr('y1', canvas.gridSize / 2).attr('y2', canvas.gridSize / 2).attr('stroke-width', canvas.gridSize * canvas.gridThickness).attr('stroke', canvas.gridColor);
+        break;
+    }
+    canvasView.select('rect').attr('fill', `url(#${backgroundPatternId})`);
+  }
+};
 
 const CONTEXT_MENU_MENU_RADIUS = 96;
 const CONTEXT_MENU_BUTTON_RADIUS = 32;
@@ -6099,7 +6143,7 @@ class DiagramUserHighlight extends DiagramElementSet {
   focusOn(element) {
     this.clear();
     this.focus = element;
-    if (element instanceof DiagramField && element.rootElement) {
+    if ((element instanceof DiagramField || element instanceof DiagramDecorator) && element.rootElement) {
       this.focusOn(element.rootElement);
     } else {
       this.add(element);
@@ -6587,7 +6631,7 @@ class DiagramCanvas {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(parentComponent, config) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
     this.zoomTransform = d3__namespace.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -6606,15 +6650,16 @@ class DiagramCanvas {
     this.userHighlight = new DiagramUserHighlight(this);
     this.contextMenu = new DiagramContextMenu(this, (_a = config.canvas) === null || _a === undefined ? undefined : _a.contextMenu);
     this.backgroundColor = ((_b = config.canvas) === null || _b === undefined ? undefined : _b.backgroundColor) || '#FFFFFF';
-    this.gridSize = ((_d = (_c = config.canvas) === null || _c === undefined ? undefined : _c.grid) === null || _d === undefined ? undefined : _d.enabled) === false || ((_e = config.canvas) === null || _e === undefined ? undefined : _e.grid) === undefined ? 0 : Math.abs(((_g = (_f = config.canvas) === null || _f === undefined ? undefined : _f.grid) === null || _g === undefined ? undefined : _g.spacing) || 10);
-    this.gridThickness = Math.abs(((_j = (_h = config.canvas) === null || _h === undefined ? undefined : _h.grid) === null || _j === undefined ? undefined : _j.thickness) || 0.05);
-    this.gridColor = ((_l = (_k = config.canvas) === null || _k === undefined ? undefined : _k.grid) === null || _l === undefined ? undefined : _l.color) || 'rgba(0, 0, 0, 0.1)';
-    this.snapToGrid = ((_o = (_m = config.canvas) === null || _m === undefined ? undefined : _m.grid) === null || _o === undefined ? undefined : _o.enabled) === false || ((_p = config.canvas) === null || _p === undefined ? undefined : _p.grid) === undefined ? false : ((_r = (_q = config.canvas) === null || _q === undefined ? undefined : _q.grid) === null || _r === undefined ? undefined : _r.snap) || false;
-    this.zoomFactor = ((_s = config.canvas) === null || _s === undefined ? undefined : _s.zoomFactor) || 2;
-    this.panRate = ((_t = config.canvas) === null || _t === undefined ? undefined : _t.panRate) || 100;
+    this.gridStyle = (_e = (_d = (_c = config.canvas) === null || _c === undefined ? undefined : _c.grid) === null || _d === undefined ? undefined : _d.style) !== null && _e !== undefined ? _e : GRID_DEFAULTS.style;
+    this.gridSize = ((_g = (_f = config.canvas) === null || _f === undefined ? undefined : _f.grid) === null || _g === undefined ? undefined : _g.enabled) === false || ((_h = config.canvas) === null || _h === undefined ? undefined : _h.grid) === undefined ? 0 : Math.abs(((_k = (_j = config.canvas) === null || _j === undefined ? undefined : _j.grid) === null || _k === undefined ? undefined : _k.spacing) || GRID_DEFAULTS.spacing);
+    this.gridThickness = Math.abs(((_m = (_l = config.canvas) === null || _l === undefined ? undefined : _l.grid) === null || _m === undefined ? undefined : _m.thickness) || GRID_DEFAULTS.thickness);
+    this.gridColor = ((_p = (_o = config.canvas) === null || _o === undefined ? undefined : _o.grid) === null || _p === undefined ? undefined : _p.color) || GRID_DEFAULTS.color;
+    this.snapToGrid = ((_r = (_q = config.canvas) === null || _q === undefined ? undefined : _q.grid) === null || _r === undefined ? undefined : _r.enabled) === false || ((_s = config.canvas) === null || _s === undefined ? undefined : _s.grid) === undefined ? false : ((_u = (_t = config.canvas) === null || _t === undefined ? undefined : _t.grid) === null || _u === undefined ? undefined : _u.snap) || GRID_DEFAULTS.snap;
+    this.zoomFactor = ((_v = config.canvas) === null || _v === undefined ? undefined : _v.zoomFactor) || 2;
+    this.panRate = ((_w = config.canvas) === null || _w === undefined ? undefined : _w.panRate) || 100;
     this.inferConnectionType = config.inferConnectionType || false;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_u = config.canvas) === null || _u === undefined ? undefined : _u.priorityThresholds) || [];
+    this.priorityThresholds = ((_x = config.canvas) === null || _x === undefined ? undefined : _x.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -6741,23 +6786,29 @@ class DiagramCanvas {
         }
       }
       if (event.ctrlKey && event.key === 'c') {
-        event.preventDefault();
-        // copy
-        this.userSelection.copyToClipboard();
-        this.cancelAllUserActions();
+        if (this.canUserPerformAction(exports.DiagramActions.Clipboard)) {
+          event.preventDefault();
+          // copy
+          this.userSelection.copyToClipboard();
+          this.cancelAllUserActions();
+        }
       }
       if (event.ctrlKey && event.key === 'x') {
-        event.preventDefault();
-        // cut
-        this.userSelection.cutToClipboard();
-        this.cancelAllUserActions();
+        if (this.canUserPerformAction(exports.DiagramActions.Clipboard) && this.canUserPerformAction(exports.DiagramActions.Remove)) {
+          event.preventDefault();
+          // cut
+          this.userSelection.cutToClipboard();
+          this.cancelAllUserActions();
+        }
       }
       if (event.ctrlKey && event.key === 'v') {
-        event.preventDefault();
-        // paste
-        const coordinateRange = this.getCoordinatesOnScreen();
-        this.userSelection.pasteFromClipboard(this.getClosestGridPoint([(coordinateRange[0][0] + coordinateRange[1][0]) / 2, (coordinateRange[0][1] + coordinateRange[1][1]) / 2]));
-        this.cancelAllUserActions();
+        if (this.canUserPerformAction(exports.DiagramActions.Paste)) {
+          event.preventDefault();
+          // paste
+          const coordinateRange = this.getCoordinatesOnScreen();
+          this.userSelection.pasteFromClipboard(this.getClosestGridPoint([(coordinateRange[0][0] + coordinateRange[1][0]) / 2, (coordinateRange[0][1] + coordinateRange[1][1]) / 2]));
+          this.cancelAllUserActions();
+        }
       }
       if (event.ctrlKey && event.key === 'y') {
         event.preventDefault();
@@ -6770,38 +6821,50 @@ class DiagramCanvas {
         this.actionStack.undo();
       }
       if (event.key === '+') {
-        event.preventDefault();
-        // zoom in
-        this.zoomBy(this.zoomFactor);
+        if (this.canUserPerformAction(exports.DiagramActions.Zoom)) {
+          event.preventDefault();
+          // zoom in
+          this.zoomBy(this.zoomFactor);
+        }
       }
       if (event.key === '-') {
-        event.preventDefault();
-        // zoom out
-        this.zoomBy(1 / this.zoomFactor);
+        if (this.canUserPerformAction(exports.DiagramActions.Zoom)) {
+          event.preventDefault();
+          // zoom out
+          this.zoomBy(1 / this.zoomFactor);
+        }
       }
       if (event.key === exports.Keys.ArrowLeft) {
-        event.preventDefault();
-        // move left, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(this.panRate / this.zoomTransform.k, 0);
+        if (this.canUserPerformAction(exports.DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move left, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(this.panRate / this.zoomTransform.k, 0);
+        }
       }
       if (event.key === exports.Keys.ArrowRight) {
-        event.preventDefault();
-        // move right, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(-this.panRate / this.zoomTransform.k, 0);
+        if (this.canUserPerformAction(exports.DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move right, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(-this.panRate / this.zoomTransform.k, 0);
+        }
       }
       if (event.key === exports.Keys.ArrowDown) {
-        event.preventDefault();
-        // move down, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(0, -this.panRate / this.zoomTransform.k);
+        if (this.canUserPerformAction(exports.DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move down, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(0, -this.panRate / this.zoomTransform.k);
+        }
       }
       if (event.key === exports.Keys.ArrowUp) {
-        event.preventDefault();
-        // move up, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(0, this.panRate / this.zoomTransform.k);
+        if (this.canUserPerformAction(exports.DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move up, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(0, this.panRate / this.zoomTransform.k);
+        }
       }
     });
     const canvasView = this.selectSVGElement().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
-    const canvasBackground = canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(exports.Events.MouseMove, event => {
+    canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(exports.Events.MouseMove, event => {
       if (this.unfinishedConnection !== undefined) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         this.unfinishedConnection.endCoords = pointerCoords;
@@ -6857,13 +6920,7 @@ class DiagramCanvas {
     }).on(exports.ZoomEvents.End, () => {
       setCursorStyle();
     }));
-    const canvasDefs = canvasView.append('defs');
-    if (this.gridSize > 0 && isFinite(this.gridSize)) {
-      const canvasBackgroundPattern = canvasDefs.append('pattern').attr('id', this.backgroundPatternId).attr('x', -this.gridSize / 2).attr('y', -this.gridSize / 2).attr('width', this.gridSize).attr('height', this.gridSize).attr('patternUnits', 'userSpaceOnUse');
-      canvasBackgroundPattern.append('rect').attr('x', 0).attr('y', 0).attr('width', this.gridSize).attr('height', this.gridSize).attr('fill', this.backgroundColor);
-      canvasBackgroundPattern.append('circle').attr('cx', this.gridSize / 2).attr('cy', this.gridSize / 2).attr('r', this.gridSize * this.gridThickness).attr('fill', this.gridColor);
-      canvasBackground.attr('fill', `url(#${this.backgroundPatternId})`);
-    }
+    initializeGrid(this, canvasView, this.backgroundPatternId);
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
   zoomBy(factor) {
@@ -7839,7 +7896,23 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
-    enterSelection.on(exports.Events.ContextMenu, (event, d) => {
+    enterSelection.on(exports.Events.MouseOver, (_event, d) => {
+      if (!this.dragging) {
+        this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
+      }
+    }).on(exports.Events.Click, (event, d) => {
+      if (!event.ctrlKey && !event.shiftKey) {
+        const deselectedElements = this.userSelection.all();
+        this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
+      }
+      if (d.rootElement) {
+        const elementToBeToggled = getRelatedNodeOrItself(d.rootElement);
+        this.userSelection.toggle(elementToBeToggled);
+        this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
+      }
+    }).on(exports.Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
         event.stopPropagation();
@@ -7849,8 +7922,15 @@ class DiagramCanvas {
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(exports.DiagramActions.ContextMenu)) {
-        event.preventDefault();
-        this.contextMenu.open(event);
+        if (d.rootElement) {
+          event.preventDefault();
+          const elementToSelect = getRelatedNodeOrItself(d.rootElement);
+          this.userHighlight.focusOn(elementToSelect);
+          this.diagramEvent$.next(new DiagramHighlightedEvent(elementToSelect));
+          this.userSelection.add(elementToSelect);
+          this.diagramEvent$.next(new DiagramSelectionEvent([elementToSelect], true));
+          this.contextMenu.open(event);
+        }
       }
     }).on(exports.Events.DoubleClick, (event, d) => {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
@@ -8324,18 +8404,18 @@ class DiagramCanvas {
   }
   startMultipleSelection(event) {
     this.draggingFrom = this.getPointerLocationRelativeToCanvas(event);
-    /* TODO: would be a good idea to build the multipleSelectionContainer
-     * from selectRoot() instead of selectCanvasElements()
-     * to avoid having the thickness of the rectangle be affected by zoom
-     */
-    this.multipleSelectionContainer = this.selectCanvasElements().append('rect').attr('stroke', '#0E74B6').attr('fill', 'rgba(14, 116, 182, 0.06)');
+    // we put the multiple selection rectangle in the diagram svg element
+    // so it's not affected by the zoom level in the diagram elements
+    this.multipleSelectionContainer = this.selectSVGElement().append('rect').attr('stroke', '#0E74B6').attr('fill', 'rgba(14, 116, 182, 0.06)');
   }
   continueMultipleSelection(event) {
     var _a, _b, _c, _d;
     const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
     if (this.draggingFrom[0] !== pointerCoords[0] || this.draggingFrom[1] !== pointerCoords[1]) {
       setCursorStyle(exports.CursorStyle.Crosshair);
-      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]))) === null || _b === undefined ? undefined : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]))) === null || _c === undefined ? undefined : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]))) === null || _d === undefined ? undefined : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]));
+      // since the multiple selection rectangle is not affected by zoom,
+      // we compensate its coordinates based in the zoom transform to draw it
+      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]) * this.zoomTransform.k + this.zoomTransform.x)) === null || _b === undefined ? undefined : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]) * this.zoomTransform.k + this.zoomTransform.y)) === null || _c === undefined ? undefined : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]) * this.zoomTransform.k)) === null || _d === undefined ? undefined : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]) * this.zoomTransform.k);
       this.dragging = true;
     }
   }