Braks
876b71dc19
* refactor(core): use node id to (re-)render nodes * refactor(core): use edge id to (re-)render nodes * chore(changeset): add * chore(core): cleanup * chore(core): cast cmp as any
35 lines
893 B
Vue
35 lines
893 B
Vue
<script lang="ts" setup>
|
|
import EdgeWrapper from '../../components/Edges/EdgeWrapper'
|
|
import ConnectionLine from '../../components/ConnectionLine'
|
|
import { useVueFlow } from '../../composables'
|
|
import { getEdgeZIndex } from '../../utils'
|
|
import MarkerDefinitions from './MarkerDefinitions.vue'
|
|
|
|
const { findNode, getEdges, elevateEdgesOnSelect, dimensions } = useVueFlow()
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'Edges',
|
|
compatConfig: { MODE: 3 },
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="dimensions.width && dimensions.height">
|
|
<MarkerDefinitions />
|
|
|
|
<svg
|
|
v-for="edge of getEdges"
|
|
:key="edge.id"
|
|
v-memo="[edge.id]"
|
|
class="vue-flow__edges vue-flow__container"
|
|
:style="{ zIndex: getEdgeZIndex(edge, findNode, elevateEdgesOnSelect) }"
|
|
>
|
|
<EdgeWrapper :id="edge.id" />
|
|
</svg>
|
|
|
|
<ConnectionLine />
|
|
</template>
|
|
</template>
|