refactor(edges): Remove base edge from default edge types
# What's changed? * Remove base-edge component for performance
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user