alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
# 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
Download Patch File Download Diff File Expand all files Collapse all files
package/src/components/Edges/BezierEdge.vue
+12 -8
View File
@@ -2,7 +2,7 @@
import { Position } from '../../types/flow'
import type { EdgeProps } from '../../types/edge'
import { getBezierPath, getBezierCenter } from './utils'
import BaseEdge from './BaseEdge.vue'
import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<EdgeProps>(), {
selected: false,
@@ -45,18 +45,22 @@ export default {
}
</script>
<template>
<BaseEdge
:path="path"
:center-x="centered[0]"
:center-y="centered[1]"
<path
:style="props.style"
:d="path"
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-style="props.labelStyle"
:label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
</template>
package/src/components/Edges/SimpleBezierEdge.vue
+12 -8
View File
@@ -2,7 +2,7 @@
import { Position } from '../../types/flow'
import type { EdgeProps } from '../../types/edge'
import { getSimpleBezierPath, getSimpleBezierCenter } from './utils'
import BaseEdge from './BaseEdge.vue'
import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<EdgeProps>(), {
selected: false,
@@ -43,18 +43,22 @@ export default {
}
</script>
<template>
<BaseEdge
:path="path"
:center-x="centered[0]"
:center-y="centered[1]"
<path
:style="props.style"
:d="path"
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-style="props.labelStyle"
:label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
</template>
package/src/components/Edges/SmoothStepEdge.vue
+12 -8
View File
@@ -2,7 +2,7 @@
import { Position } from '../../types'
import type { SmoothStepEdgeProps } from '../../types/edge'
import { getCenter, getSmoothStepPath } from './utils'
import BaseEdge from './BaseEdge.vue'
import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
selected: false,
@@ -46,18 +46,22 @@ export default {
}
</script>
<template>
<BaseEdge
:path="path"
:center-x="centered[0]"
:center-y="centered[1]"
<path
:style="props.style"
:d="path"
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-style="props.labelStyle"
:label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
</template>
package/src/components/Edges/StraightEdge.vue
+12 -8
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { Position } from '../../types'
import type { EdgeProps } from '../../types/edge'
import BaseEdge from './BaseEdge.vue'
import EdgeText from './EdgeText.vue'
const props = withDefaults(defineProps<EdgeProps>(), {
selected: false,
@@ -30,18 +30,22 @@ export default {
}
</script>
<template>
<BaseEdge
:path="path"
:center-x="centerX"
:center-y="centerY"
<path
:style="props.style"
:d="path"
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-style="props.labelStyle"
:label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius"
:style="props.style"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
</template>