alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update(examples): correct examples

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent b12863f297
commit 445718d6f4
32 changed files with 206 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Basic/Basic.vue
+8 -11
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { VueFlow, MiniMap, Controls, Background, FlowInstance, useVueFlow, useNodesState, useEdgesState } from '~/index'
import { VueFlow, MiniMap, Controls, Background, useVueFlow, useNodesState, useEdgesState } from '~/index'
const initialNodes = [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -11,17 +11,14 @@ const initialEdges = [
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
]
const vfInstance = ref<FlowInstance>()
const { OnPaneReady, OnNodeDragStop, OnConnect } = useVueFlow()
const { onPaneReady, onNodeDragStop, onConnect, instance } = useVueFlow()
const { nodes } = useNodesState({ nodes: initialNodes, applyDefault: true })
const { edges, addEdges } = useEdgesState({ edges: initialEdges, applyDefault: true })
OnPaneReady((flowInstance) => {
flowInstance.fitView({ padding: 0.1 })
vfInstance.value = flowInstance
onPaneReady(({ fitView }) => {
fitView({ padding: 0.1 })
})
OnNodeDragStop((e) => console.log('drag stop', e))
OnConnect((params) => addEdges([params]))
onNodeDragStop((e) => console.log('drag stop', e))
onConnect((params) => addEdges([params]))
const updatePos = () => {
nodes.forEach((el) => {
@@ -32,8 +29,8 @@ const updatePos = () => {
})
}
const logToObject = () => console.log(vfInstance.value?.toObject())
const resetTransform = () => vfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const logToObject = () => console.log(instance.value?.toObject())
const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
const toggleclasss = () => {
nodes.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
}
examples/CustomNode/CustomNode.vue
+15 -27
View File
@@ -1,18 +1,17 @@
<script lang="ts" setup>
import ColorSelectorNode from './ColorSelectorNode.vue'
import {
VueFlow,
ConnectionMode,
Elements,
FlowElement,
isEdge,
MiniMap,
Controls,
Node,
FlowElement,
Elements,
Position,
SnapGrid,
ConnectionMode,
useVueFlow,
useNodesState,
useVueFlow,
VueFlow,
} from '~/index'
const elements = ref<Elements>([])
@@ -31,25 +30,14 @@ const nodeColor = (n: Node): string => {
return '#fff'
}
const onChange = (event: Event) => {
elements.value.forEach((e: FlowElement) => {
if (isEdge(e) || e.id !== '2') return e
bgColor.value = (event.target as HTMLInputElement).value
})
}
onMounted(() => {
const onChange = (event: Event) => {
elements.value = elements.value.map((e: FlowElement) => {
if (isEdge(e) || e.id !== '2') {
return e
}
const color = (event.target as HTMLInputElement).value
bgColor.value = color
return {
...e,
data: {
...e.data,
color,
},
}
})
}
elements.value = [
{
id: '1',
@@ -61,7 +49,7 @@ onMounted(() => {
{
id: '2',
type: 'selectorNode',
data: { onChange, color: bgColor.value },
data: { onChange, color: bgColor },
style: { border: '1px solid #777', padding: '10px' },
position: { x: 250, y: 50 },
},
@@ -86,9 +74,9 @@ onMounted(() => {
]
})
const { OnPaneReady } = useVueFlow()
const { onPaneReady } = useVueFlow()
useNodesState()
OnPaneReady((flowInstance) => {
onPaneReady((flowInstance) => {
flowInstance.fitView()
console.log('flow loaded:', flowInstance)
})
examples/DragNDrop/DnD.vue
+3 -3
View File
@@ -7,7 +7,7 @@ const getId = () => `dndnode_${id++}`
const flowInstance = ref<FlowInstance>()
const { OnPaneReady, OnConnect } = useVueFlow()
const { onPaneReady, onConnect } = useVueFlow()
const { nodes, edges, addEdges, addNodes } = useElementsState({
nodes: [
{
@@ -18,7 +18,7 @@ const { nodes, edges, addEdges, addNodes } = useElementsState({
},
],
})
OnPaneReady((instance) => (flowInstance.value = instance))
onPaneReady((instance) => (flowInstance.value = instance))
const onDragOver = (event: DragEvent) => {
event.preventDefault()
if (event.dataTransfer) {
@@ -26,7 +26,7 @@ const onDragOver = (event: DragEvent) => {
}
}
OnConnect((params) => addEdges([params]))
onConnect((params) => addEdges([params]))
const onDrop = (event: DragEvent) => {
if (flowInstance.value) {
examples/Edges/EdgesExample.vue
+2 -5
View File
@@ -65,16 +65,13 @@ const initialEdges = [
},
]
const { OnPaneReady } = useVueFlow()
const { nodes, edges, addEdges } = useElementsState({
const { nodes, edges } = useElementsState({
nodes: initialNodes,
edges: initialEdges,
})
OnPaneReady((flowInstance) => flowInstance.fitView())
</script>
<template>
<VueFlow :snap-to-grid="true">
<VueFlow :fit-view-on-init="true" :snap-to-grid="true">
<template #edge-custom="props">
<CustomEdge v-bind="props" />
</template>
examples/Empty/EmptyExample.vue
+4 -4
View File
@@ -1,12 +1,12 @@
<script lang="ts" setup>
import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow, useElementsState } from '~/index'
const { OnConnect, OnPaneReady, OnNodeDragStop, dimensions } = useVueFlow()
const { onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
const { nodes, addNodes, edges, addEdges } = useElementsState()
OnConnect((params) => addEdges[params])
OnPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
OnNodeDragStop((node) => console.log('drag stop', node))
onConnect((params) => addEdges[params])
onPaneReady((flowInstance) => console.log('flow loaded:', flowInstance))
onNodeDragStop((node) => console.log('drag stop', node))
const addRandomNode = () => {
const nodeId = (nodes.length + 1).toString()
examples/Hidden/HiddenExample.vue
+17 -17
View File
@@ -1,28 +1,28 @@
<script lang="ts" setup>
import { VueFlow, MiniMap, Controls, Elements } from '~/index'
import { VueFlow, MiniMap, Controls, useElementsState } from '~/index'
const initialElements: Elements = [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4' },
]
const elements = ref<Elements>(initialElements)
const isHidden = ref(false)
const { nodes, edges } = useElementsState({
nodes: [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
],
edges: [
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4' },
],
})
watchEffect(() => {
elements.value.forEach((e) => {
e.hidden = isHidden.value
return e
})
nodes.forEach((n) => (n.hidden = isHidden.value))
edges.forEach((e) => (e.hidden = isHidden.value))
})
</script>
<template>
<VueFlow v-model="elements">
<VueFlow>
<MiniMap />
<Controls />
examples/Interaction/InteractionExample.vue
+14 -14
View File
@@ -11,13 +11,13 @@ const {
panOnScroll,
panOnScrollMode,
paneMoveable,
OnConnect,
OnNodeDragStart,
OnNodeDragStop,
OnPaneClick,
OnPaneScroll,
OnPaneContextMenu,
OnMoveEnd,
onConnect,
onNodeDragStart,
onNodeDragStop,
onPaneClick,
onPaneScroll,
onPaneContextMenu,
onMoveEnd,
} = useVueFlow({
modelValue: [
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -33,13 +33,13 @@ const { nodes, edges, addEdges } = useElementsState()
const captureZoomClick = ref(false)
const captureZoomScroll = ref(false)
OnConnect((params) => addEdges([params]))
OnNodeDragStart((e) => console.log('drag start', e))
OnNodeDragStop((e) => console.log('drag stop', e))
OnPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
OnPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
OnPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
OnMoveEnd((flowTransform) => console.log('move end', flowTransform))
onConnect((params) => addEdges([params]))
onNodeDragStart((e) => console.log('drag start', e))
onNodeDragStop((e) => console.log('drag stop', e))
onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
onPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
onMoveEnd((flowTransform) => console.log('move end', flowTransform))
</script>
<template>
<VueFlow>
examples/Layouting/LayoutingExample.vue
+8 -27
View File
@@ -1,20 +1,8 @@
<script lang="ts" setup>
import dagre from 'dagre'
import initialElements from './initial-elements'
import './layouting.css'
import {
VueFlow,
Controls,
addEdge,
ConnectionMode,
Connection,
Edge,
Elements,
isNode,
CoordinateExtent,
Position,
} from '~/index'
import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '~/index'
const dagreGraph = new dagre.graphlib.Graph()
dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -25,7 +13,6 @@ const nodeExtent: CoordinateExtent = [
]
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
const onLayout = (direction: string) => {
const isHorizontal = direction === 'LR'
@@ -41,33 +28,27 @@ const onLayout = (direction: string) => {
dagre.layout(dagreGraph)
elements.value = elements.value.map((el) => {
elements.value.forEach((el) => {
if (isNode(el)) {
const nodeWithPosition = dagreGraph.node(el.id)
el.targetPosition = isHorizontal ? Position.Left : Position.Top
el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom
el.position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
}
return el
})
console.log(elements.value)
}
</script>
<template>
<div class="layoutflow">
<VueFlow
v-model="elements"
:node-extent="nodeExtent"
:connection-mode="ConnectionMode.Loose"
@connect="onConnect"
@load="() => onLayout('TB')"
>
<VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
<Controls />
</VueFlow>
<div class="controls">
<button :style="{ marginRight: 10 }" @click="() => onLayout('TB')">vertical layout</button>
<button @click="() => onLayout('LR')">horizontal layout</button>
<button :style="{ marginRight: 10 }" @click="onLayout('TB')">vertical layout</button>
<button @click="onLayout('LR')">horizontal layout</button>
</div>
</div>
</template>
<style>
@import './layouting.css';
</style>
examples/Layouting/initial-elements.ts
+11 -11
View File
@@ -6,56 +6,56 @@ const elements: Elements = [
{
id: '1',
type: 'input',
data: { label: 'input' },
label: 'input',
position,
},
{
id: '2',
data: { label: 'node 2' },
label: 'node 2',
position,
},
{
id: '2a',
data: { label: 'node 2a' },
label: 'node 2a',
position,
},
{
id: '2b',
data: { label: 'node 2b' },
label: 'node 2b',
position,
},
{
id: '2c',
data: { label: 'node 2c' },
label: 'node 2c',
position,
},
{
id: '2d',
data: { label: 'node 2d' },
label: 'node 2d',
position,
},
{
id: '3',
data: { label: 'node 3' },
label: 'node 3',
position,
},
{
id: '4',
data: { label: 'node 4' },
label: 'node 4',
position,
},
{
id: '5',
data: { label: 'node 5' },
label: 'node 5',
position,
},
{
id: '6',
type: 'output',
data: { label: 'output' },
label: 'output',
position,
},
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
{ id: '7', type: 'output', label: 'output', position: { x: 400, y: 450 } },
{ id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
examples/MultiFlows/Flow.vue
+6 -7
View File
@@ -1,19 +1,18 @@
<script lang="ts" setup>
import { VueFlow, Background, Connection, Elements, Edge, addEdge } from '~/index'
import { VueFlow, Background, Elements } from '~/index'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
{ 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' },
]
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
</script>
<template>
<VueFlow v-model="elements" @connect="onConnect">
<VueFlow v-model="elements" :fit-view-on-init="true">
<Background />
</VueFlow>
</template>
examples/MultiFlows/MultiFlowsExample.vue
+3 -1
View File
@@ -1,6 +1,5 @@
<script lang="ts" setup>
import Flow from './Flow.vue'
import './multiflows.css'
</script>
<template>
<div class="vue-flow__example-multiflows">
@@ -8,3 +7,6 @@ import './multiflows.css'
<Flow />
</div>
</template>
<style>
@import './multiflows.css';
</style>
examples/Nesting/GroupNode.vue
+4 -5
View File
@@ -3,18 +3,17 @@ import { Handle, Position, getNodesInside, useVueFlow } from '~/index'
import type { NodeProps } from '~/types/node'
const props = defineProps<NodeProps>()
const store = useVueFlow()
store.hooks.nodeDragStop.on(({ node }) => {
const { onNodeDragStop, getNodes, transform } = useVueFlow()
onNodeDragStop(({ node }) => {
const nodes = getNodesInside(
store.getNodes,
getNodes.value,
{
...props.dimensions,
x: props.computedPosition.x,
y: props.computedPosition.y,
},
store.transform,
transform.value,
)
console.log(nodes)
if (nodes.some((n) => n.id === node.id && n.id !== props.id)) {
node.label = `In ${props.id}`
node.data = {
examples/Nesting/Nesting.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import GroupNode from './GroupNode.vue'
import { VueFlow, Elements, Node, Edge, Connection, addEdge } from '~/index'
import { VueFlow, Elements, Edge, Connection, addEdge } from '~/index'
const elements = ref<Elements<{ label: string; group?: string }>>([
{ id: 'node-2', label: 'node-2', position: { x: 50, y: 5 } },
examples/NodeTypeChange/NodeTypeChangeExample.vue
+7 -14
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
const initialElements: Elements = [
@@ -7,7 +6,7 @@ const initialElements: Elements = [
id: '1',
sourcePosition: Position.Right,
type: 'input',
data: { label: 'Input' },
label: 'Input',
position: { x: 0, y: 80 },
},
{
@@ -15,14 +14,12 @@ const initialElements: Elements = [
type: 'output',
sourcePosition: Position.Right,
targetPosition: Position.Left,
data: { label: 'A Node' },
label: 'A Node',
position: { x: 250, y: 0 },
},
{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
]
const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
@@ -30,18 +27,14 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
const changeType = () => {
elements.value = elements.value.map((el) => {
if (isEdge(el) || el.type === 'input') return el
return {
...el,
type: el.type === 'default' ? 'output' : 'default',
}
elements.value.forEach((el) => {
if (isEdge(el) || el.type === 'input') return
el.type = el.type === 'default' ? 'output' : 'default'
})
}
</script>
<template>
<VueFlow v-model="elements" @connect="onConnect" @load="onLoad">
<button :style="buttonStyle" @click="changeType">change type</button>
<VueFlow v-model="elements" @connect="onConnect" @pane-ready="onLoad">
<button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>
</VueFlow>
</template>
examples/Overview/Overview.vue
+9 -23
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import {
VueFlow,
addEdge,
@@ -48,52 +47,40 @@ const initialElements: Elements = [
{
id: '1',
type: 'input',
data: {
label: 'Welcome to <strong>Vue VueFlow!</strong>',
},
label: 'Welcome to <strong>Vue VueFlow!</strong>',
position: { x: 250, y: 0 },
},
{
id: '2',
data: {
label: 'This is a <strong>default node</strong>',
},
label: 'This is a <strong>default node</strong>',
position: { x: 100, y: 100 },
},
{
id: '3',
data: {
label: 'This one has a <strong>custom style</strong>',
},
label: 'This one has a <strong>custom style</strong>',
position: { x: 400, y: 100 },
style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
},
{
id: '4',
position: { x: 250, y: 200 },
data: {
label: `You can find the docs on
label: `You can find the docs on
<a href="https://github.com/bcakmakoglu/vue-flow" target="_blank" rel="noopener noreferrer">
Github
</a>`,
},
},
{
id: '5',
data: {
label: 'Or check out the other <strong>examples</strong>',
},
label: 'Or check out the other <strong>examples</strong>',
position: { x: 250, y: 325 },
},
{
id: '6',
type: 'output',
data: {
label: 'An <strong>output node</strong>',
},
label: 'An <strong>output node</strong>',
position: { x: 100, y: 480 },
},
{ id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
{ id: '7', type: 'output', label: 'Another output node', position: { x: 400, y: 450 } },
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
@@ -111,7 +98,6 @@ const initialElements: Elements = [
},
]
const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
const snapGrid: SnapGrid = [16, 16]
const nodeStrokeColor = (n: Node): string => {
@@ -135,11 +121,12 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
<template>
<VueFlow
v-model="elements"
:connection-line-style="connectionLineStyle"
:connection-line-style="{ stroke: '#ddd' }"
:snap-to-grid="true"
:snap-grid="snapGrid"
@element-click="onElementClick"
@connect="onConnect"
@pane-ready="onLoad"
@pane-click="onPaneClick"
@pane-scroll="onPaneScroll"
@pane-contex-menu="onPaneContextMenu"
@@ -153,7 +140,6 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
@selection-context-menu="onSelectionContextMenu"
@selection-change="onSelectionChange"
@move-end="onMoveEnd"
@load="onLoad"
@edge-update="onEdgeMouseMove"
@edge-context-menu="onEdgeContextMenu"
@edge-mouse-enter="onEdgeMouseEnter"
examples/Provider/ProviderExample.vue
+9 -29
View File
@@ -1,51 +1,31 @@
<script lang="ts" setup>
import Sidebar from './Sidebar.vue'
import {
VueFlow,
addEdge,
Controls,
FlowInstance,
FlowElement,
Connection,
Edge,
Elements,
ConnectionMode,
useVueFlow,
} from '~/index'
import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '~/index'
import './provider.css'
const onElementClick = (element: FlowElement) => console.log('click', element)
const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
]
useVueFlow()
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
</script>
<template>
<div class="providerflow">
<Sidebar />
<div class="vue-flow-wrapper">
<VueFlow
v-model="elements"
:connection-mode="ConnectionMode.Loose"
@element-click="onElementClick"
@connect="onConnect"
@elements-remove="onElementsRemove"
@load="onLoad"
>
<VueFlow v-model="elements" :connection-mode="ConnectionMode.Loose" @pane-ready="onLoad">
<Controls />
</VueFlow>
</div>
</div>
</template>
<style>
@import './provider.css';
</style>
examples/Provider/Sidebar.vue
+4 -7
View File
@@ -1,13 +1,10 @@
<script lang="ts" setup>
import { useVueFlow } from '~/index'
const store = useVueFlow()
const nodes = computed(() => store.getNodes)
const transform = computed(() => store.transform)
const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
const selectAll = () => {
store.addSelectedNodes(nodes.value)
store.unsetUserSelection()
addSelectedNodes(getNodes.value)
nodesSelectionActive.value = true
}
</script>
<template>
@@ -18,7 +15,7 @@ const selectAll = () => {
<div class="title">Zoom & pan transform</div>
<div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
<div class="title">Nodes</div>
<div v-for="node of nodes" :key="node.id">
<div v-for="node of getNodes" :key="node.id">
Node {{ node.id }} - x: {{ node.position.x.toFixed(2) }}, y: {{ node.position.y.toFixed(2) }}
</div>
examples/RGBFlow/RGBFlow.vue
+1 -6
View File
@@ -30,15 +30,10 @@ const color = ref<Colors>({
blue: 100,
})
const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
const store = useVueFlow({
nodeTypes: ['rgb', 'rgb-output'],
edgeTypes: ['pathfinding'],
zoomOnScroll: false,
})
</script>
<template>
<div ref="page" class="demo-flow">
<VueFlow v-model="elements" @load="onLoad">
<VueFlow v-model="elements" @pane-ready="onLoad">
<template #node-rgb="props">
<RGBNode v-bind="props" :amount="color" @change="onChange" />
</template>
examples/SaveRestore/Controls.vue
+13 -12
View File
@@ -1,22 +1,22 @@
<script lang="ts" setup>
import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '~/index'
import { useZoomPanHelper, FlowExportObject, Node, useVueFlow, useElementsState } from '~/index'
const flowKey = 'example-flow'
const state = useStorage(flowKey, {
elements: [],
nodes: [],
edges: [],
position: [NaN, NaN],
zoom: 1,
} as FlowExportObject)
const getNodeId = () => `randomnode_${+new Date()}`
const { transform } = useZoomPanHelper()
const flow = useVueFlow()
const emit = defineEmits(['restore', 'add'])
const { setTransform } = useZoomPanHelper()
const { instance, dimensions } = useVueFlow()
const { nodes, edges, addNodes, setNodes, setEdges } = useElementsState()
const onSave = () => {
if (flow.instance) state.value = flow.instance.toObject()
state.value = instance.value.toObject()
}
const onRestore = () => {
@@ -24,18 +24,19 @@ const onRestore = () => {
if (flow) {
const [x = 0, y = 0] = flow.position
emit('restore', flow.elements ?? [])
transform({ x, y, zoom: flow.zoom || 0 })
setNodes(state.value.nodes)
setEdges(state.value.edges)
setTransform({ x, y, zoom: flow.zoom || 0 })
}
}
const onAdd = () => {
const newNode = {
id: `random_node-${getNodeId()}`,
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
label: 'Added node',
position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
} as Node
flow.addElements([newNode])
addNodes([newNode])
}
</script>
<template>
examples/SaveRestore/SaveRestoreExample.vue
+8 -10
View File
@@ -1,22 +1,20 @@
<script lang="ts" setup>
import Controls from './Controls.vue'
import { VueFlow, addEdge, Connection, Edge, Elements } from '~/index'
import './save.css'
import { VueFlow, Elements } from '~/index'
const initialElements: Elements = [
{ id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
{ id: 'e1-2', source: '1', target: '2' },
]
const elements = ref(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onRestore = (els: Elements) => (elements.value = els)
</script>
<template>
<VueFlow v-model="elements" storage-key="vue-flow-123" @connect="onConnect">
<Controls @restore="onRestore" />
<VueFlow v-model="elements">
<Controls />
</VueFlow>
</template>
<style>
@import './save.css';
</style>
examples/Switch/SwitchExample.vue
+11 -16
View File
@@ -1,24 +1,21 @@
<script lang="ts" setup>
import { VueFlow, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
import { VueFlow, Node, FlowElement, Elements } from '~/index'
const elementsA: Elements = [
{ id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
{ id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
{ id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2a', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: '3a', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
{ id: '4a', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
{ id: 'e1-2', source: '1a', target: '2a' },
{ id: 'e1-3', source: '1a', target: '3a' },
]
const elementsB: Elements = [
{ id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, class: 'light' },
{ id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, class: 'light' },
{ id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, class: 'light' },
{ id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, class: 'light' },
{ id: 'inputb', type: 'input', label: 'Input', position: { x: 300, y: 5 }, class: 'light' },
{ id: '1b', label: 'Node 1', position: { x: 0, y: 100 }, class: 'light' },
{ id: '2b', label: 'Node 2', position: { x: 200, y: 100 }, class: 'light' },
{ id: '3b', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
{ id: '4b', label: 'Node 4', position: { x: 600, y: 100 }, class: 'light' },
{ id: 'e1b', source: 'inputb', target: '1b' },
{ id: 'e2b', source: 'inputb', target: '2b' },
@@ -27,11 +24,9 @@ const elementsB: Elements = [
]
const elements = ref(elementsA)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
</script>
<template>
<VueFlow v-model="elements" @element-click="onElementClick" @connect="onConnect" @node-drag-stop="onNodeDragStop">
<VueFlow v-model="elements">
<div :style="{ position: 'absolute', right: 10, top: 10, zIndex: 4 }">
<button style="margin-right: 5px" @click="() => (elements = elementsA)">flow a</button>
<button @click="() => (elements = elementsB)">flow b</button>
examples/Unidirectional/CustomNode.vue
+4 -7
View File
@@ -1,16 +1,13 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
// @ts-ignore
import { Handle, NodeProps, Position } from '~/index'
import { Handle, Position } from '~/index'
import type { NodeProps } from '~/types/node'
interface CustomNodeProps extends NodeProps {
id: string
}
const props = defineProps<CustomNodeProps>()
const props = defineProps<NodeProps>()
const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
</script>
<template>
<div :style="nodeStyles">
<div :key="props.id" :style="nodeStyles">
<div>node {{ props.id }}</div>
<Handle id="left" type="source" :position="Position.Left" />
<Handle id="right" type="source" :position="Position.Right" />
examples/Unidirectional/UnidirectionalExample.vue
-6
View File
@@ -174,10 +174,7 @@ let id = 4
const getId = () => `${id++}`
const elements = ref(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, type: 'smoothstep' }, elements.value))
const { project } = useZoomPanHelper()
const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
(elements.value = updateEdge(oldEdge, newConnection, elements.value))
const onPaneClick = (evt: MouseEvent) =>
(elements.value = elements.value.concat({
@@ -189,12 +186,9 @@ const onPaneClick = (evt: MouseEvent) =>
<template>
<VueFlow
v-model="elements"
:node-types="['custom']"
:connection-line-type="ConnectionLineType.SmoothStep"
:connection-mode="ConnectionMode.Loose"
@connect="onConnect"
@pane-click="onPaneClick"
@edge-pdate="onEdgeUpdate"
>
<template #node-custom="props">
<CustomNode v-bind="props" />
examples/UpdatableEdge/UpdatableEdgeExample.vue
+5 -11
View File
@@ -16,27 +16,21 @@ const initialElements: Elements = [
{
id: '1',
type: 'input',
data: {
label: 'Node <strong>A</strong>',
},
label: 'Node <strong>A</strong>',
position: { x: 250, y: 0 },
},
{
id: '2',
data: {
label: 'Node <strong>B</strong>',
},
label: 'Node <strong>B</strong>',
position: { x: 100, y: 100 },
},
{
id: '3',
data: {
label: 'Node <strong>C</strong>',
},
label: 'Node <strong>C</strong>',
position: { x: 400, y: 100 },
style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
},
{ id: 'e1-2', source: '1', target: '2', label: 'Updateable edge' },
{ id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true },
]
const elements = ref(initialElements)
@@ -52,7 +46,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
v-model="elements"
:snap-to-grid="true"
:connection-mode="ConnectionMode.Loose"
@load="onLoad"
@pane-ready="onLoad"
@edge-update="onEdgeUpdate"
@connect="onConnect"
@edge-update-start="onEdgeUpdateStart"
examples/UpdateNode/UpdateNodeExample.vue
+7 -11
View File
@@ -1,11 +1,9 @@
<script lang="ts" setup>
import { VueFlow, Elements } from '~/index'
import './updatenode.css'
const initialElements: Elements = [
{ id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
{ id: '1', label: '-', position: { x: 100, y: 100 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
{ id: 'e1-2', source: '1', target: '2' },
]
@@ -17,18 +15,13 @@ const opts = ref({
})
const updateNode = () => {
elements.value = elements.value.map((el) => {
elements.value.forEach((el) => {
if (el.id === '1') {
// it's important that you create a new object here in order to notify react flow about the change
el.data = {
...el.data,
label: opts.value.name,
}
el.label = opts.value.name
el.style = { backgroundColor: opts.value.bg }
el.hidden = opts.value.hidden
}
return el
})
}
@@ -50,3 +43,6 @@ onMounted(updateNode)
</div>
</VueFlow>
</template>
<style>
@import './updatenode.css';
</style>
examples/Validation/CustomInput.vue
+5
View File
@@ -6,6 +6,11 @@ interface CustomInputProps {
}
const props = defineProps<CustomInputProps>()
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<template>
<div>Only connectable with B</div>
<Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
examples/Validation/CustomNode.vue
+5
View File
@@ -8,6 +8,11 @@ interface CustomNodeProps extends NodeProps {
const props = defineProps<CustomNodeProps>()
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<template>
<Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
<div>{{ props.id }}</div>
examples/Validation/ValidationExample.vue
+18 -21
View File
@@ -1,44 +1,38 @@
<script lang="ts" setup>
import CustomInput from './CustomInput.vue'
import CustomNode from './CustomNode.vue'
import { VueFlow, addEdge, Connection, Elements, OnConnectStartParams, FlowInstance } from '~/index'
import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useElementsState } from '~/index'
import './validation.css'
const initialElements: Elements = [
{ id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
{
id: 'A',
type: 'customnode',
position: { x: 250, y: 0 },
isValidSourcePos: (connection) => {
console.log(connection)
return false
const { nodes, edges, addEdges } = useElementsState({
nodes: [
{ id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
{
id: 'A',
type: 'customnode',
position: { x: 250, y: 0 },
isValidSourcePos: () => false,
},
},
{ id: 'B', type: 'customnode', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
]
{ id: 'B', type: 'customnode', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
],
})
const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection) => {
console.log('on connect', params)
elements.value = addEdge(params, elements.value)
addEdges([params])
}
</script>
<template>
<VueFlow
v-model="elements"
:select-nodes-on-drag="false"
:node-types="['custominput', 'customnode']"
class="validationflow"
@connect="onConnect"
@oad="onLoad"
@pane-ready="onLoad"
@connect-start="onConnectStart"
@connect-stop="onConnectStop"
@connect-end="onConnectEnd"
@@ -51,3 +45,6 @@ const onConnect = (params: Connection) => {
</template>
</VueFlow>
</template>
<style>
@import './validation.css';
</style>
examples/ZoomPanHelper/ZoomPanHelperExample.vue
-38
View File
@@ -1,38 +0,0 @@
<script lang="ts" setup>
import { VueFlow, addEdge, Background, MiniMap, useZoomPanHelper, Elements, Connection, Edge, Node } from '~/index'
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
{ id: '4', data: { 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' },
]
let id = 5
const getId = () => `${id++}`
const { project } = useZoomPanHelper()
const elements = ref(initialElements)
const onPaneClick = (evt: MouseEvent) => {
const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 })
elements.value = elements.value.concat({
id: getId(),
position: projectedPosition,
data: {
label: `${projectedPosition.x}-${projectedPosition.y}`,
},
} as Node)
}
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
</script>
<template>
<VueFlow v-model="elements" @connect="onConnect" @pane-click="onPaneClick">
<Background />
<MiniMap />
</VueFlow>
</template>
examples/router.ts
-4
View File
@@ -93,10 +93,6 @@ export const routes: RouterOptions['routes'] = [
path: '/validation',
component: () => import('./Validation/ValidationExample.vue'),
},
{
path: '/zoom-pan-helper',
component: () => import('./ZoomPanHelper/ZoomPanHelperExample.vue'),
},
{
path: '/nesting',
component: () => import('./Nesting/Nesting.vue'),
src/composables/useVueFlow.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { getCurrentInstance } from 'vue'
import { FlowOptions, UseVueFlow } from '~/types'
import { FlowOptions, State, UseVueFlow } from '~/types'
import { VueFlow } from '~/context'
import { useStore } from '~/store'
@@ -11,7 +11,7 @@ export default (options?: FlowOptions): UseVueFlow => {
: false
if (!vueFlow || (vueFlow && options?.id && options.id !== vueFlow.id)) {
const name = options?.id ?? `vue-flow-${id++}`
const store = useStore(name, options)
const store = useStore(options as State)
vueFlow = {
id: name,
store: reactive(store),
src/store/store.ts
+2 -47
View File
@@ -1,10 +1,9 @@
import useState from './state'
import useActions from './actions'
import useGetters from './getters'
import { FlowExportObject, FlowHooksOn, FlowOptions, State, GraphEdge, GraphNode, Store } from '~/types'
import { isEdge, isNode, onLoadToObject } from '~/utils'
import { FlowHooksOn, State, Store } from '~/types'
const useFlowStore = (preloadedState: State): Store => {
export default (preloadedState: State): Store => {
const state = reactive(useState(preloadedState))
const getters = useGetters(state)
const actions = useActions(state, getters)
@@ -25,47 +24,3 @@ const useFlowStore = (preloadedState: State): Store => {
...actions,
}
}
export default (id: string, options?: FlowOptions): Store => {
const withStorage = options?.storageKey ?? false
let storedState = ref<FlowExportObject>()
const storageKey = id ?? options?.id
const preloadedState = options as State
if (withStorage) {
storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
if (storedState.value) {
preloadedState.nodes = (
storedState.value.nodes
? storedState.value.nodes
: options?.nodes
? options.nodes
: options?.modelValue
? options?.modelValue.filter((el) => isNode(el))
: []
) as GraphNode[]
preloadedState.edges = (
storedState.value.edges
? storedState.value.edges
: options?.edges
? options.edges
: options?.modelValue
? options?.modelValue.filter((el) => isEdge(el))
: []
) as GraphEdge[]
if (storedState.value.position && storedState.value.zoom)
preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
}
}
const store = useFlowStore(preloadedState)
if (withStorage && storageKey === id) {
const toObject = onLoadToObject(store.state)
watch(
store.state,
() => {
storedState.value = toObject()
},
{ deep: true },
)
}
return store
}