@metadev/daga 4.2.13 → 4.2.14

package/Changelog.md

@@ -6,6 +6,12 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.14
+
+- Fix `getViewCoordinates()` canvas method to return coordinates such that using those coordinates for the `translateTo()` method results in no changes [#364](https://github.com/metadevpro/daga/pull/364)
+- Add `zoomAndPanTo()` method to canvas to enable zooming and panning with animation [#364](https://github.com/metadevpro/daga/pull/364)
+- Enable configuring nodes and sections to be only resizable when selected [#365](https://github.com/metadevpro/daga/pull/365)
+
 ## v. 4.2.13
 
 - Fix check for whether a browser is Safari [#363](https://github.com/metadevpro/daga/pull/363)

package/index.cjs.js

@@ -2977,6 +2977,11 @@ const getTopPadding$1 = config => {
   }
 };
 
+exports.ResizableMode = void 0;
+(function (ResizableMode) {
+  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
+})(exports.ResizableMode || (exports.ResizableMode = {}));
+
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -3181,12 +3186,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableX() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableX) !== undefined) {
+      if (sectionType.resizableX === exports.ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       return sectionType.resizableX;
     }
-    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) || false;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableX()) || false;
   }
   /**
    * Returns whether this section can be resized vertically.
@@ -3195,12 +3203,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableY() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableY) !== undefined) {
+      if (sectionType.resizableY === exports.ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       return sectionType.resizableY;
     }
-    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) || false;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableY()) || false;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -3711,6 +3722,28 @@ class DiagramNode extends DiagramElement {
   getPriority() {
     return this.type.priority;
   }
+  /**
+   * Returns whether this node can be resized horizontally.
+   * @public
+   */
+  getResizableX() {
+    const resizableX = this.type.resizableX;
+    if (resizableX === exports.ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableX;
+  }
+  /**
+   * Returns whether this node can be resized vertically.
+   * @public
+   */
+  getResizableY() {
+    const resizableY = this.type.resizableY;
+    if (resizableY === exports.ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableY;
+  }
   /**
    * Get the port of this node which is closest to the given coordinates.
    * @param coords A point in the diagram.
@@ -6686,6 +6719,34 @@ const getRelatedNodeOrItself = element => {
   }
   return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
 };
+const needsResizerX = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableX !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableX !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerX(element.node);
+    }
+  }
+  return false;
+};
+const needsResizerY = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableY !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableY !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerY(element.node);
+    }
+  }
+  return false;
+};
 const initializeLook = selection => {
   selection.filter('.shaped-look').append('path');
   selection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
@@ -7771,7 +7832,14 @@ class DiagramCanvas {
     }
   }
   getViewCoordinates() {
-    return [this.zoomTransform.x, this.zoomTransform.y];
+    var _a, _b, _c;
+    const canvasViewBoundingBox = (_c = (_b = (_a = this.selectCanvasView()) === null || _a === void 0 ? void 0 : _a.select('rect')) === null || _b === void 0 ? void 0 : _b.node()) === null || _c === void 0 ? void 0 : _c.getBBox();
+    /*
+    transform the coordinates of the zoomTransform to the coordinates
+    needed to point the zoomTransfrom to the center of the screen to
+    ensure that canvas.translateTo(getViewCoordinates()) has no effect
+    */
+    return [((canvasViewBoundingBox.width + canvasViewBoundingBox.x) / 2 - this.zoomTransform.x) / this.zoomTransform.k, ((canvasViewBoundingBox.height + canvasViewBoundingBox.y) / 2 - this.zoomTransform.y) / this.zoomTransform.k];
   }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
@@ -7783,12 +7851,34 @@ class DiagramCanvas {
       this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
     }
   }
-  center() {
+  zoomAndPanTo(x, y, z, duration) {
+    if (!duration || duration <= 0) {
+      this.zoomBehavior.scaleTo(this.selectCanvasView(), z);
+      this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
+      return;
+    }
+    this.zoomBehavior.interpolate(d3__namespace.interpolate);
+    const [startingX, startingY] = this.getViewCoordinates();
+    const startingZoom = this.getZoomLevel();
+    const targetX = x,
+      targetY = y,
+      targetZoom = z;
+    this.selectCanvasElements().transition().duration(duration).ease(d3__namespace.easeCubicInOut).tween('progress', () => {
+      return value => {
+        const currentX = value * (targetX - startingX) + startingX;
+        const currentY = value * (targetY - startingY) + startingY;
+        const currentZoom = value * (targetZoom - startingZoom) + startingZoom;
+        this.zoomBehavior.scaleTo(this.selectCanvasView(), currentZoom);
+        this.zoomBehavior.translateTo(this.selectCanvasView(), currentX, currentY);
+      };
+    });
+  }
+  center(nodeIds, maxZoomLevel, duration) {
     var _a;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
       const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
-      const nonRemovedNodes = this.model.nodes.all();
+      const nonRemovedNodes = (nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.map(i => this.model.nodes.get(i)).filter(n => !!n)) || this.model.nodes.all();
       const minimumX = Math.min(...nonRemovedNodes.map(n => n.coords[0]));
       const maximumX = Math.max(...nonRemovedNodes.map(n => n.coords[0] + n.width));
       const averageX = (minimumX + maximumX) / 2;
@@ -7803,12 +7893,12 @@ class DiagramCanvas {
        * (windowRangeX / rangeX) is the zoom level to fit everything horizontally
        * (windowRangeY / rangeY) is the zoom level to fit everything vertically
        * the minimum between them is the zoom to fit everything in the screen both horizontally and vertically
-       * we also add 1 to the list so that if the zoom exceeds 1 it is set to 1
+       * we also add maxZoomLevel to the list so that if the zoom exceeds maxZoomLevel it is set to maxZoomLevel
+       * or 1 if maxZoomLevel is undefined
        * a zoom bigger than 1 means zooming in instead of out, and we don't want to zoom in if it's not necessary
        */
-      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, 1);
-      this.translateTo(averageX, averageY);
-      this.zoomTo(zoom);
+      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, maxZoomLevel !== undefined ? maxZoomLevel : 1);
+      this.zoomAndPanTo(averageX, averageY, zoom, duration);
     }
   }
   getClosestGridPoint(point) {
@@ -7864,7 +7954,7 @@ class DiagramCanvas {
   updateNodesInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${d.type.resizableX ? ' resizable-x' : ''}${d.type.resizableY ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -7928,27 +8018,27 @@ class DiagramCanvas {
     }));
     initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Left, d.coords[0] - pointerCoords[0]);
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -7964,27 +8054,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8000,27 +8090,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
@@ -8036,27 +8126,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
     }).on(exports.Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3__namespace.drag().on(exports.DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, exports.DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(exports.CursorStyle.NotAllowed);
       }
     }).on(exports.DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(exports.Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(exports.DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           if (this.snapToGrid) {
@@ -8075,17 +8165,17 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updateSectionsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
       var _a;
-      return `diagram-section${d.getResizableX() ? ' resizable-x' : ''}${d.getResizableY() ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
+      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -8304,10 +8394,10 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updatePortsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);

package/index.esm.js

@@ -2956,6 +2956,11 @@ const getTopPadding$1 = config => {
   }
 };
 
+var ResizableMode;
+(function (ResizableMode) {
+  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
+})(ResizableMode || (ResizableMode = {}));
+
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -3160,12 +3165,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableX() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableX) !== undefined) {
+      if (sectionType.resizableX === ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       return sectionType.resizableX;
     }
-    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) || false;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableX()) || false;
   }
   /**
    * Returns whether this section can be resized vertically.
@@ -3174,12 +3182,15 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   getResizableY() {
-    var _a, _b;
+    var _a;
     const sectionType = this.type;
     if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableY) !== undefined) {
+      if (sectionType.resizableY === ResizableMode.OnlyWhenSelected) {
+        return this.selected;
+      }
       return sectionType.resizableY;
     }
-    return ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) || false;
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableY()) || false;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -3690,6 +3701,28 @@ class DiagramNode extends DiagramElement {
   getPriority() {
     return this.type.priority;
   }
+  /**
+   * Returns whether this node can be resized horizontally.
+   * @public
+   */
+  getResizableX() {
+    const resizableX = this.type.resizableX;
+    if (resizableX === ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableX;
+  }
+  /**
+   * Returns whether this node can be resized vertically.
+   * @public
+   */
+  getResizableY() {
+    const resizableY = this.type.resizableY;
+    if (resizableY === ResizableMode.OnlyWhenSelected) {
+      return this.selected;
+    }
+    return resizableY;
+  }
   /**
    * Get the port of this node which is closest to the given coordinates.
    * @param coords A point in the diagram.
@@ -6665,6 +6698,34 @@ const getRelatedNodeOrItself = element => {
   }
   return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
 };
+const needsResizerX = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableX !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableX !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerX(element.node);
+    }
+  }
+  return false;
+};
+const needsResizerY = element => {
+  if (element instanceof DiagramNode) {
+    return element.type.resizableY !== false;
+  }
+  if (element instanceof DiagramSection) {
+    if (element.type !== undefined) {
+      return element.type.resizableY !== false;
+    }
+    if (element.node !== undefined) {
+      return needsResizerY(element.node);
+    }
+  }
+  return false;
+};
 const initializeLook = selection => {
   selection.filter('.shaped-look').append('path');
   selection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
@@ -7750,7 +7811,14 @@ class DiagramCanvas {
     }
   }
   getViewCoordinates() {
-    return [this.zoomTransform.x, this.zoomTransform.y];
+    var _a, _b, _c;
+    const canvasViewBoundingBox = (_c = (_b = (_a = this.selectCanvasView()) === null || _a === void 0 ? void 0 : _a.select('rect')) === null || _b === void 0 ? void 0 : _b.node()) === null || _c === void 0 ? void 0 : _c.getBBox();
+    /*
+    transform the coordinates of the zoomTransform to the coordinates
+    needed to point the zoomTransfrom to the center of the screen to
+    ensure that canvas.translateTo(getViewCoordinates()) has no effect
+    */
+    return [((canvasViewBoundingBox.width + canvasViewBoundingBox.x) / 2 - this.zoomTransform.x) / this.zoomTransform.k, ((canvasViewBoundingBox.height + canvasViewBoundingBox.y) / 2 - this.zoomTransform.y) / this.zoomTransform.k];
   }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
@@ -7762,12 +7830,34 @@ class DiagramCanvas {
       this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
     }
   }
-  center() {
+  zoomAndPanTo(x, y, z, duration) {
+    if (!duration || duration <= 0) {
+      this.zoomBehavior.scaleTo(this.selectCanvasView(), z);
+      this.zoomBehavior.translateTo(this.selectCanvasView(), x, y);
+      return;
+    }
+    this.zoomBehavior.interpolate(d3.interpolate);
+    const [startingX, startingY] = this.getViewCoordinates();
+    const startingZoom = this.getZoomLevel();
+    const targetX = x,
+      targetY = y,
+      targetZoom = z;
+    this.selectCanvasElements().transition().duration(duration).ease(d3.easeCubicInOut).tween('progress', () => {
+      return value => {
+        const currentX = value * (targetX - startingX) + startingX;
+        const currentY = value * (targetY - startingY) + startingY;
+        const currentZoom = value * (targetZoom - startingZoom) + startingZoom;
+        this.zoomBehavior.scaleTo(this.selectCanvasView(), currentZoom);
+        this.zoomBehavior.translateTo(this.selectCanvasView(), currentX, currentY);
+      };
+    });
+  }
+  center(nodeIds, maxZoomLevel, duration) {
     var _a;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
       const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
-      const nonRemovedNodes = this.model.nodes.all();
+      const nonRemovedNodes = (nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.map(i => this.model.nodes.get(i)).filter(n => !!n)) || this.model.nodes.all();
       const minimumX = Math.min(...nonRemovedNodes.map(n => n.coords[0]));
       const maximumX = Math.max(...nonRemovedNodes.map(n => n.coords[0] + n.width));
       const averageX = (minimumX + maximumX) / 2;
@@ -7782,12 +7872,12 @@ class DiagramCanvas {
        * (windowRangeX / rangeX) is the zoom level to fit everything horizontally
        * (windowRangeY / rangeY) is the zoom level to fit everything vertically
        * the minimum between them is the zoom to fit everything in the screen both horizontally and vertically
-       * we also add 1 to the list so that if the zoom exceeds 1 it is set to 1
+       * we also add maxZoomLevel to the list so that if the zoom exceeds maxZoomLevel it is set to maxZoomLevel
+       * or 1 if maxZoomLevel is undefined
        * a zoom bigger than 1 means zooming in instead of out, and we don't want to zoom in if it's not necessary
        */
-      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, 1);
-      this.translateTo(averageX, averageY);
-      this.zoomTo(zoom);
+      const zoom = Math.min(windowRangeX / rangeX, windowRangeY / rangeY, maxZoomLevel !== undefined ? maxZoomLevel : 1);
+      this.zoomAndPanTo(averageX, averageY, zoom, duration);
     }
   }
   getClosestGridPoint(point) {
@@ -7843,7 +7933,7 @@ class DiagramCanvas {
   updateNodesInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${d.type.resizableX ? ' resizable-x' : ''}${d.type.resizableY ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -7907,27 +7997,27 @@ class DiagramCanvas {
     }));
     initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -7943,27 +8033,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -7979,27 +8069,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
@@ -8015,27 +8105,27 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           if (this.snapToGrid) {
@@ -8054,17 +8144,17 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updateSectionsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
       var _a;
-      return `diagram-section${d.getResizableX() ? ' resizable-x' : ''}${d.getResizableY() ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
+      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -8283,10 +8373,10 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
+    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updatePortsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
@@ -10289,4 +10379,4 @@ const getLocationsOfNodes = model => {
   return locations;
 };
 
-export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, DiagramUserHighlight, DiagramUserSelection, DiagramZoomEvent, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, DiagramUserHighlight, DiagramUserSelection, DiagramZoomEvent, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, ResizableMode, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };

package/package.json

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

package/src/index.d.ts

@@ -9,6 +9,7 @@ export { CollabClient } from './lib/diagram/collab/collab-client';
 export type { CollabTimestamp, CollabTimestampSet } from './lib/diagram/collab/primitives';
 export type { CanvasConfig, GridConfig, GridStyle } from './lib/diagram/config/diagram-canvas-config';
 export type { ButtonsComponentConfig, ComponentsConfig, ConnectionTemplateConfig, ErrorsComponentConfig, NodeTemplateConfig, PaletteComponentConfig, PaletteSectionConfig, PropertyEditorComponentConfig } from './lib/diagram/config/diagram-components-config';
+export { ResizableMode } from './lib/diagram/config/diagram-config';
 export type { ConnectionTypeConfig, DiagramConfig, FieldConfig, NodeTypeConfig, PortConfig, PortTypeConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
 export type { ConnectionLook, ConnectionLookConfig, 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';

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

@@ -23,6 +23,8 @@ export declare const isSecondaryButton: (event: MouseEvent) => boolean;
 export declare const getConnectionPath: (shape: LineShape | LineFunction, startCoords: Point, endCoords: Point, startDirection: Side | undefined, endDirection: Side | undefined, width: number, startMarkerWidth: number | undefined, endMarkerWidth: number | undefined) => string;
 export declare const setCursorStyle: (style?: CursorStyle) => void;
 export declare const getRelatedNodeOrItself: (element: DiagramNode | DiagramSection | DiagramPort | DiagramField) => DiagramNode | DiagramSection | DiagramPort | DiagramField;
+export declare const needsResizerX: (element: DiagramNode | DiagramSection) => boolean;
+export declare const needsResizerY: (element: DiagramNode | DiagramSection) => boolean;
 export declare const initializeLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
 export declare const SHAPED_LOOK_DEFAULTS: {
     fillColor: string;

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

@@ -105,7 +105,8 @@ export declare class DiagramCanvas implements Canvas {
     getViewCoordinates(): Point;
     translateBy(x: number, y: number): void;
     translateTo(x: number, y: number): void;
-    center(): void;
+    zoomAndPanTo(x: number, y: number, z: number, duration?: number): void;
+    center(nodeIds?: string[], maxZoomLevel?: number, duration?: number): void;
     getClosestGridPoint(point: Point): Point;
     getCoordinatesOnScreen(): [Point, Point];
     private getEventHoldingCoordinates;

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

@@ -169,12 +169,12 @@ export interface NodeTypeConfig {
      * Whether the user can resize nodes of this type along the x axis.
      * @default false
      */
-    resizableX?: boolean;
+    resizableX?: boolean | ResizableMode;
     /**
      * Whether the user can resize nodes of this type along the y axis.
      * @default false
      */
-    resizableY?: boolean;
+    resizableY?: boolean | ResizableMode;
     /**
      * By how much the location of nodes of this type should be offset when snapping to grid in diagram units.
      * Each value corresponds to left, top, right and bottom respectively.
@@ -499,13 +499,13 @@ export interface SectionConfig {
      * If undefined, inherits from the parent node's resizableX setting.
      * @default undefined
      */
-    resizableX?: boolean;
+    resizableX?: boolean | ResizableMode;
     /**
      * Whether this section can be resized vertically.
      * If undefined, inherits from the parent node's resizableY setting.
      * @default undefined
      */
-    resizableY?: boolean;
+    resizableY?: boolean | ResizableMode;
 }
 /**
  * Configuration for a type of connection.
@@ -556,3 +556,6 @@ export interface ConnectionTypeConfig {
      */
     properties?: Property[];
 }
+export declare enum ResizableMode {
+    OnlyWhenSelected = 0
+}

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

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
-import { DecoratorConfig, FieldConfig, NodeTypeConfig, PortConfig } from '../config/diagram-config';
+import { DecoratorConfig, FieldConfig, NodeTypeConfig, PortConfig, ResizableMode } from '../config/diagram-config';
 import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from '../config/diagram-look-config';
 import { PropertySet } from '../property/property';
 import { ValueSet } from '../property/value';
@@ -75,8 +75,8 @@ export declare class DiagramNodeType implements DiagramEntity {
     defaultHeight: number;
     minWidth: number;
     minHeight: number;
-    resizableX: boolean;
-    resizableY: boolean;
+    resizableX: boolean | ResizableMode;
+    resizableY: boolean | ResizableMode;
     snapToGridOffset: [number, number, number, number];
     bottomPadding: number;
     leftPadding: number;
@@ -207,6 +207,16 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
     updateInView(): void;
     raise(): void;
     getPriority(): number;
+    /**
+     * Returns whether this node can be resized horizontally.
+     * @public
+     */
+    getResizableX(): boolean;
+    /**
+     * Returns whether this node can be resized vertically.
+     * @public
+     */
+    getResizableY(): boolean;
     /**
      * Get the port of this node which is closest to the given coordinates.
      * @param coords A point in the diagram.

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

@@ -1,6 +1,6 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
-import { FieldConfig, PortConfig, SectionConfig, SectionGridConfig } from '../config/diagram-config';
+import { FieldConfig, PortConfig, ResizableMode, SectionConfig, SectionGridConfig } from '../config/diagram-config';
 import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from '../config/diagram-look-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
@@ -61,8 +61,8 @@ export declare class DiagramSectionType {
     highlightedLook: NodeLook;
     selectedAndHighlightedLook: NodeLook;
     priority: number;
-    resizableX: boolean | undefined;
-    resizableY: boolean | undefined;
+    resizableX: boolean | ResizableMode | undefined;
+    resizableY: boolean | ResizableMode | undefined;
     constructor(options: SectionConfig);
 }
 /**

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

@@ -195,7 +195,8 @@ export interface Canvas {
      */
     zoomTo(level: number): void;
     /**
-     * Gets the current coordinates of the view.
+     * Gets the current coordinates of the center of view.
+     * Ensures that calling `translateTo()` with the result causes no changes.
      * @public
      */
     getViewCoordinates(): Point;
@@ -207,17 +208,30 @@ export interface Canvas {
      */
     translateBy(x: number, y: number): void;
     /**
-     * Translates the view to the given point.
+     * Translates the center of the view to the given point.
      * @public
      * @param x A coordinate along the x axis.
      * @param y A coordinate along the y axis.
      */
     translateTo(x: number, y: number): void;
+    /**
+     * Translates the center of the view to the given point and the given zoom level over the given duration of time.
+     * The duration may be set to `0` or `undefined` to make the move instant without animation.
+     * @public
+     * @param x A coordinate along the x axis.
+     * @param y A coordinate along the y axis.
+     * @param z A level of zoom.
+     * @param duration A duration for the animation in milliseconds. May be set to `0` or `undefined` to make it instant without animation.
+     */
+    zoomAndPanTo(x: number, y: number, z: number, duration?: number): void;
     /**
      * Centers by zooming and translating the view such that every element fits in the view.
      * @public
+     * @param nodeIds A list of node ids to center the view on. If `undefined`, it encompasses all nodes.
+     * @param maxZoomLevel The maximum zoom level that can be used when zooming into the elements. Can be used to prevent zooming in past a given level. `1` by default.
+     * @param duration A duration for the animation in milliseconds. May be set to `0` or `undefined` to make it instant without animation.
      */
-    center(): void;
+    center(nodeIds?: string[], maxZoomLevel?: number, duration?: number): void;
     /**
      * Get the closest grid point to the given point.
      * @public