@pixldocs/canvas-renderer 0.5.240 → 0.5.241

package/dist/{index-DBOS1ouN.cjs → index-BRI84Wy6.cjs}

@@ -1027,7 +1027,7 @@ const defaultProjectSettings = {
   snapToGrid: false,
   gridSize: 20,
   snapToGuides: true,
-  snapThreshold: 5
+  snapThreshold: 8
 };
 const defaultPageSettings = {
   backgroundColor: "#ffffff"
@@ -5755,7 +5755,7 @@ function getObjectSnapPoints(obj) {
 }
 function calculateSnapGuides(movingObj, canvas, canvasWidth, canvasHeight, snapToGuides, snapThreshold) {
   if (!snapToGuides) return { guides: [], snapDx: 0, snapDy: 0 };
-  const threshold = snapThreshold || 5;
+  const threshold = snapThreshold || 8;
   const newGuides = [];
   const horizontalSnaps = [];
   const verticalSnaps = [];
@@ -5817,13 +5817,115 @@ function calculateSnapGuides(movingObj, canvas, canvasWidth, canvasHeight, snapT
     verticalSnaps.sort((a, b) => a.distance - b.distance);
     const bestSnap = verticalSnaps[0];
     snapDx = bestSnap.delta;
-    newGuides.push({ ...bestSnap.guide, distance: Math.round(bestSnap.distance) });
+    newGuides.push({ ...bestSnap.guide, kind: "alignment" });
   }
   if (horizontalSnaps.length > 0) {
     horizontalSnaps.sort((a, b) => a.distance - b.distance);
     const bestSnap = horizontalSnaps[0];
     snapDy = bestSnap.delta;
-    newGuides.push({ ...bestSnap.guide, distance: Math.round(bestSnap.distance) });
+    newGuides.push({ ...bestSnap.guide, kind: "alignment" });
+  }
+  const projectedLeft = moving.left + snapDx;
+  const projectedRight = moving.right + snapDx;
+  moving.centerX + snapDx;
+  const projectedTop = moving.top + snapDy;
+  const projectedBottom = moving.bottom + snapDy;
+  moving.centerY + snapDy;
+  if (snapDx === 0) {
+    let bestPair = null;
+    for (const a of allObjects) {
+      const A = getObjectSnapPoints(a);
+      if (A.right > projectedLeft) continue;
+      if (A.bottom < projectedTop || A.top > projectedBottom) continue;
+      for (const b of allObjects) {
+        if (b === a) continue;
+        const B = getObjectSnapPoints(b);
+        if (B.left < projectedRight) continue;
+        if (B.bottom < projectedTop || B.top > projectedBottom) continue;
+        const gapL = projectedLeft - A.right;
+        const gapR = B.left - projectedRight;
+        const diff = gapR - gapL;
+        const absDiff = Math.abs(diff);
+        if (absDiff < threshold && (!bestPair || absDiff < bestPair.absDiff)) {
+          bestPair = { A, B, delta: diff / 2, absDiff };
+        }
+      }
+    }
+    if (bestPair) {
+      snapDx = bestPair.delta;
+      const newLeft = moving.left + snapDx;
+      const newRight = moving.right + snapDx;
+      const equalGap = Math.round(newLeft - bestPair.A.right);
+      const bracketY = (Math.max(bestPair.A.top, projectedTop, bestPair.B.top) + Math.min(bestPair.A.bottom, projectedBottom, bestPair.B.bottom)) / 2;
+      if (equalGap > 0) {
+        newGuides.push({
+          type: "horizontal",
+          position: bracketY,
+          kind: "gap",
+          gap: equalGap,
+          start: bestPair.A.right,
+          end: newLeft,
+          bracketAt: bracketY
+        });
+        newGuides.push({
+          type: "horizontal",
+          position: bracketY,
+          kind: "gap",
+          gap: equalGap,
+          start: newRight,
+          end: bestPair.B.left,
+          bracketAt: bracketY
+        });
+      }
+    }
+  }
+  if (snapDy === 0) {
+    let bestPair = null;
+    for (const a of allObjects) {
+      const A = getObjectSnapPoints(a);
+      if (A.bottom > projectedTop) continue;
+      if (A.right < projectedLeft || A.left > projectedRight) continue;
+      for (const b of allObjects) {
+        if (b === a) continue;
+        const B = getObjectSnapPoints(b);
+        if (B.top < projectedBottom) continue;
+        if (B.right < projectedLeft || B.left > projectedRight) continue;
+        const gapT = projectedTop - A.bottom;
+        const gapB = B.top - projectedBottom;
+        const diff = gapB - gapT;
+        const absDiff = Math.abs(diff);
+        if (absDiff < threshold && (!bestPair || absDiff < bestPair.absDiff)) {
+          bestPair = { A, B, delta: diff / 2, absDiff };
+        }
+      }
+    }
+    if (bestPair) {
+      snapDy = bestPair.delta;
+      const newTop = moving.top + snapDy;
+      const newBottom = moving.bottom + snapDy;
+      const equalGap = Math.round(newTop - bestPair.A.bottom);
+      const bracketX = (Math.max(bestPair.A.left, projectedLeft, bestPair.B.left) + Math.min(bestPair.A.right, projectedRight, bestPair.B.right)) / 2;
+      if (equalGap > 0) {
+        newGuides.push({
+          type: "vertical",
+          position: bracketX,
+          kind: "gap",
+          gap: equalGap,
+          start: bestPair.A.bottom,
+          end: newTop,
+          bracketAt: bracketX
+        });
+        newGuides.push({
+          type: "vertical",
+          position: bracketX,
+          kind: "gap",
+          gap: equalGap,
+          start: newBottom,
+          end: bestPair.B.top,
+          bracketAt: bracketX
+        });
+      }
+    }
   }
   return { guides: newGuides, snapDx, snapDy };
 }
@@ -9957,6 +10059,7 @@ const PageCanvas = react.forwardRef(
     const hasClearedCachesBeforeFirstSyncRef = react.useRef(false);
     const [guides, setGuides] = react.useState([]);
     const [gridResizeLabel, setGridResizeLabel] = react.useState(null);
+    const [hoverBounds, setHoverBounds] = react.useState(null);
     const [rotationLabel, setRotationLabel] = react.useState(null);
     const [sizeLabel, setSizeLabel] = react.useState(null);
     const [ready, setReady] = react.useState(false);
@@ -11298,6 +11401,26 @@ const PageCanvas = react.forwardRef(
         if (editLockRef.current) return;
         const t = opt.target;
         const tid = t ? getObjectId(t) : null;
+        try {
+          const activeIds = new Set(selectedIdsRef.current);
+          const isHoveringSelected = !!(tid && activeIds.has(tid));
+          if (t && tid && tid !== "__background__" && !isHoveringSelected) {
+            const outer = t.group && !t.group.__pixldocsGroupSelection ? t.group : t;
+            outer.setCoords();
+            const br = outer.getBoundingRect();
+            setHoverBounds({
+              left: br.left,
+              top: br.top,
+              width: br.width,
+              height: br.height,
+              angle: 0
+            });
+          } else {
+            setHoverBounds(null);
+          }
+        } catch {
+          setHoverBounds(null);
+        }
         if (t && tid && tid !== "__background__") return;
         try {
           const pointer = fabricCanvas.getPointer(opt.e);
@@ -11310,6 +11433,9 @@ const PageCanvas = react.forwardRef(
           fabricCanvas.defaultCursor = "default";
         }
       });
+      fabricCanvas.on("mouse:out", () => {
+        setHoverBounds(null);
+      });
       fabricCanvas.on("mouse:down", (ev) => {
         if (fabricCanvas._currentTransform) {
           lockEdits();
@@ -11673,6 +11799,7 @@ const PageCanvas = react.forwardRef(
         const snapTarget = fabricCanvas.getActiveObject() ?? obj;
         const { guides: newGuides, snapDx, snapDy } = calculateSnapGuidesCallback(snapTarget);
         setGuides(newGuides);
+        setHoverBounds(null);
         if (snapDx !== 0 || snapDy !== 0) {
           snapTarget.set({ left: (snapTarget.left ?? 0) + snapDx, top: (snapTarget.top ?? 0) + snapDy });
         }
@@ -15160,6 +15287,59 @@ const PageCanvas = react.forwardRef(
           ),
           sectionsOverlay,
           groupBoundsOverlay,
+          canvas.projectSettings.showGrid && (canvas.projectSettings.gridSize ?? 0) > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: { width: scaledWidth, height: scaledHeight },
+              viewBox: `0 0 ${canvasWidth} ${canvasHeight}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "pattern",
+                  {
+                    id: `pixldocs-grid-${pageId}`,
+                    width: canvas.projectSettings.gridSize,
+                    height: canvas.projectSettings.gridSize,
+                    patternUnits: "userSpaceOnUse",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: `M ${canvas.projectSettings.gridSize} 0 L 0 0 0 ${canvas.projectSettings.gridSize}`,
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: 0.5,
+                        opacity: 0.18,
+                        className: "text-foreground"
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { width: canvasWidth, height: canvasHeight, fill: `url(#pixldocs-grid-${pageId})` })
+              ]
+            }
+          ),
+          hoverBounds && !guides.length && /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: { width: scaledWidth, height: scaledHeight },
+              viewBox: `0 0 ${canvasWidth} ${canvasHeight}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: hoverBounds.left,
+                  y: hoverBounds.top,
+                  width: hoverBounds.width,
+                  height: hoverBounds.height,
+                  fill: "none",
+                  stroke: "hsl(256 80% 58%)",
+                  strokeWidth: 1,
+                  strokeDasharray: "0",
+                  opacity: 0.65
+                }
+              )
+            }
+          ),
           guides.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -15169,11 +15349,46 @@ const PageCanvas = react.forwardRef(
               children: (() => {
                 const seen = /* @__PURE__ */ new Set();
                 return guides.filter((guide) => {
+                  if (guide.kind === "gap") return true;
                   const key = `${guide.type}-${guide.position.toFixed(1)}`;
                   if (seen.has(key)) return false;
                   seen.add(key);
                   return true;
                 }).map((guide, i) => {
+                  if (guide.kind === "gap" && guide.gap != null && guide.start != null && guide.end != null) {
+                    const gapColor = "#ec4899";
+                    const label = `${guide.gap}`;
+                    const labelW2 = Math.max(22, label.length * 7 + 8);
+                    if (guide.type === "horizontal") {
+                      const y = guide.bracketAt ?? guide.position;
+                      const x1 = guide.start;
+                      const x2 = guide.end;
+                      const mid = (x1 + x2) / 2;
+                      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1, y1: y, x2, y2: y, stroke: gapColor, strokeWidth: 1 }),
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1, y1: y - 4, x2: x1, y2: y + 4, stroke: gapColor, strokeWidth: 1 }),
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x2, y1: y - 4, x2, y2: y + 4, stroke: gapColor, strokeWidth: 1 }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${mid}, ${y - 12})`, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: -labelW2 / 2, y: -9, width: labelW2, height: 16, rx: 4, fill: gapColor }),
+                          /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 3, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 600, children: label })
+                        ] })
+                      ] }, i);
+                    } else {
+                      const x = guide.bracketAt ?? guide.position;
+                      const y1 = guide.start;
+                      const y2 = guide.end;
+                      const mid = (y1 + y2) / 2;
+                      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, y1, x2: x, y2, stroke: gapColor, strokeWidth: 1 }),
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - 4, y1, x2: x + 4, y2: y1, stroke: gapColor, strokeWidth: 1 }),
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - 4, y1: y2, x2: x + 4, y2, stroke: gapColor, strokeWidth: 1 }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x + 12}, ${mid})`, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: -labelW2 / 2, y: -9, width: labelW2, height: 16, rx: 4, fill: gapColor }),
+                          /* @__PURE__ */ jsxRuntime.jsx("text", { x: 0, y: 3, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 600, children: label })
+                        ] })
+                      ] }, i);
+                    }
+                  }
                   const isElementRelative = guide.start !== void 0 && guide.end !== void 0;
                   const isActive2 = guide.active === true;
                   const strokeColor = isActive2 ? "#22c55e" : isElementRelative ? "#f43f5e" : "#3b82f6";
@@ -21168,9 +21383,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.240";
+const resolvedPackageVersion = "0.5.241";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.240";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.241";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -21917,7 +22132,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 Promise.resolve().then(() => require("./vectorPdfExport-D1yCN3sm.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BQhOl3Zh.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -24237,7 +24452,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-D1yCN3sm.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BQhOl3Zh.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -24634,4 +24849,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-DBOS1ouN.cjs.map
+//# sourceMappingURL=index-BRI84Wy6.cjs.map