fix(edges): use correct functions for center/path in simple bezier edge

This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 2b2aad8cdc
commit 3acb43d000
3 changed files with 6 additions and 7 deletions
+1 -2
View File
@@ -9,7 +9,7 @@ const elements = ref<Elements>([
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
])
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow()
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
onPaneReady(({ fitView }) => {
fitView({ padding: 0.1 })
})
@@ -37,7 +37,6 @@ const toggleclass = () => elements.value.forEach((el) => (el.class = el.class ==
:default-zoom="1.5"
:min-zoom="0.2"
:max-zoom="4"
:zoom-on-scroll="false"
>
<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>
+3 -3
View File
@@ -68,9 +68,6 @@ const { onPaneReady } = useVueFlow({
snapToGrid: true,
snapGrid,
defaultZoom: 1.5,
nodeTypes: {
selectorNode: markRaw(ColorSelectorNode),
},
})
onPaneReady((i) => {
i.fitView()
@@ -79,6 +76,9 @@ onPaneReady((i) => {
</script>
<template>
<VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
<template #node-selectorNode="props">
<ColorSelectorNode v-bind="props" />
</template>
<MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
<Controls />
</VueFlow>
+2 -2
View File
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<EdgeProps>(), {
})
const centered = computed(() =>
getSimpleBezierPath({
getSimpleBezierCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
@@ -26,7 +26,7 @@ const centered = computed(() =>
)
const path = computed(() => {
if (props.sourceX && props.sourceY)
return getSimpleBezierCenter({
return getSimpleBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,