feat(zIndexMode): use it for edges too

This commit is contained in:
moklick
2025-12-01 11:04:57 +01:00
parent d59707f4f2
commit fe3bb90c54
5 changed files with 34 additions and 7 deletions

View File

@@ -368,4 +368,13 @@ export type OnBeforeDeleteBase<NodeType extends NodeBase = NodeBase, EdgeType ex
edges: EdgeType[];
}) => Promise<boolean | { nodes: NodeType[]; edges: EdgeType[] }>;
export type ZIndexMode = 'auto' | 'manual';
/**
* The `ZIndexMode` type is used to define how z-indexing is calculated for nodes and edges.
* `auto` mode will automatically manage z-indexing for selections and sub flows.
* `basic` mode will only manage z-indexing for selections.
* `manual` mode does not apply any automatic z-indexing.
*
* @public
* @default 'auto'
*/
export type ZIndexMode = 'auto' | 'basic' | 'manual';

View File

@@ -1,4 +1,13 @@
import { Connection, InternalNodeBase, Transform, errorMessages, isEdgeBase, EdgeBase } from '../..';
import {
Connection,
InternalNodeBase,
Transform,
errorMessages,
isEdgeBase,
EdgeBase,
ZIndexMode,
isManualZIndexMode,
} from '../..';
import { getOverlappingArea, boxToRect, nodeToBox, getBoundsOfBoxes, devWarn } from '../general';
// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
@@ -28,6 +37,7 @@ export type GetEdgeZIndexParams = {
selected?: boolean;
zIndex?: number;
elevateOnSelect?: boolean;
zIndexMode?: ZIndexMode;
};
/**
@@ -41,12 +51,19 @@ export function getElevatedEdgeZIndex({
selected = false,
zIndex,
elevateOnSelect = false,
zIndexMode = 'auto',
}: GetEdgeZIndexParams): number {
const manualZIndexMode = isManualZIndexMode(zIndexMode);
if (zIndex !== undefined) {
return zIndex;
}
const edgeZ = elevateOnSelect && selected ? 1000 : 0;
if (manualZIndexMode) {
return 0;
}
const edgeZ = elevateOnSelect && selected ? 1000 : 0;
const nodeZ = Math.max(
sourceNode.parentId || (elevateOnSelect && sourceNode.selected) ? sourceNode.internals.z : 0,
targetNode.parentId || (elevateOnSelect && targetNode.selected) ? targetNode.internals.z : 0

View File

@@ -117,7 +117,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
checkEquality?: boolean;
};
function isManualZIndexMode(zIndexMode?: ZIndexMode): boolean {
export function isManualZIndexMode(zIndexMode?: ZIndexMode): boolean {
return zIndexMode === 'manual';
}
@@ -129,7 +129,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
): boolean {
const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
let rootParentIndex = { i: -1 };
const rootParentIndex = { i: -1 };
let nodesInitialized = nodes.length > 0;
const tmpLookup = new Map(nodeLookup);
const selectedNodeZ: number =
@@ -229,7 +229,7 @@ function updateChildNode<NodeType extends NodeBase>(
rootParentIndex &&
!parentNode.parentId &&
parentNode.internals.rootParentIndex === undefined &&
!isManualZIndexMode(zIndexMode)
zIndexMode === 'auto'
) {
parentNode.internals.rootParentIndex = ++rootParentIndex.i;
parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * ROOT_PARENT_Z_INCREMENT;