@zoneflow/editor-dom 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./zoneMoveEditor";
+export * from "./pathCreateEditor";
+export { alignPathsByMode, alignZonesByMode, commitZoneGroupReparentAtCurrentPosition, commitZoneReparentAtCurrentPosition, distributePathsByMode, distributeZonesByMode, resolveGroupPathDragOrigin, resolveGroupZoneDragOrigin, resolveZonePlacementAtWorldRect, resolvePathResizeOrigin, resizePathNodeByScreenDelta, } from "./zoneMoveEditor";
+export type { PathResizeOrigin } from "./zoneMoveEditor";
+export { resolvePathOutputAnchorScreenRect, retargetPathFromOutputAnchorDrag, } from "./pathCreateEditor";

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from "./zoneMoveEditor";
+export * from "./pathCreateEditor";
+export { alignPathsByMode, alignZonesByMode, commitZoneGroupReparentAtCurrentPosition, commitZoneReparentAtCurrentPosition, distributePathsByMode, distributeZonesByMode, resolveGroupPathDragOrigin, resolveGroupZoneDragOrigin, resolveZonePlacementAtWorldRect, resolvePathResizeOrigin, resizePathNodeByScreenDelta, } from "./zoneMoveEditor";
+export { resolvePathOutputAnchorScreenRect, retargetPathFromOutputAnchorDrag, } from "./pathCreateEditor";

package/dist/moveEditorShared.d.ts

@@ -0,0 +1,87 @@
+import type { PathId, Point, ZoneId } from "@zoneflow/core";
+import type { CameraState, Rect } from "@zoneflow/renderer-dom";
+export type MoveEditorTarget = {
+    key: string;
+    kind: "zone";
+    zoneId: ZoneId;
+    label: string;
+    rect: Rect;
+} | {
+    key: string;
+    kind: "path";
+    pathId: PathId;
+    label: string;
+    rect: Rect;
+};
+export type MoveEditorTargetOptions = {
+    includeRoot?: boolean;
+    minVisibleSize?: number;
+};
+export type PathMoveCoordinateSpace = "route-offset" | "component-layout";
+export type PathMoveOriginSnapshot = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    componentId: "body" | "label" | null;
+    coordinateSpace: PathMoveCoordinateSpace;
+};
+export type MoveEditorDragOrigin = {
+    kind: "zone";
+    zoneId: ZoneId;
+    originX: number;
+    originY: number;
+} | {
+    kind: "zone-group";
+    primaryZoneId: ZoneId;
+    originsByZoneId: Record<ZoneId, Point>;
+} | {
+    kind: "path";
+    pathId: PathId;
+    origin: PathMoveOriginSnapshot;
+} | {
+    kind: "path-group";
+    primaryPathId: PathId;
+    originsByPathId: Record<PathId, PathMoveOriginSnapshot>;
+};
+export type ZoneResizeOrigin = {
+    zoneId: ZoneId;
+    originWidth: number;
+    originHeight: number;
+};
+export type PathResizeOrigin = {
+    pathId: PathId;
+    componentId: "body" | "label";
+    originX: number;
+    originY: number;
+    originWidth: number;
+    originHeight: number;
+};
+export type GridSnapOptions = {
+    enabled?: boolean;
+    size?: number;
+};
+export type ZoneAlignMode = "left" | "right" | "top" | "bottom" | "center-horizontal" | "center-vertical";
+export type ZoneDistributeMode = "horizontal" | "vertical";
+export type PathAlignMode = ZoneAlignMode;
+export type PathDistributeMode = ZoneDistributeMode;
+export declare function typedValues<TKey extends string, TValue>(record: Record<TKey, TValue>): TValue[];
+export declare function projectWorldRectToScreenRect(rect: Rect, camera: CameraState): Rect;
+export declare function roundCoordinate(value: number): number;
+export declare function resolveSnapSize(options?: GridSnapOptions): number | null;
+export declare function snapCoordinate(value: number, options?: GridSnapOptions): number;
+export declare function resolveSnappedMove(params: {
+    originX: number;
+    originY: number;
+    deltaX: number;
+    deltaY: number;
+    camera: CameraState;
+    gridSnap?: GridSnapOptions;
+}): {
+    nextX: number;
+    nextY: number;
+    effectiveDeltaX: number;
+    effectiveDeltaY: number;
+};
+export declare function containsPoint(rect: Rect, point: Point): boolean;
+export declare function getRectArea(rect: Rect): number;

package/dist/moveEditorShared.js

@@ -0,0 +1,48 @@
+export function typedValues(record) {
+    return Object.values(record);
+}
+export function projectWorldRectToScreenRect(rect, camera) {
+    return {
+        x: camera.x + rect.x * camera.zoom,
+        y: camera.y + rect.y * camera.zoom,
+        width: rect.width * camera.zoom,
+        height: rect.height * camera.zoom,
+    };
+}
+export function roundCoordinate(value) {
+    return Math.round(value * 100) / 100;
+}
+export function resolveSnapSize(options) {
+    if (!options?.enabled)
+        return null;
+    const size = options.size ?? 16;
+    if (!Number.isFinite(size) || size <= 0)
+        return null;
+    return size;
+}
+export function snapCoordinate(value, options) {
+    const size = resolveSnapSize(options);
+    if (!size)
+        return roundCoordinate(value);
+    return roundCoordinate(Math.round(value / size) * size);
+}
+export function resolveSnappedMove(params) {
+    const { originX, originY, deltaX, deltaY, camera, gridSnap } = params;
+    const nextX = snapCoordinate(originX + deltaX / camera.zoom, gridSnap);
+    const nextY = snapCoordinate(originY + deltaY / camera.zoom, gridSnap);
+    return {
+        nextX,
+        nextY,
+        effectiveDeltaX: nextX - originX,
+        effectiveDeltaY: nextY - originY,
+    };
+}
+export function containsPoint(rect, point) {
+    return (point.x >= rect.x &&
+        point.x <= rect.x + rect.width &&
+        point.y >= rect.y &&
+        point.y <= rect.y + rect.height);
+}
+export function getRectArea(rect) {
+    return rect.width * rect.height;
+}

package/dist/pathCreateEditor.d.ts

@@ -0,0 +1,42 @@
+import { type PathId, type Point, type UniverseLayoutModel, type UniverseModel, type ZoneId } from "@zoneflow/core";
+import { type CameraState, type Rect, type RendererFrame } from "@zoneflow/renderer-dom";
+import type { GridSnapOptions } from "./zoneMoveEditor";
+export declare function screenPointToWorldPoint(point: Point, camera: CameraState): Point;
+export declare function resolveZoneAnchorScreenRect(params: {
+    frame: RendererFrame;
+    camera: CameraState;
+    zoneId: ZoneId;
+    kind: "inlet" | "outlet";
+}): Rect | undefined;
+export declare function resolveInputAnchorTargetZoneId(params: {
+    model: UniverseModel;
+    frame: RendererFrame;
+    camera: CameraState;
+    point: Point;
+    excludeZoneIds?: ZoneId[];
+}): ZoneId | null;
+export declare function resolvePathOutputAnchorScreenRect(params: {
+    frame: RendererFrame;
+    camera: CameraState;
+    pathId: PathId;
+}): Rect | undefined;
+export type CreatePathFromAnchorDragResult = {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    pathId: PathId;
+};
+export declare function retargetPathFromOutputAnchorDrag(params: {
+    model: UniverseModel;
+    sourceZoneId: ZoneId;
+    pathId: PathId;
+    targetZoneId?: ZoneId | null;
+}): UniverseModel | undefined;
+export declare function createPathFromOutputAnchorDrag(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    frame: RendererFrame;
+    sourceZoneId: ZoneId;
+    dropWorldPoint: Point;
+    targetZoneId?: ZoneId | null;
+    gridSnap?: GridSnapOptions;
+}): CreatePathFromAnchorDragResult | undefined;

package/dist/pathCreateEditor.js

@@ -0,0 +1,220 @@
+import { addPath, createPathId, isZoneInputEnabled, isZoneOutputEnabled, setPathTarget, updatePathLayout, } from "@zoneflow/core";
+function typedValues(record) {
+    return Object.values(record);
+}
+const DEFAULT_PATH_NODE_WIDTH = 120;
+const DEFAULT_PATH_NODE_HEIGHT = 32;
+const DEFAULT_PATH_NODE_OFFSET_X = 32;
+const DEFAULT_PATH_NODE_GAP_Y = 40;
+const DEFAULT_ANCHOR_WIDTH = 24;
+const DEFAULT_ANCHOR_ATTACH_DEPTH = 10;
+const DEFAULT_PATH_OUTPUT_HANDLE_WIDTH = 18;
+const DEFAULT_PATH_OUTPUT_HANDLE_MIN_HEIGHT = 22;
+const DEFAULT_PATH_OUTPUT_HANDLE_MAX_HEIGHT = 40;
+const DEFAULT_PATH_OUTPUT_HANDLE_MARGIN_Y = 4;
+const DEFAULT_PATH_OUTPUT_HANDLE_OVERHANG = 9;
+function roundCoordinate(value) {
+    return Math.round(value * 100) / 100;
+}
+function resolveSnapSize(options) {
+    if (!options?.enabled)
+        return null;
+    const size = options.size ?? 16;
+    if (!Number.isFinite(size) || size <= 0)
+        return null;
+    return size;
+}
+function snapCoordinate(value, options) {
+    const size = resolveSnapSize(options);
+    if (!size)
+        return roundCoordinate(value);
+    return roundCoordinate(Math.round(value / size) * size);
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function midpoint(a, b) {
+    return {
+        x: roundCoordinate((a.x + b.x) / 2),
+        y: roundCoordinate((a.y + b.y) / 2),
+    };
+}
+function containsPoint(rect, point) {
+    return (point.x >= rect.x &&
+        point.x <= rect.x + rect.width &&
+        point.y >= rect.y &&
+        point.y <= rect.y + rect.height);
+}
+function getRectArea(rect) {
+    return rect.width * rect.height;
+}
+function projectWorldRectToScreenRect(rect, camera) {
+    return {
+        x: camera.x + rect.x * camera.zoom,
+        y: camera.y + rect.y * camera.zoom,
+        width: rect.width * camera.zoom,
+        height: rect.height * camera.zoom,
+    };
+}
+function resolveZoneAnchorRect(params) {
+    const { zoneRect, anchor, kind } = params;
+    if (anchor.rect) {
+        return {
+            x: anchor.rect.x,
+            y: anchor.rect.y,
+            width: anchor.rect.width ?? DEFAULT_ANCHOR_WIDTH,
+            height: anchor.rect.height ?? zoneRect.height,
+        };
+    }
+    return {
+        x: kind === "inlet"
+            ? zoneRect.x - (DEFAULT_ANCHOR_WIDTH - DEFAULT_ANCHOR_ATTACH_DEPTH)
+            : zoneRect.x + zoneRect.width - DEFAULT_ANCHOR_ATTACH_DEPTH,
+        y: zoneRect.y,
+        width: DEFAULT_ANCHOR_WIDTH,
+        height: zoneRect.height,
+    };
+}
+export function screenPointToWorldPoint(point, camera) {
+    return {
+        x: roundCoordinate((point.x - camera.x) / camera.zoom),
+        y: roundCoordinate((point.y - camera.y) / camera.zoom),
+    };
+}
+export function resolveZoneAnchorScreenRect(params) {
+    const { frame, camera, zoneId, kind } = params;
+    const zoneVisual = frame.pipeline.graphLayout.zonesById[zoneId];
+    if (!zoneVisual)
+        return undefined;
+    if (kind === "inlet" && !isZoneInputEnabled(zoneVisual.zone))
+        return undefined;
+    if (kind === "outlet" && !isZoneOutputEnabled(zoneVisual.zone))
+        return undefined;
+    const anchorRect = resolveZoneAnchorRect({
+        zoneRect: zoneVisual.rect,
+        anchor: zoneVisual.anchors[kind],
+        kind,
+    });
+    return projectWorldRectToScreenRect(anchorRect, camera);
+}
+export function resolveInputAnchorTargetZoneId(params) {
+    const { model, frame, camera, point, excludeZoneIds } = params;
+    const excluded = new Set(excludeZoneIds ?? []);
+    let bestZoneId = null;
+    let bestArea = Number.POSITIVE_INFINITY;
+    for (const zoneVisual of typedValues(frame.pipeline.graphLayout.zonesById)) {
+        if (excluded.has(zoneVisual.zoneId))
+            continue;
+        if (!model.zonesById[zoneVisual.zoneId])
+            continue;
+        if (!isZoneInputEnabled(zoneVisual.zone))
+            continue;
+        const visibility = frame.pipeline.visibility.zoneVisibilityById[zoneVisual.zoneId];
+        if (!visibility?.isVisible)
+            continue;
+        const rect = resolveZoneAnchorScreenRect({
+            frame,
+            camera,
+            zoneId: zoneVisual.zoneId,
+            kind: "inlet",
+        });
+        if (!rect || !containsPoint(rect, point))
+            continue;
+        const area = getRectArea(rect);
+        if (area < bestArea) {
+            bestZoneId = zoneVisual.zoneId;
+            bestArea = area;
+        }
+    }
+    return bestZoneId;
+}
+export function resolvePathOutputAnchorScreenRect(params) {
+    const { frame, camera, pathId } = params;
+    const pathVisual = frame.pipeline.graphLayout.pathsById[pathId];
+    if (!pathVisual?.rect)
+        return undefined;
+    const outlet = pathVisual.outlet ?? {
+        x: pathVisual.rect.x + pathVisual.rect.width,
+        y: pathVisual.rect.y + pathVisual.rect.height / 2,
+    };
+    const height = clamp(pathVisual.rect.height * 0.72, DEFAULT_PATH_OUTPUT_HANDLE_MIN_HEIGHT, Math.min(DEFAULT_PATH_OUTPUT_HANDLE_MAX_HEIGHT, Math.max(DEFAULT_PATH_OUTPUT_HANDLE_MIN_HEIGHT, pathVisual.rect.height - DEFAULT_PATH_OUTPUT_HANDLE_MARGIN_Y * 2)));
+    const minY = pathVisual.rect.y + DEFAULT_PATH_OUTPUT_HANDLE_MARGIN_Y;
+    const maxY = pathVisual.rect.y +
+        pathVisual.rect.height -
+        DEFAULT_PATH_OUTPUT_HANDLE_MARGIN_Y -
+        height;
+    return projectWorldRectToScreenRect({
+        x: outlet.x -
+            (DEFAULT_PATH_OUTPUT_HANDLE_WIDTH - DEFAULT_PATH_OUTPUT_HANDLE_OVERHANG),
+        y: clamp(outlet.y - height / 2, minY, maxY),
+        width: DEFAULT_PATH_OUTPUT_HANDLE_WIDTH,
+        height,
+    }, camera);
+}
+export function retargetPathFromOutputAnchorDrag(params) {
+    const { model, sourceZoneId, pathId, targetZoneId, } = params;
+    const sourceZone = model.zonesById[sourceZoneId];
+    if (!sourceZone?.pathsById[pathId])
+        return undefined;
+    if (targetZoneId && !isZoneInputEnabled(model.zonesById[targetZoneId])) {
+        return undefined;
+    }
+    return setPathTarget(model, sourceZoneId, pathId, targetZoneId
+        ? {
+            universeId: model.universeId,
+            zoneId: targetZoneId,
+        }
+        : null);
+}
+export function createPathFromOutputAnchorDrag(params) {
+    const { model, layoutModel, frame, sourceZoneId, dropWorldPoint, targetZoneId, gridSnap, } = params;
+    const sourceZone = model.zonesById[sourceZoneId];
+    const sourceVisual = frame.pipeline.graphLayout.zonesById[sourceZoneId];
+    const targetVisual = targetZoneId
+        ? frame.pipeline.graphLayout.zonesById[targetZoneId]
+        : undefined;
+    if (!sourceZone || !sourceVisual)
+        return undefined;
+    if (!isZoneOutputEnabled(sourceZone))
+        return undefined;
+    if (targetZoneId && !isZoneInputEnabled(model.zonesById[targetZoneId])) {
+        return undefined;
+    }
+    const pathId = createPathId();
+    const nextPathIndex = sourceZone.pathIds.length;
+    const sourceOutlet = sourceVisual.anchors.outlet.point;
+    const targetInlet = targetVisual?.anchors.inlet?.point;
+    const desiredCenter = targetInlet
+        ? midpoint(sourceOutlet, targetInlet)
+        : dropWorldPoint;
+    const desiredRect = {
+        x: snapCoordinate(desiredCenter.x - DEFAULT_PATH_NODE_WIDTH / 2, gridSnap),
+        y: snapCoordinate(desiredCenter.y - DEFAULT_PATH_NODE_HEIGHT / 2, gridSnap),
+    };
+    const routeOffset = {
+        x: roundCoordinate(desiredRect.x - (sourceOutlet.x + DEFAULT_PATH_NODE_OFFSET_X)),
+        y: roundCoordinate(desiredRect.y -
+            (sourceOutlet.y - DEFAULT_PATH_NODE_HEIGHT / 2 + nextPathIndex * DEFAULT_PATH_NODE_GAP_Y)),
+    };
+    const ordinal = nextPathIndex + 1;
+    const nextModel = addPath(model, sourceZoneId, {
+        id: pathId,
+        key: `condition_${ordinal}`,
+        name: "Empty",
+        target: targetZoneId
+            ? {
+                universeId: model.universeId,
+                zoneId: targetZoneId,
+            }
+            : null,
+        rule: null,
+    });
+    const nextLayoutModel = updatePathLayout(layoutModel, pathId, {
+        routeOffset,
+    });
+    return {
+        model: nextModel,
+        layoutModel: nextLayoutModel,
+        pathId,
+    };
+}

package/dist/pathMoveEditor.d.ts

@@ -0,0 +1,66 @@
+import { type PathId, type UniverseLayoutModel } from "@zoneflow/core";
+import type { CameraState, Rect, RendererFrame } from "@zoneflow/renderer-dom";
+import { type GridSnapOptions, type MoveEditorDragOrigin, type PathAlignMode, type PathDistributeMode, type PathMoveOriginSnapshot, type PathResizeOrigin } from "./moveEditorShared";
+export type PathNodeSnapshot = {
+    pathId: PathId;
+    origin: PathMoveOriginSnapshot;
+    rect: Rect;
+};
+export declare function resolvePathNodeLayoutComponentId(layoutModel: UniverseLayoutModel, pathId: PathId): "body" | "label" | null;
+export declare function resolvePathMoveOriginSnapshot(params: {
+    layoutModel: UniverseLayoutModel;
+    pathId: PathId;
+    frame?: RendererFrame;
+}): PathMoveOriginSnapshot;
+export declare function resolvePathNodeSnapshot(params: {
+    frame: RendererFrame;
+    layoutModel: UniverseLayoutModel;
+    pathId: PathId;
+}): PathNodeSnapshot | undefined;
+export declare function applyPathMovePosition(params: {
+    layoutModel: UniverseLayoutModel;
+    pathId: PathId;
+    origin: PathMoveOriginSnapshot;
+    x: number;
+    y: number;
+}): UniverseLayoutModel;
+export declare function applyPathNodeSnapshotRect(params: {
+    layoutModel: UniverseLayoutModel;
+    snapshot: PathNodeSnapshot;
+    rect: Rect;
+}): UniverseLayoutModel;
+export declare function resolveGroupPathDragOrigin(params: {
+    frame: RendererFrame;
+    layoutModel: UniverseLayoutModel;
+    pathIds: PathId[];
+    primaryPathId: PathId;
+}): MoveEditorDragOrigin | undefined;
+export declare function alignPathsByMode(params: {
+    frame: RendererFrame;
+    layoutModel: UniverseLayoutModel;
+    pathIds: PathId[];
+    mode: PathAlignMode;
+    gridSnap?: GridSnapOptions;
+}): UniverseLayoutModel;
+export declare function distributePathsByMode(params: {
+    frame: RendererFrame;
+    layoutModel: UniverseLayoutModel;
+    pathIds: PathId[];
+    mode: PathDistributeMode;
+    gridSnap?: GridSnapOptions;
+}): UniverseLayoutModel;
+export declare function resolvePathResizeOrigin(params: {
+    frame: RendererFrame;
+    layoutModel: UniverseLayoutModel;
+    pathId: PathId;
+}): PathResizeOrigin | undefined;
+export declare function resizePathNodeByScreenDelta(params: {
+    layoutModel: UniverseLayoutModel;
+    camera: CameraState;
+    origin: PathResizeOrigin;
+    deltaX: number;
+    deltaY: number;
+    minWidth?: number;
+    minHeight?: number;
+    gridSnap?: GridSnapOptions;
+}): UniverseLayoutModel;