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 confiuration 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.
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[mxConstants.STYLE_SHAPE] = 'customShape';
| mxShape | Base class for all shapes. |
| Functions | |
| mxShape | Constructs a new shape. |
| Variables | |
| dialect | Holds the dialect in which the shape is to be painted. |
| scale | Holds the scale in which the shape is being painted. |
| antiAlias | Rendering hint for configuring the canvas. |
| minSvgStrokeWidth | Minimum stroke width for SVG output. |
| bounds | Holds the mxRectangle that specifies the bounds of this shape. |
| points | Holds the array of mxPoints that specify the points of this shape. |
| node | Holds the outermost DOM node that represents this shape. |
| state | Optional reference to the corresponding mxCellState. |
| style | Optional reference to the style of the corresponding mxCellState. |
| boundingBox | Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape. |
| stencil | Holds the mxStencil that defines the shape. |
| svgStrokeTolerance | Event-tolerance for SVG strokes (in px). |
| pointerEvents | Specifies if pointer events should be handled. |
| svgPointerEvents | Specifies if pointer events should be handled. |
| shapePointerEvents | Specifies if pointer events outside of shape should be handled. |
| stencilPointerEvents | Specifies if pointer events outside of stencils should be handled. |
| vmlScale | Scale for improving the precision of VML rendering. |
| outline | Specifies if the shape should be drawn as an outline. |
| visible | Specifies if the shape is visible. |
| useSvgBoundingBox | Allows to use the SVG bounding box in SVG. |
| Functions | |
| init | Initializes the shape by creaing the DOM node using create and adding it into the given container. |
| initStyles | Sets the styles to their default values. |
| isParseVml | Specifies if any VML should be added via insertAdjacentHtml to the DOM. |
| isHtmlAllowed | Returns true if HTML is allowed for this shape. |
| getSvgScreenOffset | Returns 0, or 0.5 if <strokewidth> % 2 == 1. |
| create | Creates and returns the DOM node(s) for the shape in the given container. |
| createSvg | Creates and returns the SVG node(s) to represent this shape. |
| createVml | Creates and returns the VML node to represent this shape. |
| createHtml | Creates and returns the HTML DOM node(s) to represent this shape. |
| reconfigure | Reconfigures this shape. |
| redraw | Creates and returns the SVG node(s) to represent this shape. |
| clear | Removes all child nodes and resets all CSS. |
| updateBoundsFromPoints | Updates the bounds based on the points. |
| getLabelBounds | Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape. |
| getLabelMargins | Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively. |
| checkBounds | Returns true if the bounds are not null and all of its variables are numeric. |
| createVmlGroup | Returns the temporary element used for rendering in IE8 standards mode. |
| redrawShape | Updates the SVG or VML shape. |
| createCanvas | Creates a new canvas for drawing this shape. |
| createSvgCanvas | Creates and returns an mxSvgCanvas2D for rendering this shape. |
| createVmlCanvas | Creates and returns an mxVmlCanvas2D for rendering this shape. |
| updateVmlContainer | Updates the bounds of the VML container. |
| redrawHtml | Allow optimization by replacing VML with HTML. |
| updateHtmlFilters | Allow optimization by replacing VML with HTML. |
| updateHtmlColors | Allow optimization by replacing VML with HTML. |
| updateHtmlBounds | Allow optimization by replacing VML with HTML. |
| destroyCanvas | Destroys the given canvas which was used for drawing. |
| beforePaint | Invoked before paint is called. |
| afterPaint | Invokes after paint was called. |
| paint | Generic rendering code. |
| configureCanvas | Sets the state of the canvas for drawing the shape. |
| getGradientBounds | Returns the bounding box for the gradient box for this shape. |
| updateTransform | Sets the scale and rotation on the given canvas. |
| paintVertexShape | Paints the vertex shape. |
| paintBackground | Hook for subclassers. |
| paintForeground | Hook for subclassers. |
| paintEdgeShape | Hook for subclassers. |
| getArcSize | Returns the arc size for the given dimension. |
| paintGlassEffect | Paints the glass gradient effect. |
| addPoints | Paints the given points with rounded corners. |
| resetStyles | Resets all styles. |
| apply | Applies the style of the given mxCellState to the shape. |
| setCursor | Sets the cursor on the given shape. |
| getCursor | Returns the current cursor. |
| isRoundable | Hook for subclassers. |
| updateBoundingBox | Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox. |
| createBoundingBox | Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths. |
| augmentBoundingBox | Augments the bounding box with the strokewidth and shadow offsets. |
| isPaintBoundsInverted | Returns true if the bounds should be inverted. |
| getRotation | Returns the rotation from the style. |
| getTextRotation | Returns the rotation for the text label. |
| getShapeRotation | Returns the actual rotation of the shape. |
| createTransparentSvgRectangle | Adds a transparent rectangle that catches all events. |
| setTransparentBackgroundImage | Sets a transparent background CSS style to catch all events. |
| releaseSvgGradients | Paints the line shape. |
| destroy | Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release. |
mxShape.prototype.dialect
Holds the dialect in which the shape is to be painted. This can be one of the DIALECT constants in mxConstants.
mxShape.prototype.bounds
Holds the mxRectangle that specifies the bounds of this shape.
mxShape.prototype.points
Holds the array of mxPoints that specify the points of this shape.
mxShape.prototype.state
Optional reference to the corresponding mxCellState.
mxShape.prototype.style
Optional reference to the style of the corresponding mxCellState.
mxShape.prototype.stencil
Holds the mxStencil that defines the shape.
mxShape.prototype.svgStrokeTolerance
Event-tolerance for SVG strokes (in px). Default is 8. This is only passed to the canvas in createSvgCanvas if pointerEvents is true.
mxShape.prototype.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 apply.
mxShape.prototype.init = function( container )
Initializes the shape by creaing the DOM node using create and adding it into the given container.
| container | DOM node that will contain the shape. |
mxShape.prototype.create = function( container )
Creates and returns the DOM node(s) for the shape in the given container. This implementation invokes createSvg, createHtml or createVml depending on the dialect and style settings.
| container | DOM node that will contain the shape. |
mxShape.prototype.createHtml = function()
Creates and returns the HTML DOM node(s) to represent this shape. This implementation falls back to createVml so that the HTML creation is optional.
mxShape.prototype.getLabelBounds = function( rect )
Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape. This method should not change the rectangle in-place. This implementation returns the given rect.
mxShape.prototype.getLabelMargins= function( rect )
Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.
mxShape.prototype.createSvgCanvas = function()
Creates and returns an mxSvgCanvas2D for rendering this shape.
mxShape.prototype.createVmlCanvas = function()
Creates and returns an mxVmlCanvas2D for rendering this shape.
mxShape.prototype.apply = function( state )
Applies the style of the given mxCellState to the shape. This implementation assigns the following styles to local fields:
This keeps a reference to the style. If you need to keep a reference to the cell, you can override this method and store a local reference to state.cell or the mxCellState itself. If outline should be true, make sure to set it before calling this method.
| state | mxCellState of the corresponding cell. |
mxShape.prototype.updateBoundingBox = function()
Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
mxShape.prototype.destroy = function()
Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
Constructs a new shape.
function mxShape( stencil )
Holds the dialect in which the shape is to be painted.
mxShape.prototype.dialect
Holds the scale in which the shape is being painted.
mxShape.prototype.scale
Rendering hint for configuring the canvas.
mxShape.prototype.antiAlias
Minimum stroke width for SVG output.
mxShape.prototype.minSvgStrokeWidth
Holds the mxRectangle that specifies the bounds of this shape.
mxShape.prototype.bounds
Holds the array of mxPoints that specify the points of this shape.
mxShape.prototype.points
Holds the outermost DOM node that represents this shape.
mxShape.prototype.node
Optional reference to the corresponding mxCellState.
mxShape.prototype.state
Optional reference to the style of the corresponding mxCellState.
mxShape.prototype.style
Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
mxShape.prototype.boundingBox
Holds the mxStencil that defines the shape.
mxShape.prototype.stencil
Event-tolerance for SVG strokes (in px).
mxShape.prototype.svgStrokeTolerance
Specifies if pointer events should be handled.
mxShape.prototype.pointerEvents
Specifies if pointer events should be handled.
mxShape.prototype.svgPointerEvents
Specifies if pointer events outside of shape should be handled.
mxShape.prototype.shapePointerEvents
Specifies if pointer events outside of stencils should be handled.
mxShape.prototype.stencilPointerEvents
Scale for improving the precision of VML rendering.
mxShape.prototype.vmlScale
Specifies if the shape should be drawn as an outline.
mxShape.prototype.outline
Specifies if the shape is visible.
mxShape.prototype.visible
Allows to use the SVG bounding box in SVG.
mxShape.prototype.useSvgBoundingBox
Initializes the shape by creaing the DOM node using create and adding it into the given container.
mxShape.prototype.init = function( container )
Creates and returns the DOM node(s) for the shape in the given container.
mxShape.prototype.create = function( container )
Sets the styles to their default values.
mxShape.prototype.initStyles = function( container )
Specifies if any VML should be added via insertAdjacentHtml to the DOM.
mxShape.prototype.isParseVml = function()
Returns true if HTML is allowed for this shape.
mxShape.prototype.isHtmlAllowed = function()
Returns 0, or 0.5 if strokewidth % 2 == 1.
mxShape.prototype.getSvgScreenOffset = function()
Creates and returns the SVG node(s) to represent this shape.
mxShape.prototype.createSvg = function()
Creates and returns the VML node to represent this shape.
mxShape.prototype.createVml = function()
Creates and returns the HTML DOM node(s) to represent this shape.
mxShape.prototype.createHtml = function()
Reconfigures this shape.
mxShape.prototype.reconfigure = function()
Creates and returns the SVG node(s) to represent this shape.
mxShape.prototype.redraw = function()
Removes all child nodes and resets all CSS.
mxShape.prototype.clear = function()
Updates the bounds based on the points.
mxShape.prototype.updateBoundsFromPoints = function()
Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
mxShape.prototype.getLabelBounds = function( rect )
Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.
mxShape.prototype.getLabelMargins= function( rect )
Returns true if the bounds are not null and all of its variables are numeric.
mxShape.prototype.checkBounds = function()
Returns the temporary element used for rendering in IE8 standards mode.
mxShape.prototype.createVmlGroup = function()
Updates the SVG or VML shape.
mxShape.prototype.redrawShape = function()
Creates a new canvas for drawing this shape.
mxShape.prototype.createCanvas = function()
Creates and returns an mxSvgCanvas2D for rendering this shape.
mxShape.prototype.createSvgCanvas = function()
Creates and returns an mxVmlCanvas2D for rendering this shape.
mxShape.prototype.createVmlCanvas = function()
Updates the bounds of the VML container.
mxShape.prototype.updateVmlContainer = function()
Allow optimization by replacing VML with HTML.
mxShape.prototype.redrawHtmlShape = function()
Allow optimization by replacing VML with HTML.
mxShape.prototype.updateHtmlFilters = function( node )
Allow optimization by replacing VML with HTML.
mxShape.prototype.updateHtmlColors = function( node )
Allow optimization by replacing VML with HTML.
mxShape.prototype.updateHtmlBounds = function( node )
Destroys the given canvas which was used for drawing.
mxShape.prototype.destroyCanvas = function( canvas )
Invoked before paint is called.
mxShape.prototype.beforePaint = function( c )
Invokes after paint was called.
mxShape.prototype.afterPaint = function( c )
Generic rendering code.
mxShape.prototype.paint = function( c )
Sets the state of the canvas for drawing the shape.
mxShape.prototype.configureCanvas = function( c, x, y, w, h )
Returns the bounding box for the gradient box for this shape.
mxShape.prototype.getGradientBounds = function( c, x, y, w, h )
Sets the scale and rotation on the given canvas.
mxShape.prototype.updateTransform = function( c, x, y, w, h )
Paints the vertex shape.
mxShape.prototype.paintVertexShape = function( c, x, y, w, h )
Hook for subclassers.
mxShape.prototype.paintBackground = function( c, x, y, w, h )
Hook for subclassers.
mxShape.prototype.paintForeground = function( c, x, y, w, h )
Hook for subclassers.
mxShape.prototype.paintEdgeShape = function( c, pts )
Returns the arc size for the given dimension.
mxShape.prototype.getArcSize = function( w, h )
Paints the glass gradient effect.
mxShape.prototype.paintGlassEffect = function( c, x, y, w, h, arc )
Paints the given points with rounded corners.
mxShape.prototype.addPoints = function( c, pts, rounded, arcSize, close, exclude, initialMove )
Resets all styles.
mxShape.prototype.resetStyles = function()
Applies the style of the given mxCellState to the shape.
mxShape.prototype.apply = function( state )
Sets the cursor on the given shape.
mxShape.prototype.setCursor = function( cursor )
Returns the current cursor.
mxShape.prototype.getCursor = function()
Hook for subclassers.
mxShape.prototype.isRoundable = function()
Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
mxShape.prototype.updateBoundingBox = function()
Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
mxShape.prototype.createBoundingBox = function()
Augments the bounding box with the strokewidth and shadow offsets.
mxShape.prototype.augmentBoundingBox = function( bbox )
Returns true if the bounds should be inverted.
mxShape.prototype.isPaintBoundsInverted = function()
Returns the rotation from the style.
mxShape.prototype.getRotation = function()
Returns the rotation for the text label.
mxShape.prototype.getTextRotation = function()
Returns the actual rotation of the shape.
mxShape.prototype.getShapeRotation = function()
Adds a transparent rectangle that catches all events.
mxShape.prototype.createTransparentSvgRectangle = function( x, y, w, h )
Sets a transparent background CSS style to catch all events.
mxShape.prototype.setTransparentBackgroundImage = function( node )
Paints the line shape.
mxShape.prototype.releaseSvgGradients = function( grads )
Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
mxShape.prototype.destroy = function()
Removes the known listeners from the given DOM node and its descendants.
release: function( element )
Defines the key for the fill color.
STYLE_FILLCOLOR: 'fillColor'
Defines the key for the gradient color.
STYLE_GRADIENTCOLOR: 'gradientColor'
Defines the key for the gradient direction.
STYLE_GRADIENT_DIRECTION: 'gradientDirection'
Defines the key for the opacity style.
STYLE_OPACITY: 'opacity'
Defines the key for the fill opacity style.
STYLE_FILL_OPACITY: 'fillOpacity'
Defines the key for the stroke opacity style.
STYLE_STROKE_OPACITY: 'strokeOpacity'
Defines the key for the strokeColor style.
STYLE_STROKECOLOR: 'strokeColor'
Defines the key for the strokeWidth style.
STYLE_STROKEWIDTH: 'strokeWidth'
Defines the key for the shadow style.
STYLE_SHADOW: 'shadow'
Defines the key for the dashed style.
STYLE_DASHED: 'dashed'
Defines the key for the spacing.
STYLE_SPACING: 'spacing'
Defines the key for the startSize style.
STYLE_STARTSIZE: 'startSize'
Defines the key for the endSize style.
STYLE_ENDSIZE: 'endSize'
Defines the key for the rounded style.
STYLE_ROUNDED: 'rounded'
Defines the key for the start arrow marker.
STYLE_STARTARROW: 'startArrow'
Defines the key for the end arrow marker.
STYLE_ENDARROW: 'endArrow'
Defines the key for the rotation style.
STYLE_ROTATION: 'rotation'
Defines the key for the direction style.
STYLE_DIRECTION: 'direction'
Defines the key for the glass style.
STYLE_GLASS: 'glass'