@metadev/daga 4.0.0 → 4.0.2

package/index.esm.js

@@ -1001,6 +1001,10 @@ class DiagramEntitySet {
   }
 }
 
+const escapeSelector = selector => {
+  return selector.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, '\\$1');
+};
+
 /**
  * Default priority value for diagram elements.
  * @private
@@ -1062,7 +1066,7 @@ class DiagramElement {
    */
   select() {
     var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`g#${this.id}`);
+    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`[id='${escapeSelector(this.id)}']`);
   }
 }
 class DiagramElementSet extends DiagramEntitySet {
@@ -1142,24 +1146,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
@@ -1276,6 +1262,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 === 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
@@ -1627,101 +1728,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 === 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.
@@ -2269,10 +2275,6 @@ class DiagramField extends DiagramElement {
     this.editable = editable;
     this.fit = fit;
   }
-  select() {
-    var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`foreignObject#${this.id}`);
-  }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
@@ -2962,6 +2964,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   padding: 0,
   label: null,
   ports: [],
+  decorators: [],
   sectionGrid: null,
   look: DIAGRAM_NODE_LOOK_DEFAULTS,
   isUnique: false,
@@ -2992,6 +2995,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;
@@ -3633,7 +3637,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);
@@ -3660,6 +3664,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;
@@ -4188,6 +4199,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);
@@ -5614,10 +5632,6 @@ class DiagramDecorator extends DiagramElement {
     this.priority = priority;
     this.html = html;
   }
-  select() {
-    var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`foreignObject#${this.id}`);
-  }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
@@ -5707,10 +5721,6 @@ class DiagramObject extends DiagramElement {
     this.priority = priority;
     this.html = html;
   }
-  select() {
-    var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`foreignObject#${this.id}`);
-  }
   get removed() {
     return this.selfRemoved;
   }
@@ -5917,12 +5927,41 @@ 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;
 const CONTEXT_MENU_TOTAL_RADIUS = CONTEXT_MENU_MENU_RADIUS + CONTEXT_MENU_BUTTON_RADIUS;
 const CONTEXT_MENU_BUTTON_PADDING_RADIANS = Math.PI / 4;
 const CONTEXT_MENU_ANIMATION_DURATION_MS = 100;
+const CONTEXT_MENU_DEFAULTS = {
+  customButtons: []
+};
 /**
  * Stores the functionality regarding the context menu of a diagram canvas.
  * @public
@@ -5934,8 +5973,9 @@ class DiagramContextMenu {
    * @public
    * @param canvas A canvas.
    */
-  constructor(canvas) {
+  constructor(canvas, config) {
     this.canvas = canvas;
+    this.config = config || CONTEXT_MENU_DEFAULTS;
   }
   /**
    * Opens the context menu at the location determined by the given mouse event.
@@ -5962,10 +6002,9 @@ class DiagramContextMenu {
       buttons.push({
         name: 'CUT',
         imageClass: 'daga-cut',
-        onPress: buttonPressEvent => {
-          buttonPressEvent.preventDefault();
-          this.canvas.userSelection.cutToClipboard();
-          this.canvas.cancelAllUserActions();
+        onPress: canvas => {
+          canvas.userSelection.cutToClipboard();
+          canvas.cancelAllUserActions();
         }
       });
     }
@@ -5973,10 +6012,9 @@ class DiagramContextMenu {
       buttons.push({
         name: 'COPY',
         imageClass: 'daga-copy',
-        onPress: buttonPressEvent => {
-          buttonPressEvent.preventDefault();
-          this.canvas.userSelection.copyToClipboard();
-          this.canvas.cancelAllUserActions();
+        onPress: canvas => {
+          canvas.userSelection.copyToClipboard();
+          canvas.cancelAllUserActions();
         }
       });
     }
@@ -5984,10 +6022,9 @@ class DiagramContextMenu {
       buttons.push({
         name: 'PASTE',
         imageClass: 'daga-paste',
-        onPress: buttonPressEvent => {
-          buttonPressEvent.preventDefault();
-          this.canvas.userSelection.pasteFromClipboard(this.canvas.getClosestGridPoint(coordsRelativeToCanvas));
-          this.canvas.cancelAllUserActions();
+        onPress: canvas => {
+          canvas.userSelection.pasteFromClipboard(canvas.getClosestGridPoint(coordsRelativeToCanvas));
+          canvas.cancelAllUserActions();
         }
       });
     }
@@ -5995,13 +6032,17 @@ class DiagramContextMenu {
       buttons.push({
         name: 'DELETE',
         imageClass: 'daga-delete',
-        onPress: buttonPressEvent => {
-          buttonPressEvent.preventDefault();
-          this.canvas.userSelection.removeFromModel();
-          this.canvas.cancelAllUserActions();
+        onPress: canvas => {
+          canvas.userSelection.removeFromModel();
+          canvas.cancelAllUserActions();
         }
       });
     }
+    for (const customButton of this.config.customButtons || CONTEXT_MENU_DEFAULTS.customButtons) {
+      if (customButton.condition !== undefined ? customButton.condition(this.canvas) : true) {
+        buttons.push(customButton);
+      }
+    }
     // show something if there are no options available
     if (buttons.length === 0) {
       buttons.push({
@@ -6014,20 +6055,22 @@ class DiagramContextMenu {
       const button = buttons[i];
       const buttonOnPress = button.onPress;
       const angle = (i + 0.5 - buttons.length / 2) * CONTEXT_MENU_BUTTON_PADDING_RADIANS;
-      const buttonContainer = contextMenuContainer.append('xhtml:div').attr('class', `daga-context-menu-button ${button.imageClass}-button${button.onPress != undefined ? ' daga-clickable' : ''}`).attr('tabindex', 0).style('position', 'absolute').style('box-sizing', 'border-box').style('width', `${2 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('height', `${2 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('border-radius', `${CONTEXT_MENU_BUTTON_RADIUS}px`).style('pointer-events', 'auto')
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      .on(Events.Click, event => {
+      const buttonContainer = contextMenuContainer.append('xhtml:div').attr('class', `daga-context-menu-button ${button.onPress !== undefined ? ' daga-clickable' : ''}`).attr('tabindex', 0).style('position', 'absolute').style('box-sizing', 'border-box').style('width', `${2 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('height', `${2 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('border-radius', `${CONTEXT_MENU_BUTTON_RADIUS}px`).style('pointer-events', 'auto').on(Events.Click, event => {
         if (buttonOnPress) {
-          buttonOnPress(event);
+          event.preventDefault();
+          buttonOnPress(this.canvas);
         }
-      })
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      .on(Events.KeyDown, event => {
+      }).on(Events.KeyDown, event => {
         if (buttonOnPress && event.key === Keys.Enter) {
-          buttonOnPress(event);
+          event.preventDefault();
+          buttonOnPress(this.canvas);
         }
       });
-      buttonContainer.append('xhtml:div').style('position', 'absolute').style('left', `${0.75 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('top', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('width', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('height', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('background-size', 'contain').style('background-repeat', 'no-repeat').attr('class', button.imageClass);
+      if (button.imageClass !== undefined) {
+        buttonContainer.append('xhtml:div').style('position', 'absolute').style('left', `${0.75 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('top', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('width', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('height', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('background-size', 'contain').style('background-repeat', 'no-repeat').attr('class', button.imageClass);
+      } else if (button.image !== undefined) {
+        buttonContainer.append('xhtml:img').style('position', 'absolute').style('left', `${0.75 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('top', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('width', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('height', `${0.5 * CONTEXT_MENU_BUTTON_RADIUS}px`).attr('src', button.image);
+      }
       buttonContainer.append('xhtml:span').style('position', 'absolute').style('left', `${0.2 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('top', `${1.1 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('text-align', 'center').style('width', `${1.6 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('height', `${0.35 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('margin', '0').style('font-size', `${0.35 * CONTEXT_MENU_BUTTON_RADIUS}px`).style('font-weight', '700').style('user-select', 'none').text(button.name);
       buttonContainer.transition().ease(d3.easeLinear).duration(CONTEXT_MENU_ANIMATION_DURATION_MS).tween('progress', () => {
         return value => {
@@ -6079,7 +6122,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);
@@ -6567,7 +6610,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;
+    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.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -6584,17 +6627,18 @@ class DiagramCanvas {
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
     this.userSelection = new DiagramUserSelection(this);
     this.userHighlight = new DiagramUserHighlight(this);
-    this.contextMenu = new DiagramContextMenu(this);
-    this.backgroundColor = ((_a = config.canvas) === null || _a === undefined ? undefined : _a.backgroundColor) || '#FFFFFF';
-    this.gridSize = ((_c = (_b = config.canvas) === null || _b === undefined ? undefined : _b.grid) === null || _c === undefined ? undefined : _c.enabled) === false || ((_d = config.canvas) === null || _d === undefined ? undefined : _d.grid) === undefined ? 0 : Math.abs(((_f = (_e = config.canvas) === null || _e === undefined ? undefined : _e.grid) === null || _f === undefined ? undefined : _f.spacing) || 10);
-    this.gridThickness = Math.abs(((_h = (_g = config.canvas) === null || _g === undefined ? undefined : _g.grid) === null || _h === undefined ? undefined : _h.thickness) || 0.05);
-    this.gridColor = ((_k = (_j = config.canvas) === null || _j === undefined ? undefined : _j.grid) === null || _k === undefined ? undefined : _k.color) || 'rgba(0, 0, 0, 0.1)';
-    this.snapToGrid = ((_m = (_l = config.canvas) === null || _l === undefined ? undefined : _l.grid) === null || _m === undefined ? undefined : _m.enabled) === false || ((_o = config.canvas) === null || _o === undefined ? undefined : _o.grid) === undefined ? false : ((_q = (_p = config.canvas) === null || _p === undefined ? undefined : _p.grid) === null || _q === undefined ? undefined : _q.snap) || false;
-    this.zoomFactor = ((_r = config.canvas) === null || _r === undefined ? undefined : _r.zoomFactor) || 2;
-    this.panRate = ((_s = config.canvas) === null || _s === undefined ? undefined : _s.panRate) || 100;
+    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.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 = ((_t = config.canvas) === null || _t === undefined ? undefined : _t.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 || {};
@@ -6721,23 +6765,29 @@ class DiagramCanvas {
         }
       }
       if (event.ctrlKey && event.key === 'c') {
-        event.preventDefault();
-        // copy
-        this.userSelection.copyToClipboard();
-        this.cancelAllUserActions();
+        if (this.canUserPerformAction(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(DiagramActions.Clipboard) && this.canUserPerformAction(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(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();
@@ -6750,38 +6800,50 @@ class DiagramCanvas {
         this.actionStack.undo();
       }
       if (event.key === '+') {
-        event.preventDefault();
-        // zoom in
-        this.zoomBy(this.zoomFactor);
+        if (this.canUserPerformAction(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(DiagramActions.Zoom)) {
+          event.preventDefault();
+          // zoom out
+          this.zoomBy(1 / this.zoomFactor);
+        }
       }
       if (event.key === 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(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 === 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(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 === 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(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 === 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(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(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(Events.MouseMove, event => {
       if (this.unfinishedConnection !== undefined) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         this.unfinishedConnection.endCoords = pointerCoords;
@@ -6837,13 +6899,7 @@ class DiagramCanvas {
     }).on(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) {
@@ -7796,11 +7852,17 @@ class DiagramCanvas {
       this.secondaryButton = isSecondaryButton(event);
       return true;
     }).on(DragEvents.Start, event => {
-      this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.startMultipleSelection(event);
+      }
     }).on(DragEvents.Drag, event => {
-      this.continueMultipleSelection(event);
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.continueMultipleSelection(event);
+      }
     }).on(DragEvents.End, event => {
-      this.finishMultipleSelection(event);
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.finishMultipleSelection(event);
+      }
     }));
   }
   updateDecoratorsInView(...ids) {
@@ -7813,7 +7875,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(Events.ContextMenu, (event, d) => {
+    enterSelection.on(Events.MouseOver, (_event, d) => {
+      if (!this.dragging) {
+        this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
+      }
+    }).on(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(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
         event.stopPropagation();
@@ -7823,8 +7901,15 @@ class DiagramCanvas {
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(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(Events.DoubleClick, (event, d) => {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
@@ -7832,12 +7917,55 @@ class DiagramCanvas {
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
       return true;
-    }).on(DragEvents.Start, event => {
-      this.startMultipleSelection(event);
-    }).on(DragEvents.Drag, event => {
-      this.continueMultipleSelection(event);
-    }).on(DragEvents.End, event => {
-      this.finishMultipleSelection(event);
+    }).on(DragEvents.Start, (event, d) => {
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.startMultipleSelection(event);
+      } else {
+        let node;
+        if (d.rootElement instanceof DiagramNode) {
+          node = d.rootElement;
+        } else if (d.rootElement instanceof DiagramSection) {
+          node = d.rootElement.node;
+        }
+        if (node) {
+          this.startMovingNode(event, node);
+        } else {
+          setCursorStyle(CursorStyle.NotAllowed);
+        }
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.continueMultipleSelection(event);
+      } else {
+        let node;
+        if (d.rootElement instanceof DiagramNode) {
+          node = d.rootElement;
+        } else if (d.rootElement instanceof DiagramSection) {
+          node = d.rootElement.node;
+        }
+        if (node) {
+          this.continueMovingNode(event, node);
+        } else {
+          setCursorStyle(CursorStyle.NotAllowed);
+        }
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.finishMultipleSelection(event);
+      } else {
+        let node;
+        if (d.rootElement instanceof DiagramNode) {
+          node = d.rootElement;
+        } else if (d.rootElement instanceof DiagramSection) {
+          node = d.rootElement.node;
+        }
+        if (node) {
+          this.finishMovingNode(event, node);
+        } else {
+          setCursorStyle();
+        }
+      }
+      this.secondaryButton = false;
     }));
   }
   updateConnectionLabelsInView(connection) {
@@ -8255,18 +8383,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(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;
     }
   }