add line | add circle | zoom | selectable geometry | geometry define entities type

components/Editor.tsx

@@ -2,7 +2,7 @@
 
 import { UndoAction } from "@/lib/useEditorState";
 
-type Mode = "draw" | "select" | "idle" | "add-point" | "add-path" | "add-circle";
+type Mode = "draw" | "select" | "idle" | "add-point" | "add-line" | "add-path" | "add-circle";
 type EntityOption = {
     id: string;
     name: string;
@@ -108,6 +108,13 @@ export default function Editor({
                 Add point
             </button>
 
+            <button
+                style={getButtonStyle("add-line")}
+                onClick={() => setMode("add-line")}
+            >
+                Add line
+            </button>
+
             <button
                 style={getButtonStyle("add-path")}
                 onClick={() => setMode("add-path")}
@@ -125,6 +132,11 @@ export default function Editor({
             <div style={{ marginTop: "12px", fontSize: "14px" }}>
                 Mode: <b>{mode}</b>
             </div>
+            {mode === "add-line" ? (
+                <div style={{ marginTop: "6px", fontSize: "12px", color: "#93c5fd" }}>
+                    Click để thêm điểm, Enter để hoàn tất, Esc để hủy.
+                </div>
+            ) : null}
             {mode === "add-path" ? (
                 <div style={{ marginTop: "6px", fontSize: "12px", color: "#93c5fd" }}>
                     Click để thêm điểm, Enter để hoàn tất, Esc để hủy.