cache the visible point indexes

src/actions/actionFinalize.tsx

@@ -33,6 +33,9 @@ export const actionFinalize = register({
             endBindingElement,
           );
         }
+        const selectedLinearElement = appState.selectedLinearElement
+          ? new LinearElementEditor(element, scene, appState)
+          : null;
         return {
           elements:
             element.points.length < 2 || isInvisiblySmallElement(element)
@@ -42,6 +45,7 @@ export const actionFinalize = register({
             ...appState,
             cursorButton: "up",
             editingLinearElement: null,
+            selectedLinearElement,
           },
           commitToHistory: true,
         };
@@ -184,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

@@ -1907,6 +1907,8 @@ class App extends React.Component<AppProps, AppState> {
                 editingLinearElement: new LinearElementEditor(
                   selectedElements[0],
                   this.scene,
+                  this.state,
+                  true,
                 ),
               });
             }
@@ -2485,6 +2487,8 @@ class App extends React.Component<AppProps, AppState> {
           editingLinearElement: new LinearElementEditor(
             selectedElements[0],
             this.scene,
+            this.state,
+            true,
           ),
         });
       }
@@ -3071,7 +3075,7 @@ class App extends React.Component<AppProps, AppState> {
         ])
       ) {
         hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(
-          element,
+          this.state.selectedLinearElement,
           this.state.zoom,
           scenePointerX,
           scenePointerY,
@@ -4488,6 +4492,7 @@ class App extends React.Component<AppProps, AppState> {
                     ? new LinearElementEditor(
                         elementsWithinSelection[0],
                         this.scene,
+                        this.state,
                       )
                     : null,
               },
@@ -4752,6 +4757,7 @@ class App extends React.Component<AppProps, AppState> {
               selectedLinearElement: new LinearElementEditor(
                 draggingElement,
                 this.scene,
+                this.state,
               ),
             }));
           } else {
@@ -4819,6 +4825,7 @@ class App extends React.Component<AppProps, AppState> {
             selectedLinearElement: new LinearElementEditor(
               hitElement,
               this.scene,
+              this.state,
             ),
           });
         }
@@ -4921,6 +4928,7 @@ class App extends React.Component<AppProps, AppState> {
                         ? new LinearElementEditor(
                             newSelectedElements[0],
                             this.scene,
+                            this.state,
                           )
                         : prevState.selectedLinearElement,
                   },
@@ -4949,7 +4957,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(),
@@ -5709,7 +5721,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

@@ -40,6 +40,11 @@ const editorMidPointsCache: {
   zoom: number | null;
 } = { version: null, points: [], zoom: null };
 
+const visiblePointIndexesCache: {
+  points: number[];
+  zoom: number | null;
+  isEditingLinearElement: boolean;
+} = { points: [], zoom: null, isEditingLinearElement: false };
 export class LinearElementEditor {
   public readonly elementId: ExcalidrawElement["id"] & {
     _brand: "excalidrawLinearElementId";
@@ -65,7 +70,12 @@ export class LinearElementEditor {
   public readonly hoverPointIndex: number;
   public readonly segmentMidPointHoveredCoords: Point | null;
 
-  constructor(element: NonDeleted<ExcalidrawLinearElement>, scene: Scene) {
+  constructor(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    scene: Scene,
+    appState: AppState,
+    editingLinearElement = false,
+  ) {
     this.elementId = element.id as string & {
       _brand: "excalidrawLinearElementId";
     };
@@ -433,7 +443,7 @@ export class LinearElementEditor {
       return null;
     }
     const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(
-      element,
+      appState.selectedLinearElement,
       appState.zoom,
       scenePointer.x,
       scenePointer.y,
@@ -560,6 +570,59 @@ export class LinearElementEditor {
     return -1;
   }
 
+  static getVisiblePointIndexes(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    appState: AppState,
+  ): typeof visiblePointIndexesCache["points"] {
+    const isEditingLinearElement = !!appState.editingLinearElement;
+    if (appState.editingLinearElement) {
+      // So that when we exit the editor the points are calculated again
+      visiblePointIndexesCache.isEditingLinearElement = true;
+      return element.points.map((_, index) => index);
+    }
+
+    if (
+      visiblePointIndexesCache.points &&
+      visiblePointIndexesCache.zoom === appState.zoom.value &&
+      isEditingLinearElement === visiblePointIndexesCache.isEditingLinearElement
+    ) {
+      return visiblePointIndexesCache.points;
+    }
+
+    LinearElementEditor.updateVisiblePointIndexesCache(element, appState);
+    return visiblePointIndexesCache.points;
+  }
+
+  static updateVisiblePointIndexesCache(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    appState: AppState,
+  ) {
+    const visiblePointIndexes: number[] = [];
+    let previousPoint: Point | null = null;
+    element.points.forEach((point, index) => {
+      let distance = Infinity;
+      if (previousPoint) {
+        distance =
+          distance2d(point[0], point[1], previousPoint[0], previousPoint[1]) *
+          appState.zoom.value;
+      }
+      const isExtremePoint = index === 0 || index === element.points.length - 1;
+      const threshold = 2 * LinearElementEditor.POINT_HANDLE_SIZE;
+      if (isExtremePoint || distance >= threshold) {
+        // hide n-1 point if distance is less than threshold
+        if (isExtremePoint && distance < threshold) {
+          visiblePointIndexes.pop();
+        }
+        visiblePointIndexes.push(index);
+        previousPoint = point;
+      }
+    });
+    visiblePointIndexesCache.points = visiblePointIndexes;
+    visiblePointIndexesCache.zoom = appState.zoom.value;
+    visiblePointIndexesCache.isEditingLinearElement =
+      !!appState.editingLinearElement;
+  }
+
   static handlePointerDown(
     event: React.PointerEvent<HTMLCanvasElement>,
     appState: AppState,
@@ -617,15 +680,6 @@ export class LinearElementEditor {
 
       ret.didAddPoint = true;
       ret.isMidPoint = true;
-      ret.linearElementEditor = {
-        ...linearElementEditor,
-        selectedPointsIndices: element.points[1],
-        pointerDownState: {
-          prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
-          lastClickedPoint: -1,
-        },
-        lastUncommittedPoint: null,
-      };
     }
     if (event.altKey && appState.editingLinearElement) {
       if (linearElementEditor.lastUncommittedPoint == null) {
@@ -662,7 +716,7 @@ export class LinearElementEditor {
     }
 
     const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(
-      element,
+      appState.selectedLinearElement,
       appState.zoom,
       scenePointer.x,
       scenePointer.y,
@@ -725,7 +779,11 @@ export class LinearElementEditor {
           }
         : { x: 0, y: 0 },
     };
-
+    if (ret.didAddPoint) {
+      ret.linearElementEditor = {
+        ...ret.linearElementEditor,
+      };
+    }
     return ret;
   }
 
@@ -873,25 +931,37 @@ export class LinearElementEditor {
   }
 
   static getPointIndexUnderCursor(
-    element: NonDeleted<ExcalidrawLinearElement>,
+    linearElementEditor: LinearElementEditor | null,
     zoom: AppState["zoom"],
     x: number,
     y: number,
   ) {
+    if (!linearElementEditor) {
+      return -1;
+    }
+    const element = LinearElementEditor.getElement(
+      linearElementEditor.elementId,
+    );
+    if (!element) {
+      return -1;
+    }
+
     const pointHandles =
       LinearElementEditor.getPointsGlobalCoordinates(element);
-    let idx = pointHandles.length;
+    let counter = visiblePointIndexesCache.points.length;
+
     // loop from right to left because points on the right are rendered over
     // points on the left, thus should take precedence when clicking, if they
     // overlap
-    while (--idx > -1) {
-      const point = pointHandles[idx];
+    while (--counter >= 0) {
+      const index = visiblePointIndexesCache.points[counter];
+      const point = pointHandles[index];
       if (
         distance2d(x, y, point[0], point[1]) * zoom.value <
         // +1px to account for outline stroke
         LinearElementEditor.POINT_HANDLE_SIZE + 1
       ) {
-        return idx;
+        return index;
       }
     }
     return -1;

src/renderer/renderScene.ts

@@ -159,13 +159,15 @@ const strokeGrid = (
 
 const renderSingleLinearPoint = (
   context: CanvasRenderingContext2D,
-  appState: AppState,
   renderConfig: RenderConfig,
   point: Point,
   radius: number,
   isSelected: boolean,
   isPhantomPoint = false,
 ) => {
+  if (!point) {
+    return;
+  }
   context.strokeStyle = "#5e5ad8";
   context.setLineDash([]);
   context.fillStyle = "rgba(255, 255, 255, 0.9)";
@@ -202,18 +204,16 @@ const renderLinearPointHandles = (
   const radius = appState.editingLinearElement
     ? POINT_HANDLE_SIZE
     : POINT_HANDLE_SIZE / 2;
-  points.forEach((point, idx) => {
-    const isSelected =
-      !!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
 
-    renderSingleLinearPoint(
-      context,
-      appState,
-      renderConfig,
-      point,
-      radius,
-      isSelected,
-    );
+  const visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
+    element,
+    appState,
+  );
+  visiblePointIndexes.forEach((index) => {
+    const isSelected =
+      !!appState.editingLinearElement?.selectedPointsIndices?.includes(index);
+    const point = points[index];
+    renderSingleLinearPoint(context, renderConfig, point, radius, isSelected);
   });
 
   //Rendering segment mid points
@@ -237,7 +237,6 @@ const renderLinearPointHandles = (
       if (appState.editingLinearElement) {
         renderSingleLinearPoint(
           context,
-          appState,
           renderConfig,
           segmentMidPoint,
           radius,
@@ -248,7 +247,7 @@ const renderLinearPointHandles = (
         highlightPoint(segmentMidPoint, context, renderConfig);
         renderSingleLinearPoint(
           context,
-          appState,
+
           renderConfig,
           segmentMidPoint,
           radius,
@@ -258,7 +257,6 @@ const renderLinearPointHandles = (
     } else if (appState.editingLinearElement || points.length === 2) {
       renderSingleLinearPoint(
         context,
-        appState,
         renderConfig,
         segmentMidPoint,
         POINT_HANDLE_SIZE / 2,
@@ -450,7 +448,22 @@ export const _renderScene = ({
       appState.selectedLinearElement &&
       appState.selectedLinearElement.hoverPointIndex >= 0
     ) {
-      renderLinearElementPointHighlight(context, appState, renderConfig);
+      const element = LinearElementEditor.getElement(
+        appState.selectedLinearElement.elementId,
+      );
+      if (element) {
+        const visiblePointIndexes = LinearElementEditor.getVisiblePointIndexes(
+          element,
+          appState,
+        );
+        if (
+          visiblePointIndexes.includes(
+            appState.selectedLinearElement.hoverPointIndex,
+          )
+        ) {
+          renderLinearElementPointHighlight(context, appState, renderConfig);
+        }
+      }
     }
     // Paint selected elements
     if (

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -10993,6 +10993,9 @@ Object {
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
+    "visiblePointIndexes": Array [
+      1,
+    ],
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
@@ -11219,6 +11222,9 @@ Object {
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
+    "visiblePointIndexes": Array [
+      1,
+    ],
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
@@ -11672,6 +11678,9 @@ Object {
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
+    "visiblePointIndexes": Array [
+      1,
+    ],
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
@@ -12077,6 +12086,9 @@ Object {
     "segmentMidPointHoveredCoords": null,
     "selectedPointsIndices": null,
     "startBindingElement": "keep",
+    "visiblePointIndexes": Array [
+      1,
+    ],
   },
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,