ensure editingLinearElement handles are rendered on top (#1967)

src/element/linearElementEditor.ts

@@ -12,7 +12,9 @@ import { SceneHistory } from "../history";
 import { globalSceneState } from "../scene";
 
 export class LinearElementEditor {
-  public elementId: ExcalidrawElement["id"];
+  public elementId: ExcalidrawElement["id"] & {
+    _brand: "excalidrawLinearElementId";
+  };
   public activePointIndex: number | null;
   public draggingElementPointIndex: number | null;
   public lastUncommittedPoint: Point | null;
@@ -20,7 +22,9 @@ export class LinearElementEditor {
   constructor(element: NonDeleted<ExcalidrawLinearElement>) {
     LinearElementEditor.normalizePoints(element);
 
-    this.elementId = element.id;
+    this.elementId = element.id as string & {
+      _brand: "excalidrawLinearElementId";
+    };
     this.activePointIndex = null;
     this.lastUncommittedPoint = null;
     this.draggingElementPointIndex = null;
@@ -32,7 +36,11 @@ export class LinearElementEditor {
 
   static POINT_HANDLE_SIZE = 20;
 
-  static getElement(id: ExcalidrawElement["id"]) {
+  /**
+   * @param id the `elementId` from the instance of this class (so that we can
+   *  statically guarantee this method returns an ExcalidrawLinearElement)
+   */
+  static getElement(id: InstanceType<typeof LinearElementEditor>["elementId"]) {
     const element = globalSceneState.getNonDeletedElement(id);
     if (element) {
       return element as NonDeleted<ExcalidrawLinearElement>;

src/renderer/renderScene.ts

@@ -30,7 +30,6 @@ import { getSelectedElements } from "../scene/selection";
 
 import { renderElement, renderElementToSvg } from "./renderElement";
 import { getClientColors } from "../clients";
-import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import {
   isSelectedViaGroup,
@@ -220,14 +219,16 @@ export const renderScene = (
 
   visibleElements.forEach((element) => {
     renderElement(element, rc, context, renderOptimizations, sceneState);
-    if (
-      isLinearElement(element) &&
-      appState.editingLinearElement &&
-      appState.editingLinearElement.elementId === element.id
-    ) {
+  });
+
+  if (appState.editingLinearElement) {
+    const element = LinearElementEditor.getElement(
+      appState.editingLinearElement.elementId,
+    );
+    if (element) {
       renderLinearPointHandles(context, appState, sceneState, element);
     }
-  });
+  }
 
   // Paint selection element
   if (selectionElement) {