chore(core): cleanup and replace const with function

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

packages/core/src/components/Edges/EdgeText.vue

@@ -18,7 +18,13 @@ let box = $ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })
 
 const el = $ref<SVGTextElement | null>(null)
 
-const getBox = () => {
+const transform = computed(() => `translate(${x - box.width / 2} ${y - box.height / 2})`)
+
+onMounted(getBox)
+
+watch([() => x, () => y, $$(el), () => label], getBox)
+
+function getBox() {
   if (!el) return
 
   const nextBox = el.getBBox()
@@ -27,12 +33,6 @@ const getBox = () => {
     box = nextBox
   }
 }
-
-onMounted(getBox)
-
-watch([() => x, () => y, $$(el), () => label], getBox)
-
-const transform = computed(() => `translate(${x - box.width / 2} ${y - box.height / 2})`)
 </script>
 
 <script lang="ts">

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -23,6 +23,7 @@ const EdgeWrapper = defineComponent({
       edgeUpdaterRadius,
       emits,
       nodesSelectionActive,
+      noPanClassName,
       getEdges,
       getEdgeTypes,
       removeSelectedEdges,
@@ -57,20 +58,6 @@ const EdgeWrapper = defineComponent({
 
     const targetNode = $computed(() => findNode(edge.target))
 
-    const onEdgeUpdaterMouseEnter = () => (mouseOver = true)
-
-    const onEdgeUpdaterMouseOut = () => (mouseOver = false)
-
-    const onEdgeUpdate = (connection: Connection) => {
-      if (!connectionExists(connection, getEdges.value)) hooks.emit.update({ edge, connection })
-    }
-
-    const onEdgeUpdateEnd = () => {
-      if (!mouseEvent.value) return
-      hooks.emit.updateEnd({ event: mouseEvent.value, edge })
-      updating = false
-    }
-
     const { handlePointerDown } = useHandle({
       nodeId,
       handleId,
@@ -81,61 +68,6 @@ const EdgeWrapper = defineComponent({
       onEdgeUpdateEnd,
     })
 
-    const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
-      nodeId.value = isSourceHandle ? edge.target : edge.source
-      handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
-      type.value = isSourceHandle ? 'target' : 'source'
-      edgeUpdaterType.value = type.value
-      mouseEvent.value = event
-
-      hooks.emit.updateStart({ event, edge })
-
-      handlePointerDown(event)
-    }
-
-    const onEdgeClick = (event: MouseEvent) => {
-      const data = { event, edge }
-      if (props.selectable) {
-        nodesSelectionActive.value = false
-
-        addSelectedEdges([edge])
-      }
-      hooks.emit.click(data)
-    }
-
-    const onEdgeContextMenu = (event: MouseEvent) => hooks.emit.contextMenu({ event, edge })
-
-    const onDoubleClick = (event: MouseEvent) => hooks.emit.doubleClick({ event, edge })
-
-    const onEdgeMouseEnter = (event: MouseEvent) => hooks.emit.mouseEnter({ event, edge })
-
-    const onEdgeMouseMove = (event: MouseEvent) => hooks.emit.mouseMove({ event, edge })
-
-    const onEdgeMouseLeave = (event: MouseEvent) => hooks.emit.mouseLeave({ event, edge })
-
-    const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
-      updating = true
-      handleEdgeUpdater(event, true)
-    }
-
-    const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
-      updating = true
-      handleEdgeUpdater(event, false)
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (elementSelectionKeys.includes(event.key) && props.selectable) {
-        const unselect = event.key === 'Escape'
-
-        if (unselect) {
-          edgeEl.value?.blur()
-          removeSelectedEdges([findEdge(props.id)!])
-        } else {
-          addSelectedEdges([findEdge(props.id)!])
-        }
-      }
-    }
-
     return () => {
       if (!sourceNode || !targetNode) return null
 
@@ -181,6 +113,7 @@ const EdgeWrapper = defineComponent({
           'class': [
             'vue-flow__edge',
             `vue-flow__edge-${props.type === false ? 'default' : props.name}`,
+            noPanClassName.value,
             edgeClass,
             {
               updating: mouseOver,
@@ -279,6 +212,89 @@ const EdgeWrapper = defineComponent({
         ],
       )
     }
+
+    function onEdgeUpdaterMouseEnter() {
+      mouseOver = true
+    }
+
+    function onEdgeUpdaterMouseOut() {
+      mouseOver = false
+    }
+
+    function onEdgeUpdate(connection: Connection) {
+      if (!connectionExists(connection, getEdges.value)) hooks.emit.update({ edge, connection })
+    }
+
+    function onEdgeUpdateEnd() {
+      if (!mouseEvent.value) return
+      hooks.emit.updateEnd({ event: mouseEvent.value, edge })
+      updating = false
+    }
+
+    function handleEdgeUpdater(event: MouseEvent, isSourceHandle: boolean) {
+      nodeId.value = isSourceHandle ? edge.target : edge.source
+      handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
+      type.value = isSourceHandle ? 'target' : 'source'
+      edgeUpdaterType.value = type.value
+      mouseEvent.value = event
+
+      hooks.emit.updateStart({ event, edge })
+
+      handlePointerDown(event)
+    }
+
+    function onEdgeClick(event: MouseEvent) {
+      const data = { event, edge }
+      if (props.selectable) {
+        nodesSelectionActive.value = false
+
+        addSelectedEdges([edge])
+      }
+      hooks.emit.click(data)
+    }
+
+    function onEdgeContextMenu(event: MouseEvent) {
+      hooks.emit.contextMenu({ event, edge })
+    }
+
+    function onDoubleClick(event: MouseEvent) {
+      hooks.emit.doubleClick({ event, edge })
+    }
+
+    function onEdgeMouseEnter(event: MouseEvent) {
+      hooks.emit.mouseEnter({ event, edge })
+    }
+
+    function onEdgeMouseMove(event: MouseEvent) {
+      hooks.emit.mouseMove({ event, edge })
+    }
+
+    function onEdgeMouseLeave(event: MouseEvent) {
+      hooks.emit.mouseLeave({ event, edge })
+    }
+
+    function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {
+      updating = true
+      handleEdgeUpdater(event, true)
+    }
+
+    function onEdgeUpdaterTargetMouseDown(event: MouseEvent) {
+      updating = true
+      handleEdgeUpdater(event, false)
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (elementSelectionKeys.includes(event.key) && props.selectable) {
+        const unselect = event.key === 'Escape'
+
+        if (unselect) {
+          edgeEl.value?.blur()
+          removeSelectedEdges([findEdge(props.id)!])
+        } else {
+          addSelectedEdges([findEdge(props.id)!])
+        }
+      }
+    }
   },
 })
 

packages/core/src/components/Panel/Panel.vue

@@ -4,6 +4,7 @@ import type { PanelProps } from '../../types'
 const props = defineProps<PanelProps>()
 
 const { userSelectionActive } = useVueFlow()
+
 const positionClasses = computed(() => `${props.position}`.split('-'))
 </script>
 

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -19,14 +19,9 @@ const {
   getEdges,
   getNodesInitialized,
   getEdgeTypes,
-  noPanClassName,
   elevateEdgesOnSelect,
 } = $(useVueFlow())
 
-const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
-const updatable = (u?: EdgeUpdatable) => (typeof u === 'undefined' ? edgesUpdatable : u)
-const focusable = (f?: boolean) => (typeof f === 'undefined' ? edgesFocusable : f)
-
 const sourceNode = $(
   controlledComputed(
     () => connectionStartHandle?.nodeId,
@@ -73,7 +68,11 @@ onBeforeUnmount(() => {
   stop?.()
 })
 
-const getType = (type?: string, template?: GraphEdge['template']) => {
+const selectable = (edgeSelectable?: boolean) => (typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable)
+const updatable = (edgeUpdatable?: EdgeUpdatable) => (typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable)
+const focusable = (edgeFocusable?: boolean) => (typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable)
+
+function getType(type?: string, template?: GraphEdge['template']) {
   const name = type || 'default'
   let edgeType = template ?? getEdgeTypes[name]
   const instance = getCurrentInstance()
@@ -96,11 +95,6 @@ const getType = (type?: string, template?: GraphEdge['template']) => {
 
   return slot
 }
-
-const getClass = (edge: GraphEdge) => {
-  const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
-  return [noPanClassName, extraClass]
-}
 </script>
 
 <script lang="ts">
@@ -124,7 +118,6 @@ export default {
           :selectable="selectable(edge.selectable)"
           :updatable="updatable(edge.updatable)"
           :focusable="focusable(edge.focusable)"
-          :class="getClass(edge)"
         />
       </g>
     </svg>

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

@@ -17,11 +17,6 @@ const {
   emits,
 } = $(useVueFlow())
 
-const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
-const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
-const connectable = (c?: HandleConnectable) => (typeof c === 'undefined' ? nodesConnectable : c)
-const focusable = (f?: boolean) => (typeof f === 'undefined' ? nodesFocusable : f)
-
 let resizeObserver = $ref<ResizeObserver>()
 
 until(() => nodes.length > 0 && getNodesInitialized.length === nodes.length)
@@ -49,7 +44,13 @@ onMounted(() => {
 
 onBeforeUnmount(() => resizeObserver?.disconnect())
 
-const getType = (type?: string, template?: GraphNode['template']) => {
+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]
   const instance = getCurrentInstance()

packages/core/src/container/Viewport/Viewport.vue

@@ -44,9 +44,6 @@ let zoomedWithRightMouseButton = $ref(false)
 
 let mouseButton = $ref(0)
 
-const isRightClickPan = (pan: FlowOptions['panOnDrag'], usedButton: number) =>
-  usedButton === 2 && Array.isArray(pan) && pan.includes(2)
-
 const panKeyPressed = useKeyPress(panActivationKeyCode)
 
 const isConnecting = $computed(() => !!connectionStartHandle)
@@ -57,30 +54,6 @@ const isSelecting = computed(
   () => (selectionKeyCode !== true && selectionKeyPressed) || (selectionKeyCode === true && shouldPanOnDrag.value !== true),
 )
 
-const viewChanged = (prevViewport: ViewportTransform, eventTransform: ZoomTransform): boolean =>
-  (prevViewport.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
-  (prevViewport.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
-  (prevViewport.zoom !== eventTransform.k && !isNaN(eventTransform.k))
-
-const eventToFlowTransform = (eventTransform: ZoomTransform): ViewportTransform => ({
-  x: eventTransform.x,
-  y: eventTransform.y,
-  zoom: eventTransform.k,
-})
-
-const setDimensions = () => {
-  if (!viewportEl.value) return
-
-  const { width, height } = getDimensions(viewportEl.value)
-
-  if (width === 0 || height === 0) warn('The Vue Flow parent container needs a width and a height to render the graph.')
-
-  dimensions.width = width || 500
-  dimensions.height = height || 500
-}
-
-const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
-
 let prevTransform = $ref<ViewportTransform>({
   x: 0,
   y: 0,
@@ -286,6 +259,41 @@ onMounted(() => {
     return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed
   })
 })
+
+function isRightClickPan(pan: FlowOptions['panOnDrag'], usedButton: number) {
+  return usedButton === 2 && Array.isArray(pan) && pan.includes(2)
+}
+
+function viewChanged(prevViewport: ViewportTransform, eventTransform: ZoomTransform) {
+  return (
+    (prevViewport.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
+    (prevViewport.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
+    (prevViewport.zoom !== eventTransform.k && !isNaN(eventTransform.k))
+  )
+}
+
+function eventToFlowTransform(eventTransform: ZoomTransform): ViewportTransform {
+  return {
+    x: eventTransform.x,
+    y: eventTransform.y,
+    zoom: eventTransform.k,
+  }
+}
+
+function setDimensions() {
+  if (!viewportEl.value) return
+
+  const { width, height } = getDimensions(viewportEl.value)
+
+  if (width === 0 || height === 0) warn('The Vue Flow parent container needs a width and a height to render the graph.')
+
+  dimensions.width = width || 500
+  dimensions.height = height || 500
+}
+
+function isWrappedWithClass(event: Event, className: string | undefined) {
+  return (event.target as Element).closest(`.${className}`)
+}
 </script>
 
 <script lang="ts">

packages/core/src/utils/autopan.ts

@@ -2,7 +2,7 @@ import type { Dimensions, XYPosition } from '~/types'
 
 // returns a number between 0 and 1 that represents the velocity of the movement
 // when the mouse is close to the edge of the canvas
-const calcAutoPanVelocity = (value: number, min: number, max: number) => {
+function calcAutoPanVelocity(value: number, min: number, max: number) {
   if (value < min) {
     return clamp(Math.abs(value - min), 1, 50) / 50
   } else if (value > max) {
@@ -12,7 +12,7 @@ const calcAutoPanVelocity = (value: number, min: number, max: number) => {
   return 0
 }
 
-export const calcAutoPan = (pos: XYPosition, bounds: Dimensions) => {
+export function calcAutoPan(pos: XYPosition, bounds: Dimensions) {
   const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20
   const yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20
 

packages/core/src/utils/changes.ts

@@ -99,13 +99,10 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
   }
 }
 
-export const applyChanges = <
+export function applyChanges<
   T extends FlowElement = FlowElement,
   C extends ElementChange = T extends GraphNode ? NodeChange : EdgeChange,
->(
+>(changes: C[], elements: T[]): T[] {
-  changes: C[],
-  elements: T[],
-): T[] => {
   const addRemoveChanges = changes.filter((c) => c.type === 'add' || c.type === 'remove') as (
     | NodeAddChange
     | EdgeAddChange
@@ -213,7 +210,7 @@ export const createRemoveChange = (id: string): NodeRemoveChange | EdgeRemoveCha
   type: 'remove',
 })
 
-export const getSelectionChanges = (elements: FlowElements, selectedIds: string[]) => {
+export function getSelectionChanges(elements: FlowElements, selectedIds: string[]) {
   return elements.reduce(
     (res, item) => {
       let willBeSelected = selectedIds.includes(item.id)

packages/core/src/utils/drag.ts

@@ -124,12 +124,12 @@ export function getExtent<T extends NodeDragItem | GraphNode>(item: T, extent?:
 
   return currentExtent as CoordinateExtent
 }
-export const calcNextPosition = (
+export function calcNextPosition(
   node: GraphNode | NodeDragItem,
   nextPosition: XYPosition,
   nodeExtent?: CoordinateExtent,
   parentNode?: GraphNode,
-) => {
+) {
   const extent = getExtent(node, nodeExtent, parentNode)
 
   const clampedPos = clampPosition(nextPosition, extent)

packages/core/src/utils/edge.ts

@@ -2,7 +2,7 @@ import { isNumber } from '@vueuse/core'
 import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
 import { Position } from '~/types'
 
-export const getHandlePosition = (position: Position, rect: Rect, handle?: HandleElement): XYPosition => {
+export function getHandlePosition(position: Position, rect: Rect, handle?: HandleElement): XYPosition {
   const x = (handle?.x ?? 0) + rect.x
   const y = (handle?.y ?? 0) + rect.y
   const width = handle?.width ?? rect.width
@@ -32,7 +32,7 @@ export const getHandlePosition = (position: Position, rect: Rect, handle?: Handl
   }
 }
 
-export const getHandle = (bounds: HandleElement[] = [], handleId?: string | null): HandleElement | undefined => {
+export function getHandle(bounds: HandleElement[] = [], handleId?: string | null): HandleElement | undefined {
   if (!bounds.length) return undefined
 
   let handle
@@ -42,14 +42,14 @@ export const getHandle = (bounds: HandleElement[] = [], handleId?: string | null
   return handle || bounds[0]
 }
 
-export const getEdgePositions = (
+export function getEdgePositions(
   sourceNode: GraphNode,
   sourceHandle: HandleElement | undefined,
   sourcePosition: Position,
   targetNode: GraphNode,
   targetHandle: HandleElement | undefined,
   targetPosition: Position,
-): EdgePositions => {
+): EdgePositions {
   const sourceHandlePos = getHandlePosition(
     sourcePosition,
     {
@@ -127,7 +127,7 @@ export function isEdgeVisible({
   return overlappingArea > 0
 }
 
-export const groupEdgesByZLevel = (edges: GraphEdge[], findNode: Actions['findNode'], elevateEdgesOnSelect = false) => {
+export function groupEdgesByZLevel(edges: GraphEdge[], findNode: Actions['findNode'], elevateEdgesOnSelect = false) {
   let maxLevel = -1
 
   const levelLookup = edges.reduce<Record<string, GraphEdge[]>>((tree, edge) => {

packages/core/src/utils/general.ts

@@ -1,6 +1,6 @@
 export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event
 
-export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRect) => {
+export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRect) {
   const isMouseTriggered = isMouseEvent(event)
   const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX
   const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY

packages/core/src/utils/graph.ts

@@ -26,7 +26,7 @@ export const nodeToRect = (node: GraphNode): Rect => ({
   height: node.dimensions.height || 0,
 })
 
-export const getOverlappingArea = (rectA: Rect, rectB: Rect) => {
+export function getOverlappingArea(rectA: Rect, rectB: Rect) {
   const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x))
   const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y))
 
@@ -45,7 +45,7 @@ export const clampPosition = (position: XYPosition, extent: CoordinateExtent): X
   y: clamp(position.y, extent[0][1], extent[1][1]),
 })
 
-export const getHostForElement = (element: HTMLElement): Document => {
+export function getHostForElement(element: HTMLElement): Document {
   const doc = element.getRootNode() as Document
   const window = useWindow()
 
@@ -67,7 +67,7 @@ export const isGraphNode = <Data = ElementData>(element: MaybeElement): element
 
 export const isRect = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y
 
-export const parseNode = (node: Node, defaults?: Partial<GraphNode>): GraphNode => {
+export function parseNode(node: Node, defaults?: Partial<GraphNode>): GraphNode {
   let defaultValues = defaults
   if (!isGraphNode(node)) {
     defaultValues = {
@@ -105,7 +105,7 @@ export const parseNode = (node: Node, defaults?: Partial<GraphNode>): GraphNode
   }
 }
 
-export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge => {
+export function parseEdge(edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge {
   const events = isDef(edge.events) ? edge.events : defaults?.events && isDef(defaults?.events) ? defaults?.events : {}
   const data = isDef(edge.data) ? edge.data : defaults?.data && isDef(defaults?.data) ? defaults?.data : {}
 
@@ -159,7 +159,7 @@ export const connectionExists = (edge: Edge | Connection, elements: Elements) =>
  * Intended for options API
  * In composition API you can access utilities from `useVueFlow`
  */
-export const addEdge = (edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) => {
+export function addEdge(edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) {
   if (!edgeParams.source || !edgeParams.target) {
     warn("Can't create edge. An edge needs a source and a target.")
     return elements
@@ -186,7 +186,7 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements, defau
  * Intended for options API
  * In composition API you can access utilities from `useVueFlow`
  */
-export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements) => {
+export function updateEdge(oldEdge: Edge, newConnection: Connection, elements: Elements) {
   if (!newConnection.source || !newConnection.target) {
     warn("Can't create new edge. An edge needs a source and a target.")
     return elements
@@ -213,18 +213,18 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: E
   return elements.filter((e) => e.id !== oldEdge.id)
 }
 
-export const rendererPointToPoint = ({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition => {
+export function rendererPointToPoint({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition {
   return {
     x: x * tScale + tx,
     y: y * tScale + ty,
   }
 }
-export const pointToRendererPoint = (
+export function pointToRendererPoint(
   { x, y }: XYPosition,
   { x: tx, y: ty, zoom: tScale }: ViewportTransform,
   snapToGrid: boolean,
   [snapX, snapY]: [number, number],
-) => {
+): XYPosition {
   const position: XYPosition = {
     x: (x - tx) / tScale,
     y: (y - ty) / tScale,
@@ -263,7 +263,7 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
 
 export const getBoundsofRects = (rect1: Rect, rect2: Rect) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))
 
-export const getRectOfNodes = (nodes: GraphNode[]) => {
+export function getRectOfNodes(nodes: GraphNode[]) {
   const box = nodes.reduce(
     (currBox, { computedPosition = { x: 0, y: 0 }, dimensions = { width: 0, height: 0 } } = {} as any) =>
       getBoundsOfBoxes(
@@ -284,14 +284,14 @@ export const graphPosToZoomedPos = ({ x, y }: XYPosition, { x: tx, y: ty, zoom:
   y: y * tScale + ty,
 })
 
-export const getNodesInside = (
+export function getNodesInside(
   nodes: GraphNode[],
   rect: Rect,
   { x: tx, y: ty, zoom: tScale }: ViewportTransform = { x: 0, y: 0, zoom: 1 },
   partially = false,
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
   excludeNonSelectableNodes = false,
-) => {
+) {
   const paneRect = {
     x: (rect.x - tx) / tScale,
     y: (rect.y - ty) / tScale,
@@ -320,13 +320,13 @@ export const getNodesInside = (
   })
 }
 
-export const getConnectedEdges = (nodes: (Node | GraphNode)[], edges: GraphEdge[]) => {
+export function getConnectedEdges(nodes: (Node | GraphNode)[], edges: GraphEdge[]) {
   const nodeIds = nodes.map((node) => node.id)
 
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }
 
-export const getTransformForBounds = (
+export function getTransformForBounds(
   bounds: Rect,
   width: number,
   height: number,
@@ -337,7 +337,7 @@ export const getTransformForBounds = (
     x?: number
     y?: number
   } = { x: 0, y: 0 },
-): ViewportTransform => {
+): ViewportTransform {
   const xZoom = width / (bounds.width * (1 + padding))
   const yZoom = height / (bounds.height * (1 + padding))
   const zoom = Math.min(xZoom, yZoom)
@@ -350,7 +350,7 @@ export const getTransformForBounds = (
   return { x, y, zoom: clampedZoom }
 }
 
-export const getXYZPos = (parentPos: XYZPosition, computedPosition: XYZPosition): XYZPosition => {
+export function getXYZPos(parentPos: XYZPosition, computedPosition: XYZPosition): XYZPosition {
   return {
     x: computedPosition.x + parentPos.x,
     y: computedPosition.y + parentPos.y,
@@ -358,15 +358,18 @@ export const getXYZPos = (parentPos: XYZPosition, computedPosition: XYZPosition)
   }
 }
 
-export const isParentSelected = (node: GraphNode, findNode: Actions['findNode']): boolean => {
+export function isParentSelected(node: GraphNode, findNode: Actions['findNode']): boolean {
   if (!node.parentNode) return false
+
   const parent = findNode(node.parentNode)
   if (!parent) return false
+
   if (parent.selected) return true
+
   return isParentSelected(parent, findNode)
 }
 
-export const getMarkerId = (marker: EdgeMarkerType | undefined, vueFlowId?: string): string => {
+export function getMarkerId(marker: EdgeMarkerType | undefined, vueFlowId?: string) {
   if (typeof marker === 'undefined') return ''
 
   if (typeof marker === 'string') return marker

packages/core/src/utils/log.ts

@@ -6,7 +6,7 @@ export class VueFlowError extends Error {
   }
 }
 
-export const warn = (message: string, ...args: any[]) => {
+export function warn(message: string, ...args: any[]) {
   if (!productionEnvs.includes(__ENV__ || '')) {
     console.warn(`[Vue Flow]: ${message}`, ...args)
   }

packages/core/src/utils/node.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { Actions, GraphNode, HandleElement, Position } from '~/types'
 
-export const getHandleBounds = (selector: string, nodeElement: HTMLDivElement, zoom: number): HandleElement[] | undefined => {
+export function getHandleBounds(selector: string, nodeElement: HTMLDivElement, zoom: number): HandleElement[] | undefined {
   const handles = nodeElement.querySelectorAll(`.vue-flow__handle${selector}`)
 
   if (!handles || !handles.length) {
@@ -24,14 +24,14 @@ export const getHandleBounds = (selector: string, nodeElement: HTMLDivElement, z
   })
 }
 
-export const handleNodeClick = (
+export function handleNodeClick(
   node: GraphNode,
   multiSelectionActive: boolean,
   addSelectedNodes: Actions['addSelectedNodes'],
   removeSelectedNodes: Actions['removeSelectedNodes'],
   nodesSelectionActive: Ref<boolean>,
   unselect = false,
-) => {
+) {
   nodesSelectionActive.value = false
 
   if (!node.selected) {

packages/core/src/utils/store.ts

@@ -2,7 +2,7 @@ import type { Actions, Connection, Edge, GraphEdge, GraphNode, Node } from '~/ty
 
 export const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
 
-export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) => {
+export function addEdgeToStore(edgeParams: Edge | Connection, edges: Edge[]) {
   if (!edgeParams.source || !edgeParams.target) {
     warn("Can't create edge. An edge needs a source and a target.")
     return false
@@ -22,7 +22,7 @@ export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) =>
   return edge
 }
 
-export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) => {
+export function updateEdgeAction(edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) {
   if (!newConnection.source || !newConnection.target) {
     warn("Can't create new edge. An edge needs a source and a target.")
     return false
@@ -49,7 +49,7 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg
   return newEdge
 }
 
-export const createGraphNodes = (nodes: Node[], findNode: Actions['findNode'], currGraphNodes: GraphNode[]) => {
+export function createGraphNodes(nodes: Node[], findNode: Actions['findNode'], currGraphNodes: GraphNode[]) {
   const parentNodes: Record<string, true> = {}
 
   const graphNodes = nodes.map((node) => {

packages/core/src/utils/watch.ts

@@ -3,11 +3,11 @@ import type { WatchPausableReturn } from '@vueuse/core'
 import { isFunction } from '@vueuse/core'
 import type { Connection, FlowProps, VueFlowStore } from '~/types'
 
-export const useWatch = (
+export function useWatch(
   models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
   props: FlowProps,
   store: VueFlowStore,
-) => {
+) {
   const scope = effectScope()
 
   scope.run(() => {