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

examples: use EdgeLabelRenderer in edges example

Browse Source
This commit is contained in:
braks
2022-11-04 22:10:40 +01:00
committed by Braks
parent 43ff2a42e6
commit a26e83b27d
9 changed files with 110 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/flows/RGB.vue
-4
View File
@@ -31,10 +31,6 @@ const { onPaneReady, getNode, panOnDrag } = useVueFlow({
{ id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true }, { id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
], ],
zoomOnScroll: false, zoomOnScroll: false,
nodeExtent: [
[-50, -150],
[500, 300],
],
preventScrolling: false, preventScrolling: false,
}) })
examples/vite/src/Basic/Basic.vue
+3 -3
View File
@@ -1,14 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Background, Controls, MiniMap } from '@vue-flow/additional-components' import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
import type { Elements } from '@vue-flow/core' import type { Elements } from '@vue-flow/core'
import { VueFlow, isNode, useVueFlow } from '@vue-flow/core' import { VueFlow, isNode, useVueFlow } from '~/index'
const elements = ref<Elements>([ const elements = ref<Elements>([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, 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: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: '3', label: 'Node 3', position: { x: 400, 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: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2', animated: true }, { id: 'e1-2', source: '1', target: '2', animated: true, label: 'foobar' },
{ id: 'e1-3', source: '1', target: '3' }, { id: 'e1-3', source: '1', target: '3' },
]) ])
const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({ const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
@@ -40,7 +40,7 @@ const toggleclass = () => elements.value.forEach((el) => (el.class = el.class ==
</script> </script>
<template> <template>
<VueFlow v-model="elements" class="vue-flow-basic-example"> <VueFlow v-model="elements" connection-mode="strict" class="vue-flow-basic-example">
<Background /> <Background />
<MiniMap /> <MiniMap />
<Controls /> <Controls />
examples/vite/src/Edges/CustomEdge.vue
+20 -32
View File
@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { EdgeProps, Position } from '@vue-flow/core' import type { EdgeProps, Position } from '@vue-flow/core'
import { getBezierPath, useVueFlow } from '@vue-flow/core' import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import type { CSSProperties } from 'vue'
interface CustomEdgeProps<T = any> extends EdgeProps<T> { interface CustomEdgeProps<T = any> extends EdgeProps<T> {
id: string id: string
@@ -10,30 +11,16 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
targetY: number targetY: number
sourcePosition: Position sourcePosition: Position
targetPosition: Position targetPosition: Position
data?: T data: T
markerEnd: string markerEnd: string
style: CSSProperties
} }
const props = defineProps<CustomEdgeProps>() const props = defineProps<CustomEdgeProps>()
const { applyEdgeChanges, getEdges } = useVueFlow()
const onClick = (evt: Event, id: string) => { const { removeEdges } = useVueFlow()
applyEdgeChanges([{ type: 'remove', id }])
evt.stopPropagation()
}
const foreignObjectSize = 40 const path = $computed(() => getBezierPath(props))
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -43,19 +30,20 @@ export default {
</script> </script>
<template> <template>
<path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="props.markerEnd" /> <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
<foreignObject
:width="foreignObjectSize" <EdgeLabelRenderer>
:height="foreignObjectSize" <div
:x="edgePath[1] - foreignObjectSize / 2" :style="{
:y="edgePath[2] - foreignObjectSize / 2" pointerEvents: 'all',
class="edgebutton-foreignobject" position: 'absolute',
requiredExtensions="http://www.w3.org/1999/xhtml" transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
> }"
<body> class="nodrag nopan"
<button class="edgebutton" @click="(event) => onClick(event, props.id)">×</button> >
</body> <button class="edgebutton" @click="removeEdges([id])">×</button>
</foreignObject> </div>
</EdgeLabelRenderer>
</template> </template>
<style> <style>
examples/vite/src/Edges/CustomEdge2.vue
+13 -24
View File
@@ -2,7 +2,11 @@
import type { EdgeProps, Position } from '@vue-flow/core' import type { EdgeProps, Position } from '@vue-flow/core'
import { EdgeText, getBezierPath, getMarkerId } from '@vue-flow/core' import { EdgeText, getBezierPath, getMarkerId } from '@vue-flow/core'
interface CustomEdgeProps extends EdgeProps { interface CustomData {
text: string
}
interface CustomEdgeProps<T = CustomData> extends EdgeProps<T> {
source: string source: string
target: string target: string
sourceHandleId?: string sourceHandleId?: string
@@ -14,28 +18,13 @@ interface CustomEdgeProps extends EdgeProps {
targetY: number targetY: number
sourcePosition: Position sourcePosition: Position
targetPosition: Position targetPosition: Position
markerEndId?: string markerEnd?: string
data?: { data: T
text: string
}
} }
const props = defineProps<CustomEdgeProps>() const props = defineProps<CustomEdgeProps>()
const edgePath = computed(() => const path = $computed(() => getBezierPath(props))
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
}),
)
const markerEnd = computed(() => getMarkerId(props.markerEnd))
const onClick = () => console.log(props.data)
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -45,16 +34,16 @@ export default {
</script> </script>
<template> <template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" /> <path :id="id" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
<EdgeText <EdgeText
:x="edgePath[1]" :x="path[1]"
:y="edgePath[2]" :y="path[2]"
:label="props.data?.text" :label="data.text"
:label-style="{ fill: 'white' }" :label-style="{ fill: 'white' }"
:label-show-bg="true" :label-show-bg="true"
:label-bg-style="{ fill: 'red' }" :label-bg-style="{ fill: 'red' }"
:label-bg-padding="[2, 4]" :label-bg-padding="[2, 4]"
:label-bg-border-radius="2" :label-bg-border-radius="2"
@click="onClick"
/> />
</template> </template>
examples/vite/src/Edges/CustomLabel.vue
+2 -2
View File
@@ -3,9 +3,9 @@ interface CustomLabelProps {
label: string label: string
} }
const props = defineProps<CustomLabelProps>() defineProps<CustomLabelProps>()
</script> </script>
<template> <template>
<tspan dy="10" x="0">{{ props.label }}</tspan> <tspan dy="10" x="0">{{ label }}</tspan>
</template> </template>
examples/vite/src/Edges/EdgesExample.vue
+5 -71
View File
@@ -1,87 +1,21 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Edge, Node } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
import { Background, Controls, MiniMap } from '@vue-flow/additional-components' import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
import CustomEdge from './CustomEdge.vue' import CustomEdge from './CustomEdge.vue'
import CustomEdge2 from './CustomEdge2.vue' import CustomEdge2 from './CustomEdge2.vue'
import CustomLabel from './CustomLabel.vue' import { initialEdges, initialNodes } from './initial-elements'
const initialNodes: Node[] = [
{ id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
{ id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
{ id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
{ id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
{ id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
{ id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
{ id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
{ id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
{ id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
{ id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
]
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
{ id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{
id: 'e5-6',
source: '5',
target: '6',
label: h(CustomLabel, { label: 'custom label text' }, {}),
labelStyle: { fill: 'red', fontWeight: 700 },
markerEnd: {
type: MarkerType.Arrow,
},
},
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e5-8',
source: '5',
target: '8',
type: 'custom',
data: { text: 'custom edge' },
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e5-9',
source: '5',
target: '9',
type: 'custom2',
data: { text: 'custom edge 2' },
},
]
useVueFlow({
nodes: initialNodes,
edges: initialEdges,
})
</script> </script>
<template> <template>
<VueFlow :fit-view-on-init="true" :snap-to-grid="true"> <VueFlow :edges="initialEdges" :nodes="initialNodes" fit-view-on-init snap-to-grid>
<template #edge-custom="props"> <template #edge-custom="props">
<CustomEdge v-bind="props" /> <CustomEdge v-bind="props" />
</template> </template>
<template #edge-custom2="props"> <template #edge-custom2="props">
<CustomEdge2 v-bind="props" /> <CustomEdge2 v-bind="props" />
</template> </template>
<MiniMap /> <MiniMap />
<Controls /> <Controls />
<Background /> <Background />
examples/vite/src/Edges/initial-elements.ts
+65
View File
@@ -0,0 +1,65 @@
import type { Edge, Node } from '@vue-flow/core'
import { MarkerType } from '@vue-flow/core'
import CustomLabel from './CustomLabel.vue'
export const initialNodes: Node[] = [
{ id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
{ id: '2', label: 'Node 2', position: { x: 150, y: 100 } },
{ id: '2a', label: 'Node 2a', position: { x: 0, y: 180 } },
{ id: '3', label: 'Node 3', position: { x: 250, y: 200 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 300 } },
{ id: '3a', label: 'Node 3a', position: { x: 150, y: 300 } },
{ id: '5', label: 'Node 5', position: { x: 250, y: 400 } },
{ id: '6', type: 'output', label: 'Output 6', position: { x: 50, y: 550 } },
{ id: '7', type: 'output', label: 'Output 7', position: { x: 250, y: 550 } },
{ id: '8', type: 'output', label: 'Output 8', position: { x: 525, y: 600 } },
{ id: '9', type: 'output', label: 'Output 9', position: { x: 675, y: 500 } },
]
export const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
{ id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{
id: 'e5-6',
source: '5',
target: '6',
label: h(CustomLabel, { label: 'custom label text' }, {}),
labelStyle: { fill: 'red', fontWeight: 700 },
markerEnd: {
type: MarkerType.Arrow,
},
},
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e5-8',
source: '5',
target: '8',
type: 'custom',
data: { text: 'custom edge' },
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e5-9',
source: '5',
target: '9',
type: 'custom2',
data: { text: 'custom edge 2' },
},
]
examples/vite/tsconfig.json
+1 -1
View File
@@ -24,7 +24,7 @@
"jsx": "preserve", "jsx": "preserve",
"paths": { "paths": {
"~/*": [ "~/*": [
"../../packages/vue-flow/src/*" "../../packages/core/src/*"
] ]
} }
}, },
examples/vite/vite.config.ts
+1 -1
View File
@@ -9,7 +9,7 @@ export default defineConfig({
resolve: { resolve: {
dedupe: ['vue'], dedupe: ['vue'],
alias: { alias: {
'~': resolve('../../packages/vue-flow/src'), '~': resolve('../../packages/core/src'),
}, },
}, },
plugins: [ plugins: [