feat: enable midpoint inside linear element editor (#5564)

* feat: enable midpoint inside linear element editor

* fix

* fix

* hack to set pointerDownState.hit.hasHitElementInside when mid point added

* remove hacks as not needed :)

* remove newline

* fix

* add doc

src/element/linearElementEditor.ts

@@ -364,9 +364,6 @@ export class LinearElementEditor {
     scenePointer: { x: number; y: number },
     appState: AppState,
   ) => {
-    if (appState.editingLinearElement) {
-      return false;
-    }
     const { elementId } = linearElementEditor;
     const element = LinearElementEditor.getElement(elementId);
     if (!element) {

src/renderer/renderScene.ts

@@ -162,6 +162,7 @@ const renderSingleLinearPoint = (
   appState: AppState,
   renderConfig: RenderConfig,
   point: Point,
+  radius: number,
   isSelected: boolean,
   isPhantomPoint = false,
 ) => {
@@ -173,10 +174,7 @@ const renderSingleLinearPoint = (
   } else if (isPhantomPoint) {
     context.fillStyle = "rgba(177, 151, 252, 0.7)";
   }
-  const { POINT_HANDLE_SIZE } = LinearElementEditor;
+
-  const radius = appState.editingLinearElement
-    ? POINT_HANDLE_SIZE
-    : POINT_HANDLE_SIZE / 2;
   fillCircle(
     context,
     point[0],
@@ -205,32 +203,61 @@ const renderLinearPointHandles = (
   if (!centerPoint) {
     return;
   }
+  const { POINT_HANDLE_SIZE } = LinearElementEditor;
+  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, isSelected);
-  });
-
-  if (!appState.editingLinearElement && points.length < 3) {
-    if (appState.selectedLinearElement.midPointHovered) {
-      const centerPoint = LinearElementEditor.getMidPoint(
-        appState.selectedLinearElement,
-      )!;
-      highlightPoint(centerPoint, context, appState, renderConfig);
 
+    renderSingleLinearPoint(
+      context,
+      appState,
+      renderConfig,
+      point,
+      radius,
+      isSelected,
+    );
+  });
+
+  if (points.length < 3) {
+    if (appState.selectedLinearElement.midPointHovered) {
+      const centerPoint = LinearElementEditor.getMidPoint(
+        appState.selectedLinearElement,
+      )!;
+      // The order of renderingSingleLinearPoint and highLight points is different
+      // inside vs outside editor as hover states are different,
+      // in editor when hovered the original point is not visible as hover state fully covers it whereas outside the
+      // editor original point is visible and hover state is just an outer circle.
+      if (appState.editingLinearElement) {
         renderSingleLinearPoint(
           context,
           appState,
           renderConfig,
           centerPoint,
+          radius,
           false,
         );
+        highlightPoint(centerPoint, context, renderConfig);
+      } else {
+        highlightPoint(centerPoint, context, renderConfig);
+        renderSingleLinearPoint(
+          context,
+          appState,
+          renderConfig,
+          centerPoint,
+          radius,
+          false,
+        );
+      }
     } else {
       renderSingleLinearPoint(
         context,
         appState,
         renderConfig,
         centerPoint,
+        POINT_HANDLE_SIZE / 2,
         false,
         true,
       );
@@ -243,7 +270,6 @@ const renderLinearPointHandles = (
 const highlightPoint = (
   point: Point,
   context: CanvasRenderingContext2D,
-  appState: AppState,
   renderConfig: RenderConfig,
 ) => {
   context.fillStyle = "rgba(105, 101, 219, 0.4)";
@@ -280,7 +306,7 @@ const renderLinearElementPointHighlight = (
   context.save();
   context.translate(renderConfig.scrollX, renderConfig.scrollY);
 
-  highlightPoint(point, context, appState, renderConfig);
+  highlightPoint(point, context, renderConfig);
   context.restore();
 };