39b21faa5b
* no more elements prop - v-model instead! * Instead of passing an object map to components just pass in an array of strings as nodeTypes/edgeTypes object * the string name will either be resolved to a dynamic component with :is="type" or a slot with the type-name * update all examples Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
29 lines
772 B
Vue
29 lines
772 B
Vue
<script lang="ts" setup>
|
|
import { CSSProperties } from 'vue'
|
|
import { Handle, Position, NodeProps } from '~/index'
|
|
|
|
interface CustomNodeProps extends NodeProps {
|
|
data: {
|
|
handleCount: number
|
|
handlePosition: number
|
|
}
|
|
}
|
|
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' }
|
|
|
|
const props = defineProps<CustomNodeProps>()
|
|
</script>
|
|
<template>
|
|
<div :style="nodeStyles">
|
|
<Handle type="target" :position="Position.Left" />
|
|
<div>output handle count: {{ props.data.handleCount }}</div>
|
|
<Handle
|
|
v-for="i of props.data.handleCount"
|
|
:id="`handle-${i}`"
|
|
:key="`handle-${i}`"
|
|
type="source"
|
|
:position="Position.Right"
|
|
:style="{ top: 10 * i + props.data.handlePosition * 10 }"
|
|
/>
|
|
</div>
|
|
</template>
|