@docmentis/udoc-viewer 0.6.22 → 0.6.24

package/dist/src/ui/viewer/components/SubToolbar.js

@@ -1,77 +1,163 @@
 import { subscribeSelector } from "../../framework/selectors";
 import { isToolSet, DEFAULT_TOOL_OPTIONS } from "../state";
-import { ICON_SUBTOOL_FREEHAND, ICON_SUBTOOL_LINE, ICON_SUBTOOL_ARROW, ICON_SUBTOOL_RECTANGLE, ICON_SUBTOOL_ELLIPSE, ICON_SUBTOOL_POLYGON, ICON_SUBTOOL_TEXTBOX, ICON_SUBTOOL_HIGHLIGHT, ICON_SUBTOOL_UNDERLINE, ICON_SUBTOOL_STRIKETHROUGH, ICON_SUBTOOL_SQUIGGLY, } from "../icons";
+import { createNumberInput } from "./NumberInput";
+import { createColorSelect } from "./ColorSelect";
+import { ICON_SUBTOOL_SELECT, ICON_SUBTOOL_FREEHAND, ICON_SUBTOOL_LINE, ICON_SUBTOOL_ARROW, ICON_SUBTOOL_RECTANGLE, ICON_SUBTOOL_ELLIPSE, ICON_SUBTOOL_POLYGON, ICON_SUBTOOL_POLYLINE, ICON_SUBTOOL_HIGHLIGHT, ICON_SUBTOOL_UNDERLINE, ICON_SUBTOOL_STRIKETHROUGH, ICON_SUBTOOL_SQUIGGLY, ICON_LINE_SOLID, ICON_LINE_DASHED, ICON_LINE_DOTTED, ICON_ARROW_NONE, ICON_ARROW_OPEN, ICON_ARROW_CLOSED, ICON_STROKE_WIDTH, ICON_OPACITY, ICON_FONT_SIZE, ICON_DELETE, } from "../icons";
 const ANNOTATE_SUB_TOOLS = [
+    { id: "select", icon: ICON_SUBTOOL_SELECT, labelKey: "tools.select" },
     { id: "freehand", icon: ICON_SUBTOOL_FREEHAND, labelKey: "tools.freehand" },
     { id: "line", icon: ICON_SUBTOOL_LINE, labelKey: "tools.line" },
     { id: "arrow", icon: ICON_SUBTOOL_ARROW, labelKey: "tools.arrow" },
     { id: "rectangle", icon: ICON_SUBTOOL_RECTANGLE, labelKey: "tools.rectangle" },
     { id: "ellipse", icon: ICON_SUBTOOL_ELLIPSE, labelKey: "tools.ellipse" },
     { id: "polygon", icon: ICON_SUBTOOL_POLYGON, labelKey: "tools.polygon" },
-    { id: "textbox", icon: ICON_SUBTOOL_TEXTBOX, labelKey: "tools.textbox" },
+    { id: "polyline", icon: ICON_SUBTOOL_POLYLINE, labelKey: "tools.polyline" },
 ];
 const MARKUP_SUB_TOOLS = [
+    { id: "select", icon: ICON_SUBTOOL_SELECT, labelKey: "tools.select" },
     { id: "highlight", icon: ICON_SUBTOOL_HIGHLIGHT, labelKey: "tools.highlight" },
     { id: "underline", icon: ICON_SUBTOOL_UNDERLINE, labelKey: "tools.underline" },
     { id: "strikethrough", icon: ICON_SUBTOOL_STRIKETHROUGH, labelKey: "tools.strikethrough" },
     { id: "squiggly", icon: ICON_SUBTOOL_SQUIGGLY, labelKey: "tools.squiggly" },
 ];
-const SUB_TOOLS_MAP = {
-    annotate: ANNOTATE_SUB_TOOLS,
-    markup: MARKUP_SUB_TOOLS,
-};
-/** Which options each sub-tool supports */
+const SUB_TOOLS_MAP = { annotate: ANNOTATE_SUB_TOOLS, markup: MARKUP_SUB_TOOLS };
 const TOOL_OPTIONS_CONFIG = {
     freehand: ["strokeColor", "strokeWidth", "opacity"],
-    line: ["strokeColor", "strokeWidth", "opacity"],
-    arrow: ["strokeColor", "strokeWidth", "opacity"],
-    rectangle: ["strokeColor", "fillColor", "strokeWidth", "opacity"],
-    ellipse: ["strokeColor", "fillColor", "strokeWidth", "opacity"],
-    polygon: ["strokeColor", "fillColor", "strokeWidth", "opacity"],
-    textbox: ["strokeColor", "opacity"],
+    line: ["strokeColor", "strokeWidth", "opacity", "lineStyle"],
+    arrow: ["strokeColor", "strokeWidth", "opacity", "lineStyle", "arrowHead"],
+    rectangle: ["strokeColor", "fillColor", "strokeWidth", "opacity", "lineStyle"],
+    ellipse: ["strokeColor", "fillColor", "strokeWidth", "opacity", "lineStyle"],
+    polygon: ["strokeColor", "fillColor", "strokeWidth", "opacity", "lineStyle"],
+    polyline: ["strokeColor", "strokeWidth", "opacity", "lineStyle"],
     highlight: ["strokeColor", "opacity"],
     underline: ["strokeColor"],
     strikethrough: ["strokeColor"],
     squiggly: ["strokeColor"],
 };
-const STROKE_WIDTHS = [1, 2, 4, 8];
-const COLOR_PRESETS = ["#ff0000", "#ff8800", "#ffcc00", "#00cc00", "#0088ff", "#8800ff", "#000000", "#ffffff"];
-function selectSlice(state) {
+const LINE_STYLE_DEFS = [
+    { id: "solid", icon: ICON_LINE_SOLID, labelKey: "tools.lineStyleSolid" },
+    { id: "dashed", icon: ICON_LINE_DASHED, labelKey: "tools.lineStyleDashed" },
+    { id: "dotted", icon: ICON_LINE_DOTTED, labelKey: "tools.lineStyleDotted" },
+];
+const ARROW_HEAD_DEFS = [
+    { id: "none", icon: ICON_ARROW_NONE, labelKey: "tools.arrowHeadNone" },
+    { id: "open", icon: ICON_ARROW_OPEN, labelKey: "tools.arrowHeadOpen" },
+    { id: "closed", icon: ICON_ARROW_CLOSED, labelKey: "tools.arrowHeadClosed" },
+];
+function selectSlice(s) {
     return {
-        activeTool: state.activeTool,
-        activeSubTool: state.activeSubTool,
-        toolOptions: state.toolOptions,
+        activeTool: s.activeTool,
+        activeSubTool: s.activeSubTool,
+        toolOptions: s.toolOptions,
+        selectedAnnotation: s.selectedAnnotation,
     };
 }
 function sliceEqual(a, b) {
-    return a.activeTool === b.activeTool && a.activeSubTool === b.activeSubTool && a.toolOptions === b.toolOptions;
+    return (a.activeTool === b.activeTool &&
+        a.activeSubTool === b.activeSubTool &&
+        a.toolOptions === b.toolOptions &&
+        a.selectedAnnotation === b.selectedAnnotation);
 }
+// ====================================================================================
+// createSubToolbar
+// ====================================================================================
 export function createSubToolbar() {
     const el = document.createElement("div");
     el.className = "udoc-subtoolbar";
     el.setAttribute("role", "toolbar");
     el.style.display = "none";
-    // Left: sub-tool buttons
     const toolsSection = document.createElement("div");
     toolsSection.className = "udoc-subtoolbar__tools";
-    // Divider
-    const divider = document.createElement("div");
-    divider.className = "udoc-subtoolbar__divider";
-    // Right: options
+    const dividerEl = document.createElement("div");
+    dividerEl.className = "udoc-subtoolbar__divider";
     const optionsSection = document.createElement("div");
     optionsSection.className = "udoc-subtoolbar__options";
-    el.append(toolsSection, divider, optionsSection);
+    el.append(toolsSection, dividerEl, optionsSection);
+    // ---- Mutable state ----
+    let containerRef = null;
     let unsubRender = null;
     const currentToolBtns = new Map();
     let currentToolSet = null;
+    let builtSubTool = null;
+    let activeSubTool = null;
+    let openPanel = null;
+    // ---- Lazy-created option controls ----
+    let strokeColorSelect = null;
+    let fillColorSelect = null;
+    let strokeWidthInput = null;
+    let opacityInput = null;
+    let fontSizeInput = null;
+    // Delete button for select tool
+    let deleteBtn = null;
+    // Line style & arrow head (panels + triggers)
+    const lineStylePanel = document.createElement("div");
+    lineStylePanel.className = "udoc-linestyle-panel";
+    lineStylePanel.addEventListener("click", (e) => e.stopPropagation());
+    const arrowHeadPanel = document.createElement("div");
+    arrowHeadPanel.className = "udoc-arrowhead-panel";
+    arrowHeadPanel.addEventListener("click", (e) => e.stopPropagation());
+    let lineStyleTrigger = null;
+    let arrowHeadTrigger = null;
+    // ---- Panel management ----
+    function closeAllPanels() {
+        openPanel = null;
+        strokeColorSelect?.close();
+        fillColorSelect?.close();
+        lineStylePanel.classList.remove("udoc-linestyle-panel--open");
+        arrowHeadPanel.classList.remove("udoc-arrowhead-panel--open");
+        strokeWidthInput?.close();
+        opacityInput?.close();
+        fontSizeInput?.close();
+    }
+    const onDocumentClick = () => closeAllPanels();
+    function openPanelAt(key, trigger) {
+        const wasOpen = openPanel === key;
+        closeAllPanels();
+        if (wasOpen)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const cRect = containerRef.getBoundingClientRect();
+        const left = `${rect.left - cRect.left}px`;
+        if (key === "strokeColor")
+            strokeColorSelect?.open(rect, cRect);
+        else if (key === "fillColor")
+            fillColorSelect?.open(rect, cRect);
+        else if (key === "strokeWidth")
+            strokeWidthInput?.open(rect, cRect);
+        else if (key === "opacity")
+            opacityInput?.open(rect, cRect);
+        else if (key === "fontSize")
+            fontSizeInput?.open(rect, cRect);
+        else if (key === "lineStyle") {
+            lineStylePanel.style.left = left;
+            lineStylePanel.classList.add("udoc-linestyle-panel--open");
+        }
+        else if (key === "arrowHead") {
+            arrowHeadPanel.style.left = left;
+            arrowHeadPanel.classList.add("udoc-arrowhead-panel--open");
+        }
+        openPanel = key;
+    }
+    // ---- Dispatch helper ----
+    function dispatchOpt(store, key, value) {
+        if (activeSubTool)
+            store.dispatch({ type: "SET_TOOL_OPTION", subTool: activeSubTool, key, value });
+    }
+    // ---- Mount ----
     function mount(container, store, i18n) {
+        containerRef = container;
         container.appendChild(el);
+        container.appendChild(lineStylePanel);
+        container.appendChild(arrowHeadPanel);
         el.setAttribute("aria-label", i18n.t("tools.subtoolbar"));
+        document.addEventListener("click", onDocumentClick);
         const applyState = (slice) => {
             const visible = isToolSet(slice.activeTool);
             el.style.display = visible ? "flex" : "none";
-            if (!visible)
+            if (!visible) {
+                closeAllPanels();
                 return;
+            }
             const toolSet = slice.activeTool;
             const subTools = SUB_TOOLS_MAP[toolSet];
             if (!subTools)
@@ -87,115 +173,307 @@ export function createSubToolbar() {
                     btn.innerHTML = def.icon;
                     btn.title = i18n.t(def.labelKey);
                     btn.setAttribute("aria-label", i18n.t(def.labelKey));
-                    btn.addEventListener("click", () => {
-                        store.dispatch({ type: "SET_SUB_TOOL", subTool: def.id });
-                    });
+                    btn.addEventListener("click", () => store.dispatch({ type: "SET_SUB_TOOL", subTool: def.id }));
                     toolsSection.appendChild(btn);
                     currentToolBtns.set(def.id, btn);
                 }
             }
-            // Update active state on buttons
             for (const [id, btn] of currentToolBtns) {
                 btn.classList.toggle("udoc-subtoolbar__btn--active", id === slice.activeSubTool);
             }
-            // Build options for the active sub-tool
-            buildOptions(slice, store, i18n);
+            if (!slice.activeSubTool) {
+                optionsSection.innerHTML = "";
+                builtSubTool = null;
+                return;
+            }
+            activeSubTool = slice.activeSubTool;
+            const opts = slice.toolOptions[slice.activeSubTool] ?? { ...DEFAULT_TOOL_OPTIONS };
+            // If sub-tool changed, rebuild the set of option controls in the toolbar
+            if (builtSubTool !== slice.activeSubTool) {
+                closeAllPanels();
+                buildControls(slice.activeSubTool, opts, store, i18n);
+                builtSubTool = slice.activeSubTool;
+            }
+            // Always update values in-place
+            updateValues(opts, store, i18n);
+            // Update delete button state for select tool
+            if (deleteBtn) {
+                deleteBtn.disabled = !slice.selectedAnnotation;
+            }
         };
         applyState(selectSlice(store.getState()));
-        unsubRender = subscribeSelector(store, selectSlice, applyState, {
-            equality: sliceEqual,
-        });
+        unsubRender = subscribeSelector(store, selectSlice, applyState, { equality: sliceEqual });
     }
-    function buildOptions(slice, store, i18n) {
+    // ====================================================================
+    // buildControls — called ONLY when active sub-tool changes
+    // ====================================================================
+    function buildControls(subTool, opts, store, i18n) {
         optionsSection.innerHTML = "";
-        if (!slice.activeSubTool)
+        lineStyleTrigger = null;
+        arrowHeadTrigger = null;
+        deleteBtn = null;
+        // Select tool shows a delete button instead of drawing options
+        if (subTool === "select") {
+            deleteBtn = document.createElement("button");
+            deleteBtn.className = "udoc-subtoolbar__btn udoc-subtoolbar__btn--delete";
+            deleteBtn.innerHTML = ICON_DELETE;
+            deleteBtn.title = i18n.t("tools.deleteAnnotation");
+            deleteBtn.setAttribute("aria-label", i18n.t("tools.deleteAnnotation"));
+            deleteBtn.disabled = true;
+            deleteBtn.addEventListener("click", () => {
+                const sel = store.getState().selectedAnnotation;
+                if (sel) {
+                    store.dispatch({
+                        type: "REMOVE_ANNOTATION",
+                        pageIndex: sel.pageIndex,
+                        annotationIndex: sel.annotationIndex,
+                    });
+                }
+            });
+            optionsSection.appendChild(deleteBtn);
             return;
-        const supportedOptions = TOOL_OPTIONS_CONFIG[slice.activeSubTool];
-        if (!supportedOptions || supportedOptions.length === 0)
+        }
+        const supported = TOOL_OPTIONS_CONFIG[subTool];
+        if (!supported || supported.length === 0)
             return;
-        const opts = slice.toolOptions[slice.activeSubTool] ?? { ...DEFAULT_TOOL_OPTIONS };
-        const subTool = slice.activeSubTool;
-        for (const optKey of supportedOptions) {
-            if (optKey === "strokeColor" || optKey === "fillColor") {
-                const colorGroup = document.createElement("div");
-                colorGroup.className = "udoc-subtoolbar__option-group";
-                const label = document.createElement("span");
-                label.className = "udoc-subtoolbar__option-label";
-                label.textContent = i18n.t(optKey === "strokeColor" ? "tools.strokeColor" : "tools.fillColor");
-                colorGroup.appendChild(label);
-                const currentColor = optKey === "strokeColor" ? opts.strokeColor : opts.fillColor;
-                for (const color of COLOR_PRESETS) {
-                    const swatch = document.createElement("button");
-                    swatch.className = "udoc-subtoolbar__color-swatch";
-                    if (currentColor === color) {
-                        swatch.classList.add("udoc-subtoolbar__color-swatch--active");
-                    }
-                    swatch.style.setProperty("--swatch-color", color);
-                    swatch.title = color;
-                    swatch.setAttribute("aria-label", `${i18n.t(optKey === "strokeColor" ? "tools.strokeColor" : "tools.fillColor")} ${color}`);
-                    swatch.addEventListener("click", () => {
-                        store.dispatch({ type: "SET_TOOL_OPTION", subTool, key: optKey, value: color });
+        for (const optKey of supported) {
+            if (optKey === "strokeColor") {
+                if (!strokeColorSelect) {
+                    strokeColorSelect = createColorSelect({
+                        variant: "stroke",
+                        label: i18n.t("tools.strokeColor"),
+                        noneLabel: i18n.t("tools.noFill"),
+                        onSelect: () => closeAllPanels(),
+                        onChange: (color) => dispatchOpt(store, "strokeColor", color),
+                    });
+                    containerRef.appendChild(strokeColorSelect.panel);
+                    strokeColorSelect.el.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        openPanelAt("strokeColor", strokeColorSelect.el);
+                    });
+                }
+                optionsSection.appendChild(strokeColorSelect.el);
+            }
+            else if (optKey === "fillColor") {
+                if (!fillColorSelect) {
+                    fillColorSelect = createColorSelect({
+                        variant: "fill",
+                        label: i18n.t("tools.fillColor"),
+                        noneLabel: i18n.t("tools.noFill"),
+                        onSelect: () => closeAllPanels(),
+                        onChange: (color) => dispatchOpt(store, "fillColor", color),
+                    });
+                    containerRef.appendChild(fillColorSelect.panel);
+                    fillColorSelect.el.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        openPanelAt("fillColor", fillColorSelect.el);
                     });
-                    colorGroup.appendChild(swatch);
                 }
-                optionsSection.appendChild(colorGroup);
+                optionsSection.appendChild(fillColorSelect.el);
             }
             else if (optKey === "strokeWidth") {
-                const widthGroup = document.createElement("div");
-                widthGroup.className = "udoc-subtoolbar__option-group";
-                const label = document.createElement("span");
-                label.className = "udoc-subtoolbar__option-label";
-                label.textContent = i18n.t("tools.strokeWidth");
-                widthGroup.appendChild(label);
-                for (const w of STROKE_WIDTHS) {
-                    const btn = document.createElement("button");
-                    btn.className = "udoc-subtoolbar__width-btn";
-                    if (opts.strokeWidth === w) {
-                        btn.classList.add("udoc-subtoolbar__width-btn--active");
-                    }
-                    // Visual indicator: a horizontal line of the given width
-                    const line = document.createElement("span");
-                    line.className = "udoc-subtoolbar__width-line";
-                    line.style.height = `${w}px`;
-                    btn.appendChild(line);
-                    btn.title = `${w}px`;
-                    btn.setAttribute("aria-label", `${i18n.t("tools.strokeWidth")} ${w}px`);
-                    btn.addEventListener("click", () => {
-                        store.dispatch({ type: "SET_TOOL_OPTION", subTool, key: "strokeWidth", value: w });
+                if (!strokeWidthInput) {
+                    strokeWidthInput = createNumberInput({
+                        min: 0.5,
+                        max: 12,
+                        step: 0.5,
+                        value: opts.strokeWidth,
+                        icon: ICON_STROKE_WIDTH,
+                        formatValue: (v) => `${v}pt`,
+                        parseValue: (s) => {
+                            const n = parseFloat(s.replace(/pt$/i, ""));
+                            return isNaN(n) ? null : n;
+                        },
+                        label: i18n.t("tools.strokeWidth"),
+                        onChange: (v) => dispatchOpt(store, "strokeWidth", v),
+                    });
+                    containerRef.appendChild(strokeWidthInput.panel);
+                    strokeWidthInput.el.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        openPanelAt("strokeWidth", strokeWidthInput.el);
                     });
-                    widthGroup.appendChild(btn);
                 }
-                optionsSection.appendChild(widthGroup);
+                optionsSection.appendChild(strokeWidthInput.el);
             }
             else if (optKey === "opacity") {
-                const opacityGroup = document.createElement("div");
-                opacityGroup.className = "udoc-subtoolbar__option-group";
-                const label = document.createElement("span");
-                label.className = "udoc-subtoolbar__option-label";
-                label.textContent = i18n.t("tools.opacity");
-                opacityGroup.appendChild(label);
-                const slider = document.createElement("input");
-                slider.type = "range";
-                slider.className = "udoc-subtoolbar__opacity-slider";
-                slider.min = "0.1";
-                slider.max = "1";
-                slider.step = "0.1";
-                slider.value = String(opts.opacity);
-                slider.title = `${Math.round(opts.opacity * 100)}%`;
-                slider.setAttribute("aria-label", i18n.t("tools.opacity"));
-                slider.addEventListener("input", () => {
-                    const value = parseFloat(slider.value);
-                    store.dispatch({ type: "SET_TOOL_OPTION", subTool, key: "opacity", value });
+                if (!opacityInput) {
+                    opacityInput = createNumberInput({
+                        min: 10,
+                        max: 100,
+                        step: 10,
+                        value: Math.round(opts.opacity * 100),
+                        icon: ICON_OPACITY,
+                        formatValue: (v) => `${Math.round(v)}%`,
+                        parseValue: (s) => {
+                            const n = parseFloat(s.replace(/%$/i, ""));
+                            return isNaN(n) ? null : n;
+                        },
+                        label: i18n.t("tools.opacity"),
+                        onChange: (v) => dispatchOpt(store, "opacity", v / 100),
+                    });
+                    containerRef.appendChild(opacityInput.panel);
+                    opacityInput.el.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        openPanelAt("opacity", opacityInput.el);
+                    });
+                }
+                optionsSection.appendChild(opacityInput.el);
+            }
+            else if (optKey === "fontSize") {
+                if (!fontSizeInput) {
+                    fontSizeInput = createNumberInput({
+                        min: 8,
+                        max: 144,
+                        step: 1,
+                        value: opts.fontSize,
+                        icon: ICON_FONT_SIZE,
+                        formatValue: (v) => `${v}pt`,
+                        parseValue: (s) => {
+                            const n = parseFloat(s.replace(/pt$/i, ""));
+                            return isNaN(n) ? null : n;
+                        },
+                        label: i18n.t("tools.fontSize"),
+                        onChange: (v) => dispatchOpt(store, "fontSize", v),
+                    });
+                    containerRef.appendChild(fontSizeInput.panel);
+                    fontSizeInput.el.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        openPanelAt("fontSize", fontSizeInput.el);
+                    });
+                }
+                optionsSection.appendChild(fontSizeInput.el);
+            }
+            else if (optKey === "lineStyle") {
+                lineStyleTrigger = document.createElement("button");
+                lineStyleTrigger.className =
+                    "udoc-subtoolbar__dropdown-trigger udoc-subtoolbar__dropdown-trigger--icon";
+                lineStyleTrigger.title = i18n.t("tools.lineStyle");
+                const arrow = document.createElement("span");
+                arrow.className = "udoc-subtoolbar__dropdown-arrow";
+                arrow.textContent = "\u25BE";
+                lineStyleTrigger.appendChild(arrow);
+                lineStyleTrigger.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    openPanelAt("lineStyle", lineStyleTrigger);
+                });
+                optionsSection.appendChild(lineStyleTrigger);
+            }
+            else if (optKey === "arrowHead") {
+                arrowHeadTrigger = document.createElement("button");
+                arrowHeadTrigger.className =
+                    "udoc-subtoolbar__dropdown-trigger udoc-subtoolbar__dropdown-trigger--icon";
+                arrowHeadTrigger.title = i18n.t("tools.arrowHeadEnd");
+                const arrow = document.createElement("span");
+                arrow.className = "udoc-subtoolbar__dropdown-arrow";
+                arrow.textContent = "\u25BE";
+                arrowHeadTrigger.appendChild(arrow);
+                arrowHeadTrigger.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    openPanelAt("arrowHead", arrowHeadTrigger);
+                });
+                optionsSection.appendChild(arrowHeadTrigger);
+            }
+        }
+    }
+    // ====================================================================
+    // updateValues — called on EVERY state change, updates in-place
+    // ====================================================================
+    function updateValues(opts, store, i18n) {
+        // Color selects
+        strokeColorSelect?.update(opts.strokeColor);
+        fillColorSelect?.update(opts.fillColor);
+        // Number inputs
+        strokeWidthInput?.update(opts.strokeWidth);
+        opacityInput?.update(Math.round(opts.opacity * 100));
+        fontSizeInput?.update(opts.fontSize);
+        // Line style trigger + panel
+        if (lineStyleTrigger) {
+            const def = LINE_STYLE_DEFS.find((s) => s.id === opts.lineStyle) ?? LINE_STYLE_DEFS[0];
+            const arrowEl = lineStyleTrigger.lastElementChild;
+            lineStyleTrigger.innerHTML = def.icon;
+            if (arrowEl)
+                lineStyleTrigger.appendChild(arrowEl);
+            lineStyleTrigger.setAttribute("aria-label", `${i18n.t("tools.lineStyle")}: ${i18n.t(def.labelKey)}`);
+        }
+        rebuildLineStylePanel(opts.lineStyle, store, i18n);
+        // Arrow head trigger + panel
+        if (arrowHeadTrigger) {
+            const endDef = ARROW_HEAD_DEFS.find((a) => a.id === opts.arrowHeadEnd) ?? ARROW_HEAD_DEFS[0];
+            const arrowEl = arrowHeadTrigger.lastElementChild;
+            arrowHeadTrigger.innerHTML = endDef.icon;
+            if (arrowEl)
+                arrowHeadTrigger.appendChild(arrowEl);
+        }
+        rebuildArrowHeadPanel(opts.arrowHeadStart, opts.arrowHeadEnd, store, i18n);
+    }
+    // ---- Line style panel ----
+    function rebuildLineStylePanel(current, store, i18n) {
+        lineStylePanel.innerHTML = "";
+        for (const def of LINE_STYLE_DEFS) {
+            const item = document.createElement("button");
+            item.className = "udoc-linestyle-panel__item";
+            if (current === def.id)
+                item.classList.add("udoc-linestyle-panel__item--active");
+            const icon = document.createElement("span");
+            icon.className = "udoc-linestyle-panel__icon";
+            icon.innerHTML = def.icon;
+            const label = document.createElement("span");
+            label.className = "udoc-linestyle-panel__label";
+            label.textContent = i18n.t(def.labelKey);
+            item.append(icon, label);
+            item.title = i18n.t(def.labelKey);
+            item.addEventListener("click", (e) => {
+                e.stopPropagation();
+                closeAllPanels();
+                dispatchOpt(store, "lineStyle", def.id);
+            });
+            lineStylePanel.appendChild(item);
+        }
+    }
+    // ---- Arrow head panel ----
+    function rebuildArrowHeadPanel(startVal, endVal, store, i18n) {
+        arrowHeadPanel.innerHTML = "";
+        for (const [rowKey, rowLabel, currentVal] of [
+            ["arrowHeadStart", i18n.t("tools.arrowHeadStart"), startVal],
+            ["arrowHeadEnd", i18n.t("tools.arrowHeadEnd"), endVal],
+        ]) {
+            const row = document.createElement("div");
+            row.className = "udoc-arrowhead-panel__row";
+            const lbl = document.createElement("span");
+            lbl.className = "udoc-arrowhead-panel__row-label";
+            lbl.textContent = rowLabel;
+            row.appendChild(lbl);
+            for (const def of ARROW_HEAD_DEFS) {
+                const btn = document.createElement("button");
+                btn.className = "udoc-arrowhead-panel__btn";
+                if (currentVal === def.id)
+                    btn.classList.add("udoc-arrowhead-panel__btn--active");
+                btn.innerHTML = def.icon;
+                btn.title = i18n.t(def.labelKey);
+                if (rowKey === "arrowHeadStart")
+                    btn.style.transform = "scaleX(-1)";
+                btn.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    dispatchOpt(store, rowKey, def.id);
                 });
-                opacityGroup.appendChild(slider);
-                optionsSection.appendChild(opacityGroup);
+                row.appendChild(btn);
             }
+            arrowHeadPanel.appendChild(row);
         }
     }
+    // ---- Destroy ----
     function destroy() {
         if (unsubRender)
             unsubRender();
+        document.removeEventListener("click", onDocumentClick);
         currentToolBtns.clear();
+        strokeColorSelect?.destroy();
+        fillColorSelect?.destroy();
+        strokeWidthInput?.destroy();
+        opacityInput?.destroy();
+        fontSizeInput?.destroy();
+        lineStylePanel.remove();
+        arrowHeadPanel.remove();
         el.remove();
     }
     return { el, mount, destroy };