Custom Component Shapes
Fully customize appearance of components in diagrams.
Last updated
Fully customize appearance of components in diagrams.
Last updated
Shape registration in the Appmixer SDK:
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:
Built-in shapes are action
, trigger
, actionVertical
and triggerVertical
.
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.
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