JavaScript (ES5)
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

DiagramShape API in JavaScript (ES5) Diagram API control

Defines the behavior of the UMLActivity shape

Properties

activity

BpmnActivityModel

Defines the type of the BPMN Activity shape

Defaults to ‘None’

align

string

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

Defaults to ‘None’

annotation

BpmnAnnotationModel

Defines the text of the bpmn annotation

Defaults to ‘None’

annotations

BpmnAnnotationModel[]

Defines the text of the bpmn annotation collection

Defaults to ‘None’

basicShape

string

Defines the type of the basic shape

bpmnShape

string 

<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');

Defaults to ‘Event’

classShape

UmlClassModel

Defines the text of the bpmn annotation collection

Defaults to ‘None’

classifier

string

Defines the type of classifier

Defaults to ‘Class’

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');

Defaults to ”

cornerRadius

number

Sets the corner of the node

Defaults to 0

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');

Defaults to ”

dataObject

BpmnDataObjectModel

Defines the type of the BPMN DataObject shape

Defaults to ‘None’

enumerationShape

UmlEnumerationModel

Defines the text of the bpmn annotation collection

Defaults to ‘None’

event

BpmnEventModel

Defines the type of the BPMN Event shape

Defaults to ‘None’

flowShape

string

Defines the type of the flow shape

gateway

BpmnGatewayModel

Defines the type of the BPMN Gateway shape

Defaults to ‘None’

interfaceShape

UmlInterfaceModel

Defines the text of the bpmn annotation collection

Defaults to ‘None’

margin

MarginModel

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

Defaults to 0

points

PointModel[]

Defines the collection of points to draw a polygon

Defaults to undefined

scale

string

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

Defaults to ‘Stretch’

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');

Defaults to ”

textContent

string

Defines the text of the text element

type

string

Defines the type of node shape

umlActivityShape

string

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

Defaults to ‘Action’

Previous
Next