canvu-react 0.3.6 → 0.3.8

package/README.md

@@ -112,6 +112,198 @@ import { realtimeCollaborationPlugin } from "canvu/plugins/realtime";
 
 No `CanvasPluginHost` is required. The plugin runtime lives inside `VectorViewport`.
 
+## Persisting built-in file uploads
+
+If you want to keep the native `VectorViewport` file picker and drag-and-drop
+UX while also saving the original binary to your own backend or object storage,
+pass `assetStore`.
+
+```tsx
+import { useState } from "react";
+import {
+	type VectorViewportAssetStore,
+	useVectorCanvasDocument,
+	VectorCanvas,
+	VectorToolbar,
+	VectorViewport,
+} from "canvu/react";
+
+export function Board() {
+	const [toolId, setToolId] = useState("hand");
+	const [toolLocked, setToolLocked] = useState(false);
+	const doc = useVectorCanvasDocument({ persistenceKey: "board.v1" });
+
+	const assetStore: VectorViewportAssetStore = {
+		async upload({ file, kind }) {
+			const form = new FormData();
+			form.append("file", file);
+			form.append("kind", kind);
+
+			const response = await fetch("/api/canvu/assets", {
+				method: "POST",
+				body: form,
+			});
+
+			const asset = await response.json();
+			return {
+				pluginData: {
+					assetId: asset.id,
+					assetKey: asset.key,
+					mimeType: file.type,
+					originalFileName: file.name,
+				},
+			};
+		},
+		async resolve({ assetIds }) {
+			const response = await fetch("/api/canvu/assets/resolve", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({ assetIds }),
+			});
+
+			return response.json();
+		},
+	};
+
+	if (!doc.isHydrated) return null;
+
+	return (
+		<VectorCanvas.Root style={{ height: "100dvh", width: "100%" }}>
+			<VectorCanvas.Body>
+				<VectorCanvas.Main>
+					<VectorCanvas.ViewportSurface>
+						<VectorViewport
+							ariaLabel="Board"
+							toolId={toolId}
+							toolLocked={toolLocked}
+							onToolChangeRequest={setToolId}
+							items={doc.items}
+							onItemsChange={doc.onItemsChange}
+							interactive
+							assetStore={assetStore}
+							toolbar={
+								<VectorCanvas.Toolbar>
+									<VectorToolbar
+										value={toolId}
+										onChange={setToolId}
+										toolLocked={toolLocked}
+										onToolLockedChange={setToolLocked}
+										aria-label="Canvas tools"
+									/>
+								</VectorCanvas.Toolbar>
+							}
+						/>
+					</VectorCanvas.ViewportSurface>
+				</VectorCanvas.Main>
+			</VectorCanvas.Body>
+		</VectorCanvas.Root>
+	);
+}
+```
+
+canvu still owns the conversion from `File` to `VectorSceneItem`. Your
+`assetStore.upload(...)` only intercepts the original browser file and returns
+persistable `pluginData`, which canvu merges into every created item from that
+file. `resolve(...)` is optional and is intended for custom persistence
+adapters that need to rehydrate signed URLs after loading a snapshot.
+
+## Reusing the same ingestion pipeline outside the viewport
+
+When files originate outside the `VectorViewport` UI, such as a board creation
+wizard, a custom import modal, or a migration routine, use
+`ingestAssetFilesToSceneItems(...)`.
+
+```tsx
+import { useRef, useState } from "react";
+import {
+	ingestAssetFilesToSceneItems,
+	type VectorViewportAssetStore,
+	useVectorCanvasDocument,
+	VectorViewport,
+} from "canvu/react";
+
+export function BoardImport() {
+	const [toolId, setToolId] = useState("hand");
+	const inputRef = useRef<HTMLInputElement>(null);
+	const doc = useVectorCanvasDocument({ persistenceKey: "board.v1" });
+
+	const assetStore: VectorViewportAssetStore = {
+		async upload({ file, kind }) {
+			const form = new FormData();
+			form.append("file", file);
+			form.append("kind", kind);
+
+			const response = await fetch("/api/canvu/assets", {
+				method: "POST",
+				body: form,
+			});
+
+			const asset = await response.json();
+			return {
+				pluginData: {
+					assetId: asset.id,
+					assetKey: asset.key,
+				},
+			};
+		},
+	};
+
+	async function handleImport(files: FileList | null) {
+		if (!files) return;
+
+		const result = await ingestAssetFilesToSceneItems({
+			files: Array.from(files),
+			worldCenter: { x: 0, y: 0 },
+			assetStore,
+			decorateItem(item) {
+				return {
+					...item,
+					locked: true,
+				};
+			},
+		});
+
+		doc.onItemsChange([...doc.items, ...result.items]);
+	}
+
+	if (!doc.isHydrated) return null;
+
+	return (
+		<>
+			<button type="button" onClick={() => inputRef.current?.click()}>
+				Import files
+			</button>
+
+			<input
+				ref={inputRef}
+				type="file"
+				accept="image/*,application/pdf"
+				multiple
+				hidden
+				onChange={(event) => {
+					void handleImport(event.target.files);
+					event.target.value = "";
+				}}
+			/>
+
+			<VectorViewport
+				ariaLabel="Board"
+				items={doc.items}
+				onItemsChange={doc.onItemsChange}
+				toolId={toolId}
+				onToolChangeRequest={setToolId}
+				interactive
+				assetStore={assetStore}
+			/>
+		</>
+	);
+}
+```
+
+This helper is the same ingestion layer used internally by the native file
+tool, so external imports do not need to reimplement PDF rasterization, local
+blob persistence, or `pluginData` attachment.
+
 ## Custom tools
 
 Use `createToolPlugin(...)` for isolated tools.

package/dist/chatbot.d.cts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-D1ftVsOQ.cjs';
+import { C as CanvasPlugin } from './types-CW146bKP.cjs';
 import 'react';
 import './types-CB0TZZuk.cjs';
 import './camera-BwQjm5oh.cjs';
+import './shape-builders-DxPoOecg.cjs';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/chatbot.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types--ALu1mF-.js';
+import { C as CanvasPlugin } from './types-CpqlbbCP.js';
 import 'react';
 import './types-CB0TZZuk.js';
 import './camera-KwCYYPhm.js';
+import './shape-builders-DTYvub8W.js';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/index.cjs

@@ -371,7 +371,7 @@ function attachViewportInput(options) {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
       const dy = wheelDeltaYPixels(e);
-      const normDy = dy < 20 ? dy * 12 : dy;
+      const normDy = Math.abs(dy) < 20 ? dy * 12 : dy;
       const factor = Math.exp(-normDy * wheelZoomSensitivity);
       const rect = element.getBoundingClientRect();
       camera.setZoom(camera.zoom * factor, {
@@ -616,89 +616,6 @@ function createCustomShapeItem(id, bounds, content) {
   };
 }
 
-// src/scene/freehand-path.ts
-function dedupeFreehandPoints(points, minDist) {
-  if (points.length <= 2) {
-    return points.map((p) => ({ ...p }));
-  }
-  const minSq = minDist * minDist;
-  const first = points[0];
-  if (!first) return [];
-  const out = [{ ...first }];
-  for (let i = 1; i < points.length - 1; i++) {
-    const p = points[i];
-    const last = out[out.length - 1];
-    if (!p || !last) continue;
-    const dx = p.x - last.x;
-    const dy = p.y - last.y;
-    if (dx * dx + dy * dy >= minSq) {
-      out.push({ ...p });
-    }
-  }
-  const end = points[points.length - 1];
-  const lastKept = out[out.length - 1];
-  if (!end || !lastKept) return out;
-  if ((end.x - lastKept.x) ** 2 + (end.y - lastKept.y) ** 2 > 1e-12) {
-    out.push({ ...end });
-  }
-  return out;
-}
-function smoothFreehandPointsToPathD(points) {
-  const n = points.length;
-  if (n === 0) return "";
-  if (n === 1) {
-    const p = points[0];
-    if (!p) return "";
-    return `M ${p.x} ${p.y}`;
-  }
-  if (n === 2) {
-    const a = points[0];
-    const b = points[1];
-    if (!a || !b) return "";
-    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
-  }
-  const p0 = points[0];
-  if (!p0) return "";
-  let d = `M ${p0.x} ${p0.y}`;
-  let i = 1;
-  for (; i < n - 2; i++) {
-    const pi = points[i];
-    const pi1 = points[i + 1];
-    if (!pi || !pi1) continue;
-    const xc = (pi.x + pi1.x) / 2;
-    const yc = (pi.y + pi1.y) / 2;
-    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
-  }
-  const pLast = points[i];
-  const pEnd = points[i + 1];
-  if (!pLast || !pEnd) return d;
-  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
-  return d;
-}
-function outlineStrokeToClosedPathD(outline) {
-  const len = outline.length;
-  if (len === 0) return "";
-  const first = outline[0];
-  if (!first) return "";
-  if (len < 3) {
-    let d2 = `M ${first[0]} ${first[1]}`;
-    for (let i = 1; i < len; i++) {
-      const pt = outline[i];
-      if (!pt) continue;
-      d2 += ` L ${pt[0]} ${pt[1]}`;
-    }
-    return `${d2} Z`;
-  }
-  let d = `M ${first[0]} ${first[1]} Q`;
-  for (let i = 0; i < len; i++) {
-    const p0 = outline[i];
-    const p1 = outline[(i + 1) % len];
-    if (!p0 || !p1) continue;
-    d += ` ${p0[0]} ${p0[1]} ${(p0[0] + p1[0]) / 2} ${(p0[1] + p1[1]) / 2}`;
-  }
-  return `${d} Z`;
-}
-
 // src/scene/text-svg.ts
 function escapeSvgTextContent(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -819,7 +736,7 @@ var DEFAULT_STROKE_STYLE = {
   strokeWidth: 2
 };
 var TOOL_FREEHAND_DEFAULTS = {
-  draw: { strokeWidth: 3 },
+  draw: { strokeWidth: 10 },
   pencil: { strokeWidth: 3 },
   brush: { strokeWidth: 10 },
   marker: { stroke: "#fde047", strokeWidth: 16, strokeOpacity: 0.5 }
@@ -836,18 +753,18 @@ function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware =
         ...base,
         size: Math.max(2, sw * 1.05),
         thinning: 0.42,
-        smoothing: 0.56,
-        streamline: 0.18,
-        simulatePressure: false
+        smoothing: 0.78,
+        streamline: 0.62,
+        simulatePressure: true
       };
     }
     return {
       ...base,
       size: Math.max(2, sw * 1.18),
       thinning: 0.12,
-      smoothing: 0.72,
-      streamline: 0.42,
-      simulatePressure: false
+      smoothing: 0.85,
+      streamline: 0.78,
+      simulatePressure: true
     };
   }
   if (toolKind === "brush") {
@@ -865,7 +782,7 @@ function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware =
     thinning: 0.08,
     smoothing: 0.88,
     streamline: 0.84,
-    simulatePressure: false
+    simulatePressure: true
   };
 }
 function resolveStrokeStyle(item) {
@@ -935,70 +852,41 @@ function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeCompl
   if (pathPointsLocal.length === 1) {
     const p = pathPointsLocal[0];
     if (!p) return null;
-    const r = Math.max(0.5, style.strokeWidth / 2);
-    return {
-      kind: "circle",
-      cx: p.x,
-      cy: p.y,
-      r,
-      fill: style.stroke,
-      fillOpacity: style.strokeOpacity
-    };
-  }
-  const minDist = Math.min(0.25, Math.max(0.02, style.strokeWidth * 0.02));
-  const pts = dedupeFreehandPoints(pathPointsLocal, minDist);
-  if (pts.length === 0) return null;
-  if (pts.length === 1) {
-    const p = pts[0];
-    if (!p) return null;
-    const r = Math.max(0.5, style.strokeWidth / 2);
     return {
       kind: "circle",
       cx: p.x,
       cy: p.y,
-      r,
+      r: Math.max(0.5, style.strokeWidth / 2),
       fill: style.stroke,
       fillOpacity: style.strokeOpacity
     };
   }
-  const hasPressure = toolKind === "draw" && pts.some((p) => p.pressure != null && Number.isFinite(p.pressure));
-  if (toolKind === "draw" && !hasPressure) {
-    const d2 = smoothFreehandPointsToPathD(pts);
-    return {
-      kind: "strokePath",
-      d: d2,
-      stroke: style.stroke,
-      strokeWidth: style.strokeWidth,
-      strokeOpacity: style.strokeOpacity
-    };
-  }
-  const input = hasPressure ? pts.map(
+  const hasPressure = pathPointsLocal.some(
+    (p) => p.pressure != null && Number.isFinite(p.pressure)
+  );
+  const input = hasPressure ? pathPointsLocal.map(
     (p) => [p.x, p.y, Math.min(1, Math.max(0, p.pressure ?? 0.5))]
-  ) : pts.map((p) => [p.x, p.y]);
-  const opts = perfectFreehandOptions(toolKind, style, strokeComplete, hasPressure);
-  let outline = [];
-  try {
-    const raw = getStroke__default.default(input, opts);
-    outline = raw.map(([x, y]) => [x, y]);
-  } catch {
-    outline = [];
-  }
-  if (outline.length >= 3) {
-    const d2 = outlineStrokeToClosedPathD(outline);
-    return {
-      kind: "fillPath",
-      d: d2,
-      fill: style.stroke,
-      fillOpacity: style.strokeOpacity
-    };
+  ) : pathPointsLocal.map((p) => [p.x, p.y]);
+  const stroke = getStroke__default.default(
+    input,
+    perfectFreehandOptions(toolKind, style, strokeComplete, hasPressure)
+  );
+  if (stroke.length < 3) return null;
+  const first = stroke[0];
+  if (!first) return null;
+  let d = `M ${first[0]} ${first[1]} Q`;
+  for (let i = 0; i < stroke.length; i++) {
+    const a = stroke[i];
+    const b = stroke[(i + 1) % stroke.length];
+    if (!a || !b) continue;
+    d += ` ${a[0]} ${a[1]} ${(a[0] + b[0]) / 2} ${(a[1] + b[1]) / 2}`;
   }
-  const d = smoothFreehandPointsToPathD(pts);
+  d += " Z";
   return {
-    kind: "strokePath",
+    kind: "fillPath",
     d,
-    stroke: style.stroke,
-    strokeWidth: style.strokeWidth,
-    strokeOpacity: style.strokeOpacity
+    fill: style.stroke,
+    fillOpacity: style.strokeOpacity
   };
 }
 function freehandPayloadToSvgString(payload) {