Fix: Cannot read properties of undefined (reading 'startPoints') (#8966)

cvat-ai · Jan 21, 2025 · 02719a2 · 02719a2
1 parent 1140a92
commit 02719a2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/changelog.d/20250120_142814_klakhov_fix_start_points.md b/changelog.d/20250120_142814_klakhov_fix_start_points.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- Error: Cannot read properties of undefined (reading 'startPoints') when dragging an object
+  (<https://github.com/cvat-ai/cvat/pull/8966>)
diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts
@@ -1129,9 +1129,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 ...(state.shapeType === 'mask' ? { snapToGrid: 1 } : {}),
             });
 
+            let startPoint = null;
+
             draggableInstance.on('dragstart', (): void => {
                 onDragStart();
                 this.draggableShape = shape;
+                startPoint = { x: shape.x(), y: shape.y() };
                 start = Date.now();
             }).on('dragmove', (e: CustomEvent): void => {
                 onDragMove();
@@ -1159,18 +1162,18 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     skeletonSVGTemplate = skeletonSVGTemplate ?? makeSVGFromTemplate(state.label.structure.svg);
                     setupSkeletonEdges(shape as SVG.G, skeletonSVGTemplate);
                 }
-            }).on('dragend', (e: CustomEvent): void => {
+            }).on('dragend', (): void => {
                 if (aborted) {
                     this.resetViewPosition(state.clientID);
                     return;
                 }
 
                 onDragEnd();
                 this.draggableShape = null;
-                const p1 = e.detail.handler.startPoints.point;
-                const p2 = e.detail.p;
-                const dx2 = (p1.x - p2.x) ** 2;
-                const dy2 = (p1.y - p2.y) ** 2;
+                const endPoint = { x: shape.x(), y: shape.y() };
+
+                const dx2 = (startPoint.x - endPoint.x) ** 2;
+                const dy2 = (startPoint.y - endPoint.y) ** 2;
                 if (Math.sqrt(dx2 + dy2) > 0) {
                     if (state.shapeType === 'mask') {
                         const { points } = state;