Custom Component Shapes
Fully customize appearance of components in diagrams.
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.Key | Description |
options.updateCallback | An optional method called before the component is updated. Accepts element argument. |
attributes | |
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.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 |
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. |
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',
},
},
},
},
},
},
};
