JavaScript

Search results

DiagramShapeModel API in JavaScript Diagram API control

Interface for a class DiagramShape

Properties

activity
`BpmnActivityModel`

Defines the type of the BPMN Activity shape

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

annotation
`BpmnAnnotationModel`

Defines the text of the bpmn annotation

annotations
`BpmnAnnotationModel[]`

Defines the text of the bpmn annotation collection

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

classShape
`UmlClassModel`

Defines the text of the bpmn annotation collection

classifier
`string`

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
`string`

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
`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

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
`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

Contents

Properties
activity
align
annotation
annotations
basicShape
bpmnShape
classShape
classifier
content
cornerRadius
data
dataObject
enumerationShape
event
flowShape
gateway
interfaceShape
margin
points
scale
source
textContent
type
umlActivityShape

Contents

Properties
activity
align
annotation
annotations
basicShape
bpmnShape
classShape
classifier
content
cornerRadius
data
dataObject
enumerationShape
event
flowShape
gateway
interfaceShape
margin
points
scale
source
textContent
type
umlActivityShape

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

DiagramShapeModel API in JavaScript Diagram API control

Properties

activity BpmnActivityModel

align string

annotation BpmnAnnotationModel

annotations BpmnAnnotationModel[]

basicShape string

bpmnShape string

classShape UmlClassModel

classifier string

content SVGElement | HTMLElement

cornerRadius number

data string

dataObject BpmnDataObjectModel

enumerationShape UmlEnumerationModel

event BpmnEventModel

flowShape string

gateway BpmnGatewayModel

interfaceShape UmlInterfaceModel

margin MarginModel

points PointModel[]

scale string

source string

textContent string

type string

umlActivityShape string

activity
`BpmnActivityModel`

align
`string`

annotation
`BpmnAnnotationModel`

annotations
`BpmnAnnotationModel[]`

basicShape
`string`

bpmnShape
`string`

classShape
`UmlClassModel`

classifier
`string`

content
`SVGElement` | `HTMLElement`

cornerRadius
`number`

data
`string`

dataObject
`BpmnDataObjectModel`

enumerationShape
`UmlEnumerationModel`

event
`BpmnEventModel`

flowShape
`string`

gateway
`BpmnGatewayModel`

interfaceShape
`UmlInterfaceModel`

margin
`MarginModel`

points
`PointModel[]`

scale
`string`

source
`string`

textContent
`string`

type
`string`

umlActivityShape
`string`