@weasel-js/guides 1.14.0 → 1.14.2

package/dist/index.d.ts

@@ -240,8 +240,10 @@ interface GridSnapSourceOptions {
     scopes?: GridScopes;
 }
 /**
- * A grid as snap targets: for each origin or pointer probe, the grid line on
- * either side of it on each axis. Its reach is unlimited and it is a
+ * A grid as snap targets: for each box or pointer probe, the grid line on
+ * either side of it on each axis, so a move lands the drawn box, stroke
+ * included, with an edge or its center on a line; on a turned container's
+ * lattice, which no world-axis box lines up with, its pose origin. Its reach is unlimited and it is a
  * fallback, so it holds every axis no target claims and never displaces one.
  * Its lines are the camera's, carried into the plane a gesture runs in.
  */
@@ -459,8 +461,9 @@ declare function worldUnionOf(scene: Scene<unknown, string, unknown>, ids: Itera
 declare function siblingBounds(scene: Scene<unknown, string, unknown>, ids: readonly NodeId[], opts?: SceneBoundsOptions): Bounds[];
 
 /**
- * Ruler guides as snap targets: each guide within reach of an origin or
- * pointer probe is a line it may land on. Reads `getGuides` every frame, so
+ * Ruler guides as snap targets: each guide within reach of a box or
+ * pointer probe is a line it may land on: a moved box's edges and center,
+ * stroke included. Reads `getGuides` every frame, so
  * a guide added mid-drag counts at once.
  */
 declare function guideSnapSource(getGuides: () => readonly Guide[]): SnapSource;
@@ -506,8 +509,9 @@ interface SpacingSnapSourceOptions {
  * Equal spacing as snap targets, Figma's: on each axis, the positions of the
  * subject's box that make its gap to a neighbor equal one already between
  * two siblings, or center it between its two neighbors. A resize moves only
- * the edges it drags. When the result meets one, it marks every gap of that
- * size, the box's own included.
+ * the sides it drags; on a turned or skewed box, the sides of its
+ * axis-aligned extent the drag moves. When the result meets one, it marks
+ * every gap of that size, the box's own included, where the box lands.
  */
 declare function spacingSnapSource(opts?: SpacingSnapSourceOptions): SnapSource;
 

package/dist/index.js

@@ -333,6 +333,16 @@ function frameLine(frame, axis, offset, near) {
 function landedShift(q, delta) {
   return { x: delta.x - q.delta0.x, y: delta.y - q.delta0.y };
 }
+function sideLine(near, rate, by) {
+  const k = by / (rate.x * rate.x + rate.y * rate.y);
+  return { at: { x: near.x + rate.x * k, y: near.y + rate.y * k }, dirs: [{ x: -rate.y, y: rate.x }] };
+}
+function landedBox(q, delta) {
+  if (q.boxAt) return q.boxAt(delta);
+  if (!q.box) return null;
+  const shift = landedShift(q, delta);
+  return { ...q.box, x: q.box.x + shift.x, y: q.box.y + shift.y };
+}
 
 // src/sources/grid.ts
 function gridSnapSource(opts) {
@@ -369,11 +379,13 @@ function gridSnapSource(opts) {
     id: "grid",
     tier: "fallback",
     reachPx: Infinity,
-    roles: ["origin", "pointer"],
+    roles: ["box", "origin", "pointer"],
     *collect(q) {
       const { pitch, frame } = latticeFor(q);
       const plane = q.plane ?? null;
+      const skip = frame && turns(frame) ? "box" : "origin";
       for (const p of q.probes) {
+        if (p.role === skip) continue;
         if (frame) {
           yield* framedLines(p.id, p.at, pitch, frame, plane);
           continue;
@@ -385,6 +397,16 @@ function gridSnapSource(opts) {
     }
   };
 }
+function turns(frame) {
+  const o = frame.toWorld({ x: 0, y: 0 });
+  const ex = frame.toWorld({ x: 1, y: 0 });
+  const ey = frame.toWorld({ x: 0, y: 1 });
+  const along = (a, axis) => {
+    const d = { x: a.x - o.x, y: a.y - o.y };
+    return axis === "x" ? Math.abs(d.y) <= 1e-9 * Math.abs(d.x) : Math.abs(d.x) <= 1e-9 * Math.abs(d.y);
+  };
+  return !(along(ex, "x") && along(ey, "y") || along(ex, "y") && along(ey, "x"));
+}
 function* framedLines(probe, at, pitch, frame, plane) {
   const local = frame.toLocal(at);
   if (!local) return;
@@ -685,7 +707,7 @@ function siblingBounds(scene, ids, opts = {}) {
 function guideSnapSource(getGuides) {
   return {
     id: "guides",
-    roles: ["origin", "pointer"],
+    roles: ["box", "pointer"],
     *collect(q) {
       const guides = getGuides();
       if (guides.length === 0) return;
@@ -775,7 +797,6 @@ function alignmentSnapSource(opts = {}) {
       const indexes = linesFor(q);
       if (indexes.length === 0) return;
       const reach = q.reachWorld(q.reachPx);
-      const box = q.box ?? null;
       const probes = q.probes.some((p) => p.role === "box") ? q.probes.filter((p) => p.role === "box") : q.probes;
       for (const p of probes) {
         for (const axis of ["x", "y"]) {
@@ -784,7 +805,7 @@ function alignmentSnapSource(opts = {}) {
               yield {
                 probe: p.id,
                 locus: axisLine(axis, g.offset, p.at),
-                mark: (delta) => lineMark(g, extentAcross(p, box, axis, landedShift(q, delta), q.edges), opts.color)
+                mark: (delta) => lineMark(g, extentAcross(q, p, axis, delta), opts.color)
               };
             }
           }
@@ -793,15 +814,25 @@ function alignmentSnapSource(opts = {}) {
     }
   };
 }
-function extentAcross(p, box, axis, shift, edges = { x: "both", y: "both" }) {
+function extentAcross(q, p, axis, delta) {
   const c = cross2(axis);
-  if (p.role !== "box" || box === null) return [p.at[c] + shift[c], p.at[c] + shift[c]];
-  const landed = applyEdges(box, shift.x, shift.y, edges);
+  const landed = p.role === "box" ? landedBox(q, delta) : null;
+  if (landed === null) {
+    const shift = landedShift(q, delta);
+    return [p.at[c] + shift[c], p.at[c] + shift[c]];
+  }
   const lo3 = c === "x" ? landed.x : landed.y;
   return [lo3, lo3 + (c === "x" ? landed.width : landed.height)];
 }
 
 // src/sources/spacing.ts
+var TRANSLATE = [
+  { axis: "x", edge: "both", rate: { x: 1, y: 0 } },
+  { axis: "y", edge: "both", rate: { x: 0, y: 1 } }
+];
+function movingSides(q) {
+  return q.sides ? q.sides.map((s) => ({ axis: s.axis, edge: s.side, rate: s.rate })) : TRANSLATE;
+}
 var measureAll = (boxes) => ({ boxes, x: measureGapSpans(boxes, "x"), y: measureGapSpans(boxes, "y") });
 function gapMark(g, color) {
   const ends = g.axis === "x" ? { from: { x: g.min, y: g.at }, to: { x: g.max, y: g.at } } : { from: { x: g.at, y: g.min }, to: { x: g.at, y: g.max } };
@@ -820,23 +851,20 @@ function spacingSnapSource(opts = {}) {
       const measured = opts.getTargets ? measureAll(opts.getTargets()) : fromScene(q);
       if (!box || !probe || !measured) return;
       const reach = q.reachWorld(q.reachPx);
-      const edges = q.edges ?? { x: "both", y: "both" };
-      for (const axis of ["x", "y"]) {
-        const edge = edges[axis];
-        if (edge === null) continue;
-        const refs = referenceGaps(box, measured[axis]);
-        const seen = /* @__PURE__ */ new Set();
-        for (const o of spacingOffers(box, axis, edge, measured.boxes, refs)) {
-          const key = `${o.delta.toFixed(6)}:${o.size.toFixed(6)}`;
-          if (Math.abs(o.delta) > reach || seen.has(key)) continue;
+      const refs = { x: referenceGaps(box, measured.x), y: referenceGaps(box, measured.y) };
+      const seen = /* @__PURE__ */ new Set();
+      for (const { axis, edge, rate } of movingSides(q)) {
+        const speed = Math.hypot(rate.x, rate.y);
+        for (const o of spacingOffers(box, axis, edge, measured.boxes, refs[axis])) {
+          const key = `${axis}:${edge}:${o.delta.toFixed(6)}:${o.size.toFixed(6)}`;
+          if (Math.abs(o.delta) / speed > reach || seen.has(key)) continue;
           seen.add(key);
           yield {
             probe: probe.id,
-            locus: axisLine(axis, probe.at[axis] + o.delta, probe.at),
+            locus: sideLine(probe.at, rate, o.delta),
             mark: (delta) => {
-              const shift = landedShift(q, delta);
-              const landed = applyEdges(box, shift.x, shift.y, edges);
-              return equalGaps(landed, axis, o.size, measured.boxes, refs).map((g) => gapMark(g, opts.color));
+              const landed = landedBox(q, delta) ?? box;
+              return equalGaps(landed, axis, o.size, measured.boxes, refs[axis]).map((g) => gapMark(g, opts.color));
             }
           };
         }