examples: use EdgeLabelRenderer in edges example

2022-11-04 20:58:52 +01:00
parent 43ff2a42e6
commit a26e83b27d
9 changed files with 110 additions and 138 deletions
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -31,10 +31,6 @@ const { onPaneReady, getNode, panOnDrag } = useVueFlow({
    { id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
  ],
  zoomOnScroll: false,
-  nodeExtent: [
-    [-50, -150],
-    [500, 300],
-  ],
  preventScrolling: false,
 })

--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 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>([
  { 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-2', source: '1', target: '2', animated: true, label: 'foobar' },
  { id: 'e1-3', source: '1', target: '3' },
 ])
 const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
@@ -40,7 +40,7 @@ const toggleclass = () => elements.value.forEach((el) => (el.class = el.class ==
 </script>

 <template>
-  <VueFlow v-model="elements" class="vue-flow-basic-example">
+  <VueFlow v-model="elements" connection-mode="strict" class="vue-flow-basic-example">
    <Background />
    <MiniMap />
    <Controls />
--- a/examples/vite/src/Edges/CustomEdge.vue
+++ b/examples/vite/src/Edges/CustomEdge.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 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> {
  id: string
@@ -10,30 +11,16 @@ interface CustomEdgeProps<T = any> extends EdgeProps<T> {
  targetY: number
  sourcePosition: Position
  targetPosition: Position
-  data?: T
+  data: T
  markerEnd: string
+  style: CSSProperties
 }

 const props = defineProps<CustomEdgeProps>()
-const { applyEdgeChanges, getEdges } = useVueFlow()

-const onClick = (evt: Event, id: string) => {
-  applyEdgeChanges([{ type: 'remove', id }])
-  evt.stopPropagation()
-}
+const { removeEdges } = useVueFlow()

-const foreignObjectSize = 40
-
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
+const path = $computed(() => getBezierPath(props))
 </script>

 <script lang="ts">
@@ -43,19 +30,20 @@ export default {
 </script>

 <template>
-  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="props.markerEnd" />
-  <foreignObject
-    :width="foreignObjectSize"
-    :height="foreignObjectSize"
-    :x="edgePath[1] - foreignObjectSize / 2"
-    :y="edgePath[2] - foreignObjectSize / 2"
-    class="edgebutton-foreignobject"
-    requiredExtensions="http://www.w3.org/1999/xhtml"
-  >
-    <body>
-      <button class="edgebutton" @click="(event) => onClick(event, props.id)">×</button>
-    </body>
-  </foreignObject>
+  <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
+
+  <EdgeLabelRenderer>
+    <div
+      :style="{
+        pointerEvents: 'all',
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
+      }"
+      class="nodrag nopan"
+    >
+      <button class="edgebutton" @click="removeEdges([id])">×</button>
+    </div>
+  </EdgeLabelRenderer>
 </template>

 <style>
--- a/examples/vite/src/Edges/CustomEdge2.vue
+++ b/examples/vite/src/Edges/CustomEdge2.vue
@@ -2,7 +2,11 @@
 import type { EdgeProps, Position } 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
  target: string
  sourceHandleId?: string
@@ -14,28 +18,13 @@ interface CustomEdgeProps extends EdgeProps {
  targetY: number
  sourcePosition: Position
  targetPosition: Position
-  markerEndId?: string
-  data?: {
-    text: string
-  }
+  markerEnd?: string
+  data: T
 }

 const props = defineProps<CustomEdgeProps>()

-const edgePath = computed(() =>
-  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)
+const path = $computed(() => getBezierPath(props))
 </script>

 <script lang="ts">
@@ -45,16 +34,16 @@ export default {
 </script>

 <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
-    :x="edgePath[1]"
-    :y="edgePath[2]"
-    :label="props.data?.text"
+    :x="path[1]"
+    :y="path[2]"
+    :label="data.text"
    :label-style="{ fill: 'white' }"
    :label-show-bg="true"
    :label-bg-style="{ fill: 'red' }"
    :label-bg-padding="[2, 4]"
    :label-bg-border-radius="2"
-    @click="onClick"
  />
 </template>
--- a/examples/vite/src/Edges/CustomLabel.vue
+++ b/examples/vite/src/Edges/CustomLabel.vue
@@ -3,9 +3,9 @@ interface CustomLabelProps {
  label: string
 }

-const props = defineProps<CustomLabelProps>()
+defineProps<CustomLabelProps>()
 </script>

 <template>
-  <tspan dy="10" x="0">{{ props.label }}</tspan>
+  <tspan dy="10" x="0">{{ label }}</tspan>
 </template>
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,87 +1,21 @@
 <script lang="ts" setup>
-import type { Edge, Node } from '@vue-flow/core'
-import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow } from '@vue-flow/core'
 import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
-import CustomLabel from './CustomLabel.vue'
-
-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,
-})
+import { initialEdges, initialNodes } from './initial-elements'
 </script>

 <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">
      <CustomEdge v-bind="props" />
    </template>
+
    <template #edge-custom2="props">
      <CustomEdge2 v-bind="props" />
    </template>
+
    <MiniMap />
    <Controls />
    <Background />
--- a/examples/vite/src/Edges/initial-elements.ts
+++ b/examples/vite/src/Edges/initial-elements.ts
@@ -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' },
+  },
+]
--- a/examples/vite/tsconfig.json
+++ b/examples/vite/tsconfig.json
@@ -24,7 +24,7 @@
    "jsx": "preserve",
    "paths": {
      "~/*": [
-        "../../packages/vue-flow/src/*"
+        "../../packages/core/src/*"
      ]
    }
  },
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
  resolve: {
    dedupe: ['vue'],
    alias: {
-      '~': resolve('../../packages/vue-flow/src'),
+      '~': resolve('../../packages/core/src'),
    },
  },
  plugins: [