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

fix(core): use center position of handle as snapping point for connection lines (#1625)

Browse Source 
* fix(core): calculate handle positions correctly

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(core): remove handleId check

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(core): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(core): cleanup click connect handlers

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(core): add flow id to handle ids

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* tests: correct updateEdge test

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(core): use center position of handle

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(examples): cleanup easy connect example

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* refactor(tests): run actions on chrome

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(workflows): correctly hash lock file

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2025-01-04 14:00:41 +01:00
parent 041fd871a1
commit b33da47a3a
16 changed files with 385 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
examples/vite/src/EasyConnect/EasyConnect.vue
View File

@@ -1,12 +1,10 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import type { Elements } from '@vue-flow/core'
import type { Node } from '@vue-flow/core'
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'
import CustomConnectionLine from './CustomConnectionLine.vue'
import FloatingConnectionLine from './FloatingConnectionLine.vue'
import FloatingEdge from './FloatingEdge.vue'
const { onConnect, addEdges } = useVueFlow()
@@ -20,7 +18,7 @@ const defaultEdgeOptions = {
},
}
const elements = ref<Elements>([
const nodes = ref<Node[]>([
{
id: '1',
type: 'custom',
@@ -43,37 +41,31 @@ const elements = ref<Elements>([
},
])
const edges = ref([])
onConnect(addEdges)
</script>
<template>
<div style="height: 100vh">
<VueFlow
v-model="elements"
:elevate-nodes-on-select="false"
class="vue-flow-basic-example"
:default-zoom="1.5"
:default-edge-options="defaultEdgeOptions"
:min-zoom="0.2"
:max-zoom="4"
>
<Background pattern-color="#aaa" :gap="8" />
<VueFlow
v-model:nodes="nodes"
v-model:edges="edges"
:elevate-nodes-on-select="false"
:default-edge-options="defaultEdgeOptions"
fit-view-on-init
>
<Background pattern-color="#aaa" :gap="8" />
<MiniMap />
<template #node-custom="props">
<CustomNode :id="props.id" />
</template>
<Controls />
<template #edge-floating="fProps">
<FloatingEdge v-bind="fProps" />
</template>
<template #node-custom="props">
<CustomNode :id="props.id" />
</template>
<template #edge-floating="fProps">
<FloatingEdge v-bind="fProps" />
</template>
<template #connection-line="cProps">
<CustomConnectionLine v-bind="cProps" />
</template>
</VueFlow>
</div>
<template #connection-line="cProps">
<FloatingConnectionLine v-bind="cProps" />
</template>
</VueFlow>
</template>

11
examples/vite/src/EasyConnect/CustomConnectionLine.vue → examples/vite/src/EasyConnect/FloatingConnectionLine.vue
View File

@@ -1,9 +1,9 @@
<script lang="ts" setup>
import type { GraphNode } from '@vue-flow/core'
import { getStraightPath } from '@vue-flow/core'
import type { ConnectionLineProps } from '@vue-flow/core'
import { BaseEdge, getStraightPath } from '@vue-flow/core'
import { computed } from 'vue'
const props = defineProps<{ sourceNode: GraphNode; sourceX: number; sourceY: number; targetX: number; targetY: number }>()
const props = defineProps<ConnectionLineProps>()
const edgePath = computed(() =>
getStraightPath({
@@ -15,13 +15,12 @@ const edgePath = computed(() =>
<template>
<g>
<path
<BaseEdge
:style="{
strokeWidth: 3,
stroke: 'black',
}"
fill="none"
:d="edgePath[0]"
:path="edgePath[0]"
/>
<circle :cx="targetX" :cy="targetY" fill="black" :r="3" stroke="black" :stroke-width="1.5" />
</g>

8
examples/vite/src/EasyConnect/FloatingEdge.vue
View File

@@ -1,11 +1,11 @@
<script lang="ts" setup>
import type { GraphNode } from '@vue-flow/core'
import { getStraightPath } from '@vue-flow/core'
import type { EdgeProps } from '@vue-flow/core'
import { BaseEdge, getStraightPath } from '@vue-flow/core'
import { computed } from 'vue'
import { getEdgeParams } from './utils'
const props = defineProps<{ id: string; sourceNode: GraphNode; targetNode: GraphNode; markerEnd: string; style: any }>()
const props = defineProps<EdgeProps>()
const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
@@ -20,5 +20,5 @@ const edgePath = computed(() =>
</script>
<template>
<path :id="id" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" :style="style" />
<BaseEdge :id="id" :path="edgePath[0]" :marker-end="markerEnd" :style="style" />
</template>