chore: remove default data value from default nodes
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
|
import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow/src/index'
|
||||||
import ResizableNode from './ResizableNode.vue'
|
import ResizableNode from './ResizableNode.vue'
|
||||||
|
|
||||||
const elements = ref<Elements>([
|
const elements = ref<Elements>([
|
||||||
@@ -9,13 +9,21 @@ const elements = ref<Elements>([
|
|||||||
type: 'resize',
|
type: 'resize',
|
||||||
label: 'Node 2',
|
label: 'Node 2',
|
||||||
position: { x: 100, y: 100 },
|
position: { x: 100, y: 100 },
|
||||||
|
data: { foo: 'bar' },
|
||||||
|
class: (el) => {
|
||||||
|
return ''
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
|
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
|
||||||
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
|
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
|
||||||
{ 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, store } = useVueFlow()
|
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow({
|
||||||
|
defaultZoom: 1.5,
|
||||||
|
minZoom: 0.2,
|
||||||
|
maxZoom: 4,
|
||||||
|
})
|
||||||
onPaneReady(({ fitView }) => {
|
onPaneReady(({ fitView }) => {
|
||||||
fitView()
|
fitView()
|
||||||
})
|
})
|
||||||
@@ -37,7 +45,7 @@ const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1
|
|||||||
const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
|
const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VueFlow v-model="elements" class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
|
<VueFlow v-model="elements" class="vue-flow-basic-example">
|
||||||
<template #node-resize="props">
|
<template #node-resize="props">
|
||||||
<ResizableNode v-bind="props" />
|
<ResizableNode v-bind="props" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { Position } from '../../types'
|
|||||||
import type { NodeProps } from '../../types/node'
|
import type { NodeProps } from '../../types/node'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<NodeProps>(), {
|
const props = withDefaults(defineProps<NodeProps>(), {
|
||||||
data: () => {},
|
|
||||||
connectable: false,
|
connectable: false,
|
||||||
sourcePosition: 'bottom' as Position,
|
sourcePosition: 'bottom' as Position,
|
||||||
targetPosition: 'top' as Position,
|
targetPosition: 'top' as Position,
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { Position } from '../../types'
|
|||||||
import type { NodeProps } from '../../types/node'
|
import type { NodeProps } from '../../types/node'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<NodeProps>(), {
|
const props = withDefaults(defineProps<NodeProps>(), {
|
||||||
data: () => {},
|
|
||||||
connectable: false,
|
connectable: false,
|
||||||
sourcePosition: 'bottom' as Position,
|
sourcePosition: 'bottom' as Position,
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { Position } from '../../types'
|
|||||||
import type { NodeProps } from '../../types/node'
|
import type { NodeProps } from '../../types/node'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<NodeProps>(), {
|
const props = withDefaults(defineProps<NodeProps>(), {
|
||||||
data: () => {},
|
|
||||||
connectable: false,
|
connectable: false,
|
||||||
targetPosition: 'top' as Position,
|
targetPosition: 'top' as Position,
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user