@zoneflow/editor-dom 0.0.1

package/dist/zoneMoveEditor.js

@@ -0,0 +1,300 @@
+import { getZoneDepth, getZoneLayout, updateZoneLayout, } from "@zoneflow/core";
+import { projectWorldRectToScreenRect, resolveSnappedMove, roundCoordinate, snapCoordinate, typedValues, } from "./moveEditorShared";
+import { applyPathMovePosition, resolvePathMoveOriginSnapshot, } from "./pathMoveEditor";
+import { applyZoneOriginsDelta, resolveZoneGroupOrigins, } from "./zoneGeometry";
+export { alignPathsByMode, distributePathsByMode, resolveGroupPathDragOrigin, resolvePathResizeOrigin, resizePathNodeByScreenDelta, } from "./pathMoveEditor";
+export { commitZoneGroupReparentAtCurrentPosition, commitZoneReparentAtCurrentPosition, reparentZoneAtCurrentPosition, resolveZonePlacementAtWorldRect, resolveZoneReparentCandidate, } from "./zoneReparent";
+const DEFAULT_MIN_VISIBLE_SIZE = 18;
+const DEFAULT_MIN_ZONE_WIDTH = 140;
+const DEFAULT_MIN_ZONE_HEIGHT = 96;
+function resolveResizedAnchor(params) {
+    const { kind, width, height, current } = params;
+    const rectWidth = current?.rect?.width;
+    const rectHeight = current?.rect?.height;
+    const nextCenterY = roundCoordinate(height / 2);
+    const nextRectY = rectHeight !== undefined
+        ? roundCoordinate(nextCenterY - rectHeight / 2)
+        : undefined;
+    return {
+        point: {
+            x: kind === "inlet" ? 0 : roundCoordinate(width),
+            y: nextCenterY,
+        },
+        rect: current?.rect
+            ? {
+                ...current.rect,
+                x: kind === "inlet"
+                    ? 0
+                    : roundCoordinate(width - (rectWidth ?? current.rect.width ?? 0)),
+                y: nextRectY ?? current.rect.y,
+                width: rectWidth,
+                height: rectHeight,
+            }
+            : undefined,
+    };
+}
+export function getMoveEditorTargets(params) {
+    const { model, frame, camera, options, } = params;
+    const includeRoot = options?.includeRoot ?? true;
+    const minVisibleSize = options?.minVisibleSize ?? DEFAULT_MIN_VISIBLE_SIZE;
+    const zoneTargets = [];
+    const pathTargets = [];
+    for (const zoneVisual of typedValues(frame.pipeline.graphLayout.zonesById)) {
+        const zone = model.zonesById[zoneVisual.zoneId];
+        const visibility = frame.pipeline.visibility.zoneVisibilityById[zoneVisual.zoneId];
+        if (!zone || !visibility?.isVisible)
+            continue;
+        if (!includeRoot && model.rootZoneIds.includes(zone.id))
+            continue;
+        const rect = projectWorldRectToScreenRect(zoneVisual.rect, camera);
+        if (rect.width < minVisibleSize || rect.height < minVisibleSize) {
+            continue;
+        }
+        zoneTargets.push({
+            key: `zone:${zoneVisual.zoneId}`,
+            kind: "zone",
+            zoneId: zoneVisual.zoneId,
+            label: zone.name,
+            rect,
+            depth: getZoneDepth(model, zoneVisual.zoneId),
+        });
+    }
+    for (const pathVisual of typedValues(frame.pipeline.graphLayout.pathsById)) {
+        const visibility = frame.pipeline.visibility.pathVisibilityById[pathVisual.pathId];
+        if (!visibility?.shouldRenderNode || !pathVisual.rect)
+            continue;
+        const rect = projectWorldRectToScreenRect(pathVisual.rect, camera);
+        if (rect.width < minVisibleSize || rect.height < minVisibleSize) {
+            continue;
+        }
+        pathTargets.push({
+            key: `path:${pathVisual.pathId}`,
+            kind: "path",
+            pathId: pathVisual.pathId,
+            label: pathVisual.path.name,
+            rect,
+        });
+    }
+    return [
+        ...zoneTargets
+            .sort((a, b) => a.depth - b.depth)
+            .map(({ depth: _depth, ...target }) => target),
+        ...pathTargets,
+    ];
+}
+export function resolveMoveEditorDragOrigin(layoutModel, target, frame) {
+    if (target.kind === "zone") {
+        const zoneLayout = getZoneLayout(layoutModel, target.zoneId);
+        if (!zoneLayout)
+            return undefined;
+        return {
+            kind: "zone",
+            zoneId: target.zoneId,
+            originX: zoneLayout.x,
+            originY: zoneLayout.y,
+        };
+    }
+    return {
+        kind: "path",
+        pathId: target.pathId,
+        origin: resolvePathMoveOriginSnapshot({
+            frame,
+            layoutModel,
+            pathId: target.pathId,
+        }),
+    };
+}
+export function resolveGroupZoneDragOrigin(params) {
+    const resolved = resolveZoneGroupOrigins(params);
+    if (!resolved)
+        return undefined;
+    return {
+        kind: "zone-group",
+        primaryZoneId: resolved.primaryZoneId,
+        originsByZoneId: resolved.originsByZoneId,
+    };
+}
+export function moveEditorTargetByScreenDelta(params) {
+    const { layoutModel, camera, origin, deltaX, deltaY, gridSnap, } = params;
+    if (origin.kind === "zone") {
+        const { nextX, nextY } = resolveSnappedMove({
+            originX: origin.originX,
+            originY: origin.originY,
+            deltaX,
+            deltaY,
+            camera,
+            gridSnap,
+        });
+        return updateZoneLayout(layoutModel, origin.zoneId, {
+            x: nextX,
+            y: nextY,
+        });
+    }
+    if (origin.kind === "zone-group") {
+        const primaryOrigin = origin.originsByZoneId[origin.primaryZoneId];
+        if (!primaryOrigin)
+            return layoutModel;
+        const { effectiveDeltaX, effectiveDeltaY } = resolveSnappedMove({
+            originX: primaryOrigin.x,
+            originY: primaryOrigin.y,
+            deltaX,
+            deltaY,
+            camera,
+            gridSnap,
+        });
+        return applyZoneOriginsDelta({
+            layoutModel,
+            originsByZoneId: origin.originsByZoneId,
+            deltaX: effectiveDeltaX,
+            deltaY: effectiveDeltaY,
+        });
+    }
+    if (origin.kind === "path-group") {
+        const primaryOrigin = origin.originsByPathId[origin.primaryPathId];
+        if (!primaryOrigin)
+            return layoutModel;
+        const { effectiveDeltaX, effectiveDeltaY } = resolveSnappedMove({
+            originX: primaryOrigin.x,
+            originY: primaryOrigin.y,
+            deltaX,
+            deltaY,
+            camera,
+            gridSnap,
+        });
+        let nextLayoutModel = layoutModel;
+        for (const [pathId, pathOrigin] of Object.entries(origin.originsByPathId)) {
+            nextLayoutModel = applyPathMovePosition({
+                layoutModel: nextLayoutModel,
+                pathId,
+                origin: pathOrigin,
+                x: roundCoordinate(pathOrigin.x + effectiveDeltaX),
+                y: roundCoordinate(pathOrigin.y + effectiveDeltaY),
+            });
+        }
+        return nextLayoutModel;
+    }
+    const { nextX, nextY } = resolveSnappedMove({
+        originX: origin.origin.x,
+        originY: origin.origin.y,
+        deltaX,
+        deltaY,
+        camera,
+        gridSnap,
+    });
+    return applyPathMovePosition({
+        layoutModel,
+        pathId: origin.pathId,
+        origin: origin.origin,
+        x: nextX,
+        y: nextY,
+    });
+}
+export function resolveZoneResizeOrigin(layoutModel, zoneId) {
+    const zoneLayout = getZoneLayout(layoutModel, zoneId);
+    if (!zoneLayout)
+        return undefined;
+    return {
+        zoneId,
+        originWidth: zoneLayout.width ?? 0,
+        originHeight: zoneLayout.height ?? 0,
+    };
+}
+export function resizeZoneByScreenDelta(params) {
+    const { layoutModel, camera, origin, deltaX, deltaY, minWidth = DEFAULT_MIN_ZONE_WIDTH, minHeight = DEFAULT_MIN_ZONE_HEIGHT, gridSnap, } = params;
+    const currentLayout = getZoneLayout(layoutModel, origin.zoneId);
+    if (!currentLayout)
+        return layoutModel;
+    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 updateZoneLayout(layoutModel, origin.zoneId, {
+        width: nextWidth,
+        height: nextHeight,
+        anchors: {
+            inlet: resolveResizedAnchor({
+                kind: "inlet",
+                width: nextWidth,
+                height: nextHeight,
+                current: currentLayout.anchors.inlet,
+            }),
+            outlet: resolveResizedAnchor({
+                kind: "outlet",
+                width: nextWidth,
+                height: nextHeight,
+                current: currentLayout.anchors.outlet,
+            }),
+        },
+    });
+}
+export function alignZonesByMode(params) {
+    const { layoutModel, zoneIds, mode, gridSnap } = params;
+    const entries = zoneIds
+        .map((zoneId) => ({
+        zoneId,
+        layout: getZoneLayout(layoutModel, zoneId),
+    }))
+        .filter((entry) => Boolean(entry.layout));
+    if (entries.length < 2)
+        return layoutModel;
+    const reference = mode === "left"
+        ? Math.min(...entries.map((entry) => entry.layout.x))
+        : mode === "right"
+            ? Math.max(...entries.map((entry) => entry.layout.x + (entry.layout.width ?? 0)))
+            : mode === "top"
+                ? Math.min(...entries.map((entry) => entry.layout.y))
+                : mode === "bottom"
+                    ? Math.max(...entries.map((entry) => entry.layout.y + (entry.layout.height ?? 0)))
+                    : mode === "center-horizontal"
+                        ? entries.reduce((sum, entry) => sum + entry.layout.x + (entry.layout.width ?? 0) / 2, 0) / entries.length
+                        : entries.reduce((sum, entry) => sum + entry.layout.y + (entry.layout.height ?? 0) / 2, 0) / entries.length;
+    const snappedReference = snapCoordinate(reference, gridSnap);
+    let nextLayoutModel = layoutModel;
+    for (const entry of entries) {
+        nextLayoutModel = updateZoneLayout(nextLayoutModel, entry.zoneId, {
+            x: mode === "left"
+                ? snappedReference
+                : mode === "right"
+                    ? snapCoordinate(snappedReference - (entry.layout.width ?? 0), gridSnap)
+                    : mode === "center-horizontal"
+                        ? snapCoordinate(snappedReference - (entry.layout.width ?? 0) / 2, gridSnap)
+                        : entry.layout.x,
+            y: mode === "top"
+                ? snappedReference
+                : mode === "bottom"
+                    ? snapCoordinate(snappedReference - (entry.layout.height ?? 0), gridSnap)
+                    : mode === "center-vertical"
+                        ? snapCoordinate(snappedReference - (entry.layout.height ?? 0) / 2, gridSnap)
+                        : entry.layout.y,
+        });
+    }
+    return nextLayoutModel;
+}
+export function distributeZonesByMode(params) {
+    const { layoutModel, zoneIds, mode, gridSnap } = params;
+    const axis = mode === "horizontal" ? "x" : "y";
+    const sizeKey = mode === "horizontal" ? "width" : "height";
+    const entries = zoneIds
+        .map((zoneId) => ({
+        zoneId,
+        layout: getZoneLayout(layoutModel, zoneId),
+    }))
+        .filter((entry) => Boolean(entry.layout))
+        .sort((a, b) => a.layout[axis] - b.layout[axis]);
+    if (entries.length < 3)
+        return layoutModel;
+    const first = entries[0];
+    const last = entries[entries.length - 1];
+    const span = last.layout[axis] + (last.layout[sizeKey] ?? 0) - first.layout[axis];
+    const occupied = entries.reduce((sum, entry) => sum + (entry.layout[sizeKey] ?? 0), 0);
+    const gap = (span - occupied) / (entries.length - 1);
+    let cursor = first.layout[axis] + (first.layout[sizeKey] ?? 0) + gap;
+    let nextLayoutModel = layoutModel;
+    for (const entry of entries.slice(1, -1)) {
+        const snapped = snapCoordinate(cursor, gridSnap);
+        nextLayoutModel = updateZoneLayout(nextLayoutModel, entry.zoneId, {
+            x: mode === "horizontal" ? snapped : entry.layout.x,
+            y: mode === "vertical" ? snapped : entry.layout.y,
+        });
+        cursor += (entry.layout[sizeKey] ?? 0) + gap;
+    }
+    return nextLayoutModel;
+}

package/dist/zoneReparent.d.ts

@@ -0,0 +1,46 @@
+import { type UniverseLayoutModel, type UniverseModel, type ZoneId } from "@zoneflow/core";
+import type { Rect } from "@zoneflow/renderer-dom";
+export declare function resolveZoneReparentCandidate(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneId: ZoneId;
+}): {
+    candidateParentZoneId: string | null;
+    currentParentZoneId: string | null;
+    worldRect: undefined;
+} | {
+    candidateParentZoneId: string | null;
+    currentParentZoneId: string | null;
+    worldRect: Rect;
+};
+export declare function resolveZonePlacementAtWorldRect(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    worldRect: Rect;
+}): {
+    parentZoneId: ZoneId | null;
+    x: number;
+    y: number;
+    worldRect: Rect;
+};
+export declare function commitZoneReparentAtCurrentPosition(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneId: ZoneId;
+}): {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    nextParentZoneId: ZoneId | null;
+    didReparent: boolean;
+};
+export declare const reparentZoneAtCurrentPosition: typeof commitZoneReparentAtCurrentPosition;
+export declare function commitZoneGroupReparentAtCurrentPosition(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneIds: ZoneId[];
+}): {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    reparentedZoneIds: ZoneId[];
+    didReparent: boolean;
+};

package/dist/zoneReparent.js

@@ -0,0 +1,173 @@
+import { canZoneContainChildren, collectSubtreeZoneIds, getZoneDepth, getZoneLayout, moveZone, updateZoneLayout, } from "@zoneflow/core";
+import { containsPoint, getRectArea, roundCoordinate, typedValues, } from "./moveEditorShared";
+import { ROOT_WORLD_ORIGIN, resolveWorldZoneOrigin, resolveWorldZoneRect, } from "./zoneGeometry";
+function resolveContainingParentZoneId(params) {
+    const { model, layoutModel, centerPoint, cache, invalidZoneIds, } = params;
+    let parentZoneId = null;
+    let bestDepth = -1;
+    let bestArea = Number.POSITIVE_INFINITY;
+    for (const candidateZone of typedValues(model.zonesById)) {
+        if (invalidZoneIds?.has(candidateZone.id))
+            continue;
+        if (!canZoneContainChildren(candidateZone))
+            continue;
+        const candidateRect = resolveWorldZoneRect({
+            model,
+            layoutModel,
+            zoneId: candidateZone.id,
+            cache,
+        });
+        if (!candidateRect || !containsPoint(candidateRect, centerPoint)) {
+            continue;
+        }
+        const candidateDepth = getZoneDepth(model, candidateZone.id);
+        const candidateArea = getRectArea(candidateRect);
+        if (candidateDepth > bestDepth ||
+            (candidateDepth === bestDepth && candidateArea < bestArea)) {
+            parentZoneId = candidateZone.id;
+            bestDepth = candidateDepth;
+            bestArea = candidateArea;
+        }
+    }
+    return parentZoneId;
+}
+export function resolveZoneReparentCandidate(params) {
+    const { model, layoutModel, zoneId, } = params;
+    const zone = model.zonesById[zoneId];
+    const zoneLayout = getZoneLayout(layoutModel, zoneId);
+    if (!zone || !zoneLayout) {
+        return {
+            candidateParentZoneId: null,
+            currentParentZoneId: null,
+            worldRect: undefined,
+        };
+    }
+    const cache = new Map();
+    const worldRect = resolveWorldZoneRect({
+        model,
+        layoutModel,
+        zoneId,
+        cache,
+    });
+    if (!worldRect) {
+        return {
+            candidateParentZoneId: zone.parentZoneId,
+            currentParentZoneId: zone.parentZoneId,
+            worldRect: undefined,
+        };
+    }
+    const centerPoint = {
+        x: worldRect.x + worldRect.width / 2,
+        y: worldRect.y + worldRect.height / 2,
+    };
+    const invalidZoneIds = new Set(collectSubtreeZoneIds(model, zoneId));
+    const nextParentZoneId = resolveContainingParentZoneId({
+        model,
+        layoutModel,
+        centerPoint,
+        cache,
+        invalidZoneIds,
+    });
+    return {
+        candidateParentZoneId: nextParentZoneId,
+        currentParentZoneId: zone.parentZoneId,
+        worldRect,
+    };
+}
+export function resolveZonePlacementAtWorldRect(params) {
+    const { model, layoutModel, worldRect } = params;
+    const centerPoint = {
+        x: worldRect.x + worldRect.width / 2,
+        y: worldRect.y + worldRect.height / 2,
+    };
+    const cache = new Map();
+    const parentZoneId = resolveContainingParentZoneId({
+        model,
+        layoutModel,
+        centerPoint,
+        cache,
+    });
+    const parentOrigin = parentZoneId
+        ? resolveWorldZoneOrigin({
+            model,
+            layoutModel,
+            zoneId: parentZoneId,
+        })
+        : ROOT_WORLD_ORIGIN;
+    return {
+        parentZoneId,
+        x: roundCoordinate(worldRect.x - parentOrigin.x),
+        y: roundCoordinate(worldRect.y - parentOrigin.y),
+        worldRect,
+    };
+}
+export function commitZoneReparentAtCurrentPosition(params) {
+    const { model, layoutModel, zoneId, } = params;
+    const resolved = resolveZoneReparentCandidate({
+        model,
+        layoutModel,
+        zoneId,
+    });
+    if (!resolved.worldRect ||
+        resolved.candidateParentZoneId === resolved.currentParentZoneId) {
+        return {
+            model,
+            layoutModel,
+            nextParentZoneId: resolved.candidateParentZoneId,
+            didReparent: false,
+        };
+    }
+    const nextModel = moveZone(model, zoneId, resolved.candidateParentZoneId);
+    const nextParentOrigin = resolved.candidateParentZoneId
+        ? resolveWorldZoneOrigin({
+            model,
+            layoutModel,
+            zoneId: resolved.candidateParentZoneId,
+        })
+        : ROOT_WORLD_ORIGIN;
+    const nextLayoutModel = updateZoneLayout(layoutModel, zoneId, {
+        x: roundCoordinate(resolved.worldRect.x - nextParentOrigin.x),
+        y: roundCoordinate(resolved.worldRect.y - nextParentOrigin.y),
+    });
+    return {
+        model: nextModel,
+        layoutModel: nextLayoutModel,
+        nextParentZoneId: resolved.candidateParentZoneId,
+        didReparent: true,
+    };
+}
+export const reparentZoneAtCurrentPosition = commitZoneReparentAtCurrentPosition;
+export function commitZoneGroupReparentAtCurrentPosition(params) {
+    const { model, layoutModel, zoneIds } = params;
+    const uniqueZoneIds = Array.from(new Set(zoneIds)).filter((zoneId) => Boolean(model.zonesById[zoneId]));
+    if (uniqueZoneIds.length === 0) {
+        return {
+            model,
+            layoutModel,
+            reparentedZoneIds: [],
+            didReparent: false,
+        };
+    }
+    const sortedZoneIds = [...uniqueZoneIds].sort((a, b) => getZoneDepth(model, a) - getZoneDepth(model, b));
+    let nextModel = model;
+    let nextLayoutModel = layoutModel;
+    const reparentedZoneIds = [];
+    for (const zoneId of sortedZoneIds) {
+        const result = commitZoneReparentAtCurrentPosition({
+            model: nextModel,
+            layoutModel: nextLayoutModel,
+            zoneId,
+        });
+        nextModel = result.model;
+        nextLayoutModel = result.layoutModel;
+        if (result.didReparent) {
+            reparentedZoneIds.push(zoneId);
+        }
+    }
+    return {
+        model: nextModel,
+        layoutModel: nextLayoutModel,
+        reparentedZoneIds,
+        didReparent: reparentedZoneIds.length > 0,
+    };
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@zoneflow/editor-dom",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git@github-groobee:groobee/zoneflow.git",
+    "directory": "packages/editor-dom"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": ["dist"],
+  "dependencies": {
+    "@zoneflow/core": "workspace:*",
+    "@zoneflow/renderer-dom": "workspace:*"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "type-check": "tsc -p tsconfig.json --noEmit"
+  }
+}