@vue-flow/core #

1.2.1 #

Patch Changes #

• #378 9089861c Thanks @bcakmakoglu! - Disable user selection if elementsSelectable is false

• #378 9089861c Thanks @bcakmakoglu! - Prevent node selection box from appearing before mouseup

• #380 2c3ea836 Thanks @bcakmakoglu! - Use shallowRef for node/edge data and event objects so they trigger a re-render on custom nodes/edges

1.2.0 #

Minor Changes #

• #123 3105bd0 Thanks @bcakmakoglu! - Disable console warnings for production node-envs

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 #

• #342 72c203e Thanks @bcakmakoglu! - Fix edge text not calculating dimensions properly

1.1.2 #

Patch Changes #

• #337 12d9f79 Thanks @bcakmakoglu! - Add dragging class to nodes on drag instead of dragStart

• #341 d2ed19e Thanks @bcakmakoglu! - Pass edge styles to edge path element

• 949d19f Thanks @bcakmakoglu! - Fix edge texts not properly aligning to center

• #333 8583e13 Thanks @bcakmakoglu! - Add missing dragging class to pane

• #336 1aaac25 Thanks @bcakmakoglu! - Elements not properly unselected when clicking node and edge afterwards

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'