@pixldocs/canvas-renderer 0.5.375 → 0.5.377

package/dist/{index-B0HRibrY.js → index-iKxOfMVS.js}

@@ -10676,12 +10676,57 @@ try {
       if (p < 1) ctx.stroke();
       ctx.restore();
     };
-    const installPillRenders = (controls) => {
-      var _a2;
-      const CUR_SIZE = 22;
-      const HOT = Math.round(CUR_SIZE / 2);
-      const makeCursor = (angleDeg) => {
-        const svg = `<?xml version="1.0" encoding="UTF-8"?>
+    const ROTATE_PATHS_2D = [
+      new Path2D("M22 12l-3 3-3-3"),
+      new Path2D("M2 12l3-3 3 3"),
+      new Path2D("M19.016 14v-1.95A7.05 7.05 0 0 0 8 6.22"),
+      new Path2D("M16.016 17.845A7.05 7.05 0 0 1 5 12.015V10"),
+      new Path2D("M5 10V9"),
+      new Path2D("M19 15v-1")
+    ];
+    const renderRotateHandle = (ctx, left, top, _styleOverride, fabricObject) => {
+      var _a2, _b2;
+      const action = (_b2 = (_a2 = fabricObject.canvas) == null ? void 0 : _a2._currentTransform) == null ? void 0 : _b2.action;
+      if (action === "drag" && fabricObject.__pixldocsDragMoved) return;
+      const scale = getVisualScale(fabricObject);
+      const p = getHoverProgress(fabricObject, "mtr");
+      const r = 11 * scale;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(left, top, r, 0, Math.PI * 2);
+      ctx.closePath();
+      ctx.fillStyle = lerpFill(p);
+      ctx.strokeStyle = `rgba(15, 23, 42, ${0.18 * (1 - p)})`;
+      ctx.lineWidth = 0.75 * (1 - p);
+      ctx.shadowColor = "rgba(15, 23, 42, 0.4)";
+      ctx.shadowBlur = 10;
+      ctx.shadowOffsetY = 2;
+      ctx.fill();
+      if (p < 1) ctx.stroke();
+      ctx.shadowColor = "transparent";
+      ctx.shadowBlur = 0;
+      ctx.shadowOffsetY = 0;
+      const iconColor = p > 0.5 ? "#ffffff" : "rgba(15, 23, 42, 0.85)";
+      const target = r * 1.55;
+      const s = target / 24;
+      ctx.translate(left, top);
+      ctx.scale(s, s);
+      ctx.translate(-12, -12);
+      ctx.strokeStyle = iconColor;
+      ctx.fillStyle = iconColor;
+      ctx.lineJoin = "miter";
+      ctx.miterLimit = 4;
+      ctx.lineWidth = 1 / s;
+      ROTATE_PATHS_2D.forEach((p2d, index) => {
+        ctx.lineCap = index >= 4 ? "round" : "square";
+        ctx.stroke(p2d);
+      });
+      ctx.restore();
+    };
+    const CUR_SIZE = 22;
+    const HOT = Math.round(CUR_SIZE / 2);
+    const makeCursor = (angleDeg) => {
+      const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="${CUR_SIZE}" height="${CUR_SIZE}" viewBox="0 0 22 22">
   <g transform="rotate(${angleDeg} 11 11)" fill="none" stroke="#000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
     <path d="M2.5 11 L19.5 11" stroke="#fff" stroke-width="3.2"/>
@@ -10692,88 +10737,95 @@ try {
     <path d="M17 8.5 L19.5 11 L17 13.5"/>
   </g>
 </svg>`;
-        const encoded = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
-        const fallback = angleDeg % 180 === 0 ? "ew-resize" : angleDeg % 180 === 90 ? "ns-resize" : angleDeg === 45 || angleDeg === 225 ? "nwse-resize" : "nesw-resize";
-        return `url("data:image/svg+xml;utf8,${encoded}") ${HOT} ${HOT}, ${fallback}`;
-      };
-      const cursorFor = {
-        ml: makeCursor(0),
-        mr: makeCursor(0),
-        mt: makeCursor(90),
-        mb: makeCursor(90),
-        tl: makeCursor(45),
-        br: makeCursor(45),
-        tr: makeCursor(135),
-        bl: makeCursor(135)
-      };
-      const ROTATE_ICON_PATH = "M505.4 122.5l-92.2-62.7c-6.7-4.5-15.6-3.1-20.7 3.1l-69.2 87.4c-5.2 6.6-4.1 16.1 2.5 21.3s16.1 4.1 21.3-2.5l50.4-63.8c2.9 14.6 4.3 29.4 4.3 44.3 0 125.2-101.9 227-227 227-45.8 0-90.5-13.8-128.2-39.6l79-27.8c8-2.5 12.4-11 9.9-18.9s-11-12.4-18.9-9.9c-.3.1-.7.2-1 .4l-105.2 37c-2 .7-3.9 1.8-5.4 3.3-4.2 3.8-6 9.7-4.5 15.2l29.3 107.5c1.8 6.6 7.8 11.1 14.6 11.1 1.4 0 2.7-.2 4-.5 8.1-2.2 12.8-10.5 10.6-18.6l-18-66.4c40.3 24.6 86.6 37.5 133.8 37.5 68.3.2 133.8-27 181.9-75.4 48.4-48.1 75.5-113.7 75.4-181.9 0-14.3-1.2-28.6-3.5-42.8l59.8 40.7c7.1 4.4 16.4 2.2 20.8-4.9 4.1-6.6 2.5-15.4-3.8-20.1z";
-      const CUR_R_SIZE = 18;
-      const HOT_R = Math.round(CUR_R_SIZE / 2);
-      const makeRotateCursor = (angleDeg) => {
-        const a = ((angleDeg + 215) % 360 + 360) % 360;
-        const halo = `<path d="${ROTATE_ICON_PATH}" fill="#fff" stroke="#fff" stroke-width="40" stroke-linejoin="round"/>`;
-        const fg = `<path d="${ROTATE_ICON_PATH}" fill="#0f172a" stroke="#0f172a" stroke-width="6" stroke-linejoin="round"/>`;
-        const svg = `<?xml version="1.0" encoding="UTF-8"?>
+      const encoded = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
+      const fallback = angleDeg % 180 === 0 ? "ew-resize" : angleDeg % 180 === 90 ? "ns-resize" : angleDeg === 45 || angleDeg === 225 ? "nwse-resize" : "nesw-resize";
+      return `url("data:image/svg+xml;utf8,${encoded}") ${HOT} ${HOT}, ${fallback}`;
+    };
+    const cursorFor = {
+      ml: makeCursor(0),
+      mr: makeCursor(0),
+      mt: makeCursor(90),
+      mb: makeCursor(90),
+      tl: makeCursor(45),
+      br: makeCursor(45),
+      tr: makeCursor(135),
+      bl: makeCursor(135)
+    };
+    const ROTATE_ICON_PATH = "M505.4 122.5l-92.2-62.7c-6.7-4.5-15.6-3.1-20.7 3.1l-69.2 87.4c-5.2 6.6-4.1 16.1 2.5 21.3s16.1 4.1 21.3-2.5l50.4-63.8c2.9 14.6 4.3 29.4 4.3 44.3 0 125.2-101.9 227-227 227-45.8 0-90.5-13.8-128.2-39.6l79-27.8c8-2.5 12.4-11 9.9-18.9s-11-12.4-18.9-9.9c-.3.1-.7.2-1 .4l-105.2 37c-2 .7-3.9 1.8-5.4 3.3-4.2 3.8-6 9.7-4.5 15.2l29.3 107.5c1.8 6.6 7.8 11.1 14.6 11.1 1.4 0 2.7-.2 4-.5 8.1-2.2 12.8-10.5 10.6-18.6l-18-66.4c40.3 24.6 86.6 37.5 133.8 37.5 68.3.2 133.8-27 181.9-75.4 48.4-48.1 75.5-113.7 75.4-181.9 0-14.3-1.2-28.6-3.5-42.8l59.8 40.7c7.1 4.4 16.4 2.2 20.8-4.9 4.1-6.6 2.5-15.4-3.8-20.1z";
+    const CUR_R_SIZE = 18;
+    const HOT_R = Math.round(CUR_R_SIZE / 2);
+    const makeRotateCursor = (angleDeg) => {
+      const a = ((angleDeg + 215) % 360 + 360) % 360;
+      const halo = `<path d="${ROTATE_ICON_PATH}" fill="#fff" stroke="#fff" stroke-width="40" stroke-linejoin="round"/>`;
+      const fg = `<path d="${ROTATE_ICON_PATH}" fill="#0f172a" stroke="#0f172a" stroke-width="6" stroke-linejoin="round"/>`;
+      const svg = `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="${CUR_R_SIZE}" height="${CUR_R_SIZE}" viewBox="0 0 512 512">
   <g transform="rotate(${a} 256 256)">${halo}${fg}</g>
 </svg>`;
-        const encoded = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
-        return `url("data:image/svg+xml;utf8,${encoded}") ${HOT_R} ${HOT_R}, crosshair`;
-      };
-      const rotateCursorCache = {};
-      const getRotateCursor = (fabricObject) => {
-        let objAngle = 0;
-        try {
-          objAngle = typeof (fabricObject == null ? void 0 : fabricObject.getTotalAngle) === "function" ? fabricObject.getTotalAngle() : (fabricObject == null ? void 0 : fabricObject.angle) ?? 0;
-        } catch {
-          objAngle = 0;
-        }
-        let a = (objAngle % 360 + 360) % 360;
-        a = Math.round(a / 15) * 15;
-        if (a === 360) a = 0;
-        if (!rotateCursorCache[a]) rotateCursorCache[a] = makeRotateCursor(a);
-        return rotateCursorCache[a];
-      };
+      const encoded = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
+      return `url("data:image/svg+xml;utf8,${encoded}") ${HOT_R} ${HOT_R}, crosshair`;
+    };
+    const rotateCursorCache = {};
+    const getRotateCursor = (fabricObject) => {
+      let objAngle = 0;
+      try {
+        objAngle = typeof (fabricObject == null ? void 0 : fabricObject.getTotalAngle) === "function" ? fabricObject.getTotalAngle() : (fabricObject == null ? void 0 : fabricObject.angle) ?? 0;
+      } catch {
+        objAngle = 0;
+      }
+      let a = (objAngle % 360 + 360) % 360;
+      a = Math.round(a / 15) * 15;
+      if (a === 360) a = 0;
+      if (!rotateCursorCache[a]) rotateCursorCache[a] = makeRotateCursor(a);
+      return rotateCursorCache[a];
+    };
+    const baseAngleFor = {
+      ml: 0,
+      mr: 0,
+      mt: 90,
+      mb: 90,
+      tl: 45,
+      br: 45,
+      tr: 135,
+      bl: 135
+    };
+    const cursorCache = {};
+    const getRotatedCursor = (key, fabricObject) => {
+      const base = baseAngleFor[key];
+      if (base === void 0) return cursorFor[key];
+      let objAngle = 0;
+      try {
+        objAngle = typeof (fabricObject == null ? void 0 : fabricObject.getTotalAngle) === "function" ? fabricObject.getTotalAngle() : (fabricObject == null ? void 0 : fabricObject.angle) ?? 0;
+      } catch {
+        objAngle = 0;
+      }
+      let a = ((base + objAngle) % 180 + 180) % 180;
+      a = Math.round(a / 15) * 15;
+      if (a === 180) a = 0;
+      if (!cursorCache[a]) cursorCache[a] = makeCursor(a);
+      return cursorCache[a];
+    };
+    const inferControlKey = (control) => {
+      if (!control) return null;
+      const x = Number(control.x ?? 0);
+      const y = Number(control.y ?? 0);
+      const atLeftRight = Math.abs(Math.abs(x) - 0.5) < 1e-3;
+      const atTopBottom = Math.abs(Math.abs(y) - 0.5) < 1e-3;
+      const atCenterX = Math.abs(x) < 1e-3;
+      const atCenterY = Math.abs(y) < 1e-3;
+      if (atLeftRight && atCenterY) return x < 0 ? "ml" : "mr";
+      if (atCenterX && atTopBottom) return y < 0 ? "mt" : "mb";
+      if (atLeftRight && atTopBottom) return `${y < 0 ? "t" : "b"}${x < 0 ? "l" : "r"}`;
+      return null;
+    };
+    const installPillRenders = (controls) => {
+      var _a2;
       const MOVE_PATHS_2D = [
         new Path2D("M12 3L12.3648 2.65803L12 2.26894L11.6352 2.65803L12 3ZM11.5 9C11.5 9.27614 11.7239 9.5 12 9.5C12.2761 9.5 12.5 9.27614 12.5 9H11.5ZM15.3648 5.85803L12.3648 2.65803L11.6352 3.34197L14.6352 6.54197L15.3648 5.85803ZM11.6352 2.65803L8.63523 5.85803L9.36477 6.54197L12.3648 3.34197L11.6352 2.65803ZM11.5 3V9H12.5V3H11.5Z"),
         new Path2D("M21 12L21.342 12.3648L21.7311 12L21.342 11.6352L21 12ZM15 11.5C14.7239 11.5 14.5 11.7239 14.5 12C14.5 12.2761 14.7239 12.5 15 12.5L15 11.5ZM18.142 15.3648L21.342 12.3648L20.658 11.6352L17.458 14.6352L18.142 15.3648ZM21.342 11.6352L18.142 8.63523L17.458 9.36477L20.658 12.3648L21.342 11.6352ZM21 11.5L15 11.5L15 12.5L21 12.5L21 11.5Z"),
         new Path2D("M12 21L12.3648 21.342L12 21.7311L11.6352 21.342L12 21ZM11.5 15C11.5 14.7239 11.7239 14.5 12 14.5C12.2761 14.5 12.5 14.7239 12.5 15H11.5ZM15.3648 18.142L12.3648 21.342L11.6352 20.658L14.6352 17.458L15.3648 18.142ZM11.6352 21.342L8.63523 18.142L9.36477 17.458L12.3648 20.658L11.6352 21.342ZM11.5 21V15H12.5V21H11.5Z"),
         new Path2D("M3 12L2.65803 12.3648L2.26894 12L2.65803 11.6352L3 12ZM9 11.5C9.27614 11.5 9.5 11.7239 9.5 12C9.5 12.2761 9.27614 12.5 9 12.5L9 11.5ZM5.85803 15.3648L2.65803 12.3648L3.34197 11.6352L6.54197 14.6352L5.85803 15.3648ZM2.65803 11.6352L5.85803 8.63523L6.54197 9.36477L3.34197 12.3648L2.65803 11.6352ZM3 11.5L9 11.5L9 12.5L3 12.5L3 11.5Z")
       ];
-      const ROTATE_PATHS_2D = [
-        new Path2D("M22 12l-3 3-3-3"),
-        new Path2D("M2 12l3-3 3 3"),
-        new Path2D("M19.016 14v-1.95A7.05 7.05 0 0 0 8 6.22"),
-        new Path2D("M16.016 17.845A7.05 7.05 0 0 1 5 12.015V10"),
-        new Path2D("M5 10V9"),
-        new Path2D("M19 15v-1")
-      ];
-      const baseAngleFor = {
-        ml: 0,
-        mr: 0,
-        mt: 90,
-        mb: 90,
-        tl: 45,
-        br: 45,
-        tr: 135,
-        bl: 135
-      };
-      const cursorCache = {};
-      const getRotatedCursor = (key, fabricObject) => {
-        const base = baseAngleFor[key];
-        if (base === void 0) return cursorFor[key];
-        let objAngle = 0;
-        try {
-          objAngle = typeof (fabricObject == null ? void 0 : fabricObject.getTotalAngle) === "function" ? fabricObject.getTotalAngle() : (fabricObject == null ? void 0 : fabricObject.angle) ?? 0;
-        } catch {
-          objAngle = 0;
-        }
-        let a = ((base + objAngle) % 180 + 180) % 180;
-        a = Math.round(a / 15) * 15;
-        if (a === 180) a = 0;
-        if (!cursorCache[a]) cursorCache[a] = makeCursor(a);
-        return cursorCache[a];
-      };
       const sides = [
         ["ml", "vertical"],
         ["mr", "vertical"],
@@ -10828,48 +10880,7 @@ try {
           }
           return cursor;
         };
-        mtr.render = (ctx, left, top, _styleOverride, fabricObject) => {
-          var _a3, _b2;
-          const action = (_b2 = (_a3 = fabricObject.canvas) == null ? void 0 : _a3._currentTransform) == null ? void 0 : _b2.action;
-          if (action === "drag" && fabricObject.__pixldocsDragMoved) return;
-          const scale = getVisualScale(fabricObject);
-          const p = getHoverProgress(fabricObject, "mtr");
-          const r = 11 * scale;
-          ctx.save();
-          ctx.beginPath();
-          ctx.arc(left, top, r, 0, Math.PI * 2);
-          ctx.closePath();
-          ctx.fillStyle = lerpFill(p);
-          ctx.strokeStyle = `rgba(15, 23, 42, ${0.18 * (1 - p)})`;
-          ctx.lineWidth = 0.75 * (1 - p);
-          ctx.shadowColor = "rgba(15, 23, 42, 0.4)";
-          ctx.shadowBlur = 10;
-          ctx.shadowOffsetY = 2;
-          ctx.fill();
-          if (p < 1) ctx.stroke();
-          ctx.shadowColor = "transparent";
-          ctx.shadowBlur = 0;
-          ctx.shadowOffsetY = 0;
-          const iconColor = p > 0.5 ? "#ffffff" : "rgba(15, 23, 42, 0.85)";
-          ctx.strokeStyle = iconColor;
-          ctx.fillStyle = iconColor;
-          ctx.lineJoin = "miter";
-          ctx.miterLimit = 4;
-          {
-            const target = r * 1.55;
-            const s = target / 24;
-            ctx.translate(left, top);
-            ctx.scale(s, s);
-            ctx.translate(-12, -12);
-            ctx.strokeStyle = iconColor;
-            ctx.lineWidth = 1 / s;
-            ROTATE_PATHS_2D.forEach((p2d, index) => {
-              ctx.lineCap = index >= 4 ? "round" : "square";
-              ctx.stroke(p2d);
-            });
-          }
-          ctx.restore();
-        };
+        mtr.render = renderRotateHandle;
       }
       const moveActionHandler = (eventData, transform, x, y) => {
         const target = transform.target;
@@ -10965,6 +10976,8 @@ try {
       const originalControlRender = ControlProto.render;
       ControlProto.render = function(ctx, left, top, styleOverride, fabricObject) {
         const actionName = String(this.actionName ?? "");
+        const isRotateHandle = actionName === "rotate" || Math.abs(Number(this.x ?? 0)) < 1e-3 && Math.abs(Number(this.y ?? 0) + 0.5) < 1e-3 && Number(this.offsetY ?? 0) < 0;
+        if (isRotateHandle) return renderRotateHandle(ctx, left, top, styleOverride, fabricObject);
         if (actionName !== "rotate" && actionName !== "drag") {
           const x = Number(this.x ?? 0);
           const y = Number(this.y ?? 0);
@@ -10989,6 +11002,33 @@ try {
       };
       ControlProto.__pixldocsCanvaRenderFallback = true;
     }
+    if (ControlProto && !ControlProto.__pixldocsCanvaCursorFallback) {
+      const originalCursorHandler = ControlProto.cursorStyleHandler;
+      ControlProto.cursorStyleHandler = function(eventData, control, fabricObject) {
+        const actionName = String(this.actionName ?? (control == null ? void 0 : control.actionName) ?? "");
+        const isRotateHandle = actionName === "rotate" || Math.abs(Number(this.x ?? 0)) < 1e-3 && Math.abs(Number(this.y ?? 0) + 0.5) < 1e-3 && Number(this.offsetY ?? 0) < 0;
+        if (isRotateHandle) {
+          const cursor = getRotateCursor(fabricObject);
+          try {
+            const canvas = fabricObject == null ? void 0 : fabricObject.canvas;
+            if (canvas) canvas.__pixldocsGetRotateCursor = getRotateCursor;
+            const upper = canvas == null ? void 0 : canvas.upperCanvasEl;
+            if (upper) upper.style.cursor = cursor;
+          } catch {
+          }
+          return cursor;
+        }
+        const key = inferControlKey(this);
+        if (key && baseAngleFor[key] !== void 0) {
+          return getRotatedCursor(key, fabricObject);
+        }
+        if (typeof originalCursorHandler === "function") {
+          return originalCursorHandler.call(this, eventData, control, fabricObject);
+        }
+        return this.cursorStyle || "default";
+      };
+      ControlProto.__pixldocsCanvaCursorFallback = true;
+    }
     ensureCanvaControlRenders = (obj) => {
       try {
         if (obj && obj.controls) installPillRenders(obj.controls);
@@ -24710,9 +24750,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.375";
+const resolvedPackageVersion = "0.5.377";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.375";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.377";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -25526,7 +25566,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-BDdjWeve.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-B8ZK-SIt.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -27846,7 +27886,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-BDdjWeve.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-B8ZK-SIt.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -28246,4 +28286,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-B0HRibrY.js.map
+//# sourceMappingURL=index-iKxOfMVS.js.map