orcasvn-react-diagrams 0.2.4 → 0.2.6

package/dist/cjs/index.js

@@ -270,6 +270,7 @@ var TextModel = /** @class */ (function () {
         this.size = data.size ? __assign({}, data.size) : undefined;
         this.style = data.style;
         this.ownerId = (_a = data.ownerId) !== null && _a !== void 0 ? _a : null;
+        this.interaction = data.interaction ? __assign({}, data.interaction) : undefined;
         this.layout = data.layout ? __assign({}, data.layout) : undefined;
         this.displayContent = (_b = data.displayContent) !== null && _b !== void 0 ? _b : data.content;
         this.displayOffset = data.displayOffset ? __assign({}, data.displayOffset) : undefined;
@@ -306,6 +307,7 @@ var TextModel = /** @class */ (function () {
             size: this.size ? __assign({}, this.size) : undefined,
             style: this.style,
             ownerId: this.ownerId,
+            interaction: this.interaction ? __assign({}, this.interaction) : undefined,
             layout: this.layout ? __assign({}, this.layout) : undefined,
             displayContent: (_a = this.displayContent) !== null && _a !== void 0 ? _a : this.content,
             displayOffset: this.displayOffset ? __assign({}, this.displayOffset) : undefined,
@@ -320,7 +322,7 @@ var distance = function (a, b) {
     var dy = a.y - b.y;
     return Math.sqrt(dx * dx + dy * dy);
 };
-var clamp = function (value, min, max) {
+var clamp$2 = function (value, min, max) {
     if (value < min)
         return min;
     if (value > max)
@@ -1167,6 +1169,7 @@ var pathLength = function (points) {
     }
     return total;
 };
+var clamp$1 = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
 var ObstacleRouter = /** @class */ (function () {
     function ObstacleRouter(options) {
         var _a, _b, _c;
@@ -1182,7 +1185,7 @@ var ObstacleRouter = /** @class */ (function () {
         var targetStub = this.computeStubEndpoint(target, context === null || context === void 0 ? void 0 : context.targetEndpoint, bounds, obstacles);
         var innerSource = sourceStub !== null && sourceStub !== void 0 ? sourceStub : source;
         var innerTarget = targetStub !== null && targetStub !== void 0 ? targetStub : target;
-        var core = this.routeBetween(innerSource, innerTarget, obstacles, bounds);
+        var core = this.routeBetween(innerSource, innerTarget, obstacles, bounds, context);
         var normalizedCore = this.ensureEndpoints(core, innerSource, innerTarget);
         var middle = normalizedCore.slice(1, -1).map(function (p) { return (__assign({}, p)); });
         var result = [__assign({}, source)];
@@ -1198,7 +1201,7 @@ var ObstacleRouter = /** @class */ (function () {
         result.push(__assign({}, target));
         return this.compactPreservingStubs(result, hasSourceStub, hasTargetStub);
     };
-    ObstacleRouter.prototype.buildCandidates = function (source, target, obstacles) {
+    ObstacleRouter.prototype.buildCandidates = function (source, target, obstacles, context) {
         var _this = this;
         var midXValues = new Set();
         var midYValues = new Set();
@@ -1233,26 +1236,38 @@ var ObstacleRouter = /** @class */ (function () {
             ]);
             candidates.push(path);
         });
+        var corridorCandidate = this.buildCommonAncestorCorridorCandidate(source, target, context === null || context === void 0 ? void 0 : context.commonAncestorCorridor);
+        if (corridorCandidate) {
+            candidates.push(corridorCandidate);
+        }
         return candidates;
     };
-    ObstacleRouter.prototype.routeBetween = function (source, target, obstacles, bounds) {
+    ObstacleRouter.prototype.routeBetween = function (source, target, obstacles, bounds, context) {
         var _this = this;
         var direct = compactPath([__assign({}, source), __assign({}, target)]);
-        if (obstacles.length === 0 && (!bounds || this.pointsWithinBounds(direct, bounds))) {
+        var hasCommonAncestorCorridor = Boolean(context === null || context === void 0 ? void 0 : context.commonAncestorCorridor);
+        if (!hasCommonAncestorCorridor && obstacles.length === 0 && (!bounds || this.pointsWithinBounds(direct, bounds))) {
             return direct;
         }
-        if (this.isPathClear(direct, obstacles, bounds)) {
+        if (!hasCommonAncestorCorridor && this.isPathClear(direct, obstacles, bounds)) {
             return direct;
         }
-        var candidates = this.buildCandidates(source, target, obstacles);
+        var candidates = this.buildCandidates(source, target, obstacles, context);
         var best = null;
+        var bestPenalty = Number.POSITIVE_INFINITY;
+        var bestCorridorSpan = Number.NEGATIVE_INFINITY;
         var bestLength = Number.POSITIVE_INFINITY;
         candidates.forEach(function (candidate) {
             if (!_this.isPathClear(candidate, obstacles, bounds))
                 return;
+            var scored = _this.scoreCommonAncestorCorridor(candidate, context === null || context === void 0 ? void 0 : context.commonAncestorCorridor, source, target);
             var length = pathLength(candidate);
-            if (length < bestLength) {
+            if (scored.penalty < bestPenalty ||
+                (scored.penalty === bestPenalty && scored.corridorSpan > bestCorridorSpan) ||
+                (scored.penalty === bestPenalty && scored.corridorSpan === bestCorridorSpan && length < bestLength)) {
                 best = candidate;
+                bestPenalty = scored.penalty;
+                bestCorridorSpan = scored.corridorSpan;
                 bestLength = length;
             }
         });
@@ -1429,6 +1444,78 @@ var ObstacleRouter = /** @class */ (function () {
         result.push(deduped[deduped.length - 1]);
         return result.map(function (p) { return (__assign({}, p)); });
     };
+    ObstacleRouter.prototype.buildCommonAncestorCorridorCandidate = function (source, target, corridor) {
+        if (!corridor)
+            return null;
+        if (corridor.axis === 'horizontal') {
+            var direction_1 = source.x <= target.x ? 1 : -1;
+            var corridorY = clamp$1((source.y + target.y) / 2, corridor.bounds.y + this.padding, corridor.bounds.y + corridor.bounds.height - this.padding);
+            var sourceExitX = direction_1 > 0
+                ? corridor.sourceBranchRect.x + corridor.sourceBranchRect.width + this.padding
+                : corridor.sourceBranchRect.x - this.padding;
+            var targetEntryX = direction_1 > 0
+                ? corridor.targetBranchRect.x - this.padding
+                : corridor.targetBranchRect.x + corridor.targetBranchRect.width + this.padding;
+            return compactPath([
+                __assign({}, source),
+                { x: sourceExitX, y: source.y },
+                { x: sourceExitX, y: corridorY },
+                { x: targetEntryX, y: corridorY },
+                { x: targetEntryX, y: target.y },
+                __assign({}, target),
+            ]);
+        }
+        var direction = source.y <= target.y ? 1 : -1;
+        var corridorX = clamp$1((source.x + target.x) / 2, corridor.bounds.x + this.padding, corridor.bounds.x + corridor.bounds.width - this.padding);
+        var sourceExitY = direction > 0
+            ? corridor.sourceBranchRect.y + corridor.sourceBranchRect.height + this.padding
+            : corridor.sourceBranchRect.y - this.padding;
+        var targetEntryY = direction > 0
+            ? corridor.targetBranchRect.y - this.padding
+            : corridor.targetBranchRect.y + corridor.targetBranchRect.height + this.padding;
+        return compactPath([
+            __assign({}, source),
+            { x: source.x, y: sourceExitY },
+            { x: corridorX, y: sourceExitY },
+            { x: corridorX, y: targetEntryY },
+            { x: target.x, y: targetEntryY },
+            __assign({}, target),
+        ]);
+    };
+    ObstacleRouter.prototype.scoreCommonAncestorCorridor = function (candidate, corridor, source, target) {
+        if (!corridor || candidate.length < 3) {
+            return { penalty: 0, corridorSpan: 0 };
+        }
+        var firstTurn = candidate[1];
+        var lastTurn = candidate[candidate.length - 2];
+        var penalty = 0;
+        var corridorSpan = 0;
+        if (corridor.axis === 'horizontal') {
+            var direction = source.x <= target.x ? 1 : -1;
+            var sourceBoundary = direction > 0 ? corridor.sourceBranchRect.x + corridor.sourceBranchRect.width : corridor.sourceBranchRect.x;
+            var targetBoundary = direction > 0 ? corridor.targetBranchRect.x : corridor.targetBranchRect.x + corridor.targetBranchRect.width;
+            var sourceExited = direction > 0 ? firstTurn.x > sourceBoundary + this.tolerance : firstTurn.x < sourceBoundary - this.tolerance;
+            var targetDeferred = direction > 0 ? lastTurn.x < targetBoundary - this.tolerance : lastTurn.x > targetBoundary + this.tolerance;
+            if (!sourceExited)
+                penalty += 1000;
+            if (!targetDeferred)
+                penalty += 1000;
+            corridorSpan = Math.abs(lastTurn.x - firstTurn.x);
+        }
+        else {
+            var direction = source.y <= target.y ? 1 : -1;
+            var sourceBoundary = direction > 0 ? corridor.sourceBranchRect.y + corridor.sourceBranchRect.height : corridor.sourceBranchRect.y;
+            var targetBoundary = direction > 0 ? corridor.targetBranchRect.y : corridor.targetBranchRect.y + corridor.targetBranchRect.height;
+            var sourceExited = direction > 0 ? firstTurn.y > sourceBoundary + this.tolerance : firstTurn.y < sourceBoundary - this.tolerance;
+            var targetDeferred = direction > 0 ? lastTurn.y < targetBoundary - this.tolerance : lastTurn.y > targetBoundary + this.tolerance;
+            if (!sourceExited)
+                penalty += 1000;
+            if (!targetDeferred)
+                penalty += 1000;
+            corridorSpan = Math.abs(lastTurn.y - firstTurn.y);
+        }
+        return { penalty: penalty, corridorSpan: corridorSpan };
+    };
     return ObstacleRouter;
 }());
 
@@ -1931,34 +2018,211 @@ var TextLayoutService = /** @class */ (function () {
     return TextLayoutService;
 }());
 
+var GRID_ROW_UNITS = 12;
 var AutoLayoutService = /** @class */ (function () {
     function AutoLayoutService(config) {
         this.model = config.model;
         this.commandQueue = config.commandQueue;
         this.collectElementPortIds = config.collectElementPortIds;
     }
-    AutoLayoutService.prototype.applyLayoutForParent = function (parentId) {
-        var _a;
-        var _this = this;
-        var _b, _c, _d, _e;
+    AutoLayoutService.prototype.applyLayoutForParent = function (parentId, options) {
         var parent = this.model.getElement(parentId);
         if (!parent)
             return { patches: [], movedPortIds: [] };
         var layout = parent.layout;
         if (!layout || layout.mode === 'manual')
             return { patches: [], movedPortIds: [] };
+        var preserveParentSize = Boolean(options === null || options === void 0 ? void 0 : options.preserveParentSize);
+        var preserveParentWidth = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentWidth);
+        var preserveParentHeight = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentHeight);
+        var padding = this.resolveLayoutPadding(layout);
+        var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
+        var autoResize = this.resolveAutoResizeMode(layout);
         var children = this.model.getChildren(parentId);
-        if (children.length === 0)
-            return { patches: [], movedPortIds: [] };
-        var axis = layout.mode;
+        if (children.length === 0) {
+            if (preserveParentWidth || preserveParentHeight) {
+                var targetWidth_1 = preserveParentWidth ? parent.size.width : Math.max(0, Math.round(padding.x * 2));
+                var targetHeight_1 = preserveParentHeight
+                    ? parent.size.height
+                    : Math.max(0, Math.round(padding.y * 2 + labelReservedTopLane));
+                if (parent.size.width === targetWidth_1 && parent.size.height === targetHeight_1) {
+                    return { patches: [], movedPortIds: [] };
+                }
+                var resizePatches_1 = this.commandQueue.run(createResizeElementCommand(parentId, { width: targetWidth_1, height: targetHeight_1 }), this.model);
+                return { patches: resizePatches_1, movedPortIds: __spreadArray([], parent.portIds, true) };
+            }
+            if (preserveParentSize) {
+                return { patches: [], movedPortIds: [] };
+            }
+            if (autoResize !== 'grow-shrink')
+                return { patches: [], movedPortIds: [] };
+            var targetWidth = Math.max(0, Math.round(padding.x * 2));
+            var targetHeight = Math.max(0, Math.round(padding.y * 2 + labelReservedTopLane));
+            if (parent.size.width === targetWidth && parent.size.height === targetHeight) {
+                return { patches: [], movedPortIds: [] };
+            }
+            var resizePatches = this.commandQueue.run(createResizeElementCommand(parentId, { width: targetWidth, height: targetHeight }), this.model);
+            return { patches: resizePatches, movedPortIds: __spreadArray([], parent.portIds, true) };
+        }
+        if (layout.mode === 'grid') {
+            return this.applyGridLayoutForParent(parentId, parent, children, {
+                preserveParentSize: preserveParentSize,
+                preserveParentWidth: preserveParentWidth,
+                preserveParentHeight: preserveParentHeight,
+            });
+        }
+        return this.applyAxisLayoutForParent(parentId, parent, children, layout.mode, {
+            preserveParentSize: preserveParentSize,
+            preserveParentWidth: preserveParentWidth,
+            preserveParentHeight: preserveParentHeight,
+        });
+    };
+    AutoLayoutService.prototype.applyLayoutCascade = function (startParentId) {
+        var _a;
+        var patches = [];
+        var movedPortIds = [];
+        var visited = new Set();
+        var current = startParentId;
+        while (current) {
+            if (visited.has(current))
+                break;
+            visited.add(current);
+            var result = this.applyLayoutForParent(current);
+            patches.push.apply(patches, result.patches);
+            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
+            var parent_1 = this.model.getElement(current);
+            current = (_a = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.parentId) !== null && _a !== void 0 ? _a : null;
+        }
+        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
+    };
+    AutoLayoutService.prototype.applyAllLayouts = function () {
+        var _this = this;
+        var layoutParents = Array.from(this.model.elements.values()).filter(function (element) { return element.layout && element.layout.mode !== 'manual'; });
+        var patches = [];
+        var movedPortIds = [];
+        var depth = function (elementId) {
+            var level = 0;
+            var current = _this.model.getElement(elementId);
+            while (current === null || current === void 0 ? void 0 : current.parentId) {
+                level += 1;
+                current = _this.model.getElement(current.parentId);
+            }
+            return level;
+        };
+        layoutParents
+            .sort(function (a, b) { return depth(b.id) - depth(a.id); })
+            .forEach(function (element) {
+            var result = _this.applyLayoutForParent(element.id);
+            patches.push.apply(patches, result.patches);
+            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
+        });
+        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
+    };
+    AutoLayoutService.prototype.describeGridRows = function (parentId) {
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid')
+            return [];
+        return this.resolveAssignedGridRows(parent).map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+    };
+    AutoLayoutService.prototype.describeGridSlotState = function (parentId) {
+        var _this = this;
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid')
+            return null;
+        var assignedRows = this.resolveAssignedGridRows(parent);
+        return {
+            orderedChildIds: assignedRows.flatMap(function (row) { return row.childIds; }),
+            slotWeights: assignedRows.flatMap(function (row) { return row.weights.slice(0, row.childIds.length).map(function (weight) { return _this.clampGridUnits(weight); }); }),
+        };
+    };
+    AutoLayoutService.prototype.resolveGridReorderedLayout = function (parentId, previousState) {
+        var _this = this;
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return null;
+        var sortedChildren = this.sortGridChildrenForLayout(this.model.getChildren(parentId));
+        var orderedChildIds = sortedChildren.map(function (child) { return child.id; });
+        if (orderedChildIds.length === previousState.orderedChildIds.length &&
+            orderedChildIds.every(function (childId, index) { return childId === previousState.orderedChildIds[index]; })) {
+            return null;
+        }
+        var weightByChildId = new Map();
+        previousState.orderedChildIds.forEach(function (childId, index) {
+            var _a;
+            weightByChildId.set(childId, _this.clampGridUnits((_a = previousState.slotWeights[index]) !== null && _a !== void 0 ? _a : GRID_ROW_UNITS));
+        });
+        var reorderedTemplate = orderedChildIds.map(function (childId) { var _a; return (_a = weightByChildId.get(childId)) !== null && _a !== void 0 ? _a : GRID_ROW_UNITS; });
+        return __assign(__assign({}, parent.layout), { gridTemplate: reorderedTemplate });
+    };
+    AutoLayoutService.prototype.resolveGridChildResizeTopologyChange = function (parentId, childId, requestedWidth) {
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return null;
+        var slotState = this.resolveGridChildSlotState(parentId, childId);
+        if (!slotState)
+            return null;
+        var assignedRows = slotState.assignedRows, orderedChildIds = slotState.orderedChildIds, slotWeights = slotState.slotWeights, childFlatIndex = slotState.childFlatIndex, rowIndex = slotState.rowIndex;
+        var currentUnits = slotWeights[childFlatIndex];
+        var requestedUnits = this.resolveRequestedGridUnits(parent, assignedRows[rowIndex], requestedWidth);
+        if (requestedUnits === currentUnits)
+            return null;
+        var nextSlotWeights = __spreadArray([], slotWeights, true);
+        nextSlotWeights[childFlatIndex] = requestedUnits;
+        var nextRows = this.packGridRowsFromSlots(orderedChildIds, nextSlotWeights);
+        var beforeRows = assignedRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+        var afterRows = nextRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+        var rowsChanged = !this.gridRowSnapshotsEqual(beforeRows, afterRows);
+        var reason = requestedUnits < currentUnits && rowsChanged ? 'child-resize-split' : 'child-resize-redistribute';
+        return {
+            parentId: parentId,
+            triggerChildId: childId,
+            reason: reason,
+            beforeRows: beforeRows,
+            afterRows: afterRows,
+            nextLayout: __assign(__assign({}, parent.layout), { gridTemplate: nextSlotWeights }),
+        };
+    };
+    AutoLayoutService.prototype.snapGridChildRequestedWidth = function (parentId, childId, requestedWidth) {
+        var _a, _b;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return requestedWidth;
+        var slotState = this.resolveGridChildSlotState(parentId, childId);
+        if (!slotState)
+            return requestedWidth;
+        var requestedUnits = this.resolveRequestedGridUnits(parent, slotState.assignedRows[slotState.rowIndex], requestedWidth);
+        var rowUnitWidth = this.resolveGridRowUnitWidth(Math.max(0, parent.size.width - this.resolveLayoutPadding(parent.layout).x * 2), slotState.assignedRows[slotState.rowIndex].childIds.length, (_b = parent.layout.gap) !== null && _b !== void 0 ? _b : 12);
+        return Math.max(1, Math.round(requestedUnits * rowUnitWidth));
+    };
+    AutoLayoutService.prototype.canGridChildGrowRightward = function (parentId, childId) {
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid' || !parent.layout)
+            return false;
+        var orderedIds = this.resolveAssignedGridRows(parent).flatMap(function (row) { return row.childIds; });
+        var childIndex = orderedIds.indexOf(childId);
+        return childIndex >= 0 && childIndex < orderedIds.length - 1;
+    };
+    AutoLayoutService.prototype.applyAxisLayoutForParent = function (parentId, parent, children, axis, options) {
+        var _a, _b;
+        var _this = this;
+        var _c, _d, _e, _f;
+        var preserveParentSize = Boolean(options === null || options === void 0 ? void 0 : options.preserveParentSize);
+        var preserveParentWidth = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentWidth);
+        var preserveParentHeight = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentHeight);
+        var layout = parent.layout;
         var padding = this.resolveLayoutPadding(layout);
-        var gap = (_b = layout.gap) !== null && _b !== void 0 ? _b : 12;
-        var align = (_c = layout.align) !== null && _c !== void 0 ? _c : 'center';
-        var childFitMainAxis = (_d = layout.childFitMainAxis) !== null && _d !== void 0 ? _d : 'none';
-        var childFitCrossAxis = (_e = layout.childFitCrossAxis) !== null && _e !== void 0 ? _e : 'none';
-        var childFitMinSize = layout.childFitMinSize;
-        var childFitMaxSize = layout.childFitMaxSize;
+        var gap = (_c = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _c !== void 0 ? _c : 12;
+        var align = (_d = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _d !== void 0 ? _d : 'center';
+        var childFitMainAxis = (_e = layout === null || layout === void 0 ? void 0 : layout.childFitMainAxis) !== null && _e !== void 0 ? _e : 'none';
+        var childFitCrossAxis = (_f = layout === null || layout === void 0 ? void 0 : layout.childFitCrossAxis) !== null && _f !== void 0 ? _f : 'none';
         var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
+        var constraints = this.resolveChildSizeConstraints(layout);
+        var autoResize = this.resolveAutoResizeMode(layout);
         var sorted = __spreadArray([], children, true).sort(function (a, b) {
             var aPos = axis === 'horizontal' ? a.position.x : a.position.y;
             var bPos = axis === 'horizontal' ? b.position.x : b.position.y;
@@ -1974,16 +2238,11 @@ var AutoLayoutService = /** @class */ (function () {
                 ? Math.max(0, availableWidth - gap * gapCount)
                 : Math.max(0, availableHeight - gap * gapCount);
             var distributedMainSizes = childFitMainAxis === 'distribute'
-                ? _this.distributeLayoutSizes(availableMain, sorted.length, sorted.map(function () { var _a, _b; return axis === 'horizontal' ? (_a = childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.width) !== null && _a !== void 0 ? _a : 0 : (_b = childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.height) !== null && _b !== void 0 ? _b : 0; }), sorted.map(function () {
-                    var _a, _b;
-                    return axis === 'horizontal'
-                        ? (_a = childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.width) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY
-                        : (_b = childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.height) !== null && _b !== void 0 ? _b : Number.POSITIVE_INFINITY;
-                }))
+                ? _this.distributeLayoutSizes(availableMain, sorted.length, sorted.map(function () { return (axis === 'horizontal' ? constraints.minWidth : constraints.minHeight); }), sorted.map(function () { return (axis === 'horizontal' ? constraints.maxWidth : constraints.maxHeight); }))
                 : null;
             return sorted.map(function (child, index) {
-                var width = child.size.width;
-                var height = child.size.height;
+                var width = _this.clampLayoutSize(child.size.width, constraints.minWidth, constraints.maxWidth);
+                var height = _this.clampLayoutSize(child.size.height, constraints.minHeight, constraints.maxHeight);
                 if (distributedMainSizes) {
                     if (axis === 'horizontal') {
                         width = distributedMainSizes[index];
@@ -2001,8 +2260,8 @@ var AutoLayoutService = /** @class */ (function () {
                     }
                 }
                 return {
-                    width: _this.clampLayoutSize(width, childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.width, childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.width),
-                    height: _this.clampLayoutSize(height, childFitMinSize === null || childFitMinSize === void 0 ? void 0 : childFitMinSize.height, childFitMaxSize === null || childFitMaxSize === void 0 ? void 0 : childFitMaxSize.height),
+                    width: _this.clampLayoutSize(width, constraints.minWidth, constraints.maxWidth),
+                    height: _this.clampLayoutSize(height, constraints.minHeight, constraints.maxHeight),
                 };
             });
         };
@@ -2012,20 +2271,42 @@ var AutoLayoutService = /** @class */ (function () {
             var totalWidth = fittedSizes.reduce(function (sum, size) { return sum + size.width; }, 0);
             var totalHeight = fittedSizes.reduce(function (sum, size) { return sum + size.height; }, 0);
             if (axis === 'horizontal') {
+                var requiredWidth_1 = padding.x * 2 + totalWidth + gap * gapCount;
+                var requiredHeight_1 = padding.y * 2 + labelReservedTopLane + maxHeight;
                 return {
-                    width: Math.max(parent.size.width, padding.x * 2 + totalWidth + gap * gapCount),
-                    height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + maxHeight),
+                    width: _this.resolveAutoResizedDimension(parent.size.width, requiredWidth_1, autoResize),
+                    height: _this.resolveAutoResizedDimension(parent.size.height, requiredHeight_1, autoResize),
                 };
             }
+            var requiredWidth = padding.x * 2 + maxWidth;
+            var requiredHeight = padding.y * 2 + labelReservedTopLane + totalHeight + gap * gapCount;
             return {
-                width: Math.max(parent.size.width, padding.x * 2 + maxWidth),
-                height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + totalHeight + gap * gapCount),
+                width: _this.resolveAutoResizedDimension(parent.size.width, requiredWidth, autoResize),
+                height: _this.resolveAutoResizedDimension(parent.size.height, requiredHeight, autoResize),
             };
         };
-        var fittedSizes = calculateFittedSizes(parent.size.width, parent.size.height);
-        var _f = resolveParentSize(fittedSizes), newParentWidth = _f.width, newParentHeight = _f.height;
-        fittedSizes = calculateFittedSizes(newParentWidth, newParentHeight);
-        (_a = resolveParentSize(fittedSizes), newParentWidth = _a.width, newParentHeight = _a.height);
+        var preservedParentWidth = Math.max(0, Math.round(parent.size.width));
+        var preservedParentHeight = Math.max(0, Math.round(parent.size.height));
+        var fittedSizes = calculateFittedSizes(preservedParentWidth, preservedParentHeight);
+        var newParentWidth;
+        var newParentHeight;
+        if (preserveParentSize) {
+            newParentWidth = preservedParentWidth;
+            newParentHeight = preservedParentHeight;
+        }
+        else {
+            (_a = resolveParentSize(fittedSizes), newParentWidth = _a.width, newParentHeight = _a.height);
+            if (preserveParentWidth)
+                newParentWidth = preservedParentWidth;
+            if (preserveParentHeight)
+                newParentHeight = preservedParentHeight;
+            fittedSizes = calculateFittedSizes(newParentWidth, newParentHeight);
+            (_b = resolveParentSize(fittedSizes), newParentWidth = _b.width, newParentHeight = _b.height);
+            if (preserveParentWidth)
+                newParentWidth = preservedParentWidth;
+            if (preserveParentHeight)
+                newParentHeight = preservedParentHeight;
+        }
         var availableWidth = Math.max(0, newParentWidth - padding.x * 2);
         var availableHeight = Math.max(0, newParentHeight - padding.y * 2 - labelReservedTopLane);
         var cursorX = padding.x;
@@ -2054,6 +2335,122 @@ var AutoLayoutService = /** @class */ (function () {
                 cursorY += fittedSize.height + (index < sorted.length - 1 ? gap : 0);
             }
         });
+        return this.applyResolvedLayout(parentId, parent, desiredPositions, desiredSizes, {
+            width: newParentWidth,
+            height: newParentHeight,
+        });
+    };
+    AutoLayoutService.prototype.applyGridLayoutForParent = function (parentId, parent, children, options) {
+        var _this = this;
+        var _a, _b;
+        var preserveParentSize = Boolean(options === null || options === void 0 ? void 0 : options.preserveParentSize);
+        var preserveParentWidth = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentWidth);
+        var preserveParentHeight = preserveParentSize || Boolean(options === null || options === void 0 ? void 0 : options.preserveParentHeight);
+        var layout = parent.layout;
+        var padding = this.resolveLayoutPadding(layout);
+        var gap = (_a = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _a !== void 0 ? _a : 12;
+        var align = (_b = layout === null || layout === void 0 ? void 0 : layout.align) !== null && _b !== void 0 ? _b : 'center';
+        var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
+        var constraints = this.resolveChildSizeConstraints(layout);
+        var autoResize = this.resolveAutoResizeMode(layout);
+        var sorted = this.sortGridChildrenForLayout(children);
+        var templateRows = this.normalizeGridTemplate(layout === null || layout === void 0 ? void 0 : layout.gridTemplate);
+        var assignedRows = this.assignChildrenToGridRows(sorted.map(function (child) { return child.id; }), templateRows);
+        var rowMetrics = assignedRows.map(function (row) {
+            var effectiveWeights = row.weights.slice(0, row.childIds.length);
+            var clampedSizes = row.childIds.map(function (childId) {
+                var child = _this.model.getElement(childId);
+                var width = child ? child.size.width : 0;
+                var height = child ? child.size.height : 0;
+                return {
+                    width: _this.clampLayoutSize(width, constraints.minWidth, constraints.maxWidth),
+                    height: _this.clampLayoutSize(height, constraints.minHeight, constraints.maxHeight),
+                };
+            });
+            var rowHeight = clampedSizes.reduce(function (max, size) { return Math.max(max, size.height); }, 0);
+            var totalGap = Math.max(0, clampedSizes.length - 1) * gap;
+            var usedUnits = effectiveWeights.reduce(function (sum, weight) { return sum + _this.clampGridUnits(weight); }, 0);
+            var requiredUnitWidth = effectiveWeights.reduce(function (max, weight, index) {
+                var _a, _b;
+                var slotUnits = Math.max(1, weight !== null && weight !== void 0 ? weight : 1);
+                var width = (_b = (_a = clampedSizes[index]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+                return Math.max(max, width / slotUnits);
+            }, 0);
+            var rowWidth = usedUnits >= GRID_ROW_UNITS
+                ? autoResize === 'grow-shrink'
+                    ? Math.round(requiredUnitWidth * GRID_ROW_UNITS) + totalGap
+                    : clampedSizes.reduce(function (sum, size) { return sum + size.width; }, 0) + totalGap
+                : Math.round(requiredUnitWidth * Math.max(1, usedUnits)) + totalGap;
+            return {
+                row: row,
+                rowHeight: rowHeight,
+                rowWidth: rowWidth,
+                usedUnits: usedUnits,
+                effectiveWeights: effectiveWeights,
+            };
+        });
+        var requiredInnerWidth = rowMetrics.reduce(function (max, metric) { return Math.max(max, metric.rowWidth); }, 0);
+        var requiredInnerHeight = rowMetrics.reduce(function (sum, metric) { return sum + metric.rowHeight; }, 0) + Math.max(0, rowMetrics.length - 1) * gap;
+        var newParentWidth = preserveParentWidth
+            ? Math.max(0, Math.round(parent.size.width))
+            : this.resolveAutoResizedDimension(parent.size.width, padding.x * 2 + requiredInnerWidth, autoResize);
+        var newParentHeight = preserveParentHeight
+            ? Math.max(0, Math.round(parent.size.height))
+            : this.resolveAutoResizedDimension(parent.size.height, padding.y * 2 + labelReservedTopLane + requiredInnerHeight, autoResize);
+        var availableWidth = Math.max(0, newParentWidth - padding.x * 2);
+        var availableHeight = Math.max(0, newParentHeight - padding.y * 2 - labelReservedTopLane);
+        var contentHeight = requiredInnerHeight;
+        var blockOffsetY = align === 'start'
+            ? 0
+            : align === 'end'
+                ? Math.max(0, availableHeight - contentHeight)
+                : Math.max(0, (availableHeight - contentHeight) / 2);
+        var cursorY = padding.y + labelReservedTopLane + blockOffsetY;
+        var desiredPositions = new Map();
+        var desiredSizes = new Map();
+        rowMetrics.forEach(function (metric) {
+            var childCount = metric.row.childIds.length;
+            if (childCount <= 0)
+                return;
+            var totalGap = Math.max(0, childCount - 1) * gap;
+            var rowOuterWidth = metric.usedUnits >= GRID_ROW_UNITS
+                ? availableWidth
+                : Math.min(availableWidth, metric.rowWidth);
+            var rowInnerWidth = Math.max(0, rowOuterWidth - totalGap);
+            var cellWidths = _this.resolveGridCellWidths(rowInnerWidth, metric.effectiveWeights);
+            var rowHeight = metric.rowHeight;
+            var cursorX = padding.x;
+            metric.row.childIds.forEach(function (childId, index) {
+                var _a;
+                var cellWidth = (_a = cellWidths[index]) !== null && _a !== void 0 ? _a : 0;
+                var targetWidth = _this.clampLayoutSize(cellWidth, constraints.minWidth, constraints.maxWidth);
+                var targetHeight = _this.clampLayoutSize(rowHeight, constraints.minHeight, constraints.maxHeight);
+                var offsetX = _this.resolveAlignmentOffset(align, cellWidth, targetWidth);
+                var offsetY = _this.resolveAlignmentOffset(align, rowHeight, targetHeight);
+                desiredSizes.set(childId, { width: targetWidth, height: targetHeight });
+                desiredPositions.set(childId, {
+                    x: cursorX + offsetX,
+                    y: cursorY + offsetY,
+                });
+                cursorX += cellWidth + gap;
+            });
+            cursorY += rowHeight + gap;
+        });
+        return this.applyResolvedLayout(parentId, parent, desiredPositions, desiredSizes, {
+            width: newParentWidth,
+            height: newParentHeight,
+        });
+    };
+    AutoLayoutService.prototype.resolveGridCellWidths = function (rowInnerWidth, weights) {
+        var _this = this;
+        if (weights.length === 0)
+            return [];
+        var safeWeights = weights.map(function (weight) { return _this.clampGridUnits(weight); });
+        return this.distributeWeightedSizes(Math.max(0, rowInnerWidth), safeWeights);
+    };
+    AutoLayoutService.prototype.applyResolvedLayout = function (parentId, parent, desiredPositions, desiredSizes, parentSize) {
+        var _this = this;
+        var _a;
         var patches = [];
         var movedPortIds = [];
         desiredPositions.forEach(function (position, childId) {
@@ -2075,54 +2472,13 @@ var AutoLayoutService = /** @class */ (function () {
                 movedPortIds.push.apply(movedPortIds, nested.movedPortIds);
             }
         });
-        if (newParentWidth !== parent.size.width || newParentHeight !== parent.size.height) {
-            var resizePatches = this.commandQueue.run(createResizeElementCommand(parentId, { width: newParentWidth, height: newParentHeight }), this.model);
+        if (parentSize.width !== parent.size.width || parentSize.height !== parent.size.height) {
+            var resizePatches = this.commandQueue.run(createResizeElementCommand(parentId, parentSize), this.model);
             patches.push.apply(patches, resizePatches);
-            movedPortIds.push.apply(movedPortIds, parent.portIds);
-        }
-        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
-    };
-    AutoLayoutService.prototype.applyLayoutCascade = function (startParentId) {
-        var _a;
-        var patches = [];
-        var movedPortIds = [];
-        var visited = new Set();
-        var current = startParentId;
-        while (current) {
-            if (visited.has(current))
-                break;
-            visited.add(current);
-            var result = this.applyLayoutForParent(current);
-            patches.push.apply(patches, result.patches);
-            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
-            var parent_1 = this.model.getElement(current);
-            current = (_a = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.parentId) !== null && _a !== void 0 ? _a : null;
+            movedPortIds.push.apply(movedPortIds, ((_a = parent.portIds) !== null && _a !== void 0 ? _a : []));
         }
         return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
     };
-    AutoLayoutService.prototype.applyAllLayouts = function () {
-        var _this = this;
-        var layoutParents = Array.from(this.model.elements.values()).filter(function (element) { return element.layout && element.layout.mode !== 'manual'; });
-        var patches = [];
-        var movedPortIds = [];
-        var depth = function (elementId) {
-            var level = 0;
-            var current = _this.model.getElement(elementId);
-            while (current === null || current === void 0 ? void 0 : current.parentId) {
-                level += 1;
-                current = _this.model.getElement(current.parentId);
-            }
-            return level;
-        };
-        layoutParents
-            .sort(function (a, b) { return depth(b.id) - depth(a.id); })
-            .forEach(function (element) {
-            var result = _this.applyLayoutForParent(element.id);
-            patches.push.apply(patches, result.patches);
-            movedPortIds.push.apply(movedPortIds, result.movedPortIds);
-        });
-        return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
-    };
     AutoLayoutService.prototype.resolveLayoutPadding = function (layout) {
         var _a, _b, _c;
         var padding = (_a = layout === null || layout === void 0 ? void 0 : layout.padding) !== null && _a !== void 0 ? _a : 12;
@@ -2133,6 +2489,474 @@ var AutoLayoutService = /** @class */ (function () {
             y: (_c = padding.y) !== null && _c !== void 0 ? _c : 12,
         };
     };
+    AutoLayoutService.prototype.resolveAutoResizeMode = function (layout) {
+        return (layout === null || layout === void 0 ? void 0 : layout.autoResize) === 'grow-shrink' ? 'grow-shrink' : 'grow';
+    };
+    AutoLayoutService.prototype.resolveAutoResizedDimension = function (current, required, mode) {
+        var safeRequired = Math.max(0, Math.round(required));
+        return mode === 'grow-shrink' ? safeRequired : Math.max(Math.max(0, current), safeRequired);
+    };
+    AutoLayoutService.prototype.resolveChildSizeConstraints = function (layout) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var minWidth = Math.max(0, (_c = (_a = layout === null || layout === void 0 ? void 0 : layout.childMinWidth) !== null && _a !== void 0 ? _a : (_b = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0);
+        var minHeight = Math.max(0, (_f = (_d = layout === null || layout === void 0 ? void 0 : layout.childMinHeight) !== null && _d !== void 0 ? _d : (_e = layout === null || layout === void 0 ? void 0 : layout.childFitMinSize) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 0);
+        var resolvedMaxWidth = (_g = layout === null || layout === void 0 ? void 0 : layout.childMaxWidth) !== null && _g !== void 0 ? _g : (_h = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _h === void 0 ? void 0 : _h.width;
+        var resolvedMaxHeight = (_j = layout === null || layout === void 0 ? void 0 : layout.childMaxHeight) !== null && _j !== void 0 ? _j : (_k = layout === null || layout === void 0 ? void 0 : layout.childFitMaxSize) === null || _k === void 0 ? void 0 : _k.height;
+        var maxWidth = Number.isFinite(resolvedMaxWidth !== null && resolvedMaxWidth !== void 0 ? resolvedMaxWidth : Number.NaN)
+            ? Math.max(minWidth, resolvedMaxWidth)
+            : Number.POSITIVE_INFINITY;
+        var maxHeight = Number.isFinite(resolvedMaxHeight !== null && resolvedMaxHeight !== void 0 ? resolvedMaxHeight : Number.NaN)
+            ? Math.max(minHeight, resolvedMaxHeight)
+            : Number.POSITIVE_INFINITY;
+        return { minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight };
+    };
+    AutoLayoutService.prototype.resolveAssignedGridRows = function (parent) {
+        var _a;
+        var children = this.model.getChildren(parent.id);
+        var sorted = this.sortGridChildrenForLayout(children);
+        var templateRows = this.normalizeGridTemplate((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.gridTemplate);
+        return this.assignChildrenToGridRows(sorted.map(function (child) { return child.id; }), templateRows);
+    };
+    AutoLayoutService.prototype.repartitionAssignedGridRows = function (assignedRows, rowIndex, nextCurrentRowCount) {
+        var _a, _b;
+        var allChildIds = assignedRows.flatMap(function (row) { return row.childIds; });
+        var prefixRows = assignedRows.slice(0, rowIndex).map(function (row) { return ({
+            weights: __spreadArray([], row.weights.slice(0, row.childIds.length), true),
+            childIds: __spreadArray([], row.childIds, true),
+        }); });
+        var prefixCount = prefixRows.reduce(function (sum, row) { return sum + row.childIds.length; }, 0);
+        var nextRows = __spreadArray([], prefixRows, true);
+        var currentChildIds = allChildIds.slice(prefixCount, prefixCount + nextCurrentRowCount);
+        if (currentChildIds.length > 0) {
+            nextRows.push({
+                weights: this.fitGridRowWeights((_a = assignedRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.weights, currentChildIds.length),
+                childIds: currentChildIds,
+            });
+        }
+        var cursor = prefixCount + currentChildIds.length;
+        var trailingRowIndex = rowIndex + 1;
+        while (cursor < allChildIds.length) {
+            var sourceRow = assignedRows[Math.min(trailingRowIndex, assignedRows.length - 1)];
+            var sourceCapacity = Math.max(1, (_b = sourceRow === null || sourceRow === void 0 ? void 0 : sourceRow.childIds.length) !== null && _b !== void 0 ? _b : 1);
+            var rowChildIds = allChildIds.slice(cursor, cursor + sourceCapacity);
+            nextRows.push({
+                weights: this.fitGridRowWeights(sourceRow === null || sourceRow === void 0 ? void 0 : sourceRow.weights, rowChildIds.length),
+                childIds: rowChildIds,
+            });
+            cursor += rowChildIds.length;
+            trailingRowIndex += 1;
+        }
+        return nextRows;
+    };
+    AutoLayoutService.prototype.fitGridRowWeights = function (sourceWeights, childCount) {
+        if (childCount <= 0)
+            return [];
+        var base = Array.isArray(sourceWeights) && sourceWeights.length > 0 ? sourceWeights : [1];
+        var normalizedBase = this.normalizeRowWeightsToTwelveUnits(base);
+        if (normalizedBase.length === childCount) {
+            return normalizedBase;
+        }
+        if (normalizedBase.length > childCount) {
+            return this.normalizeRowWeightsToTwelveUnits(normalizedBase.slice(0, childCount));
+        }
+        return this.buildEqualGridUnits(childCount);
+    };
+    AutoLayoutService.prototype.gridRowSnapshotsEqual = function (a, b) {
+        var _a, _b, _c, _d;
+        if (a.length !== b.length)
+            return false;
+        for (var index = 0; index < a.length; index += 1) {
+            var left = (_b = (_a = a[index]) === null || _a === void 0 ? void 0 : _a.childIds) !== null && _b !== void 0 ? _b : [];
+            var right = (_d = (_c = b[index]) === null || _c === void 0 ? void 0 : _c.childIds) !== null && _d !== void 0 ? _d : [];
+            if (left.length !== right.length)
+                return false;
+            for (var childIndex = 0; childIndex < left.length; childIndex += 1) {
+                if (left[childIndex] !== right[childIndex])
+                    return false;
+            }
+        }
+        return true;
+    };
+    AutoLayoutService.prototype.normalizeGridTemplate = function (template) {
+        var slots = this.normalizeGridSlotUnits(template);
+        var rows = [];
+        var currentRow = [];
+        var currentUnits = 0;
+        slots.forEach(function (slotUnits) {
+            if (currentRow.length > 0 && currentUnits + slotUnits > GRID_ROW_UNITS) {
+                rows.push({ weights: __spreadArray([], currentRow, true) });
+                currentRow = [];
+                currentUnits = 0;
+            }
+            currentRow.push(slotUnits);
+            currentUnits += slotUnits;
+        });
+        if (currentRow.length > 0) {
+            rows.push({ weights: __spreadArray([], currentRow, true) });
+        }
+        if (rows.length === 0) {
+            rows.push({ weights: [GRID_ROW_UNITS] });
+        }
+        return rows;
+    };
+    AutoLayoutService.prototype.assignChildrenToGridRows = function (childIds, templateRows) {
+        var assigned = [];
+        var cursor = 0;
+        templateRows.forEach(function (rowTemplate) {
+            if (cursor >= childIds.length)
+                return;
+            var rowChildren = childIds.slice(cursor, cursor + rowTemplate.weights.length);
+            if (rowChildren.length === 0)
+                return;
+            assigned.push({
+                weights: rowTemplate.weights,
+                childIds: rowChildren,
+            });
+            cursor += rowChildren.length;
+        });
+        while (cursor < childIds.length) {
+            var rowChildren = childIds.slice(cursor, cursor + 1);
+            assigned.push({
+                weights: [GRID_ROW_UNITS],
+                childIds: rowChildren,
+            });
+            cursor += rowChildren.length;
+        }
+        return assigned;
+    };
+    AutoLayoutService.prototype.resolveGridChildSlotState = function (parentId, childId) {
+        var _this = this;
+        var _a;
+        var parent = this.model.getElement(parentId);
+        if (!parent || ((_a = parent.layout) === null || _a === void 0 ? void 0 : _a.mode) !== 'grid')
+            return null;
+        var assignedRows = this.resolveAssignedGridRows(parent);
+        if (assignedRows.length === 0)
+            return null;
+        var orderedChildIds = assignedRows.flatMap(function (row) { return row.childIds; });
+        var slotWeights = assignedRows.flatMap(function (row) { return row.weights.slice(0, row.childIds.length).map(function (weight) { return _this.clampGridUnits(weight); }); });
+        var childFlatIndex = orderedChildIds.indexOf(childId);
+        if (childFlatIndex < 0)
+            return null;
+        var rowIndex = assignedRows.findIndex(function (row) { return row.childIds.includes(childId); });
+        if (rowIndex < 0)
+            return null;
+        return { assignedRows: assignedRows, orderedChildIds: orderedChildIds, slotWeights: slotWeights, childFlatIndex: childFlatIndex, rowIndex: rowIndex };
+    };
+    AutoLayoutService.prototype.packGridRowsFromSlots = function (childIds, slotWeights) {
+        var _this = this;
+        var rows = [];
+        var currentChildIds = [];
+        var currentWeights = [];
+        var currentUnits = 0;
+        childIds.forEach(function (childId, index) {
+            var _a;
+            var slotUnits = _this.clampGridUnits((_a = slotWeights[index]) !== null && _a !== void 0 ? _a : GRID_ROW_UNITS);
+            if (currentChildIds.length > 0 && currentUnits + slotUnits > GRID_ROW_UNITS) {
+                rows.push({ childIds: __spreadArray([], currentChildIds, true), weights: __spreadArray([], currentWeights, true) });
+                currentChildIds = [];
+                currentWeights = [];
+                currentUnits = 0;
+            }
+            currentChildIds.push(childId);
+            currentWeights.push(slotUnits);
+            currentUnits += slotUnits;
+        });
+        if (currentChildIds.length > 0) {
+            rows.push({ childIds: __spreadArray([], currentChildIds, true), weights: __spreadArray([], currentWeights, true) });
+        }
+        return rows;
+    };
+    AutoLayoutService.prototype.resolveRequestedGridUnits = function (parent, currentRow, requestedWidth) {
+        var _a;
+        if (!parent.layout || parent.layout.mode !== 'grid' || !currentRow)
+            return GRID_ROW_UNITS;
+        var rowUnitWidth = this.resolveGridRowUnitWidth(Math.max(0, parent.size.width - this.resolveLayoutPadding(parent.layout).x * 2), currentRow.childIds.length, (_a = parent.layout.gap) !== null && _a !== void 0 ? _a : 12);
+        if (rowUnitWidth <= 0)
+            return GRID_ROW_UNITS;
+        return this.clampGridUnits(Math.round(requestedWidth / rowUnitWidth));
+    };
+    AutoLayoutService.prototype.sortGridChildrenForLayout = function (children) {
+        return __spreadArray([], children, true).sort(function (a, b) {
+            if (a.position.y === b.position.y) {
+                if (a.position.x === b.position.x)
+                    return a.id.localeCompare(b.id);
+                return a.position.x - b.position.x;
+            }
+            return a.position.y - b.position.y;
+        });
+    };
+    AutoLayoutService.prototype.resolveRightwardGridOverflowChange = function (params) {
+        var _a, _b;
+        var assignedRows = params.assignedRows, rowIndex = params.rowIndex, childIndex = params.childIndex, requestedWidth = params.requestedWidth, availableWidth = params.availableWidth, gap = params.gap, parentLayout = params.parentLayout, parentId = params.parentId, childId = params.childId;
+        var currentRow = assignedRows[rowIndex];
+        if (!currentRow || childIndex < 0 || childIndex >= currentRow.childIds.length - 1)
+            return null;
+        var rowUnitWidth = this.resolveGridRowUnitWidth(availableWidth, currentRow.childIds.length, gap);
+        if (rowUnitWidth <= 0)
+            return null;
+        var currentUnits = (_b = (_a = currentRow.weights[childIndex]) !== null && _a !== void 0 ? _a : this.normalizeRowWeightsToTwelveUnits(currentRow.weights)[childIndex]) !== null && _b !== void 0 ? _b : 1;
+        var requestedUnits = this.clampLayoutSize(Math.round(requestedWidth / rowUnitWidth), currentUnits + 1, GRID_ROW_UNITS - 1);
+        var leftWeights = currentRow.weights.slice(0, childIndex);
+        var leftSum = leftWeights.reduce(function (sum, value) { return sum + value; }, 0);
+        var rightWeights = currentRow.weights.slice(childIndex + 1);
+        var rightIds = currentRow.childIds.slice(childIndex + 1);
+        var followingRows = assignedRows.slice(rowIndex + 1);
+        for (var retainCount = rightIds.length - 1; retainCount >= 0; retainCount -= 1) {
+            var maxTargetUnits = GRID_ROW_UNITS - leftSum - retainCount;
+            if (requestedUnits > maxTargetUnits)
+                continue;
+            var retainedIds = rightIds.slice(0, retainCount);
+            var retainedWeights = rightWeights.slice(0, retainCount);
+            var overflowIds = __spreadArray(__spreadArray([], rightIds.slice(retainCount), true), followingRows.flatMap(function (row) { return row.childIds; }), true);
+            var remainingUnits = GRID_ROW_UNITS - leftSum - requestedUnits;
+            var nextCurrentWeights = __spreadArray(__spreadArray(__spreadArray([], leftWeights, true), [
+                requestedUnits
+            ], false), this.distributeUnitsWithMinimums(remainingUnits, retainedWeights), true);
+            var nextRows = assignedRows.slice(0, rowIndex).map(function (row) { return ({
+                weights: __spreadArray([], row.weights, true),
+                childIds: __spreadArray([], row.childIds, true),
+            }); });
+            nextRows.push({
+                weights: nextCurrentWeights,
+                childIds: __spreadArray(__spreadArray([], currentRow.childIds.slice(0, childIndex + 1), true), retainedIds, true),
+            });
+            var trailingRows = this.reflowTrailingGridRows(overflowIds, followingRows, currentRow.weights.length);
+            var allRows = __spreadArray(__spreadArray([], nextRows, true), trailingRows, true);
+            var beforeRows = assignedRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+            var afterRows = allRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); });
+            if (this.gridRowSnapshotsEqual(beforeRows, afterRows) && this.gridWeightsEqual(assignedRows, allRows)) {
+                return null;
+            }
+            return {
+                parentId: parentId,
+                triggerChildId: childId,
+                reason: 'child-resize-redistribute',
+                beforeRows: beforeRows,
+                afterRows: afterRows,
+                nextLayout: __assign(__assign({}, parentLayout), { gridTemplate: this.flattenAssignedRowsToGridTemplate(allRows) }),
+            };
+        }
+        return null;
+    };
+    AutoLayoutService.prototype.resolveSameRowGridUnitResizeChange = function (params) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        var assignedRows = params.assignedRows, rowIndex = params.rowIndex, childIndex = params.childIndex, requestedWidth = params.requestedWidth, availableWidth = params.availableWidth, gap = params.gap, parentLayout = params.parentLayout, parentId = params.parentId, childId = params.childId;
+        var currentRow = assignedRows[rowIndex];
+        if (!currentRow || currentRow.childIds.length <= 1)
+            return null;
+        var donorIndices = Array.from({ length: Math.max(0, currentRow.childIds.length - childIndex - 1) }, function (_, index) { return childIndex + 1 + index; });
+        if (donorIndices.length === 0)
+            return null;
+        var rowUnitWidth = this.resolveGridRowUnitWidth(availableWidth, currentRow.childIds.length, gap);
+        if (rowUnitWidth <= 0)
+            return null;
+        var currentUnits = (_b = (_a = currentRow.weights[childIndex]) !== null && _a !== void 0 ? _a : this.normalizeRowWeightsToTwelveUnits(currentRow.weights)[childIndex]) !== null && _b !== void 0 ? _b : 1;
+        var requestedUnits = this.clampLayoutSize(Math.round(requestedWidth / rowUnitWidth), 1, GRID_ROW_UNITS - 1);
+        if (requestedUnits === currentUnits)
+            return null;
+        var nextWeights = __spreadArray([], currentRow.weights, true);
+        var delta = requestedUnits - currentUnits;
+        if (delta > 0) {
+            for (var _i = 0, donorIndices_1 = donorIndices; _i < donorIndices_1.length; _i++) {
+                var donorIndex = donorIndices_1[_i];
+                if (delta <= 0)
+                    break;
+                var donorCapacity = Math.max(0, ((_c = nextWeights[donorIndex]) !== null && _c !== void 0 ? _c : 1) - 1);
+                var transfer = Math.min(delta, donorCapacity);
+                nextWeights[donorIndex] -= transfer;
+                nextWeights[childIndex] += transfer;
+                delta -= transfer;
+            }
+        }
+        else {
+            var release = Math.abs(delta);
+            for (var _e = 0, donorIndices_2 = donorIndices; _e < donorIndices_2.length; _e++) {
+                var donorIndex = donorIndices_2[_e];
+                if (release <= 0)
+                    break;
+                var transfer = release;
+                nextWeights[donorIndex] += transfer;
+                nextWeights[childIndex] -= transfer;
+                release -= transfer;
+            }
+        }
+        if (delta > 0)
+            return null;
+        if (((_d = nextWeights[childIndex]) !== null && _d !== void 0 ? _d : currentUnits) === currentUnits)
+            return null;
+        var nextRows = assignedRows.map(function (row, index) {
+            return index === rowIndex
+                ? {
+                    weights: _this.normalizeRowWeightsToTwelveUnits(nextWeights),
+                    childIds: __spreadArray([], row.childIds, true),
+                }
+                : { weights: __spreadArray([], row.weights, true), childIds: __spreadArray([], row.childIds, true) };
+        });
+        return {
+            parentId: parentId,
+            triggerChildId: childId,
+            reason: 'child-resize-redistribute',
+            beforeRows: assignedRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); }),
+            afterRows: nextRows.map(function (row) { return ({ childIds: __spreadArray([], row.childIds, true) }); }),
+            nextLayout: __assign(__assign({}, parentLayout), { gridTemplate: this.flattenAssignedRowsToGridTemplate(nextRows) }),
+        };
+    };
+    AutoLayoutService.prototype.splitGridRowIntoTwelveUnits = function (assignedRows, rowIndex, childId, requestedWidth, availableWidth, gap) {
+        var _a;
+        var currentRow = assignedRows[rowIndex];
+        var nextRow = assignedRows[rowIndex + 1];
+        if (!currentRow || !nextRow || currentRow.childIds.length !== 1 || nextRow.childIds.length === 0) {
+            return [];
+        }
+        var rowUnitWidth = this.resolveGridRowUnitWidth(availableWidth, 2, gap);
+        var requestedUnits = this.clampLayoutSize(Math.round(requestedWidth / rowUnitWidth), 1, GRID_ROW_UNITS - 1);
+        var nextRows = assignedRows.slice(0, rowIndex).map(function (row) { return ({
+            weights: __spreadArray([], row.weights, true),
+            childIds: __spreadArray([], row.childIds, true),
+        }); });
+        nextRows.push({
+            weights: [requestedUnits, GRID_ROW_UNITS - requestedUnits],
+            childIds: [childId, nextRow.childIds[0]],
+        });
+        var trailingRows = [];
+        var remainingChildIds = __spreadArray(__spreadArray([], nextRow.childIds.slice(1), true), assignedRows.slice(rowIndex + 2).flatMap(function (row) { return row.childIds; }), true);
+        var cursor = 0;
+        var seedRows = assignedRows.slice(rowIndex + 1);
+        var seedIndex = 0;
+        while (cursor < remainingChildIds.length) {
+            var seed = seedRows[Math.min(seedIndex, seedRows.length - 1)];
+            var capacity = Math.max(1, (_a = seed === null || seed === void 0 ? void 0 : seed.childIds.length) !== null && _a !== void 0 ? _a : 1);
+            var rowChildIds = remainingChildIds.slice(cursor, cursor + capacity);
+            trailingRows.push({
+                weights: this.fitGridRowWeights(seed === null || seed === void 0 ? void 0 : seed.weights, rowChildIds.length),
+                childIds: rowChildIds,
+            });
+            cursor += rowChildIds.length;
+            seedIndex += 1;
+        }
+        return __spreadArray(__spreadArray([], nextRows, true), trailingRows, true);
+    };
+    AutoLayoutService.prototype.reflowTrailingGridRows = function (childIds, seedRows, fallbackColumnCount) {
+        var _a;
+        if (childIds.length === 0)
+            return [];
+        var trailingRows = [];
+        var cursor = 0;
+        var seedIndex = 0;
+        var normalizedSeedRows = seedRows.length > 0 ? seedRows : [{ weights: this.buildEqualGridUnits(Math.max(1, fallbackColumnCount)), childIds: [] }];
+        while (cursor < childIds.length) {
+            var seed = normalizedSeedRows[Math.min(seedIndex, normalizedSeedRows.length - 1)];
+            var capacity = Math.max(1, (_a = seed === null || seed === void 0 ? void 0 : seed.weights.length) !== null && _a !== void 0 ? _a : fallbackColumnCount);
+            var rowChildIds = childIds.slice(cursor, cursor + capacity);
+            trailingRows.push({
+                weights: this.fitGridRowWeights(seed === null || seed === void 0 ? void 0 : seed.weights, rowChildIds.length),
+                childIds: rowChildIds,
+            });
+            cursor += rowChildIds.length;
+            seedIndex += 1;
+        }
+        return trailingRows;
+    };
+    AutoLayoutService.prototype.flattenAssignedRowsToGridTemplate = function (rows) {
+        var _this = this;
+        return rows.flatMap(function (row) { return _this.normalizeRowWeightsToTwelveUnits(row.weights.slice(0, row.childIds.length)); });
+    };
+    AutoLayoutService.prototype.buildEqualGridUnits = function (count) {
+        if (count <= 0)
+            return [];
+        var base = Math.floor(GRID_ROW_UNITS / count);
+        var remainder = GRID_ROW_UNITS - base * count;
+        return Array.from({ length: count }, function (_, index) { return base + (index < remainder ? 1 : 0); });
+    };
+    AutoLayoutService.prototype.normalizeRowWeightsToTwelveUnits = function (weights) {
+        var safeWeights = weights.map(function (weight) { return (Number.isFinite(weight) && weight > 0 ? weight : 1); });
+        if (safeWeights.length === 0)
+            return [GRID_ROW_UNITS];
+        if (safeWeights.length === 1)
+            return [GRID_ROW_UNITS];
+        var distributed = this.distributeWeightedSizes(GRID_ROW_UNITS, safeWeights);
+        var normalized = distributed.map(function (value) { return Math.max(1, value); });
+        var total = normalized.reduce(function (sum, value) { return sum + value; }, 0);
+        if (total === GRID_ROW_UNITS)
+            return normalized;
+        if (total < GRID_ROW_UNITS) {
+            var cursor_1 = 0;
+            while (total < GRID_ROW_UNITS) {
+                normalized[cursor_1 % normalized.length] += 1;
+                total += 1;
+                cursor_1 += 1;
+            }
+            return normalized;
+        }
+        var cursor = normalized.length - 1;
+        while (total > GRID_ROW_UNITS && cursor >= 0) {
+            if (normalized[cursor] > 1) {
+                normalized[cursor] -= 1;
+                total -= 1;
+            }
+            else {
+                cursor -= 1;
+            }
+            if (cursor < 0 && total > GRID_ROW_UNITS) {
+                cursor = normalized.length - 1;
+            }
+        }
+        return normalized;
+    };
+    AutoLayoutService.prototype.normalizeGridSlotUnits = function (template) {
+        var _this = this;
+        var slots = [];
+        (template !== null && template !== void 0 ? template : []).forEach(function (entry) {
+            if (typeof entry === 'number') {
+                if (Number.isFinite(entry) && entry > 0) {
+                    slots.push(_this.clampGridUnits(entry));
+                }
+                return;
+            }
+            if (!Array.isArray(entry))
+                return;
+            entry.forEach(function (value) {
+                if (Number.isFinite(value) && value > 0) {
+                    slots.push(_this.clampGridUnits(value));
+                }
+            });
+        });
+        return slots;
+    };
+    AutoLayoutService.prototype.clampGridUnits = function (value) {
+        return Math.max(1, Math.min(GRID_ROW_UNITS, Math.round(value)));
+    };
+    AutoLayoutService.prototype.distributeUnitsWithMinimums = function (totalUnits, seedWeights) {
+        if (seedWeights.length === 0)
+            return [];
+        var minimumTotal = seedWeights.length;
+        var clampedTotal = Math.max(minimumTotal, totalUnits);
+        var distributed = this.distributeWeightedSizes(clampedTotal - minimumTotal, seedWeights).map(function (value) { return value + 1; });
+        return distributed;
+    };
+    AutoLayoutService.prototype.gridWeightsEqual = function (leftRows, rightRows) {
+        var _a, _b, _c, _d;
+        if (leftRows.length !== rightRows.length)
+            return false;
+        for (var rowIndex = 0; rowIndex < leftRows.length; rowIndex += 1) {
+            var left = (_b = (_a = leftRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.weights) !== null && _b !== void 0 ? _b : [];
+            var right = (_d = (_c = rightRows[rowIndex]) === null || _c === void 0 ? void 0 : _c.weights) !== null && _d !== void 0 ? _d : [];
+            if (left.length !== right.length)
+                return false;
+            for (var index = 0; index < left.length; index += 1) {
+                if (left[index] !== right[index])
+                    return false;
+            }
+        }
+        return true;
+    };
+    AutoLayoutService.prototype.resolveGridRowUnitWidth = function (availableWidth, childCount, gap) {
+        var totalGap = Math.max(0, childCount - 1) * gap;
+        var rowInnerWidth = Math.max(0, availableWidth - totalGap);
+        return rowInnerWidth / GRID_ROW_UNITS;
+    };
     AutoLayoutService.prototype.resolveLabelReservedTopLane = function (parentId, layout) {
         var _a, _b, _c, _d;
         var policy = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace;
@@ -2172,11 +2996,43 @@ var AutoLayoutService = /** @class */ (function () {
         });
         return Math.max(0, lane);
     };
+    AutoLayoutService.prototype.resolveAlignmentOffset = function (align, container, content) {
+        var delta = Math.max(0, container - content);
+        if (align === 'start')
+            return 0;
+        if (align === 'end')
+            return delta;
+        return delta / 2;
+    };
     AutoLayoutService.prototype.clampLayoutSize = function (value, min, max) {
         var minValue = min !== null && min !== void 0 ? min : 0;
         var maxValue = max !== null && max !== void 0 ? max : Number.POSITIVE_INFINITY;
         return Math.max(minValue, Math.min(maxValue, value));
     };
+    AutoLayoutService.prototype.distributeWeightedSizes = function (total, weights) {
+        if (weights.length === 0)
+            return [];
+        var safeTotal = Math.max(0, total);
+        var normalized = weights.map(function (weight) { return (Number.isFinite(weight) && weight > 0 ? weight : 1); });
+        var sumWeights = normalized.reduce(function (sum, weight) { return sum + weight; }, 0);
+        if (sumWeights <= 0) {
+            return Array.from({ length: normalized.length }, function () { return 0; });
+        }
+        var raw = normalized.map(function (weight) { return (safeTotal * weight) / sumWeights; });
+        var floored = raw.map(function (value) { return Math.floor(value); });
+        var remainder = Math.max(0, Math.round(safeTotal - floored.reduce(function (sum, value) { return sum + value; }, 0)));
+        var fractions = raw
+            .map(function (value, index) { return ({ index: index, fraction: value - floored[index] }); })
+            .sort(function (a, b) { return b.fraction - a.fraction || a.index - b.index; });
+        var cursor = 0;
+        while (remainder > 0 && fractions.length > 0) {
+            var index = fractions[cursor % fractions.length].index;
+            floored[index] += 1;
+            remainder -= 1;
+            cursor += 1;
+        }
+        return floored;
+    };
     AutoLayoutService.prototype.distributeLayoutSizes = function (total, count, minValues, maxValues) {
         if (count <= 0)
             return [];
@@ -2395,6 +3251,35 @@ var LinkRoutingService = /** @class */ (function () {
         });
         return patches;
     };
+    LinkRoutingService.prototype.refreshLinksForRedraw = function (options) {
+        var _this = this;
+        var includeManual = Boolean(options === null || options === void 0 ? void 0 : options.includeManual);
+        var patches = [];
+        var links = Array.from(this.model.links.values()).sort(function (a, b) { return a.id.localeCompare(b.id); });
+        links.forEach(function (link) {
+            var _a;
+            if (link.points.length < 2)
+                return;
+            var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
+            if (routing === 'manual' && !includeManual)
+                return;
+            var endpoints = _this.resolveLinkEndpoints(link);
+            var source = endpoints.source;
+            var target = endpoints.target;
+            if (!source || !target)
+                return;
+            var first = link.points[0];
+            var last = link.points[link.points.length - 1];
+            var sourceChanged = !_this.pointsEqual(first, source);
+            var targetChanged = !_this.pointsEqual(last, target);
+            if (!sourceChanged || !targetChanged)
+                return;
+            var points = _this.resolveLinkPointsForUpdate(link, source, target);
+            var linkPatches = _this.commandQueue.run(createUpdateLinkCommand(link.id, { points: points }), _this.model);
+            patches.push.apply(patches, linkPatches);
+        });
+        return patches;
+    };
     LinkRoutingService.prototype.getPortLinkWorldPosition = function (portId, options) {
         var _a;
         var port = this.model.getPort(portId);
@@ -2472,6 +3357,9 @@ var LinkRoutingService = /** @class */ (function () {
             return __assign({}, point);
         });
     };
+    LinkRoutingService.prototype.pointsEqual = function (a, b) {
+        return Math.abs(a.x - b.x) <= POSITION_EPSILON$1 && Math.abs(a.y - b.y) <= POSITION_EPSILON$1;
+    };
     LinkRoutingService.prototype.buildRouteContext = function (link) {
         var _this = this;
         var _a, _b;
@@ -2494,6 +3382,8 @@ var LinkRoutingService = /** @class */ (function () {
         var targetOnEdge = (_b = targetEndpointGeometry === null || targetEndpointGeometry === void 0 ? void 0 : targetEndpointGeometry.onEdge) !== null && _b !== void 0 ? _b : false;
         var ancestorExclusions = this.getAncestorExclusions(sourceElementId, targetElementId);
         var _c = this.resolveRouteBounds(sourceElementId, targetElementId), bounds = _c.bounds, boundsElementId = _c.boundsElementId;
+        var commonAncestorCorridor = this.resolveCommonAncestorCorridorHint(sourceElementId, targetElementId);
+        var effectiveBounds = bounds !== null && bounds !== void 0 ? bounds : commonAncestorCorridor === null || commonAncestorCorridor === void 0 ? void 0 : commonAncestorCorridor.bounds;
         var forcedObstacles = new Set();
         if (sourceElementId && sourceOnEdge)
             forcedObstacles.add(sourceElementId);
@@ -2536,7 +3426,7 @@ var LinkRoutingService = /** @class */ (function () {
             sourcePortId: link.sourcePortId,
             targetPortId: link.targetPortId,
             obstacles: obstacles,
-            bounds: bounds,
+            bounds: effectiveBounds,
             sourceEndpoint: sourcePosition && sourceRect
                 ? {
                     elementId: sourceElementId !== null && sourceElementId !== void 0 ? sourceElementId : undefined,
@@ -2551,6 +3441,48 @@ var LinkRoutingService = /** @class */ (function () {
                     onEdgeSide: targetEndpointGeometry === null || targetEndpointGeometry === void 0 ? void 0 : targetEndpointGeometry.onEdgeSide,
                 }
                 : undefined,
+            commonAncestorCorridor: commonAncestorCorridor,
+        };
+    };
+    LinkRoutingService.prototype.resolveCommonAncestorCorridorHint = function (sourceElementId, targetElementId) {
+        if (!sourceElementId || !targetElementId)
+            return undefined;
+        if (sourceElementId === targetElementId)
+            return undefined;
+        var sourceElement = this.model.getElement(sourceElementId);
+        var targetElement = this.model.getElement(targetElementId);
+        if (!sourceElement || !targetElement)
+            return undefined;
+        if (sourceElement.parentId === targetElement.parentId)
+            return undefined;
+        if (this.isAncestorOf(sourceElementId, targetElementId) || this.isAncestorOf(targetElementId, sourceElementId)) {
+            return undefined;
+        }
+        var commonAncestorId = this.getFirstCommonAncestorId(sourceElementId, targetElementId);
+        if (!commonAncestorId)
+            return undefined;
+        var commonBounds = this.getElementRect(commonAncestorId);
+        if (!commonBounds)
+            return undefined;
+        var sourceBranchId = this.resolveImmediateChildUnderAncestor(sourceElementId, commonAncestorId);
+        var targetBranchId = this.resolveImmediateChildUnderAncestor(targetElementId, commonAncestorId);
+        if (!sourceBranchId || !targetBranchId || sourceBranchId === targetBranchId)
+            return undefined;
+        var sourceBranchRect = this.getElementRect(sourceBranchId);
+        var targetBranchRect = this.getElementRect(targetBranchId);
+        if (!sourceBranchRect || !targetBranchRect)
+            return undefined;
+        var horizontalSeparation = sourceBranchRect.x + sourceBranchRect.width <= targetBranchRect.x ||
+            targetBranchRect.x + targetBranchRect.width <= sourceBranchRect.x;
+        var axis = horizontalSeparation ? 'horizontal' : 'vertical';
+        return {
+            ancestorId: commonAncestorId,
+            bounds: commonBounds,
+            sourceBranchId: sourceBranchId,
+            targetBranchId: targetBranchId,
+            sourceBranchRect: sourceBranchRect,
+            targetBranchRect: targetBranchRect,
+            axis: axis,
         };
     };
     LinkRoutingService.prototype.resolveEndpointGeometry = function (point, rect, elementId, oppositePoint) {
@@ -2559,11 +3491,18 @@ var LinkRoutingService = /** @class */ (function () {
         var onEdge = (shape === null || shape === void 0 ? void 0 : shape.projectToBorder)
             ? this.isPointOnProjectedBorder(point, rect, shape.projectToBorder, EDGE_TOLERANCE)
             : this.isPointOnRectEdge(point, rect, EDGE_TOLERANCE);
-        var onEdgeSide = onEdge ? (_b = (_a = shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide) === null || _a === void 0 ? void 0 : _a.call(shape, point, rect)) !== null && _b !== void 0 ? _b : this.resolveEdgeSide(point, rect) : undefined;
+        var projectedBorderPoint = (shape === null || shape === void 0 ? void 0 : shape.projectToBorder)
+            ? shape.projectToBorder(point, rect)
+            : projectPointToBoundary(point, rect, 'rect');
+        var projectedBoundaryEquivalent = !onEdge && !this.isPointInsideRect(point, rect, EDGE_TOLERANCE);
+        var sidePoint = projectedBoundaryEquivalent ? projectedBorderPoint : point;
+        var onEdgeSide = onEdge || projectedBoundaryEquivalent
+            ? (_b = (_a = shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide) === null || _a === void 0 ? void 0 : _a.call(shape, sidePoint, rect)) !== null && _b !== void 0 ? _b : this.resolveEdgeSide(sidePoint, rect)
+            : undefined;
         if (onEdgeSide && oppositePoint) {
             onEdgeSide = this.resolveCornerTieBreakSide(point, rect, oppositePoint, onEdgeSide);
         }
-        return { onEdge: onEdge, onEdgeSide: onEdgeSide };
+        return { onEdge: onEdge || projectedBoundaryEquivalent, onEdgeSide: onEdgeSide };
     };
     LinkRoutingService.prototype.resolveCornerTieBreakSide = function (point, rect, oppositePoint, currentSide) {
         var onLeft = Math.abs(point.x - rect.x) <= EDGE_TOLERANCE;
@@ -2655,6 +3594,34 @@ var LinkRoutingService = /** @class */ (function () {
         }
         return chain;
     };
+    LinkRoutingService.prototype.getFirstCommonAncestorId = function (sourceElementId, targetElementId) {
+        var sourceChain = this.getAncestorChain(sourceElementId);
+        var targetSet = new Set(this.getAncestorChain(targetElementId));
+        for (var i = 0; i < sourceChain.length; i += 1) {
+            var candidate = sourceChain[i];
+            if (targetSet.has(candidate))
+                return candidate;
+        }
+        return null;
+    };
+    LinkRoutingService.prototype.resolveImmediateChildUnderAncestor = function (elementId, ancestorId) {
+        var _a;
+        if (elementId === ancestorId)
+            return null;
+        var currentId = elementId;
+        var previousId = null;
+        while (currentId) {
+            var current = this.model.getElement(currentId);
+            if (!current)
+                return null;
+            if (current.id === ancestorId) {
+                return previousId;
+            }
+            previousId = current.id;
+            currentId = (_a = current.parentId) !== null && _a !== void 0 ? _a : null;
+        }
+        return null;
+    };
     LinkRoutingService.prototype.getAncestorExclusions = function (sourceElementId, targetElementId) {
         var exclusions = new Set();
         if (sourceElementId) {
@@ -2697,6 +3664,12 @@ var LinkRoutingService = /** @class */ (function () {
         var onBottom = Math.abs(point.y - (rect.y + rect.height)) <= tolerance;
         return onLeft || onRight || onTop || onBottom;
     };
+    LinkRoutingService.prototype.isPointInsideRect = function (point, rect, tolerance) {
+        return (point.x >= rect.x - tolerance &&
+            point.x <= rect.x + rect.width + tolerance &&
+            point.y >= rect.y - tolerance &&
+            point.y <= rect.y + rect.height + tolerance);
+    };
     LinkRoutingService.prototype.resolveEdgeSide = function (point, rect) {
         var distances = [
             { side: 'left', value: Math.abs(point.x - rect.x) },
@@ -2741,8 +3714,8 @@ var MutationPipeline = /** @class */ (function () {
 }());
 
 var clampToRect = function (point, rect) { return ({
-    x: clamp(point.x, rect.x, rect.x + rect.width),
-    y: clamp(point.y, rect.y, rect.y + rect.height),
+    x: clamp$2(point.x, rect.x, rect.x + rect.width),
+    y: clamp$2(point.y, rect.y, rect.y + rect.height),
 }); };
 var snapToRectBorder = function (point, rect) {
     var clamped = clampToRect(point, rect);
@@ -2761,10 +3734,41 @@ var snapToRectBorder = function (point, rect) {
 };
 var POSITION_EPSILON = 1e-6;
 var ANCHOR_PRESET_FALLBACK_ORDER = ['vertices', 'cardinal'];
+var DEFAULT_LINK_COLOR_POOL = [
+    '#1f77b4',
+    '#ff7f0e',
+    '#2ca02c',
+    '#d62728',
+    '#9467bd',
+    '#8c564b',
+    '#e377c2',
+    '#7f7f7f',
+    '#bcbd22',
+    '#17becf',
+    '#4e79a7',
+    '#f28e2b',
+    '#e15759',
+    '#76b7b2',
+    '#59a14f',
+    '#edc948',
+    '#b07aa1',
+    '#ff9da7',
+    '#9c755f',
+    '#bab0ab',
+];
+var normalizeLinkColorPoolPolicy = function (policy) {
+    var _a;
+    var enabled = Boolean(policy === null || policy === void 0 ? void 0 : policy.enabled);
+    var normalizedColors = ((_a = policy === null || policy === void 0 ? void 0 : policy.colors) !== null && _a !== void 0 ? _a : [])
+        .map(function (color) { return color.trim(); })
+        .filter(function (color) { return color.length > 0; });
+    var colors = normalizedColors.length > 0 ? normalizedColors : __spreadArray([], DEFAULT_LINK_COLOR_POOL, true);
+    return { enabled: enabled, colors: colors };
+};
 var DiagramEngine = /** @class */ (function () {
     function DiagramEngine(config) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         this.model = new DiagramModel();
         this.events = new EventBus();
         this.commandQueue = new CommandQueue();
@@ -2788,6 +3792,11 @@ var DiagramEngine = /** @class */ (function () {
             router: router,
             shapeRegistry: this.shapeRegistry,
         });
+        this.linkRouteRefreshPolicy = {
+            mode: (_g = (_f = config.linkRouteRefreshPolicy) === null || _f === void 0 ? void 0 : _f.mode) !== null && _g !== void 0 ? _g : 'mutation-only',
+            includeManual: Boolean((_h = config.linkRouteRefreshPolicy) === null || _h === void 0 ? void 0 : _h.includeManual),
+        };
+        this.linkColorPoolPolicy = normalizeLinkColorPoolPolicy(config.linkColorPoolPolicy);
         this.mutationPipeline = new MutationPipeline({
             routeLinksWithEmptyPoints: function () { return _this.routeLinksWithEmptyPoints(); },
             reprojectBorderPortsForResizedElements: function (patches) { return _this.reprojectBorderPortsForResizedElements(patches); },
@@ -2843,9 +3852,7 @@ var DiagramEngine = /** @class */ (function () {
         });
         this.emitChange(allPatches);
     };
-    DiagramEngine.prototype.moveElementTo = function (id, x, y) {
-        var _this = this;
-        var oldWorld = this.model.getElementWorldPosition(id);
+    DiagramEngine.prototype.resolveElementMovePosition = function (id, x, y) {
         var snapped = this.snapper.snap({ x: x, y: y });
         var element = this.model.getElement(id);
         var position = snapped;
@@ -2885,14 +3892,46 @@ var DiagramEngine = /** @class */ (function () {
                 }
             }
         }
+        return { element: element === null || element === void 0 ? void 0 : element.toData(), position: position };
+    };
+    DiagramEngine.prototype.buildChildMutationLayoutSteps = function (parentId, options) {
+        var _this = this;
+        var _a;
+        if (!parentId) {
+            return [function () { return _this.applyLayoutCascade(null); }];
+        }
+        var parent = this.model.getElement(parentId);
+        if ((options === null || options === void 0 ? void 0 : options.preserveGridParentWidth) && ((_a = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _a === void 0 ? void 0 : _a.mode) === 'grid') {
+            return [
+                function () { return _this.applyLayoutForParent(parentId, { preserveParentWidth: true }); },
+                function () { var _a; return _this.applyLayoutCascade((_a = parent.parentId) !== null && _a !== void 0 ? _a : null); },
+            ];
+        }
+        return [function () { return _this.applyLayoutCascade(parentId); }];
+    };
+    DiagramEngine.prototype.moveElementTo = function (id, x, y) {
+        var _a;
+        var oldWorld = this.model.getElementWorldPosition(id);
+        var _b = this.resolveElementMovePosition(id, x, y), element = _b.element, position = _b.position;
+        var beforeGridSlotState = (element === null || element === void 0 ? void 0 : element.parentId)
+            ? this.autoLayoutService.describeGridSlotState(element.parentId)
+            : null;
         var patches = this.commandQueue.run(createMoveElementCommand(id, position), this.model);
+        if ((element === null || element === void 0 ? void 0 : element.parentId) && beforeGridSlotState) {
+            var reorderedLayout = this.autoLayoutService.resolveGridReorderedLayout(element.parentId, beforeGridSlotState);
+            if (reorderedLayout) {
+                patches.push.apply(patches, this.commandQueue.run(createSetElementLayoutCommand(element.parentId, reorderedLayout), this.model));
+            }
+        }
         var movedPortIds = [];
         if (element) {
             movedPortIds.push.apply(movedPortIds, this.collectElementPortIds(element.id));
         }
         var allPatches = this.mutationPipeline.run({
             basePatches: patches,
-            layoutSteps: [function () { var _a; return _this.applyLayoutCascade((_a = element === null || element === void 0 ? void 0 : element.parentId) !== null && _a !== void 0 ? _a : null); }],
+            layoutSteps: this.buildChildMutationLayoutSteps((_a = element === null || element === void 0 ? void 0 : element.parentId) !== null && _a !== void 0 ? _a : null, {
+                preserveGridParentWidth: true,
+            }),
             movedPortIds: movedPortIds,
         });
         this.emitChange(allPatches);
@@ -2909,20 +3948,106 @@ var DiagramEngine = /** @class */ (function () {
             }
         }
     };
+    DiagramEngine.prototype.resizeElementBounds = function (id, bounds) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        var _e = this.resolveElementMovePosition(id, bounds.x, bounds.y), element = _e.element, position = _e.position;
+        if (!element)
+            return;
+        var oldSize = __assign({}, element.size);
+        var preserveParentSize = Boolean(element.layout && element.layout.mode !== 'manual');
+        var gridLayoutChange = this.resolveGridChildWidthResizeTopologyChange(element, bounds.width);
+        var patches = [];
+        if (gridLayoutChange) {
+            patches.push.apply(patches, this.commandQueue.run(createSetElementLayoutCommand(gridLayoutChange.parentId, gridLayoutChange.afterLayout), this.model));
+        }
+        var positionChanged = element.position.x !== position.x || element.position.y !== position.y;
+        if (positionChanged) {
+            patches.push.apply(patches, this.commandQueue.run(createMoveElementCommand(id, position), this.model));
+        }
+        patches.push.apply(patches, this.commandQueue.run(createResizeElementCommand(id, { width: bounds.width, height: bounds.height }), this.model));
+        var movedPortIds = this.collectElementPortIds(element.id);
+        var layoutSteps = [function () { return _this.applyLayoutForParent(id, { preserveParentSize: preserveParentSize }); }];
+        if (gridLayoutChange && element.parentId) {
+            var grandParentId_1 = (_b = (_a = this.model.getElement(element.parentId)) === null || _a === void 0 ? void 0 : _a.parentId) !== null && _b !== void 0 ? _b : null;
+            layoutSteps.push(function () { var _a; return _this.applyLayoutForParent((_a = element.parentId) !== null && _a !== void 0 ? _a : '', { preserveParentWidth: true }); });
+            if (grandParentId_1) {
+                layoutSteps.push(function () { return _this.applyLayoutCascade(grandParentId_1); });
+            }
+        }
+        else {
+            layoutSteps.push.apply(layoutSteps, this.buildChildMutationLayoutSteps((_c = element.parentId) !== null && _c !== void 0 ? _c : null, {
+                preserveGridParentWidth: true,
+            }));
+        }
+        var allPatches = this.mutationPipeline.run({
+            basePatches: patches,
+            layoutSteps: layoutSteps,
+            movedPortIds: movedPortIds,
+        });
+        if (gridLayoutChange) {
+            this.events.emit('gridLayoutChanged', {
+                parentId: gridLayoutChange.parentId,
+                triggerChildId: gridLayoutChange.triggerChildId,
+                reason: gridLayoutChange.reason,
+                beforeRows: gridLayoutChange.beforeRows,
+                afterRows: gridLayoutChange.afterRows,
+                beforeGridTemplate: gridLayoutChange.beforeGridTemplate,
+                afterGridTemplate: gridLayoutChange.afterGridTemplate,
+            });
+        }
+        this.emitChange(allPatches);
+        var newSize = (_d = this.model.getElement(id)) === null || _d === void 0 ? void 0 : _d.size;
+        if (newSize && (oldSize.width !== newSize.width || oldSize.height !== newSize.height)) {
+            this.events.emit('elementResized', { elementId: id, oldSize: oldSize, newSize: __assign({}, newSize) });
+        }
+    };
     DiagramEngine.prototype.resizeElement = function (id, width, height) {
         var _this = this;
-        var _a;
+        var _a, _b, _c, _d;
         var element = this.model.getElement(id);
         var oldSize = element === null || element === void 0 ? void 0 : element.size;
-        var patches = this.commandQueue.run(createResizeElementCommand(id, { width: width, height: height }), this.model);
+        var preserveParentSize = Boolean((element === null || element === void 0 ? void 0 : element.layout) && element.layout.mode !== 'manual');
+        var gridLayoutChange = element
+            ? this.resolveGridChildWidthResizeTopologyChange(element, width)
+            : null;
+        var patches = [];
+        if (gridLayoutChange) {
+            patches.push.apply(patches, this.commandQueue.run(createSetElementLayoutCommand(gridLayoutChange.parentId, gridLayoutChange.afterLayout), this.model));
+        }
+        patches.push.apply(patches, this.commandQueue.run(createResizeElementCommand(id, { width: width, height: height }), this.model));
         var movedPortIds = element ? this.collectElementPortIds(element.id) : [];
+        var layoutSteps = [function () { return _this.applyLayoutForParent(id, { preserveParentSize: preserveParentSize }); }];
+        if (gridLayoutChange && (element === null || element === void 0 ? void 0 : element.parentId)) {
+            var grandParentId_2 = (_b = (_a = this.model.getElement(element.parentId)) === null || _a === void 0 ? void 0 : _a.parentId) !== null && _b !== void 0 ? _b : null;
+            layoutSteps.push(function () { var _a; return _this.applyLayoutForParent((_a = element.parentId) !== null && _a !== void 0 ? _a : '', { preserveParentWidth: true }); });
+            if (grandParentId_2) {
+                layoutSteps.push(function () { return _this.applyLayoutCascade(grandParentId_2); });
+            }
+        }
+        else {
+            layoutSteps.push.apply(layoutSteps, this.buildChildMutationLayoutSteps((_c = element === null || element === void 0 ? void 0 : element.parentId) !== null && _c !== void 0 ? _c : null, {
+                preserveGridParentWidth: true,
+            }));
+        }
         var allPatches = this.mutationPipeline.run({
             basePatches: patches,
-            layoutSteps: [function () { return _this.applyLayoutForParent(id); }, function () { var _a; return _this.applyLayoutCascade((_a = element === null || element === void 0 ? void 0 : element.parentId) !== null && _a !== void 0 ? _a : null); }],
+            layoutSteps: layoutSteps,
             movedPortIds: movedPortIds,
         });
+        if (gridLayoutChange) {
+            this.events.emit('gridLayoutChanged', {
+                parentId: gridLayoutChange.parentId,
+                triggerChildId: gridLayoutChange.triggerChildId,
+                reason: gridLayoutChange.reason,
+                beforeRows: gridLayoutChange.beforeRows,
+                afterRows: gridLayoutChange.afterRows,
+                beforeGridTemplate: gridLayoutChange.beforeGridTemplate,
+                afterGridTemplate: gridLayoutChange.afterGridTemplate,
+            });
+        }
         this.emitChange(allPatches);
-        var newSize = (_a = this.model.getElement(id)) === null || _a === void 0 ? void 0 : _a.size;
+        var newSize = (_d = this.model.getElement(id)) === null || _d === void 0 ? void 0 : _d.size;
         if (oldSize && newSize && (oldSize.width !== newSize.width || oldSize.height !== newSize.height)) {
             this.events.emit('elementResized', { elementId: id, oldSize: __assign({}, oldSize), newSize: __assign({}, newSize) });
         }
@@ -3025,23 +4150,24 @@ var DiagramEngine = /** @class */ (function () {
     };
     DiagramEngine.prototype.addLink = function (link) {
         var _a;
-        var source = this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
-            oppositePortId: link.targetPortId,
+        var nextLink = this.applyOptionalLinkColor(link);
+        var source = this.linkRoutingService.getPortLinkWorldPosition(nextLink.sourcePortId, {
+            oppositePortId: nextLink.targetPortId,
         });
-        var target = this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
-            oppositePortId: link.sourcePortId,
+        var target = this.linkRoutingService.getPortLinkWorldPosition(nextLink.targetPortId, {
+            oppositePortId: nextLink.sourcePortId,
         });
-        var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
-        var points = link.points;
+        var routing = (_a = nextLink.routing) !== null && _a !== void 0 ? _a : 'auto';
+        var points = nextLink.points;
         if (source && target) {
             if (routing === 'auto') {
-                points = this.computeAutoRoute(link, source, target);
+                points = this.computeAutoRoute(nextLink, source, target);
             }
             else if (points.length < 2) {
                 points = [__assign({}, source), __assign({}, target)];
             }
         }
-        var patches = this.commandQueue.run(createAddLinkCommand(__assign(__assign({}, link), { points: points, routing: routing })), this.model);
+        var patches = this.commandQueue.run(createAddLinkCommand(__assign(__assign({}, nextLink), { points: points, routing: routing })), this.model);
         this.emitChange(patches);
     };
     DiagramEngine.prototype.updateLinkPoints = function (id, points) {
@@ -3226,6 +4352,7 @@ var DiagramEngine = /** @class */ (function () {
         return baseRotation + instanceRotation;
     };
     DiagramEngine.prototype.normalizeElementResize = function (id, proposal, handle, minSize) {
+        var _a, _b;
         if (minSize === void 0) { minSize = 20; }
         var clamped = {
             x: proposal.x,
@@ -3236,20 +4363,39 @@ var DiagramEngine = /** @class */ (function () {
         var element = this.model.getElement(id);
         if (!element)
             return clamped;
+        var lockHorizontalResize = this.shouldLockAutoLayoutChildHorizontalResize(element);
+        var currentWorldPosition = this.model.getElementWorldPosition(id);
+        var anchorGridWidthToLeft = this.shouldAnchorAutoLayoutGridChildWidthToLeft(element);
+        var freezeGridLeftEdge = anchorGridWidthToLeft || lockHorizontalResize;
+        var snappedGridWidth = this.resolveSnappedGridChildWidth(element, clamped.width);
         var shape = this.shapeRegistry.get(element.shapeId);
-        if (!(shape === null || shape === void 0 ? void 0 : shape.normalizeResize))
-            return clamped;
+        if (!(shape === null || shape === void 0 ? void 0 : shape.normalizeResize)) {
+            if (!lockHorizontalResize && !anchorGridWidthToLeft)
+                return clamped;
+            var width_1 = lockHorizontalResize
+                ? Math.max(minSize, element.size.width)
+                : Math.max(minSize, snappedGridWidth);
+            var x_1 = freezeGridLeftEdge ? ((_a = currentWorldPosition === null || currentWorldPosition === void 0 ? void 0 : currentWorldPosition.x) !== null && _a !== void 0 ? _a : clamped.x) : clamped.x;
+            if (!freezeGridLeftEdge && (handle === 'sw' || handle === 'nw')) {
+                x_1 += clamped.width - width_1;
+            }
+            return { x: x_1, y: clamped.y, width: width_1, height: clamped.height };
+        }
         var normalized = shape.normalizeResize({
             element: element.toData(),
             handle: handle,
             minSize: minSize,
             proposal: { width: clamped.width, height: clamped.height },
         });
-        var width = Math.max(minSize, normalized.width);
+        var width = lockHorizontalResize
+            ? Math.max(minSize, element.size.width)
+            : anchorGridWidthToLeft
+                ? Math.max(minSize, snappedGridWidth)
+                : Math.max(minSize, normalized.width);
         var height = Math.max(minSize, normalized.height);
-        var x = clamped.x;
+        var x = freezeGridLeftEdge ? ((_b = currentWorldPosition === null || currentWorldPosition === void 0 ? void 0 : currentWorldPosition.x) !== null && _b !== void 0 ? _b : clamped.x) : clamped.x;
         var y = clamped.y;
-        if (handle === 'sw' || handle === 'nw') {
+        if (!freezeGridLeftEdge && (handle === 'sw' || handle === 'nw')) {
             x += clamped.width - width;
         }
         if (handle === 'ne' || handle === 'nw') {
@@ -3257,6 +4403,75 @@ var DiagramEngine = /** @class */ (function () {
         }
         return { x: x, y: y, width: width, height: height };
     };
+    DiagramEngine.prototype.shouldLockAutoLayoutChildHorizontalResize = 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);
+        if (((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) !== 'grid')
+            return false;
+        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);
+    };
+    DiagramEngine.prototype.shouldRestrictAutoLayoutChildRightGrowth = function (element, handle, requestedWidth) {
+        return false;
+    };
+    DiagramEngine.prototype.resolveSnappedGridChildWidth = function (element, requestedWidth) {
+        var _a;
+        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)
+            return requestedWidth;
+        return this.autoLayoutService.snapGridChildRequestedWidth(parentId, element.id, requestedWidth);
+    };
+    DiagramEngine.prototype.resolveGridChildWidthResizeTopologyChange = function (element, requestedWidth) {
+        var _a, _b, _c;
+        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')
+            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)
+            return null;
+        var topologyChange = this.autoLayoutService.resolveGridChildResizeTopologyChange(parentId, element.id, requestedWidth);
+        if (!topologyChange)
+            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),
+            afterLayout: topologyChange.nextLayout,
+        };
+    };
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
     };
@@ -3339,6 +4554,10 @@ var DiagramEngine = /** @class */ (function () {
         this.events.emit('config', { type: 'rendering' });
     };
     DiagramEngine.prototype.render = function () {
+        var redrawRoutingPatches = this.refreshLinksForRenderCycle();
+        if (redrawRoutingPatches.length > 0) {
+            this.emitChange(redrawRoutingPatches, { render: false });
+        }
         this.renderer.render(this.model);
     };
     DiagramEngine.prototype.emitElementDrop = function (event) {
@@ -3534,8 +4753,8 @@ var DiagramEngine = /** @class */ (function () {
         }
         if (style === null || style === void 0 ? void 0 : style.moveBounds) {
             var bounds = style.moveBounds;
-            position.x = clamp(position.x, bounds.x, bounds.x + bounds.width);
-            position.y = clamp(position.y, bounds.y, bounds.y + bounds.height);
+            position.x = clamp$2(position.x, bounds.x, bounds.x + bounds.width);
+            position.y = clamp$2(position.y, bounds.y, bounds.y + bounds.height);
         }
         if (effectiveMoveMode === 'border') {
             var resolvedBorder = this.resolveBorderPositionWithLimits(position, element, (_e = element.portMovement) === null || _e === void 0 ? void 0 : _e.positionLimits);
@@ -3827,8 +5046,8 @@ var DiagramEngine = /** @class */ (function () {
         });
         this.renderer.renderSelection(selectedIds);
     };
-    DiagramEngine.prototype.applyLayoutForParent = function (parentId) {
-        return this.autoLayoutService.applyLayoutForParent(parentId);
+    DiagramEngine.prototype.applyLayoutForParent = function (parentId, options) {
+        return this.autoLayoutService.applyLayoutForParent(parentId, options);
     };
     DiagramEngine.prototype.applyLayoutCascade = function (startParentId) {
         return this.autoLayoutService.applyLayoutCascade(startParentId);
@@ -3894,6 +5113,30 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.routeLinksWithEmptyPoints = function () {
         return this.linkRoutingService.routeLinksWithEmptyPoints();
     };
+    DiagramEngine.prototype.applyOptionalLinkColor = function (link) {
+        if (!this.linkColorPoolPolicy.enabled)
+            return link;
+        var existingStyle = link.style;
+        var hasExplicitStroke = existingStyle !== undefined &&
+            Object.prototype.hasOwnProperty.call(existingStyle, 'stroke') &&
+            existingStyle.stroke !== undefined &&
+            existingStyle.stroke !== null &&
+            "".concat(existingStyle.stroke).trim().length > 0;
+        if (hasExplicitStroke)
+            return link;
+        var colors = this.linkColorPoolPolicy.colors;
+        if (colors.length === 0)
+            return link;
+        var index = Math.max(0, Math.min(colors.length - 1, Math.floor(Math.random() * colors.length)));
+        return __assign(__assign({}, link), { style: __assign(__assign({}, (existingStyle !== null && existingStyle !== void 0 ? existingStyle : {})), { stroke: colors[index] }) });
+    };
+    DiagramEngine.prototype.refreshLinksForRenderCycle = function () {
+        if (this.linkRouteRefreshPolicy.mode !== 'redraw-two-endpoint-change')
+            return [];
+        return this.linkRoutingService.refreshLinksForRedraw({
+            includeManual: this.linkRouteRefreshPolicy.includeManual,
+        });
+    };
     DiagramEngine.prototype.normalizePortsForHostPolicies = function (portIds) {
         var _this = this;
         var ids = portIds !== null && portIds !== void 0 ? portIds : Array.from(this.model.ports.keys());
@@ -5153,6 +6396,7 @@ var KonvaInteraction = /** @class */ (function () {
         this.dragThreshold = 4;
         this.panSpeed = 0.5;
         this.occupiedVertexTolerance = 2;
+        this.nestedHoverElementPadding = 12;
         this.emittingElementLinkEnded = false;
         this.engine = engine;
         this.stage = config.stage;
@@ -5431,6 +6675,10 @@ var KonvaInteraction = /** @class */ (function () {
                 return;
             }
             if (hit.type === 'text') {
+                if (!_this.isTextMovable(hit.id)) {
+                    _this.setCursor('default');
+                    return;
+                }
                 var base = _this.engine.getTextWorldPosition(hit.id);
                 if (base) {
                     _this.dragState = {
@@ -5820,6 +7068,8 @@ var KonvaInteraction = /** @class */ (function () {
             var hit = _this.resolveHit(point);
             if (!hit || hit.type !== 'text')
                 return;
+            if (!_this.isTextEditable(hit.id))
+                return;
             _this.startTextEdit(hit.id);
         };
         this.stage.on('dblclick dbltap', doubleClick);
@@ -6372,7 +7622,13 @@ var KonvaInteraction = /** @class */ (function () {
             this.clearActiveShapeHoverControl();
             return;
         }
-        var resolved = this.resolveShapeHoverControl(hit.id, point);
+        var hoverElementIds = this.resolveNestedHoverElementCandidates(point, hit.id);
+        var resolved = null;
+        for (var i = 0; i < hoverElementIds.length; i += 1) {
+            resolved = this.resolveShapeHoverControl(hoverElementIds[i], point);
+            if (resolved)
+                break;
+        }
         if (!resolved) {
             this.clearActiveShapeHoverControl();
             return;
@@ -6388,6 +7644,70 @@ var KonvaInteraction = /** @class */ (function () {
         this.activeShapeHoverControl = resolved;
         (_b = (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.renderShapeHoverControl) === null || _b === void 0 ? void 0 : _b.call(_a, this.toShapeHoverRenderConfig(resolved));
     };
+    KonvaInteraction.prototype.resolveNestedHoverElementCandidates = function (point, rootElementId) {
+        var _this = this;
+        var _a;
+        var state = this.engine.getState();
+        var root = state.elements.find(function (element) { return element.id === rootElementId; });
+        if (!root)
+            return [rootElementId];
+        var byId = new Map(state.elements.map(function (element) { var _a; return [element.id, { parentId: (_a = element.parentId) !== null && _a !== void 0 ? _a : null }]; }));
+        var activeElementId = (_a = this.activeShapeHoverControl) === null || _a === void 0 ? void 0 : _a.elementId;
+        var entries = state.elements
+            .map(function (element, order) { return ({ element: element, order: order }); })
+            .filter(function (_a) {
+            var element = _a.element;
+            return _this.isDescendantOrSelf(element.id, rootElementId, byId);
+        })
+            .filter(function (_a) {
+            var element = _a.element;
+            return _this.isPointWithinElementHoverBounds(point, element, _this.nestedHoverElementPadding);
+        })
+            .map(function (_a) {
+            var element = _a.element, order = _a.order;
+            return ({
+                id: element.id,
+                depth: _this.computeElementDepth(element.id, byId),
+                order: order,
+                active: activeElementId === element.id,
+            });
+        });
+        entries.sort(function (a, b) {
+            if (a.active !== b.active)
+                return a.active ? -1 : 1;
+            if (a.depth !== b.depth)
+                return b.depth - a.depth;
+            return b.order - a.order;
+        });
+        var ordered = entries.map(function (entry) { return entry.id; });
+        if (!ordered.includes(rootElementId)) {
+            ordered.push(rootElementId);
+        }
+        return ordered;
+    };
+    KonvaInteraction.prototype.isDescendantOrSelf = function (candidateId, ancestorId, byId) {
+        if (candidateId === ancestorId)
+            return true;
+        var current = byId.get(candidateId);
+        while (current === null || current === void 0 ? void 0 : current.parentId) {
+            if (current.parentId === ancestorId)
+                return true;
+            current = byId.get(current.parentId);
+        }
+        return false;
+    };
+    KonvaInteraction.prototype.isPointWithinElementHoverBounds = function (point, element, padding) {
+        var _a, _b;
+        var world = (_a = this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
+        var rect = {
+            x: world.x - padding,
+            y: world.y - padding,
+            width: Math.max(0, element.size.width + padding * 2),
+            height: Math.max(0, element.size.height + padding * 2),
+        };
+        var rotation = this.engine.getElementRotation(element.id);
+        return pointInRotatedRect(point, { x: rect.x, y: rect.y }, { width: rect.width, height: rect.height }, rotation, (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false);
+    };
     KonvaInteraction.prototype.resolveShapeHoverControl = function (elementId, point) {
         var _a, _b, _c, _d, _e, _f, _g;
         var controls = (_a = this.shapeHoverControls) === null || _a === void 0 ? void 0 : _a.controls;
@@ -6902,8 +8222,12 @@ var KonvaInteraction = /** @class */ (function () {
                 y: normalized.y + normalized.height / 2,
             }
             : { x: normalized.x, y: normalized.y };
-        this.engine.moveElementTo(state.elementId, moveTarget.x, moveTarget.y);
-        this.engine.resizeElement(state.elementId, normalized.width, normalized.height);
+        this.engine.resizeElementBounds(state.elementId, {
+            x: moveTarget.x,
+            y: moveTarget.y,
+            width: normalized.width,
+            height: normalized.height,
+        });
         this.updateSelectionOverlays();
     };
     KonvaInteraction.prototype.parseResizeHandle = function (id) {
@@ -7239,6 +8563,14 @@ var KonvaInteraction = /** @class */ (function () {
     KonvaInteraction.prototype.getTextById = function (id) {
         return this.engine.getState().texts.find(function (text) { return text.id === id; });
     };
+    KonvaInteraction.prototype.isTextMovable = 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.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;
+    };
     KonvaInteraction.prototype.getLinkById = function (id) {
         return this.engine.getState().links.find(function (link) { return link.id === id; });
     };
@@ -7921,6 +9253,24 @@ var hasBounds = function (bounds) {
         bounds.maxX >= bounds.minX &&
         bounds.maxY >= bounds.minY;
 };
+var DEFAULT_VIEWPORT_FIT_PADDING = 24;
+var DEFAULT_VIEWPORT_FIT_MIN_ZOOM = 0.2;
+var DEFAULT_VIEWPORT_FIT_MAX_ZOOM = 3;
+var resolveViewportFitOptions = function (options) {
+    var padding = typeof (options === null || options === void 0 ? void 0 : options.padding) === 'number' && Number.isFinite(options.padding)
+        ? Math.max(0, options.padding)
+        : DEFAULT_VIEWPORT_FIT_PADDING;
+    var requestedMinZoom = typeof (options === null || options === void 0 ? void 0 : options.minZoom) === 'number' && Number.isFinite(options.minZoom)
+        ? Math.max(0.000001, options.minZoom)
+        : DEFAULT_VIEWPORT_FIT_MIN_ZOOM;
+    var requestedMaxZoom = typeof (options === null || options === void 0 ? void 0 : options.maxZoom) === 'number' && Number.isFinite(options.maxZoom)
+        ? Math.max(0.000001, options.maxZoom)
+        : DEFAULT_VIEWPORT_FIT_MAX_ZOOM;
+    var minZoom = Math.min(requestedMinZoom, requestedMaxZoom);
+    var maxZoom = Math.max(requestedMinZoom, requestedMaxZoom);
+    return { padding: padding, minZoom: minZoom, maxZoom: maxZoom };
+};
+var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
 var resolveStateWorldBounds = function (state) {
     var bounds = createBounds();
     state.elements.forEach(function (element) {
@@ -7957,6 +9307,34 @@ var resolveStateWorldBounds = function (state) {
     });
     return hasBounds(bounds) ? bounds : null;
 };
+var resolveElementWorldBounds = function (state) {
+    var bounds = createBounds();
+    state.elements.forEach(function (element) {
+        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+    });
+    return hasBounds(bounds) ? bounds : null;
+};
+var resolveViewportFitTransform = function (state, viewportSize, options) {
+    var bounds = resolveElementWorldBounds(state);
+    if (!bounds)
+        return null;
+    var safeWidth = Math.max(1, viewportSize.width);
+    var safeHeight = Math.max(1, viewportSize.height);
+    var _a = resolveViewportFitOptions(options), padding = _a.padding, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
+    var availableWidth = Math.max(1, safeWidth - padding * 2);
+    var availableHeight = Math.max(1, safeHeight - padding * 2);
+    var contentWidth = Math.max(1, bounds.maxX - bounds.minX);
+    var contentHeight = Math.max(1, bounds.maxY - bounds.minY);
+    var rawZoom = Math.min(availableWidth / contentWidth, availableHeight / contentHeight);
+    var zoom = clamp(rawZoom, minZoom, maxZoom);
+    var centerX = (bounds.minX + bounds.maxX) / 2;
+    var centerY = (bounds.minY + bounds.maxY) / 2;
+    var pan = {
+        x: safeWidth / 2 - centerX * zoom,
+        y: safeHeight / 2 - centerY * zoom,
+    };
+    return { pan: pan, zoom: zoom };
+};
 var resolveFitToContentPadding = function (fitToContent) {
     if (typeof fitToContent === 'object' && typeof fitToContent.padding === 'number') {
         return Math.max(0, fitToContent.padding);
@@ -8032,10 +9410,12 @@ var registerSimpleShapes = function (registry, shapes, isPort) {
 var createDiagramEditor = function (config) {
     var _a, _b;
     var Konva = getKonva();
+    var stageWidth = (_a = config.width) !== null && _a !== void 0 ? _a : 900;
+    var stageHeight = (_b = config.height) !== null && _b !== void 0 ? _b : 560;
     var stage = new Konva.Stage({
         container: config.container,
-        width: (_a = config.width) !== null && _a !== void 0 ? _a : 900,
-        height: (_b = config.height) !== null && _b !== void 0 ? _b : 560,
+        width: stageWidth,
+        height: stageHeight,
     });
     var stageContainer = typeof stage.container === 'function' ? stage.container() : stage.container;
     if (stageContainer && stageContainer.tabIndex < 0) {
@@ -8045,7 +9425,12 @@ var createDiagramEditor = function (config) {
     registerSimpleShapes(shapeRegistry, config.elementShapes, false);
     registerSimpleShapes(shapeRegistry, config.portShapes, true);
     var renderer = new KonvaRenderer({ stage: stage, konva: Konva, shapeRegistry: shapeRegistry });
-    var engine = new DiagramEngine({ renderer: renderer, shapeRegistry: shapeRegistry });
+    var engine = new DiagramEngine({
+        renderer: renderer,
+        shapeRegistry: shapeRegistry,
+        linkRouteRefreshPolicy: config.linkRouteRefreshPolicy,
+        linkColorPoolPolicy: config.linkColorPoolPolicy,
+    });
     if (config.onChange) {
         engine.on('change', config.onChange);
     }
@@ -8177,6 +9562,12 @@ var createDiagramEditor = function (config) {
         completeLinkToPort: function (targetPortId) { return interaction.completeLinkToPort(targetPortId); },
         completeLinkToElement: function (targetElementId, pointer) { return interaction.completeLinkToElement(targetElementId, pointer); },
         cancelLink: function () { return interaction.cancelLink(); },
+        zoomToFitElements: function (options) {
+            var transform = resolveViewportFitTransform(engine.getState(), { width: stageWidth, height: stageHeight }, options);
+            if (!transform)
+                return;
+            engine.setViewport(transform.pan, transform.zoom);
+        },
         exportImage: function (options) {
             engine.render();
             if (typeof stage.toDataURL !== 'function') {
@@ -8203,6 +9594,8 @@ var createDiagramEditor = function (config) {
             return stage.toDataURL(__assign(__assign({}, baseOptions), { x: cropX, y: cropY, width: cropWidth, height: cropHeight }));
         },
         resize: function (width, height) {
+            stageWidth = width;
+            stageHeight = height;
             stage.width(width);
             stage.height(height);
             engine.render();