canvu-react 0.4.34 → 0.4.36

package/dist/native.cjs

@@ -10,8 +10,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var getStroke__default = /*#__PURE__*/_interopDefault(getStroke);
 
-// src/scene/shape-builders.ts
-
 // src/math/rect.ts
 function rectsIntersect(a, b) {
   return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
@@ -28,12 +26,36 @@ function normalizeRect(r) {
 }
 
 // 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/link-item.ts
 var LINK_PLUGIN_KEY = "canvuLink";
@@ -146,6 +168,9 @@ function getLinkData(item) {
   const entry = item.pluginData?.[LINK_PLUGIN_KEY];
   return isCanvuLinkData(entry) ? entry : null;
 }
+function isLinkItem(item) {
+  return getLinkData(item) != null;
+}
 function rebuildLinkItemSvg(item) {
   const link = getLinkData(item);
   if (!link) return item;
@@ -179,6 +204,26 @@ function rebuildLinkItemSvg(item) {
     childrenSvg: buildLinkCardSvg(width, height, link)
   };
 }
+function createLinkItem(id, bounds, link) {
+  const width = bounds.width || DEFAULT_LINK_CARD_WIDTH;
+  const height = bounds.height || DEFAULT_LINK_CARD_HEIGHT;
+  const item = createCustomShapeItem(
+    id,
+    { ...bounds, width, height },
+    { render: (size) => buildLinkCardSvg(size.width, size.height, link) }
+  );
+  return rebuildLinkItemSvg({
+    ...item,
+    pluginData: {
+      ...item.pluginData ?? {},
+      [LINK_PLUGIN_KEY]: link
+    }
+  });
+}
+var DEFAULT_LINK_CARD_SIZE = {
+  width: DEFAULT_LINK_CARD_WIDTH,
+  height: DEFAULT_LINK_CARD_HEIGHT
+};
 
 // src/scene/text-svg.ts
 function escapeSvgTextContent(s) {
@@ -1405,6 +1450,179 @@ function smoothFreehandPointsToPathD(points) {
   return d;
 }
 
+// src/native/native-link-card.ts
+function linkHostname(href) {
+  try {
+    return new URL(href).hostname.replace(/^www\./, "");
+  } catch {
+    return href;
+  }
+}
+function linkProtocol(href) {
+  try {
+    return new URL(href).protocol;
+  } catch {
+    return "";
+  }
+}
+function linkInitial(value) {
+  const first = value.trim().charAt(0).toUpperCase();
+  return first || "L";
+}
+function buildNativeLinkCardDisplay(link) {
+  const hostname = linkHostname(link.href);
+  const title = link.title?.trim() || hostname || "Link";
+  return {
+    title,
+    subtitle: hostname || link.href,
+    initial: linkInitial(hostname || title),
+    secure: linkProtocol(link.href) === "https:"
+  };
+}
+function createNativeLinkCardBoundsAtPoint(point) {
+  return {
+    x: point.x - DEFAULT_LINK_CARD_SIZE.width / 2,
+    y: point.y - DEFAULT_LINK_CARD_SIZE.height / 2,
+    width: DEFAULT_LINK_CARD_SIZE.width,
+    height: DEFAULT_LINK_CARD_SIZE.height
+  };
+}
+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] = react.useState(
+    () => href ? { href, image: nativeSkiaImageCache.getCached(href) } : null
+  );
+  react.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) {
   return Number(s);
@@ -1668,7 +1886,7 @@ function SvgNodeItem({ node }) {
 function SvgImageNodeItem({
   node
 }) {
-  const image = reactNativeSkia.useImage(node.href);
+  const image = useCachedSkiaImage(node.href);
   if (!image) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNativeSkia.Image,
@@ -1958,7 +2176,119 @@ function localBounds(bounds) {
   const b = normalizeRect(bounds);
   return { w: Math.max(0, b.width), h: Math.max(0, b.height) };
 }
+function truncateText(value, maxChars) {
+  if (value.length <= maxChars) return value;
+  return `${value.slice(0, Math.max(0, maxChars - 3)).trimEnd()}...`;
+}
+function NativeLinkCardRenderer({
+  item,
+  link
+}) {
+  const bounds = normalizeRect(item.bounds);
+  const scaleX = Math.max(0.01, bounds.width / DEFAULT_LINK_CARD_SIZE.width);
+  const scaleY = Math.max(0.01, bounds.height / DEFAULT_LINK_CARD_SIZE.height);
+  const display = buildNativeLinkCardDisplay(link);
+  const titleFont = reactNativeSkia.matchFont({ fontSize: 14.5, fontWeight: "700" });
+  const subtitleFont = reactNativeSkia.matchFont({ fontSize: 12.5 });
+  const initialFont = reactNativeSkia.matchFont({ fontSize: 17, fontWeight: "700" });
+  const title = truncateText(display.title, 28);
+  const subtitle = truncateText(display.subtitle, display.secure ? 28 : 31);
+  const subtitleX = display.secure ? 82 : 69;
+  const subtitleWidth = display.secure ? 188 : 201;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: [{ scaleX }, { scaleY }], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.RoundedRect,
+      {
+        x: 0,
+        y: 0,
+        width: DEFAULT_LINK_CARD_SIZE.width,
+        height: DEFAULT_LINK_CARD_SIZE.height,
+        r: 16,
+        color: "#ffffff",
+        style: "fill",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.RoundedRect,
+      {
+        x: 0.5,
+        y: 0.5,
+        width: DEFAULT_LINK_CARD_SIZE.width - 1,
+        height: DEFAULT_LINK_CARD_SIZE.height - 1,
+        r: 15.5,
+        color: "#dfe4ea",
+        style: "stroke",
+        strokeWidth: 1,
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.RoundedRect,
+      {
+        x: 14,
+        y: 14,
+        width: 42,
+        height: 42,
+        r: 11,
+        color: "#315bd6",
+        style: "fill",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.Text,
+      {
+        x: 29.5,
+        y: 41,
+        text: display.initial,
+        color: "#ffffff",
+        font: initialFont
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { clip: { x: 69, y: 13, width: 215, height: 24 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Text, { x: 69, y: 32, text: title, color: "#1f2937", font: titleFont }) }),
+    display.secure ? /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: [{ translateX: 69 }, { translateY: 41 }], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Rect,
+        {
+          x: 1.5,
+          y: 4.5,
+          width: 7,
+          height: 6,
+          color: "#6b7280",
+          style: "stroke",
+          strokeWidth: 1.3
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Path,
+        {
+          path: "M3 4.5 V3 a2 2 0 0 1 4 0 v1.5",
+          color: "#6b7280",
+          style: "stroke",
+          strokeWidth: 1.3,
+          strokeCap: "round",
+          strokeJoin: "round"
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { clip: { x: subtitleX, y: 34, width: subtitleWidth, height: 22 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.Text,
+      {
+        x: subtitleX,
+        y: 51,
+        text: subtitle,
+        color: "#6b7280",
+        font: subtitleFont
+      }
+    ) })
+  ] });
+}
 function NativeShapeRenderer({ item }) {
+  const link = getLinkData(item);
+  if (link) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NativeLinkCardRenderer, { item, link });
+  }
   const style = resolveStrokeStyle(item);
   const k = item.toolKind;
   if (k === "rect") {
@@ -3381,9 +3711,14 @@ var DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = [
   "line",
   "marker",
   "laser",
-  "image"
+  "image",
+  "link"
 ];
 var CLOUD_TOOL_ICON_PATH = "M17.5 19H8.5a6.5 6.5 0 1 1 6.17-8.55A4.75 4.75 0 0 1 17.5 9.5a4.75 4.75 0 0 1 0 9.5Z";
+var LINK_TOOL_ICON_PATHS = [
+  "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+  "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+];
 function NativeCloudToolIcon({
   color,
   size = 19,
@@ -3402,6 +3737,25 @@ function NativeCloudToolIcon({
     }
   ) }) });
 }
+function NativeLinkToolIcon({
+  color,
+  size = 20,
+  strokeWidth = 2.4
+}) {
+  const scale = size / 24;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Canvas, { style: { width: size, height: size }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: [{ scale }], children: LINK_TOOL_ICON_PATHS.map((path) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNativeSkia.Path,
+    {
+      path,
+      color,
+      style: "stroke",
+      strokeWidth,
+      strokeCap: "round",
+      strokeJoin: "round"
+    },
+    path
+  )) }) });
+}
 var DEFAULT_NATIVE_VECTOR_TOOLS = [
   { id: "hand", label: "Hand", shortcutHint: "H", shortLabel: "H" },
   { id: "select", label: "Select", shortcutHint: "V", shortLabel: "V" },
@@ -3439,7 +3793,8 @@ var DEFAULT_NATIVE_VECTOR_TOOLS = [
     shortLabel: "E"
   },
   { id: "text", label: "Text", shortcutHint: "T", shortLabel: "T" },
-  { id: "image", label: "File", shortcutHint: "I", shortLabel: "I" }
+  { id: "image", label: "File", shortcutHint: "I", shortLabel: "I" },
+  { id: "link", label: "Link", shortcutHint: "N", shortLabel: "L" }
 ];
 function splitToolbarTools(tools, overflowToolIds) {
   const overflowIds = new Set(overflowToolIds);
@@ -3701,6 +4056,9 @@ function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
   if (tool.id === "architectural-cloud") {
     return /* @__PURE__ */ jsxRuntime.jsx(NativeCloudToolIcon, { color: foregroundColor });
   }
+  if (tool.id === "link") {
+    return /* @__PURE__ */ jsxRuntime.jsx(NativeLinkToolIcon, { color: foregroundColor });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
 }
 var styles2 = reactNative.StyleSheet.create({
@@ -4381,6 +4739,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onSelectionChange,
   onItemsChange,
   onToolChangeRequest,
+  onLinkToolRequest,
   onWorldPointerDown,
   onWorldPointerMove,
   onWorldPointerLeave,
@@ -4400,6 +4759,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   toolLockedRef.current = toolLocked;
   const onToolChangeRequestRef = react.useRef(onToolChangeRequest);
   onToolChangeRequestRef.current = onToolChangeRequest;
+  const onLinkToolRequestRef = react.useRef(onLinkToolRequest);
+  onLinkToolRequestRef.current = onLinkToolRequest;
   const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
   const onWorldPointerMoveRef = react.useRef(onWorldPointerMove);
@@ -4742,7 +5103,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         });
         return;
       }
-      if (tool === "note" || tool === "text") {
+      if (tool === "link" || tool === "note" || tool === "text") {
         dragStateRef.current = {
           kind: "tap",
           tool,
@@ -5078,6 +5439,44 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         const screenDy = point.y - st.startScreen.y;
         if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
         const change = onItemsChangeRef.current;
+        if (st.tool === "link") {
+          const suggestedBounds = createNativeLinkCardBoundsAtPoint(st.startWorld);
+          const insertLink = (link, options = {}) => {
+            const currentChange = onItemsChangeRef.current;
+            if (!currentChange) return null;
+            const id = options.id ?? createShapeId();
+            const item = createLinkItem(id, options.bounds ?? suggestedBounds, link);
+            currentChange([...itemsRef.current, item]);
+            onSelectionChangeRef.current?.([id]);
+            requestSelectToolAfterUse();
+            return item;
+          };
+          const requestLink = onLinkToolRequestRef.current;
+          if (requestLink) {
+            requestLink({
+              toolId: "link",
+              worldX: st.startWorld.x,
+              worldY: st.startWorld.y,
+              screenX: st.startScreen.x,
+              screenY: st.startScreen.y,
+              suggestedBounds,
+              insertLink
+            });
+            return;
+          }
+          const handleWorldPointerDown = onWorldPointerDownRef.current;
+          if (handleWorldPointerDown) {
+            handleWorldPointerDown({
+              toolId: "link",
+              worldX: st.startWorld.x,
+              worldY: st.startWorld.y,
+              screenX: st.startScreen.x,
+              screenY: st.startScreen.y
+            });
+            requestSelectToolAfterUse();
+          }
+          return;
+        }
         if (!change) return;
         if (st.tool === "text") {
           const id = createShapeId();
@@ -5345,6 +5744,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
 });
 
+exports.DEFAULT_LINK_CARD_SIZE = DEFAULT_LINK_CARD_SIZE;
 exports.DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = DEFAULT_NATIVE_OVERFLOW_TOOL_IDS;
 exports.DEFAULT_NATIVE_VECTOR_TOOLS = DEFAULT_NATIVE_VECTOR_TOOLS;
 exports.NATIVE_STYLE_PALETTE = NATIVE_STYLE_PALETTE;
@@ -5356,7 +5756,10 @@ exports.NativeVectorToolbar = NativeVectorToolbar;
 exports.NativeVectorViewport = NativeVectorViewport;
 exports.createFreehandStrokeItem = createFreehandStrokeItem;
 exports.createImageItem = createImageItem;
+exports.createLinkItem = createLinkItem;
 exports.createShapeId = createShapeId;
+exports.getLinkData = getLinkData;
+exports.isLinkItem = isLinkItem;
 exports.nativeStyleColorWithOpacity = nativeStyleColorWithOpacity;
 exports.normalizeNativeStyleHex = normalizeNativeStyleHex;
 exports.parseSvgFragment = parseSvgFragment;