@zoneflow/editor-dom 0.0.5 → 0.0.6

package/dist/moveEditorShared.d.ts

@@ -26,11 +26,23 @@ export type PathMoveOriginSnapshot = {
     componentId: "body" | "label" | null;
     coordinateSpace: PathMoveCoordinateSpace;
 };
+export type ObjectSnapGuides = {
+    x: number[];
+    y: number[];
+};
+export type ObjectSnapAxisMatch = {
+    guide: number;
+    align: "start" | "center" | "end";
+    snappedStart: number;
+};
 export type MoveEditorDragOrigin = {
     kind: "zone";
     zoneId: ZoneId;
     originX: number;
     originY: number;
+    width: number;
+    height: number;
+    objectSnapGuides?: ObjectSnapGuides;
 } | {
     kind: "zone-group";
     primaryZoneId: ZoneId;
@@ -39,6 +51,7 @@ export type MoveEditorDragOrigin = {
     kind: "path";
     pathId: PathId;
     origin: PathMoveOriginSnapshot;
+    objectSnapGuides?: ObjectSnapGuides;
 } | {
     kind: "path-group";
     primaryPathId: PathId;
@@ -61,6 +74,10 @@ export type GridSnapOptions = {
     enabled?: boolean;
     size?: number;
 };
+export type ObjectSnapOptions = {
+    enabled?: boolean;
+    threshold?: number;
+};
 export type ZoneAlignMode = "left" | "right" | "top" | "bottom" | "center-horizontal" | "center-vertical";
 export type ZoneDistributeMode = "horizontal" | "vertical";
 export type PathAlignMode = ZoneAlignMode;
@@ -83,5 +100,20 @@ export declare function resolveSnappedMove(params: {
     effectiveDeltaX: number;
     effectiveDeltaY: number;
 };
+export declare function collectRectObjectSnapGuides(rects: Rect[]): ObjectSnapGuides;
+export declare function resolveObjectSnappedRectPosition(params: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    camera: CameraState;
+    guides?: ObjectSnapGuides;
+    objectSnap?: ObjectSnapOptions;
+}): {
+    x: number;
+    y: number;
+    guideX: number | undefined;
+    guideY: number | undefined;
+};
 export declare function containsPoint(rect: Rect, point: Point): boolean;
 export declare function getRectArea(rect: Rect): number;

package/dist/moveEditorShared.js

@@ -37,6 +37,85 @@ export function resolveSnappedMove(params) {
         effectiveDeltaY: nextY - originY,
     };
 }
+export function collectRectObjectSnapGuides(rects) {
+    const x = new Set();
+    const y = new Set();
+    for (const rect of rects) {
+        x.add(roundCoordinate(rect.x));
+        x.add(roundCoordinate(rect.x + rect.width / 2));
+        x.add(roundCoordinate(rect.x + rect.width));
+        y.add(roundCoordinate(rect.y));
+        y.add(roundCoordinate(rect.y + rect.height / 2));
+        y.add(roundCoordinate(rect.y + rect.height));
+    }
+    return {
+        x: Array.from(x).sort((a, b) => a - b),
+        y: Array.from(y).sort((a, b) => a - b),
+    };
+}
+function resolveAxisObjectSnap(params) {
+    const { start, size, guides, threshold } = params;
+    const candidates = [
+        { coordinate: start, align: "start" },
+        { coordinate: start + size / 2, align: "center" },
+        { coordinate: start + size, align: "end" },
+    ];
+    let best;
+    for (const guide of guides) {
+        for (const candidate of candidates) {
+            const distance = Math.abs(guide - candidate.coordinate);
+            if (distance > threshold)
+                continue;
+            const snappedStart = candidate.align === "start"
+                ? guide
+                : candidate.align === "center"
+                    ? guide - size / 2
+                    : guide - size;
+            if (!best || distance < best.distance) {
+                best = {
+                    distance,
+                    match: {
+                        guide: roundCoordinate(guide),
+                        align: candidate.align,
+                        snappedStart: roundCoordinate(snappedStart),
+                    },
+                };
+            }
+        }
+    }
+    return best?.match;
+}
+export function resolveObjectSnappedRectPosition(params) {
+    const { x, y, width, height, camera, guides, objectSnap } = params;
+    if (!guides || !objectSnap?.enabled) {
+        return {
+            x: roundCoordinate(x),
+            y: roundCoordinate(y),
+            guideX: undefined,
+            guideY: undefined,
+        };
+    }
+    const threshold = objectSnap.threshold ?? 8;
+    const worldThreshold = threshold / camera.zoom;
+    const xMatch = resolveAxisObjectSnap({
+        start: x,
+        size: width,
+        guides: guides.x,
+        threshold: worldThreshold,
+    });
+    const yMatch = resolveAxisObjectSnap({
+        start: y,
+        size: height,
+        guides: guides.y,
+        threshold: worldThreshold,
+    });
+    return {
+        x: xMatch?.snappedStart ?? roundCoordinate(x),
+        y: yMatch?.snappedStart ?? roundCoordinate(y),
+        guideX: xMatch?.guide,
+        guideY: yMatch?.guide,
+    };
+}
 export function containsPoint(rect, point) {
     return (point.x >= rect.x &&
         point.x <= rect.x + rect.width &&

package/dist/zoneMoveEditor.d.ts

@@ -1,7 +1,7 @@
 import { type UniverseLayoutModel, type UniverseModel, type ZoneId } from "@zoneflow/core";
 import type { CameraState, RendererFrame } from "@zoneflow/renderer-dom";
-import { type GridSnapOptions, type MoveEditorDragOrigin, type MoveEditorTarget, type MoveEditorTargetOptions, type ZoneAlignMode, type ZoneDistributeMode, type ZoneResizeOrigin } from "./moveEditorShared";
-export type { GridSnapOptions, MoveEditorDragOrigin, MoveEditorTarget, MoveEditorTargetOptions, PathAlignMode, PathDistributeMode, PathResizeOrigin, ZoneAlignMode, ZoneDistributeMode, ZoneResizeOrigin, } from "./moveEditorShared";
+import { type GridSnapOptions, type ObjectSnapOptions, type MoveEditorDragOrigin, type MoveEditorTarget, type MoveEditorTargetOptions, type ZoneAlignMode, type ZoneDistributeMode, type ZoneResizeOrigin } from "./moveEditorShared";
+export type { GridSnapOptions, MoveEditorDragOrigin, MoveEditorTarget, MoveEditorTargetOptions, ObjectSnapOptions, PathAlignMode, PathDistributeMode, PathResizeOrigin, ZoneAlignMode, ZoneDistributeMode, ZoneResizeOrigin, } from "./moveEditorShared";
 export { alignPathsByMode, distributePathsByMode, resolveGroupPathDragOrigin, resolvePathResizeOrigin, resizePathNodeByScreenDelta, } from "./pathMoveEditor";
 export { commitZoneGroupReparentAtCurrentPosition, commitZoneReparentAtCurrentPosition, reparentZoneAtCurrentPosition, resolveZonePlacementAtWorldRect, resolveZoneReparentCandidate, } from "./zoneReparent";
 export declare function getMoveEditorTargets(params: {
@@ -10,7 +10,12 @@ export declare function getMoveEditorTargets(params: {
     camera: CameraState;
     options?: MoveEditorTargetOptions;
 }): MoveEditorTarget[];
-export declare function resolveMoveEditorDragOrigin(layoutModel: UniverseLayoutModel, target: MoveEditorTarget, frame?: RendererFrame): MoveEditorDragOrigin | undefined;
+export declare function resolveMoveEditorDragOrigin(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    target: MoveEditorTarget;
+    frame?: RendererFrame;
+}): MoveEditorDragOrigin | undefined;
 export declare function resolveGroupZoneDragOrigin(params: {
     model: UniverseModel;
     layoutModel: UniverseLayoutModel;
@@ -24,7 +29,19 @@ export declare function moveEditorTargetByScreenDelta(params: {
     deltaX: number;
     deltaY: number;
     gridSnap?: GridSnapOptions;
+    objectSnap?: ObjectSnapOptions;
 }): UniverseLayoutModel;
+export declare function resolveMoveEditorObjectSnapGuides(params: {
+    camera: CameraState;
+    origin: MoveEditorDragOrigin;
+    deltaX: number;
+    deltaY: number;
+    gridSnap?: GridSnapOptions;
+    objectSnap?: ObjectSnapOptions;
+}): {
+    guideX: number | undefined;
+    guideY: number | undefined;
+};
 export declare function resolveZoneResizeOrigin(layoutModel: UniverseLayoutModel, zoneId: ZoneId): ZoneResizeOrigin | undefined;
 export declare function resizeZoneByScreenDelta(params: {
     layoutModel: UniverseLayoutModel;

package/dist/zoneMoveEditor.js

@@ -1,5 +1,5 @@
 import { getZoneDepth, getZoneLayout, updateZoneLayout, } from "@zoneflow/core";
-import { projectWorldRectToScreenRect, resolveSnappedMove, roundCoordinate, snapCoordinate, typedValues, } from "./moveEditorShared";
+import { collectRectObjectSnapGuides, projectWorldRectToScreenRect, resolveObjectSnappedRectPosition, resolveSnappedMove, roundCoordinate, snapCoordinate, typedValues, } from "./moveEditorShared";
 import { applyPathMovePosition, resolvePathMoveOriginSnapshot, } from "./pathMoveEditor";
 import { applyZoneOriginsDelta, resolveZoneGroupOrigins, } from "./zoneGeometry";
 export { alignPathsByMode, distributePathsByMode, resolveGroupPathDragOrigin, resolvePathResizeOrigin, resizePathNodeByScreenDelta, } from "./pathMoveEditor";
@@ -7,6 +7,48 @@ export { commitZoneGroupReparentAtCurrentPosition, commitZoneReparentAtCurrentPo
 const DEFAULT_MIN_VISIBLE_SIZE = 18;
 const DEFAULT_MIN_ZONE_WIDTH = 140;
 const DEFAULT_MIN_ZONE_HEIGHT = 96;
+function collectDescendantZoneIds(model, zoneId) {
+    const descendants = new Set();
+    const queue = [...(model.zonesById[zoneId]?.childZoneIds ?? [])];
+    while (queue.length > 0) {
+        const current = queue.shift();
+        if (!current || descendants.has(current))
+            continue;
+        descendants.add(current);
+        queue.push(...(model.zonesById[current]?.childZoneIds ?? []));
+    }
+    return descendants;
+}
+function resolveObjectSnapGuides(params) {
+    const { model, frame, target } = params;
+    if (!frame)
+        return undefined;
+    const excludedZoneIds = target.kind === "zone"
+        ? new Set([target.zoneId, ...collectDescendantZoneIds(model, target.zoneId)])
+        : new Set();
+    const candidateRects = [];
+    for (const zoneVisual of typedValues(frame.pipeline.graphLayout.zonesById)) {
+        const visibility = frame.pipeline.visibility.zoneVisibilityById[zoneVisual.zoneId];
+        if (!visibility?.isVisible)
+            continue;
+        if (excludedZoneIds.has(zoneVisual.zoneId))
+            continue;
+        candidateRects.push(zoneVisual.rect);
+    }
+    for (const pathVisual of typedValues(frame.pipeline.graphLayout.pathsById)) {
+        const visibility = frame.pipeline.visibility.pathVisibilityById[pathVisual.pathId];
+        if (!visibility?.shouldRenderNode || !pathVisual.rect)
+            continue;
+        if (target.kind === "path" && pathVisual.pathId === target.pathId)
+            continue;
+        if (target.kind === "zone" && excludedZoneIds.has(pathVisual.sourceZoneId))
+            continue;
+        candidateRects.push(pathVisual.rect);
+    }
+    return candidateRects.length > 0
+        ? collectRectObjectSnapGuides(candidateRects)
+        : undefined;
+}
 function resolveResizedAnchor(params) {
     const { kind, width, height, current } = params;
     const rectWidth = current?.rect?.width;
@@ -82,16 +124,28 @@ export function getMoveEditorTargets(params) {
         ...pathTargets,
     ];
 }
-export function resolveMoveEditorDragOrigin(layoutModel, target, frame) {
+export function resolveMoveEditorDragOrigin(params) {
+    const { model, layoutModel, target, frame } = params;
     if (target.kind === "zone") {
         const zoneLayout = getZoneLayout(layoutModel, target.zoneId);
         if (!zoneLayout)
             return undefined;
+        const zoneRect = frame?.pipeline.graphLayout.zonesById[target.zoneId]?.rect ??
+            getZoneLayout(layoutModel, target.zoneId);
+        const width = zoneRect?.width ?? 0;
+        const height = zoneRect?.height ?? 0;
         return {
             kind: "zone",
             zoneId: target.zoneId,
             originX: zoneLayout.x,
             originY: zoneLayout.y,
+            width,
+            height,
+            objectSnapGuides: resolveObjectSnapGuides({
+                model,
+                frame,
+                target,
+            }),
         };
     }
     return {
@@ -102,6 +156,11 @@ export function resolveMoveEditorDragOrigin(layoutModel, target, frame) {
             layoutModel,
             pathId: target.pathId,
         }),
+        objectSnapGuides: resolveObjectSnapGuides({
+            model,
+            frame,
+            target,
+        }),
     };
 }
 export function resolveGroupZoneDragOrigin(params) {
@@ -115,7 +174,7 @@ export function resolveGroupZoneDragOrigin(params) {
     };
 }
 export function moveEditorTargetByScreenDelta(params) {
-    const { layoutModel, camera, origin, deltaX, deltaY, gridSnap, } = params;
+    const { layoutModel, camera, origin, deltaX, deltaY, gridSnap, objectSnap, } = params;
     if (origin.kind === "zone") {
         const { nextX, nextY } = resolveSnappedMove({
             originX: origin.originX,
@@ -125,9 +184,18 @@ export function moveEditorTargetByScreenDelta(params) {
             camera,
             gridSnap,
         });
-        return updateZoneLayout(layoutModel, origin.zoneId, {
+        const snapped = resolveObjectSnappedRectPosition({
             x: nextX,
             y: nextY,
+            width: origin.width,
+            height: origin.height,
+            camera,
+            guides: origin.objectSnapGuides,
+            objectSnap,
+        });
+        return updateZoneLayout(layoutModel, origin.zoneId, {
+            x: snapped.x,
+            y: snapped.y,
         });
     }
     if (origin.kind === "zone-group") {
@@ -181,14 +249,76 @@ export function moveEditorTargetByScreenDelta(params) {
         camera,
         gridSnap,
     });
+    const snapped = resolveObjectSnappedRectPosition({
+        x: nextX,
+        y: nextY,
+        width: origin.origin.width,
+        height: origin.origin.height,
+        camera,
+        guides: origin.objectSnapGuides,
+        objectSnap,
+    });
     return applyPathMovePosition({
         layoutModel,
         pathId: origin.pathId,
         origin: origin.origin,
-        x: nextX,
-        y: nextY,
+        x: snapped.x,
+        y: snapped.y,
     });
 }
+export function resolveMoveEditorObjectSnapGuides(params) {
+    const { camera, origin, deltaX, deltaY, gridSnap, objectSnap } = params;
+    if (origin.kind === "zone") {
+        const { nextX, nextY } = resolveSnappedMove({
+            originX: origin.originX,
+            originY: origin.originY,
+            deltaX,
+            deltaY,
+            camera,
+            gridSnap,
+        });
+        const snapped = resolveObjectSnappedRectPosition({
+            x: nextX,
+            y: nextY,
+            width: origin.width,
+            height: origin.height,
+            camera,
+            guides: origin.objectSnapGuides,
+            objectSnap,
+        });
+        return {
+            guideX: snapped.guideX,
+            guideY: snapped.guideY,
+        };
+    }
+    if (origin.kind === "path") {
+        const { nextX, nextY } = resolveSnappedMove({
+            originX: origin.origin.x,
+            originY: origin.origin.y,
+            deltaX,
+            deltaY,
+            camera,
+            gridSnap,
+        });
+        const snapped = resolveObjectSnappedRectPosition({
+            x: nextX,
+            y: nextY,
+            width: origin.origin.width,
+            height: origin.origin.height,
+            camera,
+            guides: origin.objectSnapGuides,
+            objectSnap,
+        });
+        return {
+            guideX: snapped.guideX,
+            guideY: snapped.guideY,
+        };
+    }
+    return {
+        guideX: undefined,
+        guideY: undefined,
+    };
+}
 export function resolveZoneResizeOrigin(layoutModel, zoneId) {
     const zoneLayout = getZoneLayout(layoutModel, zoneId);
     if (!zoneLayout)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zoneflow/editor-dom",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "license": "MIT",
   "description": "Low-level editor geometry and interaction helpers for Zoneflow.",
   "type": "module",
@@ -19,8 +19,8 @@
     "dist"
   ],
   "dependencies": {
-    "@zoneflow/core": "0.0.5",
-    "@zoneflow/renderer-dom": "0.0.5"
+    "@zoneflow/core": "0.0.6",
+    "@zoneflow/renderer-dom": "0.0.6"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",