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

update: fix names

Browse Source
This commit is contained in:
Braks
2021-10-21 17:42:33 +02:00
parent e9392b13c5
commit 20e9d1d396
23 changed files with 210 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Basic/Basic.vue
+3 -3
View File
@@ -28,9 +28,9 @@ const rfInstance = ref<OnLoadParams | null>(null)
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements))
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements))
const onLoad = (revueFlowInstance: OnLoadParams) => {
revueFlowInstance.fitView({ padding: 0.1 })
rfInstance.value = revueFlowInstance
const onLoad = (flowInstance: OnLoadParams) => {
flowInstance.fitView({ padding: 0.1 })
rfInstance.value = flowInstance
}
const updatePos = () => {
examples/CustomNode/CustomNode.vue
+3 -3
View File
@@ -25,9 +25,9 @@ const nodeTypes = {
selectorNode: ColorSelectorNode,
}
const onLoad = (revueFlowInstance: OnLoadParams) => {
revueFlowInstance.fitView()
console.log('flow loaded:', revueFlowInstance)
const onLoad = (flowInstance: OnLoadParams) => {
flowInstance.fitView()
console.log('flow loaded:', flowInstance)
}
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
examples/DragNDrop/DnD.vue
+7 -7
View File
@@ -3,7 +3,7 @@ import Sidebar from './Sidebar.vue'
import Flow, { addEdge, removeElements, Controls, OnLoadParams, Elements, Connection, Edge, ElementId, Node } from '~/index'
import './dnd.css'
const revueFlowInstance = ref<OnLoadParams>()
const flowInstance = ref<OnLoadParams>()
const elements = ref<Elements>([
{
id: '1',
@@ -26,15 +26,15 @@ const onDragOver = (event: DragEvent) => {
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements))
const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance)
const onLoad = (instance: OnLoadParams) => (flowInstance.value = instance)
const onDrop = (event: DragEvent) => {
event.preventDefault()
if (revueFlowInstance.value) {
console.log(event.dataTransfer?.getData('application/revueflow'))
const type = event.dataTransfer?.getData('application/revueflow')
const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
if (flowInstance.value) {
console.log(event.dataTransfer?.getData('application/vueflow'))
const type = event.dataTransfer?.getData('application/vueflow')
const position = flowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
const newNode = {
id: getId(),
type,
@@ -48,7 +48,7 @@ const onDrop = (event: DragEvent) => {
</script>
<template>
<div class="dndflow">
<div class="revueflow-wrapper" @drop="onDrop">
<div class="vueflow-wrapper" @drop="onDrop">
<Flow :elements="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
<Controls />
</Flow>
examples/DragNDrop/Sidebar.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
const onDragStart = (event: DragEvent, nodeType: string) => {
if (event.dataTransfer) {
event.dataTransfer.setData('application/revueflow', nodeType)
event.dataTransfer.setData('application/vueflow', nodeType)
event.dataTransfer.effectAllowed = 'move'
}
}
examples/DragNDrop/dnd.css
+1 -1
View File
@@ -20,7 +20,7 @@
margin-bottom: 10px;
}
.dndflow .revueflow-wrapper {
.dndflow .vue-flow-wrapper {
flex-grow: 1;
height: 100%;
}
examples/EdgeTypes/EdgeTypesExample.vue
+3 -3
View File
@@ -5,9 +5,9 @@
import { getElements } from './utils'
import Flow, { removeElements, addEdge, MiniMap, Controls, Background, OnLoadParams, Connection, Edge, Elements } from '~/index'
const onLoad = (reactFlowInstance: OnLoadParams) => {
reactFlowInstance.fitView()
console.log(reactFlowInstance.getElements())
const onLoad = (flowInstance: OnLoadParams) => {
flowInstance.fitView()
console.log(flowInstance.getElements())
}
const elements = ref<Elements>(getElements())
examples/EdgeWithButton/EdgeWithButton.vue
+1 -1
View File
@@ -32,7 +32,7 @@ const elements = ref<Elements>([
},
] as Elements)
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
const onLoad = (flowInstance: OnLoadParams) => flowInstance.fitView()
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements))
const onConnect = (params: Connection | Edge) =>
examples/Edges/EdgesExample.vue
+3 -3
View File
@@ -81,9 +81,9 @@ const edgeTypes: Record<string, any> = {
const elements = ref<Elements>(initialElements as Elements)
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
const onLoad = (flowInstance: OnLoadParams) => flowInstance.fitView()
const onNodeDragStop = (node: Node) => console.log('drag stop', node)
const onElementClick = (element: FlowElement) => console.log('click', element)
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
</script>
examples/Empty/EmptyExample.vue
+3 -3
View File
@@ -20,9 +20,9 @@ const elements = ref<Elements>([])
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance)
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
const onLoad = (flowInstance: OnLoadParams) => console.log('flow loaded:', flowInstance)
const onElementClick = (element: FlowElement) => console.log('click', element)
const onNodeDragStop = (node: Node) => console.log('drag stop', node)
const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }
const addRandomNode = () => {
examples/Layouting/LayoutingExample.vue
+3 -2
View File
@@ -14,9 +14,10 @@ const nodeExtent: NodeExtent = [
]
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge({ ...params, animated: true }, elements.value))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
// todo changing elements not properly updating flowchart...
const onLayout = (direction: string) => {
const isHorizontal = direction === 'LR'
dagreGraph.setGraph({ rankdir: direction })
@@ -50,7 +51,7 @@ const onLayout = (direction: string) => {
:node-extent="nodeExtent"
@connect="onConnect"
@clements-remove="onElementsRemove"
@load="() => onLayout('TB')"
@load="() => onLayout('LR')"
>
<Controls />
</Flow>
examples/Layouting/initial-elements.ts
+9 -9
View File
@@ -56,16 +56,16 @@ const elements: Elements = [
position,
},
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
{ id: 'e12', source: '1', target: '2', type: 'smoothstep' },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep' },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep' },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep' },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep' },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep' },
{ 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 },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep' },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep' },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep' },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
] as Elements
export default elements
examples/NodeTypeChange/NodeTypeChangeExample.vue
+1 -1
View File
@@ -27,7 +27,7 @@ const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
const onLoad = (flowInstance: OnLoadParams) => flowInstance.fitView()
const changeType = () => {
elements.value = elements.value.map((el) => {
examples/Overview/Overview.vue
+3 -3
View File
@@ -35,9 +35,9 @@ const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
const onElementClick = (_: MouseEvent, element: FlowElement) =>
console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element)
const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements)
const onLoad = (reactFlowInstance: OnLoadParams) => {
console.log('flow loaded:', reactFlowInstance)
reactFlowInstance.fitView()
const onLoad = (flowInstance: OnLoadParams) => {
console.log('flow loaded:', flowInstance)
flowInstance.fitView()
}
const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)