Class BpmnCanvasExperimental

Wrapper of mxAbstractCanvas2D to simplify method calls when painting icons/markers of BPMN shapes.

It can scale dimensions passed to the method of the original mxAbstractCanvas2D.

WARN: You may use it to customize the BPMN Theme as suggested in the examples. But be aware that the way the default BPMN theme can be modified is subject to change.

Example

The vanilla canvas calls when a scale factor must be applied to position

const scaleX = 0.26;
const scaleY = 0.35;
c.moveTo(8 * scaleX, 39 * scaleY);
c.lineTo(12 * scaleX, 25 * scaleY);

Example

With BpmnCanvas

const canvas = new BpmnCanvas(c, 0.26, 0.35);
canvas.moveTo(8, 39);
canvas.lineTo(12, 25);

Constructors

constructor

Methods

arcTo begin close curveTo ellipse fill fillAndStroke lineTo moveTo rect rotateOnIconCenter roundrect setFillColor setIconOriginForIconBottomCentered setIconOriginForIconCentered setIconOriginToShapeTopLeft setRoundLineJoin setStrokeColor stroke translateIconOrigin

Constructors

constructor

Methods

arcTo

  • arcTo(
        rx: number,
        ry: number,
        angle: number,
        largeArcFlag: number,
        sweepFlag: number,
        x: number,
        y: number,
    ): void
  • Experimental

    Parameters

    • rx: number
    • ry: number
    • angle: number
    • largeArcFlag: number
    • sweepFlag: number
    • x: number
    • y: number

    Returns void

begin

close

curveTo

  • curveTo(
        x1: number,
        y1: number,
        x2: number,
        y2: number,
        x3: number,
        y3: number,
    ): void
  • Experimental

    Parameters

    • x1: number
    • y1: number
    • x2: number
    • y2: number
    • x3: number
    • y3: number

    Returns void

ellipse

fill

fillAndStroke

lineTo

moveTo

rect

rotateOnIconCenter

roundrect

  • roundrect(
        x: number,
        y: number,
        w: number,
        h: number,
        dx: number,
        dy: number,
    ): void
  • Experimental

    Parameters

    • x: number
    • y: number
    • w: number
    • h: number
    • dx: number
    • dy: number

    Returns void

setFillColor

setIconOriginForIconBottomCentered

  • setIconOriginForIconBottomCentered(bottomMargin?: number): void
  • Experimental

    Set the icon origin to ensure that, on the shape, the icon is horizontally centered and vertically aligned to the bottom.

    Parameters

    • bottomMargin: number = StyleDefault.SHAPE_ACTIVITY_BOTTOM_MARGIN

    Returns void

setIconOriginForIconCentered

setIconOriginToShapeTopLeft

  • setIconOriginToShapeTopLeft(topMargin?: number, leftMargin?: number): void
  • Experimental

    Set the icon origin to the top left corner of the shape.

    Parameters

    • topMargin: number = StyleDefault.SHAPE_ACTIVITY_TOP_MARGIN
    • leftMargin: number = StyleDefault.SHAPE_ACTIVITY_LEFT_MARGIN

    Returns void

setRoundLineJoin

setStrokeColor

stroke

translateIconOrigin

  • translateIconOrigin(dx: number, dy: number): void
  • Experimental

    Translate the icon origin using the scale factor associated to the horizontal and vertical directions.

    The values should be given with using the icon original size (as translated values will be scaled as other values passed to method of this class).

    Parameters

    • dx: number

      the horizontal translation

    • dy: number

      the vertical translation

    Returns void

Settings

Member Visibility

On This Page

Constructors
Methods