@zoneflow/editor-dom 0.0.1

package/dist/pathMoveEditor.js

@@ -0,0 +1,237 @@
+import { getPathLayout, setPathComponentLayout, updatePathLayout, } from "@zoneflow/core";
+import { roundCoordinate, snapCoordinate, } from "./moveEditorShared";
+export function resolvePathNodeLayoutComponentId(layoutModel, pathId) {
+    const componentLayoutsById = getPathLayout(layoutModel, pathId)?.componentLayoutsById;
+    if (componentLayoutsById?.body)
+        return "body";
+    if (componentLayoutsById?.label)
+        return "label";
+    return null;
+}
+export function resolvePathMoveOriginSnapshot(params) {
+    const { layoutModel, pathId, frame } = params;
+    const componentId = resolvePathNodeLayoutComponentId(layoutModel, pathId);
+    const pathLayout = getPathLayout(layoutModel, pathId);
+    const pathVisual = frame?.pipeline.graphLayout.pathsById[pathId];
+    if (componentId) {
+        const componentRect = pathLayout?.componentLayoutsById?.[componentId];
+        if (componentRect) {
+            return {
+                x: componentRect.x,
+                y: componentRect.y,
+                width: componentRect.width ?? pathVisual?.rect?.width ?? 0,
+                height: componentRect.height ?? pathVisual?.rect?.height ?? 0,
+                componentId,
+                coordinateSpace: "component-layout",
+            };
+        }
+    }
+    const routeOffset = pathLayout?.routeOffset;
+    return {
+        x: routeOffset?.x ?? 0,
+        y: routeOffset?.y ?? 0,
+        width: pathVisual?.rect?.width ?? 0,
+        height: pathVisual?.rect?.height ?? 0,
+        componentId: null,
+        coordinateSpace: "route-offset",
+    };
+}
+export function resolvePathNodeSnapshot(params) {
+    const { frame, layoutModel, pathId } = params;
+    const pathVisual = frame.pipeline.graphLayout.pathsById[pathId];
+    if (!pathVisual?.rect)
+        return undefined;
+    const origin = resolvePathMoveOriginSnapshot({
+        frame,
+        layoutModel,
+        pathId,
+    });
+    return {
+        pathId,
+        origin,
+        rect: origin.coordinateSpace === "component-layout"
+            ? {
+                x: origin.x,
+                y: origin.y,
+                width: origin.width,
+                height: origin.height,
+            }
+            : pathVisual.rect,
+    };
+}
+export function applyPathMovePosition(params) {
+    const { layoutModel, pathId, origin, x, y } = params;
+    if (origin.coordinateSpace === "route-offset") {
+        return updatePathLayout(layoutModel, pathId, {
+            routeOffset: {
+                x,
+                y,
+            },
+        });
+    }
+    return setPathComponentLayout(layoutModel, pathId, origin.componentId ?? "body", {
+        x,
+        y,
+        width: origin.width,
+        height: origin.height,
+    });
+}
+export function applyPathNodeSnapshotRect(params) {
+    const { layoutModel, snapshot, rect } = params;
+    if (snapshot.origin.coordinateSpace === "route-offset" &&
+        rect.width === snapshot.rect.width &&
+        rect.height === snapshot.rect.height) {
+        const deltaX = rect.x - snapshot.rect.x;
+        const deltaY = rect.y - snapshot.rect.y;
+        return updatePathLayout(layoutModel, snapshot.pathId, {
+            routeOffset: {
+                x: roundCoordinate(snapshot.origin.x + deltaX),
+                y: roundCoordinate(snapshot.origin.y + deltaY),
+            },
+        });
+    }
+    return setPathComponentLayout(layoutModel, snapshot.pathId, snapshot.origin.componentId ?? "body", {
+        x: roundCoordinate(rect.x),
+        y: roundCoordinate(rect.y),
+        width: roundCoordinate(rect.width),
+        height: roundCoordinate(rect.height),
+    });
+}
+export function resolveGroupPathDragOrigin(params) {
+    const { frame, layoutModel, pathIds, primaryPathId } = params;
+    const originsByPathId = {};
+    for (const pathId of pathIds) {
+        const resolved = resolvePathNodeSnapshot({
+            frame,
+            layoutModel,
+            pathId,
+        });
+        if (!resolved)
+            continue;
+        originsByPathId[pathId] = resolved.origin;
+    }
+    if (!originsByPathId[primaryPathId]) {
+        return undefined;
+    }
+    return {
+        kind: "path-group",
+        primaryPathId,
+        originsByPathId,
+    };
+}
+export function alignPathsByMode(params) {
+    const { frame, layoutModel, pathIds, mode, gridSnap } = params;
+    const entries = pathIds
+        .map((pathId) => resolvePathNodeSnapshot({
+        frame,
+        layoutModel,
+        pathId,
+    }))
+        .filter((entry) => Boolean(entry));
+    if (entries.length < 2)
+        return layoutModel;
+    const reference = mode === "left"
+        ? Math.min(...entries.map((entry) => entry.rect.x))
+        : mode === "right"
+            ? Math.max(...entries.map((entry) => entry.rect.x + entry.rect.width))
+            : mode === "top"
+                ? Math.min(...entries.map((entry) => entry.rect.y))
+                : mode === "bottom"
+                    ? Math.max(...entries.map((entry) => entry.rect.y + entry.rect.height))
+                    : mode === "center-horizontal"
+                        ? entries.reduce((sum, entry) => sum + entry.rect.x + entry.rect.width / 2, 0) / entries.length
+                        : entries.reduce((sum, entry) => sum + entry.rect.y + entry.rect.height / 2, 0) / entries.length;
+    const snappedReference = snapCoordinate(reference, gridSnap);
+    let nextLayoutModel = layoutModel;
+    for (const entry of entries) {
+        nextLayoutModel = applyPathNodeSnapshotRect({
+            layoutModel: nextLayoutModel,
+            snapshot: entry,
+            rect: {
+                x: mode === "left"
+                    ? snappedReference
+                    : mode === "right"
+                        ? snapCoordinate(snappedReference - entry.rect.width, gridSnap)
+                        : mode === "center-horizontal"
+                            ? snapCoordinate(snappedReference - entry.rect.width / 2, gridSnap)
+                            : entry.rect.x,
+                y: mode === "top"
+                    ? snappedReference
+                    : mode === "bottom"
+                        ? snapCoordinate(snappedReference - entry.rect.height, gridSnap)
+                        : mode === "center-vertical"
+                            ? snapCoordinate(snappedReference - entry.rect.height / 2, gridSnap)
+                            : entry.rect.y,
+                width: entry.rect.width,
+                height: entry.rect.height,
+            },
+        });
+    }
+    return nextLayoutModel;
+}
+export function distributePathsByMode(params) {
+    const { frame, layoutModel, pathIds, mode, gridSnap } = params;
+    const axis = mode === "horizontal" ? "x" : "y";
+    const sizeKey = mode === "horizontal" ? "width" : "height";
+    const entries = pathIds
+        .map((pathId) => resolvePathNodeSnapshot({
+        frame,
+        layoutModel,
+        pathId,
+    }))
+        .filter((entry) => Boolean(entry))
+        .sort((a, b) => a.rect[axis] - b.rect[axis]);
+    if (entries.length < 3)
+        return layoutModel;
+    const first = entries[0];
+    const last = entries[entries.length - 1];
+    const span = last.rect[axis] + last.rect[sizeKey] - first.rect[axis];
+    const occupied = entries.reduce((sum, entry) => sum + entry.rect[sizeKey], 0);
+    const gap = (span - occupied) / (entries.length - 1);
+    let cursor = first.rect[axis] + first.rect[sizeKey] + gap;
+    let nextLayoutModel = layoutModel;
+    for (const entry of entries.slice(1, -1)) {
+        const snapped = snapCoordinate(cursor, gridSnap);
+        nextLayoutModel = applyPathNodeSnapshotRect({
+            layoutModel: nextLayoutModel,
+            snapshot: entry,
+            rect: {
+                x: mode === "horizontal" ? snapped : entry.rect.x,
+                y: mode === "vertical" ? snapped : entry.rect.y,
+                width: entry.rect.width,
+                height: entry.rect.height,
+            },
+        });
+        cursor += entry.rect[sizeKey] + gap;
+    }
+    return nextLayoutModel;
+}
+export function resolvePathResizeOrigin(params) {
+    const { frame, layoutModel, pathId } = params;
+    const snapshot = resolvePathNodeSnapshot({
+        frame,
+        layoutModel,
+        pathId,
+    });
+    if (!snapshot)
+        return undefined;
+    return {
+        pathId,
+        componentId: snapshot.origin.componentId ?? "body",
+        originX: snapshot.rect.x,
+        originY: snapshot.rect.y,
+        originWidth: snapshot.rect.width,
+        originHeight: snapshot.rect.height,
+    };
+}
+export function resizePathNodeByScreenDelta(params) {
+    const { layoutModel, camera, origin, deltaX, deltaY, minWidth = 140, minHeight = 32, gridSnap, } = params;
+    const nextWidth = Math.max(minWidth, snapCoordinate(origin.originWidth + deltaX / camera.zoom, gridSnap));
+    const nextHeight = Math.max(minHeight, snapCoordinate(origin.originHeight + deltaY / camera.zoom, gridSnap));
+    return setPathComponentLayout(layoutModel, origin.pathId, origin.componentId, {
+        x: origin.originX,
+        y: origin.originY,
+        width: nextWidth,
+        height: nextHeight,
+    });
+}

package/dist/zoneGeometry.d.ts

@@ -0,0 +1,35 @@
+import { type Point, type UniverseLayoutModel, type UniverseModel, type ZoneId } from "@zoneflow/core";
+import type { Rect } from "@zoneflow/renderer-dom";
+export declare const ROOT_WORLD_ORIGIN: Point;
+export declare function resolveWorldZoneOrigin(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneId: ZoneId;
+    cache?: Map<ZoneId, Point>;
+}): Point;
+export declare function resolveWorldZoneRect(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneId: ZoneId;
+    cache?: Map<ZoneId, Point>;
+}): Rect | undefined;
+export declare function resolveTopSelectedZoneId(params: {
+    model: UniverseModel;
+    selectedZoneIds: Set<ZoneId>;
+    zoneId: ZoneId;
+}): ZoneId;
+export declare function resolveZoneGroupOrigins(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneIds: ZoneId[];
+    primaryZoneId: ZoneId;
+}): {
+    primaryZoneId: ZoneId;
+    originsByZoneId: Record<ZoneId, Point>;
+} | undefined;
+export declare function applyZoneOriginsDelta(params: {
+    layoutModel: UniverseLayoutModel;
+    originsByZoneId: Record<ZoneId, Point>;
+    deltaX: number;
+    deltaY: number;
+}): UniverseLayoutModel;

package/dist/zoneGeometry.js

@@ -0,0 +1,106 @@
+import { getZoneLayout, updateZoneLayout, } from "@zoneflow/core";
+import { roundCoordinate } from "./moveEditorShared";
+export const ROOT_WORLD_ORIGIN = { x: 0, y: 0 };
+export function resolveWorldZoneOrigin(params) {
+    const { model, layoutModel, zoneId, cache = new Map(), } = params;
+    const cached = cache.get(zoneId);
+    if (cached) {
+        return cached;
+    }
+    const zone = model.zonesById[zoneId];
+    const layout = layoutModel.zoneLayoutsById[zoneId];
+    if (!zone || !layout) {
+        cache.set(zoneId, ROOT_WORLD_ORIGIN);
+        return ROOT_WORLD_ORIGIN;
+    }
+    if (!zone.parentZoneId) {
+        const point = {
+            x: layout.x,
+            y: layout.y,
+        };
+        cache.set(zoneId, point);
+        return point;
+    }
+    const parentOrigin = resolveWorldZoneOrigin({
+        model,
+        layoutModel,
+        zoneId: zone.parentZoneId,
+        cache,
+    });
+    const point = {
+        x: parentOrigin.x + layout.x,
+        y: parentOrigin.y + layout.y,
+    };
+    cache.set(zoneId, point);
+    return point;
+}
+export function resolveWorldZoneRect(params) {
+    const { model, layoutModel, zoneId, cache } = params;
+    const layout = getZoneLayout(layoutModel, zoneId);
+    if (!layout)
+        return undefined;
+    const origin = resolveWorldZoneOrigin({
+        model,
+        layoutModel,
+        zoneId,
+        cache,
+    });
+    return {
+        x: origin.x,
+        y: origin.y,
+        width: layout.width ?? 0,
+        height: layout.height ?? 0,
+    };
+}
+export function resolveTopSelectedZoneId(params) {
+    const { model, selectedZoneIds, zoneId } = params;
+    let currentZoneId = zoneId;
+    let currentZone = model.zonesById[currentZoneId];
+    while (currentZone?.parentZoneId && selectedZoneIds.has(currentZone.parentZoneId)) {
+        currentZoneId = currentZone.parentZoneId;
+        currentZone = model.zonesById[currentZoneId];
+    }
+    return currentZoneId;
+}
+export function resolveZoneGroupOrigins(params) {
+    const { model, layoutModel, zoneIds, primaryZoneId } = params;
+    const selectedZoneIds = new Set(zoneIds);
+    const effectiveZoneIds = zoneIds.filter((zoneId) => resolveTopSelectedZoneId({
+        model,
+        selectedZoneIds,
+        zoneId,
+    }) === zoneId);
+    const effectivePrimaryZoneId = resolveTopSelectedZoneId({
+        model,
+        selectedZoneIds,
+        zoneId: primaryZoneId,
+    });
+    const originsByZoneId = {};
+    for (const zoneId of effectiveZoneIds) {
+        const zoneLayout = getZoneLayout(layoutModel, zoneId);
+        if (!zoneLayout)
+            continue;
+        originsByZoneId[zoneId] = {
+            x: zoneLayout.x,
+            y: zoneLayout.y,
+        };
+    }
+    if (!originsByZoneId[effectivePrimaryZoneId]) {
+        return undefined;
+    }
+    return {
+        primaryZoneId: effectivePrimaryZoneId,
+        originsByZoneId,
+    };
+}
+export function applyZoneOriginsDelta(params) {
+    const { layoutModel, originsByZoneId, deltaX, deltaY } = params;
+    let nextLayoutModel = layoutModel;
+    for (const [zoneId, point] of Object.entries(originsByZoneId)) {
+        nextLayoutModel = updateZoneLayout(nextLayoutModel, zoneId, {
+            x: roundCoordinate(point.x + deltaX),
+            y: roundCoordinate(point.y + deltaY),
+        });
+    }
+    return nextLayoutModel;
+}

package/dist/zoneMoveEditor.d.ts

@@ -0,0 +1,50 @@
+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";
+export { alignPathsByMode, distributePathsByMode, resolveGroupPathDragOrigin, resolvePathResizeOrigin, resizePathNodeByScreenDelta, } from "./pathMoveEditor";
+export { commitZoneGroupReparentAtCurrentPosition, commitZoneReparentAtCurrentPosition, reparentZoneAtCurrentPosition, resolveZonePlacementAtWorldRect, resolveZoneReparentCandidate, } from "./zoneReparent";
+export declare function getMoveEditorTargets(params: {
+    model: UniverseModel;
+    frame: RendererFrame;
+    camera: CameraState;
+    options?: MoveEditorTargetOptions;
+}): MoveEditorTarget[];
+export declare function resolveMoveEditorDragOrigin(layoutModel: UniverseLayoutModel, target: MoveEditorTarget, frame?: RendererFrame): MoveEditorDragOrigin | undefined;
+export declare function resolveGroupZoneDragOrigin(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneIds: ZoneId[];
+    primaryZoneId: ZoneId;
+}): MoveEditorDragOrigin | undefined;
+export declare function moveEditorTargetByScreenDelta(params: {
+    layoutModel: UniverseLayoutModel;
+    camera: CameraState;
+    origin: MoveEditorDragOrigin;
+    deltaX: number;
+    deltaY: number;
+    gridSnap?: GridSnapOptions;
+}): UniverseLayoutModel;
+export declare function resolveZoneResizeOrigin(layoutModel: UniverseLayoutModel, zoneId: ZoneId): ZoneResizeOrigin | undefined;
+export declare function resizeZoneByScreenDelta(params: {
+    layoutModel: UniverseLayoutModel;
+    camera: CameraState;
+    origin: ZoneResizeOrigin;
+    deltaX: number;
+    deltaY: number;
+    minWidth?: number;
+    minHeight?: number;
+    gridSnap?: GridSnapOptions;
+}): UniverseLayoutModel;
+export declare function alignZonesByMode(params: {
+    layoutModel: UniverseLayoutModel;
+    zoneIds: ZoneId[];
+    mode: ZoneAlignMode;
+    gridSnap?: GridSnapOptions;
+}): UniverseLayoutModel;
+export declare function distributeZonesByMode(params: {
+    layoutModel: UniverseLayoutModel;
+    zoneIds: ZoneId[];
+    mode: ZoneDistributeMode;
+    gridSnap?: GridSnapOptions;
+}): UniverseLayoutModel;