LogoLogo
v4
  • Docs
  • Connector Configuration
  • Knowledge Base
  • Changelog
v4
  • Introduction
  • Overview
    • Introduction
    • Component
    • Flow
    • End User Guide
  • Component Definition
    • Basic Structure
    • Manifest
      • name
      • label
      • icon
      • marker
      • author
      • description
      • auth
      • quota
      • properties
      • inPorts
      • outPorts
      • firePatterns
      • tick
      • private
      • webhook
      • state
      • localization
    • Behaviour
    • Dependencies
    • Authentication
    • Quotas & Limits
    • Example Component
  • Customizing UI
    • Custom Inspector Fields
    • Custom Theme
    • Custom Strings
    • Custom API
    • Custom Component Strings
    • Custom Component Shapes
  • Appmixer Self-Managed
    • Installation
    • Getting Started
    • Custom Component: HelloAppmixer
    • Using Appmixer SDK
    • Using Appmixer API
    • Using OAuth applications
    • Installation GCP
    • Appmixer Architecture
  • API
    • ACL
    • Accounts
    • Apps
    • Authentication
    • Charts
    • Data Stores
    • Files
    • Flows
    • Insights
    • Modifiers
    • People Task
  • Appmixer SDK
    • Getting Started
    • API Reference
      • Constructor
      • API
      • FlowManager
      • Designer
      • InsightsLogs
      • InsightsDashboard
      • InsightsChartEditor
      • Accounts
      • Storage
      • PeopleTasks
      • Components
    • Developer mode
  • Tutorials
    • Managing Authentication
    • Sharing Flows
    • Flows Metadata & Filtering
    • People Tasks
    • Customizing modifiers
    • Setting ACL
  • Appmixer CLI
    • Appmixer CLI
Powered by GitBook
On this page
  • Usage
  • Definition

Was this helpful?

Export as PDF
  1. Customizing UI

Custom Component Shapes

Fully customize appearance of components in diagrams.

PreviousCustom Component StringsNextInstallation

Last updated 4 years ago

Was this helpful?

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.

Definition

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

@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

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

Element attributes, see:

orts attributes of

Link attributes, see:

Manifest
jointjs.dia.Cell.define
P
joint.dia.Element.ports.interface
jointjs.dia.Link