fixed attachment of connectors when dragging edge point

ishubin · Feb 11, 2025 · 2f22865 · 2f22865
1 parent fe91746
commit 2f22865
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/src/ui/components/editor/states/StateDragItem.js b/src/ui/components/editor/states/StateDragItem.js
@@ -28,15 +28,17 @@ const ITEM_MODIFICATION_CONTEXT_MOVED = {
     moved: true,
     rotated: false,
     resized: false,
-    id: ''
+    id: '',
+    itemId: null
 };
 
 const ITEM_MODIFICATION_CONTEXT_CONTROL_POINT = {
     moved: false,
     rotated: false,
     resized: false,
     controlPoint: true,
-    id: ''
+    id: '',
+    itemId: null
 };
 const ITEM_MODIFICATION_CONTEXT_DEFAULT = ITEM_MODIFICATION_CONTEXT_MOVED;
 
@@ -174,7 +176,11 @@ class DragControlPointState extends SubState {
 
     mouseUp(x, y, mx, my, object, event) {
         this.item.meta.revision += 1;
-        this.schemeContainer.updateEditBoxItems(this.schemeContainer.editBox, IS_NOT_SOFT, ITEM_MODIFICATION_CONTEXT_CONTROL_POINT, this.getUpdatePrecision());
+        const context = {
+            ...ITEM_MODIFICATION_CONTEXT_CONTROL_POINT,
+            itemId: this.item.id,
+        };
+        this.schemeContainer.updateEditBoxItems(this.schemeContainer.editBox, IS_NOT_SOFT, context, this.getUpdatePrecision());
         this.schemeContainer.reindexItems();
         this.schemeContainer.updateEditBox();
         StoreUtils.setItemControlPoints(this.store, this.item);
@@ -394,7 +400,8 @@ class DragControlPointState extends SubState {
 
 
         this.listener.onItemChanged(this.item.id);
-        this.schemeContainer.readjustItem(this.item.id, IS_SOFT, {...ITEM_MODIFICATION_CONTEXT_DEFAULT, controlPoint: true}, this.getUpdatePrecision());
+        const context = {...ITEM_MODIFICATION_CONTEXT_DEFAULT, controlPoint: true, itemId: this.item.id};
+        this.schemeContainer.readjustItem(this.item.id, IS_SOFT, context, this.getUpdatePrecision());
 
         // since this function can only be called if the connector is selected
         // we should update connector path so that it can be rendered in multi item edit box
@@ -437,7 +444,11 @@ class DragPivotEditBoxState extends EditBoxState {
         if (this.editBox.items.length === 1) {
             this.editBox.items[0].area.px = this.editBox.pivotPoint.x;
             this.editBox.items[0].area.py = this.editBox.pivotPoint.y;
-            this.schemeContainer.updateEditBoxItems(this.editBox, IS_NOT_SOFT, ITEM_MODIFICATION_CONTEXT_MOVED, this.getUpdatePrecision());
+            const context = {
+                ...ITEM_MODIFICATION_CONTEXT_MOVED,
+                itemId: this.editBox.items[0].id,
+            };
+            this.schemeContainer.updateEditBoxItems(this.editBox, IS_NOT_SOFT, context, this.getUpdatePrecision());
         }
 
         super.mouseUp(x, y, mx, my, object, event);

diff --git a/src/ui/scheme/SchemeContainer.js b/src/ui/scheme/SchemeContainer.js
@@ -1387,11 +1387,12 @@ class SchemeContainer {
     findClosestPointToItems(x, y, d, excludedId, onlyVisibleItems) {
         let closestPin = null;
         this.pinSpatialIndex.forEachInRange(x - d, y - d, x + d, y + d, ({itemId, pinId, worldPinPoint}, point) => {
-            if (itemId !== excludedId) {
-                const distance = (x - point.x) * (x - point.x) + (y - point.y) * (y - point.y);
-                if (!closestPin || closestPin.distance > distance) {
-                    closestPin = { itemId, pinId, point: worldPinPoint, distance };
-                }
+            if (itemId === excludedId) {
+                return;
+            }
+            const distance = (x - point.x) * (x - point.x) + (y - point.y) * (y - point.y);
+            if (!closestPin || closestPin.distance > distance) {
+                closestPin = { itemId, pinId, point: worldPinPoint, distance };
             }
         });
 
@@ -1419,6 +1420,9 @@ class SchemeContainer {
 
 
         this.spatialIndex.forEachInRange(x - searchDistance, y - searchDistance, x + searchDistance, y + searchDistance, ({itemId, pathDistance}, point) => {
+            if (excludedId === itemId) {
+                return;
+            }
             // if there are multiple points in the same item we want to select the closest ones
             // this way we late can get better precision when search for closest point on path, since we can pass the initial search range (startDistance, stopDistance)
             const squaredDistanceToPoint = (x - point.x) * (x - point.x) + (y - point.y) * (y - point.y);
@@ -1665,7 +1669,7 @@ class SchemeContainer {
                 return null;
             }
 
-            if (context.resized || context.controlPoint || attachmentItem.shape === 'connector' || attachmentItem.shape === 'path') {
+            if (context.itemId !== item.id && (context.resized || context.controlPoint || attachmentItem.shape === 'connector' || attachmentItem.shape === 'path')) {
                 const originalPointKey = `${item.id}-points-${pointIdx}`;
                 let originalPoint = currentPoint;
                 if (this.editBox) {

diff --git a/src/ui/typedef.js b/src/ui/typedef.js
@@ -62,6 +62,7 @@
  * @property {Boolean} rotated - specifies whether item was rotated
  * @property {Boolean} resized - specifies whether item was resized
  * @property {Boolean} controlPoint - specifies whether items control point was moved
+ * @property {String|undefined} itemId - the id of the item that is being modified
  */
 
 /**