fix(types): node/edge label type
* add Component to label type
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
Reference in New Issue
Block a user