@zoneflow/editor-dom 0.0.6 → 0.0.7

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./zoneMoveEditor";
 export * from "./pathCreateEditor";
+export * from "./zOrderEditor";
 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

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

package/dist/zOrderEditor.d.ts

@@ -0,0 +1,14 @@
+import { type PathId, type UniverseLayoutModel, type UniverseModel, type ZoneId } from "@zoneflow/core";
+export type ZOrderMode = "send-to-back" | "send-backward" | "bring-forward" | "bring-to-front";
+export declare function reorderZonesByZOrderMode(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    zoneIds: ZoneId[];
+    mode: ZOrderMode;
+}): UniverseLayoutModel;
+export declare function reorderPathsByZOrderMode(params: {
+    model: UniverseModel;
+    layoutModel: UniverseLayoutModel;
+    pathIds: PathId[];
+    mode: ZOrderMode;
+}): UniverseLayoutModel;

package/dist/zOrderEditor.js

@@ -0,0 +1,126 @@
+import { updatePathLayout, updateZoneLayout, } from "@zoneflow/core";
+function reorderIds(params) {
+    const { orderedIds, selectedIds, mode } = params;
+    if (orderedIds.length < 2 || selectedIds.size === 0)
+        return orderedIds;
+    if (mode === "send-to-back") {
+        return [
+            ...orderedIds.filter((id) => selectedIds.has(id)),
+            ...orderedIds.filter((id) => !selectedIds.has(id)),
+        ];
+    }
+    if (mode === "bring-to-front") {
+        return [
+            ...orderedIds.filter((id) => !selectedIds.has(id)),
+            ...orderedIds.filter((id) => selectedIds.has(id)),
+        ];
+    }
+    const nextIds = [...orderedIds];
+    if (mode === "send-backward") {
+        for (let index = 1; index < nextIds.length; index += 1) {
+            const currentId = nextIds[index];
+            const previousId = nextIds[index - 1];
+            if (!currentId || !previousId)
+                continue;
+            if (!selectedIds.has(currentId) || selectedIds.has(previousId))
+                continue;
+            nextIds[index - 1] = currentId;
+            nextIds[index] = previousId;
+        }
+        return nextIds;
+    }
+    for (let index = nextIds.length - 2; index >= 0; index -= 1) {
+        const currentId = nextIds[index];
+        const nextId = nextIds[index + 1];
+        if (!currentId || !nextId)
+            continue;
+        if (!selectedIds.has(currentId) || selectedIds.has(nextId))
+            continue;
+        nextIds[index] = nextId;
+        nextIds[index + 1] = currentId;
+    }
+    return nextIds;
+}
+function sortByCurrentZOrder(params) {
+    const { ids, getZOrder } = params;
+    return [...ids]
+        .map((id, index) => ({
+        id,
+        index,
+        zOrder: getZOrder(id) ?? index,
+    }))
+        .sort((a, b) => a.zOrder - b.zOrder || a.index - b.index)
+        .map((entry) => entry.id);
+}
+export function reorderZonesByZOrderMode(params) {
+    const { model, layoutModel, zoneIds, mode } = params;
+    const selectedIds = new Set(zoneIds);
+    if (selectedIds.size === 0)
+        return layoutModel;
+    const selectedIdsByParent = new Map();
+    for (const zoneId of selectedIds) {
+        const zone = model.zonesById[zoneId];
+        if (!zone)
+            continue;
+        const parentZoneId = zone.parentZoneId;
+        const current = selectedIdsByParent.get(parentZoneId) ?? new Set();
+        current.add(zoneId);
+        selectedIdsByParent.set(parentZoneId, current);
+    }
+    let nextLayoutModel = layoutModel;
+    for (const [parentZoneId, selectedSiblingIds] of selectedIdsByParent) {
+        const siblingIds = parentZoneId === null
+            ? model.rootZoneIds
+            : model.zonesById[parentZoneId]?.childZoneIds ?? [];
+        const orderedSiblingIds = sortByCurrentZOrder({
+            ids: siblingIds.filter((zoneId) => Boolean(model.zonesById[zoneId])),
+            getZOrder: (zoneId) => layoutModel.zoneLayoutsById[zoneId]?.zOrder,
+        });
+        const reorderedSiblingIds = reorderIds({
+            orderedIds: orderedSiblingIds,
+            selectedIds: selectedSiblingIds,
+            mode,
+        });
+        reorderedSiblingIds.forEach((zoneId, zOrder) => {
+            if (!nextLayoutModel.zoneLayoutsById[zoneId])
+                return;
+            nextLayoutModel = updateZoneLayout(nextLayoutModel, zoneId, {
+                zOrder,
+            });
+        });
+    }
+    return nextLayoutModel;
+}
+function getAllPathIds(model) {
+    const pathIds = [];
+    const zoneIds = Object.keys(model.zonesById);
+    for (const zoneId of zoneIds) {
+        const zone = model.zonesById[zoneId];
+        if (!zone)
+            continue;
+        pathIds.push(...zone.pathIds.filter((pathId) => Boolean(zone.pathsById[pathId])));
+    }
+    return pathIds;
+}
+export function reorderPathsByZOrderMode(params) {
+    const { model, layoutModel, pathIds, mode } = params;
+    const selectedIds = new Set(pathIds);
+    if (selectedIds.size === 0)
+        return layoutModel;
+    const orderedPathIds = sortByCurrentZOrder({
+        ids: getAllPathIds(model),
+        getZOrder: (pathId) => layoutModel.pathLayoutsById[pathId]?.zOrder,
+    });
+    const reorderedPathIds = reorderIds({
+        orderedIds: orderedPathIds,
+        selectedIds,
+        mode,
+    });
+    let nextLayoutModel = layoutModel;
+    reorderedPathIds.forEach((pathId, zOrder) => {
+        nextLayoutModel = updatePathLayout(nextLayoutModel, pathId, {
+            zOrder,
+        });
+    });
+    return nextLayoutModel;
+}

package/dist/zoneMoveEditor.d.ts

@@ -6,6 +6,7 @@ export { alignPathsByMode, distributePathsByMode, resolveGroupPathDragOrigin, re
 export { commitZoneGroupReparentAtCurrentPosition, commitZoneReparentAtCurrentPosition, reparentZoneAtCurrentPosition, resolveZonePlacementAtWorldRect, resolveZoneReparentCandidate, } from "./zoneReparent";
 export declare function getMoveEditorTargets(params: {
     model: UniverseModel;
+    layoutModel?: UniverseLayoutModel;
     frame: RendererFrame;
     camera: CameraState;
     options?: MoveEditorTargetOptions;

package/dist/zoneMoveEditor.js

@@ -76,7 +76,7 @@ function resolveResizedAnchor(params) {
     };
 }
 export function getMoveEditorTargets(params) {
-    const { model, frame, camera, options, } = params;
+    const { model, layoutModel, frame, camera, options, } = params;
     const includeRoot = options?.includeRoot ?? true;
     const minVisibleSize = options?.minVisibleSize ?? DEFAULT_MIN_VISIBLE_SIZE;
     const zoneTargets = [];
@@ -99,9 +99,10 @@ export function getMoveEditorTargets(params) {
             label: zone.name,
             rect,
             depth: getZoneDepth(model, zoneVisual.zoneId),
+            zOrder: layoutModel?.zoneLayoutsById[zoneVisual.zoneId]?.zOrder,
         });
     }
-    for (const pathVisual of typedValues(frame.pipeline.graphLayout.pathsById)) {
+    for (const [index, pathVisual] of typedValues(frame.pipeline.graphLayout.pathsById).entries()) {
         const visibility = frame.pipeline.visibility.pathVisibilityById[pathVisual.pathId];
         if (!visibility?.shouldRenderNode || !pathVisual.rect)
             continue;
@@ -115,13 +116,20 @@ export function getMoveEditorTargets(params) {
             pathId: pathVisual.pathId,
             label: pathVisual.path.name,
             rect,
+            zOrder: layoutModel?.pathLayoutsById[pathVisual.pathId]?.zOrder ?? index,
         });
     }
     return [
         ...zoneTargets
-            .sort((a, b) => a.depth - b.depth)
-            .map(({ depth: _depth, ...target }) => target),
-        ...pathTargets,
+            .sort((a, b) => {
+            const aOrder = a.zOrder ?? 0;
+            const bOrder = b.zOrder ?? 0;
+            return a.depth - b.depth || aOrder - bOrder;
+        })
+            .map(({ depth: _depth, zOrder: _zOrder, ...target }) => target),
+        ...pathTargets
+            .sort((a, b) => (a.zOrder ?? 0) - (b.zOrder ?? 0))
+            .map(({ zOrder: _zOrder, ...target }) => target),
     ];
 }
 export function resolveMoveEditorDragOrigin(params) {

package/package.json

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