fix(edges): use correct functions for center/path in simple bezier edge
This commit is contained in:
@@ -9,7 +9,7 @@ const elements = ref<Elements>([
|
|||||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||||
{ id: 'e1-3', source: '1', target: '3' },
|
{ id: 'e1-3', source: '1', target: '3' },
|
||||||
])
|
])
|
||||||
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
|
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
|
||||||
onPaneReady(({ fitView }) => {
|
onPaneReady(({ fitView }) => {
|
||||||
fitView({ padding: 0.1 })
|
fitView({ padding: 0.1 })
|
||||||
})
|
})
|
||||||
@@ -37,7 +37,6 @@ const toggleclass = () => elements.value.forEach((el) => (el.class = el.class ==
|
|||||||
:default-zoom="1.5"
|
:default-zoom="1.5"
|
||||||
:min-zoom="0.2"
|
:min-zoom="0.2"
|
||||||
:max-zoom="4"
|
:max-zoom="4"
|
||||||
:zoom-on-scroll="false"
|
|
||||||
>
|
>
|
||||||
<Background :variant="BackgroundVariant.None" :height="33" bg-color="pink">
|
<Background :variant="BackgroundVariant.None" :height="33" bg-color="pink">
|
||||||
<text fill="#000000" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 1 </text>
|
<text fill="#000000" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 1 </text>
|
||||||
|
|||||||
@@ -68,9 +68,6 @@ const { onPaneReady } = useVueFlow({
|
|||||||
snapToGrid: true,
|
snapToGrid: true,
|
||||||
snapGrid,
|
snapGrid,
|
||||||
defaultZoom: 1.5,
|
defaultZoom: 1.5,
|
||||||
nodeTypes: {
|
|
||||||
selectorNode: markRaw(ColorSelectorNode),
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
onPaneReady((i) => {
|
onPaneReady((i) => {
|
||||||
i.fitView()
|
i.fitView()
|
||||||
@@ -79,6 +76,9 @@ onPaneReady((i) => {
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
|
<VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
|
||||||
|
<template #node-selectorNode="props">
|
||||||
|
<ColorSelectorNode v-bind="props" />
|
||||||
|
</template>
|
||||||
<MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
|
<MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
|
||||||
<Controls />
|
<Controls />
|
||||||
</VueFlow>
|
</VueFlow>
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<EdgeProps>(), {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const centered = computed(() =>
|
const centered = computed(() =>
|
||||||
getSimpleBezierPath({
|
getSimpleBezierCenter({
|
||||||
sourceX: props.sourceX,
|
sourceX: props.sourceX,
|
||||||
sourceY: props.sourceY,
|
sourceY: props.sourceY,
|
||||||
targetX: props.targetX,
|
targetX: props.targetX,
|
||||||
@@ -26,7 +26,7 @@ const centered = computed(() =>
|
|||||||
)
|
)
|
||||||
const path = computed(() => {
|
const path = computed(() => {
|
||||||
if (props.sourceX && props.sourceY)
|
if (props.sourceX && props.sourceY)
|
||||||
return getSimpleBezierCenter({
|
return getSimpleBezierPath({
|
||||||
sourceX: props.sourceX,
|
sourceX: props.sourceX,
|
||||||
sourceY: props.sourceY,
|
sourceY: props.sourceY,
|
||||||
targetX: props.targetX,
|
targetX: props.targetX,
|
||||||
|
|||||||
Reference in New Issue
Block a user