update: Add slots to CustomConnectionLine.vue, Edge.vue, Node.vue

examples/Basic/Basic.vue

@@ -38,7 +38,6 @@ const updatePos = () => {
         y: Math.random() * 400,
       }
     }
-
     return el
   })
 }
@@ -48,10 +47,7 @@ const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom:
 
 const toggleClassnames = () => {
   elements.value = elements.value.map((el: FlowElement) => {
-    if (isNode(el)) {
+    if (isNode(el)) el.className = el.className === 'light' ? 'dark' : 'light'
-      el.className = el.className === 'light' ? 'dark' : 'light'
-    }
-
     return el
   })
 }

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -15,7 +15,10 @@ const onElementsRemove = (elementsToRemove: Elements) =>
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
 </script>
 <template>
-  <Flow :elements="elements" :custom-connection-line="ConnectionLine" @elements-remove="onElementsRemove" @connect="onConnect">
+  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+    <template #custom-connection-line="props">
+      <ConnectionLine v-bind="props" />
+    </template>
     <Background :variant="BackgroundVariant.Lines" />
   </Flow>
 </template>

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, CustomConnectionLine, HandleElement, Node, Position } from '~/types'
+import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
 import { getBezierPath, getSmoothStepPath } from '~/components/Edges/utils'
 import { Store } from '~/context'
 
@@ -8,7 +8,6 @@ interface ConnectionLineProps {
   sourceNode: Node
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  customConnectionLine?: CustomConnectionLine
 }
 
 const props = withDefaults(defineProps<ConnectionLineProps>(), {
@@ -73,20 +72,19 @@ const dAttr = computed(() => {
 </script>
 <template>
   <g class="revue-flow__connection">
-    <component
+    <slot
-      :is="props.customConnectionLine"
-      v-if="props.customConnectionLine"
       v-bind="{
-        sourceX: sourceX,
+        sourceX,
-        sourceY: sourceY,
+        sourceY,
         sourcePosition: sourceHandle.position,
-        targetX: targetX,
+        targetX,
-        targetY: targetY,
+        targetY,
-        targetPosition: targetPosition,
+        targetPosition,
         connectionLineType: props.connectionLineType,
         connectionLineStyle: props.connectionLineStyle,
       }"
-    />
+    >
-    <path v-else :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
+      <path :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
+    </slot>
   </g>
 </template>

src/components/Edges/Edge.vue

@@ -2,16 +2,14 @@
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils/graph'
-import { ConnectionMode, Dimensions, Edge, EdgeType, Position, Transform } from '~/types'
+import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
-import { onMouseDown } from '~/components/Handle/utils'
 import { Hooks, Store } from '~/context'
+import { useHandle } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType
   edge: Edge
   nodes: ReturnType<typeof getSourceTargetNodes>
-  dimensions: Dimensions
-  transform: Transform
   markerEndId?: string
   edgeUpdaterRadius?: number
 }
@@ -68,6 +66,7 @@ const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ eve
 
 const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
 
+const handler = useHandle()
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const nodeId = isSourceHandle ? props.edge.target : props.edge.source
   const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle
@@ -75,8 +74,7 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const isTarget = isSourceHandle
 
   hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
-  handleId &&
+  handleId && handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source')
-    onMouseDown(event, store, hooks, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source')
 }
 
 const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
@@ -95,9 +93,9 @@ const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof get
     ? isEdgeVisible({
         sourcePos: { x: sourceX, y: sourceY },
         targetPos: { x: targetX, y: targetY },
-        width: props.dimensions.width,
+        width: store.dimensions.width,
-        height: props.dimensions.height,
+        height: store.dimensions.height,
-        transform: props.transform,
+        transform: store.transform,
       })
     : true
 }
@@ -125,8 +123,7 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
     @mousemove="onEdgeMouseMove"
     @mouseleave="onEdgeMouseLeave"
   >
-    <component
+    <slot
-      :is="props.type"
       v-bind="{
         id: props.edge.id,
         source: props.edge.source,
@@ -152,7 +149,36 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
         sourceHandleId: props.edge.sourceHandle,
         targetHandleId: props.edge.targetHandle,
       }"
-    />
+    >
+      <component
+        :is="props.type"
+        v-bind="{
+          id: props.edge.id,
+          source: props.edge.source,
+          target: props.edge.target,
+          selected: isSelected,
+          animated: props.edge.animated,
+          label: props.edge.label,
+          labelStyle: props.edge.labelStyle,
+          labelShowBg: props.edge.labelShowBg,
+          labelBgStyle: props.edge.labelBgStyle,
+          labelBgPadding: props.edge.labelBgPadding,
+          labelBgBorderRadius: props.edge.labelBgBorderRadius,
+          data: props.edge.data,
+          style: props.edge.style,
+          arrowHeadType: props.edge.arrowHeadType,
+          sourcePosition,
+          targetPosition,
+          sourceX: edgePos.sourceX,
+          sourceY: edgePos.sourceY,
+          targetX: edgePos.targetX,
+          targetY: edgePos.targetY,
+          markerEndId: props.markerEndId,
+          sourceHandleId: props.edge.sourceHandle,
+          targetHandleId: props.edge.targetHandle,
+        }"
+      />
+    </slot>
     <g @mousedown="onEdgeUpdaterSourceMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
       <EdgeAnchor
         :position="sourcePosition"

src/components/Handle/Handle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ElementId, Position } from '~/types'
+import { ElementId, Position, ValidConnectionFunc } from '~/types'
-import { onMouseDown, ValidConnectionFunc } from '~/components/Handle/utils'
 import { Hooks, Store } from '~/context'
+import { useHandle } from '~/composables'
 
 interface HandleProps {
   id?: string
@@ -22,19 +22,9 @@ const store = inject(Store)!
 const hooks = inject(Hooks)!
 const nodeId = inject<ElementId>('NodeIdContext')!
 
+const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(
+  handler(event, props.id, nodeId, props.type === 'target', props.isValidConnection)
-    event,
-    store,
-    hooks,
-    props.id,
-    nodeId,
-    props.type === 'target',
-    props.isValidConnection ??
-      function () {
-        return true
-      },
-  )
 </script>
 <template>
   <div

src/components/Handle/utils.ts

@@ -1,179 +0,0 @@
-import { getHostForElement } from '~/utils'
-import { ElementId, ConnectionMode, Connection, HandleType, FlowStore, FlowHooks } from '~/types'
-
-export type ValidConnectionFunc = (connection: Connection) => boolean
-
-type Result = {
-  elementBelow: Element | null
-  isValid: boolean
-  connection: Connection
-  isHoveringHandle: boolean
-}
-
-// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
-function checkElementBelowIsValid(
-  event: MouseEvent,
-  connectionMode: ConnectionMode,
-  isTarget: boolean,
-  nodeId: ElementId,
-  handleId: ElementId | null,
-  isValidConnection: ValidConnectionFunc,
-  doc: Document,
-) {
-  const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
-  const elementBelowIsTarget = elementBelow?.classList.contains('target') || false
-  const elementBelowIsSource = elementBelow?.classList.contains('source') || false
-
-  const result: Result = {
-    elementBelow,
-    isValid: false,
-    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
-    isHoveringHandle: false,
-  }
-
-  if (elementBelow && (elementBelowIsTarget || elementBelowIsSource)) {
-    result.isHoveringHandle = true
-
-    // in strict mode we don't allow target to target or source to source connections
-    const isValid =
-      connectionMode === ConnectionMode.Strict ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget) : true
-
-    if (isValid) {
-      const elementBelowNodeId = elementBelow.getAttribute('data-nodeid')
-      const elementBelowHandleId = elementBelow.getAttribute('data-handleid')
-      const connection: Connection = isTarget
-        ? {
-            source: elementBelowNodeId,
-            sourceHandle: elementBelowHandleId,
-            target: nodeId,
-            targetHandle: handleId,
-          }
-        : {
-            source: nodeId,
-            sourceHandle: handleId,
-            target: elementBelowNodeId,
-            targetHandle: elementBelowHandleId,
-          }
-
-      result.connection = connection
-      result.isValid = isValidConnection(connection)
-    }
-  }
-
-  return result
-}
-
-function resetRecentHandle(hoveredHandle: Element): void {
-  hoveredHandle?.classList.remove('revue-flow__handle-valid')
-  hoveredHandle?.classList.remove('revue-flow__handle-connecting')
-}
-
-export function onMouseDown(
-  event: MouseEvent,
-  store: FlowStore,
-  hooks: {
-    connectStart: FlowHooks['connectStart']
-    connectStop: FlowHooks['connectStop']
-    connectEnd: FlowHooks['connectEnd']
-    connect: FlowHooks['connect']
-    edgeUpdateEnd: FlowHooks['edgeUpdateEnd']
-  },
-  handleId: ElementId,
-  nodeId: ElementId,
-  isTarget: boolean,
-  isValidConnection: ValidConnectionFunc = () => {
-    return true
-  },
-  elementEdgeUpdaterType?: HandleType,
-): void {
-  const revueFlowNode = (event.target as Element).closest('.revue-flow')
-  // when revue-flow is used inside a shadow root we can't use document
-  const doc = getHostForElement(event.target as HTMLElement)
-
-  if (!doc) {
-    return
-  }
-
-  const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
-  const elementBelowIsTarget = elementBelow?.classList.contains('target')
-  const elementBelowIsSource = elementBelow?.classList.contains('source')
-
-  if (!revueFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
-    return
-  }
-
-  const handleType = elementEdgeUpdaterType || (elementBelowIsTarget ? 'target' : 'source')
-  const containerBounds = revueFlowNode.getBoundingClientRect()
-  let recentHoveredHandle: Element
-
-  store.connectionPosition.x = event.clientX - containerBounds.left
-  store.connectionPosition.y = event.clientY - containerBounds.top
-
-  store.setConnectionNodeId({
-    connectionNodeId: nodeId,
-    connectionHandleId: handleId,
-    connectionHandleType: handleType,
-  })
-  hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } })
-
-  function onMouseMove(event: MouseEvent) {
-    store.connectionPosition.x = event.clientX - containerBounds.left
-    store.connectionPosition.y = event.clientY - containerBounds.top
-
-    const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
-      event,
-      store.connectionMode,
-      isTarget,
-      nodeId,
-      handleId,
-      isValidConnection,
-      doc,
-    )
-
-    if (!isHoveringHandle) {
-      return resetRecentHandle(recentHoveredHandle)
-    }
-
-    const isOwnHandle = connection.source === connection.target
-
-    if (!isOwnHandle && elementBelow) {
-      recentHoveredHandle = elementBelow
-      elementBelow.classList.add('revue-flow__handle-connecting')
-      elementBelow.classList.toggle('revue-flow__handle-valid', isValid)
-    }
-  }
-
-  function onMouseUp(event: MouseEvent) {
-    const { connection, isValid } = checkElementBelowIsValid(
-      event,
-      store.connectionMode,
-      isTarget,
-      nodeId,
-      handleId,
-      isValidConnection,
-      doc,
-    )
-
-    hooks.connectStop.trigger(event)
-
-    if (isValid) {
-      hooks.connect.trigger(connection)
-    }
-
-    hooks.connectEnd.trigger(event)
-
-    if (elementEdgeUpdaterType) {
-      hooks.edgeUpdateEnd.trigger({ event } as any)
-    }
-
-    resetRecentHandle(recentHoveredHandle)
-    store.setConnectionNodeId({ connectionNodeId: undefined, connectionHandleId: undefined, connectionHandleType: undefined })
-    store.connectionPosition = { x: NaN, y: NaN }
-
-    doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
-    doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
-  }
-
-  doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
-  doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
-}

src/components/Nodes/Node.vue

@@ -95,7 +95,6 @@ const onDragStop: DraggableEventListener = ({ event }) => {
     if (props.selectable && !props.selectNodesOnDrag && !props.selected) {
       store.addSelectedElements([n])
     }
-
     hooks.nodeClick.trigger({ event, node: n })
 
     return
@@ -163,8 +162,7 @@ onMounted(() => {
       @contextmenu="onContextMenuHandler"
       @click="onSelectNodeHandler"
     >
-      <component
+      <slot
-        :is="props.type"
         v-bind="{
           data: props.node.data,
           type: props.node.type,
@@ -176,7 +174,22 @@ onMounted(() => {
           targetPosition: props.node.targetPosition,
           dragging: props.node.__rf.isDragging,
         }"
-      />
+      >
+        <component
+          :is="props.type"
+          v-bind="{
+            data: props.node.data,
+            type: props.node.type,
+            xPos: props.node.__rf.position.x,
+            yPos: props.node.__rf.position.y,
+            selected: props.selected,
+            connectable: props.connectable,
+            sourcePosition: props.node.sourcePosition,
+            targetPosition: props.node.targetPosition,
+            dragging: props.node.__rf.isDragging,
+          }"
+        />
+      </slot>
     </div>
   </DraggableCore>
 </template>

src/composables/index.ts

@@ -1,7 +1,6 @@
-export { default as useGlobalKeyHandler } from './useGlobalKeyHandler'
+export { default as useHandle } from './useHandle'
 export { default as useHooks } from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
-export { default as useResizeHandler } from './useResizeHandler'
 export { default as useUpdateNodeInternals } from './useUpdateNodeInternals'
 export { default as useZoom } from './useZoom'
 export { default as useZoomPanHelper } from './useZoomPanHelper'

src/composables/useGlobalKeyHandler.ts

@@ -1,31 +0,0 @@
-import useKeyPress from './useKeyPress'
-import { isNode, getConnectedEdges } from '~/utils/graph'
-import { Elements, KeyCode, ElementId, FlowElement } from '~/types'
-import { Store } from '~/context'
-
-interface HookParams {
-  deleteKeyCode: KeyCode
-  multiSelectionKeyCode: KeyCode
-  onElementsRemove?: (elements: Elements) => void
-}
-
-export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove = () => {} }: HookParams): void => {
-  const store = inject(Store)!
-
-  useKeyPress(deleteKeyCode, (keyPressed) => {
-    if (keyPressed && store.selectedElements) {
-      const selectedNodes = store.selectedElements.filter(isNode)
-      const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
-      const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
-        (res, item) => res.set(item.id, item),
-        new Map<ElementId, FlowElement>(),
-      )
-
-      onElementsRemove(Array.from(elementsToRemove.values()))
-      store.unsetNodesSelection()
-      store.resetSelectedElements()
-    }
-  })
-
-  useKeyPress(multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed))
-}

src/composables/useHandle.ts

@@ -0,0 +1,171 @@
+import { getHostForElement } from '~/utils'
+import { Hooks, Store } from '~/context'
+import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
+
+type Result = {
+  elementBelow: Element | null
+  isValid: boolean
+  connection: Connection
+  isHoveringHandle: boolean
+}
+
+// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
+export function checkElementBelowIsValid(
+  event: MouseEvent,
+  connectionMode: ConnectionMode,
+  isTarget: boolean,
+  nodeId: ElementId,
+  handleId: ElementId | null,
+  isValidConnection: ValidConnectionFunc,
+  doc: Document,
+) {
+  const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
+  const elementBelowIsTarget = elementBelow?.classList.contains('target') || false
+  const elementBelowIsSource = elementBelow?.classList.contains('source') || false
+
+  const result: Result = {
+    elementBelow,
+    isValid: false,
+    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
+    isHoveringHandle: false,
+  }
+
+  if (elementBelow && (elementBelowIsTarget || elementBelowIsSource)) {
+    result.isHoveringHandle = true
+
+    // in strict mode we don't allow target to target or source to source connections
+    const isValid =
+      connectionMode === ConnectionMode.Strict ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget) : true
+
+    if (isValid) {
+      const elementBelowNodeId = elementBelow.getAttribute('data-nodeid')
+      const elementBelowHandleId = elementBelow.getAttribute('data-handleid')
+      const connection: Connection = isTarget
+        ? {
+            source: elementBelowNodeId,
+            sourceHandle: elementBelowHandleId,
+            target: nodeId,
+            targetHandle: handleId,
+          }
+        : {
+            source: nodeId,
+            sourceHandle: handleId,
+            target: elementBelowNodeId,
+            targetHandle: elementBelowHandleId,
+          }
+
+      result.connection = connection
+      result.isValid = isValidConnection(connection)
+    }
+  }
+
+  return result
+}
+
+function resetRecentHandle(hoveredHandle: Element): void {
+  hoveredHandle?.classList.remove('revue-flow__handle-valid')
+  hoveredHandle?.classList.remove('revue-flow__handle-connecting')
+}
+
+export default function () {
+  const store = inject(Store)!
+  const hooks = inject(Hooks)!
+
+  return (
+    event: MouseEvent,
+    handleId: ElementId,
+    nodeId: ElementId,
+    isTarget: boolean,
+    isValidConnection: ValidConnectionFunc = () => {
+      return true
+    },
+    elementEdgeUpdaterType?: HandleType,
+  ) => {
+    const revueFlowNode = (event.target as Element).closest('.revue-flow')
+    // when revue-flow is used inside a shadow root we can't use document
+    const doc = getHostForElement(event.target as HTMLElement)
+
+    if (!doc) return
+
+    const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
+    const elementBelowIsTarget = elementBelow?.classList.contains('target')
+    const elementBelowIsSource = elementBelow?.classList.contains('source')
+
+    if (!revueFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
+
+    const handleType = elementEdgeUpdaterType || (elementBelowIsTarget ? 'target' : 'source')
+    const containerBounds = revueFlowNode.getBoundingClientRect()
+    let recentHoveredHandle: Element
+
+    store.connectionPosition.x = event.clientX - containerBounds.left
+    store.connectionPosition.y = event.clientY - containerBounds.top
+
+    store.setConnectionNodeId({
+      connectionNodeId: nodeId,
+      connectionHandleId: handleId,
+      connectionHandleType: handleType,
+    })
+    hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } })
+
+    function onMouseMove(event: MouseEvent) {
+      store.connectionPosition.x = event.clientX - containerBounds.left
+      store.connectionPosition.y = event.clientY - containerBounds.top
+
+      const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
+        event,
+        store.connectionMode,
+        isTarget,
+        nodeId,
+        handleId,
+        isValidConnection,
+        doc,
+      )
+
+      if (!isHoveringHandle) {
+        return resetRecentHandle(recentHoveredHandle)
+      }
+
+      const isOwnHandle = connection.source === connection.target
+
+      if (!isOwnHandle && elementBelow) {
+        recentHoveredHandle = elementBelow
+        elementBelow.classList.add('revue-flow__handle-connecting')
+        elementBelow.classList.toggle('revue-flow__handle-valid', isValid)
+      }
+    }
+
+    function onMouseUp(event: MouseEvent) {
+      const { connection, isValid } = checkElementBelowIsValid(
+        event,
+        store.connectionMode,
+        isTarget,
+        nodeId,
+        handleId,
+        isValidConnection,
+        doc,
+      )
+
+      hooks.connectStop.trigger(event)
+
+      if (isValid) {
+        hooks.connect.trigger(connection)
+      }
+
+      hooks.connectEnd.trigger(event)
+
+      if (elementEdgeUpdaterType) {
+        hooks.edgeUpdateEnd.trigger({ event } as any)
+      }
+
+      resetRecentHandle(recentHoveredHandle)
+      store.setConnectionNodeId({ connectionNodeId: undefined, connectionHandleId: undefined, connectionHandleType: undefined })
+      store.connectionPosition = { x: NaN, y: NaN }
+
+      doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
+      doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
+    }
+
+    doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
+    doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
+  }
+}

src/composables/useResizeHandler.ts

@@ -1,23 +0,0 @@
-import { Ref } from 'vue'
-import { getDimensions } from '~/utils'
-import { Dimensions } from '~/types'
-
-export default function (el: Ref<HTMLDivElement>) {
-  const dimensions = ref<Dimensions>({ width: 0, height: 0 })
-  const updateDimensions = () => {
-    const unrefEl = unrefElement(el)
-    if (!unrefEl) return
-
-    const size = getDimensions(unrefEl as HTMLDivElement)
-    if (size.height === 0 || size.width === 0)
-      console.log('The revue Flow parent container needs a width and a height to render the graph.')
-    else dimensions.value = size
-  }
-
-  useEventListener(window, 'resize', updateDimensions)
-  useResizeObserver(el, () => updateDimensions())
-
-  until(el).toBeTruthy().then(updateDimensions)
-
-  return dimensions
-}

src/composables/useUpdateNodeInternals.ts

@@ -1,7 +1,8 @@
-import { ElementId, RevueFlowStore, UpdateNodeInternals } from '../types'
+import { ElementId, UpdateNodeInternals } from '~/types'
+import { Store } from '~/context'
 
-function useUpdateNodeInternals(): UpdateNodeInternals {
+export default function (): UpdateNodeInternals {
-  const store = inject<RevueFlowStore>('store')!
+  const store = inject(Store)!
 
   return (id: ElementId) => {
     const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`)
@@ -11,5 +12,3 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
     }
   }
 }
-
-export default useUpdateNodeInternals

src/composables/useZoom.ts

@@ -2,7 +2,7 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { Ref } from 'vue'
 import { get } from '@vueuse/core'
-import { D3Selection, D3Zoom, FlowTransform, KeyCode, PanOnScrollMode, Transform } from '~/types'
+import { FlowTransform, PanOnScrollMode, Transform, UseZoom, UseZoomOptions } from '~/types'
 import { clamp } from '~/utils'
 import useKeyPress from '~/composables/useKeyPress'
 import { Hooks, Store } from '~/context'
@@ -16,26 +16,6 @@ const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => (
   zoom: eventTransform.k,
 })
 
-interface UseZoomOptions {
-  selectionKeyCode?: KeyCode
-  zoomActivationKeyCode?: KeyCode
-  paneMoveable?: boolean
-  defaultZoom?: number
-  defaultPosition?: [number, number]
-  zoomOnScroll?: boolean
-  zoomOnPinch?: boolean
-  panOnScroll?: boolean
-  panOnScrollSpeed?: number
-  panOnScrollMode?: PanOnScrollMode
-  zoomOnDoubleClick?: boolean
-}
-
-interface UseZoom {
-  transform: Ref<Transform>
-  d3Zoom: Ref<D3Zoom>
-  d3Selection: Ref<D3Selection>
-}
-
 export default function (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom {
   const {
     selectionKeyCode = 'Shift',

src/composables/useZoomPanHelper.ts

@@ -13,13 +13,10 @@ export default function (): UseZoomPanHelper {
     zoomTo: (zoomLevel: number) => store.d3Selection && store.d3Zoom?.scaleTo(store.d3Selection, zoomLevel),
     transform: (transform: FlowTransform) => {
       const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom)
-
       store.d3Selection && store.d3Zoom?.transform(store.d3Selection, nextTransform)
     },
     fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
-      if (!store.nodes.length) {
+      if (!store.nodes.length) return
-        return
-      }
 
       const bounds = getRectOfNodes(options.includeHiddenNodes ? store.nodes : store.nodes.filter((node) => !node.isHidden))
       const [x, y, zoom] = getTransformForBounds(
@@ -55,8 +52,6 @@ export default function (): UseZoomPanHelper {
 
       store.d3Selection && store.d3Zoom?.transform(store.d3Selection, transform)
     },
-    project: (position: XYPosition) => {
+    project: (position: XYPosition) => pointToRendererPoint(position, store.transform, store.snapToGrid, store.snapGrid),
-      return pointToRendererPoint(position, store.transform, store.snapToGrid, store.snapGrid)
-    },
   }
 }

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -4,25 +4,20 @@ import { getSourceTargetNodes } from './utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 import Edge from '~/components/Edges/Edge.vue'
 import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
-import { ConnectionLineType, CustomConnectionLine, Dimensions, EdgeType, Transform } from '~/types'
+import { ConnectionLineType, EdgeType } from '~/types'
 import { Store } from '~/context'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>
-  dimensions: Dimensions
-  transform: Transform
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  customConnectionLine?: CustomConnectionLine
   arrowHeadColor?: string
   markerEndId?: string
   edgeUpdaterRadius?: number
 }
 
 const props = withDefaults(defineProps<EdgeRendererProps>(), {
-  transform: () => [0, 0, 1],
   arrowHeadColor: '#b1b1b7',
-  dimensions: () => ({ width: 0, height: 0 }),
   connectionLineType: ConnectionLineType.Bezier,
   edgeUpdaterRadius: 10,
 })
@@ -35,10 +30,10 @@ const connectionLineVisible = computed(
 )
 </script>
 <template>
-  <svg :width="props.dimensions.width" :height="props.dimensions.height" class="revue-flow__edges">
+  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="revue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
     <g
-      :transform="props.transform.length && `translate(${props.transform[0]},${props.transform[1]}) scale(${props.transform[2]})`"
+      :transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"
     >
       <template v-for="edge of store.edges" :key="edge.id">
         <Edge
@@ -46,19 +41,24 @@ const connectionLineVisible = computed(
           :edge="edge"
           :nodes="getSourceTargetNodes(edge, store.nodes)"
           :type="props.edgeTypes[edge.type || 'default']"
-          :dimensions="props.dimensions"
-          :transform="props.transform"
           :marker-end-id="props.markerEndId"
           :edge-updater-radius="props.edgeUpdaterRadius"
-        />
+        >
+          <template #default="edgeProps">
+            <slot name="edge" v-bind="edgeProps"></slot>
+          </template>
+        </Edge>
       </template>
       <ConnectionLine
         v-if="connectionLineVisible"
         :source-node="sourceNode"
         :connection-line-style="props.connectionLineStyle"
         :connection-line-type="props.connectionLineType"
-        :custom-connection-line="props.customConnectionLine"
+      >
-      />
+        <template #default="customConnectionLineProps">
+          <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+        </template>
+      </ConnectionLine>
     </g>
   </svg>
 </template>

src/container/Flow/Flow.vue

@@ -13,12 +13,11 @@ import {
   PanOnScrollMode,
   NodeType,
   EdgeType,
-  CustomConnectionLine,
   KeyCode,
   TranslateExtent,
   NodeExtent,
 } from '~/types'
-import configureStore from '~/store/configure-store'
+import useFlowStore from '~/store/useFlowStore'
 import { initialState } from '~/store'
 import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
@@ -34,7 +33,6 @@ export interface FlowProps {
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  customConnectionLine?: CustomConnectionLine
   deleteKeyCode?: KeyCode
   selectionKeyCode?: KeyCode
   multiSelectionKeyCode?: KeyCode
@@ -118,7 +116,7 @@ const defaultEdgeTypes: Record<string, EdgeType> = {
 
 let store = inject(Store)!
 if (!store) {
-  store = configureStore({
+  store = useFlowStore({
     ...initialState,
     ...props,
   })()
@@ -160,25 +158,31 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
       :pan-on-scroll-mode="props.panOnScrollMode"
       :pane-moveable="props.paneMoveable"
     >
-      <template #default="{ transform, dimensions }">
+      <SelectionPane
-        <SelectionPane
+        :delete-key-code="props.deleteKeyCode"
-          :delete-key-code="props.deleteKeyCode"
+        :multi-selection-key-code="props.multiSelectionKeyCode"
-          :multi-selection-key-code="props.multiSelectionKeyCode"
+        :selection-key-code="props.selectionKeyCode"
-          :selection-key-code="props.selectionKeyCode"
+      >
+        <NodeRenderer :node-types="nodeTypes">
+          <template #default="nodeProps">
+            <slot name="node" v-bind="nodeProps"></slot>
+          </template>
+        </NodeRenderer>
+        <EdgeRenderer
+          :connection-line-type="props.connectionLineType"
+          :connection-line-style="props.connectionLineStyle"
+          :arrow-head-color="props.arrowHeadColor"
+          :marker-end-id="props.markerEndId"
+          :edge-types="edgeTypes"
         >
-          <NodeRenderer :node-types="nodeTypes" :transform="transform" :dimensions="dimensions" />
+          <template #edge="edgeProps">
-          <EdgeRenderer
+            <slot name="edge" v-bind="edgeProps"></slot>
-            :connection-line-type="props.connectionLineType"
+          </template>
-            :connection-line-style="props.connectionLineStyle"
+          <template #custom-connection-line="customConnectionLineProps">
-            :custom-connection-line="props.customConnectionLine"
+            <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
-            :arrow-head-color="props.arrowHeadColor"
+          </template>
-            :marker-end-id="props.markerEndId"
+        </EdgeRenderer>
-            :edge-types="edgeTypes"
+      </SelectionPane>
-            :transform="transform"
-            :dimensions="dimensions"
-          />
-        </SelectionPane>
-      </template>
     </ZoomPane>
     <slot></slot>
   </div>

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,19 +1,14 @@
 <script lang="ts" setup>
 import Node from '~/components/Nodes/Node.vue'
-import { NodeType, Node as TNode, Transform, Dimensions } from '~/types'
+import { NodeType, Node as TNode } from '~/types'
 import { getNodesInside } from '~/utils/graph'
 import { Store } from '~/context'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>
-  dimensions: Dimensions
-  transform: Transform
 }
 
-const props = withDefaults(defineProps<NodeRendererProps>(), {
+const props = defineProps<NodeRendererProps>()
-  transform: () => [0, 0, 1],
-  dimensions: () => ({ width: 0, height: 0 }),
-})
 
 const store = inject(Store)!
 
@@ -25,10 +20,10 @@ const getNodes = computed(() =>
         {
           x: 0,
           y: 0,
-          width: props.dimensions.width,
+          width: store.dimensions.width,
-          height: props.dimensions.height,
+          height: store.dimensions.height,
         },
-        props.transform,
+        store.transform,
         true,
       )
     : store.nodes,
@@ -48,20 +43,24 @@ const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id
 <template>
   <div
     class="revue-flow__nodes"
-    :style="{ transform: `translate(${props.transform[0]}px,${props.transform[1]}px) scale(${props.transform[2]})` }"
+    :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
   >
     <template v-for="node of getNodes" :key="node.id">
       <Node
         v-if="!node.isHidden"
         :node="node"
         :type="type(node)"
-        :scale="props.transform[2]"
+        :scale="store.transform[2]"
         :snap-grid="store.snapToGrid ? store.snapGrid : undefined"
         :selected="selected(node.id)"
         :selectable="node.selectable || store.elementsSelectable"
         :connectable="node.connectable || store.nodesConnectable"
         :draggable="node.draggable || store.nodesDraggable"
-      />
+      >
+        <template #default="nodeProps">
+          <slot v-bind="nodeProps"></slot>
+        </template>
+      </Node>
     </template>
   </div>
 </template>

src/container/SelectionPane/SelectionPane.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import useKeyPress from '~/composables/useKeyPress'
-import { KeyCode } from '~/types'
+import { ElementId, FlowElement, KeyCode } from '~/types'
-import useGlobalKeyHandler from '~/composables/useGlobalKeyHandler'
 import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
 import UserSelection from '~/components/UserSelection/UserSelection.vue'
 import { Hooks, Store } from '~/context'
+import { getConnectedEdges, isNode } from '~/utils/graph'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<SelectionPaneProps>(), {
 })
 const store = inject(Store)!
 const hooks = inject(Hooks)!
-const keyPressed = useKeyPress(props.selectionKeyCode)
 
 const onClick = (event: MouseEvent) => {
   hooks.paneClick.trigger(event)
@@ -30,18 +29,28 @@ const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event
 
 const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event)
 
-useGlobalKeyHandler({
+const selectionKeyPresed = useKeyPress(props.selectionKeyCode)
-  onElementsRemove: hooks.elementsRemove.trigger,
+
-  deleteKeyCode: props.deleteKeyCode,
+useKeyPress(props.deleteKeyCode, (keyPressed) => {
-  multiSelectionKeyCode: props.multiSelectionKeyCode,
+  if (keyPressed && store.selectedElements) {
+    const selectedNodes = store.selectedElements.filter(isNode)
+    const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
+    const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
+      (res, item) => res.set(item.id, item),
+      new Map<ElementId, FlowElement>(),
+    )
+
+    hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
+    store.unsetNodesSelection()
+    store.resetSelectedElements()
+  }
 })
 
-const userSelectionVisible = computed(() => keyPressed.value && (store.selectionActive || store.elementsSelectable))
+useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed))
-const nodesSelectionVisible = computed(() => store.nodesSelectionActive)
 </script>
 <template>
   <slot></slot>
-  <UserSelection v-if="userSelectionVisible" id="user-selection" />
+  <UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
-  <NodesSelection v-if="nodesSelectionVisible" id="nodes-selection" />
+  <NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
   <div class="revue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>

src/container/ZoomPane/ZoomPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { KeyCode, PanOnScrollMode } from '~/types'
-import { useZoom, useResizeHandler, useZoomPanHelper } from '~/composables'
+import { useZoom, useZoomPanHelper } from '~/composables'
 import { Hooks, Store } from '~/context'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils/graph'
 
@@ -36,9 +36,10 @@ const hooks = inject(Hooks)!
 
 const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
 const { transform } = useZoom(zoomPaneEl, props)
+const { width, height } = useElementBounding(zoomPaneEl)
+watch(width, (val) => (store.dimensions.width = val), { flush: 'post' })
+watch(height, (val) => (store.dimensions.height = val), { flush: 'post' })
 watch(transform, (val) => (store.transform = val), { flush: 'post' })
-const dimensions = useResizeHandler(zoomPaneEl)
-watch(dimensions, (val) => (store.dimensions = val), { flush: 'post' })
 
 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
 hooks.load.trigger({
@@ -54,6 +55,6 @@ hooks.load.trigger({
 </script>
 <template>
   <div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">
-    <slot :transform="transform" :dimensions="dimensions"></slot>
+    <slot v-bind="{ transform, dimensions: { width, height } }"></slot>
   </div>
 </template>

src/store/useFlowStore.ts

@@ -1,6 +1,6 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import isEqual from 'fast-deep-equal'
-import { Edge, Node, NodeDiffUpdate, RevueFlowState, RevueFlowActions, XYPosition } from '~/types'
+import { Edge, FlowState, Node, NodeDiffUpdate, RevueFlowActions, XYPosition } from '~/types'
 import { clampPosition, getDimensions } from '~/utils'
 import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '~/utils/graph'
 import { getHandleBounds } from '~/components/Nodes/utils'
@@ -11,9 +11,7 @@ type NextElements = {
 }
 const pinia = createPinia()
 
-export default function configureStore(
+export default function useFlowStore(preloadedState: FlowState): StoreDefinition<string, FlowState, any, RevueFlowActions> {
-  preloadedState: RevueFlowState,
-): StoreDefinition<string, RevueFlowState, any, RevueFlowActions> {
   setActivePinia(pinia)
 
   return defineStore({
@@ -166,7 +164,7 @@ export default function configureStore(
         const startX = this.userSelectionRect.startX || 0
         const startY = this.userSelectionRect.startY || 0
 
-        const nextUserSelectRect: RevueFlowState['userSelectionRect'] = {
+        const nextUserSelectRect: FlowState['userSelectionRect'] = {
           ...this.userSelectionRect,
           x: mousePos.x < startX ? mousePos.x : this.userSelectionRect.x,
           y: mousePos.y < startY ? mousePos.y : this.userSelectionRect.y,

src/types/composables.ts

@@ -0,0 +1,28 @@
+import { Ref } from 'vue'
+import { ElementId, Transform } from './types'
+import { D3Zoom, D3Selection, PanOnScrollMode, KeyCode } from './panel'
+import { Connection } from '@/src'
+
+export type UpdateNodeInternals = (nodeId: ElementId) => void
+
+export interface UseZoomOptions {
+  selectionKeyCode?: KeyCode
+  zoomActivationKeyCode?: KeyCode
+  paneMoveable?: boolean
+  defaultZoom?: number
+  defaultPosition?: [number, number]
+  zoomOnScroll?: boolean
+  zoomOnPinch?: boolean
+  panOnScroll?: boolean
+  panOnScrollSpeed?: number
+  panOnScrollMode?: PanOnScrollMode
+  zoomOnDoubleClick?: boolean
+}
+
+export interface UseZoom {
+  transform: Ref<Transform>
+  d3Zoom: Ref<D3Zoom>
+  d3Selection: Ref<D3Selection>
+}
+
+export type ValidConnectionFunc = (connection: Connection) => boolean

src/types/connection.ts

@@ -1,4 +1,3 @@
-import { DefineComponent } from 'vue'
 import { ElementId, Position } from './types'
 import { HandleType } from '~/types/handle'
 
@@ -27,8 +26,6 @@ export type ConnectionLineComponentProps = {
   connectionLineType: ConnectionLineType
 }
 
-export type CustomConnectionLine = DefineComponent<ConnectionLineComponentProps | any, any, any, any>
-
 export type OnConnectFunc = (connection: Connection) => void
 export type OnConnectStartParams = {
   nodeId: ElementId | undefined

src/types/index.ts

@@ -7,3 +7,4 @@ export * from './node'
 export * from './panel'
 export * from './store'
 export * from './hooks'
+export * from './composables'

src/types/types.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, HTMLAttributes } from 'vue'
 import { Edge, EdgeType } from './edge'
 import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
-import { CustomConnectionLine, ConnectionLineType, ConnectionMode } from '~/types/connection'
+import { ConnectionLineType, ConnectionMode } from '~/types/connection'
 import { KeyCode, PanOnScrollMode } from '~/types/panel'
 
 export type ElementId = string
@@ -96,7 +96,6 @@ export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  connectionLineComponent?: CustomConnectionLine
   deleteKeyCode?: KeyCode
   selectionKeyCode?: KeyCode
   multiSelectionKeyCode?: KeyCode

tsconfig.json

@@ -32,7 +32,6 @@
   "exclude": [
     "node_modules",
     "build",
-    "dist",
+    "dist"
-    "examples"
   ]
 }