canvu-react 0.4.3 → 0.4.5

package/dist/native.cjs

@@ -127,6 +127,13 @@ function getRotationHandleWorldPosition(bounds, rotationRad, handleOffsetWorld)
     rotationRad
   );
 }
+function rectFromCorners(a, b) {
+  const minX = Math.min(a.x, b.x);
+  const maxX = Math.max(a.x, b.x);
+  const minY = Math.min(a.y, b.y);
+  const maxY = Math.max(a.y, b.y);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
 
 // src/scene/freehand-path.ts
 function smoothFreehandPointsToPathD(points) {
@@ -786,6 +793,15 @@ function createShapeId() {
   const uid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
   return `user-shape-${uid}`;
 }
+function lineEndpointsToLocal(bounds, worldEndA, worldEndB) {
+  const b = normalizeRect(bounds);
+  return {
+    x1: worldEndA.x - b.x,
+    y1: worldEndA.y - b.y,
+    x2: worldEndB.x - b.x,
+    y2: worldEndB.y - b.y
+  };
+}
 function rebuildItemSvg(item) {
   const style = resolveStrokeStyle(item);
   const k = item.toolKind;
@@ -889,6 +905,85 @@ function rebuildItemSvg(item) {
   }
   return item;
 }
+function createRectangleItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "rect",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createEllipseItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "ellipse",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createArchitecturalCloudItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "architectural-cloud",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createLineItem(id, bounds, line, toolKind, style, arrowBind) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind,
+    line: { ...line },
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    ...{},
+    childrenSvg: ""
+  });
+}
+function createTextItem(id, bounds, text = "", style, textFontSize) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "text",
+    text,
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    ...{ textFontSize } ,
+    childrenSvg: ""
+  });
+}
 function createFreehandStrokeItem(id, pointsWorld, toolKind, style) {
   if (pointsWorld.length === 0) return null;
   const merged = {
@@ -1771,9 +1866,9 @@ function NativeInteractionOverlay({
   const previewElements = react.useMemo(() => {
     if (!placementPreview) return null;
     const p = placementPreview;
-    if (p.kind === "rect" || p.kind === "ellipse") {
+    if (p.kind === "rect" || p.kind === "ellipse" || p.kind === "architectural-cloud") {
       const r = normalizeRect(p.rect);
-      return p.kind === "rect" ? /* @__PURE__ */ jsxRuntime.jsx(
+      return p.kind === "rect" || p.kind === "architectural-cloud" ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNativeSkia.Rect,
         {
           x: r.x,
@@ -2105,6 +2200,171 @@ function NativeSceneRenderer({
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Canvas, { style: { width, height }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: cameraTransform, children: visible.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MemoShape, { item }, item.id)) }) });
 }
+var DEFAULT_NATIVE_VECTOR_TOOLS = [
+  { id: "hand", label: "Hand", shortLabel: "H" },
+  { id: "select", label: "Select", shortLabel: "V" },
+  { id: "draw", label: "Draw", shortLabel: "D" },
+  { id: "marker", label: "Marker", shortLabel: "M" },
+  { id: "eraser", label: "Eraser", shortLabel: "E" },
+  { id: "text", label: "Text", shortLabel: "T" },
+  { id: "note", label: "Note", shortLabel: "N" },
+  { id: "rect", label: "Rectangle", shortLabel: "R" },
+  { id: "ellipse", label: "Ellipse", shortLabel: "O" },
+  { id: "architectural-cloud", label: "Cloud", shortLabel: "C" },
+  { id: "line", label: "Line", shortLabel: "L" },
+  { id: "arrow", label: "Arrow", shortLabel: "A" }
+];
+function NativeVectorToolbar({
+  value,
+  onChange,
+  tools = DEFAULT_NATIVE_VECTOR_TOOLS,
+  disabled = false,
+  disabledToolIds = [],
+  accessibilityLabel = "Canvas tools",
+  style,
+  contentContainerStyle,
+  toolButtonStyle,
+  activeToolButtonStyle,
+  toolLabelStyle,
+  activeToolLabelStyle,
+  renderToolIcon,
+  renderToolButton
+}) {
+  const disabledIds = react.useMemo(() => new Set(disabledToolIds), [disabledToolIds]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityLabel, style: [styles.shell, style], children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [styles.content, contentContainerStyle],
+      children: tools.map((tool) => {
+        const selected = tool.id === value;
+        const toolDisabled = disabled || tool.disabled || disabledIds.has(tool.id);
+        const foregroundColor = selected ? "#fafaf9" : "#18181b";
+        const onSelect = () => {
+          if (!toolDisabled) {
+            onChange(tool.id);
+          }
+        };
+        const input = {
+          tool,
+          selected,
+          disabled: toolDisabled,
+          foregroundColor,
+          onSelect
+        };
+        if (renderToolButton) {
+          return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: renderToolButton(input) }, tool.id);
+        }
+        const icon = renderToolIcon?.(input) ?? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [
+              styles.shortLabel,
+              { color: foregroundColor },
+              toolLabelStyle,
+              selected ? activeToolLabelStyle : void 0
+            ],
+            children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase()
+          }
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.Pressable,
+          {
+            accessibilityLabel: tool.accessibilityLabel ?? tool.label,
+            accessibilityRole: "button",
+            accessibilityState: { selected, disabled: toolDisabled },
+            disabled: toolDisabled,
+            onPress: onSelect,
+            style: ({ pressed }) => [
+              styles.toolButton,
+              toolButtonStyle,
+              selected ? styles.activeToolButton : void 0,
+              selected ? activeToolButtonStyle : void 0,
+              pressed && !toolDisabled ? styles.pressedToolButton : void 0,
+              toolDisabled ? styles.disabledToolButton : void 0
+            ],
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.iconSlot, children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  numberOfLines: 1,
+                  style: [
+                    styles.toolLabel,
+                    { color: foregroundColor },
+                    toolLabelStyle,
+                    selected ? activeToolLabelStyle : void 0
+                  ],
+                  children: tool.label
+                }
+              )
+            ]
+          },
+          tool.id
+        );
+      })
+    }
+  ) });
+}
+var styles = reactNative.StyleSheet.create({
+  shell: {
+    borderRadius: 10,
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(24, 24, 27, 0.14)",
+    backgroundColor: "rgba(255, 255, 255, 0.96)",
+    shadowColor: "#18181b",
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 6
+  },
+  content: {
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 6
+  },
+  toolButton: {
+    minWidth: 58,
+    height: 52,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "transparent",
+    backgroundColor: "transparent"
+  },
+  activeToolButton: {
+    borderColor: "rgba(24, 24, 27, 0.24)",
+    backgroundColor: "#18181b"
+  },
+  pressedToolButton: {
+    backgroundColor: "rgba(24, 24, 27, 0.08)"
+  },
+  disabledToolButton: {
+    opacity: 0.42
+  },
+  iconSlot: {
+    height: 22,
+    minWidth: 22,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  shortLabel: {
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 20
+  },
+  toolLabel: {
+    maxWidth: 68,
+    fontSize: 10,
+    fontWeight: "600",
+    lineHeight: 12
+  }
+});
 
 // src/camera/camera.ts
 var Camera2D = class {
@@ -2292,6 +2552,37 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
   }
   return ids;
 }
+var MIN_PLACE_SIZE = 8;
+var MIN_ARROW_DRAG_PX = 8;
+var TAP_PX = 20;
+function isPlacementTool(toolId) {
+  return toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud" || toolId === "line" || toolId === "arrow";
+}
+function placementPreviewForTool(toolId, start, end) {
+  if (toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud") {
+    return { kind: toolId, rect: rectFromCorners(start, end) };
+  }
+  return { kind: toolId, start, end };
+}
+function defaultPlacementWorld(toolId, center) {
+  const cx = center.x;
+  const cy = center.y;
+  if (toolId === "rect") {
+    return { raw: { x: cx - 60, y: cy - 40, width: 120, height: 80 } };
+  }
+  if (toolId === "ellipse") {
+    return { raw: { x: cx - 70, y: cy - 45, width: 140, height: 90 } };
+  }
+  if (toolId === "architectural-cloud") {
+    return { raw: { x: cx - 90, y: cy - 50, width: 180, height: 100 } };
+  }
+  const start = { x: cx - 50, y: cy };
+  const end = { x: cx + 50, y: cy };
+  return {
+    raw: rectFromCorners(start, end),
+    lineWorld: [start, end]
+  };
+}
 function collectIdsInRect(items, marquee) {
   const m = normalizeRect(marquee);
   const out = [];
@@ -2469,10 +2760,31 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
           return;
         }
+        if (isPlacementTool(tool)) {
+          dragStateRef.current = {
+            kind: "place",
+            tool,
+            startWorld: { x: worldX, y: worldY },
+            startScreen: { x: sx, y: sy }
+          };
+          setPlacementPreview(
+            placementPreviewForTool(
+              tool,
+              { x: worldX, y: worldY },
+              {
+                x: worldX,
+                y: worldY
+              }
+            )
+          );
+          return;
+        }
         if (tool === "note" || tool === "text") {
           dragStateRef.current = {
             kind: "tap",
-            startWorld: { x: worldX, y: worldY }
+            tool,
+            startWorld: { x: worldX, y: worldY },
+            startScreen: { x: sx, y: sy }
           };
           return;
         }
@@ -2584,6 +2896,15 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
           return;
         }
+        if (st.kind === "place") {
+          setPlacementPreview(
+            placementPreviewForTool(st.tool, st.startWorld, {
+              x: worldX,
+              y: worldY
+            })
+          );
+          return;
+        }
       },
       onPanResponderRelease: (evt) => {
         lastPinchDist.current = null;
@@ -2639,12 +2960,83 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           dragStateRef.current = { kind: "idle" };
           return;
         }
+        if (st.kind === "place") {
+          dragStateRef.current = { kind: "idle" };
+          setPlacementPreview(null);
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const { worldX, worldY } = screenToWorld(
+            evt.nativeEvent.locationX,
+            evt.nativeEvent.locationY
+          );
+          const a = st.startWorld;
+          const b = { x: worldX, y: worldY };
+          const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
+          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
+          if (st.tool === "arrow" && Math.hypot(screenDx, screenDy) < MIN_ARROW_DRAG_PX) {
+            return;
+          }
+          let raw = rectFromCorners(a, b);
+          let br = normalizeRect(raw);
+          let lineStart = a;
+          let lineEnd = b;
+          if (br.width < MIN_PLACE_SIZE || br.height < MIN_PLACE_SIZE) {
+            const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+            const defaults = defaultPlacementWorld(st.tool, center);
+            raw = defaults.raw;
+            br = normalizeRect(raw);
+            if (defaults.lineWorld) {
+              const [defaultStart, defaultEnd] = defaults.lineWorld;
+              lineStart = defaultStart;
+              lineEnd = defaultEnd;
+            }
+          }
+          const id = createShapeId();
+          if (st.tool === "rect") {
+            change([...itemsRef.current, createRectangleItem(id, raw)]);
+            onSelectionChangeRef.current?.([id]);
+            return;
+          }
+          if (st.tool === "ellipse") {
+            change([...itemsRef.current, createEllipseItem(id, raw)]);
+            onSelectionChangeRef.current?.([id]);
+            return;
+          }
+          if (st.tool === "architectural-cloud") {
+            change([...itemsRef.current, createArchitecturalCloudItem(id, raw)]);
+            onSelectionChangeRef.current?.([id]);
+            return;
+          }
+          const line = lineEndpointsToLocal(br, lineStart, lineEnd);
+          change([...itemsRef.current, createLineItem(id, br, line, st.tool)]);
+          onSelectionChangeRef.current?.([id]);
+          return;
+        }
         if (st.kind === "tap") {
           dragStateRef.current = { kind: "idle" };
+          const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
+          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
+          if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
           const change = onItemsChangeRef.current;
           if (!change) return;
-          const tool = toolIdRef.current;
-          if (tool === "note") {
+          if (st.tool === "text") {
+            const id = createShapeId();
+            const item = createTextItem(
+              id,
+              {
+                x: st.startWorld.x - 4,
+                y: st.startWorld.y - 18,
+                width: 160,
+                height: 26
+              },
+              "Text",
+              void 0,
+              18
+            );
+            change([...itemsRef.current, item]);
+            onSelectionChangeRef.current?.([id]);
+          }
+          if (st.tool === "note") {
             const id = createShapeId();
             const note = {
               id,
@@ -2660,6 +3052,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
               toolKind: "custom"
             };
             change([...itemsRef.current, note]);
+            onSelectionChangeRef.current?.([id]);
           }
           return;
         }
@@ -2747,9 +3140,11 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
 });
 
+exports.DEFAULT_NATIVE_VECTOR_TOOLS = DEFAULT_NATIVE_VECTOR_TOOLS;
 exports.NativeInteractionOverlay = NativeInteractionOverlay;
 exports.NativeSceneRenderer = NativeSceneRenderer;
 exports.NativeShapeRenderer = NativeShapeRenderer;
+exports.NativeVectorToolbar = NativeVectorToolbar;
 exports.NativeVectorViewport = NativeVectorViewport;
 exports.parseSvgFragment = parseSvgFragment;
 //# sourceMappingURL=native.cjs.map