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 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

@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

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

Last updated