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

fix: typings

Browse Source
This commit is contained in:
Braks
2021-10-22 14:29:27 +02:00
parent cb96b1ab00
commit 6ec8258f33
50 changed files with 165 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/Basic/Basic.vue
View File

@@ -23,11 +23,10 @@ const elements = ref<Elements>([
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
] as Elements)
])
const rfInstance = ref<FlowInstance | 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 onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
const onLoad = (flowInstance: FlowInstance) => {
flowInstance.fitView({ padding: 0.1 })
rfInstance.value = flowInstance

7
examples/CustomConnectionLine/CustomConnectionLine.vue
View File

@@ -9,10 +9,9 @@ const elements = ref<Elements>([
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
},
] as Elements)
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
])
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
</script>
<template>
<Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">

7
examples/CustomNode/CustomNode.vue
View File

@@ -94,11 +94,10 @@ onMounted(() => {
{ id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
{ id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
{ id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
] as Elements
]
})
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) =>
(elements.value = addEdge(
@@ -107,7 +106,7 @@ const onConnect = (params: Connection | Edge) =>
animated: true,
style: { stroke: '#fff' },
} as Edge,
elements.value as Elements,
elements.value,
))
</script>
<template>

7
examples/DragNDrop/DnD.vue
View File

@@ -11,7 +11,7 @@ const elements = ref<Elements>([
data: { label: 'input node' },
position: { x: 250, y: 5 },
},
] as Elements)
])
let id = 0
const getId = (): ElementId => `dndnode_${id++}`
@@ -23,9 +23,8 @@ 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 onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
const onDrop = (event: DragEvent) => {

2
examples/EdgeTypes/utils.ts
View File

@@ -102,5 +102,5 @@ export function getElements(): Elements {
}
}
return initialElements as Elements
return initialElements
}

7
examples/EdgeWithButton/EdgeWithButton.vue
View File

@@ -30,13 +30,12 @@ const elements = ref<Elements>([
target: 'ewb-2',
type: 'buttonedge',
},
] as Elements)
])
const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements))
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
const onConnect = (params: Connection | Edge) =>
(elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements))
(elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value))
</script>
<template>
<Flow

4
examples/Edges/EdgesExample.vue
View File

@@ -16,7 +16,7 @@ import Flow, {
ArrowHeadType,
} from '~/index'
const initialElements = [
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
@@ -79,7 +79,7 @@ const edgeTypes: Record<string, any> = {
custom2: CustomEdge2,
}
const elements = ref<Elements>(initialElements as Elements)
const elements = ref<Elements>(initialElements)
const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
const onNodeDragStop = (node: Node) => console.log('drag stop', node)

1
examples/Empty/EmptyExample.vue
View File

@@ -38,7 +38,6 @@ const addRandomNode = () => {
<template>
<Flow
:elements="elements"
:only-render-visible-elements="false"
@load="onLoad"
@element-click="onElementClick"
@elements-remove="onElementsRemove"

2
examples/Hidden/HiddenExample.vue
View File

@@ -9,7 +9,7 @@ const initialElements: Elements = [
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4' },
] as Elements
]
const elements = ref<Elements>(initialElements)
const isHidden = ref<boolean>(false)

2
examples/Interaction/InteractionExample.vue
View File

@@ -19,7 +19,7 @@ const initialElements: Elements = [
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
] as Elements
]
const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node)
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)

2
examples/Layouting/initial-elements.ts
View File

@@ -66,6 +66,6 @@ const elements: Elements = [
{ 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

2
examples/MultiFlows/Flow.vue
View File

@@ -7,7 +7,7 @@ const initialElements: Elements = [
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
] as Elements
]
const elements = ref<Elements>(initialElements)
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))

2
examples/NodeTypeChange/NodeTypeChangeExample.vue
View File

@@ -19,7 +19,7 @@ const initialElements: Elements = [
position: { x: 250, y: 0 },
},
{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
] as Elements
]
const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }

7
examples/NodeTypesIdChange/NodeA.vue
View File

@@ -1,5 +1,10 @@
<script lang="ts" setup>
const props = defineProps<{ nodeStyles: Record<string, any> }>()
import { NodeProps } from '~/index'
interface NodeAProps extends NodeProps {
nodeStyles: Record<string, any>
}
const props = defineProps<NodeAProps>()
</script>
<template>
<div :style="props.nodeStyles">A</div>

7
examples/NodeTypesIdChange/NodeB.vue
View File

@@ -1,5 +1,10 @@
<script lang="ts" setup>
const props = defineProps<{ nodeStyles: Record<string, any> }>()
import { NodeProps } from '~/index'
interface NodeBPro extends NodeProps {
nodeStyles: Record<string, any>
}
const props = defineProps<NodeBPro>()
</script>
<template>
<div :style="props.nodeStyles">B</div>

2
examples/Overview/Overview.vue
View File

@@ -112,7 +112,7 @@ const initialElements: Elements = [
animated: true,
labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
},
] as Elements
]
const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
const snapGrid: SnapGrid = [16, 16]

2
examples/Provider/ProviderExample.vue
View File

@@ -25,7 +25,7 @@ const initialElements: Elements = [
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
] as Elements
]
useStore()
const elements = ref<Elements>(initialElements)

2
examples/SaveRestore/SaveRestoreExample.vue
View File

@@ -8,7 +8,7 @@ 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: 'e1-2', source: '1', target: '2' },
] as Elements
]
const elements = ref(initialElements)
const flowInstance = ref()

2
examples/Stress/utils.ts
View File

@@ -26,5 +26,5 @@ export function getElements(xElements = 10, yElements = 10): Elements {
}
}
return initialElements as Elements
return initialElements
}

4
examples/Switch/SwitchExample.vue
View File

@@ -11,7 +11,7 @@ const elementsA: Elements = [
{ id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{ id: 'e1-2', source: '1a', target: '2a' },
{ id: 'e1-3', source: '1a', target: '3a' },
] as Elements
]
const elementsB: Elements = [
{ id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' },
@@ -24,7 +24,7 @@ const elementsB: Elements = [
{ id: 'e2b', source: 'inputb', target: '2b' },
{ id: 'e3b', source: 'inputb', target: '3b' },
{ id: 'e4b', source: 'inputb', target: '4b' },
] as Elements
]
const elements = ref(elementsA)

4
examples/Unidirectional/UnidirectionalExample.vue
View File

@@ -169,10 +169,10 @@ const initialElements: Elements = [
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
},
] as Elements
]
const nodeTypes: Record<string, NodeType> = {
custom: CustomNode,
custom: CustomNode as NodeType,
}
let id = 4

2
examples/UpdatableEdge/UpdatableEdgeExample.vue
View File

@@ -37,7 +37,7 @@ const initialElements: Elements = [
style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
},
{ id: 'e1-2', source: '1', target: '2', label: 'Updateable edge' },
] as Elements
]
const elements = ref(initialElements)
const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()

2
examples/UpdateNode/UpdateNodeExample.vue
View File

@@ -7,7 +7,7 @@ const initialElements: Elements = [
{ id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
{ id: 'e1-2', source: '1', target: '2' },
] as Elements
]
const elements = ref<Elements>(initialElements)
const nodeName = ref<string>('Node 1')

6
examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
View File

@@ -24,7 +24,7 @@ const initialElements: Elements = [
data: { label: 'Node 1', handleCount: initialHandleCount, handlePosition: 0 },
position: { x: 250, y: 5 },
},
] as Elements
]
const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 }
@@ -68,13 +68,15 @@ const onLoad = (instance: FlowInstance) => {
instance.fitView()
flowInstance.value = instance
}
const updateNodeInternals = () => flowInstance.value?.updateNodeInternals('1')
</script>
<template>
<Flow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
<div :style="buttonWrapperStyles">
<button @click="toggleHandleCount">toggle handle count</button>
<button @click="toggleHandlePosition">toggle handle position</button>
<button @click="() => flowInstance.updateNodeInternals('1')">update node internals</button>
<button @click="updateNodeInternals">update node internals</button>
</div>
</Flow>
</template>

2
examples/Validation/ValidationExample.vue
View File

@@ -21,7 +21,7 @@ const initialElements: Elements = [
{ id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
{ id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
{ id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
] as Elements
]
const onLoad = (reactFlowInstance: FlowInstance) => reactFlowInstance.fitView()
const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })

2
examples/ZoomPanHelper/ZoomPanHelperExample.vue
View File

@@ -19,7 +19,7 @@ const initialElements: Elements = [
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
] as Elements
]
let id = 5
const getId = (): ElementId => `${id++}`