@component-hook/pdf-canvas 1.2.2-alpha.3 → 1.2.2

package/README.md

@@ -62,24 +62,19 @@ async function uploadFile(event: Event) {
 </script>
 
 <template>
-  <div class="w-fit flex flex-col items-center gap-3">
+  <div>
     <pdf-canvas
       v-if="currentPdf"
       :file="currentPdf"
     />
 
-    <p
-      v-else
-      class="font-mono text-sm"
-    >
-      Please select a PDF file or image.
-    </p>
+    <p v-else>Please select a PDF file or image.</p>
 
     <button class="relative">
       <input
         type="file"
         accept="application/pdf, .jpg, .png"
-        class="opacity-0 top-0 left-0 absolute w-[94px] h-[36px] cursor-pointer"
+        class="absolute top-0 left-0 h-[36px] w-[94px] cursor-pointer opacity-0"
         @change="uploadFile"
       />
       select file
@@ -127,6 +122,33 @@ export function DrawPdf() {
 }
 ```
 
+## ⚠️ Required Vite Configuration
+
+If you're using Vite in development mode, you must exclude this package from Vite's dependency optimization, because it internally uses a Web Worker which doesn't work well when Vite pre-bundles dependencies.
+
+```js
+// vite.config.js or vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  // …other Vite config
+  optimizeDeps: {
+    exclude: ['@component-hook/pdf-canvas'],
+  },
+});
+```
+
+### Why Is This Necessary?
+
+- Vite's dev server does pre-bundling of dependencies (using esbuild) to improve performance.
+- However, modules using Web Workers (like this component) may break or fail to initialize correctly during this pre-bundling stage.
+
+### Web Worker & Vite Known Issue
+
+- This is a known issue: the Vite team is aware of difficulties when optimizing dependencies that use Web Workers.
+- For more background, see this GitHub issue: [Vite/Rolldown-Vite #362](https://github.com/vitejs/rolldown-vite/issues/362)
+- Once Vite improves its Web Worker optimization, it may become safe to remove this exclusion — but for now, it's required to ensure correct behavior in dev mode.
+
 ## License
 
 This project is licensed under the MIT License.

package/dist/react/pdf-canvas.es.js

@@ -22230,26 +22230,18 @@ Y.setLayerDimensions;
 Y.shadow;
 Y.stopEvent;
 var Vg = Y.version;
-function Wg(a) {
-  return new Worker(
-    "" + new URL("assets/pdfjs.worker-DawqtvLM.js", import.meta.url).href,
-    {
-      name: a?.name
-    }
-  );
-}
 let Ja = null;
-function Xg() {
+function Wg() {
   const a = document.createElement("div");
   a.style.width = "1in", document.body.append(a);
   const t = a.offsetWidth;
   return a.remove(), t;
 }
-function Ug() {
-  const a = Ja ?? Xg();
+function Xg() {
+  const a = Ja ?? Wg();
   return Ja = a, a / 72;
 }
-function Yg(a, t = 500) {
+function Ug(a, t = 500) {
   if (typeof a != "function") throw new TypeError("The first argument is not a function.");
   let e = null;
   return function(...s) {
@@ -22258,15 +22250,15 @@ function Yg(a, t = 500) {
     }, t);
   };
 }
-function $g(a) {
+function Yg(a) {
   return new Promise((t, e) => {
     const s = new FileReader();
     s.addEventListener("load", () => t(s.result)), s.addEventListener("error", e), s.readAsDataURL(a);
   });
 }
 Yl() || (zg.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${Vg}/pdf.worker.min.mjs`);
-async function qg(a) {
-  const t = "data:application/pdf;base64,", e = await $g(a);
+async function $g(a) {
+  const t = "data:application/pdf;base64,", e = await Yg(a);
   if (typeof e == "string")
     return globalThis.atob(e.slice(t.length));
 }
@@ -22277,10 +22269,14 @@ function Yl() {
     return !1;
   }
 }
-async function Kg({ page: a, PDFBase64: t, scale: e, password: s }, i) {
-  const n = Ug() / window.devicePixelRatio;
+async function qg({ page: a, PDFBase64: t, scale: e, password: s }, i) {
+  const n = Xg() / window.devicePixelRatio;
   if (Yl()) {
-    const r = new Wg();
+    const r = new Worker(new URL(
+      /* @vite-ignore */
+      "" + new URL("assets/pdfjs.worker-DawqtvLM.js", import.meta.url).href,
+      import.meta.url
+    ), { type: "module" });
     return r.postMessage({ data: t, password: s, id: i, page: a, units: n, scale: e }), await new Promise((h) => {
       r.addEventListener("message", ({ data: l }) => {
         if (l.status === "success")
@@ -22303,11 +22299,11 @@ async function Kg({ page: a, PDFBase64: t, scale: e, password: s }, i) {
   }
 }
 const jt = /* @__PURE__ */ new Map();
-function Jg(a) {
+function Kg(a) {
   const t = new Pr(a);
   return jt.set(a, t), t;
 }
-function Zg(a, t) {
+function Jg(a, t) {
   const e = Date.now();
   return {
     PDFId: `${a.name}-${e}`,
@@ -22316,19 +22312,19 @@ function Zg(a, t) {
     PDFBase64: t
   };
 }
-async function Qg({ src: a }, t, e) {
+async function Zg({ src: a }, t, e) {
   if (!a || !e) return null;
   const { objects: s, options: i } = await kd(a), n = s.filter((o) => o !== null), r = Xu.groupSVGElements(n, i);
   return n.forEach((o) => {
     o.stroke = e;
   }), r.hoverCursor = "pointer", r.stroke = `${e}-${t}`, r;
 }
-function tp(a, t) {
+function Qg(a, t) {
   if (!jt.get(a)) return;
-  const s = 1 / 3, i = ap(t, s);
+  const s = 1 / 3, i = op(t, s);
   ql(a, i, s);
 }
-async function ep(a, t) {
+async function tp(a, t) {
   const e = await Bd(a), s = Date.now(), n = {
     PDFId: `${a.name}${s}`,
     name: a.name.replace(/.png|.jpg|.jpeg/, ""),
@@ -22346,30 +22342,30 @@ function ql(a, t, e) {
   const s = jt.get(a);
   s && (s.setWidth(t.width * e), s.setHeight(t.height * e), s.backgroundImage = t, s.renderAll());
 }
-function sp(a, t) {
+function ep(a, t) {
   if (!t) return;
   const { oCoords: e } = a;
   if (!e) return;
   const { x: s, y: i } = e.tl.touchCorner.tl, { height: n, width: r, scaleY: o, scaleX: h } = t;
   t.top = i - n * o / 2, t.left = s - r * h / 2, t.setCoords();
 }
-function ip(a, t, e) {
-  !e || !a || (e.scale(1 / t), sp(a, e));
+function sp(a, t, e) {
+  !e || !a || (e.scale(1 / t), ep(a, e));
 }
-function np(a, t) {
+function ip(a, t) {
   if (!a) return;
   const e = a._cornerSize || 6;
   a.borderScaleFactor = 1 / t, a.cornerSize = e * (1 / t), a.touchCornerSize = e * 4 * (1 / t), a.setCoords();
 }
-function rp(a) {
+function np(a) {
   const t = jt.get(a);
   t && (t.discardActiveObject(), t.renderAll());
 }
-function op(a) {
+function rp(a) {
   const t = jt.get(a);
   t && (t.clear(), jt.delete(a));
 }
-function ap(a, t) {
+function op(a, t) {
   return new Pt(a, { scaleX: t, scaleY: t });
 }
 function zr(a, t) {
@@ -22377,27 +22373,27 @@ function zr(a, t) {
   const { left: e, top: s, scaleX: i, scaleY: n, width: r, height: o } = a, h = t.x * r * i, l = t.y * o * n;
   a.set({ left: e - h, top: s - l });
 }
-function hp(a, t, e) {
+function ap(a, t, e) {
   const s = a.type;
   return {
-    "application/pdf": lp,
+    "application/pdf": hp,
     "image/png": Za,
     "image/jpeg": Za
   }[s]?.(a, t, e) ?? Promise.reject(new Error(`Unsupported ${s} file type.`));
 }
-async function lp(a, t, e) {
-  const s = await qg(a);
+async function hp(a, t, e) {
+  const s = await $g(a);
   if (!s) return;
-  const i = Zg(a, s), n = await Kl({ page: 1, PDFBase64: s, scale: 0.8, password: t }, e);
+  const i = Jg(a, s), n = await Kl({ page: 1, PDFBase64: s, scale: 0.8, password: t }, e);
   return { ...i, pages: n };
 }
 function Kl(a, t) {
-  return Kg(a, t).then(({ canvas: e, pages: s }) => (e && t && tp(t, e), s));
+  return qg(a, t).then(({ canvas: e, pages: s }) => (e && t && Qg(t, e), s));
 }
 async function Za(a, t, e) {
-  return await ep(a, e);
+  return await tp(a, e);
 }
-function cp(a, t) {
+function lp(a, t) {
   const e = jt.get(a);
   if (!e) return;
   const s = e.getActiveObject();
@@ -22405,7 +22401,7 @@ function cp(a, t) {
     i.set(t);
   }) : s.set(t), e.renderAll());
 }
-async function up(a, t) {
+async function cp(a, t) {
   const e = jt.get(a);
   if (!e) return;
   const s = e?.getActiveObject();
@@ -22415,7 +22411,7 @@ async function up(a, t) {
     e.add(n), t(e, n);
   }) : (e.add(i), t(e, i)), zr(i, { x: -0.1, y: -0.1 }), e.setActiveObject(i);
 }
-function dp(a) {
+function up(a) {
   const t = jt.get(a);
   if (!t) return;
   const e = t.getActiveObject();
@@ -22423,7 +22419,7 @@ function dp(a) {
     t.remove(s);
   }), t.discardActiveObject()) : t.remove(e));
 }
-function fp(a) {
+function dp(a) {
   const {
     id: t = "",
     selectionOptions: e,
@@ -22435,7 +22431,7 @@ function fp(a) {
   } = a || {}, h = ws(null), l = ws(null), c = ws(1), u = ws({ ...hc });
   function d() {
     if (!t || jt.has(t)) return;
-    const O = Jg(t);
+    const O = Kg(t);
     return O.on("selection:created", (D) => {
       if (r?.(D), D.selected.length <= 1) return;
       const z = O.getActiveObject();
@@ -22445,7 +22441,7 @@ function fp(a) {
     }), s && O.on("mouse:down", s), i && O.on("mouse:move", i), n && O.on("mouse:up", n), O;
   }
   function f(O, D) {
-    return hp(O, D, t);
+    return ap(O, D, t);
   }
   function g(O) {
     return Kl(O, t);
@@ -22478,7 +22474,7 @@ function fp(a) {
     uuid: M = Date.now()
   }) {
     if (O.getActiveObjects().length > 1 || h.current?.stroke === `${z}-${M}`) return;
-    const W = await Qg(u.current, M, z);
+    const W = await Zg(u.current, M, z);
     T(O), h.current = W, l.current = D, _(O, D, M), S(c.current, !0), W && O.add(W);
   }
   function _(O, D, z) {
@@ -22497,7 +22493,7 @@ function fp(a) {
   }
   function S(O, D = !1) {
     const z = jt.get(t);
-    c.current = O, z && (np(l.current, O), ip(l.current, O, h.current), !D && z.renderAll());
+    c.current = O, z && (ip(l.current, O), sp(l.current, O, h.current), !D && z.renderAll());
   }
   function A(O) {
     if (!O) return;
@@ -22509,19 +22505,19 @@ function fp(a) {
     l.current = null, h.current && (O.remove(h.current), h.current = null);
   }
   function k() {
-    rp(t);
+    np(t);
   }
   function P() {
-    op(t);
+    rp(t);
   }
   function j(O) {
-    cp(t, O);
+    lp(t, O);
   }
   function F() {
-    return up(t, v);
+    return cp(t, v);
   }
   function I() {
-    dp(t);
+    up(t);
   }
   return {
     createCanvas: d,
@@ -22539,14 +22535,14 @@ function fp(a) {
     deleteActiveFabric: I
   };
 }
-function gp(a) {
-  const t = ws(0), e = Yg(() => {
+function fp(a) {
+  const t = ws(0), e = Ug(() => {
     t.current !== window.innerWidth && (t.current = window.innerWidth, a());
   });
   Js(() => (window.addEventListener("resize", e), () => window.removeEventListener("resize", e)), []);
 }
-const vp = Ql(pp);
-function pp({
+const bp = Ql(gp);
+function gp({
   file: a,
   page: t = 1,
   canvasId: e = "PDF-canvas",
@@ -22582,7 +22578,7 @@ function pp({
     setCloseSvgOptions: ot,
     copyActiveFabric: lt,
     deleteActiveFabric: E
-  } = fp({
+  } = dp({
     id: T,
     selectionOptions: P,
     pointerDown: b,
@@ -22591,7 +22587,7 @@ function pp({
     selectionCreated: y,
     selectionCleared: _
   });
-  gp(st);
+  fp(st);
   async function H() {
     globalThis.requestAnimationFrame(async () => {
       if (j(), a.PDFBase64.startsWith("data:image") || a.canvas) {
@@ -22656,7 +22652,7 @@ function pp({
   );
 }
 export {
-  vp as default,
-  hp as loadFile,
-  fp as useFabric
+  bp as default,
+  ap as loadFile,
+  dp as useFabric
 };