@syncfusion/ej2-react-diagrams
Version:
Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.
933 lines (932 loc) • 213 kB
JSON
{
"name": "Diagrams",
"description": "Diagram Components",
"keywords": {
"common": [
"ej2",
"Syncfusion",
"web-components",
"diagram"
],
"angular": [
"angular",
"ng",
"ng-diagrams",
"ej2-ng-diagrams"
],
"react": [
"react",
"react-diagrams",
"ej2-react-diagrams"
],
"vue": [
"vue",
"vue-diagrams",
"ej2-vue-diagrams"
]
},
"repository": {
"type": "git",
"url": "https://github.com/syncfusion/ej2-diagrams"
},
"blazorPlaceholder": "diagram",
"eventInterfaces": [
"IDataLoadedEventArgs",
"IDragEnterEventArgs",
"IDragLeaveEventArgs",
"IDragOverEventArgs",
"IClickEventArgs",
"IHistoryChangeArgs",
"IDoubleClickEventArgs",
"ITextEditEventArgs",
"IScrollChangeEventArgs",
"ISelectionChangeEventArgs",
"ISizeChangeEventArgs",
"IConnectionChangeEventArgs",
"IEndChangeEventArgs",
"IDraggingEventArgs",
"IRotationEventArgs",
"ICollectionChangeEventArgs",
"IExpandStateChangeEventArgs",
"IMouseEventArgs",
"BeforeOpenCloseMenuEventArgs",
"MenuEventArgs",
"IDropEventArgs",
"IPropertyChangeEventArgs",
"IPaletteSelectionChangeArgs"
],
"components": [
{
"baseClass": "Diagram",
"directoryName": "diagram",
"type": "simple",
"defaultTag": "<diagram id='sample'></diagram>",
"blazorPlaceholder": "diagram",
"twoWays": [],
"blazorType": "hybrid",
"dynamicModules": [
"HierarchicalTree",
"MindMap",
"RadialTree",
"ComplexHierarchicalTree",
"DataBinding",
"Snapping",
"PrintAndExport",
"BpmnDiagrams",
"SymmetricLayout",
"ConnectorBridging",
"UndoRedo",
"LayoutAnimation",
"DiagramContextMenu",
"LineRouting",
"AvoidLineOverlapping",
"ConnectorEditing",
"LineDistribution",
"Ej1Serialization",
"FlowchartLayout"
],
"comment": [
"/**",
" * Diagram Component",
" * ```html",
" * <ej-diagram></ej-diagram>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * Represents react Diagram Component",
" * ```tsx",
" * <DiagramComponent></DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * Represents vue Diagram Component",
" * ```html",
" * <ejs-diagram></ejs-diagram>",
" * ```",
" */"
],
"tagDirective": [
{
"arrayDirectiveClassName": "Layers",
"directiveClassName": "Layer",
"arrayDirectiveSelector": "ej-diagram>e-layers",
"directiveSelector": "e-layers>e-layer",
"propertyName": "layers",
"isDeprecated": true,
"directoryName": "diagram",
"baseClass": "Layer",
"comment": [
"/**",
" * Layers Directive",
" * ```html",
" * <e-layers>",
" * <e-layer></e-layer>",
" * </e-layers>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `Layers Directive` directive represent a connectors of the react diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <LayersDirective>",
" * <LayerDirective></LayerDirective>",
" * </LayersDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-layers` directive represent a layers of the vue diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```vue",
" * <ejs-diagram>",
" * <e-layers>",
" * <e-layer>",
" * </e-layers>",
" * </e-layers>",
"</ejs-diagram>",
" * ```",
" */"
]
},
{
"arrayDirectiveClassName": "CustomCursors",
"directiveClassName": "CustomCursor",
"arrayDirectiveSelector": "ej-diagram>e-cursormaps",
"directiveSelector": "e-cursormaps>e-cursormap",
"propertyName": "customCursor",
"directoryName": "diagram",
"isDeprecated": true,
"baseClass": "CustomCursorAction",
"comment": [
"/**",
" * Cursor Maps Directive",
" * ```html",
" * <e-cusrsormaps>",
" * <e-cursormap></e-cursormap>",
" * </e-cursormaps>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `custormaps Directive` directive represent a connectors of the react diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <CustormapsDirective>",
" * <CustormapDirective></CustormapDirective>",
" * </CustormapsDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-custormaps` directive represent a layers of the vue diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```vue",
" * <ejs-diagram>",
" * <e-custormaps>",
" * <e-custormap>",
" * </e-custormap>",
" * </e-custormaps>",
"</ejs-diagram>",
" * ```",
" */"
]
},
{
"arrayDirectiveClassName": "Connectors",
"directiveClassName": "Connector",
"arrayDirectiveSelector": "ej-diagram>e-connectors",
"directiveSelector": "e-connectors>e-connector",
"propertyName": "connectors",
"isDeprecated": true,
"directoryName": "diagram",
"baseClass": "Connector",
"comment": [
"/**",
" * Connectors Directive",
" * ```html",
" * <e-connectors>",
" * <e-connector></e-connector>",
" * </e-connectors>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `ConnectorsDirective` directive represent a connectors of the react diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <ConnectorsDirective>",
" * <ConnectorDirective></ConnectorDirective>",
" * </ConnectorsDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-connectors` directive represent a connectors of the vue diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-connectors>",
" * <e-connector></e-connector>",
" * </e-connectors>",
" * </ejs-diagram>",
" * ```",
" */"
],
"tagDirective": [
{
"arrayDirectiveClassName": "ConnectorFixedUserHandles",
"directiveClassName": "ConnectorFixedUserHandle",
"arrayDirectiveSelector": "e-connector>e-connector-fixeduserhandles",
"directiveSelector": "e-connector>e-connector-fixeduserhandles>e-connector-fixeduserhandle",
"directoryName": "diagram",
"fileName": "connector-fixeduserhandle",
"isDeprecated": true,
"propertyName": "fixedUserHandles",
"baseClass": "ConnectorFixedUserHandle",
"complexDirective": [
{
"propertyName": "displacement",
"baseClass": "Point",
"isCommon": true,
"blazorClassName": "ConnectorFixedUserHandleDisplacement",
"blazorCommonClassName": "Coordinates"
},
{
"propertyName": "padding",
"baseClass": "Margin",
"blazorClassName": "ConnectorFixedUserHandlePadding",
"isCommon": true,
"blazorCommonClassName": "Margin"
}
],
"comment": [
"/**",
" * Connectors Directive",
" * ```html",
" * <e-connectors>",
" * <e-connector>",
" * <e-connector-fixeduserhandles>",
" * <e-connector-fixeduserhandle>",
" * </e-connector-fixeduserhandle>",
" * </e-connector-fixeduserhandles>",
" * </e-connector>",
" * </e-connectors>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `Connector` directive represent a annotation of the react Diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <ConnectorsDirective>",
" * <ConnectorDirective>",
" * <ConnectorFixedUserHandlesDirective>",
" * <ConnectorFixedUserHandleDirective>",
" * </ConnectorFixedUserHandleDirective>",
" * </ConnectorFixedUserHandlesDirective>",
" * </ConnectorDirective>",
" * </ConnectorsDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-connector` directive represent a annotation of the vue Diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-connectors>",
" * <e-connector>",
" * <e-connector-fixeduserhandles>",
" * <e-connector-fixeduserhandle>",
" * </e-connector-fixeduserhandle>",
" * </e-connector-fixeduserhandles>",
" * </e-connector>",
" * </e-connectors>",
" * </ejs-diagram>",
" * ```",
" */"
]
},
{
"arrayDirectiveClassName": "ConnectorAnnotations",
"directiveClassName": "ConnectorAnnotation",
"arrayDirectiveSelector": "e-connector>e-connector-annotations",
"directiveSelector": "e-connector>e-connector-annotations>e-connector-annotation",
"directoryName": "diagram",
"fileName": "connector-annotation",
"isDeprecated": true,
"propertyName": "annotations",
"baseClass": "PathAnnotation",
"blazorTemplates": [
"template"
],
"comment": [
"/**",
" * Connectors Directive",
" * ```html",
" * <e-connectors>",
" * <e-connector>",
" * <e-connector-annotations>",
" * <e-connector-annotation>",
" * </e-connector-annotation>",
" * </e-connector-annotations>",
" * </e-connector>",
" * </e-connectors>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `Annotation` directive represent a annotation of the react Diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <ConnectorsDirective>",
" * <ConnectorDirective>",
" * <ConnectorAnnotationsDirective>",
" * <ConnectorAnnotationDirective>",
" * </ConnectorAnnotationDirective>",
" * </ConnectorAnnotationsDirective>",
" * </ConnectorDirective>",
" * </ConnectorsDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-connector-annotation` directive represent a annotation of the vue Diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-connectors>",
" * <e-connector>",
" * <e-connector-annotations>",
" * <e-connector-annotation>",
" * </e-connector-annotation>",
" * </e-connector-annotations>",
" * </e-connector>",
" * </e-connectors>",
" * </ejs-diagram>",
" * ```",
" */"
],
"complexDirective": [
{
"propertyName": "displacement",
"baseClass": "Point",
"blazorClassName": "ConnectorDisplacementPoint",
"isCommon": true,
"blazorCommonClassName": "Coordinates"
},
{
"propertyName": "hyperlink",
"baseClass": "Hyperlink",
"blazorClassName": "ConnectorHyperlink",
"isCommon": true,
"blazorCommonClassName": "DiagramsHyperlink"
},
{
"propertyName": "style",
"baseClass": "TextStyle",
"blazorClassName": "ConnectorAnnotationStyle",
"isCommon": true,
"isDeprecated": true,
"blazorCommonClassName": "DiagramsTextStyle",
"complexDirective": [
{
"propertyName": "gradient",
"baseClass": "Gradient",
"blazorClassName": "ConnectorTextGradient",
"isCommon": true,
"isDeprecated": true,
"blazorCommonClassName": "DiagramsGradient",
"tagDirective": [
{
"arrayDirectiveClassName": "Stops",
"directiveClassName": "Stop",
"arrayDirectiveSelector": "e-gradient>e-gradient-stops",
"directiveSelector": "e-gradient>e-gradient-stops>e-gradient-stop",
"directoryName": "diagram",
"propertyName": "stops",
"baseClass": "Stop",
"isCommon": true,
"blazorCommonClassName": "DiagramsGradientStop",
"blazorArrayClassName": "ConnectorTextGradientStops",
"comment": [
"/**",
" * Nodes Directive",
" * <e-gradient>",
" * <e-gradient-stops>",
" * <e-gradient-stop>",
" * </e-gradient-stop>",
" * </e-gradient-stops>",
" * </e-gradient>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `Node` directive represent a port of the react Diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <GradientDirective>",
" * <GradientStopsDirective>",
" * <GradientStopDirective>",
" * </GradientStopDirective>",
" * </GradientStopsDirective>",
" * </GradientDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-port` directive represent a port of the vue Diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-gradient>",
" * <e-gradient-stops>",
" * <e-gradient-stop>",
" * </e-gradient-stop>",
" * </e-gradient-stops>",
" * </e-gradient>",
" * </ejs-diagram>",
" * ```",
" */"
]
}
]
}
]
},
{
"propertyName": "margin",
"baseClass": "Margin",
"isCommon": true,
"isDeprecated": true,
"blazorClassName": "ConnectorAnnotationMargin",
"blazorCommonClassName": "Margin"
},
{
"propertyName": "dragLimit",
"baseClass": "Margin",
"isCommon": true,
"isDeprecated": true,
"blazorClassName": "ConnectorAnnotationDragLimit",
"blazorCommonClassName": "Margin"
}
]
}
],
"complexDirective": [
{
"propertyName": "shape",
"baseClass": "ConnectorShape"
},
{
"propertyName": "shape",
"baseClass": "BpmnFlow"
},
{
"propertyName": "shape",
"baseClass": "RelationShip",
"complexDirective": [
{
"propertyName": "multiplicity",
"baseClass": "ClassifierMultiplicity",
"complexDirective": [
{
"propertyName": "target",
"baseClass": "MultiplicityLabel",
"isCommon": true,
"isDeprecated": true,
"blazorCommonClassName": "ConnectorsMultiplicityLabel",
"blazorClassName": "TargetMultiplicityLabel"
},
{
"propertyName": "source",
"baseClass": "MultiplicityLabel",
"isCommon": true,
"blazorCommonClassName": "ConnectorsMultiplicityLabel",
"blazorClassName": "SourceMultiplicityLabel"
}
]
}
]
},
{
"propertyName": "shape",
"baseClass": "ActivityFlow"
},
{
"propertyName": "margin",
"baseClass": "Margin",
"isCommon": true,
"blazorClassName": "ConnectorMargin",
"blazorCommonClassName": "Margin"
},
{
"propertyName": "tooltip",
"baseClass": "DiagramTooltip",
"isCommon": true,
"blazorClassName": "ConnectorTooltip",
"blazorCommonClassName": "DiagramsTooltip"
},
{
"propertyName": "sourcePoint",
"baseClass": "Point",
"isCommon": true,
"blazorClassName": "ConnectorSourcePoint",
"blazorCommonClassName": "Coordinates"
},
{
"propertyName": "targetPoint",
"baseClass": "Point",
"isCommon": true,
"blazorClassName": "ConnectorTargetPoint",
"blazorCommonClassName": "Coordinates"
},
{
"propertyName": "style",
"isDeprecated": true,
"baseClass": "StrokeStyle",
"blazorClassName": "ConnectorShapeStyle",
"complexDirective": [
{
"propertyName": "style",
"baseClass": "ShapeStyle",
"isCommon": true,
"blazorClassName": "ConnectorShapeStyle",
"blazorCommonClassName": "DiagramsShapeStyle",
"complexDirective": [
{
"propertyName": "gradient",
"baseClass": "Gradient",
"blazorClassName": "ConnectorShapeGradient",
"isCommon": true,
"blazorCommonClassName": "DiagramsGradient",
"tagDirective": [
{
"arrayDirectiveClassName": "Stops",
"directiveClassName": "Stop",
"arrayDirectiveSelector": "e-gradient>e-gradient-stops",
"directiveSelector": "e-gradient>e-gradient-stops>e-gradient-stop",
"directoryName": "diagram",
"propertyName": "stops",
"baseClass": "Stop",
"isCommon": true,
"blazorCommonClassName": "DiagramsGradientStop",
"blazorArrayClassName": "ConnectorShapeGradientStops",
"comment": [
"/**",
" * Nodes Directive",
" * <e-gradient>",
" * <e-gradient-stops>",
" * <e-gradient-stop>",
" * </e-gradient-stop>",
" * </e-gradient-stops>",
" * </e-gradient>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `Node` directive represent a port of the react Diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <GradientDirective>",
" * <GradientStopsDirective>",
" * <GradientStopDirective>",
" * </GradientStopDirective>",
" * </GradientStopsDirective>",
" * </GradientDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-port` directive represent a port of the vue Diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-gradient>",
" * <e-gradient-stops>",
" * <e-gradient-stop>",
" * </e-gradient-stop>",
" * </e-gradient-stops>",
" * </e-gradient>",
" * </ejs-diagram>",
" * ```",
" */"
]
}
]
}
]
}
]
},
{
"propertyName": "sourceDecorator",
"baseClass": "Decorator",
"isCommon": true,
"blazorClassName": "ConnectorSourceDecorator",
"blazorCommonClassName": "ConnectorDecorator",
"complexDirective": [
{
"propertyName": "style",
"baseClass": "ShapeStyle",
"isCommon": true,
"blazorClassName": "DecoratorShapeStyle",
"blazorCommonClassName": "DiagramsShapeStyle"
},
{
"propertyName": "pivot",
"baseClass": "Point",
"isCommon": true,
"blazorClassName": "DecoratorPivot",
"blazorCommonClassName": "Coordinates"
}
]
},
{
"propertyName": "targetDecorator",
"baseClass": "Decorator",
"isCommon": true,
"blazorClassName": "ConnectorTargetDecorator",
"blazorCommonClassName": "ConnectorDecorator",
"complexDirective": [
{
"propertyName": "style",
"baseClass": "ShapeStyle",
"isCommon": true,
"blazorClassName": "DecoratorShapeStyle",
"blazorCommonClassName": "DiagramsShapeStyle"
},
{
"propertyName": "pivot",
"baseClass": "Point",
"isCommon": true,
"blazorClassName": "DecoratorPivot",
"blazorCommonClassName": "Coordinates"
}
]
}
]
},
{
"arrayDirectiveClassName": "Nodes",
"directiveClassName": "Node",
"arrayDirectiveSelector": "ej-diagram>e-nodes",
"directiveSelector": "e-nodes>e-node",
"propertyName": "nodes",
"isDeprecated": true,
"directoryName": "diagram",
"baseClass": "Node",
"comment": [
"/**",
" * Nodes Directive",
" * ```html",
" * <e-nodes>",
" * <e-node></e-node>",
" * </e-nodes>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `NodesDirective` directive represent a nodes of the react diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <NodesDirective>",
" * <NodeDirective></NodeDirective>",
" * </NodesDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-node` directive represent a nodes of the vue diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-nodes>",
" * <e-node></e-node>",
" * </e-nodes>",
" * </ejs-diagram>",
" * ```",
" */"
],
"tagDirective": [
{
"arrayDirectiveClassName": "NodeFixedUserHandles",
"directiveClassName": "NodeFixedUserHandle",
"arrayDirectiveSelector": "e-node>e-node-fixeduserhandles",
"directiveSelector": "e-node>e-node-fixeduserhandles>e-node-fixeduserhandle",
"directoryName": "diagram",
"fileName": "node-fixeduserhandle",
"isDeprecated": true,
"propertyName": "fixedUserHandles",
"baseClass": "NodeFixedUserHandle",
"complexDirective": [
{
"propertyName": "offset",
"baseClass": "Point",
"isCommon": true,
"blazorClassName": "NodeFixedUserHandleOffset",
"blazorCommonClassName": "Coordinates"
},
{
"propertyName": "padding",
"baseClass": "Margin",
"blazorClassName": "NodeFixedUserHandlePadding",
"isCommon": true,
"blazorCommonClassName": "Margin"
},
{
"propertyName": "margin",
"baseClass": "Margin",
"isCommon": true,
"blazorClassName": "NodeUsermargin",
"blazorCommonClassName": "Margin"
}
],
"comment": [
"/**",
" * Nodes Directive",
" * ```html",
" * <e-nodes>",
" * <e-node>",
" * <e-node-fixeduserhandles>",
" * <e-node-fixeduserhandle>",
" * </e-node-fixeduserhandle>",
" * </e-node-fixeduserhandles>",
" * </e-node>",
" * </e-nodes>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `Node` directive represent a annotation of the react Diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <NodesDirective>",
" * <NodeDirective>",
" * <NodeFixedUserHandlesDirective>",
" * <NodeFixedUserHandleDirective>",
" * </NodeFixedUserHandleDirective>",
" * </NodeFixedUserHandlesDirective>",
" * </NodeDirective>",
" * </NodesDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-node` directive represent a annotation of the vue Diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-nodes>",
" * <e-node>",
" * <e-node-fixeduserhandles>",
" * <e-node-fixeduserhandle>",
" * </e-node-fixeduserhandle>",
" * </e-node-fixeduserhandles>",
" * </e-node>",
" * </e-nodes>",
" * </ejs-diagram>",
" * ```",
" */"
]
},
{
"arrayDirectiveClassName": "NodeAnnotations",
"directiveClassName": "NodeAnnotation",
"arrayDirectiveSelector": "e-node>e-node-annotations",
"directiveSelector": "e-node>e-node-annotations>e-node-annotation",
"directoryName": "diagram",
"fileName": "node-annotation",
"isDeprecated": true,
"propertyName": "annotations",
"baseClass": "ShapeAnnotation",
"blazorTemplates": [
"template"
],
"comment": [
"/**",
" * Nodes Directive",
" * ```html",
" * <e-nodes>",
" * <e-node>",
" * <e-node-annotations>",
" * <e-node-annotation>",
" * </e-node-annotation>",
" * </e-node-annotations>",
" * </e-node>",
" * </e-nodes>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `Node` directive represent a annotation of the react Diagram. ",
" * It must be contained in a Diagram component(`DiagramComponent`). ",
" * ```tsx",
" * <DiagramComponent>",
" * <NodesDirective>",
" * <NodeDirective>",
" * <NodeAnnotationsDirective>",
" * <NodeAnnotationDirective>",
" * </NodeAnnotationDirective>",
" * </NodeAnnotationsDirective>",
" * </NodeDirective>",
" * </NodesDirective>",
" * </DiagramComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * `e-node` directive represent a annotation of the vue Diagram. ",
" * It must be contained in a Diagram component(`ejs-diagram`). ",
" * ```html",
" * <ejs-diagram>",
" * <e-nodes>",
" * <e-node>",
" * <e-node-annotations>",
" * <e-node-annotation>",
" * </e-node-annotation>",
" * </e-node-annotations>",
" * </e-node>",
" * </e-nodes>",
" * </ejs-diagram>",
" * ```",
" */"
],
"complexDirective": [
{
"propertyName": "offset",
"baseClass": "Point",
"isCommon": true,
"blazorClassName": "NodeAnnotationOffset",
"blazorCommonClassName": "Coordinates"
},
{
"propertyName": "hyperlink",
"baseClass": "Hyperlink",
"blazorClassName": "NodeHyperlink",
"isCommon": true,
"blazorCommonClassName": "DiagramsHyperlink"
},
{
"propertyName": "style",
"baseClass": "TextStyle",
"blazorClassName": "NodeAnnotationStyle",
"isCommon": true,
"blazorCommonClassName": "DiagramsTextStyle",
"complexDirective": [
{
"propertyName": "gradient",
"baseClass": "Gradient",
"aspClassName": "ShapeAnnotationGradientStyle",
"blazorClassName": "NodeAnnotationGradient",
"isCommon": true,
"blazorCommonClassName": "DiagramsGradient",
"tagDirective": [
{
"arrayDirectiveClassName": "Stops",
"directiveClassName": "Stop",
"arrayDirectiveSelector": "e-gradient>e-gradient-stops",
"directiveSelector": "e-gradient>e-gradient-stops>e-gradient-stop",