canvu-react 0.3.10 → 0.3.12

package/dist/asset-hydration-3Iv5xHxM.d.cts

@@ -0,0 +1,27 @@
+import { V as VectorSceneItem } from './types-CB0TZZuk.cjs';
+import { u as VectorViewportAssetStore } from './shape-builders-DFudWDFI.cjs';
+
+declare class IndexedDbImageStore {
+    private dbPromise;
+    private getDb;
+    storeOriginal(blob: Blob): Promise<string>;
+    getOriginal(id: string): Promise<Blob | undefined>;
+    deleteOriginal(id: string): Promise<void>;
+    storeThumbnail(blob: Blob): Promise<string>;
+    getThumbnail(id: string): Promise<Blob | undefined>;
+    deleteThumbnail(id: string): Promise<void>;
+}
+
+type HydrateSceneItemsWithAssetsOptions = {
+    imageStore?: IndexedDbImageStore;
+    pdfScale?: number;
+    pdfPageConcurrency?: number;
+    preferCachedRasters?: boolean;
+};
+type HydratedSceneItemsWithAssetsResult = {
+    items: VectorSceneItem[];
+    objectUrls: string[];
+};
+declare function hydrateSceneItemsWithAssets(items: readonly VectorSceneItem[], assetStore: VectorViewportAssetStore, options?: HydrateSceneItemsWithAssetsOptions): Promise<HydratedSceneItemsWithAssetsResult>;
+
+export { type HydratedSceneItemsWithAssetsResult as H, IndexedDbImageStore as I, hydrateSceneItemsWithAssets as h };

package/dist/asset-hydration-BEG21hMp.d.ts

@@ -0,0 +1,27 @@
+import { V as VectorSceneItem } from './types-CB0TZZuk.js';
+import { u as VectorViewportAssetStore } from './shape-builders-ENwnK-zT.js';
+
+declare class IndexedDbImageStore {
+    private dbPromise;
+    private getDb;
+    storeOriginal(blob: Blob): Promise<string>;
+    getOriginal(id: string): Promise<Blob | undefined>;
+    deleteOriginal(id: string): Promise<void>;
+    storeThumbnail(blob: Blob): Promise<string>;
+    getThumbnail(id: string): Promise<Blob | undefined>;
+    deleteThumbnail(id: string): Promise<void>;
+}
+
+type HydrateSceneItemsWithAssetsOptions = {
+    imageStore?: IndexedDbImageStore;
+    pdfScale?: number;
+    pdfPageConcurrency?: number;
+    preferCachedRasters?: boolean;
+};
+type HydratedSceneItemsWithAssetsResult = {
+    items: VectorSceneItem[];
+    objectUrls: string[];
+};
+declare function hydrateSceneItemsWithAssets(items: readonly VectorSceneItem[], assetStore: VectorViewportAssetStore, options?: HydrateSceneItemsWithAssetsOptions): Promise<HydratedSceneItemsWithAssetsResult>;
+
+export { type HydratedSceneItemsWithAssetsResult as H, IndexedDbImageStore as I, hydrateSceneItemsWithAssets as h };

package/dist/chatbot.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-BtLGGw0r.cjs';
+import { C as CanvasPlugin } from './types-CTyASYIm.cjs';
 import 'react';
 import './types-CB0TZZuk.cjs';
 import './camera-BwQjm5oh.cjs';
-import './shape-builders-DxPoOecg.cjs';
+import './shape-builders-DFudWDFI.cjs';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/chatbot.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-ChnTSRSe.js';
+import { C as CanvasPlugin } from './types-UvUy2Eed.js';
 import 'react';
 import './types-CB0TZZuk.js';
 import './camera-KwCYYPhm.js';
-import './shape-builders-DTYvub8W.js';
+import './shape-builders-ENwnK-zT.js';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var getStroke = require('perfect-freehand');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var getStroke__default = /*#__PURE__*/_interopDefault(getStroke);
@@ -84,6 +85,202 @@ var Camera2D = class {
   }
 };
 
+// src/image/indexed-db-image-store.ts
+var DB_NAME = "canvu-image-store";
+var DB_VERSION = 1;
+function openDb() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains("images")) {
+        db.createObjectStore("images");
+      }
+      if (!db.objectStoreNames.contains("thumbnails")) {
+        db.createObjectStore("thumbnails");
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+function getFromStore(db, storeName, id) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(storeName, "readonly");
+    const req = tx.objectStore(storeName).get(id);
+    req.onsuccess = () => resolve(req.result ?? void 0);
+    req.onerror = () => reject(req.error);
+  });
+}
+function putInStore(db, storeName, id, blob) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(storeName, "readwrite");
+    const req = tx.objectStore(storeName).put(blob, id);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}
+function deleteFromStore(db, storeName, id) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(storeName, "readwrite");
+    const req = tx.objectStore(storeName).delete(id);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}
+function generateBlobId() {
+  return crypto.randomUUID();
+}
+var IndexedDbImageStore = class {
+  dbPromise = null;
+  getDb() {
+    if (!this.dbPromise) {
+      this.dbPromise = openDb();
+    }
+    return this.dbPromise;
+  }
+  async storeOriginal(blob) {
+    const id = generateBlobId();
+    const db = await this.getDb();
+    await putInStore(db, "images", id, blob);
+    return id;
+  }
+  async getOriginal(id) {
+    const db = await this.getDb();
+    return getFromStore(db, "images", id);
+  }
+  async deleteOriginal(id) {
+    const db = await this.getDb();
+    await deleteFromStore(db, "images", id);
+  }
+  async storeThumbnail(blob) {
+    const id = generateBlobId();
+    const db = await this.getDb();
+    await putInStore(db, "thumbnails", id, blob);
+    return id;
+  }
+  async getThumbnail(id) {
+    const db = await this.getDb();
+    return getFromStore(db, "thumbnails", id);
+  }
+  async deleteThumbnail(id) {
+    const db = await this.getDb();
+    await deleteFromStore(db, "thumbnails", id);
+  }
+};
+
+// src/image/pdf-loader.ts
+var pdfjsPromise = null;
+function getPdfJs() {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import('pdfjs-dist').then((mod) => {
+      const workerSrc = new URL(
+        "pdfjs-dist/build/pdf.worker.min.mjs",
+        (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))
+      ).toString();
+      mod.GlobalWorkerOptions.workerSrc = workerSrc;
+      return mod;
+    });
+  }
+  return pdfjsPromise;
+}
+async function renderPageToCanvas(page, scale) {
+  const raw = page.getViewport({ scale: 1 });
+  const adjustedScale = Math.round(raw.width * scale) / raw.width;
+  const viewport = page.getViewport({ scale: adjustedScale });
+  const w = Math.round(viewport.width);
+  const h = Math.round(viewport.height);
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2D context unavailable");
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  await page.render({ canvas, viewport }).promise;
+  return { canvas, width: w, height: h };
+}
+function canvasToBlob(canvas, mime, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Could not encode blob"));
+          return;
+        }
+        resolve(blob);
+      },
+      mime,
+      quality
+    );
+  });
+}
+function normalizePdfPageNumbers(pageNumbers, pageCount) {
+  if (!pageNumbers || pageNumbers.length === 0) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+  return [...new Set(pageNumbers)].filter((pageNumber) => pageNumber >= 1 && pageNumber <= pageCount).sort((left, right) => left - right);
+}
+async function runWithConcurrency(items, concurrency, execute) {
+  const results = new Array(items.length);
+  let nextIndex = 0;
+  const workerCount = Math.max(1, Math.min(concurrency, items.length));
+  await Promise.all(
+    Array.from({ length: workerCount }, async () => {
+      while (nextIndex < items.length) {
+        const currentIndex = nextIndex;
+        nextIndex += 1;
+        const item = items[currentIndex];
+        if (item === void 0) {
+          continue;
+        }
+        results[currentIndex] = await execute(item);
+      }
+    })
+  );
+  return results;
+}
+async function loadPdfToStore(file, store, options) {
+  const scale = options?.scale ?? 1.5;
+  const pageConcurrency = options?.pageConcurrency ?? 2;
+  const pdfjs = await getPdfJs();
+  const arrayBuffer = await file.arrayBuffer();
+  const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;
+  const pageNumbers = normalizePdfPageNumbers(options?.pageNumbers, pdf.numPages);
+  return await runWithConcurrency(
+    pageNumbers,
+    pageConcurrency,
+    async (pageNumber) => {
+      const page = await pdf.getPage(pageNumber);
+      const { canvas, width, height } = await renderPageToCanvas(page, scale);
+      const mime = "image/png";
+      const pageBlob = await canvasToBlob(canvas, mime);
+      const blobId = await store.storeOriginal(pageBlob);
+      const thumbScale = Math.min(1, 256 / Math.max(width, height));
+      const tw = Math.max(1, Math.round(width * thumbScale));
+      const th = Math.max(1, Math.round(height * thumbScale));
+      const thumbCanvas = document.createElement("canvas");
+      thumbCanvas.width = tw;
+      thumbCanvas.height = th;
+      const tCtx = thumbCanvas.getContext("2d");
+      if (tCtx) {
+        tCtx.imageSmoothingEnabled = true;
+        tCtx.imageSmoothingQuality = "high";
+        tCtx.drawImage(canvas, 0, 0, tw, th);
+      }
+      const thumbBlob = await canvasToBlob(thumbCanvas, mime);
+      const thumbnailBlobId = await store.storeThumbnail(thumbBlob);
+      return {
+        blobId,
+        thumbnailBlobId,
+        width,
+        height,
+        pageNumber
+      };
+    }
+  );
+}
+
 // src/image/raster-image.ts
 var MAX_RASTER_EMBED_DIMENSION = 4096;
 function normalizeLoadOptions(maxDimensionOrOptions) {
@@ -1468,16 +1665,14 @@ function itemHitTestWorldPoint(item, worldX, worldY, options) {
           return true;
         }
       }
+      return false;
     }
-    if (pts?.length === 1) {
+    if (pts && pts.length === 1) {
       const p = pts[0];
-      if (p) {
-        const cw = itemLocalToWorld(p.x, p.y, item.x, item.y, w, h, rot);
-        const dsq = (worldX - cw.x) ** 2 + (worldY - cw.y) ** 2;
-        if (dsq <= tolSq) {
-          return true;
-        }
-      }
+      if (!p) return false;
+      const cw = itemLocalToWorld(p.x, p.y, item.x, item.y, w, h, rot);
+      const dsq = (worldX - cw.x) ** 2 + (worldY - cw.y) ** 2;
+      return dsq <= tolSq;
     }
     return hitTestFilledShape(item, worldX, worldY);
   }
@@ -1514,6 +1709,271 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
   return ids;
 }
 
+// src/react/asset-hydration.ts
+var HYDRATION_CACHE_NAME = "canvu-asset-hydration-v1";
+var DEFAULT_PDF_SCALE = 1.15;
+var DEFAULT_PDF_PAGE_CONCURRENCY = 2;
+var hydrationBlobPromises = /* @__PURE__ */ new Map();
+function buildImageHydrationKey(assetId) {
+  return `image:${assetId}`;
+}
+function buildPdfHydrationKey(assetId, pageNumber, scale) {
+  return `pdf:${assetId}:page:${pageNumber}:scale:${scale}`;
+}
+function getCacheRequest(key) {
+  return new Request(
+    `https://canvu.local/asset-hydration/${encodeURIComponent(key)}`
+  );
+}
+async function openHydrationCache() {
+  if (typeof caches === "undefined") return null;
+  try {
+    return await caches.open(HYDRATION_CACHE_NAME);
+  } catch {
+    return null;
+  }
+}
+async function readCachedHydrationBlob(key) {
+  const cache = await openHydrationCache();
+  if (!cache) return null;
+  try {
+    const response = await cache.match(getCacheRequest(key));
+    if (!response?.ok) return null;
+    return await response.blob();
+  } catch {
+    return null;
+  }
+}
+async function writeCachedHydrationBlob(key, blob) {
+  const cache = await openHydrationCache();
+  if (!cache) return;
+  try {
+    await cache.put(getCacheRequest(key), new Response(blob));
+  } catch {
+  }
+}
+async function fetchBlob(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) return null;
+    return await response.blob();
+  } catch {
+    return null;
+  }
+}
+async function getHydrationBlob(key, preferCachedRasters, loader) {
+  const cached = preferCachedRasters ? await readCachedHydrationBlob(key) : null;
+  if (cached) return cached;
+  const inFlight = hydrationBlobPromises.get(key);
+  if (inFlight) return await inFlight;
+  const nextPromise = (async () => {
+    const blob = await loader();
+    if (blob) {
+      await writeCachedHydrationBlob(key, blob);
+    }
+    return blob;
+  })();
+  hydrationBlobPromises.set(key, nextPromise);
+  try {
+    return await nextPromise;
+  } finally {
+    hydrationBlobPromises.delete(key);
+  }
+}
+function registerObjectUrl(objectUrls, blob) {
+  const href = URL.createObjectURL(blob);
+  objectUrls.push(href);
+  return href;
+}
+function getHydrationRequests(items, assetStore, pdfScale) {
+  if (!assetStore.getHydrationRequest) return [];
+  return items.flatMap((item) => {
+    const request = assetStore.getHydrationRequest?.(item);
+    if (!request) return [];
+    return [
+      {
+        request: {
+          ...request,
+          scale: request.scale ?? pdfScale
+        }
+      }
+    ];
+  });
+}
+function createPdfHydrationGroups(requests) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const entry of requests) {
+    if (entry.request.kind !== "pdf" || entry.request.pageNumber == null) continue;
+    const scale = entry.request.scale ?? DEFAULT_PDF_SCALE;
+    const key = `${entry.request.assetId}:${scale}`;
+    const existingGroup = groups.get(key);
+    if (existingGroup) {
+      if (!existingGroup.pageNumbers.includes(entry.request.pageNumber)) {
+        existingGroup.pageNumbers.push(entry.request.pageNumber);
+      }
+      continue;
+    }
+    groups.set(key, {
+      assetId: entry.request.assetId,
+      scale,
+      pageNumbers: [entry.request.pageNumber]
+    });
+  }
+  return [...groups.values()];
+}
+async function hydrateImageAssets(requests, resolvedAssetUrls, objectUrls, preferCachedRasters) {
+  const uniqueAssetIds = [
+    ...new Set(requests.map((entry) => entry.request.assetId))
+  ];
+  const hydratedEntries = await Promise.all(
+    uniqueAssetIds.map(async (assetId) => {
+      const resolvedAsset = resolvedAssetUrls[assetId];
+      if (!resolvedAsset?.url) {
+        return [assetId, null];
+      }
+      const blob = await getHydrationBlob(
+        buildImageHydrationKey(assetId),
+        preferCachedRasters,
+        async () => await fetchBlob(resolvedAsset.url)
+      );
+      if (!blob) {
+        return [assetId, null];
+      }
+      return [
+        assetId,
+        {
+          href: registerObjectUrl(objectUrls, blob)
+        }
+      ];
+    })
+  );
+  return new Map(hydratedEntries);
+}
+async function hydratePdfAssets(requests, resolvedAssetUrls, objectUrls, options) {
+  const hydratedPages = /* @__PURE__ */ new Map();
+  const groups = createPdfHydrationGroups(requests);
+  for (const group of groups) {
+    const resolvedAsset = resolvedAssetUrls[group.assetId];
+    if (!resolvedAsset?.url) {
+      continue;
+    }
+    const missingPages = [];
+    for (const pageNumber of group.pageNumbers) {
+      const cacheKey = buildPdfHydrationKey(group.assetId, pageNumber, group.scale);
+      const cachedBlob = await readCachedHydrationBlob(cacheKey);
+      if (!cachedBlob) {
+        missingPages.push(pageNumber);
+        continue;
+      }
+      hydratedPages.set(cacheKey, {
+        href: registerObjectUrl(objectUrls, cachedBlob)
+      });
+    }
+    if (missingPages.length === 0) {
+      continue;
+    }
+    const pdfBlob = await fetchBlob(resolvedAsset.url);
+    if (!pdfBlob) {
+      continue;
+    }
+    const renderedPages = await loadPdfToStore(pdfBlob, options.imageStore, {
+      scale: group.scale,
+      pageNumbers: missingPages,
+      pageConcurrency: options.pdfPageConcurrency
+    });
+    for (const renderedPage of renderedPages) {
+      const cacheKey = buildPdfHydrationKey(
+        group.assetId,
+        renderedPage.pageNumber,
+        group.scale
+      );
+      const pageBlob = await options.imageStore.getOriginal(renderedPage.blobId);
+      if (!pageBlob) {
+        continue;
+      }
+      await writeCachedHydrationBlob(cacheKey, pageBlob);
+      hydratedPages.set(cacheKey, {
+        href: registerObjectUrl(objectUrls, pageBlob),
+        width: renderedPage.width,
+        height: renderedPage.height
+      });
+    }
+  }
+  return hydratedPages;
+}
+async function hydrateSceneItemsWithAssets(items, assetStore, options = {}) {
+  if (!assetStore.resolve || !assetStore.getHydrationRequest) {
+    return {
+      items: [...items],
+      objectUrls: []
+    };
+  }
+  const pdfScale = options.pdfScale ?? DEFAULT_PDF_SCALE;
+  const pdfPageConcurrency = options.pdfPageConcurrency ?? DEFAULT_PDF_PAGE_CONCURRENCY;
+  const preferCachedRasters = options.preferCachedRasters ?? true;
+  const imageStore = options.imageStore ?? new IndexedDbImageStore();
+  const hydrationRequests = getHydrationRequests(items, assetStore, pdfScale);
+  if (hydrationRequests.length === 0) {
+    return {
+      items: [...items],
+      objectUrls: []
+    };
+  }
+  const assetIds = [
+    ...new Set(hydrationRequests.map((entry) => entry.request.assetId))
+  ];
+  const resolvedAssetUrls = await assetStore.resolve({ assetIds });
+  const objectUrls = [];
+  const hydratedImages = await hydrateImageAssets(
+    hydrationRequests.filter((entry) => entry.request.kind === "image"),
+    resolvedAssetUrls,
+    objectUrls,
+    preferCachedRasters
+  );
+  const hydratedPdfPages = await hydratePdfAssets(
+    hydrationRequests.filter((entry) => entry.request.kind === "pdf"),
+    resolvedAssetUrls,
+    objectUrls,
+    {
+      imageStore,
+      pdfPageConcurrency}
+  );
+  return {
+    items: items.map((item) => {
+      const request = assetStore.getHydrationRequest?.(item);
+      if (!request || item.toolKind !== "image") return item;
+      if (request.kind === "image") {
+        const hydratedImage = hydratedImages.get(request.assetId);
+        if (!hydratedImage) return item;
+        return rebuildItemSvg({
+          ...item,
+          imageRasterHref: hydratedImage.href,
+          imageThumbnailHref: hydratedImage.href
+        });
+      }
+      if (request.pageNumber == null) return item;
+      const hydratedPdfPage = hydratedPdfPages.get(
+        buildPdfHydrationKey(
+          request.assetId,
+          request.pageNumber,
+          request.scale ?? pdfScale
+        )
+      );
+      if (!hydratedPdfPage) return item;
+      return rebuildItemSvg({
+        ...item,
+        imageRasterHref: hydratedPdfPage.href,
+        imageThumbnailHref: hydratedPdfPage.href,
+        imageIntrinsicSize: {
+          width: item.imageIntrinsicSize?.width ?? Math.max(1, Math.round(hydratedPdfPage.width ?? item.bounds.width)),
+          height: item.imageIntrinsicSize?.height ?? Math.max(1, Math.round(hydratedPdfPage.height ?? item.bounds.height))
+        }
+      });
+    }),
+    objectUrls
+  };
+}
+
 // src/scene/spatial-cull.ts
 var spatialIndexCache = /* @__PURE__ */ new WeakMap();
 function cellKey(ix, iy) {
@@ -1794,6 +2254,7 @@ exports.expandCustomShapeTemplate = expandCustomShapeTemplate;
 exports.formatCameraTransform = formatCameraTransform;
 exports.formatItemPlacementTransform = formatItemPlacementTransform;
 exports.hitTestWorldPoint = hitTestWorldPoint;
+exports.hydrateSceneItemsWithAssets = hydrateSceneItemsWithAssets;
 exports.isArrowBindTarget = isArrowBindTarget;
 exports.itemHitTestWorldPoint = itemHitTestWorldPoint;
 exports.lineEndpointsToLocal = lineEndpointsToLocal;