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.

Manifest

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