Options
All
  • Public
  • Public/Protected
  • All
Menu

Class mxShape

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.

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

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

example
var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'customShape';

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

antiAlias

antiAlias: boolean

Variable: antiAlias

Rendering hint for configuring the canvas.

boundingBox

boundingBox: mxRectangle

Variable: boundingBox

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

bounds

bounds: mxRectangle

Variable: bounds

Holds the that specifies the bounds of this shape.

constraints

constraints: mxConnectionConstraint[]

dialect

dialect: string

Variable: dialect

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

direction

direction: string

Specify the direction of certain shapes (eg. mxTriangle). Possible values are mxConstants.DIRECTION_EAST (default), mxConstants.DIRECTION_WEST, mxConstants.DIRECTION_NORTH, and mxConstants.DIRECTION_SOUTH.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

endArrow

endArrow: string

Possible values are all constants with an ARROW-prefix.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

endSize

endSize: number

Size of the end marker in pixels.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

fill

fill: string

Fill color.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

fillOpacity

fillOpacity: number

Fill opacity. Possible range is 0-100.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

flipH

flipH: boolean

Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply implementation).

flipV

flipV: boolean

Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply implementation).

glass

glass: boolean

Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

gradient

gradient: string

Gradient color.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

gradientDirection

gradientDirection: string

Gradient direction.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

isDashed

isDashed: boolean

Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

isRounded

isRounded: boolean

For edges this determines whether or not joins between edges segments are smoothed to a rounded finish.
For vertices that have the rectangle shape, this determines whether or not the rectangle is rounded.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

isShadow

isShadow: boolean

Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

minSvgStrokeWidth

minSvgStrokeWidth: number

Variable: minSvgStrokeWidth

Minimum stroke width for SVG output.

node

node: HTMLElement

Variable: node

Holds the outermost DOM node that represents this shape.

opacity

opacity: number

Opacity. Possible range is 0-100.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

outline

outline: boolean

Variable: outline

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 .

pointerEvents

pointerEvents: boolean

Variable: pointerEvents

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

points

points: mxPoint[]

Variable: points

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

rotation

rotation: number

Possible range is 0-360.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

scale

scale: number

Variable: scale

Holds the scale in which the shape is being painted.

shapePointerEvents

shapePointerEvents: boolean

Variable: shapePointerEvents

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

spacing

spacing: number

The value represents the spacing, in pixels, added to each side of a label in a vertex (style applies to vertices only).
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

startArrow

startArrow: string

Possible values are all constants with an ARROW-prefix.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

startSize

startSize: number

Size of the start marker or the size of the swimlane title region depending on the shape it is used for.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

Optional state

state: mxCellState

Variable: state

Optional reference to the corresponding .

stencil

stencil: mxStencil

Variable: stencil

Holds the that defines the shape.

stencilPointerEvents

stencilPointerEvents: boolean

Variable: stencilPointerEvents

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

Stroke color.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

strokeOpacity

strokeOpacity: number

Stroke opacity. Possible range is 0-100.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

strokewidth

strokewidth: number

Stroke width.
Note: this property is not documented in the JavaScript API but it does exist and is necessary (see apply).

Optional style

style: {}

Variable: style

Optional reference to the style of the corresponding .

Type declaration

  • [key: string]: any

svgPointerEvents

svgPointerEvents: "all"

Variable: svgPointerEvents

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

svgStrokeTolerance

svgStrokeTolerance: number

Variable: svgStrokeTolerance

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

useSvgBoundingBox

useSvgBoundingBox: boolean

Variable: useSvgBoundingBox

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

visible

visible: boolean

Variable: visible

Specifies if the shape is visible. Default is true.

vmlScale

vmlScale: number

Variable: vmlScale

Scale for improving the precision of VML rendering. Default is 1.

Methods

addPoints

apply

  • Function: apply

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

    • <mxConstants.STYLE_FILLCOLOR> => fill
    • <mxConstants.STYLE_GRADIENTCOLOR> => gradient
    • <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection
    • <mxConstants.STYLE_OPACITY> => opacity
    • <mxConstants.STYLE_FILL_OPACITY> => fillOpacity
    • <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity
    • <mxConstants.STYLE_STROKECOLOR> => stroke
    • <mxConstants.STYLE_STROKEWIDTH> => strokewidth
    • <mxConstants.STYLE_SHADOW> => isShadow
    • <mxConstants.STYLE_DASHED> => isDashed
    • <mxConstants.STYLE_SPACING> => spacing
    • <mxConstants.STYLE_STARTSIZE> => startSize
    • <mxConstants.STYLE_ENDSIZE> => endSize
    • <mxConstants.STYLE_ROUNDED> => isRounded
    • <mxConstants.STYLE_STARTARROW> => startArrow
    • <mxConstants.STYLE_ENDARROW> => endArrow
    • <mxConstants.STYLE_ROTATION> => rotation
    • <mxConstants.STYLE_DIRECTION> => direction
    • <mxConstants.STYLE_GLASS> => glass

    This keeps a reference to the