Custom Component Shapes

Fully customize appearance of components in diagrams.

Usage

Shape registration:

var appmixer = new Appmixer({
componentShapes: {
action: myCustomComponentShape,
trigger: myCustomComponentShape,
myUniqueShape: myCustomComponentShape
},
});

Shape reference in a component manifest:

{
shape: "myUniqueShape"
}

Definition

Key

Description

options.updateCallback

An optional method called before the component is updated. Accepts element argument.

attributes

Element attributes, see: jointjs.dia.Cell.define

states

Definition for particular states of the component. The object structure is the same as the current scope (except for the "states" entry).

@active- the component is being modified

@invalid- the component configuration is invalid

@referenced- the component is highlighted

@unchecked- the component is selected

@checked - the component is deselected

@running - the flow is in a running state

ports.attributes

Ports attributes of joint.dia.Element.ports.interface

ports.states

Definition for particular states of individual ports.

The object structure is the same as the current scope (except for the "states" entry).

@connected - the port is connected

link.attributes

Link attributes, see: jointjs.dia.Link

Special selectors

Dynamic properties of the component, such as label and icon, are mapped to optional selectors in the markup.

Selector

tagName

Description

label

text

Contains a label of the component.

icon

image

Contains an icon of the component.

Special attributes

Key

Value

Description

event

"remove"

The entry acts as a remove button.

var myCustomComponentShape = {
attributes: {
size: { height: 60, width: 60 },
markup: [{
tagName: 'rect',
selector: 'body',
}, {
tagName: 'text',
selector: 'label'
}, {
tagName: 'image',
selector: 'icon',
}],
attrs: {
body: {
event: 'remove', // Click on the "body" will remove the element
refWidth: '100%',
refHeight: '100%',
stroke: 'black',
strokeWidth: '4px',
fill: 'white',
},
label: {
ref: 'body',
textAnchor: 'middle',
refX: 0.5,
refY: '100%',
refY2: 12,
fill: 'black',
fontFamily: 'Helvetica, Arial, sans-serif',
},
icon: {
ref: 'body',
refX: 0.5,
refY: 0.5,
xAlignment: 'middle',
yAlignment: 'middle',
height: 30,
width: 30,
},
},
},
ports: {
attributes: {
in: {
attrs: {
'.port-label': {
fontFamily: 'Helvetica, Arial, sans-serif',
fontSize: 12,
},
},
},
out: {
attrs: {
'.port-label': {
fontFamily: 'Helvetica, Arial, sans-serif',
fontSize: 12,
},
},
},
},
},
link: {
attributes: {
router: {
name: 'metro',
},
},
attrs: {
line: {
event: "remove", // Click on the line will remove the link
},
},
},
states: {
'@active': {
attributes: {
attrs: {
body: {
stroke: 'blue',
},
},
},
link: {
attributes: {
attrs: {
line: {
stroke: 'blue',
},
},
},
},
},
},
};