@tsdraw/react 0.9.0 → 0.9.2

package/dist/index.d.cts

@@ -44,6 +44,15 @@ interface TsdrawStylePanelCustomPart {
     render: (context: TsdrawStylePanelRenderContext) => ReactNode;
 }
 
+type VerticalPart = 'top' | 'bottom' | 'center';
+type HorizontalPart = 'left' | 'right' | 'center';
+type UiAnchor = `${VerticalPart}-${HorizontalPart}` | `${HorizontalPart}-${VerticalPart}`;
+interface TsdrawUiPlacement {
+    anchor?: UiAnchor;
+    edgeOffset?: number;
+    style?: CSSProperties;
+}
+
 interface TsdrawCursorContext {
     currentTool: ToolId;
     defaultCursor: string;
@@ -79,9 +88,6 @@ interface TsdrawMountApi {
     }>) => void;
 }
 
-type VerticalPart = 'top' | 'bottom' | 'center';
-type HorizontalPart = 'left' | 'right' | 'center';
-type UiAnchor = `${VerticalPart}-${HorizontalPart}` | `${HorizontalPart}-${VerticalPart}`;
 interface TsdrawCustomTool {
     id: ToolId;
     label: string;
@@ -95,17 +101,14 @@ interface TsdrawCustomTool {
 }
 type TsdrawToolbarBuiltInAction = 'undo' | 'redo';
 type ToolbarPartItem = ToolId | TsdrawToolbarBuiltInAction;
-interface TsdrawUiPlacement {
-    anchor?: UiAnchor;
-    offsetX?: number;
-    offsetY?: number;
-    style?: CSSProperties;
-}
 interface TsdrawUiOptions {
     toolbar?: {
         hide?: boolean;
         placement?: TsdrawUiPlacement;
         parts?: ToolbarPartItem[][];
+        draggable?: boolean;
+        saveDraggedPosition?: boolean;
+        disabledDragPositions?: UiAnchor[];
     };
     stylePanel?: {
         hide?: boolean;

package/dist/index.d.ts

@@ -44,6 +44,15 @@ interface TsdrawStylePanelCustomPart {
     render: (context: TsdrawStylePanelRenderContext) => ReactNode;
 }
 
+type VerticalPart = 'top' | 'bottom' | 'center';
+type HorizontalPart = 'left' | 'right' | 'center';
+type UiAnchor = `${VerticalPart}-${HorizontalPart}` | `${HorizontalPart}-${VerticalPart}`;
+interface TsdrawUiPlacement {
+    anchor?: UiAnchor;
+    edgeOffset?: number;
+    style?: CSSProperties;
+}
+
 interface TsdrawCursorContext {
     currentTool: ToolId;
     defaultCursor: string;
@@ -79,9 +88,6 @@ interface TsdrawMountApi {
     }>) => void;
 }
 
-type VerticalPart = 'top' | 'bottom' | 'center';
-type HorizontalPart = 'left' | 'right' | 'center';
-type UiAnchor = `${VerticalPart}-${HorizontalPart}` | `${HorizontalPart}-${VerticalPart}`;
 interface TsdrawCustomTool {
     id: ToolId;
     label: string;
@@ -95,17 +101,14 @@ interface TsdrawCustomTool {
 }
 type TsdrawToolbarBuiltInAction = 'undo' | 'redo';
 type ToolbarPartItem = ToolId | TsdrawToolbarBuiltInAction;
-interface TsdrawUiPlacement {
-    anchor?: UiAnchor;
-    offsetX?: number;
-    offsetY?: number;
-    style?: CSSProperties;
-}
 interface TsdrawUiOptions {
     toolbar?: {
         hide?: boolean;
         placement?: TsdrawUiPlacement;
         parts?: ToolbarPartItem[][];
+        draggable?: boolean;
+        saveDraggedPosition?: boolean;
+        disabledDragPositions?: UiAnchor[];
     };
     stylePanel?: {
         hide?: boolean;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import { useState, useMemo, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DEFAULT_COLORS, renderCanvasBackground, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, pageToScreen, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, HandDraggingState, startCameraSlide, isSelectTool, beginCameraPan, moveCameraPan } from '@tsdraw/core';
 import { IconPointer, IconPencil, IconSquare, IconCircle, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
@@ -96,6 +96,167 @@ function SelectionOverlay({
     )
   ] });
 }
+function parseAnchor(anchor) {
+  const parts = anchor.split("-");
+  let vertical = "center";
+  let horizontal = "center";
+  for (const part of parts) {
+    if (part === "top" || part === "bottom") vertical = part;
+    else if (part === "left" || part === "right") horizontal = part;
+  }
+  return { vertical, horizontal };
+}
+function resolvePlacementStyle(placement, fallbackAnchor, fallbackEdgeOffset) {
+  const anchor = placement?.anchor ?? fallbackAnchor;
+  const edgeOffset = placement?.edgeOffset ?? fallbackEdgeOffset;
+  const { vertical, horizontal } = parseAnchor(anchor);
+  const result = {};
+  const transforms = [];
+  if (horizontal === "left") {
+    result.left = edgeOffset;
+  } else if (horizontal === "right") {
+    result.right = edgeOffset;
+  } else {
+    result.left = "50%";
+    transforms.push("translateX(-50%)");
+  }
+  if (vertical === "top") {
+    result.top = edgeOffset;
+  } else if (vertical === "bottom") {
+    result.bottom = edgeOffset;
+  } else {
+    result.top = "50%";
+    transforms.push("translateY(-50%)");
+  }
+  if (transforms.length > 0) result.transform = transforms.join(" ");
+  return placement?.style ? { ...result, ...placement.style } : result;
+}
+function resolveOrientation(anchor) {
+  const { vertical, horizontal } = parseAnchor(anchor);
+  if ((horizontal === "left" || horizontal === "right") && vertical === "center") return "vertical";
+  return "horizontal";
+}
+var SNAP_TARGETS = [
+  { anchor: "top-center", nx: 0.5, ny: 0 },
+  { anchor: "bottom-center", nx: 0.5, ny: 1 },
+  { anchor: "left-center", nx: 0, ny: 0.5 },
+  { anchor: "right-center", nx: 1, ny: 0.5 },
+  { anchor: "top-left", nx: 0, ny: 0 },
+  { anchor: "top-right", nx: 1, ny: 0 },
+  { anchor: "bottom-left", nx: 0, ny: 1 },
+  { anchor: "bottom-right", nx: 1, ny: 1 }
+];
+function calculateSnap(payload, containerRect, disabledPositions) {
+  const nx = Math.max(0, Math.min(1, (payload.centerX - containerRect.left) / containerRect.width));
+  const ny = Math.max(0, Math.min(1, (payload.centerY - containerRect.top) / containerRect.height));
+  let closestAnchor = "bottom-center";
+  let closestDistSq = Infinity;
+  for (const target of SNAP_TARGETS) {
+    if (disabledPositions && disabledPositions.has(target.anchor)) continue;
+    const dx = nx - target.nx;
+    const dy = ny - target.ny;
+    const distSq = dx * dx + dy * dy;
+    if (distSq < closestDistSq) {
+      closestDistSq = distSq;
+      closestAnchor = target.anchor;
+    }
+  }
+  return { anchor: closestAnchor };
+}
+function BaseComponent({ children, className, style, draggable = false, onDragEnd, "aria-label": ariaLabel }) {
+  const componentRef = useRef(null);
+  const dragStateRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const pendingSnapRef = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  useLayoutEffect(() => {
+    if (!pendingSnapRef.current) return;
+    const componentNode = componentRef.current;
+    if (componentNode) componentNode.style.translate = "";
+    pendingSnapRef.current = false;
+    setIsDragging(false);
+  });
+  const finishDrag = (event, shouldSnap) => {
+    const componentNode = componentRef.current;
+    const dragState = dragStateRef.current;
+    if (!componentNode || !dragState || dragState.pointerId !== event.pointerId) return;
+    if (componentNode.hasPointerCapture(event.pointerId)) {
+      componentNode.releasePointerCapture(event.pointerId);
+    }
+    if (dragState.isDragging && shouldSnap && onDragEnd) {
+      const rect = componentNode.getBoundingClientRect();
+      onDragEnd({
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        centerX: rect.left + rect.width / 2,
+        centerY: rect.top + rect.height / 2
+      });
+      pendingSnapRef.current = true;
+    } else {
+      componentNode.style.translate = "";
+      setIsDragging(false);
+    }
+    suppressClickRef.current = dragState.didDrag;
+    dragStateRef.current = null;
+  };
+  const handlePointerDown = (event) => {
+    if (!draggable || event.button !== 0) return;
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      didDrag: false,
+      isDragging: false
+    };
+  };
+  const handlePointerMove = (event) => {
+    const componentNode = componentRef.current;
+    const dragState = dragStateRef.current;
+    if (!draggable || !componentNode || !dragState || dragState.pointerId !== event.pointerId) return;
+    const deltaX = event.clientX - dragState.startX;
+    const deltaY = event.clientY - dragState.startY;
+    if (!dragState.isDragging && deltaX * deltaX + deltaY * deltaY >= 25) {
+      dragState.isDragging = true;
+      dragState.didDrag = true;
+      componentNode.setPointerCapture(event.pointerId);
+      setIsDragging(true);
+    }
+    if (dragState.isDragging) {
+      componentNode.style.translate = `${deltaX}px ${deltaY}px`;
+    }
+  };
+  const handlePointerUp = (event) => {
+    finishDrag(event, true);
+  };
+  const handlePointerCancel = (event) => {
+    finishDrag(event, false);
+  };
+  const handleClickCapture = (event) => {
+    if (!draggable || !suppressClickRef.current) return;
+    suppressClickRef.current = false;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const draggableClass = draggable ? " tsdraw-component--draggable" : "";
+  const draggingClass = isDragging ? " tsdraw-component--dragging" : "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: componentRef,
+      className: `tsdraw-component${draggableClass}${draggingClass}${className ? ` ${className}` : ""}`,
+      style,
+      "aria-label": ariaLabel,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel,
+      onClickCapture: handleClickCapture,
+      children
+    }
+  );
+}
 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"];
@@ -127,7 +288,7 @@ function StylePanel({
     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) => {
+  return /* @__PURE__ */ jsx(BaseComponent, { 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",
@@ -247,8 +408,9 @@ function getActionIcon(actionId) {
   if (actionId === "undo") return /* @__PURE__ */ jsx(IconArrowBackUp, { size: 16, stroke: 1.8 });
   return /* @__PURE__ */ jsx(IconArrowForwardUp, { size: 16, stroke: 1.8 });
 }
-function Toolbar({ parts, currentTool, onToolChange, disabled, style }) {
-  return /* @__PURE__ */ jsx("div", { className: "tsdraw-toolbar", style, children: parts.map((part, partIndex) => /* @__PURE__ */ jsxs("div", { className: "tsdraw-toolbar-part", children: [
+function Toolbar({ parts, currentTool, onToolChange, disabled, style, orientation = "horizontal", draggable = false, onDragEnd }) {
+  const orientationClass = orientation === "vertical" ? " tsdraw-toolbar--vertical" : "";
+  return /* @__PURE__ */ jsx(BaseComponent, { className: `tsdraw-toolbar${orientationClass}`, style, draggable, onDragEnd, children: parts.map((part, partIndex) => /* @__PURE__ */ jsxs("div", { className: "tsdraw-toolbar-part", children: [
     part.items.map((item) => {
       if (item.type === "action") {
         return /* @__PURE__ */ jsx(
@@ -1848,47 +2010,9 @@ var DEFAULT_TOOL_LABELS = {
   eraser: "Eraser",
   hand: "Hand"
 };
-function parseAnchor(anchor) {
-  const parts = anchor.split("-");
-  let vertical = "center";
-  let horizontal = "center";
-  for (const part of parts) {
-    if (part === "top" || part === "bottom") vertical = part;
-    else if (part === "left" || part === "right") horizontal = part;
-  }
-  return { vertical, horizontal };
-}
 function isToolbarAction(item) {
   return item === "undo" || item === "redo";
 }
-function resolvePlacementStyle(placement, fallbackAnchor, fallbackOffsetX, fallbackOffsetY) {
-  const anchor = placement?.anchor ?? fallbackAnchor;
-  const offsetX = placement?.offsetX ?? fallbackOffsetX;
-  const offsetY = placement?.offsetY ?? fallbackOffsetY;
-  const { vertical, horizontal } = parseAnchor(anchor);
-  const result = {};
-  const transforms = [];
-  if (horizontal === "left") {
-    result.left = offsetX;
-  } else if (horizontal === "right") {
-    result.right = offsetX;
-  } else {
-    result.left = "50%";
-    transforms.push("translateX(-50%)");
-    if (offsetX) transforms.push(`translateX(${offsetX}px)`);
-  }
-  if (vertical === "top") {
-    result.top = offsetY;
-  } else if (vertical === "bottom") {
-    result.bottom = offsetY;
-  } else {
-    result.top = "50%";
-    transforms.push("translateY(-50%)");
-    if (offsetY) transforms.push(`translateY(${offsetY}px)`);
-  }
-  if (transforms.length > 0) result.transform = transforms.join(" ");
-  return placement?.style ? { ...result, ...placement.style } : result;
-}
 function Tsdraw(props) {
   const [systemTheme, setSystemTheme] = useState(() => {
     if (typeof window === "undefined") return "light";
@@ -1896,6 +2020,20 @@ function Tsdraw(props) {
   });
   const customTools = props.customTools ?? EMPTY_CUSTOM_TOOLS;
   const toolbarPartIds = props.uiOptions?.toolbar?.parts ?? DEFAULT_TOOLBAR_PARTS;
+  const toolbarPlacement = props.uiOptions?.toolbar?.placement;
+  const toolbarEdgeOffset = toolbarPlacement?.edgeOffset ?? 14;
+  const isToolbarDraggable = props.uiOptions?.toolbar?.draggable === true;
+  const shouldSaveDraggedToolbarPosition = props.uiOptions?.toolbar?.saveDraggedPosition === true;
+  const disabledDragPositionsArray = props.uiOptions?.toolbar?.disabledDragPositions;
+  const disabledDragPositionsSet = useMemo(
+    () => disabledDragPositionsArray && disabledDragPositionsArray.length > 0 ? new Set(disabledDragPositionsArray) : void 0,
+    [disabledDragPositionsArray]
+  );
+  const toolbarDraggedSessionKey = useMemo(
+    () => `tsdraw-toolbar-pos-${props.persistenceKey ?? "default"}`,
+    [props.persistenceKey]
+  );
+  const [draggedToolbarPosition, setDraggedToolbarPosition] = useState(null);
   const customToolMap = useMemo(
     () => new Map(customTools.map((customTool) => [customTool.id, customTool])),
     [customTools]
@@ -1980,9 +2118,35 @@ function Tsdraw(props) {
     onCameraChange: props.onCameraChange,
     onToolChange: props.onToolChange
   });
-  const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 14);
-  const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8, 8);
+  const toolbarPlacementAnchor = draggedToolbarPosition?.anchor ?? toolbarPlacement?.anchor ?? "bottom-center";
+  const effectiveToolbarPlacement = draggedToolbarPosition ? { anchor: draggedToolbarPosition.anchor, edgeOffset: toolbarEdgeOffset, style: toolbarPlacement?.style } : toolbarPlacement;
+  const toolbarPlacementStyle = resolvePlacementStyle(effectiveToolbarPlacement, "bottom-center", 14);
+  const toolbarOrientation = resolveOrientation(toolbarPlacementAnchor);
+  const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8);
   const isToolbarHidden = props.uiOptions?.toolbar?.hide === true;
+  useEffect(() => {
+    if (!isToolbarDraggable || !shouldSaveDraggedToolbarPosition || typeof window === "undefined") return;
+    try {
+      const rawPosition = window.sessionStorage.getItem(toolbarDraggedSessionKey);
+      if (!rawPosition) return;
+      const parsedPosition = JSON.parse(rawPosition);
+      if (typeof parsedPosition.anchor !== "string") return;
+      setDraggedToolbarPosition({ anchor: parsedPosition.anchor });
+    } catch {
+    }
+  }, [isToolbarDraggable, shouldSaveDraggedToolbarPosition, toolbarDraggedSessionKey]);
+  useEffect(() => {
+    if (isToolbarDraggable) return;
+    setDraggedToolbarPosition(null);
+  }, [isToolbarDraggable]);
+  const handleToolbarDragEnd = useCallback((payload) => {
+    const containerNode = containerRef.current;
+    if (!containerNode) return;
+    const nextPosition = calculateSnap(payload, containerNode.getBoundingClientRect(), disabledDragPositionsSet);
+    setDraggedToolbarPosition(nextPosition);
+    if (!shouldSaveDraggedToolbarPosition || typeof window === "undefined") return;
+    window.sessionStorage.setItem(toolbarDraggedSessionKey, JSON.stringify(nextPosition));
+  }, [containerRef, disabledDragPositionsSet, shouldSaveDraggedToolbarPosition, toolbarDraggedSessionKey]);
   const isStylePanelHidden = props.uiOptions?.stylePanel?.hide === true || props.readOnly === true;
   const canvasCursor = props.uiOptions?.cursor?.getCursor?.(cursorContext) ?? defaultCanvasCursor;
   const defaultToolOverlay = /* @__PURE__ */ jsx(
@@ -2135,7 +2299,7 @@ function Tsdraw(props) {
               position: "absolute",
               zIndex: 130,
               pointerEvents: "all",
-              ...resolvePlacementStyle(customElement.placement, "top-left", 8, 8)
+              ...resolvePlacementStyle(customElement.placement, "top-left", 8)
             },
             children: customElement.render({ currentTool, setTool, applyDrawStyle })
           },
@@ -2146,9 +2310,12 @@ function Tsdraw(props) {
           {
             parts: toolbarParts,
             style: toolbarPlacementStyle,
+            orientation: toolbarOrientation,
             currentTool: isPersistenceReady ? currentTool : null,
             onToolChange: setTool,
-            disabled: !isPersistenceReady
+            disabled: !isPersistenceReady,
+            draggable: isToolbarDraggable,
+            onDragEnd: handleToolbarDragEnd
           }
         ) : null
       ]