From 729b6b8b95593cd6b1304dbabd2bceecb19224b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=A7=E9=95=BF=E7=A6=8F?= <tieubryce@gmail.com>
Date: Mon, 16 Mar 2026 12:48:06 -0700
Subject: [PATCH] Move control point and Double it

---
 .../components/ControlPointsSection.svelte    | 29 +++++++++++++++++--
 src/lib/components/PathLineSection.svelte     |  9 +++---
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/ControlPointsSection.svelte b/src/lib/components/ControlPointsSection.svelte
index 2ba2b16..cf4b921 100644
--- a/src/lib/components/ControlPointsSection.svelte
+++ b/src/lib/components/ControlPointsSection.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Line } from "../../types";
   import _ from "lodash";
   import { snapToGrid, showGrid, gridSize } from "../../stores";
 
@@ -6,8 +7,7 @@
   export let lineIdx: number;
   export let collapsed: boolean;
   export let recordChange: () => void;
-  export let optimizeLine: (lineId: string, targetControlPointIndex?: number) => void;
-  export let optimizing: boolean = false;
+  export let onAddControlPoint: () => void;
 
   $: snapToGridTitle =
     $snapToGrid && $showGrid ? `Snapping to ${$gridSize} grid` : "No snapping";
@@ -19,7 +19,7 @@
 
 <div class="flex flex-col w-full justify-start items-start mt-2">
   <!-- Control Points header with toggle and add button -->
-  <div class="flex items-center justify-between w-full">
+  <div class="flex items-center gap-2 w-full">
     <button
       on:click={toggleCollapsed}
       class="flex items-center gap-2 font-light hover:bg-neutral-100 dark:hover:bg-neutral-800/50 px-2 py-1 rounded transition-colors duration-250 text-sm"
@@ -43,6 +43,29 @@
       </svg>
       Control Points ({line.controlPoints.length})
     </button>
+
+    <button
+      on:click={onAddControlPoint}
+      class="flex items-center gap-1 px-2 py-1 text-xs font-semibold text-green-600 hover:text-green-700 disabled:opacity-40 disabled:cursor-not-allowed"
+      title={line.locked ? "Path locked" : "Add Control Point"}
+      disabled={line.locked}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width={2}
+        stroke="currentColor"
+        class="size-4"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 4.5v15m7.5-7.5h-15"
+        />
+      </svg>
+      Add
+    </button>
   </div>
 
   <!-- Control Points list (shown when expanded) -->
diff --git a/src/lib/components/PathLineSection.svelte b/src/lib/components/PathLineSection.svelte
index 46e5122..8875773 100644
--- a/src/lib/components/PathLineSection.svelte
+++ b/src/lib/components/PathLineSection.svelte
@@ -189,11 +189,11 @@
     </div>
 
     <div class="flex flex-row items-center gap-1 ml-auto">
-      <!-- Add Point After Button -->
       <button
-        title="Add Point After This Line"
+        title="Add control point after this line"
         on:click={onInsertAfter}
-        class="text-blue-500 hover:text-blue-600"
+        class="text-blue-500 hover:text-blue-600 disabled:opacity-40 disabled:cursor-not-allowed"
+        disabled={line.locked}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -330,8 +330,7 @@
       bind:line
       lineIdx={idx}
       bind:collapsed={collapsedControlPoints}
-      {optimizeLine}
-      optimizing={optimizing}
+      onAddControlPoint={onInsertAfter}
       {recordChange}
     />
   {/if}