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

update(edges): useAttrs on edges to use style

Browse Source 
* remove class and style props, pass them as attrs

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-21 13:33:59 +01:00
parent e4ead738c9
commit ba24f3ca62
7 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Edges/CustomEdge.vue
+5
View File
@@ -31,6 +31,11 @@ const edgePath = computed(() =>
)
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<text>
examples/Edges/CustomEdge2.vue
+8 -1
View File
@@ -16,7 +16,9 @@ interface CustomEdgeProps extends EdgeProps {
targetPosition: Position
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: any
data?: {
text: string
}
}
const props = defineProps<CustomEdgeProps>()
@@ -41,6 +43,11 @@ const center = computed(() =>
}),
)
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<template>
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<EdgeText
examples/Edges/EdgesExample.vue
+1 -1
View File
@@ -40,7 +40,7 @@ const initialElements: Elements = [
source: '5',
target: '6',
label: {
component: CustomLabel,
component: markRaw(CustomLabel),
props: {
text: 'custom label text',
},
src/components/Edges/BezierEdge.vue
+8 -8
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { getCenter, getMarkerEnd, getBezierPath } from './utils'
import EdgeText from './EdgeText.vue'
@@ -19,18 +19,16 @@ interface BezierEdgeProps extends EdgeProps {
label?:
| string
| {
component: any
props?: any
component: Component | DefineComponent
props?: Record<string, any>
}
labelStyle?: any
labelStyle?: CSSProperties
labelShowBg?: boolean
labelBgStyle?: any
labelBgStyle?: CSSProperties
labelBgPadding?: [number, number]
labelBgBorderRadius?: number
style?: CSSProperties
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: any
sourceHandleId?: ElementId
targetHandleId?: ElementId
}
@@ -58,6 +56,8 @@ const path = computed(() => {
})
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
const attrs = useAttrs() as Record<'style', CSSProperties>
</script>
<script lang="ts">
export default {
@@ -65,7 +65,7 @@ export default {
}
</script>
<template>
<path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
<slot
:x="centered[0]"
:y="centered[1]"
src/components/Edges/SmoothStepEdge.vue
+8 -7
View File
@@ -1,4 +1,5 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
@@ -18,18 +19,16 @@ interface SmoothStepEdgeProps extends EdgeProps {
label?:
| string
| {
component: any
props?: any
component: Component | DefineComponent
props?: Record<string, any>
}
labelStyle?: any
labelStyle?: CSSProperties
labelShowBg?: boolean
labelBgStyle?: any
labelBgStyle?: CSSProperties
labelBgPadding?: [number, number]
labelBgBorderRadius?: number
style?: any
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: any
borderRadius?: number
sourceHandleId?: ElementId | null
targetHandleId?: ElementId | null
@@ -60,6 +59,8 @@ const path = computed(() => {
})
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
const attrs = useAttrs() as Record<'style', CSSProperties>
</script>
<script lang="ts">
export default {
@@ -67,7 +68,7 @@ export default {
}
</script>
<template>
<path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<path class="vue-flow__edge-path" :style="attrs.style" :d="path" :marker-end="markerEnd" />
<slot
:x="centered[0]"
:y="centered[1]"
src/components/Edges/StepEdge.vue
+7 -7
View File
@@ -1,4 +1,5 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import SmoothStepEdge from './SmoothStepEdge.vue'
@@ -17,18 +18,16 @@ export interface StepEdgeProps extends EdgeProps {
label?:
| string
| {
component: any
props?: any
component: Component | DefineComponent
props?: Record<string, any>
}
labelStyle?: any
labelStyle?: CSSProperties
labelShowBg?: boolean
labelBgStyle?: any
labelBgStyle?: CSSProperties
labelBgPadding?: [number, number]
labelBgBorderRadius?: number
style?: any
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: any
sourceHandleId?: ElementId | null
targetHandleId?: ElementId | null
}
@@ -42,9 +41,10 @@ const props = withDefaults(defineProps<StepEdgeProps>(), {
labelShowBg: true,
labelBgStyle: () => ({}),
})
const attrs = useAttrs() as Record<'style', CSSProperties>
</script>
<template>
<SmoothStepEdge v-bind="props" :border-radius="0">
<SmoothStepEdge v-bind="{ ...props, ...attrs }" :border-radius="0">
<slot />
</SmoothStepEdge>
</template>
src/components/Edges/StraightEdge.vue
+8 -7
View File
@@ -1,4 +1,5 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getMarkerEnd, getBezierPath } from './utils'
@@ -18,18 +19,16 @@ interface StraightEdgeProps extends EdgeProps {
label?:
| string
| {
component: any
props?: any
component: Component | DefineComponent
props?: Record<string, any>
}
labelStyle?: any
labelStyle?: CSSProperties
labelShowBg?: boolean
labelBgStyle?: any
labelBgStyle?: CSSProperties
labelBgPadding?: [number, number]
labelBgBorderRadius?: number
style?: any
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: any
sourceHandleId?: ElementId | null
targetHandleId?: ElementId | null
}
@@ -62,6 +61,8 @@ const path = computed(() => {
})
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
const attrs = useAttrs() as Record<'style', CSSProperties>
</script>
<script lang="ts">
export default {
@@ -69,7 +70,7 @@ export default {
}
</script>
<template>
<path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
<path :style="attrs.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
<slot
:x="centerX"
:y="centerY"