Class Shape

Base class for all shapes. A shape in mxGraph is a separate implementation for SVG, VML and HTML. Which implementation to use is controlled by the dialect property which is assigned from within the mxCellRenderer when the shape is created. The dialect must be assigned for a shape, and it does normally depend on the browser and the configuration of the graph (see mxGraph rendering hint).

For each supported shape in SVG and VML, a corresponding shape exists in mxGraph, namely for text, image, rectangle, rhombus, ellipse and polyline. The other shapes are a combination of these shapes (eg. label and swimlane) or they consist of one or more (filled) path objects (eg. actor and cylinder). The HTML implementation is optional but may be required for a HTML-only view of the graph.

Custom Shapes

To extend from this class, the basic code looks as follows. In the special case where the custom shape consists only of one filled region or one filled region and an additional stroke the mxActor and mxCylinder should be subclassed, respectively.

function CustomShape() { }

CustomShape.prototype = new mxShape();
CustomShape.prototype.constructor = CustomShape;

To register a custom shape in an existing graph instance, one must register the shape under a new name in the graph’s cell renderer as follows:

mxCellRenderer.registerShape('customShape', CustomShape);

The second argument is the name of the constructor. In order to use the shape you can refer to the given name above in a stylesheet. For example, to change the shape for the default vertex style, the following code is used:

var style = graph.getStylesheet().getDefaultVertexStyle();
style.shape = 'customShape';

Hierarchy (view full)

Constructors

constructor

Properties

antiAlias boundingBox bounds cursor dialect direction endArrow endSize fill fillOpacity flipH flipV glass gradient gradientDirection image imageSrc indicator indicatorColor indicatorDirection indicatorGradientColor indicatorImageSrc indicatorShape indicatorStrokeColor isDashed isRounded isShadow minSvgStrokeWidth node oldGradients opacity originalPointerEvents outline overlay pointerEvents points preserveImageAspect rotation scale shapePointerEvents spacing startArrow startSize state stencil stencilPointerEvents stroke strokeOpacity strokeWidth style svgPointerEvents svgStrokeTolerance useSvgBoundingBox verticalTextRotation visible

Methods

addPoints afterPaint apply augmentBoundingBox beforePaint checkBounds clear configureCanvas create createBoundingBox createCanvas createSvgCanvas createTransparentSvgRectangle destroy destroyCanvas getArcSize getCursor getGradientBounds getLabelBounds getLabelMargins getRotation getShapeRotation getSvgScreenOffset getTextRotation init initStyles isHtmlAllowed isPaintBoundsInverted isRoundable paint paintBackground paintEdgeShape paintForeground paintGlassEffect paintVertexShape redraw redrawHtmlShape redrawShape releaseSvgGradients resetStyles setCursor setTransparentBackgroundImage updateBoundingBox updateBoundsFromPoints updateTransform

Constructors

constructor

Properties

antiAlias

antiAlias: boolean = true

Rendering hint for configuring the canvas.

boundingBox

boundingBox: null | Rectangle = null

Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.

bounds

bounds: null | Rectangle = null

Holds the Rectangle that specifies the bounds of this shape.

cursor

cursor: string = ''

dialect

dialect: null | string = null

Holds the dialect in which the shape is to be painted. This can be one of the DIALECT constants in Constants.

direction

direction: DirectionValue = DIRECTION.EAST

endArrow

endArrow: string = NONE

endSize

endSize: number = 1

fill

fill: string = NONE

fillOpacity

fillOpacity: number = 100

flipH

flipH: boolean = false

flipV

flipV: boolean = false

glass

glass: boolean = false

gradient

gradient: string = NONE

gradientDirection

gradientDirection: DirectionValue = DIRECTION.EAST

image

image: null | ImageBox = null

imageSrc

imageSrc: null | string = null

indicator

indicator: null | Shape = null

indicatorColor

indicatorColor: string = NONE

indicatorDirection

indicatorDirection: DirectionValue = DIRECTION.EAST

indicatorGradientColor

indicatorGradientColor: string = NONE

indicatorImageSrc

indicatorImageSrc: null | string = null

indicatorShape

indicatorShape: null | typeof Shape = null

indicatorStrokeColor

indicatorStrokeColor: string = NONE

isDashed

isDashed: boolean = false

isRounded

isRounded: boolean = false

isShadow

isShadow: boolean = false

minSvgStrokeWidth

minSvgStrokeWidth: number = 1

Minimum stroke width for SVG output.

node

node: SVGGElement

Holds the outermost DOM node that represents this shape.

oldGradients

oldGradients: GradientMap = {}

opacity

opacity: number = 100

originalPointerEvents

originalPointerEvents: null | boolean = null

outline

outline: boolean = false

Specifies if the shape should be drawn as an outline. This disables all fill colors and can be used to disable other drawing states that should not be painted for outlines. Default is false. This should be set before calling .

overlay

overlay: null | CellOverlay = null

pointerEvents

pointerEvents: boolean = true

Specifies if pointer events should be handled. Default is true.

points

points: (null | Point)[] = []

Holds the array of that specify the points of this shape.

preserveImageAspect

preserveImageAspect: boolean = false

rotation

rotation: number = 0

scale

scale: number = 1

Holds the scale in which the shape is being painted.

shapePointerEvents

shapePointerEvents: boolean = false

Specifies if pointer events outside of shape should be handled. Default is false.

spacing

spacing: number = 0

startArrow

startArrow: string = NONE

startSize

startSize: number = 1

state

state: null | CellState = null

Optional reference to the corresponding .

stencil

stencil: null | StencilShape = null

Holds the StencilShape that defines the shape.

stencilPointerEvents

stencilPointerEvents: boolean = false

Specifies if pointer events outside of stencils should be handled. Default is false. Set this to true for backwards compatibility with the 1.x branch.

stroke

stroke: string = NONE

strokeOpacity

strokeOpacity: number = 100

strokeWidth

strokeWidth: number = 1

style

style: null | CellStateStyle = null

Optional reference to the style of the corresponding .

svgPointerEvents

svgPointerEvents: string = 'all'

Specifies if pointer events should be handled. Default is true.

svgStrokeTolerance

svgStrokeTolerance: number = 8

Event-tolerance for SVG strokes (in px). This is only passed to the canvas in createSvgCanvas if pointerEvents is true.

Default

8

useSvgBoundingBox

useSvgBoundingBox: boolean = true

Allows to use the SVG bounding box in SVG. Default is false for performance reasons.

verticalTextRotation

verticalTextRotation: number = 0

visible

visible: boolean = true

Specifies if the shape is visible. Default is true.

Methods

addPoints

  • addPoints(c, pts, rounded?, arcSize, close?, exclude?, initialMove?): void

  • Paints the given points with rounded corners.

    Parameters

    • c: AbstractCanvas2D
    • pts: Point[]
    • rounded: boolean = false
    • arcSize: number
    • close: boolean = false
    • exclude: number[] = []
    • initialMove: boolean = true

    Returns void

afterPaint

apply

  • apply(state): void

  • Applies the style of the given to the shape. This implementation assigns the following styles to local fields:

    • <'fillColor'> => fill
    • <'gradientColor'> => gradient
    • <'gradientDirection'> => gradientDirection
    • <'opacity'> => opacity
    • Constants#STYLE_FILL_OPACITY => fillOpacity
    • Constants#STYLE_STROKE_OPACITY => strokeOpacity
    • <'strokeColor'> => stroke
    • <'strokeWidth'> => strokewidth
    • <'shadow'> => isShadow
    • <'dashed'> => isDashed
    • <'spacing'> => spacing
    • <'startSize'> => startSize
    • <'endSize'> => endSize
    • <'rounded'> => isRounded
    • <'startArrow'> => startArrow
    • <'endArrow'> => endArrow
    • <'rotation'> => rotation
    • <'direction'> => direction
    • <'glass'> => glass

    This keeps a reference to the