@diegotsi/flint-react 0.3.5 → 0.4.1

package/dist/index.cjs

@@ -7907,23 +7907,33 @@ function ScreenAnnotator({ zIndex: zIndex2, onCapture, onCancel }) {
     );
     const unpatch = patchGetComputedStyle();
     try {
-      const canvas = await html2canvas_esm_default(document.body, {
+      const fullCanvas = await html2canvas_esm_default(document.body, {
         useCORS: true,
         logging: false,
         allowTaint: true,
         scale: dpr,
-        x: sx,
-        y: sy,
-        width: vw,
-        height: vh,
-        windowWidth: vw,
-        windowHeight: vh,
-        scrollX: -sx,
-        scrollY: -sy,
+        scrollX: 0,
+        scrollY: 0,
         ignoreElements: (el) => el === overlayRef.current
       });
       unpatch();
+      const canvas = document.createElement("canvas");
+      canvas.width = vw * dpr;
+      canvas.height = vh * dpr;
       const ctx = canvas.getContext("2d");
+      ctx.drawImage(
+        fullCanvas,
+        sx * dpr,
+        sy * dpr,
+        vw * dpr,
+        vh * dpr,
+        // source: viewport region from full capture
+        0,
+        0,
+        vw * dpr,
+        vh * dpr
+        // dest: fill the cropped canvas
+      );
       ctx.fillStyle = "rgba(255,200,0,0.25)";
       ctx.fillRect(finalRect.x * dpr, finalRect.y * dpr, finalRect.w * dpr, finalRect.h * dpr);
       ctx.strokeStyle = "#f97316";
@@ -8415,7 +8425,7 @@ function FlintModal({
         onCancel: () => setAnnotating(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: overlayRef, style: { ...overlayStyle, opacity: annotating ? 0 : 1, pointerEvents: annotating ? "none" : "auto" }, onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "flint-modal-title", children: [
+    !annotating && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: overlayRef, style: overlayStyle, onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "flint-modal-title", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ModalHeader,
         {