@metadev/daga 5.1.1 → 5.1.2

package/index.cjs.js

@@ -3691,6 +3691,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   defaultHeight: 1,
   minWidth: 1,
   minHeight: 1,
+  defaultZ: 0,
   resizableX: false,
   resizableY: false,
   snapToGridOffset: [0, 0, 0, 0],
@@ -3720,6 +3721,7 @@ class DiagramNodeType {
     this.defaultHeight = values.defaultHeight;
     this.minWidth = values.minWidth;
     this.minHeight = values.minHeight;
+    this.defaultZ = values.defaultZ;
     if (typeof options.resizableX === 'undefined') {
       this.resizerX = new DiagramResizer({
         mode: exports.ResizableMode.Never
@@ -3900,6 +3902,7 @@ class DiagramNode extends DiagramElement {
     this.coords = coords;
     this.width = type.defaultWidth;
     this.height = type.defaultHeight;
+    this.z = type.defaultZ;
   }
   get removed() {
     return this.selfRemoved;
@@ -3927,6 +3930,16 @@ class DiagramNode extends DiagramElement {
       child.raise();
     }
   }
+  /**
+   * Put this element above other elements in the view if they have a lower z coordinate.
+   */
+  raiseWithZ() {
+    this.raise();
+    const overlappingNodesWithHigherPriority = this.model.nodes.filter(n => n.id !== this.id && n.z > this.z && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [this.coords, [this.coords[0] + this.width, this.coords[1] + this.height]]));
+    for (const n of overlappingNodesWithHigherPriority) {
+      n.raiseWithZ();
+    }
+  }
   getPriority() {
     return this.type.priority;
   }
@@ -4230,6 +4243,7 @@ class DiagramNode extends DiagramElement {
     }
     this.setGeometry({
       coords,
+      z: this.z,
       width: this.width,
       height: this.height,
       // We already moved the sections above - skip changing them in setDimensions.
@@ -4281,6 +4295,7 @@ class DiagramNode extends DiagramElement {
     }
     this.setGeometry({
       coords: [newCoordsX[0], newCoordsY[0]],
+      z: this.z,
       width: newCoordsX[1] - newCoordsX[0],
       height: newCoordsY[1] - newCoordsY[0],
       // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
@@ -4388,6 +4403,7 @@ class DiagramNode extends DiagramElement {
     }
     return {
       coords: [...this.coords],
+      z: this.z,
       width: this.width,
       height: this.height,
       sections,
@@ -4404,6 +4420,7 @@ class DiagramNode extends DiagramElement {
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
     this.coords = [...geometry.coords];
+    this.z = geometry.z;
     this.width = geometry.width;
     this.height = geometry.height;
     const newCoordsX = [this.coords[0], this.coords[0] + this.width];
@@ -5580,6 +5597,7 @@ class AddNodeCollabAction {
     } else {
       node.valueSet.resetValues();
     }
+    node.raiseWithZ();
   }
   serialize() {
     return {
@@ -5738,6 +5756,7 @@ class SetGeometryCollabAction {
         }
       }
       (_c = node.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(node);
+      node.raiseWithZ();
       node.geometryTimestamp = this.timestamp;
     }
   }
@@ -6968,14 +6987,28 @@ class DiagramModel {
 }
 
 /**
- * Checks if the given mouse event was produced with a secondary button press.
+ * Checks if the given pointer event was produced with a secondary button press.
  * @private
- * @param event A mouse event.
- * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
+ * @param event A pointer event.
+ * @returns `true` if the given pointer event was produced with a secondary button press, `false` otherwise.
  */
 const isSecondaryButton = event => {
   return !!event.button;
 };
+/**
+ * Obtain the pointer event which is valid for passing to the `d3.pointer()` function.
+ * @param event A pointer event.
+ * @returns A pointer event which can be passed to the `d3.pointer()` function.
+ */
+const getEventHoldingCoordinates = event => {
+  if (event.type === 'drag' || event.type === 'start' || event.type === 'end') {
+    const sourceEvent = event.sourceEvent;
+    if (sourceEvent && (sourceEvent.type === 'touchmove' || sourceEvent.type === 'touchstart' || sourceEvent.type === 'touchend')) {
+      return sourceEvent.touches[0] || sourceEvent.changedTouches[0];
+    }
+  }
+  return event;
+};
 /**
  * Get the SVG path of a diagram connection.
  * @private
@@ -8345,30 +8378,14 @@ class DiagramCanvas {
     const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.height) || 0];
     return [[-this.zoomTransform.x / this.zoomTransform.k, -this.zoomTransform.y / this.zoomTransform.k], [(rootDimensions[0] - this.zoomTransform.x) / this.zoomTransform.k, (rootDimensions[1] - this.zoomTransform.y) / this.zoomTransform.k]];
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getEventHoldingCoordinates(event) {
-    if (event.type === 'drag' || event.type === 'start' || event.type === 'end') {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const sourceEvent = event.sourceEvent;
-      if (sourceEvent && (sourceEvent.type === 'touchmove' || sourceEvent.type === 'touchstart' || sourceEvent.type === 'touchend')) {
-        return (
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          event.sourceEvent.touches[0] ||
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          event.sourceEvent.changedTouches[0]
-        );
-      }
-    }
-    return event;
-  }
   getPointerLocationRelativeToCanvas(event) {
-    return d3__namespace.pointer(this.getEventHoldingCoordinates(event), this.selectCanvasElements().node());
+    return d3__namespace.pointer(getEventHoldingCoordinates(event), this.selectCanvasElements().node());
   }
   getPointerLocationRelativeToRoot(event) {
-    return d3__namespace.pointer(this.getEventHoldingCoordinates(event), this.selectSVGElement().node());
+    return d3__namespace.pointer(getEventHoldingCoordinates(event), this.selectSVGElement().node());
   }
   getPointerLocationRelativeToBody(event) {
-    return d3__namespace.pointer(this.getEventHoldingCoordinates(event), d3__namespace.select('body').node());
+    return d3__namespace.pointer(getEventHoldingCoordinates(event), d3__namespace.select('body').node());
   }
   getPointerLocationRelativeToScreen(event) {
     const pointerLocationRelativeToBody = this.getPointerLocationRelativeToBody(event);
@@ -9792,6 +9809,46 @@ class DiagramCanvas {
       endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
     }
   }
+  bringToFront(node) {
+    const overlappingNodes = this.model.nodes.filter(n => n.id !== node.id && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]]));
+    let maximumZ = node.z;
+    for (const n of overlappingNodes) {
+      if (n.z > maximumZ) {
+        maximumZ = n.z;
+      }
+    }
+    maximumZ += 1;
+    const action = new SetGeometryAction(this, exports.DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
+    node.setGeometry(Object.assign(Object.assign({}, node.getGeometry()), {
+      z: maximumZ
+    }));
+    node.raiseWithZ();
+    action.to = node.getGeometry();
+    this.currentAction = action;
+    this.currentAction.do();
+    this.actionStack.add(this.currentAction);
+    this.currentAction = undefined;
+  }
+  sendToBack(node) {
+    const overlappingNodes = this.model.nodes.filter(n => n.id !== node.id && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]]));
+    let minimumZ = node.z;
+    for (const n of overlappingNodes) {
+      if (n.z < minimumZ) {
+        minimumZ = n.z;
+      }
+    }
+    minimumZ -= 1;
+    const action = new SetGeometryAction(this, exports.DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
+    node.setGeometry(Object.assign(Object.assign({}, node.getGeometry()), {
+      z: minimumZ
+    }));
+    node.raiseWithZ();
+    action.to = node.getGeometry();
+    this.currentAction = action;
+    this.currentAction.do();
+    this.actionStack.add(this.currentAction);
+    this.currentAction = undefined;
+  }
   fieldRootFitsInView(id) {
     var _a, _b, _c, _d;
     const field = this.model.fields.get(id);

package/index.esm.js

@@ -3670,6 +3670,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   defaultHeight: 1,
   minWidth: 1,
   minHeight: 1,
+  defaultZ: 0,
   resizableX: false,
   resizableY: false,
   snapToGridOffset: [0, 0, 0, 0],
@@ -3699,6 +3700,7 @@ class DiagramNodeType {
     this.defaultHeight = values.defaultHeight;
     this.minWidth = values.minWidth;
     this.minHeight = values.minHeight;
+    this.defaultZ = values.defaultZ;
     if (typeof options.resizableX === 'undefined') {
       this.resizerX = new DiagramResizer({
         mode: ResizableMode.Never
@@ -3879,6 +3881,7 @@ class DiagramNode extends DiagramElement {
     this.coords = coords;
     this.width = type.defaultWidth;
     this.height = type.defaultHeight;
+    this.z = type.defaultZ;
   }
   get removed() {
     return this.selfRemoved;
@@ -3906,6 +3909,16 @@ class DiagramNode extends DiagramElement {
       child.raise();
     }
   }
+  /**
+   * Put this element above other elements in the view if they have a lower z coordinate.
+   */
+  raiseWithZ() {
+    this.raise();
+    const overlappingNodesWithHigherPriority = this.model.nodes.filter(n => n.id !== this.id && n.z > this.z && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [this.coords, [this.coords[0] + this.width, this.coords[1] + this.height]]));
+    for (const n of overlappingNodesWithHigherPriority) {
+      n.raiseWithZ();
+    }
+  }
   getPriority() {
     return this.type.priority;
   }
@@ -4209,6 +4222,7 @@ class DiagramNode extends DiagramElement {
     }
     this.setGeometry({
       coords,
+      z: this.z,
       width: this.width,
       height: this.height,
       // We already moved the sections above - skip changing them in setDimensions.
@@ -4260,6 +4274,7 @@ class DiagramNode extends DiagramElement {
     }
     this.setGeometry({
       coords: [newCoordsX[0], newCoordsY[0]],
+      z: this.z,
       width: newCoordsX[1] - newCoordsX[0],
       height: newCoordsY[1] - newCoordsY[0],
       // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
@@ -4367,6 +4382,7 @@ class DiagramNode extends DiagramElement {
     }
     return {
       coords: [...this.coords],
+      z: this.z,
       width: this.width,
       height: this.height,
       sections,
@@ -4383,6 +4399,7 @@ class DiagramNode extends DiagramElement {
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
     this.coords = [...geometry.coords];
+    this.z = geometry.z;
     this.width = geometry.width;
     this.height = geometry.height;
     const newCoordsX = [this.coords[0], this.coords[0] + this.width];
@@ -5559,6 +5576,7 @@ class AddNodeCollabAction {
     } else {
       node.valueSet.resetValues();
     }
+    node.raiseWithZ();
   }
   serialize() {
     return {
@@ -5717,6 +5735,7 @@ class SetGeometryCollabAction {
         }
       }
       (_c = node.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(node);
+      node.raiseWithZ();
       node.geometryTimestamp = this.timestamp;
     }
   }
@@ -6947,14 +6966,28 @@ class DiagramModel {
 }
 
 /**
- * Checks if the given mouse event was produced with a secondary button press.
+ * Checks if the given pointer event was produced with a secondary button press.
  * @private
- * @param event A mouse event.
- * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
+ * @param event A pointer event.
+ * @returns `true` if the given pointer event was produced with a secondary button press, `false` otherwise.
  */
 const isSecondaryButton = event => {
   return !!event.button;
 };
+/**
+ * Obtain the pointer event which is valid for passing to the `d3.pointer()` function.
+ * @param event A pointer event.
+ * @returns A pointer event which can be passed to the `d3.pointer()` function.
+ */
+const getEventHoldingCoordinates = event => {
+  if (event.type === 'drag' || event.type === 'start' || event.type === 'end') {
+    const sourceEvent = event.sourceEvent;
+    if (sourceEvent && (sourceEvent.type === 'touchmove' || sourceEvent.type === 'touchstart' || sourceEvent.type === 'touchend')) {
+      return sourceEvent.touches[0] || sourceEvent.changedTouches[0];
+    }
+  }
+  return event;
+};
 /**
  * Get the SVG path of a diagram connection.
  * @private
@@ -8324,30 +8357,14 @@ class DiagramCanvas {
     const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.height) || 0];
     return [[-this.zoomTransform.x / this.zoomTransform.k, -this.zoomTransform.y / this.zoomTransform.k], [(rootDimensions[0] - this.zoomTransform.x) / this.zoomTransform.k, (rootDimensions[1] - this.zoomTransform.y) / this.zoomTransform.k]];
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getEventHoldingCoordinates(event) {
-    if (event.type === 'drag' || event.type === 'start' || event.type === 'end') {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const sourceEvent = event.sourceEvent;
-      if (sourceEvent && (sourceEvent.type === 'touchmove' || sourceEvent.type === 'touchstart' || sourceEvent.type === 'touchend')) {
-        return (
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          event.sourceEvent.touches[0] ||
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          event.sourceEvent.changedTouches[0]
-        );
-      }
-    }
-    return event;
-  }
   getPointerLocationRelativeToCanvas(event) {
-    return d3.pointer(this.getEventHoldingCoordinates(event), this.selectCanvasElements().node());
+    return d3.pointer(getEventHoldingCoordinates(event), this.selectCanvasElements().node());
   }
   getPointerLocationRelativeToRoot(event) {
-    return d3.pointer(this.getEventHoldingCoordinates(event), this.selectSVGElement().node());
+    return d3.pointer(getEventHoldingCoordinates(event), this.selectSVGElement().node());
   }
   getPointerLocationRelativeToBody(event) {
-    return d3.pointer(this.getEventHoldingCoordinates(event), d3.select('body').node());
+    return d3.pointer(getEventHoldingCoordinates(event), d3.select('body').node());
   }
   getPointerLocationRelativeToScreen(event) {
     const pointerLocationRelativeToBody = this.getPointerLocationRelativeToBody(event);
@@ -9771,6 +9788,46 @@ class DiagramCanvas {
       endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
     }
   }
+  bringToFront(node) {
+    const overlappingNodes = this.model.nodes.filter(n => n.id !== node.id && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]]));
+    let maximumZ = node.z;
+    for (const n of overlappingNodes) {
+      if (n.z > maximumZ) {
+        maximumZ = n.z;
+      }
+    }
+    maximumZ += 1;
+    const action = new SetGeometryAction(this, DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
+    node.setGeometry(Object.assign(Object.assign({}, node.getGeometry()), {
+      z: maximumZ
+    }));
+    node.raiseWithZ();
+    action.to = node.getGeometry();
+    this.currentAction = action;
+    this.currentAction.do();
+    this.actionStack.add(this.currentAction);
+    this.currentAction = undefined;
+  }
+  sendToBack(node) {
+    const overlappingNodes = this.model.nodes.filter(n => n.id !== node.id && rectanglesIntersect([n.coords, [n.coords[0] + n.width, n.coords[1] + n.height]], [node.coords, [node.coords[0] + node.width, node.coords[1] + node.height]]));
+    let minimumZ = node.z;
+    for (const n of overlappingNodes) {
+      if (n.z < minimumZ) {
+        minimumZ = n.z;
+      }
+    }
+    minimumZ -= 1;
+    const action = new SetGeometryAction(this, DiagramActions.MoveNode, node.id, node.getGeometry(), node.getGeometry());
+    node.setGeometry(Object.assign(Object.assign({}, node.getGeometry()), {
+      z: minimumZ
+    }));
+    node.raiseWithZ();
+    action.to = node.getGeometry();
+    this.currentAction = action;
+    this.currentAction.do();
+    this.actionStack.add(this.currentAction);
+    this.currentAction = undefined;
+  }
   fieldRootFitsInView(id) {
     var _a, _b, _c, _d;
     const field = this.model.fields.get(id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {},
   "peerDependencies": {

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

@@ -10,12 +10,18 @@ import { DiagramPort } from '../model/diagram-port';
 import { DiagramSection } from '../model/diagram-section';
 import { DiagramCanvas } from './diagram-canvas';
 /**
- * Checks if the given mouse event was produced with a secondary button press.
+ * Checks if the given pointer event was produced with a secondary button press.
  * @private
- * @param event A mouse event.
- * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
+ * @param event A pointer event.
+ * @returns `true` if the given pointer event was produced with a secondary button press, `false` otherwise.
  */
 export declare const isSecondaryButton: (event: MouseEvent) => boolean;
+/**
+ * Obtain the pointer event which is valid for passing to the `d3.pointer()` function.
+ * @param event A pointer event.
+ * @returns A pointer event which can be passed to the `d3.pointer()` function.
+ */
+export declare const getEventHoldingCoordinates: (event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>) => unknown;
 /**
  * Get the SVG path of a diagram connection.
  * @private

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

@@ -11,6 +11,7 @@ import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from
 import { DiagramEvent } from '../diagram-event';
 import { DiagramConnectionType } from '../model/diagram-connection';
 import { DiagramModel } from '../model/diagram-model';
+import { DiagramNode } from '../model/diagram-node';
 import { DiagramContextMenu } from './diagram-context-menu';
 import { DiagramUserHighlight } from './diagram-user-highlight';
 import { DiagramUserSelection } from './diagram-user-selection';
@@ -104,11 +105,10 @@ export declare class DiagramCanvas implements Canvas {
     center(nodeIds?: string[], maxZoomLevel?: number, duration?: number): void;
     getClosestGridPoint(point: Point): Point;
     getCoordinatesOnScreen(): [Point, Point];
-    private getEventHoldingCoordinates;
-    getPointerLocationRelativeToCanvas(event: MouseEvent): Point;
-    getPointerLocationRelativeToRoot(event: MouseEvent): Point;
-    getPointerLocationRelativeToBody(event: MouseEvent): Point;
-    getPointerLocationRelativeToScreen(event: MouseEvent): Point;
+    getPointerLocationRelativeToCanvas(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
+    getPointerLocationRelativeToRoot(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
+    getPointerLocationRelativeToBody(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
+    getPointerLocationRelativeToScreen(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
     updateModelInView(): void;
     updateNodesInView(...ids: string[]): void;
     updateSectionsInView(...ids: string[]): void;
@@ -119,6 +119,8 @@ export declare class DiagramCanvas implements Canvas {
     updateDecoratorsInView(...ids: string[]): void;
     private updateConnectionLabelsInView;
     private updateConnectionMarkersInView;
+    bringToFront(node: DiagramNode): void;
+    sendToBack(node: DiagramNode): void;
     fieldRootFitsInView(id: string): boolean;
     fitFieldRootInView(id: string, shrink?: boolean): void;
     fitNodeInView(id: string, shrink?: boolean): void;

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

@@ -170,6 +170,11 @@ export interface NodeTypeConfig {
      * @default 1
      */
     minHeight?: number;
+    /**
+     * The default z coordinate of nodes of this type when rendering them in order relative to other diagram elements.
+     * @default 0
+     */
+    defaultZ?: number;
     /**
      * Whether the user can resize nodes of this type horizontally.
      * @default false

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

@@ -31,6 +31,7 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
     defaultHeight: number;
     minWidth: number;
     minHeight: number;
+    defaultZ: number;
     resizableX: boolean;
     resizableY: boolean;
     snapToGridOffset: [number, number, number, number];
@@ -48,6 +49,7 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
 };
 export type DiagramNodeGeometry = {
     readonly coords: Point;
+    readonly z: number;
     readonly width: number;
     readonly height: number;
     readonly sections: {
@@ -76,6 +78,7 @@ export declare class DiagramNodeType implements DiagramEntity {
     defaultHeight: number;
     minWidth: number;
     minHeight: number;
+    defaultZ: number;
     resizerX: DiagramResizer;
     resizerY: DiagramResizer;
     resizerXY: DiagramResizer;
@@ -172,6 +175,11 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
      * @public
      */
     height: number;
+    /**
+     * The relative z coordinate of this node. Used to render this node below nodes with a higher z coordinate.
+     * @public
+     */
+    z: number;
     /**
      * Name of this node. Alias for this node's label's text.
      * @public
@@ -208,6 +216,10 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
+    /**
+     * Put this element above other elements in the view if they have a lower z coordinate.
+     */
+    raiseWithZ(): void;
     getPriority(): number;
     /**
      * Returns the horizontal resizer of this node.

package/src/lib/interfaces/canvas.d.ts

@@ -9,6 +9,7 @@ import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from
 import { DiagramEvent } from '../diagram/diagram-event';
 import { DiagramConnectionType } from '../diagram/model/diagram-connection';
 import { DiagramModel } from '../diagram/model/diagram-model';
+import { DiagramNode } from '../diagram/model/diagram-node';
 import { DiagramValidator } from '../errors/diagram-validator';
 import { Point } from '../util/canvas-util';
 import { DiagramEditor } from './diagram-editor';
@@ -233,25 +234,25 @@ export interface Canvas {
      * @private
      * @param event A MouseEvent.
      */
-    getPointerLocationRelativeToCanvas(event: MouseEvent): Point;
+    getPointerLocationRelativeToCanvas(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
     /**
      * Get the location of the pointer in the given event relative to the svg element.
      * @private
      * @param event A MouseEvent.
      */
-    getPointerLocationRelativeToRoot(event: MouseEvent): Point;
+    getPointerLocationRelativeToRoot(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
     /**
      * Get the location of the pointer in the given event relative to the body.
      * @private
      * @param event A MouseEvent.
      */
-    getPointerLocationRelativeToBody(event: MouseEvent): Point;
+    getPointerLocationRelativeToBody(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
     /**
      * Get the location of the pointer in the given event relative to the screen.
      * @private
      * @param event A MouseEvent.
      */
-    getPointerLocationRelativeToScreen(event: MouseEvent): Point;
+    getPointerLocationRelativeToScreen(event: MouseEvent | d3.D3DragEvent<Element, unknown, unknown>): Point;
     /**
      * Adds a validator to the list of validators of the diagram.
      * @public
@@ -318,6 +319,16 @@ export interface Canvas {
      * @public
      */
     updateDecoratorsInView(...ids: string[]): void;
+    /**
+     * Update the z coordinate of a node to be higher than any node that overlaps with it.
+     * @public
+     */
+    bringToFront(node: DiagramNode): void;
+    /**
+     * Update the z coordinate of a node to be lower than any node that overlaps with it.
+     * @public
+     */
+    sendToBack(node: DiagramNode): void;
     /**
      * Checks whether the root of a diagram field encompasses the totality of the field.
      * @param id The id of a diagram field