Files
vue-flow/examples/UpdateNodeInternals/CustomNode.vue
Braks 729d3d5ca2 update(examples): remove watchEffect from UpdateNodeExample.vue
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

update(examples): fix style calculation in CustomNode.vue

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
2021-11-25 15:21:36 +01:00

29 lines
779 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}px` }"
/>
</div>
</template>