canvu-react 0.4.34 → 0.4.35

package/dist/native.js

@@ -1,5 +1,5 @@
 import getStroke from 'perfect-freehand';
-import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, useImage, Image } from '@shopify/react-native-skia';
+import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, Image } from '@shopify/react-native-skia';
 import { memo, forwardRef, useState, useRef, useCallback, useEffect, useMemo, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { StyleSheet, PanResponder, View, Pressable, Text as Text$1, ScrollView } from 'react-native';
@@ -1398,6 +1398,141 @@ function smoothFreehandPointsToPathD(points) {
   d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
   return d;
 }
+var DEFAULT_NATIVE_IMAGE_CACHE_MAX_ENTRIES = 96;
+function disposeCachedImage(image) {
+  try {
+    image.dispose?.();
+  } catch {
+  }
+}
+function createNativeImageCache({
+  loadImage,
+  maxEntries = DEFAULT_NATIVE_IMAGE_CACHE_MAX_ENTRIES
+}) {
+  const safeMaxEntries = Math.max(1, Math.round(maxEntries));
+  const entries = /* @__PURE__ */ new Map();
+  let clock = 0;
+  const touchEntry = (entry) => {
+    clock += 1;
+    entry.lastUsed = clock;
+  };
+  const createEntry = () => {
+    clock += 1;
+    return {
+      lastUsed: clock,
+      retainCount: 0
+    };
+  };
+  const prune = () => {
+    const cachedEntries = [...entries.entries()].filter(
+      (entry) => entry[1].image != null && entry[1].retainCount === 0
+    );
+    if (cachedEntries.length <= safeMaxEntries) return;
+    const evictedEntries = cachedEntries.sort(
+      (leftEntry, rightEntry) => leftEntry[1].lastUsed - rightEntry[1].lastUsed
+    ).slice(0, cachedEntries.length - safeMaxEntries);
+    for (const [href, entry] of evictedEntries) {
+      entries.delete(href);
+      disposeCachedImage(entry.image);
+    }
+  };
+  const getCached = (href) => {
+    const entry = entries.get(href);
+    if (!entry?.image) return null;
+    touchEntry(entry);
+    return entry.image;
+  };
+  const load = async (href) => {
+    const cachedImage = getCached(href);
+    if (cachedImage) return cachedImage;
+    const existingEntry = entries.get(href);
+    if (existingEntry?.promise) return await existingEntry.promise;
+    const entry = existingEntry ?? createEntry();
+    const promise = loadImage(href).then((image) => {
+      if (!image) {
+        if (entry.retainCount === 0) entries.delete(href);
+        return null;
+      }
+      entry.image = image;
+      entry.promise = void 0;
+      touchEntry(entry);
+      prune();
+      return image;
+    }).catch((error) => {
+      entries.delete(href);
+      throw error;
+    });
+    entry.promise = promise;
+    entries.set(href, entry);
+    return await promise;
+  };
+  const retain = (href) => {
+    const entry = entries.get(href) ?? createEntry();
+    entry.retainCount += 1;
+    touchEntry(entry);
+    entries.set(href, entry);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      entry.retainCount = Math.max(0, entry.retainCount - 1);
+      if (!entry.image && !entry.promise && entry.retainCount === 0) {
+        entries.delete(href);
+        return;
+      }
+      prune();
+    };
+  };
+  const clear = () => {
+    for (const entry of entries.values()) {
+      if (entry.image) disposeCachedImage(entry.image);
+    }
+    entries.clear();
+  };
+  const size = () => [...entries.values()].filter((entry) => entry.image != null).length;
+  return { getCached, load, retain, clear, size };
+}
+async function loadSkiaImageFromHref(href) {
+  const { Skia } = await import('@shopify/react-native-skia');
+  const data = await Skia.Data.fromURI(href);
+  return Skia.Image.MakeImageFromEncoded(data);
+}
+var nativeSkiaImageCache = createNativeImageCache({
+  loadImage: loadSkiaImageFromHref
+});
+function useCachedSkiaImage(href) {
+  const [loadedImage, setLoadedImage] = useState(
+    () => href ? { href, image: nativeSkiaImageCache.getCached(href) } : null
+  );
+  useEffect(() => {
+    if (!href) {
+      setLoadedImage(null);
+      return;
+    }
+    const releaseImage = nativeSkiaImageCache.retain(href);
+    const cachedImage = nativeSkiaImageCache.getCached(href);
+    if (cachedImage) {
+      setLoadedImage({ href, image: cachedImage });
+      return releaseImage;
+    }
+    let active = true;
+    setLoadedImage({ href, image: null });
+    void nativeSkiaImageCache.load(href).then(
+      (loadedImage2) => {
+        if (active) setLoadedImage({ href, image: loadedImage2 });
+      },
+      () => {
+        if (active) setLoadedImage({ href, image: null });
+      }
+    );
+    return () => {
+      active = false;
+      releaseImage();
+    };
+  }, [href]);
+  if (!href || loadedImage?.href !== href) return null;
+  return loadedImage.image;
+}
 
 // src/native/skia-transform.ts
 function parseNum(s) {
@@ -1662,7 +1797,7 @@ function SvgNodeItem({ node }) {
 function SvgImageNodeItem({
   node
 }) {
-  const image = useImage(node.href);
+  const image = useCachedSkiaImage(node.href);
   if (!image) return null;
   return /* @__PURE__ */ jsx(
     Image,