Skip to content
On this page

@vue-flow/additional-components

1.2.4

Patch Changes

1.2.3

Patch Changes

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

  • #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>
    

1.1.0

Minor Changes

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

    • Add Panel component
      • Wrap MiniMap and Controls with Panel
    • Add position prop to MiniMap and Controls Example:
    <VueFlow v-model="elements">
      <MiniMap position="top-right" />
      <Controls position="top-left" />
    </VueFlow>
    

    Bugfixes

    • Fix MiniMap and Controls cancelling selections

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

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'
    

Patch Changes

Released under the MIT License.