refactor(types,flow)!: Use reactivity transform and remove store property

# What's changed?

* Remove store property from usevueflow return value
* All previously available properties are still there, just not nested inside an additional store object to avoid confusion + duplicates
* use reactivity transform to get rid of .value calls

package/src/components/ConnectionLine/ConnectionLine.vue

@@ -1,22 +1,34 @@
 <script lang="ts" setup>
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { ConnectionLineType, GraphNode, HandleElement, Position } from '../../types'
+import { ConnectionLineType, GraphNode, HandleElement, HandleType, Position } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 
 interface ConnectionLineProps {
   sourceNode: GraphNode
 }
+
 const props = defineProps<ConnectionLineProps>()
-const { store } = useVueFlow()
+
+const {
+  getNodes,
+  connectionHandleId,
+  connectionHandleType,
+  connectionPosition,
+  connectionLineType,
+  connectionLineStyle,
+  connectionNodeId,
+  viewport,
+} = $(useVueFlow())
 
 const slots = inject(Slots)?.['connection-line']
+
 const hasSlot = slots?.({})
 
 const sourceHandle =
-  store.connectionHandleId && store.connectionHandleType
-    ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
-    : store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
+  connectionHandleId && connectionHandleType
+    ? props.sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
+    : connectionHandleType && props.sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
 
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
@@ -25,21 +37,22 @@ const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
 const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
+
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
 
-const targetX = computed(() => (store.connectionPosition.x - store.viewport.x) / store.viewport.zoom)
-const targetY = computed(() => (store.connectionPosition.y - store.viewport.y) / store.viewport.zoom)
+const targetX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom)
+const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom)
 
 const dAttr = computed(() => {
-  let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`
-  switch (store.connectionLineType) {
+  let path = `M${sourceX},${sourceY} ${targetX},${targetY}`
+  switch (connectionLineType) {
     case ConnectionLineType.Bezier:
       path = getBezierPath({
         sourceX,
         sourceY,
         sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
-        targetY: targetY.value,
+        targetX,
+        targetY,
         targetPosition,
       })
       break
@@ -48,8 +61,8 @@ const dAttr = computed(() => {
         sourceX,
         sourceY,
         sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
-        targetY: targetY.value,
+        targetX,
+        targetY,
         targetPosition,
         borderRadius: 0,
       })
@@ -59,8 +72,8 @@ const dAttr = computed(() => {
         sourceX,
         sourceY,
         sourcePosition: sourceHandle?.position,
-        targetX: targetX.value,
-        targetY: targetY.value,
+        targetX,
+        targetY,
         targetPosition,
       })
       break
@@ -85,13 +98,13 @@ export default {
         targetX,
         targetY,
         targetPosition,
-        connectionLineType: store.connectionLineType,
-        connectionLineStyle: store.connectionLineStyle,
-        nodes: store.getNodes,
+        connectionLineType,
+        connectionLineStyle,
+        nodes: getNodes,
         sourceNode: props.sourceNode,
         sourceHandle,
       }"
     />
-    <path v-else :d="dAttr" class="vue-flow__connection-path" :style="store.connectionLineStyle || {}" />
+    <path v-else :d="dAttr" class="vue-flow__connection-path" :style="connectionLineStyle || {}" />
   </g>
 </template>

package/src/components/Edges/EdgeText.vue

@@ -12,12 +12,12 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
 
-const edgeRefBbox = ref<Rect>({ x: 0, y: 0, width: 0, height: 0 })
+let edgeRefBbox = $ref<Rect>({ x: 0, y: 0, width: 0, height: 0 })
 
 onMounted(() => {
-  edgeRefBbox.value = edgeRef.value.getBBox()
+  edgeRefBbox = edgeRef.value.getBBox()
 })
-const transform = computed(() => `translate(${props.x - edgeRefBbox.value.width / 2} ${props.y - edgeRefBbox.value.height / 2})`)
+const transform = computed(() => `translate(${props.x - edgeRefBbox.width / 2} ${props.y - edgeRefBbox.height / 2})`)
 </script>
 <script lang="ts">
 export default {

package/src/components/Edges/EdgeWrapper.vue

@@ -19,17 +19,17 @@ const props = defineProps<EdgeWrapper>()
 
 const slots = inject(Slots)
 
-const { store } = useVueFlow()
+const { hooks, connectionMode, setState, addSelectedEdges, getEdgeTypes, edgeUpdaterRadius, noPanClassName } = $(useVueFlow())
 
-const edge = useVModel(props, 'edge')
+const edge = $(useVModel(props, 'edge'))
 
-const name = ref(edge.value.type ?? 'default')
+let name = $ref(edge.type ?? 'default')
 watch(
-  () => edge.value.type,
-  (v) => v && (name.value = v),
+  () => edge.type,
+  (v) => v && (name = v),
 )
 
-const updating = ref(false)
+let updating = $ref(false)
 
 onMounted(() => {
   watch(
@@ -52,10 +52,10 @@ onMounted(() => {
         targetHandle.value,
         targetPosition.value,
       )
-      if (edge.value.sourceX !== sourceX) edge.value.sourceX = sourceX
-      if (edge.value.sourceY !== sourceY) edge.value.sourceY = sourceY
-      if (edge.value.targetX !== targetX) edge.value.targetX = targetX
-      if (edge.value.targetY !== targetY) edge.value.targetY = targetY
+      if (edge.sourceX !== sourceX) edge.sourceX = sourceX
+      if (edge.sourceY !== sourceY) edge.sourceY = sourceY
+      if (edge.targetX !== targetX) edge.targetX = targetX
+      if (edge.targetY !== targetY) edge.targetY = targetY
     },
     { immediate: true },
   )
@@ -64,37 +64,40 @@ onMounted(() => {
 const { onMouseDown } = useHandle()
 
 const onEdgeClick = (event: MouseEvent) => {
-  const data = { event, edge: edge.value }
+  const data = { event, edge }
   if (props.selectable) {
-    store.nodesSelectionActive = false
-    store.addSelectedEdges([edge.value])
+    setState({
+      nodesSelectionActive: false,
+    })
+
+    addSelectedEdges([edge])
   }
-  store.hooks.edgeClick.trigger(data)
+  hooks.edgeClick.trigger(data)
 }
 
-const onEdgeContextMenu = (event: MouseEvent) => store.hooks.edgeContextMenu.trigger({ event, edge: edge.value })
+const onEdgeContextMenu = (event: MouseEvent) => hooks.edgeContextMenu.trigger({ event, edge })
 
-const onDoubleClick = (event: MouseEvent) => store.hooks.edgeDoubleClick.trigger({ event, edge: edge.value })
+const onDoubleClick = (event: MouseEvent) => hooks.edgeDoubleClick.trigger({ event, edge })
 
-const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: edge.value })
+const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge })
 
-const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: edge.value })
+const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge })
 
-const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: edge.value })
+const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge })
 
-const onEdgeUpdaterMouseEnter = () => (updating.value = true)
+const onEdgeUpdaterMouseEnter = () => (updating = true)
 
-const onEdgeUpdaterMouseOut = () => (updating.value = false)
+const onEdgeUpdaterMouseOut = () => (updating = false)
 
 const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, true)
 
 const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, false)
 
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
-  const nodeId = isSourceHandle ? edge.value.target : edge.value.source
-  const handleId = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
+  const nodeId = isSourceHandle ? edge.target : edge.source
+  const handleId = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
 
-  store.hooks.edgeUpdateStart.trigger({ event, edge: edge.value })
+  hooks.edgeUpdateStart.trigger({ event, edge })
 
   onMouseDown(
     event,
@@ -103,14 +106,14 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
     isSourceHandle,
     undefined,
     isSourceHandle ? 'target' : 'source',
-    (connection) => store.hooks.edgeUpdate.trigger({ edge: edge.value, connection }),
-    () => store.hooks.edgeUpdateEnd.trigger({ event, edge: edge.value }),
+    (connection) => hooks.edgeUpdate.trigger({ edge, connection }),
+    () => hooks.edgeUpdateEnd.trigger({ event, edge }),
   )
 }
 
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles = computed(() => {
-  if (store.connectionMode === ConnectionMode.Strict) {
+  if (connectionMode === ConnectionMode.Strict) {
     return props.targetNode.handleBounds.target
   }
 
@@ -120,7 +123,7 @@ const targetNodeHandles = computed(() => {
 })
 
 const sourceNodeHandles = computed(() => {
-  if (store.connectionMode === ConnectionMode.Strict) {
+  if (connectionMode === ConnectionMode.Strict) {
     return props.sourceNode.handleBounds.source
   }
 
@@ -129,9 +132,9 @@ const sourceNodeHandles = computed(() => {
   return sourceBounds ?? targetBounds
 })
 
-const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.value.sourceHandle))
+const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.sourceHandle))
 
-const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
+const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.targetHandle))
 
 const sourcePosition = controlledComputed(sourceHandle, () =>
   sourceHandle.value ? sourceHandle.value.position : Position.Bottom,
@@ -139,49 +142,47 @@ const sourcePosition = controlledComputed(sourceHandle, () =>
 
 const targetPosition = controlledComputed(targetHandle, () => (targetHandle.value ? targetHandle.value.position : Position.Top))
 
-const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius)
-
 const type = computed(() => {
-  let edgeType = edge.value.template ?? store.getEdgeTypes[name.value]
+  let edgeType = edge.template ?? getEdgeTypes[name]
   const instance = getCurrentInstance()
 
   if (typeof edgeType === 'string') {
     if (instance) {
       const components = Object.keys(instance.appContext.components)
-      if (components && components.includes(name.value)) {
-        edgeType = resolveComponent(name.value, false) as EdgeComponent
+      if (components && components.includes(name)) {
+        edgeType = resolveComponent(name, false) as EdgeComponent
       }
     }
   }
   if (typeof edgeType !== 'string') return edgeType
 
-  const slot = slots?.[`edge-${name.value}`]
+  const slot = slots?.[`edge-${name}`]
   if (!slot?.({})) {
-    console.warn(`[vueflow]: Edge type "${edge.value.type}" not found and no edge-slot detected. Using fallback type "default".`)
-    name.value = 'default'
-    return store.getEdgeTypes.default
+    console.warn(`[vueflow]: Edge type "${edge.type}" not found and no edge-slot detected. Using fallback type "default".`)
+    name = 'default'
+    return getEdgeTypes.default
   }
 
   return slot
 })
 
 const getClass = computed(() => {
-  const extraClass = edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class
+  const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
   return [
     'vue-flow__edge',
-    `vue-flow__edge-${name.value}`,
-    store.noPanClassName,
+    `vue-flow__edge-${name}`,
+    noPanClassName,
     {
-      selected: edge.value.selected,
-      animated: edge.value.animated,
+      selected: edge.selected,
+      animated: edge.animated,
       inactive: !props.selectable,
-      updating: updating.value,
+      updating,
     },
     extraClass,
   ]
 })
 
-const getStyle = () => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style) as CSSProperties
+const getStyle = () => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
 </script>
 <script lang="ts">
 export default {

package/src/components/Handle/Handle.vue

@@ -4,38 +4,45 @@ import { ConnectionMode, Position } from '../../types'
 import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/handle'
 
-const { id, hooks, connectionStartHandle, connectionMode } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   type: 'source',
   position: 'top' as Position,
   connectable: true,
 })
 
+const { id, hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
+
 const nodeId = inject(NodeId, '')
 
-const handleId = computed(
-  () => props.id ?? (connectionMode.value === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
+const handleId = $computed(
+  () => props.id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
 )
 
 const { onMouseDown, onClick } = useHandle()
-const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(event, handleId.value, nodeId, props.type === 'target', props.isValidConnection, undefined)
-const onClickHandler = (event: MouseEvent) => onClick(event, handleId.value ?? null, nodeId, props.type, props.isValidConnection)
+
+const onMouseDownHandler = (event: MouseEvent) => {
+  onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
+}
+
+const onClickHandler = (event: MouseEvent) => {
+  onClick(event, handleId ?? null, nodeId, props.type, props.isValidConnection)
+}
 
 const getClasses = computed(() => {
   return [
     'vue-flow__handle',
     `vue-flow__handle-${props.position}`,
-    `vue-flow__handle-${handleId.value}`,
+    `vue-flow__handle-${handleId}`,
     'nodrag',
     {
       source: props.type !== 'target',
       target: props.type === 'target',
       connectable: props.connectable,
       connecting:
-        connectionStartHandle.value?.nodeId === nodeId &&
-        connectionStartHandle.value?.handleId === handleId.value &&
-        connectionStartHandle.value?.type === props.type,
+        connectionStartHandle &&
+        connectionStartHandle.nodeId === nodeId &&
+        connectionStartHandle.handleId === handleId &&
+        connectionStartHandle.type === props.type,
     },
   ]
 })

package/src/components/Nodes/NodeWrapper.vue

@@ -21,36 +21,48 @@ provide(NodeId, props.id)
 
 const slots = inject(Slots)
 
-const { store } = useVueFlow()
+const {
+  viewport,
+  noDragClassName,
+  noPanClassName,
+  hooks,
+  selectNodesOnDrag,
+  setState,
+  updateNodePosition,
+  updateNodeDimensions,
+  getNode,
+  getNodeTypes,
+  addSelectedNodes,
+} = $(useVueFlow())
 
-const node = useVModel(props, 'node')
+const node = $(useVModel(props, 'node'))
 
-const name = ref(node.value.type ?? 'default')
+let name = $ref(node.type ?? 'default')
 watch(
-  () => node.value.type,
-  (v) => v && (name.value = v),
+  () => node.type,
+  (v) => v && (name = v),
 )
 
 const nodeElement = ref()
 
 const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
-  handle: node.value.dragHandle,
+  handle: node.dragHandle,
   disabled: !props.draggable,
   grid: props.snapGrid,
-  cancel: `.${store.noDragClassName}`,
+  cancel: `.${noDragClassName}`,
   enableUserSelectHack: false,
-  scale: store.viewport.zoom,
+  scale: viewport.zoom,
 })
 
 onBeforeMount(() => {
-  store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
+  updateNodePosition({ id: node.id, diff: { x: 0, y: 0 } })
 })
 
 onMounted(() => {
   debouncedWatch(
-    () => store.viewport.zoom,
+    () => viewport.zoom,
     () => {
-      scale.value = store.viewport.zoom
+      scale.value = viewport.zoom
     },
     { debounce: 5, flush: 'post' },
   )
@@ -58,42 +70,42 @@ onMounted(() => {
 
 onMounted(() => {
   const observer = useResizeObserver(nodeElement, () =>
-    store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }]),
+    updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }]),
   )
 
   watch(
-    [() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition],
+    [() => node.type, () => node.sourcePosition, () => node.targetPosition],
     () => {
-      store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])
+      updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value }])
     },
     { flush: 'post' },
   )
 
   onBeforeUnmount(() => observer.stop())
 
-  store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value, forceUpdate: true }])
+  updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }])
 })
 
 watch(
   [
-    () => node.value.position,
-    () => store.getNode(node.value.parentNode!)?.computedPosition,
-    () => node.value.selected,
-    () => store.getNode(node.value.parentNode!)?.selected,
+    () => node.position,
+    () => getNode(node.parentNode!)?.computedPosition,
+    () => node.selected,
+    () => getNode(node.parentNode!)?.selected,
   ],
   ([pos, parent]) => {
     const xyzPos = {
       ...pos,
-      z: node.value.dragging || node.value.selected ? 1000 : 0,
+      z: node.dragging || node.selected ? 1000 : 0,
     }
 
     if (parent) {
-      node.value.computedPosition = getXYZPos(parent, xyzPos)
+      node.computedPosition = getXYZPos(parent, xyzPos)
     } else {
-      node.value.computedPosition = xyzPos
+      node.computedPosition = xyzPos
     }
 
-    node.value.handleBounds = getHandleBounds(nodeElement.value, scale.value)
+    node.handleBounds = getHandleBounds(nodeElement.value, scale.value)
   },
   { deep: true, flush: 'post' },
 )
@@ -103,108 +115,116 @@ onUnmounted(() => {
 })
 
 const onMouseEnter = (event: MouseEvent) => {
-  if (!node.value.dragging) {
-    store.hooks.nodeMouseEnter.trigger({ event, node: node.value })
+  if (!node.dragging) {
+    hooks.nodeMouseEnter.trigger({ event, node })
   }
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!node.value.dragging) {
-    store.hooks.nodeMouseMove.trigger({ event, node: node.value })
+  if (!node.dragging) {
+    hooks.nodeMouseMove.trigger({ event, node })
   }
 }
 
 const onMouseLeave = (event: MouseEvent) => {
-  if (!node.value.dragging) {
-    store.hooks.nodeMouseLeave.trigger({ event, node: node.value })
+  if (!node.dragging) {
+    hooks.nodeMouseLeave.trigger({ event, node })
   }
 }
 
 const onContextMenu = (event: MouseEvent) => {
-  store.hooks.nodeContextMenu.trigger({
+  hooks.nodeContextMenu.trigger({
     event,
-    node: node.value,
+    node,
   })
 }
 
-const onDoubleClick = (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: node.value })
+const onDoubleClick = (event: MouseEvent) => hooks.nodeDoubleClick.trigger({ event, node })
 
 const onSelectNode = (event: MouseEvent) => {
   if (!props.draggable) {
     if (props.selectable) {
-      store.nodesSelectionActive = false
-      if (!node.value.selected) store.addSelectedNodes([node.value])
+      setState({
+        nodesSelectionActive: false,
+      })
+
+      if (!node.selected) addSelectedNodes([node])
     }
-    store.hooks.nodeClick.trigger({ event, node: node.value })
+    hooks.nodeClick.trigger({ event, node })
   }
 }
 
 const type = computed(() => {
-  let nodeType = node.value.template ?? store.getNodeTypes[name.value]
+  let nodeType = node.template ?? getNodeTypes[name]
   const instance = getCurrentInstance()
 
   if (typeof nodeType === 'string') {
     if (instance) {
       const components = Object.keys(instance.appContext.components)
-      if (components && components.includes(name.value)) {
-        nodeType = resolveComponent(name.value, false) as NodeComponent
+      if (components && components.includes(name)) {
+        nodeType = resolveComponent(name, false) as NodeComponent
       }
     }
   }
   if (typeof nodeType !== 'string') return nodeType
 
-  const slot = slots?.[`node-${name.value}`]
+  const slot = slots?.[`node-${name}`]
   if (!slot?.({})) {
-    console.warn(`[vueflow]: Node type "${node.value.type}" not found and no node-slot detected. Using fallback type "default".`)
-    name.value = 'default'
-    return store.getNodeTypes.default
+    console.warn(`[vueflow]: Node type "${node.type}" not found and no node-slot detected. Using fallback type "default".`)
+    name = 'default'
+    return getNodeTypes.default
   }
 
   return slot
 })
 
 onDragStart(({ event }) => {
-  store.addSelectedNodes([])
-  store.hooks.nodeDragStart.trigger({ event, node: node.value })
+  addSelectedNodes([])
+  hooks.nodeDragStart.trigger({ event, node })
 
-  if (store.selectNodesOnDrag && props.selectable) {
-    store.nodesSelectionActive = false
+  if (selectNodesOnDrag && props.selectable) {
+    setState({
+      nodesSelectionActive: false,
+    })
 
-    if (!node.value.selected) store.addSelectedNodes([node.value])
-  } else if (!store.selectNodesOnDrag && !node.value.selected && props.selectable) {
-    store.nodesSelectionActive = false
-    store.addSelectedNodes([])
+    if (!node.selected) addSelectedNodes([node])
+  } else if (!selectNodesOnDrag && !node.selected && props.selectable) {
+    setState({
+      nodesSelectionActive: false,
+    })
+
+    addSelectedNodes([])
   }
 })
 
 onDrag(({ event, data: { deltaX, deltaY } }) => {
-  store.updateNodePosition({ id: node.value.id, diff: { x: deltaX, y: deltaY }, dragging: true })
-  store.hooks.nodeDrag.trigger({ event, node: node.value })
+  updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: true })
+  hooks.nodeDrag.trigger({ event, node })
 })
 
 onDragStop(({ event, data: { deltaX, deltaY } }) => {
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
-  if (!node.value.dragging) {
-    if (props.selectable && !store.selectNodesOnDrag && !node.value.selected) {
-      store.addSelectedNodes([node.value])
+  if (!node.dragging) {
+    if (props.selectable && !selectNodesOnDrag && !node.selected) {
+      addSelectedNodes([node])
     }
-    store.hooks.nodeClick.trigger({ event, node: node.value })
+    hooks.nodeClick.trigger({ event, node })
     return
   }
-  store.updateNodePosition({ id: node.value.id, diff: { x: deltaX, y: deltaY }, dragging: false })
-  store.hooks.nodeDragStop.trigger({ event, node: node.value })
+  updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: false })
+  hooks.nodeDragStop.trigger({ event, node })
 })
 
 const getClass = computed(() => {
-  const extraClass = node.value.class instanceof Function ? node.value.class(node.value) : node.value.class
+  const extraClass = node.class instanceof Function ? node.class(node) : node.class
   return [
     'vue-flow__node',
-    `vue-flow__node-${name.value}`,
-    store.noPanClassName,
+    `vue-flow__node-${name}`,
+    noPanClassName,
     {
-      dragging: node.value.dragging,
-      selected: node.value.selected,
+      dragging: node.dragging,
+      selected: node.selected,
       selectable: props.selectable,
     },
     extraClass,
@@ -212,15 +232,15 @@ const getClass = computed(() => {
 })
 
 const getStyle = computed(() => {
-  const styles = (node.value.style instanceof Function ? node.value.style(node.value) : node.value.style) || {}
-  const width = node.value.width instanceof Function ? node.value.width(node.value) : node.value.width
-  const height = node.value.height instanceof Function ? node.value.height(node.value) : node.value.height
+  const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
+  const width = node.width instanceof Function ? node.width(node) : node.width
+  const height = node.height instanceof Function ? node.height(node) : node.height
   if (width) styles.width = typeof width === 'string' ? width : `${width}px`
   if (height) styles.height = typeof height === 'string' ? height : `${height}px`
 
   return {
-    zIndex: node.value.computedPosition.z,
-    transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
+    zIndex: node.computedPosition.z,
+    transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
     pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
     ...styles,
   } as CSSProperties

package/src/components/NodesSelection/NodesSelection.vue

@@ -3,51 +3,55 @@ import { useDraggableCore } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
 
-const { store } = useVueFlow()
+const { hooks, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, updateNodePosition, noPanClassName } = $(useVueFlow())
 
 const el = templateRef<HTMLDivElement>('el', null)
 
-const selectedNodesBBox = computed(() => getRectOfNodes(store.getSelectedNodes))
+const selectedNodesBBox = $computed(() => getRectOfNodes(getSelectedNodes))
 
 const innerStyle = computed(() => ({
-  width: `${selectedNodesBBox.value.width}px`,
-  height: `${selectedNodesBBox.value.height}px`,
-  top: `${selectedNodesBBox.value.y}px`,
-  left: `${selectedNodesBBox.value.x}px`,
+  width: `${selectedNodesBBox.width}px`,
+  height: `${selectedNodesBBox.height}px`,
+  top: `${selectedNodesBBox.y}px`,
+  left: `${selectedNodesBBox.x}px`,
 }))
 
-const transform = computed(() => `translate(${store.viewport.x}px,${store.viewport.y}px) scale(${store.viewport.zoom})`)
+const transform = computed(() => `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`)
 
-watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
+watch(selectedNodesBBox, (v) => {
+  setState({
+    selectedNodesBbox: v,
+  })
+})
 
-const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })
+const onContextMenu = (event: MouseEvent) => hooks.selectionContextMenu.trigger({ event, nodes: getSelectedNodes })
 
 const { onDragStart, onDrag, onDragStop, scale } = useDraggableCore(el, {
-  grid: store.snapToGrid ? store.snapGrid : undefined,
+  grid: snapToGrid ? snapGrid : undefined,
   enableUserSelectHack: false,
-  scale: store.viewport.zoom,
+  scale: viewport.zoom,
 })
 
 onMounted(() => {
   debouncedWatch(
-    () => store.viewport.zoom,
+    () => viewport.zoom,
     () => {
-      scale.value = store.viewport.zoom
+      scale.value = viewport.zoom
     },
     { debounce: 5 },
   )
 })
 
-onDragStart(({ event }) => store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes }))
+onDragStart(({ event }) => hooks.selectionDragStart.trigger({ event, nodes: getSelectedNodes }))
 
 onDrag(({ event, data: { deltaX, deltaY } }) => {
-  store.hooks.selectionDrag.trigger({ event, nodes: store.getSelectedNodes })
-  store.updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
+  hooks.selectionDrag.trigger({ event, nodes: getSelectedNodes })
+  updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
 })
 
 onDragStop(({ event }) => {
-  store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
-  store.getSelectedNodes.forEach((node) => (node.dragging = false))
+  hooks.selectionDragStop.trigger({ event, nodes: getSelectedNodes })
+  getSelectedNodes.forEach((node) => (node.dragging = false))
 })
 </script>
 <script lang="ts">
@@ -56,7 +60,7 @@ export default {
 }
 </script>
 <template>
-  <div class="vue-flow__nodesselection vue-flow__container" :class="store.noPanClassName" :style="{ transform }">
+  <div class="vue-flow__nodesselection vue-flow__container" :class="noPanClassName" :style="{ transform }">
     <div ref="el" class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
   </div>
 </template>

package/src/components/UserSelection/UserSelection.vue

@@ -5,11 +5,11 @@ import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
 
-const { store } = useVueFlow()
+const { userSelectionActive, setState, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } = $(useVueFlow())
 const el = templateRef('user-selection', null)
 
-const prevNodes = ref(0)
-const prevEdges = ref(0)
+let prevNodes = $ref(0)
+let prevEdges = $ref(0)
 const initialRect = () => ({
   width: 0,
   height: 0,
@@ -20,20 +20,23 @@ const initialRect = () => ({
   draw: false,
 })
 
-const rect = ref<Rect>(initialRect())
+let rect = $ref<Rect>(initialRect())
 
 const reset = () => {
-  rect.value = initialRect()
-  store.userSelectionActive = false
-  prevNodes.value = 0
-  prevEdges.value = 0
+  rect = initialRect()
+  prevNodes = 0
+  prevEdges = 0
+
+  setState({
+    userSelectionActive: false,
+  })
 }
 
 const onMouseDown = (event: MouseEvent) => {
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  rect.value = {
+  rect = {
     width: 0,
     height: 0,
     startX: mousePos.x,
@@ -43,47 +46,55 @@ const onMouseDown = (event: MouseEvent) => {
     draw: true,
   }
 
-  store.userSelectionActive = true
-  store.nodesSelectionActive = false
+  setState({
+    userSelectionActive: true,
+    nodesSelectionActive: false,
+  })
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!store.userSelectionActive || !rect.value.draw) return
+  if (!userSelectionActive || !rect.draw) return
 
   const mousePos = getMousePosition(event)
   if (!mousePos) return
 
-  const startX = rect.value.startX
-  const startY = rect.value.startY
+  const startX = rect.startX
+  const startY = rect.startY
 
   const nextUserSelectRect: Rect = {
-    ...rect.value,
-    x: mousePos.x < startX ? mousePos.x : rect.value.x,
-    y: mousePos.y < startY ? mousePos.y : rect.value.y,
+    ...rect,
+    x: mousePos.x < startX ? mousePos.x : rect.x,
+    y: mousePos.y < startY ? mousePos.y : rect.y,
     width: Math.abs(mousePos.x - startX),
     height: Math.abs(mousePos.y - startY),
   }
 
-  const selectedNodes = getNodesInside(store.getNodes, rect.value, store.viewport)
-  const selectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
+  const selectedNodes = getNodesInside(getNodes, rect, viewport)
+  const selectedEdges = getConnectedEdges(selectedNodes, getEdges)
 
-  rect.value = nextUserSelectRect
+  rect = nextUserSelectRect
 
-  store.addSelectedNodes(selectedNodes)
-  store.addSelectedEdges(selectedEdges)
+  addSelectedNodes(selectedNodes)
+  addSelectedEdges(selectedEdges)
 
-  prevNodes.value = selectedNodes.length
-  prevEdges.value = selectedEdges.length
+  prevNodes = selectedNodes.length
+  prevEdges = selectedEdges.length
 }
 
 const onMouseUp = () => {
-  store.nodesSelectionActive = prevNodes.value > 0
-  rect.value = initialRect()
-  store.userSelectionActive = false
+  rect = initialRect()
+
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+    userSelectionActive: false,
+  })
 }
 
 const onMouseLeave = () => {
-  store.nodesSelectionActive = false
+  setState({
+    nodesSelectionActive: prevNodes > 0,
+  })
+
   reset()
 }