update visible point indexes when zooming

src/actions/actionFinalize.tsx

@@ -34,7 +34,7 @@ export const actionFinalize = register({
           );
         }
         const selectedLinearElement = appState.selectedLinearElement
-          ? new LinearElementEditor(element, scene)
+          ? new LinearElementEditor(element, scene, appState)
           : null;
         return {
           elements:
@@ -188,7 +188,7 @@ export const actionFinalize = register({
         // To select the linear element when user has finished mutipoint editing
         selectedLinearElement:
           multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(multiPointElement, scene)
+            ? new LinearElementEditor(multiPointElement, scene, appState)
             : appState.selectedLinearElement,
         pendingImageElementId: null,
       },

src/actions/actionSelectAll.ts

@@ -35,7 +35,7 @@ export const actionSelectAll = register({
             // single linear element selected
             Object.keys(selectedElementIds).length === 1 &&
             isLinearElement(elements[0])
-              ? new LinearElementEditor(elements[0], app.scene)
+              ? new LinearElementEditor(elements[0], app.scene, appState)
               : null,
           editingGroupId: null,
           selectedElementIds,

src/components/App.tsx

@@ -1083,6 +1083,20 @@ class App extends React.Component<AppProps, AppState> {
       this.refreshDeviceState(this.excalidrawContainerRef.current);
     }
 
+    if (
+      this.state.selectedLinearElement &&
+      prevState.zoom !== this.state.zoom
+    ) {
+      const selectedLinearElement =
+        LinearElementEditor.updateVisiblePointIndexes(
+          this.state.selectedLinearElement,
+          this.state,
+        );
+      this.setState({
+        selectedLinearElement,
+      });
+    }
+
     if (
       prevState.scrollX !== this.state.scrollX ||
       prevState.scrollY !== this.state.scrollY
@@ -1907,6 +1921,7 @@ class App extends React.Component<AppProps, AppState> {
                 editingLinearElement: new LinearElementEditor(
                   selectedElements[0],
                   this.scene,
+                  this.state,
                   true,
                 ),
               });
@@ -2486,6 +2501,7 @@ class App extends React.Component<AppProps, AppState> {
           editingLinearElement: new LinearElementEditor(
             selectedElements[0],
             this.scene,
+            this.state,
             true,
           ),
         });
@@ -4481,6 +4497,7 @@ class App extends React.Component<AppProps, AppState> {
                     ? new LinearElementEditor(
                         elementsWithinSelection[0],
                         this.scene,
+                        this.state,
                       )
                     : null,
               },
@@ -4745,6 +4762,7 @@ class App extends React.Component<AppProps, AppState> {
               selectedLinearElement: new LinearElementEditor(
                 draggingElement,
                 this.scene,
+                this.state,
               ),
             }));
           } else {
@@ -4812,6 +4830,7 @@ class App extends React.Component<AppProps, AppState> {
             selectedLinearElement: new LinearElementEditor(
               hitElement,
               this.scene,
+              this.state,
             ),
           });
         }
@@ -4914,6 +4933,7 @@ class App extends React.Component<AppProps, AppState> {
                         ? new LinearElementEditor(
                             newSelectedElements[0],
                             this.scene,
+                            this.state,
                           )
                         : prevState.selectedLinearElement,
                   },
@@ -4942,7 +4962,11 @@ class App extends React.Component<AppProps, AppState> {
                   // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
                   // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
                   prevState.selectedLinearElement?.elementId !== hitElement.id
-                    ? new LinearElementEditor(hitElement, this.scene)
+                    ? new LinearElementEditor(
+                        hitElement,
+                        this.scene,
+                        this.state,
+                      )
                     : prevState.selectedLinearElement,
               },
               this.scene.getNonDeletedElements(),
@@ -5702,7 +5726,7 @@ class App extends React.Component<AppProps, AppState> {
             ...this.state,
             selectedElementIds: { [element.id]: true },
             selectedLinearElement: isLinearElement(element)
-              ? new LinearElementEditor(element, this.scene)
+              ? new LinearElementEditor(element, this.scene, this.state)
               : null,
           },
           this.scene.getNonDeletedElements(),

src/element/linearElementEditor.ts

@@ -57,6 +57,7 @@ export class LinearElementEditor {
   constructor(
     element: NonDeleted<ExcalidrawLinearElement>,
     scene: Scene,
+    appState: AppState,
     editingLinearElement = false,
   ) {
     this.elementId = element.id as string & {
@@ -79,6 +80,7 @@ export class LinearElementEditor {
     this.midPointHovered = false;
     this.visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
       element,
+      appState,
       editingLinearElement,
     );
   }
@@ -419,6 +421,7 @@ export class LinearElementEditor {
 
   static getVisiblePointIndexes(
     element: NonDeleted<ExcalidrawLinearElement>,
+    appState: AppState,
     editingLinearElement: boolean,
   ) {
     if (!element) {
@@ -429,12 +432,9 @@ export class LinearElementEditor {
     element.points.forEach((point, index) => {
       let distance = Infinity;
       if (previousPoint) {
-        distance = distance2d(
-          point[0],
-          point[1],
-          previousPoint[0],
-          previousPoint[1],
-        );
+        distance =
+          distance2d(point[0], point[1], previousPoint[0], previousPoint[1]) *
+          appState.zoom.value;
       }
       const isExtremePoint = index === 0 || index === element.points.length - 1;
       if (
@@ -448,6 +448,25 @@ export class LinearElementEditor {
     });
     return visiblePointIndexes;
   }
+
+  static updateVisiblePointIndexes(
+    linearElementEditor: LinearElementEditor,
+    appState: AppState,
+  ) {
+    const { elementId } = linearElementEditor;
+    const element = LinearElementEditor.getElement(elementId);
+    if (!element) {
+      return linearElementEditor;
+    }
+    return {
+      ...linearElementEditor,
+      visiblePointIndexes: LinearElementEditor.getVisiblePointIndexes(
+        element,
+        appState,
+        false,
+      ),
+    };
+  }
   static handlePointerDown(
     event: React.PointerEvent<HTMLCanvasElement>,
     appState: AppState,
@@ -537,6 +556,7 @@ export class LinearElementEditor {
         ),
         visiblePointIndexes: LinearElementEditor.getVisiblePointIndexes(
           element,
+          appState,
           true,
         ),
       };
@@ -612,6 +632,7 @@ export class LinearElementEditor {
     if (ret.didAddPoint) {
       const visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
         element,
+        appState,
         !!appState.editingLinearElement,
       );
       ret.linearElementEditor = {