chore(core): revert node renderer & wrapper

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

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
 import { isNumber } from '@vueuse/core'
-import type { GraphNode, NodeComponent } from '../../types'
+import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
 import { ARIA_NODE_DESC_KEY } from '../../utils/a11y'
 
-const { id, type, name, ...props } = defineProps<{
+const { id, type, name, draggable, selectable, connectable, ...props } = defineProps<{
   id: string
+  draggable: boolean
+  selectable: boolean
+  connectable: HandleConnectable
+  focusable: boolean
   type: NodeComponent | Function | Object | false
   name: string
   node: GraphNode
@@ -34,10 +38,6 @@ const {
   ariaLiveMessage,
   snapToGrid,
   snapGrid,
-  nodesDraggable,
-  elementsSelectable,
-  nodesConnectable,
-  nodesFocusable,
 } = $(useVueFlow())
 
 const updateNodePositions = useUpdateNodePositions()
@@ -48,16 +48,6 @@ const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode)
 
 const connectedEdges = $computed(() => getConnectedEdges([node], edges))
 
-const intersections = $computed(() => getIntersectingNodes(node))
-
-const draggable = $computed(() => (typeof node.draggable === 'undefined' ? nodesDraggable : node.draggable))
-
-const selectable = $computed(() => (typeof node.selectable === 'undefined' ? elementsSelectable : node.selectable))
-
-const connectable = $computed(() => (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable))
-
-const focusable = $computed(() => (typeof node.focusable === 'undefined' ? nodesFocusable : node.focusable))
-
 const nodeElement = ref<HTMLDivElement>()
 
 provide(NodeRef, nodeElement)
@@ -68,15 +58,15 @@ const dragging = useDrag({
   id,
   el: nodeElement,
   disabled: computed(() => !draggable),
-  selectable: $$(selectable),
+  selectable: computed(() => selectable),
   onStart(event, node, nodes) {
-    emit.dragStart({ event, node, nodes, intersections })
+    emit.dragStart({ event, node, nodes, intersections: getIntersectingNodes(node) })
   },
   onDrag(event, node, nodes) {
-    emit.drag({ event, node, nodes, intersections })
+    emit.drag({ event, node, nodes, intersections: getIntersectingNodes(node) })
   },
   onStop(event, node, nodes) {
-    emit.dragStop({ event, node, nodes, intersections })
+    emit.dragStop({ event, node, nodes, intersections: getIntersectingNodes(node) })
   },
 })
 

packages/core/src/container/NodeRenderer/NodeRenderer.vue

@@ -1,10 +1,21 @@
 <script lang="ts" setup>
 import { NodeWrapper } from '../../components'
-import type { GraphNode, NodeComponent } from '../../types'
+import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
 
 const slots = inject(Slots)
 
-const { nodes, getNodes, getNodesInitialized, getNodeTypes, updateNodeDimensions, emits } = $(useVueFlow())
+const {
+  nodesDraggable,
+  nodesFocusable,
+  elementsSelectable,
+  nodesConnectable,
+  nodes,
+  getNodes,
+  getNodesInitialized,
+  getNodeTypes,
+  updateNodeDimensions,
+  emits,
+} = $(useVueFlow())
 
 let resizeObserver = $ref<ResizeObserver>()
 
@@ -33,6 +44,12 @@ onMounted(() => {
 
 onBeforeUnmount(() => resizeObserver?.disconnect())
 
+const draggable = (nodeDraggable?: boolean) => (typeof nodeDraggable === 'undefined' ? nodesDraggable : nodeDraggable)
+const selectable = (nodeSelectable?: boolean) => (typeof nodeSelectable === 'undefined' ? elementsSelectable : nodeSelectable)
+const connectable = (nodeConnectable?: HandleConnectable) =>
+  typeof nodeConnectable === 'undefined' ? nodesConnectable : nodeConnectable
+const focusable = (nodeFocusable?: boolean) => (typeof nodeFocusable === 'undefined' ? nodesFocusable : nodeFocusable)
+
 function getType(type?: string, template?: GraphNode['template']) {
   const name = type || 'default'
   let nodeType = template ?? getNodeTypes[name]
@@ -75,6 +92,10 @@ export default {
         :resize-observer="resizeObserver"
         :type="getType(node.type, node.template)"
         :name="node.type || 'default'"
+        :draggable="draggable(node.draggable)"
+        :selectable="selectable(node.selectable)"
+        :connectable="connectable(node.connectable)"
+        :focusable="focusable(node.focusable)"
         :node="node"
       />
     </template>