diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue index 8f088fa5..12389863 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.vue +++ b/packages/core/src/components/Nodes/NodeWrapper.vue @@ -32,6 +32,7 @@ const { getNodeTypes, nodeExtent, onNodesInitialized, + elevateNodesOnSelect, } = $(useVueFlow()) const node = $(useVModel(props, 'node')) @@ -116,7 +117,7 @@ watch( x: newX, y: newY, // if a zIndex style is present, add 1000 to it - z: (isNumber(getStyle.value.zIndex) ? getStyle.value.zIndex : 0) + (node.selected ? 1000 : 0), + z: (isNumber(getStyle.value.zIndex) ? getStyle.value.zIndex : 0) + (elevateNodesOnSelect ? (node.selected ? 1000 : 0) : 0), } updatePosition(xyzPos, parentX && parentY ? { x: parentX, y: parentY, z: parentZ || 0 } : undefined) @@ -137,21 +138,20 @@ onNodesInitialized(() => { initialized.value = true }) -onMounted(() => { - until(initialized) - .toBe(true) - .then(() => { - const extent = applyExtent(node, nodeExtent, parentNode) +/** Initial clamp of node position */ +until(initialized) + .toBe(true) + .then(() => { + const extent = applyExtent(node, nodeExtent, parentNode) - const clampedPos = clampPosition(node.computedPosition, extent) + const clampedPos = clampPosition(node.computedPosition, extent) - node.computedPosition = { ...node.computedPosition, ...clampedPos } - node.position = { - x: node.computedPosition.x - (parentNode?.computedPosition.x || 0), - y: node.computedPosition.y - (parentNode?.computedPosition.y || 0), - } - }) -}) + node.computedPosition = { ...node.computedPosition, ...clampedPos } + node.position = { + x: node.computedPosition.x - (parentNode?.computedPosition.x || 0), + y: node.computedPosition.y - (parentNode?.computedPosition.y || 0), + } + }) function updateInternals() { if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }]) diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue index 78572a93..ca5787f6 100644 --- a/packages/core/src/container/VueFlow/VueFlow.vue +++ b/packages/core/src/container/VueFlow/VueFlow.vue @@ -37,6 +37,7 @@ const props = withDefaults(defineProps(), { connectionLineStyle: undefined, autoConnect: undefined, elevateEdgesOnSelect: undefined, + elevateNodesOnSelect: undefined, }) const emit = defineEmits<{ diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts index f97bf152..33d6d58f 100644 --- a/packages/core/src/store/state.ts +++ b/packages/core/src/store/state.ts @@ -110,6 +110,7 @@ const defaultState = (): State => ({ noPanClassName: 'nopan', defaultEdgeOptions: undefined, elevateEdgesOnSelect: false, + elevateNodesOnSelect: true, __experimentalFeatures: { nestedFlow: false, diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index 1244a868..82ea1768 100644 --- a/packages/core/src/types/flow.ts +++ b/packages/core/src/types/flow.ts @@ -157,6 +157,8 @@ export interface FlowProps { defaultEdgeOptions?: DefaultEdgeOptions /** elevates edges when selected and applies z-Index to put them above their nodes */ elevateEdgesOnSelect?: boolean + /** elevates nodes when selected and applies z-Index + 1000 */ + elevateNodesOnSelect?: boolean __experimentalFeatures?: { nestedFlow?: boolean diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index cb95126e..44a3c711 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -115,6 +115,9 @@ export interface State extends Omit { defaultEdgeOptions?: DefaultEdgeOptions + elevateEdgesOnSelect: boolean + elevateNodesOnSelect: boolean + /** current vue flow version you're using */ readonly vueFlowVersion: string }