@metadev/daga 4.0.0 → 4.0.1

package/Changelog.md

@@ -6,6 +6,16 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.0.1
+
+- Ensure borders of nodes are fully contained within palette [#253](https://github.com/metadevpro/daga/pull/253)
+- Adjust nodes in palette [#254](https://github.com/metadevpro/daga/pull/254)
+- Fix bug where dragging a decorator creates a multiple selection instead of dragging the node [#257](https://github.com/metadevpro/daga/pull/257)
+- Allow special characters in diagram element identifiers [#258](https://github.com/metadevpro/daga/pull/258)
+- Add custom context menu buttons [#259](https://github.com/metadevpro/daga/pull/259)
+
+## v. 4.0.0 Hielo
+
 - Expose `viewInitialized$` observable in diagram component [#239](https://github.com/metadevpro/daga/pull/239)
 - Throw error when a diagram element is initialized with an empty or null id to prevent errors with selectors caused by empty ids [#240](https://github.com/metadevpro/daga/pull/240)
 - Change the structure of the configuration for the looks of nodes, sections, ports and connections [#244](https://github.com/metadevpro/daga/pull/244)

package/index.cjs.js

@@ -1022,6 +1022,10 @@ class DiagramEntitySet {
   }
 }
 
+const escapeSelector = selector => {
+  return selector.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, '\\$1');
+};
+
 /**
  * Default priority value for diagram elements.
  * @private
@@ -1083,7 +1087,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 {
@@ -2290,10 +2294,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;
   }
@@ -5635,10 +5635,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;
   }
@@ -5728,10 +5724,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;
   }
@@ -5944,6 +5936,9 @@ 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
@@ -5955,8 +5950,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.
@@ -5983,10 +5979,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();
         }
       });
     }
@@ -5994,10 +5989,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();
         }
       });
     }
@@ -6005,10 +5999,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();
         }
       });
     }
@@ -6016,13 +6009,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({
@@ -6035,20 +6032,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(exports.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(exports.Events.Click, event => {
         if (buttonOnPress) {
-          buttonOnPress(event);
+          event.preventDefault();
+          buttonOnPress(this.canvas);
         }
-      })
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      .on(exports.Events.KeyDown, event => {
+      }).on(exports.Events.KeyDown, event => {
         if (buttonOnPress && event.key === exports.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__namespace.easeLinear).duration(CONTEXT_MENU_ANIMATION_DURATION_MS).tween('progress', () => {
         return value => {
@@ -6588,7 +6587,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;
     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
@@ -6605,17 +6604,17 @@ 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.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.inferConnectionType = config.inferConnectionType || false;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_t = config.canvas) === null || _t === undefined ? undefined : _t.priorityThresholds) || [];
+    this.priorityThresholds = ((_u = config.canvas) === null || _u === undefined ? undefined : _u.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7817,11 +7816,17 @@ class DiagramCanvas {
       this.secondaryButton = isSecondaryButton(event);
       return true;
     }).on(exports.DragEvents.Start, event => {
-      this.startMultipleSelection(event);
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.startMultipleSelection(event);
+      }
     }).on(exports.DragEvents.Drag, event => {
-      this.continueMultipleSelection(event);
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.continueMultipleSelection(event);
+      }
     }).on(exports.DragEvents.End, event => {
-      this.finishMultipleSelection(event);
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.finishMultipleSelection(event);
+      }
     }));
   }
   updateDecoratorsInView(...ids) {
@@ -7853,12 +7858,55 @@ class DiagramCanvas {
     }).call(d3__namespace.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
       return true;
-    }).on(exports.DragEvents.Start, event => {
-      this.startMultipleSelection(event);
-    }).on(exports.DragEvents.Drag, event => {
-      this.continueMultipleSelection(event);
-    }).on(exports.DragEvents.End, event => {
-      this.finishMultipleSelection(event);
+    }).on(exports.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(exports.CursorStyle.NotAllowed);
+        }
+      }
+    }).on(exports.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(exports.CursorStyle.NotAllowed);
+        }
+      }
+    }).on(exports.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) {

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 {
@@ -2269,10 +2273,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;
   }
@@ -5614,10 +5614,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 +5703,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;
   }
@@ -5923,6 +5915,9 @@ 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 +5929,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 +5958,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 +5968,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 +5978,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 +5988,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 +6011,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 => {
@@ -6567,7 +6566,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;
     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 +6583,17 @@ 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.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.inferConnectionType = config.inferConnectionType || false;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_t = config.canvas) === null || _t === undefined ? undefined : _t.priorityThresholds) || [];
+    this.priorityThresholds = ((_u = config.canvas) === null || _u === undefined ? undefined : _u.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7796,11 +7795,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) {
@@ -7832,12 +7837,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/index.d.ts

@@ -7,6 +7,9 @@ export { DiagramUserSelection } from './lib/diagram/canvas/diagram-user-selectio
 export type { CollabAction, CollabActionSerialized } from './lib/diagram/collab/collab-action';
 export { CollabClient } from './lib/diagram/collab/collab-client';
 export type { CollabTimestamp, CollabTimestampSet } from './lib/diagram/collab/primitives';
+export type { CanvasConfig, GridConfig } from './lib/diagram/config/diagram-canvas-config';
+export type { ButtonsComponentConfig, ComponentsConfig, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
+export type { ImageLook, ImageLookConfig, Look, LookConfig, MarkerImageLook, MarkerImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from './lib/diagram/config/diagram-look-config';
 export { DagaExporter } from './lib/diagram/converters/daga-exporter';
 export { DagaImporter } from './lib/diagram/converters/daga-importer';
 export type { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
@@ -14,8 +17,6 @@ export type { DiagramModelExporter } from './lib/diagram/converters/diagram-mode
 export type { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
 export { ActionStack, AddConnectionAction, AddNodeAction, ApplyLayoutAction, DiagramActionMethod, DiagramActions, EditFieldAction, MoveAction, PasteAction, RemoveAction, SetGeometryAction, SetParentAction, UpdateValuesAction } from './lib/diagram/diagram-action';
 export type { DiagramAction } from './lib/diagram/diagram-action';
-export type { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
-export type { MarkerImageLook, StretchableImageLook, ImageLook, ShapedLook, Look, MarkerImageLookConfig, StretchableImageLookConfig, ImageLookConfig, ShapedLookConfig, LookConfig } from './lib/diagram/config/diagram-look';
 export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent } from './lib/diagram/diagram-event';
 export { AdjacencyLayout } from './lib/diagram/layout/adjacency-layout';
 export { BreadthAdjacencyLayout } from './lib/diagram/layout/breadth-adjacency-layout';

package/src/lib/diagram/canvas/diagram-context-menu.d.ts

@@ -1,4 +1,8 @@
 import { Canvas } from '../../interfaces/canvas';
+import { ContextMenuConfig } from '../config/diagram-canvas-config';
+export declare const CONTEXT_MENU_DEFAULTS: {
+    customButtons: never[];
+};
 /**
  * Stores the functionality regarding the context menu of a diagram canvas.
  * @public
@@ -6,13 +10,14 @@ import { Canvas } from '../../interfaces/canvas';
  */
 export declare class DiagramContextMenu {
     private readonly canvas;
+    private config;
     private contextMenuContainer?;
     /**
      * Constructs a context menu object.
      * @public
      * @param canvas A canvas.
      */
-    constructor(canvas: Canvas);
+    constructor(canvas: Canvas, config?: ContextMenuConfig);
     /**
      * Opens the context menu at the location determined by the given mouse event.
      * @public

package/src/lib/diagram/config/diagram-canvas-config.d.ts

@@ -0,0 +1,97 @@
+import { Canvas } from '../../interfaces/canvas';
+/**
+ * The configuration for the visual behavior of a diagram in the user interface.
+ * @public
+ */
+export interface CanvasConfig {
+    /**
+     * Configuration for the context menu in this diagram.
+     * If left undefined, the default context menu is used.
+     */
+    contextMenu?: ContextMenuConfig;
+    /**
+     * Configuration for the grid in the canvas.
+     * If left undefined, it is interpreted as disabling the grid,
+     * same as if the attribute `enabled` in its configuration was set to `false`.
+     */
+    grid?: GridConfig;
+    /**
+     * Background color of this diagram.
+     * @default "#FFFFFF"
+     */
+    backgroundColor?: string;
+    /**
+     * The factor by which the zoom level increases or decreases when the user users buttons or keys to zoom in or out. Should be above 1.
+     * @default 2
+     */
+    zoomFactor?: number;
+    /**
+     * The rate by which the view of the canvas moves when the user users buttons or keys to pan at a default zoom level in diagram units. Should be above 1.
+     * @default 100
+     */
+    panRate?: number;
+    /**
+     * Possible values of the priority threshold that the user can toggle between to hide nodes whose priority value is below it.
+     * If it is possible to toggle the priority threshold via the filter button, it should have at least two values.
+     * @default []
+     */
+    priorityThresholds?: number[];
+}
+/**
+ * Configuration of the guide grid in the background of the diagram.
+ */
+export interface GridConfig {
+    /**
+     * Whether the grid is present in the diagram.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Color of grid elements such as the points or axes.
+     * @default "rgba(0, 0, 0, 0.1)"
+     */
+    color?: string;
+    /**
+     * When true, the user moving or stretching nodes will cause their corners to automatically snap to the closest grid point.
+     * @default false
+     */
+    snap?: boolean;
+    /**
+     * Distance between each point of the grid of this diagram in diagram units.
+     * @default 10
+     */
+    spacing?: number;
+    /**
+     * In a range between 0 and 1, how thick the points of the grid are relative to the distance between them.
+     * @default 0.05
+     */
+    thickness?: number;
+}
+export interface ContextMenuConfig {
+    /**
+     * Custom buttons to be added to the context menu.
+     * @default []
+     */
+    customButtons?: ContextMenuButtonConfig[];
+}
+export interface ContextMenuButtonConfig {
+    /**
+     * Text on the button.
+     */
+    name: string;
+    /**
+     * File path to the image icon used by this button.
+     */
+    image?: string;
+    /**
+     * A function which is executed when the user clicks on this button.
+     * @param canvas The diagram's canvas.
+     */
+    onPress?: (canvas: Canvas) => void;
+    /**
+     * A function which given the canvas determines if the button should be present if the user opens a context menu on the canvas.
+     * @param canvas The diagram's canvas.
+     * @returns `true` if the button should be present on the menu, `false` otherwise.
+     */
+    condition?: (canvas: Canvas) => boolean;
+}

package/src/lib/diagram/config/diagram-config.d.ts

@@ -2,7 +2,8 @@ import { Point } from '../../util/canvas-util';
 import { Corner, HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
 import { DiagramActions } from '../diagram-action';
 import { Property } from '../model/diagram-property';
-import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look';
+import { CanvasConfig } from './diagram-canvas-config';
+import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 /**
  * The configuration for a diagram.
  * @public
@@ -86,69 +87,6 @@ export interface DiagramConfig {
      */
     properties?: Property[];
 }
-/**
- * The configuration for the visual behavior of a diagram in the user interface.
- * @public
- */
-export interface CanvasConfig {
-    /**
-     * Configuration for the grid in the canvas.
-     * If left undefined, it is interpreted as disabling the grid,
-     * same as if the attribute `enabled` in its configuration was set to `false`.
-     */
-    grid?: GridConfig;
-    /**
-     * Background color of this diagram.
-     * @default "#FFFFFF"
-     */
-    backgroundColor?: string;
-    /**
-     * The factor by which the zoom level increases or decreases when the user users buttons or keys to zoom in or out. Should be above 1.
-     * @default 2
-     */
-    zoomFactor?: number;
-    /**
-     * The rate by which the view of the canvas moves when the user users buttons or keys to pan at a default zoom level in diagram units. Should be above 1.
-     * @default 100
-     */
-    panRate?: number;
-    /**
-     * Possible values of the priority threshold that the user can toggle between to hide nodes whose priority value is below it.
-     * If it is possible to toggle the priority threshold via the filter button, it should have at least two values.
-     * @default []
-     */
-    priorityThresholds?: number[];
-}
-/**
- * Configuration of the guide grid in the background of the diagram.
- */
-export interface GridConfig {
-    /**
-     * Whether the grid is present in the diagram.
-     * @default true
-     */
-    enabled?: boolean;
-    /**
-     * Color of grid elements such as the points or axes.
-     * @default "rgba(0, 0, 0, 0.1)"
-     */
-    color?: string;
-    /**
-     * When true, the user moving or stretching nodes will cause their corners to automatically snap to the closest grid point.
-     * @default false
-     */
-    snap?: boolean;
-    /**
-     * Distance between each point of the grid of this diagram in diagram units.
-     * @default 10
-     */
-    spacing?: number;
-    /**
-     * In a range between 0 and 1, how thick the points of the grid are relative to the distance between them.
-     * @default 0.05
-     */
-    thickness?: number;
-}
 /**
  * Configuration for which user actions are allowed in a diagram.
  * @public

package/src/lib/diagram/model/diagram-connection.d.ts

@@ -2,7 +2,7 @@ import { Point } from '../../util/canvas-util';
 import { LineShape, LineStyle } from '../../util/line';
 import { Side } from '../../util/svg-util';
 import { ConnectionTypeConfig, FieldConfig } from '../config/diagram-config';
-import { ConnectionLook, ConnectionLookConfig, MarkerImageLook, MarkerImageLookConfig } from '../config/diagram-look';
+import { ConnectionLook, ConnectionLookConfig, MarkerImageLook, MarkerImageLookConfig } from '../config/diagram-look-config';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramModel } from './diagram-model';

package/src/lib/diagram/model/diagram-decorator.d.ts

@@ -36,7 +36,6 @@ export declare class DiagramDecorator extends DiagramElement {
     priority: number;
     html: string;
     constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string);
-    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     get removed(): boolean;
     updateInView(): void;
     raise(): void;

package/src/lib/diagram/model/diagram-field.d.ts

@@ -110,7 +110,6 @@ export declare class DiagramField extends DiagramElement {
      */
     fit: boolean;
     constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean);
-    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     get removed(): boolean;
     updateInView(): void;
     raise(): void;

package/src/lib/diagram/model/diagram-node.d.ts

@@ -2,7 +2,7 @@ import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
 import { FieldConfig, NodeTypeConfig, PortConfig } from '../config/diagram-config';
-import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from '../config/diagram-look';
+import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from '../config/diagram-look-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
 import { DiagramElement, DiagramElementSet } from './diagram-element';

package/src/lib/diagram/model/diagram-object.d.ts

@@ -25,7 +25,6 @@ export declare class DiagramObject extends DiagramElement {
     priority: number;
     html: string;
     constructor(model: DiagramModel, coords: Point, width: number, height: number, priority: number, html: string, id: string);
-    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     get removed(): boolean;
     updateInView(): void;
     raise(): void;

package/src/lib/diagram/model/diagram-port.d.ts

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { FieldConfig, PortTypeConfig } from '../config/diagram-config';
-import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig } from '../config/diagram-look';
+import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig } from '../config/diagram-look-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramEntity, DiagramEntitySet } from './diagram-entity';

package/src/lib/diagram/model/diagram-section.d.ts

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { FieldConfig, PortConfig, SectionConfig, SectionGridConfig } from '../config/diagram-config';
-import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from '../config/diagram-look';
+import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from '../config/diagram-look-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
 import { DiagramElement, DiagramElementSet } from './diagram-element';

package/src/lib/util/html-util.d.ts

@@ -0,0 +1 @@
+export declare const escapeSelector: (selector: string) => string;