devexpress-diagram 2.2.2 → 2.2.4

package/dist/dx-diagram.css

@@ -1,9 +1,9 @@
 /*!
  * DevExpress Diagram (dx-diagram)
- * Version: 2.2.2
- * Build date: Wed Sep 13 2023
+ * Version: 2.2.4
+ * Build date: Thu Jan 18 2024
  *
- * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+ * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
  */
 .dxdi-control{overflow:visible;box-sizing:border-box;position:relative}.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll{cursor:grab !important}.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll .shape,.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll .shape-expand-btn,.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll text{cursor:grab}.dxdi-control.dxdi-read-only .dxdi-canvas .shape,.dxdi-control.dxdi-read-only .dxdi-canvas .shape-expand-btn,.dxdi-control.dxdi-read-only .dxdi-canvas text{cursor:default}.dxdi-control .dxdi-canvas{display:block;background-color:#d9d9d9;transform-origin:0 0;overflow:hidden}.dxdi-canvas.dxdi-drag-scroll{cursor:grab !important}.dxdi-canvas.dxdi-drag-scroll .shape,.dxdi-canvas.dxdi-drag-scroll .shape .shape-expand-btn,.dxdi-canvas.dxdi-drag-scroll .connector,.dxdi-canvas.dxdi-drag-scroll .connection-point,.dxdi-canvas.dxdi-drag-scroll .connector text,.dxdi-canvas.dxdi-drag-scroll .connector-side-mark.vertical,.dxdi-canvas.dxdi-drag-scroll .connector-side-mark.horizontal,.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="1"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="2"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="3"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="4"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="5"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="6"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="7"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="8"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="4"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="5"]{cursor:grab}.dxdi-canvas *{user-select:none}.dxdi-canvas text{font-family:arial,helvetica,sans-serif;font-size:10pt}.dxdi-canvas .page{fill:white}.dxdi-canvas .pages-grid-line{fill:none;stroke:rgba(0,0,0,0.15);stroke-dasharray:8;stroke-width:2}.dxdi-canvas .grid-outer-line,.dxdi-canvas .grid-inner-line{fill:none}.dxdi-canvas .grid-outer-line{stroke:rgba(0,0,0,0.1)}.dxdi-canvas .grid-inner-line{stroke:rgba(0,0,0,0.05)}.dxdi-canvas .shape,.dxdi-canvas .toolbox-item{pointer-events:bounding-box}.dxdi-canvas .shape rect,.dxdi-canvas .shape path,.dxdi-canvas .shape line,.dxdi-canvas .shape ellipse,.dxdi-canvas .toolbox-item rect,.dxdi-canvas .toolbox-item path,.dxdi-canvas .toolbox-item line,.dxdi-canvas .toolbox-item ellipse{fill:#fff;stroke-width:2;stroke:#000}.dxdi-canvas .shape text,.dxdi-canvas .toolbox-item text{fill:#000;text-anchor:middle}.dxdi-canvas .shape rect.selector,.dxdi-canvas .toolbox-item rect.selector{stroke-width:48;stroke:transparent;fill:transparent;pointer-events:initial}.dxdi-canvas .shape.not-valid rect,.dxdi-canvas .shape.not-valid path,.dxdi-canvas .shape.not-valid line,.dxdi-canvas .shape.not-valid ellipse{stroke:red !important}.dxdi-canvas .shape{cursor:move}.dxdi-canvas .shape.text-input>text{display:none}.dxdi-canvas .shape.container>rect:first-child{fill:transparent}.dxdi-canvas .shape .shape-expand-btn{cursor:pointer}.dxdi-canvas .shape .shape-expand-btn>rect,.dxdi-canvas .shape .shape-expand-btn>path{stroke-dasharray:initial !important}.dxdi-canvas .shape .shape-expand-btn>path{stroke-width:2 !important}.dxdi-canvas .shape .dxdi-image .dxdi-spinner{animation:loading-spinner 1s linear infinite}.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse{stroke:#000;stroke-opacity:0.2}.dxdi-canvas .shape .dxdi-image .dxdi-spinner path{stroke:#fd7010;stroke-linecap:round}.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse,.dxdi-canvas .shape .dxdi-image .dxdi-spinner path{fill:none;stroke-width:5}@keyframes loading-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.dxdi-canvas .shape .dxdi-image .dxdi-user .dxdi-background{fill:#000;opacity:0.2;stroke:none}.dxdi-canvas .shape .dxdi-image .dxdi-user ellipse,.dxdi-canvas .shape .dxdi-image .dxdi-user path{fill:#fff;stroke:none}.dxdi-canvas .shape .dxdi-image .dxdi-warning ellipse{stroke:none;fill:#ee1616}.dxdi-canvas .shape .dxdi-image .dxdi-warning rect{stroke:none;fill:#fff}.dxdi-canvas .shape.locked,.dxdi-canvas .shape.locked+.container-children .shape{cursor:inherit !important}.dxdi-canvas .shape.locked .shape-expand-btn,.dxdi-canvas .shape.locked+.container-children .shape .shape-expand-btn{cursor:inherit !important}.dxdi-canvas .container-children .shape .selector{stroke-width:8}.dxdi-canvas .toolbox-item{cursor:pointer}.dxdi-canvas .toolbox-item .selector{stroke-width:0 !important}.dxdi-canvas .connector path,.dxdi-canvas .connector line{stroke-width:2;stroke:#000;stroke-linejoin:round;pointer-events:stroke}.dxdi-canvas .connector path:not(.outlined-line-ending):not(.filled-line-ending){fill:none !important}.dxdi-canvas .connector path.outlined-line-ending{fill:#fff}.dxdi-canvas .connector path.filled-line-ending{fill:#000}.dxdi-canvas .connector path.selector,.dxdi-canvas .connector line.selector{stroke-width:16;stroke:transparent}.dxdi-canvas .connector text{cursor:move;fill:#000;text-anchor:middle}.dxdi-canvas .connector .text-filter-flood{flood-color:#fff}.dxdi-canvas .connector.not-valid path,.dxdi-canvas .connector.not-valid line{stroke:red !important}.dxdi-canvas .connector.can-move{cursor:move}.dxdi-canvas .selection-mark,.dxdi-canvas .geometry-mark,.dxdi-canvas .connection-point,.dxdi-canvas .connection-mark,.dxdi-canvas .connector-point-mark,.dxdi-canvas .connector-side-mark{fill:#fff;stroke-width:2}.dxdi-canvas .selection-mark{stroke:#1e90ff}.dxdi-canvas .selection-mark[data-type="9"][data-value="1"]{cursor:nw-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="2"]{cursor:ne-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="3"]{cursor:se-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="4"]{cursor:sw-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="5"]{cursor:n-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="6"]{cursor:e-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="7"]{cursor:s-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="8"]{cursor:w-resize}.dxdi-canvas .selection-mark[data-type="4"],.dxdi-canvas .selection-mark[data-type="5"]{cursor:move}.dxdi-canvas .locked-selection-mark{fill:#fff;stroke-width:1;stroke:#666}.dxdi-canvas .geometry-mark{cursor:pointer;stroke:#daa520}.dxdi-canvas .container-target,.dxdi-canvas .connection-target{fill:transparent;stroke:orchid;stroke-width:2;pointer-events:none}.dxdi-canvas .connection-point{cursor:crosshair;stroke:orchid}.dxdi-canvas .connection-point.not-valid{stroke:grey !important;display:none}.dxdi-canvas .connection-mark{cursor:crosshair;stroke:orchid}.dxdi-canvas .connection-point.selector,.dxdi-canvas .connection-mark.selector{stroke-width:10px;stroke:transparent;fill:transparent}.dxdi-canvas .connection-point.active{fill:orchid}.dxdi-canvas .connection-mark.active{fill:orchid}.dxdi-canvas .connector-point-mark,.dxdi-canvas .connector-side-mark{cursor:move;stroke:#1e90ff}.dxdi-canvas .connector-point-mark.disabled{cursor:default;display:none}.dxdi-canvas .connector-side-mark{fill:#1e90ff}.dxdi-canvas .connector-side-mark.vertical{cursor:col-resize}.dxdi-canvas .connector-side-mark.horizontal{cursor:row-resize}.dxdi-canvas .item-selection-rect,.dxdi-canvas .items-selection-rect{fill:transparent;stroke-width:1;stroke:#1e90ff;stroke-dasharray:2px;pointer-events:none}.dxdi-canvas .items-selection-rect{fill:rgba(30,144,255,0.02)}.dxdi-canvas .item-multi-selection-rect{fill:rgba(30,144,255,0.02);stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .selection-rect{fill:rgba(30,144,255,0.2);stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .connector-selection,.dxdi-canvas .connector-multi-selection{fill:transparent;stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .connector-selection.text,.dxdi-canvas .connector-multi-selection.text{fill:transparent;stroke-width:1}.dxdi-canvas .connector-selection{stroke-dasharray:2px}.dxdi-canvas .connector-selection-mask rect{fill:black}.dxdi-canvas .connector-selection-mask rect.background{fill:white}.dxdi-canvas .connector-selection-mask path,.dxdi-canvas .connector-selection-mask line{fill:white;stroke:black;stroke-width:4}.dxdi-canvas .connector-selection-mask text{text-anchor:middle}.dxdi-canvas .extension-line path{stroke:#1e90ff;stroke-width:1}.dxdi-canvas .extension-line path.size-line{stroke-dasharray:4px}.dxdi-canvas .extension-line text{fill:#1e90ff;font-size:0.8em;text-anchor:middle}.dxdi-canvas .extension-line.center>path.size-line,.dxdi-canvas .extension-line.page>path.size-line{stroke-dasharray:0}.dxdi-canvas .extension-line:not(.center)>path:not(:first-child){display:none}.dxdi-canvas .resize-info text{fill:rgba(0,0,0,0.8);font-size:0.8em;text-anchor:middle}.dxdi-canvas .resize-info rect{fill:#fff;stroke:rgba(0,0,0,0.3);stroke-width:1}.dxdi-canvas .dxdi-active-selection .shape{cursor:default}.dxdi-control:not(.focused) .dxdi-canvas .selection-mark{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .geometry-mark{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .item-selection-rect,.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect{fill:transparent;stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect{fill:rgba(144,144,144,0.02)}.dxdi-control:not(.focused) .dxdi-canvas .item-multi-selection-rect{fill:rgba(144,144,144,0.02);stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .connection-point,.dxdi-control:not(.focused) .dxdi-canvas .connection-point.selector,.dxdi-control:not(.focused) .dxdi-canvas .connection-mark,.dxdi-control:not(.focused) .dxdi-canvas .connection-mark.selector{display:none}.dxdi-control:not(.focused) .dxdi-canvas .connector-selection,.dxdi-control:not(.focused) .dxdi-canvas .connector-multi-selection{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .connector-point-mark,.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark{fill:#666}.dxdi-dragging,.dxdi-dragging *{user-select:none}.dxdi-canvas.export *{cursor:inherit !important;pointer-events:all !important}.dxdi-touch-action{touch-action:none}.dxdi-toolbox,.dxdi-toolbox svg{user-select:none;outline:none}.dxdi-toolbox,.dxdi-toolbox .dxdi-canvas,.dxdi-toolbox-drag-item .dxdi-canvas{width:100%;height:100%}.dxdi-toolbox .dxdi-canvas .toolbox-item rect,.dxdi-toolbox .dxdi-canvas .toolbox-item path,.dxdi-toolbox .dxdi-canvas .toolbox-item line,.dxdi-toolbox .dxdi-canvas .toolbox-item ellipse{fill:transparent;stroke:currentColor}.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-image-placeholder{opacity:0.75;fill:currentColor;stroke:none}.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-shape-text{opacity:0.25}.dxdi-toolbox .dxdi-canvas .toolbox-item text,.dxdi-toolbox-drag-item .dxdi-canvas text{font-weight:bold;font-family:"Segoe UI", "Helvetica Neue", Helvetica, arial, sans-serif;fill:currentColor}.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-image-placeholder{opacity:0.75;fill:currentColor;stroke:none}.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-shape-text{display:none}.dxdi-toolbox .toolbox-text-item{cursor:pointer;user-select:none;margin:0 0 0.6em}.dxdi-toolbox-drag-item,.dxdi-toolbox-drag-text-item{font-family:arial,helvetica,sans-serif;font-size:10pt;color:#000;position:absolute;z-index:10000;pointer-events:none !important}.dxdi-toolbox-drag-item *,.dxdi-toolbox-drag-text-item *{pointer-events:none !important}.dxdi-toolbox-drag-item text{pointer-events:none}.dxdi-toolbox-drag-text-item{background-color:#fff;border:2px solid #000;padding:0.5em}.dxdi-tb-drag-captured{display:none}.dxdi-focus-input,.dxdi-text-input-container,.dxdi-text-input{padding:0;outline:none;border:none;resize:none}.dxdi-clipboard-input,.dxdi-focus-input{position:absolute;overflow:hidden;left:-1000px !important;top:-1000px !important;opacity:0;z-index:-100;font-size:16px}.dxdi-text-input-container{display:none}.dxdi-text-input-container.shape-text,.dxdi-text-input-container.connector-text{display:inherit;position:absolute;overflow:hidden;background-color:transparent;transform-origin:0 0}.dxdi-text-input-container.shape-text .dxdi-text-input{display:table-cell;overflow:hidden;padding:1px 0 0;outline:none;background-color:transparent;font-family:arial,helvetica,sans-serif;font-size:10pt;color:#000;line-height:1.1em;text-align:center;vertical-align:middle}.dxdi-text-input-container.connector-text{overflow:visible}.dxdi-text-input-container.connector-text .dxdi-text-input{padding:2px;outline:none;height:calc(1.1em + 6px);width:calc(8em + 6px);margin-top:calc(-0.55em - 3px);margin-left:calc(-4em - 3px);background-color:#fff;border:1px solid #1e90ff;font-family:arial,helvetica,sans-serif;font-size:10pt;color:#000;line-height:1.1em;text-align:center;vertical-align:middle;overflow:hidden}.dxdi-page-shadow{fill:#808080}

package/dist/dx-diagram.js

@@ -1,9 +1,9 @@
 /*!
  * DevExpress Diagram (dx-diagram)
- * Version: 2.2.2
- * Build date: Wed Sep 13 2023
+ * Version: 2.2.4
+ * Build date: Thu Jan 18 2024
  *
- * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+ * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -6319,7 +6319,7 @@ var point_1 = __webpack_require__(8900);
 var ModelUtils_1 = __webpack_require__(4867);
 var unit_converter_1 = __webpack_require__(9291);
 var SimpleCommandBase_1 = __webpack_require__(9741);
-var __1 = __webpack_require__(3607);
+var DragHelper_1 = __webpack_require__(4742);
 var MoveCommand = (function (_super) {
     __extends(MoveCommand, _super);
     function MoveCommand() {
@@ -6332,34 +6332,11 @@ var MoveCommand = (function (_super) {
         var _this = this;
         this.control.history.beginTransaction();
         var selection = this.control.selection;
-        var selectedShapes = selection.getSelectedShapes();
-        var selectedShapesWithoutDuplicates = selectedShapes.filter(function (shape) {
-            while (shape.container) {
-                if (selectedShapes.indexOf(shape.container) !== -1)
-                    return false;
-                shape = shape.container;
-            }
-            return true;
-        });
-        selectedShapesWithoutDuplicates.forEach(function (shape) {
-            _this.permissionsProvider.addInteractingItem(shape, __1.DiagramModelOperation.MoveShape);
-            var pos = _this.getPosition(shape.position);
-            ModelUtils_1.ModelUtils.setShapePosition(_this.control.history, _this.control.model, shape, pos);
-            ModelUtils_1.ModelUtils.updateShapeAttachedConnectors(_this.control.history, _this.control.model, shape);
-            _this.permissionsProvider.clearInteractingItems();
-        });
-        var selectedItems = ModelUtils_1.ModelUtils.createSelectedItems(selection);
-        selection.getSelectedConnectors().forEach(function (connector) {
-            if (ModelUtils_1.ModelUtils.canMoveConnector(selectedItems, connector)) {
-                var startPtIndex = connector.beginItem ? 1 : 0;
-                var endPtIndex = connector.endItem ? (connector.points.length - 2) : (connector.points.length - 1);
-                for (var i = startPtIndex; i <= endPtIndex; i++) {
-                    var pos = _this.getPosition(connector.points[i]);
-                    ModelUtils_1.ModelUtils.moveConnectorPoint(_this.control.history, connector, i, pos);
-                }
-            }
-        });
-        ModelUtils_1.ModelUtils.tryUpdateModelRectangle(this.control.history);
+        var helper = new DragHelper_1.SelectionDragHelper(this.control.history, this.control.model, this.permissionsProvider, new point_1.Point(0, 0), selection.getSelectedItems(true));
+        helper.initDraggingShapes(selection.getSelectedShapes(false, true), false);
+        helper.initDraggingConnectors(selection.getSelectedConnectors(false, true), false);
+        helper.move(false, function (p) { return _this.getPosition(p); }, function () { }, function () { });
+        ModelUtils_1.ModelUtils.tryUpdateModelRectangle(this.control.history, function (offsetLeft, offsetTop) { return helper.onTryUpdateModelSize(offsetLeft, offsetTop); });
         this.control.history.endTransaction();
         return true;
     };
@@ -12876,14 +12853,11 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.MouseHandlerDragDiagramItemStateBase = exports.DraggingConnector = void 0;
-var vector_1 = __webpack_require__(9716);
-var ChangeConnectorPointsHistoryItem_1 = __webpack_require__(58);
-var ConnectorRenderPoint_1 = __webpack_require__(4717);
-var ConnectorRenderPointsContext_1 = __webpack_require__(1510);
 var ModelUtils_1 = __webpack_require__(4867);
 var ModelOperationSettings_1 = __webpack_require__(6879);
 var Event_1 = __webpack_require__(6031);
 var MouseHandlerDraggingState_1 = __webpack_require__(8816);
+var DragHelper_1 = __webpack_require__(4742);
 var DraggingConnector = (function () {
     function DraggingConnector(connector) {
         this.connector = connector;
@@ -12893,13 +12867,6 @@ var DraggingConnector = (function () {
     return DraggingConnector;
 }());
 exports.DraggingConnector = DraggingConnector;
-var DraggingShape = (function () {
-    function DraggingShape(shape) {
-        this.shape = shape;
-        this.startPosition = shape.position.clone();
-    }
-    return DraggingShape;
-}());
 var MouseHandlerDragDiagramItemStateBase = (function (_super) {
     __extends(MouseHandlerDragDiagramItemStateBase, _super);
     function MouseHandlerDragDiagramItemStateBase(handler, history, model, selection, visualizerManager) {
@@ -12919,14 +12886,11 @@ var MouseHandlerDragDiagramItemStateBase = (function (_super) {
         _super.prototype.finish.call(this);
     };
     MouseHandlerDragDiagramItemStateBase.prototype.onMouseDown = function (evt) {
-        var _this = this;
         this.handler.addDiagramItemToSelection(evt);
         this.shouldClone = this.handler.canCopySelectedItems(evt);
         this.startPoint = evt.modelPoint;
         this.initDrag();
         this.lockInitDrag = false;
-        if (!this.shouldClone)
-            this.draggingShapes.forEach(function (draggingShape) { return _this.handler.addInteractingItem(draggingShape.shape, ModelOperationSettings_1.DiagramModelOperation.MoveShape); });
         _super.prototype.onMouseDown.call(this, evt);
     };
     MouseHandlerDragDiagramItemStateBase.prototype.onMouseMove = function (evt) {
@@ -12966,48 +12930,28 @@ var MouseHandlerDragDiagramItemStateBase = (function (_super) {
     MouseHandlerDragDiagramItemStateBase.prototype.onApplyChanges = function (evt) {
         var _this = this;
         this.calculateFixedPosition(evt);
-        if (this.draggingShapes.length) {
-            var selectedShapes_1 = this.draggingShapes.map(function (ds) { return ds.shape; });
-            this.draggingShapes.forEach(function (ds) {
-                var shape = ds.shape;
-                while (shape.container) {
-                    if (selectedShapes_1.indexOf(shape.container) !== -1)
-                        return false;
-                    shape = shape.container;
-                }
-                _this.moveShape(ds, evt);
-            });
-            var firstDraggingShape = this.draggingShapes[0];
-            var offset_1 = vector_1.Vector.fromPoints(firstDraggingShape.startPosition.clone(), firstDraggingShape.shape.position.clone());
-            if (offset_1.x || offset_1.y)
-                this.draggingConnectors.forEach(function (dc) { return _this.moveConnectorCore(dc.connector, dc.startPoints, dc.startRenderContext, offset_1); });
-        }
-        else
-            this.draggingConnectors.forEach(function (x) { return _this.moveConnector(x, evt); });
+        this.dragHelper.move(this.shouldClone, function (pt) { return _this.getSnappedPoint(evt, pt); }, function () {
+            _this.visualizerManager.resetConnectionTarget();
+            _this.visualizerManager.resetConnectionPoints();
+        }, function (shape, connectionPointIndex) {
+            _this.visualizerManager.setConnectionTarget(shape, Event_1.MouseEventElementType.Shape);
+            _this.visualizerManager.setConnectionPoints(shape, Event_1.MouseEventElementType.Shape, connectionPointIndex, true);
+        });
         var container = ModelUtils_1.ModelUtils.findContainerByEventKey(this.model, this.selection, evt.source.key);
         if (container && this.allowInsertToContainer(evt, container))
             ModelUtils_1.ModelUtils.insertSelectionToContainer(this.history, this.model, this.selection, container);
         else
             ModelUtils_1.ModelUtils.removeSelectionFromContainer(this.history, this.model, this.selection);
-        this.handler.tryUpdateModelSize(function (offsetLeft, offsetTop) {
-            _this.modelConnectorsWithoutBeginItemInfo.forEach(function (pi) {
-                pi.point.x += offsetLeft;
-                pi.point.y += offsetTop;
-            });
-            _this.modelConnectorsWithoutEndItemInfo.forEach(function (pi) {
-                pi.point.x += offsetLeft;
-                pi.point.y += offsetTop;
-            });
-        });
+        this.handler.tryUpdateModelSize(function (offsetLeft, offsetTop) { return _this.dragHelper.onTryUpdateModelSize(offsetLeft, offsetTop); });
     };
     MouseHandlerDragDiagramItemStateBase.prototype.getDraggingElementKeys = function () {
-        return this.draggingShapes.map(function (x) { return x.shape.key; }).concat(this.draggingConnectors.map(function (x) { return x.connector.key; }));
+        return this.dragHelper.draggingShapes.map(function (x) { return x.shape.key; }).concat(this.dragHelper.draggingConnectors.map(function (x) { return x.connector.key; }));
     };
     MouseHandlerDragDiagramItemStateBase.prototype.getSnappedPoint = function (evt, point) {
         return this.handler.getSnappedPointOnDragDiagramItem(evt, point, this.fixedX, this.fixedY, this.startPoint);
     };
     MouseHandlerDragDiagramItemStateBase.prototype.initDrag = function () {
-        this.selectedItems = ModelUtils_1.ModelUtils.createSelectedItems(this.selection);
+        this.dragHelper = new DragHelper_1.SelectionDragHelper(this.history, this.model, this.handler.permissionsProvider, this.startPoint, this.selection.getSelectedItems(true));
         this.initDraggingShapes();
         if (!this.areValidDraggingShapes) {
             this.handler.switchToDefaultState();
@@ -13018,27 +12962,12 @@ var MouseHandlerDragDiagramItemStateBase = (function (_super) {
             this.handler.switchToDefaultState();
             return;
         }
-        this.modelConnectorsWithoutBeginItemInfo = this.createModelConnectorsWithoutBeginItemInfo();
-        this.modelConnectorsWithoutEndItemInfo = this.createModelConnectorsWithoutEndItemInfo();
     };
     MouseHandlerDragDiagramItemStateBase.prototype.initDraggingShapes = function () {
-        this.draggingShapes = this.selection.getSelectedShapes(false, true).map(function (s) { return new DraggingShape(s); });
+        this.dragHelper.initDraggingShapes(this.selection.getSelectedShapes(false, true), this.shouldClone);
     };
     MouseHandlerDragDiagramItemStateBase.prototype.initDraggingConnectors = function () {
-        var _this = this;
-        this.draggingConnectors = [];
-        this.draggingConnectorsIndexByKey = {};
-        this.selection.getSelectedConnectors(false, true).forEach(function (c) { return _this.registerConnector(c); });
-        if (this.shouldClone)
-            return;
-        this.draggingShapes.forEach(function (x) {
-            var attachedConnectors = x.shape.attachedConnectors;
-            if (attachedConnectors)
-                attachedConnectors.forEach(function (c) {
-                    if (!_this.containsDraggingConnectorByKey(c.key))
-                        _this.registerConnector(c);
-                });
-        });
+        this.dragHelper.initDraggingConnectors(this.selection.getSelectedConnectors(false, true), this.shouldClone);
     };
     MouseHandlerDragDiagramItemStateBase.prototype.copySelection = function () {
         var _this = this;
@@ -13060,87 +12989,11 @@ var MouseHandlerDragDiagramItemStateBase = (function (_super) {
                 this.fixedY = true;
         }
     };
-    MouseHandlerDragDiagramItemStateBase.prototype.containsDraggingConnectorByKey = function (key) {
-        return this.draggingConnectorsIndexByKey[key] !== undefined;
-    };
     MouseHandlerDragDiagramItemStateBase.prototype.allowInsertToContainer = function (evt, container) {
         if (this.handler.canMultipleSelection(evt))
             return false;
         return container && container.expanded && ModelUtils_1.ModelUtils.canInsertSelectionToContainer(this.model, this.selection, container);
     };
-    MouseHandlerDragDiagramItemStateBase.prototype.registerConnector = function (connector) {
-        this.draggingConnectorsIndexByKey[connector.key] = this.draggingConnectors.push(new DraggingConnector(connector)) - 1;
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.createModelConnectorsWithoutBeginItemInfo = function () {
-        var _this = this;
-        var connectors = this.model.findConnectorsCore(function (c) { return !c.beginItem && !_this.containsDraggingConnectorByKey(c.key); });
-        return connectors.map(function (c) {
-            return {
-                connector: c,
-                point: c.points[0].clone()
-            };
-        });
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.createModelConnectorsWithoutEndItemInfo = function () {
-        var _this = this;
-        var connectors = this.model.findConnectorsCore(function (c) { return !c.endItem && !_this.containsDraggingConnectorByKey(c.key); });
-        return connectors.map(function (c) {
-            return {
-                connector: c,
-                point: c.points[c.points.length - 1].clone()
-            };
-        });
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.moveConnector = function (dc, evt) {
-        var startPoints = dc.startPoints;
-        var offset = vector_1.Vector.fromPoints(startPoints[0].clone(), this.getSnappedPoint(evt, startPoints[0]).clone());
-        if (offset.x || offset.y)
-            this.moveConnectorCore(dc.connector, startPoints, dc.startRenderContext, offset);
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.moveConnectorCore = function (connector, startPoints, startRenderContext, offset) {
-        if (this.shouldClone || ModelUtils_1.ModelUtils.canMoveConnector(this.selectedItems, connector))
-            this.offsetConnector(connector, startPoints, startRenderContext, offset);
-        else
-            this.changeConnector(connector);
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.moveShape = function (ds, evt) {
-        var _this = this;
-        var shape = ds.shape;
-        var position = this.getSnappedPoint(evt, ds.startPosition);
-        ModelUtils_1.ModelUtils.setShapePosition(this.history, this.model, shape, position);
-        ModelUtils_1.ModelUtils.updateMovingShapeConnections(this.history, shape, this.modelConnectorsWithoutBeginItemInfo, this.modelConnectorsWithoutEndItemInfo, function () {
-            _this.visualizerManager.resetConnectionTarget();
-            _this.visualizerManager.resetConnectionPoints();
-        }, function (shape, connectionPointIndex) {
-            _this.visualizerManager.setConnectionTarget(shape, Event_1.MouseEventElementType.Shape);
-            _this.visualizerManager.setConnectionPoints(shape, Event_1.MouseEventElementType.Shape, connectionPointIndex, true);
-        }, function (connector) { return _this.handler.addInteractingItem(connector); });
-        if (!this.draggingConnectors.filter(function (dc) { return !!_this.selectedItems[dc.connector.key]; }).length)
-            ModelUtils_1.ModelUtils.updateShapeAttachedConnectors(this.history, this.model, shape);
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.offsetConnector = function (connector, startPoints, startRenderContext, offset) {
-        var _this = this;
-        var newPoints = startPoints.map(function (p) { return _this.offsetPoint(p, offset); });
-        if (!newPoints[0].equals(connector.points[0]))
-            this.history.addAndRedo(new ChangeConnectorPointsHistoryItem_1.ChangeConnectorPointsHistoryItem(connector.key, newPoints, this.offsetRenderContext(startRenderContext, offset)));
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.offsetRenderContext = function (context, offset) {
-        var _this = this;
-        if (context === undefined)
-            return undefined;
-        return new ConnectorRenderPointsContext_1.ConnectorRenderPointsContext(context.renderPoints.map(function (p) {
-            var newPoint = _this.offsetPoint(p, offset);
-            return new ConnectorRenderPoint_1.ConnectorRenderPoint(newPoint.x, newPoint.y, p.pointIndex, p.skipped);
-        }), true, context.actualRoutingMode);
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.offsetPoint = function (point, offset) {
-        var pointOffset = vector_1.Vector.fromPoints(point, this.startPoint);
-        return this.startPoint.clone().offset(offset.x - pointOffset.x, offset.y - pointOffset.y);
-    };
-    MouseHandlerDragDiagramItemStateBase.prototype.changeConnector = function (connector) {
-        ModelUtils_1.ModelUtils.tryRemoveConnectorIntermediatePoints(this.history, connector);
-        ModelUtils_1.ModelUtils.updateConnectorAttachedPoints(this.history, this.model, connector);
-    };
     return MouseHandlerDragDiagramItemStateBase;
 }(MouseHandlerDraggingState_1.MouseHandlerDraggingState));
 exports.MouseHandlerDragDiagramItemStateBase = MouseHandlerDragDiagramItemStateBase;
@@ -13802,12 +13655,12 @@ var MouseHandlerMoveConnectorState = (function (_super) {
         get: function () {
             var _this = this;
             if (this.shouldClone)
-                return this.draggingShapes.length > 0 || this.draggingConnectors.length > 0;
-            if (!this.draggingConnectors.length)
+                return this.dragHelper.draggingShapes.length > 0 || this.dragHelper.draggingConnectors.length > 0;
+            if (!this.dragHelper.draggingConnectors.length)
                 return false;
-            if (!this.draggingShapes.length)
-                return !this.draggingConnectors.some(function (x) { return !ModelUtils_1.ModelUtils.canMoveConnector(_this.selectedItems, x.connector); });
-            return ModelUtils_1.ModelUtils.canMoveConnector(this.selectedItems, this.draggingConnectors[this.draggingConnectorsIndexByKey[this.handler.mouseDownEvent.source.key]].connector);
+            if (!this.dragHelper.draggingShapes.length)
+                return !this.dragHelper.draggingConnectors.some(function (x) { return !ModelUtils_1.ModelUtils.canMoveConnector(_this.dragHelper.selectedItems, x.connector); });
+            return ModelUtils_1.ModelUtils.canMoveConnector(this.dragHelper.selectedItems, this.dragHelper.draggingConnectors[this.dragHelper.draggingConnectorsIndexByKey[this.handler.mouseDownEvent.source.key]].connector);
         },
         enumerable: false,
         configurable: true
@@ -13912,7 +13765,7 @@ var MouseHandlerMoveShapeState = (function (_super) {
     }
     Object.defineProperty(MouseHandlerMoveShapeState.prototype, "areValidDraggingShapes", {
         get: function () {
-            return this.shouldClone || this.draggingShapes.length > 0;
+            return this.shouldClone || this.dragHelper.draggingShapes.length > 0;
         },
         enumerable: false,
         configurable: true
@@ -22768,6 +22621,9 @@ var ConnectorRenderPoint = (function (_super) {
         return this;
     };
     ConnectorRenderPoint.prototype.clone = function () { return new ConnectorRenderPoint(this.x, this.y, this.pointIndex, this.skipped); };
+    ConnectorRenderPoint.equal = function (p1, p2) {
+        return p1.equals(p2) && p1.pointIndex === p2.pointIndex && p1.skipped === p2.skipped;
+    };
     return ConnectorRenderPoint;
 }(point_1.Point));
 exports.ConnectorRenderPoint = ConnectorRenderPoint;
@@ -24443,6 +24299,178 @@ var DiagramItem = (function () {
 exports.DiagramItem = DiagramItem;
 
 
+/***/ }),
+
+/***/ 4742:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.DraggingConnector = exports.SelectionDragHelper = void 0;
+var vector_1 = __webpack_require__(9716);
+var ChangeConnectorPointsHistoryItem_1 = __webpack_require__(58);
+var ConnectorRenderPointsContext_1 = __webpack_require__(1510);
+var ModelUtils_1 = __webpack_require__(4867);
+var ConnectorRenderPoint_1 = __webpack_require__(4717);
+var ModelOperationSettings_1 = __webpack_require__(6879);
+var SelectionDragHelper = (function () {
+    function SelectionDragHelper(history, model, permissionsProvider, startPoint, selectedItems) {
+        var _this = this;
+        this.history = history;
+        this.model = model;
+        this.permissionsProvider = permissionsProvider;
+        this.startPoint = startPoint;
+        this.draggingShapes = [];
+        this.draggingConnectors = [];
+        this.selectedItems = {};
+        this.draggingConnectorsIndexByKey = {};
+        selectedItems.forEach(function (i) { return _this.selectedItems[i.key] = i; });
+    }
+    SelectionDragHelper.prototype.initDraggingShapes = function (shapes, shouldClone) {
+        var _this = this;
+        this.draggingShapes = shapes.map(function (s) { return new DraggingShape(s); });
+        if (!shouldClone)
+            this.draggingShapes.forEach(function (draggingShape) { return _this.permissionsProvider.addInteractingItem(draggingShape.shape, ModelOperationSettings_1.DiagramModelOperation.MoveShape); });
+    };
+    SelectionDragHelper.prototype.initDraggingConnectors = function (connectors, shouldClone) {
+        var _this = this;
+        this.draggingConnectors = [];
+        this.draggingConnectorsIndexByKey = {};
+        connectors.forEach(function (c) { return _this.registerConnector(c); });
+        if (!shouldClone)
+            this.draggingShapes.forEach(function (x) {
+                var attachedConnectors = x.shape.attachedConnectors;
+                if (attachedConnectors)
+                    attachedConnectors.forEach(function (c) {
+                        if (!_this.containsDraggingConnectorByKey(c.key))
+                            _this.registerConnector(c);
+                    });
+            });
+        this.modelConnectorsWithoutBeginItemInfo = this.createModelConnectorsWithoutBeginItemInfo();
+        this.modelConnectorsWithoutEndItemInfo = this.createModelConnectorsWithoutEndItemInfo();
+    };
+    SelectionDragHelper.prototype.move = function (shouldClone, getMovePoint, resetTargetCallback, updateTargetCallback) {
+        var _this = this;
+        if (this.draggingShapes.length) {
+            var selectedShapes_1 = this.draggingShapes.map(function (ds) { return ds.shape; });
+            this.draggingShapes.forEach(function (ds) {
+                var shape = ds.shape;
+                while (shape.container) {
+                    if (selectedShapes_1.indexOf(shape.container) !== -1)
+                        return false;
+                    shape = shape.container;
+                }
+                _this.moveShape(ds, getMovePoint, resetTargetCallback, updateTargetCallback);
+            });
+            var firstDraggingShape = this.draggingShapes[0];
+            var offset_1 = vector_1.Vector.fromPoints(firstDraggingShape.startPosition.clone(), firstDraggingShape.shape.position.clone());
+            if (offset_1.x || offset_1.y)
+                this.draggingConnectors.forEach(function (dc) { return _this.moveConnectorCore(dc.connector, dc.startPoints, dc.startRenderContext, offset_1, shouldClone); });
+        }
+        else
+            this.draggingConnectors.forEach(function (x) { return _this.moveConnector(x, shouldClone, getMovePoint); });
+    };
+    SelectionDragHelper.prototype.containsDraggingConnectorByKey = function (key) {
+        return this.draggingConnectorsIndexByKey[key] !== undefined;
+    };
+    SelectionDragHelper.prototype.onTryUpdateModelSize = function (offsetLeft, offsetTop) {
+        this.modelConnectorsWithoutBeginItemInfo.forEach(function (pi) {
+            pi.point.x += offsetLeft;
+            pi.point.y += offsetTop;
+        });
+        this.modelConnectorsWithoutEndItemInfo.forEach(function (pi) {
+            pi.point.x += offsetLeft;
+            pi.point.y += offsetTop;
+        });
+    };
+    SelectionDragHelper.prototype.moveConnector = function (dc, shouldClone, getMovePoint) {
+        var startPoints = dc.startPoints;
+        var offset = vector_1.Vector.fromPoints(startPoints[0].clone(), getMovePoint(startPoints[0]).clone());
+        if (offset.x || offset.y)
+            this.moveConnectorCore(dc.connector, startPoints, dc.startRenderContext, offset, shouldClone);
+    };
+    SelectionDragHelper.prototype.moveConnectorCore = function (connector, startPoints, startRenderContext, offset, shouldClone) {
+        if (shouldClone || ModelUtils_1.ModelUtils.canMoveConnector(this.selectedItems, connector))
+            this.offsetConnector(connector, startPoints, startRenderContext, offset);
+        else
+            this.changeConnector(connector);
+    };
+    SelectionDragHelper.prototype.moveShape = function (ds, getMovePoint, resetTargetCallback, updateTargetCallback) {
+        var _this = this;
+        var shape = ds.shape;
+        var position = getMovePoint(ds.startPosition);
+        ModelUtils_1.ModelUtils.setShapePosition(this.history, this.model, shape, position);
+        ModelUtils_1.ModelUtils.updateMovingShapeConnections(this.history, shape, this.modelConnectorsWithoutBeginItemInfo, this.modelConnectorsWithoutEndItemInfo, resetTargetCallback, updateTargetCallback, function (connector) { return _this.permissionsProvider.addInteractingItem(connector); });
+        if (!this.draggingConnectors.filter(function (dc) { return !!_this.selectedItems[dc.connector.key]; }).length)
+            ModelUtils_1.ModelUtils.updateShapeAttachedConnectors(this.history, this.model, shape);
+    };
+    SelectionDragHelper.prototype.offsetConnector = function (connector, startPoints, startRenderContext, offset) {
+        var _this = this;
+        var newPoints = startPoints.map(function (p) { return _this.offsetPoint(p, offset); });
+        if (!newPoints[0].equals(connector.points[0]))
+            this.history.addAndRedo(new ChangeConnectorPointsHistoryItem_1.ChangeConnectorPointsHistoryItem(connector.key, newPoints, this.offsetRenderContext(startRenderContext, offset)));
+    };
+    SelectionDragHelper.prototype.offsetRenderContext = function (context, offset) {
+        var _this = this;
+        if (context === undefined)
+            return undefined;
+        return new ConnectorRenderPointsContext_1.ConnectorRenderPointsContext(context.renderPoints.map(function (p) {
+            var newPoint = _this.offsetPoint(p, offset);
+            return new ConnectorRenderPoint_1.ConnectorRenderPoint(newPoint.x, newPoint.y, p.pointIndex, p.skipped);
+        }), true, context.actualRoutingMode);
+    };
+    SelectionDragHelper.prototype.offsetPoint = function (point, offset) {
+        var pointOffset = vector_1.Vector.fromPoints(point, this.startPoint);
+        return this.startPoint.clone().offset(offset.x - pointOffset.x, offset.y - pointOffset.y);
+    };
+    SelectionDragHelper.prototype.changeConnector = function (connector) {
+        ModelUtils_1.ModelUtils.tryRemoveConnectorIntermediatePoints(this.history, connector);
+        ModelUtils_1.ModelUtils.updateConnectorAttachedPoints(this.history, this.model, connector);
+    };
+    SelectionDragHelper.prototype.registerConnector = function (connector) {
+        this.draggingConnectorsIndexByKey[connector.key] = this.draggingConnectors.push(new DraggingConnector(connector)) - 1;
+    };
+    SelectionDragHelper.prototype.createModelConnectorsWithoutBeginItemInfo = function () {
+        var _this = this;
+        var connectors = this.model.findConnectorsCore(function (c) { return !c.beginItem && !_this.containsDraggingConnectorByKey(c.key); });
+        return connectors.map(function (c) {
+            return {
+                connector: c,
+                point: c.points[0].clone()
+            };
+        });
+    };
+    SelectionDragHelper.prototype.createModelConnectorsWithoutEndItemInfo = function () {
+        var _this = this;
+        var connectors = this.model.findConnectorsCore(function (c) { return !c.endItem && !_this.containsDraggingConnectorByKey(c.key); });
+        return connectors.map(function (c) {
+            return {
+                connector: c,
+                point: c.points[c.points.length - 1].clone()
+            };
+        });
+    };
+    return SelectionDragHelper;
+}());
+exports.SelectionDragHelper = SelectionDragHelper;
+var DraggingConnector = (function () {
+    function DraggingConnector(connector) {
+        this.connector = connector;
+        this.startPoints = connector.points.map(function (x) { return x.clone(); });
+        this.startRenderContext = connector.tryCreateRenderPointsContext();
+    }
+    return DraggingConnector;
+}());
+exports.DraggingConnector = DraggingConnector;
+var DraggingShape = (function () {
+    function DraggingShape(shape) {
+        this.shape = shape;
+        this.startPosition = shape.position.clone();
+    }
+    return DraggingShape;
+}());
+
+
 /***/ }),
 
 /***/ 6613:
@@ -25287,14 +25315,14 @@ var ModelUtils = (function () {
     ModelUtils.deleteConnectorUnnecessaryPoints = function (history, connector) {
         var oldRenderPoints = connector.getRenderPoints(true).map(function (p) { return p.clone(); });
         if (connector.properties.lineOption === ConnectorProperties_1.ConnectorLineOption.Straight) {
-            var unnecessaryPoints = ModelUtils.createUnnecessaryRenderPoints(oldRenderPoints.filter(function (p) { return !p.skipped; }).map(function (p) { return p.clone(); }), connector.skippedRenderPoints, function (removedPoint) { return ModelUtils.findFirstPointIndex(oldRenderPoints, function (p) { return p.equals(removedPoint); }); });
+            var unnecessaryPoints = ModelUtils.createUnnecessaryRenderPoints(oldRenderPoints.filter(function (p) { return !p.skipped; }).map(function (p) { return p.clone(); }), connector.skippedRenderPoints, function (removedPoint) { return ModelUtils.findFirstPointIndex(oldRenderPoints, function (p) { return ConnectorRenderPoint_1.ConnectorRenderPoint.equal(p, removedPoint); }); });
             if (Object.keys(unnecessaryPoints).length)
                 history.addAndRedo(new ChangeConnectorPointsHistoryItem_1.ReplaceConnectorPointsHistoryItem(connector.key, ModelUtils.createNecessaryPoints(connector.points.map(function (p) { return p.clone(); }), unnecessaryPoints)));
         }
         else {
             var oldContext = connector.tryCreateRenderPointsContext(true);
             var newRenderPoints = oldRenderPoints.filter(function (p) { return !p.skipped; }).map(function (p) { return p.clone(); });
-            var unnecessaryPoints = ModelUtils.createUnnecessaryRightAngleRenderPoints(newRenderPoints, connector.skippedRenderPoints, function (removedPoint) { return ModelUtils.findFirstPointIndex(oldRenderPoints, function (p) { return p.equals(removedPoint); }); });
+            var unnecessaryPoints = ModelUtils.createUnnecessaryRightAngleRenderPoints(newRenderPoints, connector.skippedRenderPoints, function (removedPoint) { return ModelUtils.findFirstPointIndex(oldRenderPoints, function (p) { return ConnectorRenderPoint_1.ConnectorRenderPoint.equal(p, removedPoint); }); });
             if (Object.keys(unnecessaryPoints).length) {
                 var newPoints = ModelUtils.createNecessaryPoints(connector.points.map(function (p) { return p.clone(); }), unnecessaryPoints);
                 var newRenderContext = new ConnectorRenderPointsContext_1.ConnectorRenderPointsContext(ModelUtils.validateRenderPointIndexes(newPoints, newRenderPoints, 0), oldContext.lockCreateRenderPoints, oldContext.actualRoutingMode);
@@ -25368,15 +25396,16 @@ var ModelUtils = (function () {
     };
     ModelUtils.collectNotSkippedRenderPoints = function (targetRenderPoints, sourceRenderPoints, removedPoint, removedIndex, getPosition, predicate) {
         if (predicate === void 0) { predicate = function (_) { return true; }; }
-        if (!predicate(removedPoint))
-            return false;
-        var positionIndex = getPosition(removedPoint);
-        if (targetRenderPoints[positionIndex] === undefined) {
-            targetRenderPoints[positionIndex] = removedPoint;
-            removedPoint.skipped = true;
-            sourceRenderPoints.splice(removedIndex, 1);
+        if (predicate(removedPoint)) {
+            var positionIndex = getPosition(removedPoint);
+            if (targetRenderPoints[positionIndex] === undefined) {
+                targetRenderPoints[positionIndex] = removedPoint;
+                removedPoint.skipped = true;
+                sourceRenderPoints.splice(removedIndex, 1);
+                return true;
+            }
         }
-        return true;
+        return false;
     };
     ModelUtils.removeUnnecessaryPoint = function (points, point, removedIndex, removeExcessPoints) {
         if (removeExcessPoints && point.pointIndex === -1) {

package/dist/dx-diagram.min.css

@@ -1,8 +1,8 @@
 /*!
  * DevExpress Diagram (dx-diagram.min)
- * Version: 2.2.2
- * Build date: Wed Sep 13 2023
+ * Version: 2.2.4
+ * Build date: Thu Jan 18 2024
  *
- * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
+ * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
  */.dxdi-control{box-sizing:border-box;overflow:visible;position:relative}.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll{cursor:grab!important}.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll .shape,.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll .shape-expand-btn,.dxdi-control.dxdi-read-only .dxdi-canvas.dxdi-drag-scroll text{cursor:grab}.dxdi-control.dxdi-read-only .dxdi-canvas .shape,.dxdi-control.dxdi-read-only .dxdi-canvas .shape-expand-btn,.dxdi-control.dxdi-read-only .dxdi-canvas text{cursor:default}.dxdi-control .dxdi-canvas{background-color:#d9d9d9;display:block;overflow:hidden;transform-origin:0 0}.dxdi-canvas.dxdi-drag-scroll{cursor:grab!important}.dxdi-canvas.dxdi-drag-scroll .connection-point,.dxdi-canvas.dxdi-drag-scroll .connector,.dxdi-canvas.dxdi-drag-scroll .connector text,.dxdi-canvas.dxdi-drag-scroll .connector-side-mark.horizontal,.dxdi-canvas.dxdi-drag-scroll .connector-side-mark.vertical,.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="4"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="5"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="1"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="2"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="3"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="4"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="5"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="6"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="7"],.dxdi-canvas.dxdi-drag-scroll .selection-mark[data-type="9"][data-value="8"],.dxdi-canvas.dxdi-drag-scroll .shape,.dxdi-canvas.dxdi-drag-scroll .shape .shape-expand-btn{cursor:grab}.dxdi-canvas *{user-select:none}.dxdi-canvas text{font-family:arial,helvetica,sans-serif;font-size:10pt}.dxdi-canvas .page{fill:#fff}.dxdi-canvas .pages-grid-line{fill:none;stroke:rgba(0,0,0,.15);stroke-dasharray:8;stroke-width:2}.dxdi-canvas .grid-inner-line,.dxdi-canvas .grid-outer-line{fill:none}.dxdi-canvas .grid-outer-line{stroke:rgba(0,0,0,.1)}.dxdi-canvas .grid-inner-line{stroke:rgba(0,0,0,.05)}.dxdi-canvas .shape,.dxdi-canvas .toolbox-item{pointer-events:bounding-box}.dxdi-canvas .shape ellipse,.dxdi-canvas .shape line,.dxdi-canvas .shape path,.dxdi-canvas .shape rect,.dxdi-canvas .toolbox-item ellipse,.dxdi-canvas .toolbox-item line,.dxdi-canvas .toolbox-item path,.dxdi-canvas .toolbox-item rect{fill:#fff;stroke-width:2;stroke:#000}.dxdi-canvas .shape text,.dxdi-canvas .toolbox-item text{fill:#000;text-anchor:middle}.dxdi-canvas .shape rect.selector,.dxdi-canvas .toolbox-item rect.selector{stroke-width:48;stroke:transparent;fill:transparent;pointer-events:auto}.dxdi-canvas .shape.not-valid ellipse,.dxdi-canvas .shape.not-valid line,.dxdi-canvas .shape.not-valid path,.dxdi-canvas .shape.not-valid rect{stroke:red!important}.dxdi-canvas .shape{cursor:move}.dxdi-canvas .shape.text-input>text{display:none}.dxdi-canvas .shape.container>rect:first-child{fill:transparent}.dxdi-canvas .shape .shape-expand-btn{cursor:pointer}.dxdi-canvas .shape .shape-expand-btn>path,.dxdi-canvas .shape .shape-expand-btn>rect{stroke-dasharray:initial!important}.dxdi-canvas .shape .shape-expand-btn>path{stroke-width:2!important}.dxdi-canvas .shape .dxdi-image .dxdi-spinner{animation:loading-spinner 1s linear infinite}.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse{stroke:#000;stroke-opacity:.2}.dxdi-canvas .shape .dxdi-image .dxdi-spinner path{stroke:#fd7010;stroke-linecap:round}.dxdi-canvas .shape .dxdi-image .dxdi-spinner ellipse,.dxdi-canvas .shape .dxdi-image .dxdi-spinner path{fill:none;stroke-width:5}@keyframes loading-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dxdi-canvas .shape .dxdi-image .dxdi-user .dxdi-background{fill:#000;stroke:none;opacity:.2}.dxdi-canvas .shape .dxdi-image .dxdi-user ellipse,.dxdi-canvas .shape .dxdi-image .dxdi-user path{fill:#fff;stroke:none}.dxdi-canvas .shape .dxdi-image .dxdi-warning ellipse{stroke:none;fill:#ee1616}.dxdi-canvas .shape .dxdi-image .dxdi-warning rect{stroke:none;fill:#fff}.dxdi-canvas .shape.locked,.dxdi-canvas .shape.locked .shape-expand-btn,.dxdi-canvas .shape.locked+.container-children .shape,.dxdi-canvas .shape.locked+.container-children .shape .shape-expand-btn{cursor:inherit!important}.dxdi-canvas .container-children .shape .selector{stroke-width:8}.dxdi-canvas .toolbox-item{cursor:pointer}.dxdi-canvas .toolbox-item .selector{stroke-width:0!important}.dxdi-canvas .connector line,.dxdi-canvas .connector path{stroke-width:2;stroke:#000;stroke-linejoin:round;pointer-events:stroke}.dxdi-canvas .connector path:not(.outlined-line-ending):not(.filled-line-ending){fill:none!important}.dxdi-canvas .connector path.outlined-line-ending{fill:#fff}.dxdi-canvas .connector path.filled-line-ending{fill:#000}.dxdi-canvas .connector line.selector,.dxdi-canvas .connector path.selector{stroke-width:16;stroke:transparent}.dxdi-canvas .connector text{fill:#000;text-anchor:middle;cursor:move}.dxdi-canvas .connector .text-filter-flood{flood-color:#fff}.dxdi-canvas .connector.not-valid line,.dxdi-canvas .connector.not-valid path{stroke:red!important}.dxdi-canvas .connector.can-move{cursor:move}.dxdi-canvas .connection-mark,.dxdi-canvas .connection-point,.dxdi-canvas .connector-point-mark,.dxdi-canvas .connector-side-mark,.dxdi-canvas .geometry-mark,.dxdi-canvas .selection-mark{fill:#fff;stroke-width:2}.dxdi-canvas .selection-mark{stroke:#1e90ff}.dxdi-canvas .selection-mark[data-type="9"][data-value="1"]{cursor:nw-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="2"]{cursor:ne-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="3"]{cursor:se-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="4"]{cursor:sw-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="5"]{cursor:n-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="6"]{cursor:e-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="7"]{cursor:s-resize}.dxdi-canvas .selection-mark[data-type="9"][data-value="8"]{cursor:w-resize}.dxdi-canvas .selection-mark[data-type="4"],.dxdi-canvas .selection-mark[data-type="5"]{cursor:move}.dxdi-canvas .locked-selection-mark{fill:#fff;stroke-width:1;stroke:#666}.dxdi-canvas .geometry-mark{stroke:#daa520;cursor:pointer}.dxdi-canvas .connection-target,.dxdi-canvas .container-target{fill:transparent;stroke:orchid;stroke-width:2;pointer-events:none}.dxdi-canvas .connection-point{stroke:orchid;cursor:crosshair}.dxdi-canvas .connection-point.not-valid{stroke:grey!important;display:none}.dxdi-canvas .connection-mark{stroke:orchid;cursor:crosshair}.dxdi-canvas .connection-mark.selector,.dxdi-canvas .connection-point.selector{stroke-width:10px;stroke:transparent;fill:transparent}.dxdi-canvas .connection-mark.active,.dxdi-canvas .connection-point.active{fill:orchid}.dxdi-canvas .connector-point-mark,.dxdi-canvas .connector-side-mark{stroke:#1e90ff;cursor:move}.dxdi-canvas .connector-point-mark.disabled{cursor:default;display:none}.dxdi-canvas .connector-side-mark{fill:#1e90ff}.dxdi-canvas .connector-side-mark.vertical{cursor:col-resize}.dxdi-canvas .connector-side-mark.horizontal{cursor:row-resize}.dxdi-canvas .item-selection-rect,.dxdi-canvas .items-selection-rect{fill:transparent;stroke-width:1;stroke:#1e90ff;stroke-dasharray:2px;pointer-events:none}.dxdi-canvas .items-selection-rect{fill:rgba(30,144,255,.02)}.dxdi-canvas .item-multi-selection-rect{fill:rgba(30,144,255,.02);stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .selection-rect{fill:rgba(30,144,255,.2);stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .connector-multi-selection,.dxdi-canvas .connector-selection{fill:transparent;stroke-width:1;stroke:#1e90ff;pointer-events:none}.dxdi-canvas .connector-multi-selection.text,.dxdi-canvas .connector-selection.text{fill:transparent;stroke-width:1}.dxdi-canvas .connector-selection{stroke-dasharray:2px}.dxdi-canvas .connector-selection-mask rect{fill:#000}.dxdi-canvas .connector-selection-mask rect.background{fill:#fff}.dxdi-canvas .connector-selection-mask line,.dxdi-canvas .connector-selection-mask path{fill:#fff;stroke:#000;stroke-width:4}.dxdi-canvas .connector-selection-mask text{text-anchor:middle}.dxdi-canvas .extension-line path{stroke:#1e90ff;stroke-width:1}.dxdi-canvas .extension-line path.size-line{stroke-dasharray:4px}.dxdi-canvas .extension-line text{fill:#1e90ff;text-anchor:middle;font-size:.8em}.dxdi-canvas .extension-line.center>path.size-line,.dxdi-canvas .extension-line.page>path.size-line{stroke-dasharray:0}.dxdi-canvas .extension-line:not(.center)>path:not(:first-child){display:none}.dxdi-canvas .resize-info text{fill:rgba(0,0,0,.8);text-anchor:middle;font-size:.8em}.dxdi-canvas .resize-info rect{fill:#fff;stroke:rgba(0,0,0,.3);stroke-width:1}.dxdi-canvas .dxdi-active-selection .shape{cursor:default}.dxdi-control:not(.focused) .dxdi-canvas .geometry-mark,.dxdi-control:not(.focused) .dxdi-canvas .selection-mark{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .item-selection-rect,.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect{fill:transparent;stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect{fill:hsla(0,0%,56%,.02)}.dxdi-control:not(.focused) .dxdi-canvas .item-multi-selection-rect{fill:hsla(0,0%,56%,.02);stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .connection-mark,.dxdi-control:not(.focused) .dxdi-canvas .connection-mark.selector,.dxdi-control:not(.focused) .dxdi-canvas .connection-point,.dxdi-control:not(.focused) .dxdi-canvas .connection-point.selector{display:none}.dxdi-control:not(.focused) .dxdi-canvas .connector-multi-selection,.dxdi-control:not(.focused) .dxdi-canvas .connector-point-mark,.dxdi-control:not(.focused) .dxdi-canvas .connector-selection,.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark{stroke:#666}.dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark{fill:#666}.dxdi-dragging,.dxdi-dragging *{user-select:none}.dxdi-canvas.export *{cursor:inherit!important;pointer-events:all!important}.dxdi-touch-action{touch-action:none}.dxdi-toolbox,.dxdi-toolbox svg{outline:none;user-select:none}.dxdi-toolbox,.dxdi-toolbox .dxdi-canvas,.dxdi-toolbox-drag-item .dxdi-canvas{height:100%;width:100%}.dxdi-toolbox .dxdi-canvas .toolbox-item ellipse,.dxdi-toolbox .dxdi-canvas .toolbox-item line,.dxdi-toolbox .dxdi-canvas .toolbox-item path,.dxdi-toolbox .dxdi-canvas .toolbox-item rect{fill:transparent;stroke:currentColor}.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-image-placeholder{fill:currentColor;stroke:none;opacity:.75}.dxdi-toolbox .dxdi-canvas .toolbox-item .dxdi-shape-text{opacity:.25}.dxdi-toolbox .dxdi-canvas .toolbox-item text,.dxdi-toolbox-drag-item .dxdi-canvas text{fill:currentColor;font-family:Segoe UI,Helvetica Neue,Helvetica,arial,sans-serif;font-weight:700}.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-image-placeholder{fill:currentColor;stroke:none;opacity:.75}.dxdi-toolbox-drag-item .dxdi-canvas .dxdi-shape-text{display:none}.dxdi-toolbox .toolbox-text-item{cursor:pointer;margin:0 0 .6em;user-select:none}.dxdi-toolbox-drag-item,.dxdi-toolbox-drag-text-item{color:#000;font-family:arial,helvetica,sans-serif;font-size:10pt;pointer-events:none!important;position:absolute;z-index:10000}.dxdi-toolbox-drag-item *,.dxdi-toolbox-drag-text-item *{pointer-events:none!important}.dxdi-toolbox-drag-item text{pointer-events:none}.dxdi-toolbox-drag-text-item{background-color:#fff;border:2px solid #000;padding:.5em}.dxdi-tb-drag-captured{display:none}.dxdi-focus-input,.dxdi-text-input,.dxdi-text-input-container{border:none;outline:none;padding:0;resize:none}.dxdi-clipboard-input,.dxdi-focus-input{font-size:16px;left:-1000px!important;opacity:0;overflow:hidden;position:absolute;top:-1000px!important;z-index:-100}.dxdi-text-input-container{display:none}.dxdi-text-input-container.connector-text,.dxdi-text-input-container.shape-text{background-color:transparent;display:inherit;overflow:hidden;position:absolute;transform-origin:0 0}.dxdi-text-input-container.shape-text .dxdi-text-input{background-color:transparent;color:#000;display:table-cell;font-family:arial,helvetica,sans-serif;font-size:10pt;line-height:1.1em;outline:none;overflow:hidden;padding:1px 0 0;text-align:center;vertical-align:middle}.dxdi-text-input-container.connector-text{overflow:visible}.dxdi-text-input-container.connector-text .dxdi-text-input{background-color:#fff;border:1px solid #1e90ff;color:#000;font-family:arial,helvetica,sans-serif;font-size:10pt;height:calc(1.1em + 6px);line-height:1.1em;margin-left:calc(-4em - 3px);margin-top:calc(-.55em - 3px);outline:none;overflow:hidden;padding:2px;text-align:center;vertical-align:middle;width:calc(8em + 6px)}.dxdi-page-shadow{fill:grey}