Appmixer
v4.1
Search
⌃K

Custom Component Shapes

Fully customize appearance of components in diagrams.

Usage

Shape registration in the Appmixer SDK:
var appmixer = new Appmixer({
componentShapes: {
action: myCustomComponentShape,
trigger: myCustomComponentShape,
myUniqueShape: myCustomComponentShape
},
});
Use "action" and "trigger" keys to override defaults. You can define a custom shape for any component in the system, shape reference in a component manifest looks like this:
{
shape: "myUniqueShape"
}
Built-in shapes are action, trigger, actionVertical and triggerVertical.

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 unchecked
@checked- the component is checked
@running- the flow is in a running state
@selected- the component is selected
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
Component label.
icon
image
Component icon.
element-halo-copy-tooltip
title
"Copy" button tooltip.
element-halo-cut-tooltip
title
"Cut" button tooltip.
element-halo-remove-tooltip
title
"Remove" button tooltip.

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',
},
},
},
},
},
},
};