@tsdraw/react 0.6.2 → 0.7.0

package/dist/index.cjs

@@ -100,66 +100,106 @@ function SelectionOverlay({
 }
 var STYLE_COLORS = Object.entries(core.DEFAULT_COLORS).filter(([key]) => key !== "white").map(([value]) => ({ value }));
 var STYLE_DASHES = ["draw", "solid", "dashed", "dotted"];
+var STYLE_FILLS = ["none", "blank", "semi", "solid"];
 var STYLE_SIZES = ["s", "m", "l", "xl"];
 function StylePanel({
   visible,
+  parts,
+  customParts,
   style,
   theme,
   drawColor,
   drawDash,
+  drawFill,
   drawSize,
   onColorSelect,
   onDashSelect,
+  onFillSelect,
   onSizeSelect
 }) {
-  if (!visible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tsdraw-style-panel", style, "aria-label": "Draw style panel", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-colors", children: STYLE_COLORS.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "tsdraw-style-color",
-        "data-active": drawColor === item.value ? "true" : void 0,
-        "aria-label": `Color ${item.value}`,
-        title: item.value,
-        onClick: () => onColorSelect(item.value),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: "tsdraw-style-color-dot",
-            style: { background: core.resolveThemeColor(item.value, theme) }
-          }
-        )
-      },
-      item.value
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_DASHES.map((dash) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "tsdraw-style-row",
-        "data-active": drawDash === dash ? "true" : void 0,
-        "aria-label": `Stroke ${dash}`,
-        title: dash,
-        onClick: () => onDashSelect(dash),
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-preview-line tsdraw-style-preview-line--${dash}` }) })
-      },
-      dash
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "tsdraw-style-row",
-        "data-active": drawSize === size ? "true" : void 0,
-        "aria-label": `Thickness ${size}`,
-        title: size,
-        onClick: () => onSizeSelect(size),
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-size tsdraw-style-size--${size}` }) })
-      },
-      size
-    )) })
-  ] });
+  if (!visible || parts.length === 0) return null;
+  const context = {
+    drawColor,
+    drawDash,
+    drawFill,
+    drawSize,
+    onColorSelect,
+    onDashSelect,
+    onFillSelect,
+    onSizeSelect
+  };
+  const customPartMap = new Map((customParts ?? []).map((customPart) => [customPart.id, customPart]));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-panel", style, "aria-label": "Draw style panel", children: parts.map((part) => {
+    if (part === "colors") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-colors", children: STYLE_COLORS.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "tsdraw-style-color",
+          "data-active": drawColor === item.value ? "true" : void 0,
+          "aria-label": `Color ${item.value}`,
+          title: item.value,
+          onClick: () => onColorSelect(item.value),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "tsdraw-style-color-dot",
+              style: { background: core.resolveThemeColor(item.value, theme) }
+            }
+          )
+        },
+        item.value
+      )) }, part);
+    }
+    if (part === "dashes") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_DASHES.map((dash) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "tsdraw-style-row",
+          "data-active": drawDash === dash ? "true" : void 0,
+          "aria-label": `Stroke ${dash}`,
+          title: dash,
+          onClick: () => onDashSelect(dash),
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-preview-line tsdraw-style-preview-line--${dash}` }) })
+        },
+        dash
+      )) }, part);
+    }
+    if (part === "fills") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_FILLS.map((fill) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "tsdraw-style-row",
+          "data-active": drawFill === fill ? "true" : void 0,
+          "aria-label": `Fill ${fill}`,
+          title: fill,
+          onClick: () => onFillSelect(fill),
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-fill tsdraw-style-fill--${fill}` }) })
+        },
+        fill
+      )) }, part);
+    }
+    if (part === "sizes") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section", children: STYLE_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "tsdraw-style-row",
+          "data-active": drawSize === size ? "true" : void 0,
+          "aria-label": `Thickness ${size}`,
+          title: size,
+          onClick: () => onSizeSelect(size),
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `tsdraw-style-size tsdraw-style-size--${size}` }) })
+        },
+        size
+      )) }, part);
+    }
+    const customPart = customPartMap.get(part);
+    if (!customPart) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-style-section tsdraw-style-section--custom", children: customPart.render(context) }, part);
+  }) });
 }
 function ToolOverlay({
   visible,
@@ -199,6 +239,8 @@ function ToolOverlay({
 function getDefaultToolbarIcon(toolId, isActive) {
   if (toolId === "select") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPointer, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "pen") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconPencil, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "square") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSquare, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "circle") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCircle, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconEraser, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "hand") return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconHandStop, { size: 16, stroke: isActive ? 1 : 1.8, fill: isActive ? "currentColor" : "none", style: isActive ? { stroke: "#000000" } : void 0 });
   return null;
@@ -390,8 +432,6 @@ function resolveDrawColor(colorStyle, theme) {
   return core.resolveThemeColor(colorStyle, theme);
 }
 function useTsdrawCanvasController(options = {}) {
-  const stylePanelToolIds = options.stylePanelToolIds ?? ["pen"];
-  const stylePanelToolIdsRef = react.useRef(stylePanelToolIds);
   const onMountRef = react.useRef(options.onMount);
   const containerRef = react.useRef(null);
   const canvasRef = react.useRef(null);
@@ -426,6 +466,7 @@ function useTsdrawCanvasController(options = {}) {
   const [currentTool, setCurrentToolState] = react.useState(options.initialTool ?? "pen");
   const [drawColor, setDrawColor] = react.useState("black");
   const [drawDash, setDrawDash] = react.useState("draw");
+  const [drawFill, setDrawFill] = react.useState("none");
   const [drawSize, setDrawSize] = react.useState("m");
   const [selectedShapeIds, setSelectedShapeIds] = react.useState([]);
   const [selectionBrush, setSelectionBrush] = react.useState(null);
@@ -442,9 +483,6 @@ function useTsdrawCanvasController(options = {}) {
   react.useEffect(() => {
     currentToolRef.current = currentTool;
   }, [currentTool]);
-  react.useEffect(() => {
-    stylePanelToolIdsRef.current = stylePanelToolIds;
-  }, [stylePanelToolIds]);
   react.useEffect(() => {
     onMountRef.current = options.onMount;
   }, [options.onMount]);
@@ -456,7 +494,7 @@ function useTsdrawCanvasController(options = {}) {
   }, [selectionRotationDeg]);
   react.useEffect(() => {
     schedulePersistRef.current?.();
-  }, [selectedShapeIds, currentTool, drawColor, drawDash, drawSize]);
+  }, [selectedShapeIds, currentTool, drawColor, drawDash, drawFill, drawSize]);
   const render = react.useCallback(() => {
     const canvas = canvasRef.current;
     const editor = editorRef.current;
@@ -592,6 +630,7 @@ function useTsdrawCanvasController(options = {}) {
     const initialStyle = editor.getCurrentDrawStyle();
     setDrawColor(initialStyle.color);
     setDrawDash(initialStyle.dash);
+    setDrawFill(initialStyle.fill);
     setDrawSize(initialStyle.size);
     const resize = () => {
       const dpr = window.devicePixelRatio ?? 1;
@@ -673,6 +712,7 @@ function useTsdrawCanvasController(options = {}) {
       const nextDrawStyle = editor.getCurrentDrawStyle();
       setDrawColor(nextDrawStyle.color);
       setDrawDash(nextDrawStyle.dash);
+      setDrawFill(nextDrawStyle.fill);
       setDrawSize(nextDrawStyle.size);
       setSelectionRotationDeg(0);
       render();
@@ -1051,6 +1091,7 @@ function useTsdrawCanvasController(options = {}) {
         editor.setCurrentDrawStyle(partial);
         if (partial.color) setDrawColor(partial.color);
         if (partial.dash) setDrawDash(partial.dash);
+        if (partial.fill) setDrawFill(partial.fill);
         if (partial.size) setDrawSize(partial.size);
         render();
       }
@@ -1108,6 +1149,7 @@ function useTsdrawCanvasController(options = {}) {
       editor.setCurrentDrawStyle(partial);
       if (partial.color) setDrawColor(partial.color);
       if (partial.dash) setDrawDash(partial.dash);
+      if (partial.fill) setDrawFill(partial.fill);
       if (partial.size) setDrawSize(partial.size);
       render();
     },
@@ -1175,6 +1217,7 @@ function useTsdrawCanvasController(options = {}) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1184,7 +1227,6 @@ function useTsdrawCanvasController(options = {}) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel: stylePanelToolIdsRef.current.includes(currentTool),
     canUndo,
     canRedo,
     undo,
@@ -1195,12 +1237,21 @@ function useTsdrawCanvasController(options = {}) {
     handleRotatePointerDown
   };
 }
-var DEFAULT_TOOLBAR_PARTS = [["undo", "redo"], ["select", "hand", "pen", "eraser"]];
+var DEFAULT_TOOLBAR_PARTS = [["undo", "redo"], ["select", "hand", "pen", "eraser", "square", "circle"]];
 var EMPTY_CUSTOM_TOOLS = [];
 var EMPTY_CUSTOM_ELEMENTS = [];
+var EMPTY_STYLE_PANEL_PARTS = [];
+var EMPTY_STYLE_PANEL_CUSTOM_PARTS = [];
+var DEFAULT_STYLE_PANEL_PARTS_BY_TOOL = {
+  pen: ["colors", "dashes", "sizes"],
+  square: ["colors", "dashes", "fills", "sizes"],
+  circle: ["colors", "dashes", "fills", "sizes"]
+};
 var DEFAULT_TOOL_LABELS = {
   select: "Select",
   pen: "Pen",
+  square: "Rectangle",
+  circle: "Ellipse",
   eraser: "Eraser",
   hand: "Hand"
 };
@@ -1272,21 +1323,6 @@ function Tsdraw(props) {
     () => customTools.filter((customTool) => toolbarToolIds.has(customTool.id)).map((customTool) => customTool.definition),
     [customTools, toolbarToolIds]
   );
-  const stylePanelToolIds = react.useMemo(
-    () => {
-      const nextToolIds = /* @__PURE__ */ new Set();
-      if (toolbarToolIds.has("pen")) {
-        nextToolIds.add("pen");
-      }
-      for (const customTool of customTools) {
-        if ((customTool.showStylePanel ?? false) && toolbarToolIds.has(customTool.id)) {
-          nextToolIds.add(customTool.id);
-        }
-      }
-      return [...nextToolIds];
-    },
-    [customTools, toolbarToolIds]
-  );
   const firstToolbarTool = react.useMemo(() => {
     for (const toolbarPart of toolbarPartIds) {
       for (const item of toolbarPart) {
@@ -1315,6 +1351,7 @@ function Tsdraw(props) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1324,7 +1361,6 @@ function Tsdraw(props) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel,
     canUndo,
     canRedo,
     undo,
@@ -1338,11 +1374,12 @@ function Tsdraw(props) {
     initialTool,
     theme: resolvedTheme,
     persistenceKey: props.persistenceKey,
-    stylePanelToolIds,
     onMount: props.onMount
   });
   const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 14);
   const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8, 8);
+  const isToolbarHidden = props.uiOptions?.toolbar?.hide === true;
+  const isStylePanelHidden = props.uiOptions?.stylePanel?.hide === true;
   const canvasCursor = props.uiOptions?.cursor?.getCursor?.(cursorContext) ?? defaultCanvasCursor;
   const defaultToolOverlay = /* @__PURE__ */ jsxRuntime.jsx(
     ToolOverlay,
@@ -1364,9 +1401,24 @@ function Tsdraw(props) {
   const onDashSelect = react.useCallback((dash) => {
     applyDrawStyle({ dash });
   }, [applyDrawStyle]);
+  const onFillSelect = react.useCallback((fill) => {
+    applyDrawStyle({ fill });
+  }, [applyDrawStyle]);
   const onSizeSelect = react.useCallback((size) => {
     applyDrawStyle({ size });
   }, [applyDrawStyle]);
+  const activeCustomTool = customToolMap.get(currentTool);
+  const stylePanelParts = react.useMemo(
+    () => {
+      const fromCustomTool = activeCustomTool?.stylePanel?.parts;
+      if (fromCustomTool && fromCustomTool.length > 0) return fromCustomTool;
+      if (activeCustomTool?.stylePanel?.customParts && activeCustomTool.stylePanel.customParts.length > 0) return activeCustomTool.stylePanel.customParts.map((customPart) => customPart.id);
+      if (currentTool in DEFAULT_STYLE_PANEL_PARTS_BY_TOOL) return DEFAULT_STYLE_PANEL_PARTS_BY_TOOL[currentTool] ?? EMPTY_STYLE_PANEL_PARTS;
+      return EMPTY_STYLE_PANEL_PARTS;
+    },
+    [activeCustomTool, currentTool]
+  );
+  const stylePanelCustomParts = activeCustomTool?.stylePanel?.customParts ?? EMPTY_STYLE_PANEL_CUSTOM_PARTS;
   const toolbarParts = react.useMemo(
     () => toolbarPartIds.map((toolbarPart, partIndex) => {
       const items = toolbarPart.map((item) => {
@@ -1455,14 +1507,18 @@ function Tsdraw(props) {
         /* @__PURE__ */ jsxRuntime.jsx(
           StylePanel,
           {
-            visible: isPersistenceReady && showStylePanel,
+            visible: !isStylePanelHidden && isPersistenceReady && stylePanelParts.length > 0,
+            parts: stylePanelParts,
+            customParts: stylePanelCustomParts,
             style: stylePanelPlacementStyle,
             theme: resolvedTheme,
             drawColor,
             drawDash,
+            drawFill,
             drawSize,
             onColorSelect,
             onDashSelect,
+            onFillSelect,
             onSizeSelect
           }
         ),
@@ -1479,7 +1535,7 @@ function Tsdraw(props) {
           },
           customElement.id
         )),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !isToolbarHidden ? /* @__PURE__ */ jsxRuntime.jsx(
           Toolbar,
           {
             parts: toolbarParts,
@@ -1488,7 +1544,7 @@ function Tsdraw(props) {
             onToolChange: setTool,
             disabled: !isPersistenceReady
           }
-        )
+        ) : null
       ]
     }
   );