canvu-react 0.3.39 → 0.4.0

package/dist/native.cjs

@@ -178,11 +178,14 @@ function escapeHtmlText(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 var DEFAULT_TEXT_FONT_SIZE = 18;
+var TEXT_FONT_FAMILY = "Inter, -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif";
 var LINE_HEIGHT_RATIO = 22 / 18;
-var FIRST_LINE_BASELINE_RATIO = 24 / 18;
+var FIRST_LINE_BASELINE_RATIO = 20 / 18;
+var EDIT_TOP_PAD_RATIO = 4 / 18;
+var BOTTOM_PAD_RATIO = 4 / 18;
 var PLACEHOLDER = "Tap to type";
 var MIN_TEXT_BOX_W = 40;
-var MIN_TEXT_BOX_H = 36;
+var MIN_TEXT_BOX_H = 26;
 var TEXT_PAD_X = 4;
 var MAX_TEXT_MEASURE_CACHE_ENTRIES = 2e3;
 var sharedMeasureContext;
@@ -228,7 +231,7 @@ function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
   let maxInnerW = 0;
   const ctx = getSharedMeasureContext();
   if (ctx) {
-    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    ctx.font = `${fontSize}px ${TEXT_FONT_FAMILY}`;
     for (const line of lines) {
       const toMeasure = trimmed.length === 0 ? PLACEHOLDER : line.length === 0 ? " " : line;
       maxInnerW = Math.max(maxInnerW, ctx.measureText(toMeasure).width);
@@ -244,22 +247,22 @@ function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const width = Math.max(minW, TEXT_PAD_X * 2 + maxInnerW);
   const height = Math.max(
     MIN_TEXT_BOX_H,
-    baselineY + (lines.length - 1) * lh + Math.max(8, fontSize * 0.35)
+    baselineY + (lines.length - 1) * lh + Math.max(4, fontSize * BOTTOM_PAD_RATIO)
   );
   const measured = { width, height };
   cacheMeasuredBounds(cacheKey, measured);
   return measured;
 }
-function buildTextSvg(content, _width, _height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+function buildTextSvg(content, _width, _height, fillColor = "#1d1d1d", fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const lh = lineHeightFor(fontSize);
   const y0 = firstLineBaselineY(fontSize);
   const trimmed = content.trim();
   if (trimmed.length === 0) {
-    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="#94a3b8" font-style="italic">${escapeSvgTextContent(PLACEHOLDER)}</text>`;
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="${TEXT_FONT_FAMILY}" fill="#94a3b8" font-style="italic">${escapeSvgTextContent(PLACEHOLDER)}</text>`;
   }
   const lines = content.split("\n");
   if (lines.length === 1) {
-    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${escapeSvgTextContent(lines[0] ?? "")}</text>`;
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="${TEXT_FONT_FAMILY}" fill="${fillColor}">${escapeSvgTextContent(lines[0] ?? "")}</text>`;
   }
   const parts = [];
   for (let i = 0; i < lines.length; i++) {
@@ -270,23 +273,24 @@ function buildTextSvg(content, _width, _height, fillColor = "#2563eb", fontSize
       parts.push(`<tspan x="4" dy="${lh}">${escapeSvgTextContent(line)}</tspan>`);
     }
   }
-  return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${parts.join("")}</text>`;
+  return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="${TEXT_FONT_FAMILY}" fill="${fillColor}">${parts.join("")}</text>`;
 }
-function buildTextFixedBoundsSvg(content, width, height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+function buildTextFixedBoundsSvg(content, width, height, fillColor = "#1d1d1d", fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const w = Math.max(1, width);
   const h = Math.max(1, height);
   const lh = lineHeightFor(fontSize);
   const trimmed = content.trim();
+  const padTop = EDIT_TOP_PAD_RATIO * fontSize;
   if (trimmed.length === 0) {
-    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText(PLACEHOLDER)}</div></foreignObject>`;
+    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:${padTop}px 4px 0 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:${TEXT_FONT_FAMILY};white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText(PLACEHOLDER)}</div></foreignObject>`;
   }
   const body = escapeHtmlText(content);
-  return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
+  return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:${padTop}px 4px 0 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:${TEXT_FONT_FAMILY};white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
 }
 
 // src/scene/shape-builders.ts
 var DEFAULT_STROKE_STYLE = {
-  stroke: "#2563eb",
+  stroke: "#1d1d1d",
   strokeWidth: 2
 };
 var TOOL_FREEHAND_DEFAULTS = {
@@ -343,7 +347,8 @@ function resolveStrokeStyle(item) {
   return {
     stroke: item.stroke ?? DEFAULT_STROKE_STYLE.stroke,
     strokeWidth: item.strokeWidth ?? DEFAULT_STROKE_STYLE.strokeWidth,
-    strokeOpacity: item.strokeOpacity
+    strokeOpacity: item.strokeOpacity,
+    strokeDash: item.strokeDash
   };
 }
 function strokeOpacityAttr(style) {
@@ -672,6 +677,30 @@ function buildDrawDotSvg(r, style = DEFAULT_STROKE_STYLE) {
   const op = style.strokeOpacity != null ? ` fill-opacity="${style.strokeOpacity}"` : "";
   return `<circle cx="${r}" cy="${r}" r="${r}" fill="${style.stroke}" shape-rendering="geometricPrecision"${op} />`;
 }
+function dashArrayForDrawStroke(strokeWidth) {
+  const dash = Math.max(strokeWidth * 1.8, 4);
+  const gap = Math.max(strokeWidth * 1.4, 3);
+  return `${dash} ${gap}`;
+}
+function buildSmoothedCenterlinePath(points) {
+  if (points.length < 2) return null;
+  const first = points[0];
+  if (!first) return null;
+  let d = `M ${first.x} ${first.y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    const midX = (a.x + b.x) / 2;
+    const midY = (a.y + b.y) / 2;
+    d += ` Q ${a.x} ${a.y} ${midX} ${midY}`;
+  }
+  const last = points[points.length - 1];
+  if (last) {
+    d += ` L ${last.x} ${last.y}`;
+  }
+  return d;
+}
 function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeComplete = true) {
   if (pathPointsLocal.length === 0) return null;
   if (pathPointsLocal.length === 1) {
@@ -686,6 +715,18 @@ function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeCompl
       fillOpacity: style.strokeOpacity
     };
   }
+  if (style.strokeDash === "dashed" && (toolKind === "draw" || toolKind === "pencil")) {
+    const d2 = buildSmoothedCenterlinePath(pathPointsLocal);
+    if (!d2) return null;
+    return {
+      kind: "strokePath",
+      d: d2,
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      strokeOpacity: style.strokeOpacity,
+      strokeDasharray: dashArrayForDrawStroke(style.strokeWidth)
+    };
+  }
   const hasPressure = pathPointsLocal.some(
     (p) => p.pressure != null && Number.isFinite(p.pressure)
   );
@@ -728,7 +769,8 @@ function freehandPayloadToSvgString(payload) {
     strokeWidth: payload.strokeWidth,
     strokeOpacity: payload.strokeOpacity
   });
-  return `<path d="${payload.d}" fill="none" stroke="${payload.stroke}" stroke-width="${payload.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op} />`;
+  const dash = payload.strokeDasharray ? ` stroke-dasharray="${payload.strokeDasharray}"` : "";
+  return `<path d="${payload.d}" fill="none" stroke="${payload.stroke}" stroke-width="${payload.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op}${dash} />`;
 }
 function buildFreehandPathSvg(pathPointsLocal, style, toolKind, strokeComplete = true) {
   const payload = computeFreehandSvgPayload(
@@ -880,6 +922,7 @@ function createFreehandStrokeItem(id, pointsWorld, toolKind, style) {
     stroke: merged.stroke,
     strokeWidth: merged.strokeWidth,
     ...merged.strokeOpacity != null ? { strokeOpacity: merged.strokeOpacity } : {},
+    ...merged.strokeDash != null ? { strokeDash: merged.strokeDash } : {},
     pathPointsLocal,
     childrenSvg: ""
   });