A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.
MIT License
Published by bcakmakoglu almost 2 years ago
Published by bcakmakoglu almost 2 years ago
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.9.2...v1.9.3
Published by bcakmakoglu almost 2 years ago
Fix default edge components prop types and export the types.
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.9.1...v1.9.2
Published by bcakmakoglu almost 2 years ago
Fixed slot type regression.
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.9.0...v1.9.1
Published by bcakmakoglu almost 2 years ago
This release brings you more customization options to the selection behavior. Instead of pressing an additional button to create a selection box, you can now enable this behavior without any additional key-press.
Furthermore you can now specify what mouse buttons should be used for pan on drag behavior.
selectionKeyCode
: You can now set this to MaybeRef<boolean>
to enable a selection box without extra button press (need to set :pan-on-drag="false"
or :pan-on-drag="[2]"
[RightClick]).panOnDrag
: Can now be a boolean
or a number[]
, this allows you to configure every mouse button as a drag button. [1, 2]
would mean that you can drag via middle and right mouse button.panActivationKeyCode
: Key code (or KeyFilter) for activating dragging (useful when using selectionKeyCode
as true
).selectionMode
: You can choose if the selection box needs to contain a node fully (SelectionMode.Full
) or partially (SelectionMode.Partial
) to select.onSelectionStart
: Emitted when the selection box is started.onSelectionEnd
: Emitted when the selection box is ended.onViewportChangeStart
: Emitted when viewport change has started.onViewportChange
: Emitted when viewport is changed.onViewportChangeEnd
: Emitted when viewport change has ended.Deprecated options API utils addEdge
and updateEdge
. These utils will be removed soon!
Instead of using these utils, use addEdges
and updateEdge
found on the VueFlow store instance.
You receive a store instance by using either a template-ref or listening to the onPaneReady
event.
<script>
import { VueFlow } from '@vue-flow/core'
export default defineComponent({
name: 'OptionsAPIExample',
components: { VueFlow },
data() {
return {
vueFlow: null,
instance: null,
elements: [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
],
}
},
methods: {
// You can listen to `onPaneReady` to get the instance
onPaneReady(instance) {
instance.fitView()
this.instance = instance
},
onConnect(params) {
// either use the instance you have saved in `onPaneReady`
this.instance?.addEdges([params])
// or use the template-ref
this.$refs.vueFlow?.addEdges([params])
},
},
})
</script>
<template>
<VueFlow
v-model="elements"
ref="vueFlow"
class="vue-flow-basic-example"
:default-zoom="1.5"
:min-zoom="0.2"
:max-zoom="4"
:zoom-on-scroll="false"
@connect="onConnect"
@pane-ready="onPaneReady"
/>
</template>
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.8.0...v1.9.0
Published by bcakmakoglu almost 2 years ago
Published by bcakmakoglu almost 2 years ago
defaultZoom
& defaultPosition
to defaultViewport
by @bcakmakoglu in https://github.com/bcakmakoglu/vue-flow/pull/554
This release brings A11y support to Vue Flow. All nodes and edges can now receive a focusable
and ariaLabel
prop, which can be used to enhance A11y experience. You can also enable focusable globally by using nodesFocusable
or edgesFocusable
.
Additionally, nodes can be moved using keyboard controls (Arrow-Keys).
disableKeyboardA11y
: Use this prop to disable Keyboard controls on the graph.defaultViewport
: The old defaultZoom
and defaultPosition
props have been merged into a single object called defaultViewport
.nodesFocusable
: Globally enable that nodes can be focused.edgesFocusable
: Globally enable that edges can be focused.focusable
: Enable focusing for a single node/edge by setting this option.ariaLabel
: Specify an aria label for a node/edgeFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.7.2...v1.8.0
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.7.1...v1.7.2
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.7.0...v1.7.1
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.6.3...v1.7.0
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.6.2...v1.6.3
Published by bcakmakoglu almost 2 years ago
addNodes
/ addEdges
by @bcakmakoglu in https://github.com/bcakmakoglu/vue-flow/pull/529
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.6.1...v1.6.2
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.6.0...v1.6.1
Published by bcakmakoglu almost 2 years ago
additional-components
package occurrences by @bcakmakoglu in https://github.com/bcakmakoglu/vue-flow/pull/523
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.5.11...v1.6.0
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.5.10...v1.5.11
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.5.9...v1.5.10
Published by bcakmakoglu almost 2 years ago
Published by bcakmakoglu almost 2 years ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.5.7...v1.5.8
Published by bcakmakoglu almost 2 years ago
next release
as release commit message by @bcakmakoglu in https://github.com/bcakmakoglu/vue-flow/pull/503
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.5.6...v1.5.7