Skip to content

@vue-flow/core

1.4.1

Patch Changes

1.4.0

Minor Changes

  • #360 a11edae Thanks @bcakmakoglu! - Add interactionWidth prop to edges. Sets radius of pointer interactivity for edges

1.3.3

Patch Changes

1.3.2

Patch Changes

1.3.1

Patch Changes

1.3.0

Minor Changes

  • #394 1403b65 Thanks @bcakmakoglu! - Add nodesInitialized event hook

  • #387 9530290 Thanks @bcakmakoglu! - Pass node intersections to node drag events (on single node drag)

  • #387 a19b458 Thanks @bcakmakoglu! - Add intersection utils to help with checking if a node intersects with either other nodes or a given area

    Usage

    • You can either use the action getIntersectingNodes to find all nodes that intersect with a given node
    const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow()
    
    onNodeDrag(({ node }) => {
      const intersections = getIntersectingNodes(node).map((n) => n.id)
    
      getNodes.value.forEach((n) => {
        // highlight nodes that are intersecting with the dragged node
        n.class = intersections.includes(n.id) ? 'highlight' : ''
      })
    })
    
    • Node drag events will provide you with the intersecting nodes without having to call the action explicitly.
    onNodeDrag(({ intersections }) => {
      getNodes.value.forEach((n) => {
        n.class = intersections?.some((i) => i.id === n.id) ? 'highlight' : ''
      })
    })
    
    • Or you can use the isIntersecting util to check if a node intersects with a given area
    const { onNodeDrag, isNodeIntersecting } = useVueFlow()
    
    onNodeDrag(({ node }) => {
      // highlight the node if it is intersecting with the given area
      node.class = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100 }) ? 'highlight' : ''
    })
    
  • #396 03412ac Thanks @bcakmakoglu! - Add zoomable and pannable to MiniMap

    Usage

    • Set zoomable and pannable to true in MiniMap component to enable interactions with the MiniMap
    <template>
      <VueFlow v-model="elements">
        <MiniMap :zoomable="true" :pannable="true" />
      </VueFlow>
    </template>
    

Patch Changes

  • #361 43ff2a4 Thanks @bcakmakoglu! - Add EdgeLabelRenderer component export

    Usage

    • You can use the EdgeLabelRenderer component to render the label of an edge outside the SVG context of edges.
    • The EdgeLabelRenderer component is a component that handles teleporting your edge label into a HTML context
    • This is useful if you want to use HTML elements in your edge label, like buttons
    <script lang="ts" setup>
    import type { EdgeProps, Position } from '@vue-flow/core'
    import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
    import type { CSSProperties } from 'vue'
    
    interface CustomEdgeProps<T = any> extends EdgeProps<T> {
      id: string
      sourceX: number
      sourceY: number
      targetX: number
      targetY: number
      sourcePosition: Position
      targetPosition: Position
      data: T
      markerEnd: string
      style: CSSProperties
    }
    
    const props = defineProps<CustomEdgeProps>()
    
    const { removeEdges } = useVueFlow()
    
    const path = $computed(() => getBezierPath(props))
    </script>
    
    <script lang="ts">
    export default {
      inheritAttrs: false,
    }
    </script>
    
    <template>
      <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
    
      <EdgeLabelRenderer>
        <div
          :style="{
            pointerEvents: 'all',
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
          }"
          class="nodrag nopan"
        >
          <button class="edgebutton" @click="removeEdges([id])">×</button>
        </div>
      </EdgeLabelRenderer>
    </template>
    
    <style>
    .edgebutton {
      border-radius: 999px;
      cursor: pointer;
    }
    .edgebutton:hover {
      box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
    }
    </style>
    

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

1.1.4

Patch Changes

  • #353 8f95187 Thanks @bcakmakoglu! - Allow undefined as custom theme var value

  • #349 61d2b88 Thanks @bcakmakoglu! - Node and Edge data and events to be definitely typed when passed as NodeProps or EdgeProps

  • #352 bff576b Thanks @bcakmakoglu! - Add overflow: visible to control btn svgs (fixes safari bug where svgs aren't showing up)

  • #349 61d2b88 Thanks @bcakmakoglu! - Extend Elements/FlowElements generics to differentiate between Node and Edge data and custom events

  • #349 61d2b88 Thanks @bcakmakoglu! - Add Generic to isNode and isEdge helpers

  • #350 92a69a6 Thanks @bcakmakoglu! - Set nodes' dragging prop on drag start and end (fixes grabbing hand not showing on mousedown / not disappearing on mouseup)

1.1.3

Patch Changes

1.1.2

Patch Changes

1.1.1

Patch Changes

  • #328 1e5a77d6 Thanks @bcakmakoglu! - Prevent mouseup handler from resetting startHandle before connections can be made when using connectOnClick

  • #328 18a812db Thanks @bcakmakoglu! - Passing single option breaks connectable check when no handle ids are set

    • Pass connectable to correct handle prop in default node types
  • #328 a415353b Thanks @bcakmakoglu! - Add dragging class name to pane on drag

1.1.0

Minor Changes

  • #311 78f9ee1c Thanks @bcakmakoglu! - # What's changed?

    • Add HandleConnectable type
    • Update connectable prop of Handle to HandleConnectable type
    • Allow to specify if Handles are connectable
      • any number of connections
      • none
      • single connection
      • or a cb to determine whether the Handle is connectable

    Example:

    <script lang="ts" setup>
    import { Handle, HandleConnectable } from '@vue-flow/core'
    
    const handleConnectable: HandleConnectable = (node, connectedEdges) => {
      console.log(node, connectedEdges)
      return true
    }
    </script>
    <template>
      <!-- single connection -->
      <Handle type="target" position="left" connectable="single" />
      <div>Custom Node</div>
      <!-- cb -->
      <Handle id="a" position="right" :connectable="handleConnectable" />
    </template>
    
    • Update node.connectable prop to HandleConnectable

    For Example:

    const nodes = ref([
      {
        id: '1',
        position: { x: 0, y: 0 },
        connectable: 'single', // each handle is only connectable once (default node for example)
      },
      {
        id: '2',
        position: { x: 200, y: 0 },
        connectable: (node, connectedEdges) => {
          return true // will allow any number of connections
        },
      },
      {
        id: '3',
        position: { x: 400, y: 0 },
        connectable: true, // will allow any number of connections
      },
      {
        id: '4',
        position: { x: 200, y: 0 },
        connectable: false, // will disable handles
      },
    ])
    

Patch Changes

  • #311 e175cf81 Thanks @bcakmakoglu! - # What's changed?

    • Add vueflow pkg that exports all features
    <script setup>
    // `vueflow` pkg exports all features, i.e. core + additional components
    import { VueFlow, Background, MiniMap, Controls } from 'vueflow'
    </script>
    
    <template>
      <VueFlow>
        <Background />
        <MiniMap />
        <Controls />
      </VueFlow>
    </template>
    

    Chores

    • Rename core pkg directory to core from vue-flow
    • Rename bundle outputs
  • #311 e1c28a26 Thanks @bcakmakoglu! - # What's changed?

    • Simplify useHandle usage
    • Pass props to the composable as possible refs
      • Still returns onClick & onMouseDown handlers but only expects mouse event now

    Before:

    <script lang="ts" setup>
    import { useHandle, NodeId } from '@vue-flow/core'
    
    const nodeId = inject(NodeId)
    
    const handleId = 'my-handle'
    
    const type = 'source'
    
    const isValidConnection = () => true
    
    const { onMouseDown } = useHandle()
    
    const onMouseDownHandler = (event: MouseEvent) => {
      onMouseDown(event, handleId, nodeId, type === 'target', isValidConnection, undefined)
    }
    </script>
    
    <template>
      <div @mousedown="onMouseDownHandler" />
    </template>
    

    After:

    <script lang="ts" setup>
    import { useHandle, useNode } from '@vue-flow/core'
    
    const { nodeId } = useNode()
    
    const handleId = 'my-handle'
    
    const type = 'source'
    
    const isValidConnection = () => true
    
    const { onMouseDown } = useHandle({
      nodeId,
      handleId,
      isValidConnection,
      type,
    })
    </script>
    
    <template>
      <div @mousedown="onMouseDown" />
    </template>
    
  • #311 08ad1735 Thanks @bcakmakoglu! - # Bugfixes

    • Edges not returned by getter when paneReady event is triggered

1.0.0

Major Changes

  • #305 939bff50 Thanks @bcakmakoglu! - # What's changed?

    • Simplify edge path calculations
      • remove getEdgeCenter and getSimpleEdgeCenter

    Breaking Changes

    • getEdgeCenter has been removed
      • Edge center positions can now be accessed from getBezierPath or getSmoothStepPath functions

    Before:

    import { getBezierPath, getEdgeCenter } from '@braks/vue-flow'
    
    // used to return the path string only
    const edgePath = computed(() => getBezierPath(pathParams))
    
    // was necessary to get the centerX, centerY of an edge
    const centered = computed(() => getEdgeCenter(centerParams))
    

    After:

    import { getBezierPath } from '@vue-flow/core'
    
    // returns the path string and the center positions
    const [path, centerX, centerY] = computed(() => getBezierPath(pathParams))
    
  • #305 47d837aa Thanks @bcakmakoglu! - # What's changed?

    • Change pkg scope from 'braks' to 'vue-flow'
      • Add @vue-flow/core package
      • Add @vue-flow/additional-components package
      • Add @vue-flow/pathfinding-edge package
      • Add @vue-flow/resize-rotate-node package

    Features

    • useNode and useEdge composables
      • can be used to access current node/edge (or by id) and their respective element refs (if used inside the elements' context, i.e. a custom node/edge)
    • selectionKeyCode as true
      • allows for figma style selection (i.e. create a selection rect without holding shift or any other key)
    • Handles to trigger handle bounds calculation on mount
      • if no handle bounds are found, a Handle will try to calculate its bounds on mount
      • should remove the need for updateNodeInternals on dynamic handles
    • Testing for various features using Cypress 10

    Bugfixes

    • Fix removeSelectedEdges and removeSelectedNodes actions not properly removing elements from store

    Breaking Changes

    • @vue-flow/core package is now required to use vue-flow
    • @vue-flow/additional-components package contains Background, MiniMap and Controls components and related types
      • When switching to the new pkg scope, you need to change the import path.

    Before:

    import { VueFlow, Background, MiniMap, Controls } from '@braks/vue-flow'
    

    After

    import { VueFlow } from '@vue-flow/core'
    import { Background, MiniMap, Controls } from '@vue-flow/additional-components'
    

Released under the MIT License.