orcasvn-react-diagrams 0.2.5 → 0.2.6

package/dist/esm/index.js

@@ -268,6 +268,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;
@@ -304,6 +305,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,
@@ -318,7 +320,7 @@ var distance = function (a, b) {
     var dy = a.y - b.y;
     return Math.sqrt(dx * dx + dy * dy);
 };
-var clamp$1 = function (value, min, max) {
+var clamp$2 = function (value, min, max) {
     if (value < min)
         return min;
     if (value > max)
@@ -1165,7 +1167,7 @@ var pathLength = function (points) {
     }
     return total;
 };
-var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
+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;
@@ -1445,7 +1447,7 @@ var ObstacleRouter = /** @class */ (function () {
             return null;
         if (corridor.axis === 'horizontal') {
             var direction_1 = source.x <= target.x ? 1 : -1;
-            var corridorY = clamp((source.y + target.y) / 2, corridor.bounds.y + this.padding, corridor.bounds.y + corridor.bounds.height - this.padding);
+            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;
@@ -1462,7 +1464,7 @@ var ObstacleRouter = /** @class */ (function () {
             ]);
         }
         var direction = source.y <= target.y ? 1 : -1;
-        var corridorX = clamp((source.x + target.x) / 2, corridor.bounds.x + this.padding, corridor.bounds.x + corridor.bounds.width - this.padding);
+        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;
@@ -2014,6 +2016,7 @@ var TextLayoutService = /** @class */ (function () {
     return TextLayoutService;
 }());
 
+var GRID_ROW_UNITS = 12;
 var AutoLayoutService = /** @class */ (function () {
     function AutoLayoutService(config) {
         this.model = config.model;
@@ -2028,11 +2031,24 @@ var AutoLayoutService = /** @class */ (function () {
         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) {
+            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: [] };
             }
@@ -2047,9 +2063,17 @@ var AutoLayoutService = /** @class */ (function () {
             return { patches: resizePatches, movedPortIds: __spreadArray([], parent.portIds, true) };
         }
         if (layout.mode === 'grid') {
-            return this.applyGridLayoutForParent(parentId, parent, children, preserveParentSize);
+            return this.applyGridLayoutForParent(parentId, parent, children, {
+                preserveParentSize: preserveParentSize,
+                preserveParentWidth: preserveParentWidth,
+                preserveParentHeight: preserveParentHeight,
+            });
         }
-        return this.applyAxisLayoutForParent(parentId, parent, children, layout.mode, preserveParentSize);
+        return this.applyAxisLayoutForParent(parentId, parent, children, layout.mode, {
+            preserveParentSize: preserveParentSize,
+            preserveParentWidth: preserveParentWidth,
+            preserveParentHeight: preserveParentHeight,
+        });
     };
     AutoLayoutService.prototype.applyLayoutCascade = function (startParentId) {
         var _a;
@@ -2092,11 +2116,102 @@ var AutoLayoutService = /** @class */ (function () {
         });
         return { patches: patches, movedPortIds: Array.from(new Set(movedPortIds)) };
     };
-    AutoLayoutService.prototype.applyAxisLayoutForParent = function (parentId, parent, children, axis, preserveParentSize) {
+    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;
-        if (preserveParentSize === void 0) { preserveParentSize = false; }
+        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 = (_c = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _c !== void 0 ? _c : 12;
@@ -2179,8 +2294,16 @@ var AutoLayoutService = /** @class */ (function () {
         }
         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);
@@ -2215,10 +2338,12 @@ var AutoLayoutService = /** @class */ (function () {
             height: newParentHeight,
         });
     };
-    AutoLayoutService.prototype.applyGridLayoutForParent = function (parentId, parent, children, preserveParentSize) {
+    AutoLayoutService.prototype.applyGridLayoutForParent = function (parentId, parent, children, options) {
         var _this = this;
         var _a, _b;
-        if (preserveParentSize === void 0) { preserveParentSize = false; }
+        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;
@@ -2226,9 +2351,7 @@ var AutoLayoutService = /** @class */ (function () {
         var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
         var constraints = this.resolveChildSizeConstraints(layout);
         var autoResize = this.resolveAutoResizeMode(layout);
-        // Keep grid child ordering stable across resize/layout cycles.
-        // Grid slot assignment should not depend on transient child positions produced during drag.
-        var sorted = __spreadArray([], children, true);
+        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) {
@@ -2243,20 +2366,33 @@ var AutoLayoutService = /** @class */ (function () {
                 };
             });
             var rowHeight = clampedSizes.reduce(function (max, size) { return Math.max(max, size.height); }, 0);
-            var rowWidth = clampedSizes.reduce(function (sum, size) { return sum + size.width; }, 0) + Math.max(0, clampedSizes.length - 1) * gap;
+            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 = preserveParentSize
+        var newParentWidth = preserveParentWidth
             ? Math.max(0, Math.round(parent.size.width))
             : this.resolveAutoResizedDimension(parent.size.width, padding.x * 2 + requiredInnerWidth, autoResize);
-        var newParentHeight = preserveParentSize
+        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);
@@ -2275,8 +2411,11 @@ var AutoLayoutService = /** @class */ (function () {
             if (childCount <= 0)
                 return;
             var totalGap = Math.max(0, childCount - 1) * gap;
-            var rowInnerWidth = Math.max(0, availableWidth - totalGap);
-            var cellWidths = _this.distributeWeightedSizes(rowInnerWidth, metric.effectiveWeights);
+            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) {
@@ -2300,6 +2439,13 @@ var AutoLayoutService = /** @class */ (function () {
             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;
@@ -2362,43 +2508,96 @@ var AutoLayoutService = /** @class */ (function () {
             : 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 = [];
-        (template !== null && template !== void 0 ? template : []).forEach(function (entry) {
-            if (typeof entry === 'number') {
-                var count = Math.max(0, Math.floor(entry));
-                if (count > 0) {
-                    rows.push({ weights: Array.from({ length: count }, function () { return 1; }) });
-                }
-                return;
-            }
-            if (!Array.isArray(entry))
-                return;
-            if (entry.length === 1 && Number.isFinite(entry[0]) && entry[0] > 1) {
-                var count = Math.max(0, Math.floor(entry[0]));
-                if (count > 0) {
-                    rows.push({ weights: Array.from({ length: count }, function () { return 1; }) });
-                }
-                return;
-            }
-            var weights = entry
-                .map(function (value) {
-                if (!Number.isFinite(value) || value <= 0)
-                    return 1;
-                return value;
-            })
-                .filter(function (value) { return value > 0; });
-            if (weights.length > 0) {
-                rows.push({ weights: weights });
+        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: [1] });
+            rows.push({ weights: [GRID_ROW_UNITS] });
         }
         return rows;
     };
     AutoLayoutService.prototype.assignChildrenToGridRows = function (childIds, templateRows) {
-        var _a;
         var assigned = [];
         var cursor = 0;
         templateRows.forEach(function (rowTemplate) {
@@ -2414,19 +2613,348 @@ var AutoLayoutService = /** @class */ (function () {
             cursor += rowChildren.length;
         });
         while (cursor < childIds.length) {
-            var remaining = childIds.length - cursor;
-            var lastRow = templateRows[templateRows.length - 1];
-            var fallbackColumns = (_a = lastRow === null || lastRow === void 0 ? void 0 : lastRow.weights.length) !== null && _a !== void 0 ? _a : 1;
-            var fallbackCount = Math.max(1, Math.min(remaining, fallbackColumns));
-            var rowChildren = childIds.slice(cursor, cursor + fallbackCount);
+            var rowChildren = childIds.slice(cursor, cursor + 1);
             assigned.push({
-                weights: Array.from({ length: rowChildren.length }, function () { return 1; }),
+                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;
@@ -2961,11 +3489,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;
@@ -3127,6 +3662,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) },
@@ -3171,8 +3712,8 @@ var MutationPipeline = /** @class */ (function () {
 }());
 
 var clampToRect = function (point, rect) { return ({
-    x: clamp$1(point.x, rect.x, rect.x + rect.width),
-    y: clamp$1(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);
@@ -3309,9 +3850,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;
@@ -3351,14 +3890,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);
@@ -3375,24 +3946,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 preserveParentSize = Boolean((element === null || element === void 0 ? void 0 : element.layout) && element.layout.mode !== 'manual');
-        var patches = this.commandQueue.run(createResizeElementCommand(id, { width: width, height: height }), this.model);
+        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, { preserveParentSize: preserveParentSize }); },
-                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) });
         }
@@ -3697,6 +4350,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,
@@ -3708,13 +4362,19 @@ var DiagramEngine = /** @class */ (function () {
         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)) {
-            if (!lockHorizontalResize)
+            if (!lockHorizontalResize && !anchorGridWidthToLeft)
                 return clamped;
-            var width_1 = Math.max(minSize, element.size.width);
-            var x_1 = clamped.x;
-            if (handle === 'sw' || handle === 'nw') {
+            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 };
@@ -3725,11 +4385,15 @@ var DiagramEngine = /** @class */ (function () {
             minSize: minSize,
             proposal: { width: clamped.width, height: clamped.height },
         });
-        var width = lockHorizontalResize ? Math.max(minSize, element.size.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') {
@@ -3747,7 +4411,64 @@ var DiagramEngine = /** @class */ (function () {
         if (element.layout && element.layout.mode !== 'manual')
             return false;
         var parent = this.model.getElement(parentId);
-        return ((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) === 'grid';
+        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);
@@ -4030,8 +4751,8 @@ var DiagramEngine = /** @class */ (function () {
         }
         if (style === null || style === void 0 ? void 0 : style.moveBounds) {
             var bounds = style.moveBounds;
-            position.x = clamp$1(position.x, bounds.x, bounds.x + bounds.width);
-            position.y = clamp$1(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);
@@ -5952,6 +6673,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 = {
@@ -6341,6 +7066,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);
@@ -7493,8 +8220,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) {
@@ -7830,6 +8561,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; });
     };
@@ -8512,6 +9251,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) {
@@ -8548,6 +9305,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);
@@ -8623,10 +9408,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) {
@@ -8773,6 +9560,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') {
@@ -8799,6 +9592,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();