orcasvn-react-diagrams 0.2.6 → 0.2.7

package/dist/cjs/index.js

@@ -91,6 +91,7 @@ var ElementModel = /** @class */ (function () {
         this.moveMode = data.moveMode;
         this.anchorCenter = data.anchorCenter;
         this.layout = data.layout;
+        this.childElementInteraction = data.childElementInteraction;
         this.portMovement = data.portMovement;
     }
     ElementModel.prototype.setPosition = function (position) {
@@ -128,6 +129,7 @@ var ElementModel = /** @class */ (function () {
             moveMode: this.moveMode,
             anchorCenter: this.anchorCenter,
             layout: this.layout,
+            childElementInteraction: this.childElementInteraction,
             portMovement: this.portMovement,
         };
     };
@@ -4408,9 +4410,7 @@ var DiagramEngine = /** @class */ (function () {
         var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
         if (!parentId)
             return false;
-        if (this.model.getChildren(element.id).length > 0)
-            return false;
-        if (element.layout && element.layout.mode !== 'manual')
+        if (!this.isLeafGridChildResizeCandidate(element))
             return false;
         var parent = this.model.getElement(parentId);
         if (((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) !== 'grid')
@@ -4418,16 +4418,7 @@ var DiagramEngine = /** @class */ (function () {
         return !Boolean(parent.layout.gridChildWidthResizeEnabled);
     };
     DiagramEngine.prototype.shouldAnchorAutoLayoutGridChildWidthToLeft = function (element) {
-        var _a, _b;
-        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
-        if (!parentId)
-            return false;
-        if (this.model.getChildren(element.id).length > 0)
-            return false;
-        if (element.layout && element.layout.mode !== 'manual')
-            return false;
-        var parent = this.model.getElement(parentId);
-        return Boolean(((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) === 'grid' && parent.layout.gridChildWidthResizeEnabled);
+        return this.isEnabledGridChildWidthResizeCandidate(element);
     };
     DiagramEngine.prototype.shouldRestrictAutoLayoutChildRightGrowth = function (element, handle, requestedWidth) {
         return false;
@@ -4437,41 +4428,55 @@ var DiagramEngine = /** @class */ (function () {
         var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
         if (!parentId)
             return requestedWidth;
-        if (this.model.getChildren(element.id).length > 0)
-            return requestedWidth;
-        if (element.layout && element.layout.mode !== 'manual')
-            return requestedWidth;
-        var parent = this.model.getElement(parentId);
-        if (!(parent === null || parent === void 0 ? void 0 : parent.layout) || parent.layout.mode !== 'grid' || !parent.layout.gridChildWidthResizeEnabled)
+        if (!this.isEnabledGridChildWidthResizeCandidate(element))
             return requestedWidth;
         return this.autoLayoutService.snapGridChildRequestedWidth(parentId, element.id, requestedWidth);
     };
     DiagramEngine.prototype.resolveGridChildWidthResizeTopologyChange = function (element, requestedWidth) {
-        var _a, _b, _c;
+        var _a, _b;
         var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
         if (!parentId)
             return null;
-        if (this.model.getChildren(element.id).length > 0)
-            return null;
-        if (element.layout && element.layout.mode !== 'manual')
+        if (!this.isEnabledGridChildWidthResizeCandidate(element))
             return null;
         var parent = this.model.getElement(parentId);
-        if (!parent || ((_b = parent.layout) === null || _b === void 0 ? void 0 : _b.mode) !== 'grid' || !parent.layout.gridChildWidthResizeEnabled)
+        if (!parent)
             return null;
         var topologyChange = this.autoLayoutService.resolveGridChildResizeTopologyChange(parentId, element.id, requestedWidth);
         if (!topologyChange)
             return null;
+        var parentLayout = parent.layout;
+        if (!parentLayout)
+            return null;
         return {
             parentId: topologyChange.parentId,
             triggerChildId: topologyChange.triggerChildId,
             reason: topologyChange.reason,
             beforeRows: topologyChange.beforeRows,
             afterRows: topologyChange.afterRows,
-            beforeGridTemplate: parent.layout.gridTemplate ? __spreadArray([], parent.layout.gridTemplate, true) : undefined,
-            afterGridTemplate: __spreadArray([], ((_c = topologyChange.nextLayout.gridTemplate) !== null && _c !== void 0 ? _c : []), true),
+            beforeGridTemplate: parentLayout.gridTemplate ? __spreadArray([], parentLayout.gridTemplate, true) : undefined,
+            afterGridTemplate: __spreadArray([], ((_b = topologyChange.nextLayout.gridTemplate) !== null && _b !== void 0 ? _b : []), true),
             afterLayout: topologyChange.nextLayout,
         };
     };
+    DiagramEngine.prototype.isLeafGridChildResizeCandidate = function (element) {
+        if (this.model.getChildren(element.id).length > 0)
+            return false;
+        if (element.layout && element.layout.mode !== 'manual')
+            return false;
+        return true;
+    };
+    DiagramEngine.prototype.isEnabledGridChildWidthResizeCandidate = function (element) {
+        var _a;
+        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!parentId)
+            return false;
+        var parent = this.model.getElement(parentId);
+        var layout = parent === null || parent === void 0 ? void 0 : parent.layout;
+        if (!layout || layout.mode !== 'grid')
+            return false;
+        return Boolean(layout.gridChildWidthResizeEnabled);
+    };
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
     };
@@ -6378,7 +6383,7 @@ var ellipseMidPointToIndex = function (value) {
 var KonvaInteraction = /** @class */ (function () {
     function KonvaInteraction(engine, config) {
         if (config === void 0) { config = {}; }
-        var _a, _b;
+        var _a;
         this.linkDragContext = null;
         this.programmaticLinkSession = null;
         this.bound = false;
@@ -6402,7 +6407,6 @@ var KonvaInteraction = /** @class */ (function () {
         this.stage = config.stage;
         this.hitTester = (_a = config.hitTester) !== null && _a !== void 0 ? _a : new KonvaHitTester();
         this.renderer = config.renderer;
-        this.panKey = (_b = config.panKey) !== null && _b !== void 0 ? _b : 'Control';
         this.shapeRegistry = config.shapeRegistry;
         this.shapeHoverControls = this.normalizeShapeHoverControls(config.shapeHoverControls);
         this.onShapeHoverControlInteracted = config.onShapeHoverControlInteracted;
@@ -6570,7 +6574,10 @@ var KonvaInteraction = /** @class */ (function () {
             var hit = _this.resolveHit(point);
             var nativeEvent = event === null || event === void 0 ? void 0 : event.evt;
             var isMulti = Boolean(nativeEvent && (nativeEvent.ctrlKey || nativeEvent.metaKey || nativeEvent.shiftKey));
-            var isPanGesture = Boolean(nativeEvent && _this.isPanKeyPressed(nativeEvent) && nativeEvent.button === 0);
+            var isPrimaryButton = !nativeEvent || nativeEvent.button === 0;
+            var isEmptyPaper = !hit || hit.type === 'none';
+            var isMarqueeGesture = Boolean(isPrimaryButton && isEmptyPaper && (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey));
+            var isPanGesture = Boolean(isPrimaryButton && isEmptyPaper && !(nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey));
             var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
             if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'shape-hover-control') {
                 var resolvedControl = _this.resolveShapeHoverControlFromHit(hit.id, point);
@@ -6628,11 +6635,14 @@ var KonvaInteraction = /** @class */ (function () {
                 }
                 return;
             }
-            if (!hit || hit.type === 'none') {
+            if (isMarqueeGesture) {
                 _this.dragState = { mode: 'marquee', start: point, isMulti: isMulti, hasMoved: false };
                 (_d = _this.renderer) === null || _d === void 0 ? void 0 : _d.renderMarquee({ x: point.x, y: point.y, width: 0, height: 0 });
                 return;
             }
+            if (isEmptyPaper) {
+                return;
+            }
             if (hit.type === 'port') {
                 var elementId = _this.engine.getPortElementId(hit.id);
                 if (!elementId)
@@ -6697,6 +6707,7 @@ var KonvaInteraction = /** @class */ (function () {
                     var element = _this.getElementById(hit.id);
                     if (!element)
                         return;
+                    var movable = _this.isElementMovable(hit.id);
                     var anchor = element.anchorCenter ? 'center' : 'top-left';
                     var base = element.anchorCenter
                         ? {
@@ -6711,12 +6722,13 @@ var KonvaInteraction = /** @class */ (function () {
                         offset: { x: point.x - base.x, y: point.y - base.y },
                         start: __assign({}, base),
                         anchor: anchor,
+                        movable: movable,
                         startParentId: (_e = element.parentId) !== null && _e !== void 0 ? _e : null,
                         selectionIds: _this.engine.getSelection(),
                         isMulti: isMulti,
                         hasMoved: false,
                     };
-                    _this.setCursor('grabbing');
+                    _this.setCursor(movable ? 'grabbing' : 'pointer');
                 }
             }
         };
@@ -6774,6 +6786,9 @@ var KonvaInteraction = /** @class */ (function () {
                     var dy = target.y - _this.dragState.start.y;
                     var moved = Math.hypot(dx, dy) >= _this.dragThreshold;
                     _this.dragState.hasMoved = _this.dragState.hasMoved || moved;
+                    if (!_this.dragState.movable) {
+                        return;
+                    }
                     _this.engine.moveElementTo(_this.dragState.id, target.x, target.y);
                     if (_this.renderer && _this.engine.getSelection().includes(_this.dragState.id)) {
                         var element = _this.getElementById(_this.dragState.id);
@@ -6899,15 +6914,15 @@ var KonvaInteraction = /** @class */ (function () {
                 var dx = point.x - _this.dragState.start.x;
                 var dy = point.y - _this.dragState.start.y;
                 _this.pan = {
-                    x: _this.dragState.origin.x - dx * _this.panSpeed,
-                    y: _this.dragState.origin.y - dy * _this.panSpeed,
+                    x: _this.dragState.origin.x + dx * _this.panSpeed,
+                    y: _this.dragState.origin.y + dy * _this.panSpeed,
                 };
                 _this.applyStageTransform();
                 _this.engine.setViewport(_this.pan, _this.zoom);
             }
         };
         var pointerUp = function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var args = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
@@ -7001,10 +7016,21 @@ var KonvaInteraction = /** @class */ (function () {
                     _this.engine.emitPaperClick(pointerInfo);
                 }
             }
-            if (((_h = _this.dragState) === null || _h === void 0 ? void 0 : _h.mode) === 'move' && _this.dragState.type === 'element') {
+            if (((_h = _this.dragState) === null || _h === void 0 ? void 0 : _h.mode) === 'pan') {
+                var point = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.dragState.start;
+                var dx = point.x - _this.dragState.start.x;
+                var dy = point.y - _this.dragState.start.y;
+                var moved = Math.hypot(dx, dy) >= _this.dragThreshold;
+                if (!moved) {
+                    _this.engine.setSelection([]);
+                    var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
+                    _this.engine.emitPaperClick(pointerInfo);
+                }
+            }
+            if (((_j = _this.dragState) === null || _j === void 0 ? void 0 : _j.mode) === 'move' && _this.dragState.type === 'element') {
                 var element = _this.getElementById(_this.dragState.id);
                 if (element) {
-                    var endTopLeft = (_j = _this.engine.getElementWorldPosition(_this.dragState.id)) !== null && _j !== void 0 ? _j : element.position;
+                    var endTopLeft = (_k = _this.engine.getElementWorldPosition(_this.dragState.id)) !== null && _k !== void 0 ? _k : element.position;
                     var endWorld = _this.dragState.anchor === 'center'
                         ? {
                             x: endTopLeft.x + element.size.width / 2,
@@ -7015,7 +7041,8 @@ var KonvaInteraction = /** @class */ (function () {
                         x: endWorld.x - _this.dragState.start.x,
                         y: endWorld.y - _this.dragState.start.y,
                     };
-                    var moved = _this.dragState.hasMoved || Math.hypot(delta.x, delta.y) > 0;
+                    var moved = _this.dragState.movable &&
+                        (_this.dragState.hasMoved || Math.hypot(delta.x, delta.y) > 0);
                     if (moved) {
                         _this.engine.emitElementDrop({
                             elementId: _this.dragState.id,
@@ -7027,16 +7054,16 @@ var KonvaInteraction = /** @class */ (function () {
                             anchor: _this.dragState.anchor,
                         });
                     }
-                    else {
+                    else if (!_this.dragState.hasMoved) {
                         var pointerInfo = _this.buildPointerInfo(pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.dragState.start, nativeEvent);
                         _this.engine.emitElementClick(_this.dragState.id, pointerInfo, _this.dragState.isMulti);
                     }
                 }
             }
-            if (((_k = _this.dragState) === null || _k === void 0 ? void 0 : _k.mode) === 'move' && _this.dragState.type === 'port') {
+            if (((_l = _this.dragState) === null || _l === void 0 ? void 0 : _l.mode) === 'move' && _this.dragState.type === 'port') {
                 var elementId = _this.engine.getPortElementId(_this.dragState.id);
                 if (elementId) {
-                    var pointerInfo = _this.buildPointerInfo((_l = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.engine.getPortWorldPosition(_this.dragState.id)) !== null && _l !== void 0 ? _l : { x: 0, y: 0 }, nativeEvent);
+                    var pointerInfo = _this.buildPointerInfo((_m = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.engine.getPortWorldPosition(_this.dragState.id)) !== null && _m !== void 0 ? _m : { x: 0, y: 0 }, nativeEvent);
                     _this.engine.emitPortMouseUp({ portId: _this.dragState.id, elementId: elementId, pointer: pointerInfo });
                 }
             }
@@ -7342,6 +7369,10 @@ var KonvaInteraction = /** @class */ (function () {
             this.setCursor('pointer');
             return;
         }
+        if (hit.type === 'element' && !this.isElementMovable(hit.id)) {
+            this.setCursor('pointer');
+            return;
+        }
         this.setCursor('grab');
     };
     KonvaInteraction.prototype.normalizeShapeHoverControls = function (controls) {
@@ -8567,6 +8598,14 @@ var KonvaInteraction = /** @class */ (function () {
         var _a, _b;
         return ((_b = (_a = this.getTextById(id)) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.movable) !== false;
     };
+    KonvaInteraction.prototype.isElementMovable = function (id) {
+        var _a;
+        var element = this.getElementById(id);
+        if (!(element === null || element === void 0 ? void 0 : element.parentId))
+            return true;
+        var parent = this.getElementById(element.parentId);
+        return ((_a = parent === null || parent === void 0 ? void 0 : parent.childElementInteraction) === null || _a === void 0 ? void 0 : _a.movable) !== false;
+    };
     KonvaInteraction.prototype.isTextEditable = function (id) {
         var _a, _b;
         return ((_b = (_a = this.getTextById(id)) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.editable) !== false;
@@ -8685,19 +8724,6 @@ var KonvaInteraction = /** @class */ (function () {
         var tag = target.tagName.toLowerCase();
         return tag === 'input' || tag === 'textarea' || tag === 'select';
     };
-    KonvaInteraction.prototype.isPanKeyPressed = function (event) {
-        switch (this.panKey) {
-            case 'Shift':
-                return event.shiftKey;
-            case 'Alt':
-                return event.altKey;
-            case 'Meta':
-                return event.metaKey;
-            case 'Control':
-            default:
-                return event.ctrlKey;
-        }
-    };
     return KonvaInteraction;
 }());
 

package/dist/cjs/types/api/types.d.ts

@@ -29,6 +29,9 @@ export type TextInteractionPolicy = {
     movable?: boolean;
     editable?: boolean;
 };
+export type ElementChildInteractionPolicy = {
+    movable?: boolean;
+};
 export type BorderSide = 'left' | 'right' | 'top' | 'bottom';
 export type HostAnchorPreset = 'vertices' | 'cardinal';
 export type PortLinkAttachMode = 'external' | 'internal';
@@ -270,6 +273,7 @@ export type ElementData = {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     layout?: ElementLayout;
+    childElementInteraction?: ElementChildInteractionPolicy;
     portMovement?: ElementPortMovementPolicy;
 };
 export type PortData = {

package/dist/cjs/types/displaybox/demos/autoLayoutDemo.d.ts

@@ -1,2 +1,4 @@
+import type { DiagramState } from '../../api';
 import type { DemoConfig } from '../types';
+export declare const createAutoLayoutState: (lockComparisonChildren?: boolean) => DiagramState;
 export declare const autoLayoutDemoConfig: DemoConfig;

package/dist/cjs/types/engine/DiagramEngine.d.ts

@@ -94,6 +94,8 @@ export default class DiagramEngine {
     private shouldRestrictAutoLayoutChildRightGrowth;
     private resolveSnappedGridChildWidth;
     private resolveGridChildWidthResizeTopologyChange;
+    private isLeafGridChildResizeCandidate;
+    private isEnabledGridChildWidthResizeCandidate;
     getPortWorldPosition(id: string): Point | null;
     getPortLinkWorldPosition(id: string, options?: {
         oppositePortId?: string;

package/dist/cjs/types/models/ElementModel.d.ts

@@ -11,6 +11,7 @@ export default class ElementModel {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     layout?: ElementData['layout'];
+    childElementInteraction?: ElementData['childElementInteraction'];
     portMovement?: ElementData['portMovement'];
     constructor(data: ElementData);
     setPosition(position: Point): void;

package/dist/cjs/types/renderer/konva/KonvaInteraction.d.ts

@@ -74,7 +74,6 @@ export default class KonvaInteraction {
     private readonly occupiedVertexTolerance;
     private readonly nestedHoverElementPadding;
     private emittingElementLinkEnded;
-    private panKey;
     constructor(engine: DiagramEngine, config?: InteractionConfig);
     setShapeHoverControls(controls?: ElementShapeHoverControls): void;
     startLinkFromPort(sourcePortId: string, pointer?: Point): void;
@@ -147,6 +146,7 @@ export default class KonvaInteraction {
     private getPortById;
     private getTextById;
     private isTextMovable;
+    private isElementMovable;
     private isTextEditable;
     private getLinkById;
     private resolveTextScreenPosition;
@@ -154,5 +154,4 @@ export default class KonvaInteraction {
     private applyStageTransform;
     private cancelLinkDrag;
     private isEditableTarget;
-    private isPanKeyPressed;
 }