canvu-react 0.3.6 → 0.3.8

package/dist/index.js

@@ -365,7 +365,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, {
@@ -610,89 +610,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;");
@@ -813,7 +730,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 }
@@ -830,18 +747,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") {
@@ -859,7 +776,7 @@ function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware =
     thinning: 0.08,
     smoothing: 0.88,
     streamline: 0.84,
-    simulatePressure: false
+    simulatePressure: true
   };
 }
 function resolveStrokeStyle(item) {
@@ -929,70 +846,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(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(
+    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) {