@tsdraw/react 0.6.2 → 0.7.0

package/dist/index.d.cts

@@ -1,6 +1,22 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ReactNode } from 'react';
-import { ToolId, Editor, ColorStyle, DashStyle, SizeStyle, ToolDefinition } from '@tsdraw/core';
+import { ReactNode, CSSProperties } from 'react';
+import { ColorStyle, DashStyle, FillStyle, SizeStyle, ToolId, Editor, ToolDefinition } from '@tsdraw/core';
+
+type TsdrawStylePanelPartItem = 'colors' | 'dashes' | 'fills' | 'sizes' | (string & {});
+interface TsdrawStylePanelRenderContext {
+    drawColor: ColorStyle;
+    drawDash: DashStyle;
+    drawFill: FillStyle;
+    drawSize: SizeStyle;
+    onColorSelect: (color: ColorStyle) => void;
+    onDashSelect: (dash: DashStyle) => void;
+    onFillSelect: (fill: FillStyle) => void;
+    onSizeSelect: (size: SizeStyle) => void;
+}
+interface TsdrawStylePanelCustomPart {
+    id: string;
+    render: (context: TsdrawStylePanelRenderContext) => ReactNode;
+}
 
 interface TsdrawCursorContext {
     currentTool: ToolId;
@@ -32,6 +48,7 @@ interface TsdrawMountApi {
     applyDrawStyle: (partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>) => void;
 }
@@ -45,7 +62,10 @@ interface TsdrawCustomTool {
     icon: ReactNode;
     iconSelected?: ReactNode;
     definition: ToolDefinition;
-    showStylePanel?: boolean;
+    stylePanel?: {
+        parts?: TsdrawStylePanelPartItem[];
+        customParts?: TsdrawStylePanelCustomPart[];
+    };
 }
 type TsdrawToolbarBuiltInAction = 'undo' | 'redo';
 type ToolbarPartItem = ToolId | TsdrawToolbarBuiltInAction;
@@ -57,10 +77,12 @@ interface TsdrawUiPlacement {
 }
 interface TsdrawUiOptions {
     toolbar?: {
+        hide?: boolean;
         placement?: TsdrawUiPlacement;
         parts?: ToolbarPartItem[][];
     };
     stylePanel?: {
+        hide?: boolean;
         placement?: TsdrawUiPlacement;
     };
     customElements?: TsdrawCustomElement[];
@@ -81,6 +103,7 @@ interface TsdrawCustomElementRenderArgs {
     applyDrawStyle: (partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>) => void;
 }
@@ -125,4 +148,4 @@ interface ToolbarPart {
 }
 declare function getDefaultToolbarIcon(toolId: ToolId, isActive: boolean): ReactNode;
 
-export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawMountApi, type TsdrawProps, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };
+export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawMountApi, type TsdrawProps, type TsdrawStylePanelCustomPart, type TsdrawStylePanelPartItem, type TsdrawStylePanelRenderContext, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };

package/dist/index.d.ts

@@ -1,6 +1,22 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ReactNode } from 'react';
-import { ToolId, Editor, ColorStyle, DashStyle, SizeStyle, ToolDefinition } from '@tsdraw/core';
+import { ReactNode, CSSProperties } from 'react';
+import { ColorStyle, DashStyle, FillStyle, SizeStyle, ToolId, Editor, ToolDefinition } from '@tsdraw/core';
+
+type TsdrawStylePanelPartItem = 'colors' | 'dashes' | 'fills' | 'sizes' | (string & {});
+interface TsdrawStylePanelRenderContext {
+    drawColor: ColorStyle;
+    drawDash: DashStyle;
+    drawFill: FillStyle;
+    drawSize: SizeStyle;
+    onColorSelect: (color: ColorStyle) => void;
+    onDashSelect: (dash: DashStyle) => void;
+    onFillSelect: (fill: FillStyle) => void;
+    onSizeSelect: (size: SizeStyle) => void;
+}
+interface TsdrawStylePanelCustomPart {
+    id: string;
+    render: (context: TsdrawStylePanelRenderContext) => ReactNode;
+}
 
 interface TsdrawCursorContext {
     currentTool: ToolId;
@@ -32,6 +48,7 @@ interface TsdrawMountApi {
     applyDrawStyle: (partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>) => void;
 }
@@ -45,7 +62,10 @@ interface TsdrawCustomTool {
     icon: ReactNode;
     iconSelected?: ReactNode;
     definition: ToolDefinition;
-    showStylePanel?: boolean;
+    stylePanel?: {
+        parts?: TsdrawStylePanelPartItem[];
+        customParts?: TsdrawStylePanelCustomPart[];
+    };
 }
 type TsdrawToolbarBuiltInAction = 'undo' | 'redo';
 type ToolbarPartItem = ToolId | TsdrawToolbarBuiltInAction;
@@ -57,10 +77,12 @@ interface TsdrawUiPlacement {
 }
 interface TsdrawUiOptions {
     toolbar?: {
+        hide?: boolean;
         placement?: TsdrawUiPlacement;
         parts?: ToolbarPartItem[][];
     };
     stylePanel?: {
+        hide?: boolean;
         placement?: TsdrawUiPlacement;
     };
     customElements?: TsdrawCustomElement[];
@@ -81,6 +103,7 @@ interface TsdrawCustomElementRenderArgs {
     applyDrawStyle: (partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>) => void;
 }
@@ -125,4 +148,4 @@ interface ToolbarPart {
 }
 declare function getDefaultToolbarIcon(toolId: ToolId, isActive: boolean): ReactNode;
 
-export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawMountApi, type TsdrawProps, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };
+export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawMountApi, type TsdrawProps, type TsdrawStylePanelCustomPart, type TsdrawStylePanelPartItem, type TsdrawStylePanelRenderContext, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DEFAULT_COLORS, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, isSelectTool } from '@tsdraw/core';
-import { IconPointer, IconPencil, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
+import { IconPointer, IconPencil, IconSquare, IconCircle, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
 
 // src/components/TsdrawCanvas.tsx
 function SelectionOverlay({
@@ -98,66 +98,106 @@ function SelectionOverlay({
 }
 var STYLE_COLORS = Object.entries(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__ */ jsxs("div", { className: "tsdraw-style-panel", style, "aria-label": "Draw style panel", children: [
-    /* @__PURE__ */ jsx("div", { className: "tsdraw-style-colors", children: STYLE_COLORS.map((item) => /* @__PURE__ */ 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__ */ jsx(
-          "span",
-          {
-            className: "tsdraw-style-color-dot",
-            style: { background: resolveThemeColor(item.value, theme) }
-          }
-        )
-      },
-      item.value
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section", children: STYLE_DASHES.map((dash) => /* @__PURE__ */ 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__ */ jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsx("span", { className: `tsdraw-style-preview-line tsdraw-style-preview-line--${dash}` }) })
-      },
-      dash
-    )) }),
-    /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section", children: STYLE_SIZES.map((size) => /* @__PURE__ */ 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__ */ jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "tsdraw-style-panel", style, "aria-label": "Draw style panel", children: parts.map((part) => {
+    if (part === "colors") {
+      return /* @__PURE__ */ jsx("div", { className: "tsdraw-style-colors", children: STYLE_COLORS.map((item) => /* @__PURE__ */ 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__ */ jsx(
+            "span",
+            {
+              className: "tsdraw-style-color-dot",
+              style: { background: resolveThemeColor(item.value, theme) }
+            }
+          )
+        },
+        item.value
+      )) }, part);
+    }
+    if (part === "dashes") {
+      return /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section", children: STYLE_DASHES.map((dash) => /* @__PURE__ */ 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__ */ jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsx("span", { className: `tsdraw-style-preview-line tsdraw-style-preview-line--${dash}` }) })
+        },
+        dash
+      )) }, part);
+    }
+    if (part === "fills") {
+      return /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section", children: STYLE_FILLS.map((fill) => /* @__PURE__ */ 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__ */ jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsx("span", { className: `tsdraw-style-fill tsdraw-style-fill--${fill}` }) })
+        },
+        fill
+      )) }, part);
+    }
+    if (part === "sizes") {
+      return /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section", children: STYLE_SIZES.map((size) => /* @__PURE__ */ 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__ */ jsx("span", { className: "tsdraw-style-preview", children: /* @__PURE__ */ jsx("span", { className: `tsdraw-style-size tsdraw-style-size--${size}` }) })
+        },
+        size
+      )) }, part);
+    }
+    const customPart = customPartMap.get(part);
+    if (!customPart) return null;
+    return /* @__PURE__ */ jsx("div", { className: "tsdraw-style-section tsdraw-style-section--custom", children: customPart.render(context) }, part);
+  }) });
 }
 function ToolOverlay({
   visible,
@@ -197,6 +237,8 @@ function ToolOverlay({
 function getDefaultToolbarIcon(toolId, isActive) {
   if (toolId === "select") return /* @__PURE__ */ jsx(IconPointer, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "pen") return /* @__PURE__ */ jsx(IconPencil, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "square") return /* @__PURE__ */ jsx(IconSquare, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
+  if (toolId === "circle") return /* @__PURE__ */ jsx(IconCircle, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "eraser") return /* @__PURE__ */ jsx(IconEraser, { size: 16, stroke: 1.8, fill: isActive ? "currentColor" : "none" });
   if (toolId === "hand") return /* @__PURE__ */ jsx(IconHandStop, { size: 16, stroke: isActive ? 1 : 1.8, fill: isActive ? "currentColor" : "none", style: isActive ? { stroke: "#000000" } : void 0 });
   return null;
@@ -388,8 +430,6 @@ function resolveDrawColor(colorStyle, theme) {
   return resolveThemeColor(colorStyle, theme);
 }
 function useTsdrawCanvasController(options = {}) {
-  const stylePanelToolIds = options.stylePanelToolIds ?? ["pen"];
-  const stylePanelToolIdsRef = useRef(stylePanelToolIds);
   const onMountRef = useRef(options.onMount);
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
@@ -424,6 +464,7 @@ function useTsdrawCanvasController(options = {}) {
   const [currentTool, setCurrentToolState] = useState(options.initialTool ?? "pen");
   const [drawColor, setDrawColor] = useState("black");
   const [drawDash, setDrawDash] = useState("draw");
+  const [drawFill, setDrawFill] = useState("none");
   const [drawSize, setDrawSize] = useState("m");
   const [selectedShapeIds, setSelectedShapeIds] = useState([]);
   const [selectionBrush, setSelectionBrush] = useState(null);
@@ -440,9 +481,6 @@ function useTsdrawCanvasController(options = {}) {
   useEffect(() => {
     currentToolRef.current = currentTool;
   }, [currentTool]);
-  useEffect(() => {
-    stylePanelToolIdsRef.current = stylePanelToolIds;
-  }, [stylePanelToolIds]);
   useEffect(() => {
     onMountRef.current = options.onMount;
   }, [options.onMount]);
@@ -454,7 +492,7 @@ function useTsdrawCanvasController(options = {}) {
   }, [selectionRotationDeg]);
   useEffect(() => {
     schedulePersistRef.current?.();
-  }, [selectedShapeIds, currentTool, drawColor, drawDash, drawSize]);
+  }, [selectedShapeIds, currentTool, drawColor, drawDash, drawFill, drawSize]);
   const render = useCallback(() => {
     const canvas = canvasRef.current;
     const editor = editorRef.current;
@@ -590,6 +628,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;
@@ -671,6 +710,7 @@ function useTsdrawCanvasController(options = {}) {
       const nextDrawStyle = editor.getCurrentDrawStyle();
       setDrawColor(nextDrawStyle.color);
       setDrawDash(nextDrawStyle.dash);
+      setDrawFill(nextDrawStyle.fill);
       setDrawSize(nextDrawStyle.size);
       setSelectionRotationDeg(0);
       render();
@@ -1049,6 +1089,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();
       }
@@ -1106,6 +1147,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();
     },
@@ -1173,6 +1215,7 @@ function useTsdrawCanvasController(options = {}) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1182,7 +1225,6 @@ function useTsdrawCanvasController(options = {}) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel: stylePanelToolIdsRef.current.includes(currentTool),
     canUndo,
     canRedo,
     undo,
@@ -1193,12 +1235,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"
 };
@@ -1270,21 +1321,6 @@ function Tsdraw(props) {
     () => customTools.filter((customTool) => toolbarToolIds.has(customTool.id)).map((customTool) => customTool.definition),
     [customTools, toolbarToolIds]
   );
-  const stylePanelToolIds = 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 = useMemo(() => {
     for (const toolbarPart of toolbarPartIds) {
       for (const item of toolbarPart) {
@@ -1313,6 +1349,7 @@ function Tsdraw(props) {
     currentTool,
     drawColor,
     drawDash,
+    drawFill,
     drawSize,
     selectedShapeIds,
     selectionBrush,
@@ -1322,7 +1359,6 @@ function Tsdraw(props) {
     cursorContext,
     toolOverlay,
     isPersistenceReady,
-    showStylePanel,
     canUndo,
     canRedo,
     undo,
@@ -1336,11 +1372,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__ */ jsx(
     ToolOverlay,
@@ -1362,9 +1399,24 @@ function Tsdraw(props) {
   const onDashSelect = useCallback((dash) => {
     applyDrawStyle({ dash });
   }, [applyDrawStyle]);
+  const onFillSelect = useCallback((fill) => {
+    applyDrawStyle({ fill });
+  }, [applyDrawStyle]);
   const onSizeSelect = useCallback((size) => {
     applyDrawStyle({ size });
   }, [applyDrawStyle]);
+  const activeCustomTool = customToolMap.get(currentTool);
+  const stylePanelParts = 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 = useMemo(
     () => toolbarPartIds.map((toolbarPart, partIndex) => {
       const items = toolbarPart.map((item) => {
@@ -1453,14 +1505,18 @@ function Tsdraw(props) {
         /* @__PURE__ */ 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
           }
         ),
@@ -1477,7 +1533,7 @@ function Tsdraw(props) {
           },
           customElement.id
         )),
-        /* @__PURE__ */ jsx(
+        !isToolbarHidden ? /* @__PURE__ */ jsx(
           Toolbar,
           {
             parts: toolbarParts,
@@ -1486,7 +1542,7 @@ function Tsdraw(props) {
             onToolChange: setTool,
             disabled: !isPersistenceReady
           }
-        )
+        ) : null
       ]
     }
   );