From 02719a2e70bd0b5bc413388518d89bb575203630 Mon Sep 17 00:00:00 2001
From: Kirill Lakhov <kirill.lakhov@cvat.ai>
Date: Tue, 21 Jan 2025 16:32:20 +0300
Subject: [PATCH] Fix: Cannot read properties of undefined (reading
 'startPoints') (#8966)

---
 .../20250120_142814_klakhov_fix_start_points.md     |  4 ++++
 cvat-canvas/src/typescript/canvasView.ts            | 13 ++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 changelog.d/20250120_142814_klakhov_fix_start_points.md

diff --git a/changelog.d/20250120_142814_klakhov_fix_start_points.md b/changelog.d/20250120_142814_klakhov_fix_start_points.md
new file mode 100644
index 000000000000..5df97127b0a1
--- /dev/null
+++ 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
index d719b3b4f6af..437ebe2f8894 100644
--- 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,7 +1162,7 @@ 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;
@@ -1167,10 +1170,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
                 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;