fix(types): node/edge label type

* add Component to label type
This commit is contained in:
Braks
2022-04-11 11:30:10 +02:00
parent 88f808711a
commit 440ad3c681
5 changed files with 6 additions and 15 deletions
+1 -6
View File
@@ -29,12 +29,7 @@ const initialEdges: Edge[] = [
id: 'e5-6', id: 'e5-6',
source: '5', source: '5',
target: '6', target: '6',
label: { label: h(CustomLabel, { label: 'custom label text' }, {}),
component: markRaw(CustomLabel),
props: {
label: 'custom label text',
},
},
labelStyle: { fill: 'red', fontWeight: 700 }, labelStyle: { fill: 'red', fontWeight: 700 },
markerEnd: { markerEnd: {
type: MarkerType.Arrow, type: MarkerType.Arrow,
+1 -6
View File
@@ -6,12 +6,7 @@ interface Props {
centerX: number centerX: number
centerY: number centerY: number
path: string path: string
label?: label?: any
| string
| {
props?: any
component: any
}
style?: CSSProperties style?: CSSProperties
labelStyle?: any labelStyle?: any
labelShowBg?: boolean labelShowBg?: boolean
@@ -41,6 +41,7 @@ export default {
<slot v-bind="props"> <slot v-bind="props">
<component :is="props.label" v-if="typeof props.label !== 'string' && typeof props.label" /> <component :is="props.label" v-if="typeof props.label !== 'string' && typeof props.label" />
<template v-else v-html="props.label"> <template v-else v-html="props.label">
Floo
{{ props.label }} {{ props.label }}
</template> </template>
</slot> </slot>
+2 -2
View File
@@ -106,7 +106,7 @@ export interface EdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeD
id: string id: string
sourceNode: GraphNode<SourceNodeData> sourceNode: GraphNode<SourceNodeData>
targetNode: GraphNode<TargetNodeData> targetNode: GraphNode<TargetNodeData>
label?: string | VNode label?: string | VNode | Component<EdgeTextProps> | Object
type?: string type?: string
data?: Data data?: Data
style?: CSSProperties style?: CSSProperties
@@ -139,7 +139,7 @@ export interface SmoothStepEdgeProps<Data = ElementData, SourceNodeData = any, T
id: string id: string
sourceNode: GraphNode<SourceNodeData> sourceNode: GraphNode<SourceNodeData>
targetNode: GraphNode<TargetNodeData> targetNode: GraphNode<TargetNodeData>
label?: string | VNode label?: string | VNode | Component<EdgeTextProps> | Object
type?: string type?: string
data?: Data data?: Data
style?: CSSProperties style?: CSSProperties
+1 -1
View File
@@ -94,7 +94,7 @@ export interface NodeProps<Data = ElementData> {
* For example like this: `h('div', props, children)`) * For example like this: `h('div', props, children)`)
* Object is just a type-hack for Vue, ignore that * Object is just a type-hack for Vue, ignore that
*/ */
label?: string | VNode | Object label?: string | VNode | Component | Object
/** called when used as target for new connection */ /** called when used as target for new connection */
isValidTargetPos?: ValidConnectionFunc isValidTargetPos?: ValidConnectionFunc
/** called when used as source for new connection */ /** called when used as source for new connection */