canvu-react 0.3.25 → 0.3.27

package/dist/realtime.cjs

@@ -1,9 +1,14 @@
 'use strict';
 
 var lucideReact = require('lucide-react');
+var getStroke = require('perfect-freehand');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var getStroke__default = /*#__PURE__*/_interopDefault(getStroke);
+
 // src/react/presence/map-placement-preview.ts
 function remoteMarkupStrokeFromPlacementPreview(preview) {
   if (!preview || preview.kind !== "stroke" || preview.points.length === 0) {
@@ -11,9 +16,13 @@ function remoteMarkupStrokeFromPlacementPreview(preview) {
   }
   const tool = preview.tool;
   const mapped = tool === "laser" || tool === "marker" || tool === "draw" ? tool : "draw";
+  const style = preview.style;
   return {
     points: preview.points,
-    tool: mapped
+    tool: mapped,
+    ...style?.strokeWidth != null ? { strokeWidth: style.strokeWidth } : {},
+    ...style?.stroke ? { stroke: style.stroke } : {},
+    ...style?.strokeOpacity != null ? { strokeOpacity: style.strokeOpacity } : {}
   };
 }
 
@@ -69,6 +78,126 @@ function smoothFreehandPointsToPathD(points) {
   return d;
 }
 
+// src/scene/custom-shape.ts
+function expandCustomShapeTemplate(template, width, height) {
+  return template.replace(/\{\{w\}\}/g, String(width)).replace(/\{\{h\}\}/g, String(height)).replace(/\{\{width\}\}/g, String(width)).replace(/\{\{height\}\}/g, String(height));
+}
+function resolveCustomInner(content, size) {
+  if ("render" in content) {
+    return content.render(size);
+  }
+  return expandCustomShapeTemplate(content.svg, size.width, size.height);
+}
+function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
+  const b = normalizeRect(bounds);
+  const sx = b.width / intrinsic.width;
+  const sy = b.height / intrinsic.height;
+  return `<g transform="scale(${sx},${sy})">${inner}</g>`;
+}
+function createCustomShapeItem(id, bounds, content) {
+  const r = normalizeRect(bounds);
+  const intrinsic = { width: r.width, height: r.height };
+  const inner = resolveCustomInner(content, intrinsic);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "custom",
+    customIntrinsicSize: intrinsic,
+    customInnerSvg: inner,
+    childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
+  };
+}
+
+// src/scene/shape-builders.ts
+function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware = false) {
+  const sw = style.strokeWidth;
+  const base2 = {
+    last: strokeComplete,
+    simulatePressure: true
+  };
+  if (toolKind === "draw" || toolKind === "pencil") {
+    if (pressureAware && toolKind === "draw") {
+      return {
+        ...base2,
+        size: Math.max(2, sw * 1.05),
+        thinning: 0.42,
+        smoothing: 0.78,
+        streamline: 0.62,
+        simulatePressure: true
+      };
+    }
+    return {
+      ...base2,
+      size: Math.max(2, sw * 1.18),
+      thinning: 0.12,
+      smoothing: 0.85,
+      streamline: 0.78,
+      simulatePressure: true
+    };
+  }
+  if (toolKind === "brush") {
+    return {
+      ...base2,
+      size: Math.max(4, sw * 1.22),
+      thinning: 0.52,
+      smoothing: 0.64,
+      streamline: 0.68
+    };
+  }
+  return {
+    ...base2,
+    size: Math.max(6, sw * 1.08),
+    thinning: 0.08,
+    smoothing: 0.88,
+    streamline: 0.84,
+    simulatePressure: true
+  };
+}
+function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeComplete = true) {
+  if (pathPointsLocal.length === 0) return null;
+  if (pathPointsLocal.length === 1) {
+    const p = pathPointsLocal[0];
+    if (!p) return null;
+    return {
+      kind: "circle",
+      cx: p.x,
+      cy: p.y,
+      r: Math.max(0.5, style.strokeWidth / 2),
+      fill: style.stroke,
+      fillOpacity: style.strokeOpacity
+    };
+  }
+  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))]
+  ) : 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}`;
+  }
+  d += " Z";
+  return {
+    kind: "fillPath",
+    d,
+    fill: style.stroke,
+    fillOpacity: style.strokeOpacity
+  };
+}
+
 // src/react/presence/peer-color.ts
 function defaultPresenceColorForId(id) {
   let h = 2166136261;
@@ -93,6 +222,9 @@ function strokePaint(tool, fallback) {
       return { stroke: fallback, strokeOpacity: 0.95, widthWorld: 3.5 };
   }
 }
+function isFreehandTool(tool) {
+  return tool === "draw" || tool === "marker" || tool === "pencil" || tool === "brush";
+}
 function PresenceRemoteLayer({
   camera,
   cameraVersion: _cameraVersion,
@@ -128,35 +260,78 @@ function PresenceRemoteLayer({
         const markup = peer.markupStroke;
         let strokeNode = null;
         if (markup && markup.points.length > 0) {
-          const paint = strokePaint(markup.tool, color);
-          const d = markup.points.length >= 2 ? smoothFreehandPointsToPathD([...markup.points]) : null;
-          if (d) {
-            strokeNode = /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d,
-                fill: "none",
-                stroke: paint.stroke,
-                strokeOpacity: paint.strokeOpacity,
-                strokeWidth: Math.max(paint.widthWorld / z, overlayStrokePx),
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                shapeRendering: "geometricPrecision",
-                vectorEffect: "non-scaling-stroke"
-              }
+          const fallbackPaint = strokePaint(markup.tool, color);
+          const paint = {
+            stroke: markup.stroke ?? fallbackPaint.stroke,
+            strokeOpacity: markup.strokeOpacity ?? fallbackPaint.strokeOpacity,
+            widthWorld: markup.strokeWidth ?? fallbackPaint.widthWorld
+          };
+          if (markup.tool === "laser") {
+            const d = markup.points.length >= 2 ? smoothFreehandPointsToPathD([...markup.points]) : null;
+            if (d) {
+              strokeNode = /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d,
+                  fill: "none",
+                  stroke: paint.stroke,
+                  strokeOpacity: paint.strokeOpacity,
+                  strokeWidth: Math.max(paint.widthWorld / z, overlayStrokePx),
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  shapeRendering: "geometricPrecision",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              );
+            }
+          } else if (isFreehandTool(markup.tool)) {
+            const style = {
+              stroke: paint.stroke,
+              strokeWidth: paint.widthWorld,
+              ...paint.strokeOpacity != null ? { strokeOpacity: paint.strokeOpacity } : {}
+            };
+            const payload = computeFreehandSvgPayload(
+              markup.points.map((p) => ({ x: p.x, y: p.y })),
+              style,
+              markup.tool,
+              false
             );
-          } else {
-            const p0 = markup.points[0];
-            if (p0) {
+            if (payload?.kind === "circle") {
               strokeNode = /* @__PURE__ */ jsxRuntime.jsx(
                 "circle",
                 {
-                  cx: p0.x,
-                  cy: p0.y,
-                  r: Math.max(3 / z, 2),
-                  fill: paint.stroke,
-                  fillOpacity: paint.strokeOpacity,
-                  vectorEffect: "non-scaling-stroke"
+                  cx: payload.cx,
+                  cy: payload.cy,
+                  r: payload.r,
+                  fill: payload.fill,
+                  ...payload.fillOpacity != null ? { fillOpacity: payload.fillOpacity } : {},
+                  shapeRendering: "geometricPrecision"
+                }
+              );
+            } else if (payload?.kind === "fillPath") {
+              strokeNode = /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: payload.d,
+                  fill: payload.fill,
+                  fillRule: "nonzero",
+                  stroke: "none",
+                  ...payload.fillOpacity != null ? { fillOpacity: payload.fillOpacity } : {},
+                  shapeRendering: "geometricPrecision"
+                }
+              );
+            } else if (payload?.kind === "strokePath") {
+              strokeNode = /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: payload.d,
+                  fill: "none",
+                  stroke: payload.stroke,
+                  strokeWidth: payload.strokeWidth,
+                  ...payload.strokeOpacity != null ? { strokeOpacity: payload.strokeOpacity } : {},
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  shapeRendering: "geometricPrecision"
                 }
               );
             }
@@ -257,7 +432,16 @@ function parseMarkupStroke(value) {
     if (x == null || y == null) return null;
     return { x, y };
   }).filter((point) => point != null);
-  return { points, tool };
+  const strokeWidth = getNumber(value.strokeWidth);
+  const stroke = getString(value.stroke);
+  const strokeOpacity = getNumber(value.strokeOpacity);
+  return {
+    points,
+    tool,
+    ...strokeWidth != null ? { strokeWidth } : {},
+    ...stroke ? { stroke } : {},
+    ...strokeOpacity != null ? { strokeOpacity } : {}
+  };
 }
 function parsePresencePayload(value) {
   if (!isRecord(value)) return void 0;
@@ -779,38 +963,6 @@ var DEFAULT_VECTOR_TOOLS = [
     shortcutHint: "I"
   }
 ];
-
-// src/scene/custom-shape.ts
-function expandCustomShapeTemplate(template, width, height) {
-  return template.replace(/\{\{w\}\}/g, String(width)).replace(/\{\{h\}\}/g, String(height)).replace(/\{\{width\}\}/g, String(width)).replace(/\{\{height\}\}/g, String(height));
-}
-function resolveCustomInner(content, size) {
-  if ("render" in content) {
-    return content.render(size);
-  }
-  return expandCustomShapeTemplate(content.svg, size.width, size.height);
-}
-function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
-  const b = normalizeRect(bounds);
-  const sx = b.width / intrinsic.width;
-  const sy = b.height / intrinsic.height;
-  return `<g transform="scale(${sx},${sy})">${inner}</g>`;
-}
-function createCustomShapeItem(id, bounds, content) {
-  const r = normalizeRect(bounds);
-  const intrinsic = { width: r.width, height: r.height };
-  const inner = resolveCustomInner(content, intrinsic);
-  return {
-    id,
-    x: r.x,
-    y: r.y,
-    bounds: { ...r },
-    toolKind: "custom",
-    customIntrinsicSize: intrinsic,
-    customInnerSvg: inner,
-    childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
-  };
-}
 var iconProps = { size: 20, strokeWidth: 2 };
 var COMMENT_PLUGIN_DATA_KEY = "realtimeComment";
 var REALTIME_COMMENT_TOOL = {