canvu-react 0.4.48 → 0.4.50

package/dist/native.cjs

@@ -2108,6 +2108,14 @@ async function loadSkiaImageFromHref(href) {
 var nativeSkiaImageCache = createNativeImageCache({
   loadImage: loadSkiaImageFromHref
 });
+function resolveNativeImageLoadingState(href, loadedImage) {
+  if (loadedImage?.image) return loadedImage;
+  return { href, image: null };
+}
+function resolveNativeImageRenderValue(href, loadedImage) {
+  if (!href) return null;
+  return loadedImage?.image ?? null;
+}
 function useCachedSkiaImage(href) {
   const [loadedImage, setLoadedImage] = react.useState(
     () => href ? { href, image: nativeSkiaImageCache.getCached(href) } : null
@@ -2124,7 +2132,9 @@ function useCachedSkiaImage(href) {
       return releaseImage;
     }
     let active = true;
-    setLoadedImage({ href, image: null });
+    setLoadedImage(
+      (currentLoadedImage) => resolveNativeImageLoadingState(href, currentLoadedImage)
+    );
     void nativeSkiaImageCache.load(href).then(
       (loadedImage2) => {
         if (active) setLoadedImage({ href, image: loadedImage2 });
@@ -2138,8 +2148,7 @@ function useCachedSkiaImage(href) {
       releaseImage();
     };
   }, [href]);
-  if (!href || loadedImage?.href !== href) return null;
-  return loadedImage.image;
+  return resolveNativeImageRenderValue(href, loadedImage);
 }
 
 // src/native/skia-transform.ts
@@ -3091,11 +3100,14 @@ function buildNativeStrokePreviewPath(points) {
   const d = smoothFreehandPointsToPathD(points);
   return d || null;
 }
-function nativeStrokePreviewDashArray(style, tool) {
-  if (style.strokeDash !== "dashed" || tool !== "draw") return void 0;
-  const dash = Math.max(style.strokeWidth * 1.8, 4);
-  const gap = Math.max(style.strokeWidth * 1.4, 3);
-  return `${dash} ${gap}`;
+function buildNativeFreehandStrokePreviewPayload(points, style, tool) {
+  if (tool === "laser") return null;
+  return computeFreehandSvgPayload(
+    points.map((point) => ({ x: point.x, y: point.y })),
+    style,
+    tool,
+    true
+  );
 }
 
 // src/native/native-vector-interactions.ts
@@ -3473,6 +3485,57 @@ function NativeInteractionOverlay({
         style.stroke,
         isLaser ? 0.85 : style.strokeOpacity
       );
+      if (!isLaser) {
+        const payload = buildNativeFreehandStrokePreviewPayload(
+          p.points,
+          style,
+          p.tool
+        );
+        if (payload?.kind === "circle") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNativeSkia.Circle,
+            {
+              cx: payload.cx,
+              cy: payload.cy,
+              r: payload.r,
+              color: colorWithOpacity(payload.fill, payload.fillOpacity),
+              style: "fill",
+              antiAlias: true
+            }
+          );
+        }
+        if (payload?.kind === "fillPath") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNativeSkia.Path,
+            {
+              path: payload.d,
+              color: colorWithOpacity(payload.fill, payload.fillOpacity),
+              style: "fill",
+              fillType: "winding",
+              antiAlias: true
+            }
+          );
+        }
+        if (payload?.kind === "strokePath") {
+          const intervals = dashIntervalsFromStrokeDasharray3(
+            payload.strokeDasharray
+          );
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNativeSkia.Path,
+            {
+              path: payload.d,
+              color: colorWithOpacity(payload.stroke, payload.strokeOpacity),
+              style: "stroke",
+              strokeWidth: payload.strokeWidth,
+              strokeCap: "round",
+              strokeJoin: "round",
+              antiAlias: true,
+              children: intervals ? /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.DashPathEffect, { intervals }) : null
+            }
+          );
+        }
+        return null;
+      }
       if (p.points.length === 1) {
         const point = p.points[0];
         if (!point) return null;
@@ -3490,8 +3553,6 @@ function NativeInteractionOverlay({
       }
       const path = buildNativeStrokePreviewPath(p.points);
       if (!path) return null;
-      const strokeDasharray = nativeStrokePreviewDashArray(style, p.tool);
-      const intervals = dashIntervalsFromStrokeDasharray3(strokeDasharray);
       return /* @__PURE__ */ jsxRuntime.jsx(
         reactNativeSkia.Path,
         {
@@ -3501,8 +3562,7 @@ function NativeInteractionOverlay({
           strokeWidth: style.strokeWidth,
           strokeCap: "round",
           strokeJoin: "round",
-          antiAlias: true,
-          children: intervals ? /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.DashPathEffect, { intervals }) : null
+          antiAlias: true
         }
       );
     }