refactor(edges): Remove base edge from default edge types

# What's changed?

* Remove base-edge component for performance
This commit is contained in:
Braks
2022-04-24 13:34:22 +02:00
parent f1bbed1751
commit 7f54d3a38e
4 changed files with 48 additions and 32 deletions
+12 -8
View File
@@ -2,7 +2,7 @@
import { Position } from '../../types/flow' import { Position } from '../../types/flow'
import type { EdgeProps } from '../../types/edge' import type { EdgeProps } from '../../types/edge'
import { getBezierPath, getBezierCenter } from './utils' import { getBezierPath, getBezierCenter } from './utils'
import BaseEdge from './BaseEdge.vue' import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<EdgeProps>(), { const props = withDefaults(defineProps<EdgeProps>(), {
selected: false, selected: false,
@@ -45,18 +45,22 @@ export default {
} }
</script> </script>
<template> <template>
<BaseEdge <path
:path="path" :style="props.style"
:center-x="centered[0]" :d="path"
:center-y="centered[1]" class="vue-flow__edge-path"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
<EdgeText
v-if="props.label"
:x="centered[0]"
:y="centered[1]"
:label="props.label" :label="props.label"
:label-style="props.labelStyle" :label-style="props.labelStyle"
:label-show-bg="props.labelShowBg" :label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle" :label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding" :label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius" :label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/> />
</template> </template>
@@ -2,7 +2,7 @@
import { Position } from '../../types/flow' import { Position } from '../../types/flow'
import type { EdgeProps } from '../../types/edge' import type { EdgeProps } from '../../types/edge'
import { getSimpleBezierPath, getSimpleBezierCenter } from './utils' import { getSimpleBezierPath, getSimpleBezierCenter } from './utils'
import BaseEdge from './BaseEdge.vue' import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<EdgeProps>(), { const props = withDefaults(defineProps<EdgeProps>(), {
selected: false, selected: false,
@@ -43,18 +43,22 @@ export default {
} }
</script> </script>
<template> <template>
<BaseEdge <path
:path="path" :style="props.style"
:center-x="centered[0]" :d="path"
:center-y="centered[1]" class="vue-flow__edge-path"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
<EdgeText
v-if="props.label"
:x="centered[0]"
:y="centered[1]"
:label="props.label" :label="props.label"
:label-style="props.labelStyle" :label-style="props.labelStyle"
:label-show-bg="props.labelShowBg" :label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle" :label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding" :label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius" :label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/> />
</template> </template>
@@ -2,7 +2,7 @@
import { Position } from '../../types' import { Position } from '../../types'
import type { SmoothStepEdgeProps } from '../../types/edge' import type { SmoothStepEdgeProps } from '../../types/edge'
import { getCenter, getSmoothStepPath } from './utils' import { getCenter, getSmoothStepPath } from './utils'
import BaseEdge from './BaseEdge.vue' import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<SmoothStepEdgeProps>(), { const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
selected: false, selected: false,
@@ -46,18 +46,22 @@ export default {
} }
</script> </script>
<template> <template>
<BaseEdge <path
:path="path" :style="props.style"
:center-x="centered[0]" :d="path"
:center-y="centered[1]" class="vue-flow__edge-path"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
<EdgeText
v-if="props.label"
:x="centered[0]"
:y="centered[1]"
:label="props.label" :label="props.label"
:label-style="props.labelStyle" :label-style="props.labelStyle"
:label-show-bg="props.labelShowBg" :label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle" :label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding" :label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius" :label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/> />
</template> </template>
+12 -8
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Position } from '../../types' import { Position } from '../../types'
import type { EdgeProps } from '../../types/edge' import type { EdgeProps } from '../../types/edge'
import BaseEdge from './BaseEdge.vue' import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<EdgeProps>(), { const props = withDefaults(defineProps<EdgeProps>(), {
selected: false, selected: false,
@@ -30,18 +30,22 @@ export default {
} }
</script> </script>
<template> <template>
<BaseEdge <path
:path="path" :style="props.style"
:center-x="centerX" :d="path"
:center-y="centerY" class="vue-flow__edge-path"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
<EdgeText
v-if="props.label"
:x="centerX"
:y="centerY"
:label="props.label" :label="props.label"
:label-style="props.labelStyle" :label-style="props.labelStyle"
:label-show-bg="props.labelShowBg" :label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle" :label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding" :label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius" :label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/> />
</template> </template>