Search results

DiagramShapeModel API in React Diagram API component

Interface for a class DiagramShape

Properties

activity

BpmnActivityModel

Defines the type of the BPMN Activity shape

align

ImageAlignment

Defines the alignment of the image within the node boundary.

  • None - Alignment value will be set as none
  • XMinYMin - smallest X value of the view port and smallest Y value of the view port
  • XMidYMin - midpoint X value of the view port and smallest Y value of the view port
  • XMaxYMin - maximum X value of the view port and smallest Y value of the view port
  • XMinYMid - smallest X value of the view port and midpoint Y value of the view port
  • XMidYMid - midpoint X value of the view port and midpoint Y value of the view port
  • XMaxYMid - maximum X value of the view port and midpoint Y value of the view port
  • XMinYMax - smallest X value of the view port and maximum Y value of the view port
  • XMidYMax - midpoint X value of the view port and maximum Y value of the view port
  • XMaxYMax - maximum X value of the view port and maximum Y value of the view port

annotation

BpmnAnnotationModel

Defines the text of the bpmn annotation

annotations

BpmnAnnotationModel[]

Defines the text of the bpmn annotation collection

basicShape

BasicShapes

Defines the type of the basic shape

bpmnShape

BpmnShapes

<div id='diagram'></div>
let nodes: NodeModel[] = [{
 id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
 shape: {
  type: 'Bpmn', shape: 'Gateway',
  gateway: { type: 'EventBased' } as BpmnGatewayModel
        } as BpmnShapeModel,
}];
let diagram: Diagram = new Diagram({
...
nodes : nodes,
...
});
diagram.appendTo('#diagram');

classShape

UmlClassModel

Defines the text of the bpmn annotation collection

classifier

ClassifierShape

Defines the type of classifier

content

SVGElement | HTMLElement

Defines the geometry of a native element.

<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100,
shape: { scale: 'Stretch',
  type: 'Native', content: '<g><path d='M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455'+
'L0,90l7.975-23.522' +
'c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982' +
'c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537' +
'c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938' +
'c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537' +
'c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333' +
'c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882' +
'c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977' +
'c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344' +
'c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223' +
'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z'>'+
'</path></g>',
       }
}];
let diagram: Diagram = new Diagram({
...
nodes: nodes
...
});
diagram.appendTo('#diagram');

cornerRadius

number

Sets the corner of the node

data

string

Defines the geometry of a path

<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100,
  shape: { type: 'Path', data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296'+
  'L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366'+
  'L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z' }
}];
let diagram: Diagram = new Diagram({
...
nodes: nodes
...
});
diagram.appendTo('#diagram');

dataObject

BpmnDataObjectModel

Defines the type of the BPMN DataObject shape

enumerationShape

UmlEnumerationModel

Defines the text of the bpmn annotation collection

event

BpmnEventModel

Defines the type of the BPMN Event shape

flowShape

FlowShapes

Defines the type of the flow shape

gateway

BpmnGatewayModel

Defines the type of the BPMN Gateway shape

interfaceShape

UmlInterfaceModel

Defines the text of the bpmn annotation collection

margin

MarginModel

Defines the space to be let between the node and its immediate parent

points

PointModel[]

Defines the collection of points to draw a polygon

scale

Stretch

Defines the scale of the native element.

  • None - Sets the stretch type for diagram as None
  • Stretch - Sets the stretch type for diagram as Stretch
  • Meet - Sets the stretch type for diagram as Meet
  • Slice - Sets the stretch type for diagram as Slice

source

string

Defines the source of the image

<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Image', source: 'https://www.w3schools.com/images/w3schools_green.jpg' }
}];
let diagram: Diagram = new Diagram({
...
nodes: nodes
...
});
diagram.appendTo('#diagram');

textContent

string

Defines the text of the text element

type

Shapes

Defines the type of node shape

umlActivityShape

UmlActivityShapes

Defines the type of the UMLActivity shape

  • Action - Sets the type of the UMLActivity Shape as Action
  • Decision - Sets the type of the UMLActivity Shape as Decision
  • MergeNode - Sets the type of the UMLActivity Shape as MergeNode
  • InitialNode - Sets the type of the UMLActivity Shape as InitialNode
  • FinalNode - Sets the type of the UMLActivity Shape as FinalNode
  • ForkNode - Sets the type of the UMLActivity Shape as ForkNode
  • JoinNode - Sets the type of the UMLActivity Shape as JoinNode
  • TimeEvent - Sets the type of the UMLActivity Shape as TimeEvent
  • AcceptingEvent - Sets the type of the UMLActivity Shape as AcceptingEvent
  • SendSignal - Sets the type of the UMLActivity Shape as SendSignal
  • ReceiveSignal - Sets the type of the UMLActivity Shape as ReceiveSignal
  • StructuredNode - Sets the type of the UMLActivity Shape as StructuredNode
  • Note - Sets the type of the UMLActivity Shape as Note