feat(core,nodes): add elevateNodesOnSelect option

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

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(() => {
+/** Initial clamp of node position */
-  until(initialized)
+until(initialized)
-    .toBe(true)
+  .toBe(true)
-    .then(() => {
+  .then(() => {
-      const extent = applyExtent(node, nodeExtent, parentNode)
+    const extent = applyExtent(node, nodeExtent, parentNode)
 
-      const clampedPos = clampPosition(node.computedPosition, extent)
+    const clampedPos = clampPosition(node.computedPosition, extent)
 
-      node.computedPosition = { ...node.computedPosition, ...clampedPos }
+    node.computedPosition = { ...node.computedPosition, ...clampedPos }
-      node.position = {
+    node.position = {
-        x: node.computedPosition.x - (parentNode?.computedPosition.x || 0),
+      x: node.computedPosition.x - (parentNode?.computedPosition.x || 0),
-        y: node.computedPosition.y - (parentNode?.computedPosition.y || 0),
+      y: node.computedPosition.y - (parentNode?.computedPosition.y || 0),
-      }
+    }
-    })
+  })
-})
 
 function updateInternals() {
   if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])

packages/core/src/container/VueFlow/VueFlow.vue

@@ -37,6 +37,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   connectionLineStyle: undefined,
   autoConnect: undefined,
   elevateEdgesOnSelect: undefined,
+  elevateNodesOnSelect: undefined,
 })
 
 const emit = defineEmits<{

packages/core/src/store/state.ts

@@ -110,6 +110,7 @@ const defaultState = (): State => ({
   noPanClassName: 'nopan',
   defaultEdgeOptions: undefined,
   elevateEdgesOnSelect: false,
+  elevateNodesOnSelect: true,
 
   __experimentalFeatures: {
     nestedFlow: false,

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

packages/core/src/types/store.ts

@@ -115,6 +115,9 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
 
   defaultEdgeOptions?: DefaultEdgeOptions
 
+  elevateEdgesOnSelect: boolean
+  elevateNodesOnSelect: boolean
+
   /** current vue flow version you're using */
   readonly vueFlowVersion: string
 }