canvu-react 0.4.67 → 0.4.68

package/dist/react.cjs

@@ -6884,6 +6884,152 @@ function cullItemsByViewport(items, visibleWorld) {
   return cullItemsByViewportSpatial(items, visibleWorld, SPATIAL_CELL_SIZE);
 }
 
+// src/renderer/raster-image-canvas.ts
+init_rect();
+var DEFAULT_PIXEL_HEADROOM = 1.5;
+var DEFAULT_MAX_PIXEL_COUNT = 12e6;
+var DEFAULT_MAX_DIMENSION = 4096;
+var DEFAULT_UPSCALE_REDRAW_RATIO = 1.15;
+function resolveRasterImageCanvasRenderingOptions(options) {
+  if (!options) return null;
+  const fallbackDevicePixelRatio = typeof window === "undefined" ? 1 : window.devicePixelRatio;
+  return {
+    resolveRenderTarget: options.resolveRenderTarget,
+    devicePixelRatio: toPositiveFiniteNumber(
+      options.devicePixelRatio,
+      fallbackDevicePixelRatio
+    ),
+    pixelHeadroom: toPositiveFiniteNumber(
+      options.pixelHeadroom,
+      DEFAULT_PIXEL_HEADROOM
+    ),
+    maxPixelCount: toPositiveFiniteNumber(
+      options.maxPixelCount,
+      DEFAULT_MAX_PIXEL_COUNT
+    ),
+    maxDimension: toPositiveFiniteNumber(
+      options.maxDimension,
+      DEFAULT_MAX_DIMENSION
+    ),
+    upscaleRedrawRatio: toPositiveFiniteNumber(
+      options.upscaleRedrawRatio,
+      DEFAULT_UPSCALE_REDRAW_RATIO
+    )
+  };
+}
+function getRasterImageContentRect(item) {
+  if (item.toolKind !== "image" || !item.imageIntrinsicSize) return null;
+  const bounds = normalizeRect(item.bounds);
+  const intrinsicWidth = Math.max(1e-6, item.imageIntrinsicSize.width);
+  const intrinsicHeight = Math.max(1e-6, item.imageIntrinsicSize.height);
+  const boundsAspectRatio = bounds.width / Math.max(1e-9, bounds.height);
+  const imageAspectRatio = intrinsicWidth / intrinsicHeight;
+  if (Math.abs(boundsAspectRatio - imageAspectRatio) < 1e-3) {
+    return { x: 0, y: 0, width: bounds.width, height: bounds.height };
+  }
+  if (boundsAspectRatio > imageAspectRatio) {
+    const height2 = bounds.height;
+    const width2 = height2 * imageAspectRatio;
+    return { x: (bounds.width - width2) / 2, y: 0, width: width2, height: height2 };
+  }
+  const width = bounds.width;
+  const height = width / imageAspectRatio;
+  return { x: 0, y: (bounds.height - height) / 2, width, height };
+}
+function getRasterImageCanvasTargetSize({
+  intrinsicSize,
+  contentRect,
+  cameraZoom,
+  devicePixelRatio,
+  pixelHeadroom,
+  maxPixelCount,
+  maxDimension
+}) {
+  const intrinsicWidth = Math.max(1, Math.round(intrinsicSize.width));
+  const intrinsicHeight = Math.max(1, Math.round(intrinsicSize.height));
+  const targetCssWidth = Math.max(1, contentRect.width * cameraZoom);
+  const targetCssHeight = Math.max(1, contentRect.height * cameraZoom);
+  const desiredWidth = targetCssWidth * toPositiveFiniteNumber(devicePixelRatio, 1) * pixelHeadroom;
+  const desiredHeight = targetCssHeight * toPositiveFiniteNumber(devicePixelRatio, 1) * pixelHeadroom;
+  const dimensionScale = Math.min(
+    1,
+    toPositiveFiniteNumber(maxDimension, intrinsicWidth) / Math.max(intrinsicWidth, intrinsicHeight)
+  );
+  const pixelScale = Math.min(
+    1,
+    Math.sqrt(
+      toPositiveFiniteNumber(maxPixelCount, intrinsicWidth * intrinsicHeight) / (intrinsicWidth * intrinsicHeight)
+    )
+  );
+  const viewportScale = Math.min(
+    1,
+    desiredWidth / intrinsicWidth,
+    desiredHeight / intrinsicHeight
+  );
+  const scale = Math.min(dimensionScale, pixelScale, viewportScale);
+  const width = Math.max(1, Math.round(intrinsicWidth * scale));
+  const height = Math.max(1, Math.round(width * (intrinsicHeight / intrinsicWidth)));
+  return { width, height };
+}
+function resolveRasterImageCanvasRenderTarget({
+  item,
+  href,
+  intrinsicSize,
+  contentRect,
+  targetSize,
+  viewportSize,
+  cameraZoom,
+  options
+}) {
+  const request = {
+    item,
+    href,
+    intrinsicSize,
+    contentRect,
+    targetSize,
+    viewportSize,
+    cameraZoom,
+    devicePixelRatio: options.devicePixelRatio
+  };
+  const resolved = options.resolveRenderTarget?.(request);
+  if (typeof resolved === "string") {
+    return { href: resolved, sourceKey: resolved, targetSize, contentRect };
+  }
+  if (resolved?.href) {
+    return {
+      href: resolved.href,
+      sourceKey: resolved.sourceKey ?? resolved.href,
+      targetSize,
+      contentRect
+    };
+  }
+  return { href, sourceKey: href, targetSize, contentRect };
+}
+function shouldRedrawRasterImageCanvas({
+  currentSourceKey,
+  currentWidth,
+  currentHeight,
+  nextSourceKey,
+  nextWidth,
+  nextHeight,
+  upscaleRedrawRatio
+}) {
+  const safeCurrentWidth = Math.max(0, Math.round(currentWidth));
+  const safeCurrentHeight = Math.max(0, Math.round(currentHeight));
+  const safeNextWidth = Math.max(1, Math.round(nextWidth));
+  const safeNextHeight = Math.max(1, Math.round(nextHeight));
+  if (!currentSourceKey || safeCurrentWidth <= 1 || safeCurrentHeight <= 1) {
+    return true;
+  }
+  if (currentSourceKey !== nextSourceKey && safeCurrentWidth === safeNextWidth && safeCurrentHeight === safeNextHeight) {
+    return true;
+  }
+  return safeNextWidth > safeCurrentWidth * upscaleRedrawRatio || safeNextHeight > safeCurrentHeight * upscaleRedrawRatio;
+}
+function toPositiveFiniteNumber(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+
 // src/renderer/svg-vector-renderer.ts
 function formatCameraTransform(camera) {
   const z = camera.zoom;
@@ -6908,6 +7054,87 @@ function itemClassName(item) {
   }
   return classes.join(" ");
 }
+async function decodeRasterImage(href, width, height, signal) {
+  if (typeof createImageBitmap === "function") {
+    try {
+      const response = await fetch(href, { signal, credentials: "same-origin" });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch raster image: ${response.status}`);
+      }
+      const blob = await response.blob();
+      if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+      const bitmap = await createImageBitmap(blob, {
+        resizeWidth: width,
+        resizeHeight: height,
+        resizeQuality: "high"
+      });
+      return {
+        width: bitmap.width,
+        height: bitmap.height,
+        draw: (context) => {
+          context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
+        },
+        close: () => bitmap.close()
+      };
+    } catch (error) {
+      if (signal.aborted) throw error;
+    }
+  }
+  const image = await loadImageElement(href, signal);
+  return {
+    width,
+    height,
+    draw: (context) => {
+      context.drawImage(image, 0, 0, width, height);
+    },
+    close: () => {
+    }
+  };
+}
+function loadImageElement(href, signal) {
+  return new Promise((resolve, reject) => {
+    if (signal.aborted) {
+      reject(new DOMException("Aborted", "AbortError"));
+      return;
+    }
+    const image = new Image();
+    const cleanup = () => {
+      signal.removeEventListener("abort", abort);
+      image.onload = null;
+      image.onerror = null;
+    };
+    const abort = () => {
+      cleanup();
+      image.removeAttribute("src");
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    image.decoding = "async";
+    image.onload = () => {
+      const decodePromise = image.decode?.();
+      if (!decodePromise) {
+        cleanup();
+        resolve(image);
+        return;
+      }
+      decodePromise.then(
+        () => {
+          cleanup();
+          resolve(image);
+        },
+        () => {
+          cleanup();
+          resolve(image);
+        }
+      );
+    };
+    image.onerror = () => {
+      cleanup();
+      reject(new Error("Failed to load raster image"));
+    };
+    signal.addEventListener("abort", abort, { once: true });
+    image.src = href;
+  });
+}
 var SvgVectorRenderer = class {
   container;
   scene;
@@ -6919,10 +7146,14 @@ var SvgVectorRenderer = class {
   hoveredItemId = null;
   liveOverlay = null;
   resizeObserver;
+  rasterImageCanvasRendering;
   constructor(options) {
     this.container = options.container;
     this.scene = options.scene;
     this.camera = options.camera;
+    this.rasterImageCanvasRendering = resolveRasterImageCanvasRenderingOptions(
+      options.rasterImageCanvas
+    );
     this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     this.svg.setAttribute("width", "100%");
     this.svg.setAttribute("height", "100%");
@@ -6951,6 +7182,15 @@ var SvgVectorRenderer = class {
       this.applyInteractionAttributes(cached.g, id);
     }
   }
+  setRasterImageCanvasRendering(options) {
+    this.rasterImageCanvasRendering = resolveRasterImageCanvasRenderingOptions(options);
+    if (!this.rasterImageCanvasRendering) {
+      for (const cached of this.itemNodeCache.values()) {
+        this.releaseRasterImageCanvas(cached);
+      }
+    }
+    this.render();
+  }
   /**
    * Reads container size, culls items, and updates the SVG (incrementally when possible).
    */
@@ -7024,6 +7264,7 @@ var SvgVectorRenderer = class {
     }
     for (const [id, cached] of this.itemNodeCache) {
       if (!visibleIds.has(id)) {
+        this.releaseRasterImageCanvas(cached);
         cached.g.remove();
       }
     }
@@ -7056,6 +7297,7 @@ var SvgVectorRenderer = class {
         g.innerHTML = item.childrenSvg;
         cached.lastChildrenSvg = item.childrenSvg;
       }
+      this.syncRasterImageCanvas(cached, item);
       const expectedPosition = previousNode ? previousNode.nextSibling : this.rootG.firstChild;
       if (expectedPosition !== g) {
         this.rootG.insertBefore(g, expectedPosition);
@@ -7063,6 +7305,228 @@ var SvgVectorRenderer = class {
       previousNode = g;
     }
   }
+  syncRasterImageCanvas(cached, item) {
+    const options = this.rasterImageCanvasRendering;
+    if (!options || item.toolKind !== "image" || !item.imageRasterHref || !item.imageIntrinsicSize) {
+      this.releaseRasterImageCanvas(cached);
+      return;
+    }
+    const contentRect = getRasterImageContentRect(item);
+    const viewportSize = {
+      width: this.container.clientWidth,
+      height: this.container.clientHeight
+    };
+    if (!contentRect || viewportSize.width <= 0 || viewportSize.height <= 0) {
+      this.releaseRasterImageCanvas(cached);
+      return;
+    }
+    const targetSize = getRasterImageCanvasTargetSize({
+      intrinsicSize: item.imageIntrinsicSize,
+      contentRect,
+      cameraZoom: this.camera.zoom,
+      devicePixelRatio: options.devicePixelRatio,
+      pixelHeadroom: options.pixelHeadroom,
+      maxPixelCount: options.maxPixelCount,
+      maxDimension: options.maxDimension
+    });
+    const target = resolveRasterImageCanvasRenderTarget({
+      item,
+      href: item.imageRasterHref,
+      intrinsicSize: item.imageIntrinsicSize,
+      contentRect,
+      targetSize,
+      viewportSize,
+      cameraZoom: this.camera.zoom,
+      options
+    });
+    const rasterCanvas = this.ensureRasterImageCanvas(cached);
+    this.positionRasterImageCanvas(rasterCanvas, target.contentRect);
+    if (rasterCanvas.itemHref !== null && rasterCanvas.itemHref !== item.imageRasterHref) {
+      this.clearRasterImageCanvasBitmap(rasterCanvas);
+    }
+    if (!shouldRedrawRasterImageCanvas({
+      currentSourceKey: rasterCanvas.sourceKey,
+      currentWidth: rasterCanvas.width,
+      currentHeight: rasterCanvas.height,
+      nextSourceKey: target.sourceKey,
+      nextWidth: target.targetSize.width,
+      nextHeight: target.targetSize.height,
+      upscaleRedrawRatio: options.upscaleRedrawRatio
+    })) {
+      return;
+    }
+    const request = {
+      itemHref: item.imageRasterHref,
+      target
+    };
+    if (rasterCanvas.abortController) {
+      if (rasterCanvas.loadingItemHref !== item.imageRasterHref) {
+        rasterCanvas.abortController.abort();
+        rasterCanvas.abortController = null;
+        rasterCanvas.loadingItemHref = null;
+        rasterCanvas.loadingSourceKey = null;
+        rasterCanvas.loadingWidth = 0;
+        rasterCanvas.loadingHeight = 0;
+        rasterCanvas.queuedTarget = null;
+        this.drawRasterImageCanvas(rasterCanvas, request);
+        return;
+      }
+      if (rasterCanvas.loadingSourceKey === target.sourceKey && rasterCanvas.loadingWidth === target.targetSize.width && rasterCanvas.loadingHeight === target.targetSize.height) {
+        return;
+      }
+      if (shouldRedrawRasterImageCanvas({
+        currentSourceKey: rasterCanvas.loadingSourceKey,
+        currentWidth: rasterCanvas.loadingWidth,
+        currentHeight: rasterCanvas.loadingHeight,
+        nextSourceKey: target.sourceKey,
+        nextWidth: target.targetSize.width,
+        nextHeight: target.targetSize.height,
+        upscaleRedrawRatio: options.upscaleRedrawRatio
+      })) {
+        rasterCanvas.queuedTarget = request;
+      }
+      return;
+    }
+    this.drawRasterImageCanvas(rasterCanvas, request);
+  }
+  ensureRasterImageCanvas(cached) {
+    if (cached.rasterCanvas) {
+      if (!cached.rasterCanvas.foreignObject.isConnected) {
+        cached.g.appendChild(cached.rasterCanvas.foreignObject);
+      }
+      return cached.rasterCanvas;
+    }
+    const foreignObject = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "foreignObject"
+    );
+    foreignObject.setAttribute("data-canvu-raster-canvas", "true");
+    foreignObject.style.pointerEvents = "none";
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    canvas.style.display = "block";
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    foreignObject.appendChild(canvas);
+    cached.g.appendChild(foreignObject);
+    cached.rasterCanvas = {
+      foreignObject,
+      canvas,
+      itemHref: null,
+      sourceKey: null,
+      width: 0,
+      height: 0,
+      loadSequence: 0,
+      abortController: null,
+      loadingItemHref: null,
+      loadingSourceKey: null,
+      loadingWidth: 0,
+      loadingHeight: 0,
+      queuedTarget: null
+    };
+    return cached.rasterCanvas;
+  }
+  positionRasterImageCanvas(rasterCanvas, contentRect) {
+    rasterCanvas.foreignObject.setAttribute("x", String(contentRect.x));
+    rasterCanvas.foreignObject.setAttribute("y", String(contentRect.y));
+    rasterCanvas.foreignObject.setAttribute("width", String(contentRect.width));
+    rasterCanvas.foreignObject.setAttribute("height", String(contentRect.height));
+  }
+  drawRasterImageCanvas(rasterCanvas, request) {
+    const { target } = request;
+    const width = Math.max(1, Math.round(target.targetSize.width));
+    const height = Math.max(1, Math.round(target.targetSize.height));
+    const sequence = rasterCanvas.loadSequence + 1;
+    rasterCanvas.loadSequence = sequence;
+    rasterCanvas.abortController?.abort();
+    const abortController = new AbortController();
+    rasterCanvas.abortController = abortController;
+    rasterCanvas.loadingItemHref = request.itemHref;
+    rasterCanvas.loadingSourceKey = target.sourceKey;
+    rasterCanvas.loadingWidth = width;
+    rasterCanvas.loadingHeight = height;
+    rasterCanvas.queuedTarget = null;
+    decodeRasterImage(target.href, width, height, abortController.signal).then((decoded) => {
+      if (abortController.signal.aborted || rasterCanvas.loadSequence !== sequence) {
+        decoded.close();
+        return;
+      }
+      const context = rasterCanvas.canvas.getContext("2d");
+      if (!context) {
+        decoded.close();
+        rasterCanvas.abortController = null;
+        rasterCanvas.loadingItemHref = null;
+        rasterCanvas.loadingSourceKey = null;
+        rasterCanvas.loadingWidth = 0;
+        rasterCanvas.loadingHeight = 0;
+        this.drawQueuedRasterImageCanvasTarget(rasterCanvas);
+        return;
+      }
+      rasterCanvas.canvas.width = decoded.width;
+      rasterCanvas.canvas.height = decoded.height;
+      context.clearRect(0, 0, decoded.width, decoded.height);
+      decoded.draw(context);
+      decoded.close();
+      rasterCanvas.itemHref = request.itemHref;
+      rasterCanvas.sourceKey = target.sourceKey;
+      rasterCanvas.width = decoded.width;
+      rasterCanvas.height = decoded.height;
+      rasterCanvas.abortController = null;
+      rasterCanvas.loadingItemHref = null;
+      rasterCanvas.loadingSourceKey = null;
+      rasterCanvas.loadingWidth = 0;
+      rasterCanvas.loadingHeight = 0;
+      this.drawQueuedRasterImageCanvasTarget(rasterCanvas);
+    }).catch((error) => {
+      if (abortController.signal.aborted) return;
+      if (error instanceof Error && error.name === "AbortError") return;
+      if (rasterCanvas.loadSequence === sequence) {
+        rasterCanvas.abortController = null;
+        rasterCanvas.loadingItemHref = null;
+        rasterCanvas.loadingSourceKey = null;
+        rasterCanvas.loadingWidth = 0;
+        rasterCanvas.loadingHeight = 0;
+        this.drawQueuedRasterImageCanvasTarget(rasterCanvas);
+      }
+    });
+  }
+  drawQueuedRasterImageCanvasTarget(rasterCanvas) {
+    const queuedTarget = rasterCanvas.queuedTarget;
+    if (!queuedTarget) return;
+    rasterCanvas.queuedTarget = null;
+    if (!shouldRedrawRasterImageCanvas({
+      currentSourceKey: rasterCanvas.sourceKey,
+      currentWidth: rasterCanvas.width,
+      currentHeight: rasterCanvas.height,
+      nextSourceKey: queuedTarget.target.sourceKey,
+      nextWidth: queuedTarget.target.targetSize.width,
+      nextHeight: queuedTarget.target.targetSize.height,
+      upscaleRedrawRatio: this.rasterImageCanvasRendering?.upscaleRedrawRatio ?? 1
+    })) {
+      return;
+    }
+    this.drawRasterImageCanvas(rasterCanvas, queuedTarget);
+  }
+  clearRasterImageCanvasBitmap(rasterCanvas) {
+    const context = rasterCanvas.canvas.getContext("2d");
+    context?.clearRect(0, 0, rasterCanvas.canvas.width, rasterCanvas.canvas.height);
+    rasterCanvas.canvas.width = 1;
+    rasterCanvas.canvas.height = 1;
+    rasterCanvas.itemHref = null;
+    rasterCanvas.sourceKey = null;
+    rasterCanvas.width = 0;
+    rasterCanvas.height = 0;
+  }
+  releaseRasterImageCanvas(cached) {
+    const rasterCanvas = cached.rasterCanvas;
+    if (!rasterCanvas) return;
+    rasterCanvas.abortController?.abort();
+    rasterCanvas.loadSequence += 1;
+    rasterCanvas.queuedTarget = null;
+    rasterCanvas.foreignObject.remove();
+    cached.rasterCanvas = void 0;
+  }
   applyInteractionAttributes(g, itemId) {
     g.setAttribute(
       "data-canvu-selected",
@@ -7075,6 +7539,9 @@ var SvgVectorRenderer = class {
   }
   destroy() {
     this.resizeObserver.disconnect();
+    for (const cached of this.itemNodeCache.values()) {
+      this.releaseRasterImageCanvas(cached);
+    }
     this.itemNodeCache.clear();
     this.liveOverlay = null;
     this.svg.remove();
@@ -8364,6 +8831,7 @@ var VectorViewport = react.forwardRef(
     customPlacement: consumerCustomPlacement,
     customPlacements: consumerCustomPlacements,
     assetStore,
+    imageCanvasRendering,
     toolLocked = false,
     autoResetToolTo = "select",
     onToolChangeRequest,
@@ -8570,6 +9038,8 @@ var VectorViewport = react.forwardRef(
     onActivateLinkRef.current = onActivateLink;
     const assetStoreRef = react.useRef(assetStore);
     assetStoreRef.current = assetStore;
+    const imageCanvasRenderingRef = react.useRef(imageCanvasRendering);
+    imageCanvasRenderingRef.current = imageCanvasRendering;
     const customPlacementRef = react.useRef(customPlacement);
     customPlacementRef.current = customPlacement;
     const allCustomPlacementsRef = react.useRef(allCustomPlacements);
@@ -9190,7 +9660,8 @@ var VectorViewport = react.forwardRef(
         container: el,
         scene,
         camera,
-        pointerEventsNone: interactiveRef.current
+        pointerEventsNone: interactiveRef.current,
+        rasterImageCanvas: imageCanvasRenderingRef.current
       });
       rendererRef.current = renderer;
       renderer.setInteractionState({
@@ -9242,6 +9713,9 @@ var VectorViewport = react.forwardRef(
         hoveredItemId: hoveredItemIdRef.current
       });
     }, [effectiveSelectedIds]);
+    react.useEffect(() => {
+      rendererRef.current?.setRasterImageCanvasRendering(imageCanvasRendering);
+    }, [imageCanvasRendering]);
     react.useEffect(() => {
       const r = rendererRef.current;
       if (!r) return;