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 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.

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. These implement redrawPath in order to create the path expression for VML and SVG via a unified API (see mxPath). mxCylinder.redrawPath has an additional boolean argument to draw the foreground and background separately.

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:

graph.cellRenderer.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';

Summary

mxShape	Base class for all shapes.
Functions
mxShape	Constructs a new shape.
Variables
SVG_STROKE_TOLERANCE	Event-tolerance for SVG strokes (in px).
scale	Holds the scale in which the shape is being painted.
dialect	Holds the dialect in which the shape is to be painted.
crisp	Special attribute for SVG rendering to set the shape-rendering attribute to crispEdges in the output.
roundedCrispSvg	Specifies if crisp rendering should be enabled for rounded shapes.
mixedModeHtml	Specifies if createHtml should be used in mixed Html mode.
preferModeHtml	Specifies if createHtml should be used in prefer Html mode.
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.
label	Reference to the DOM node that should contain the label.
innerNode	Holds the DOM node that graphically represents this shape.
style	Holds the style of the cell state that corresponds to this shape.
startOffset	Specifies the offset in pixels from the first point in points and the actual start of the shape.
endOffset	Specifies the offset in pixels from the last point in points and the actual start of the shape.
boundingBox	Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
vmlNodes	Array if VML node names to fix in IE8 standards mode.
vmlScale	Internal scaling for VML using coordsize for better precision.
strokewidth	Holds the current strokewidth.
Functions
setCursor	Sets the cursor on the given shape.
getCursor	Returns the current cursor.
init	Initializes the shape by creaing the DOM node using create and adding it into the given container.
reparseVml	Forces a parsing of the outerHTML of this node and restores all references specified in vmlNodes.
insertGradient	Inserts the given gradient node.
isMixedModeHtml	Used to determine if a shape can be rendered using createHtml in mixed mode Html without compromising the display accuracy.
create	Creates and returns the DOM node(s) for the shape in the given container.
createHtml	Creates and returns the HTML DOM node(s) to represent this shape.
destroy	Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
apply	Applies the style of the given mxCellState to the shape.
createSvgGroup	Creates a SVG group element and adds the given shape as a child of the element.
createSvgShadow	Creates a clone of the given node and configures the node’s color to use mxConstants.SHADOWCOLOR.
configureHtmlShape	Configures the specified HTML node by applying the current color, bounds, shadow, opacity etc.
updateVmlFill	Updates the given VML fill node.
updateVmlStrokeNode	Creates the stroke node for VML.
updateVmlStrokeColor	Updates the VML stroke color for the given node.
configureVmlShape	Configures the specified VML node by applying the current color, bounds, shadow, opacity etc.
createVmlShadow	Creates the VML shadow node.
configureTransparentBackground	Hook to make the background of a shape transparent.
configureSvgShape	Configures the specified SVG node by applying the current color, bounds, shadow, opacity etc.
getGradientId	Creates a unique ID for the gradient of this shape.
createSvgPipe	Creates an invisible path which is used to increase the hit detection for edges in SVG.
createSvgGradient	Creates a gradient object for SVG using the specified startcolor, endcolor and opacity.
createPoints	Creates a path expression using the specified commands for this.points.
updateHtmlShape	Updates the bounds or points of the specified HTML node and updates the inner children to reflect the changes.
updateVmlDashStyle	Updates the dashstyle in the stroke node.
updateVmlShape	Updates the bounds or points of the specified VML node and updates the inner children to reflect the changes.
updateSvgBounds	Updates the bounds of the given node using bounds.
updateSvgPath	Updates the path of the given node using points.
updateSvgScale	Updates the properties of the given node that depend on the scale and checks the crisp rendering attribute.
updateSvgShape	Updates the bounds or points of the specified SVG node and updates the inner children to reflect the changes.
getSvgShadowTransform	Returns the current transformation for SVG shadows.
updateSvgTransform	Updates the tranform of the given node.
reconfigure	Reconfigures this shape.
redraw	Invokes redrawSvg, redrawVml or redrawHtml depending on the dialect of the shape.
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.
redrawSvg	Redraws this SVG shape by invoking updateSvgShape on this.node, this.innerNode and this.shadowNode.
updateVmlGlassPane	Draws the glass overlay if mxConstants.STYLE_GLASS is 1.
updateSvgGlassPane	Draws the glass overlay if mxConstants.STYLE_GLASS is 1.
redrawVml	Redraws this VML shape by invoking updateVmlShape on this.node.
redrawHtml	Redraws this HTML shape by invoking updateHtmlShape on this.node.
getRotation	Returns the current rotation including direction.
createPath	Creates an mxPath for the specified format and origin.
redrawPath	Draws the path for this shape.

Functions

mxShape

function mxShape()

Constructs a new shape.

Variables

SVG_STROKE_TOLERANCE

mxShape.prototype.SVG_STROKE_TOLERANCE

Event-tolerance for SVG strokes (in px). Default is 8.

scale

mxShape.prototype.scale

Holds the scale in which the shape is being painted.

dialect

mxShape.prototype.dialect

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

crisp

mxShape.prototype.crisp

Special attribute for SVG rendering to set the shape-rendering attribute to crispEdges in the output. This is ignored in IE. Default is false. To disable antialias in IE, the explorer.css file can be changed as follows:

[code] v\:* { behavior: url(#default#VML); antialias: false; } [/code]

roundedCrispSvg

mxShape.prototype.roundedCrispSvg

Specifies if crisp rendering should be enabled for rounded shapes. Default is true.

mixedModeHtml

mxShape.prototype.mixedModeHtml

Specifies if createHtml should be used in mixed Html mode. Default is true.

preferModeHtml

mxShape.prototype.preferModeHtml

Specifies if createHtml should be used in prefer Html mode. Default is true.

bounds

mxShape.prototype.bounds

Holds the mxRectangle that specifies the bounds of this shape.

points

mxShape.prototype.points

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

node

mxShape.prototype.node

Holds the outermost DOM node that represents this shape.

label

mxShape.prototype.label

Reference to the DOM node that should contain the label. This is null if the label should be placed inside node or innerNode.

innerNode

mxShape.prototype.innerNode

Holds the DOM node that graphically represents this shape. This may be null if the outermost DOM node represents this shape.

style

mxShape.prototype.style

Holds the style of the cell state that corresponds to this shape. This may be null if the shape is used directly, without a cell state.

startOffset

mxShape.prototype.startOffset

Specifies the offset in pixels from the first point in points and the actual start of the shape.

endOffset

mxShape.prototype.endOffset

Specifies the offset in pixels from the last point in points and the actual start of the shape.

boundingBox

mxShape.prototype.boundingBox

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

vmlNodes

mxShape.prototype.vmlNodes

Array if VML node names to fix in IE8 standards mode.

vmlScale

mxShape.prototype.vmlScale

Internal scaling for VML using coordsize for better precision.

strokewidth

mxShape.prototype.strokewidth

Holds the current strokewidth. Default is 1.

Functions

setCursor

mxShape.prototype.setCursor = function( cursor )

Sets the cursor on the given shape.

Parameters

cursor

The cursor to be used.

getCursor

mxShape.prototype.getCursor = function()

Returns the current cursor.

init

mxShape.prototype.init = function( container )

Initializes the shape by creaing the DOM node using create and adding it into the given container.

Parameters

container

DOM node that will contain the shape.

reparseVml

mxShape.prototype.reparseVml = function()

Forces a parsing of the outerHTML of this node and restores all references specified in vmlNodes. This is a workaround for the VML rendering bug in IE8 standards mode.

insertGradient

mxShape.prototype.insertGradient = function( node )

Inserts the given gradient node.

isMixedModeHtml

mxShape.prototype.isMixedModeHtml = function()

Used to determine if a shape can be rendered using createHtml in mixed mode Html without compromising the display accuracy. The default implementation will check if the shape is not rounded or rotated and has no gradient, and will use a DIV if that is the case. It will also check if mxShape.mixedModeHtml is true, which is the default settings. Subclassers can either override mixedModeHtml or this function if the result depends on dynamic values. The graph’s dialect is available via dialect.

create

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.

Parameters

container

DOM node that will contain the shape.

createHtml

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.

destroy

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.

apply

mxShape.prototype.apply = function( state )

Applies the style of the given mxCellState 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_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

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.

Parameters

state

mxCellState of the corresponding cell.

createSvgGroup

mxShape.prototype.createSvgGroup = function( shape )

Creates a SVG group element and adds the given shape as a child of the element. The child is stored in innerNode for later access.

createSvgShadow

mxShape.prototype.createSvgShadow = function( node )

Creates a clone of the given node and configures the node’s color to use mxConstants.SHADOWCOLOR.

configureHtmlShape

mxShape.prototype.configureHtmlShape = function( node )

Configures the specified HTML node by applying the current color, bounds, shadow, opacity etc.

updateVmlFill

mxShape.prototype.updateVmlFill = function( node,
c1,
c2,
dir,
alpha )

Updates the given VML fill node.

updateVmlStrokeNode

mxShape.prototype.updateVmlStrokeNode = function( parent )

Creates the stroke node for VML.

updateVmlStrokeColor

mxShape.prototype.updateVmlStrokeColor = function( node )

Updates the VML stroke color for the given node.

configureVmlShape

mxShape.prototype.configureVmlShape = function( node )

Configures the specified VML node by applying the current color, bounds, shadow, opacity etc.

createVmlShadow

mxShape.prototype.createVmlShadow = function( node )

Creates the VML shadow node.

configureTransparentBackground

mxShape.prototype.configureTransparentBackground = function( node )

Hook to make the background of a shape transparent. This hook was added as a workaround for the “display non secure items” warning dialog in IE which appears if the background:url(transparent.gif) is used in the overlay pane of a diagram. Since only mxImageShapes currently exist in the overlay pane this function is only overridden in mxImageShape.

configureSvgShape

mxShape.prototype.configureSvgShape = function( node )

Configures the specified SVG node by applying the current color, bounds, shadow, opacity etc.

getGradientId

mxShape.prototype.getGradientId = function( start,
end )

Creates a unique ID for the gradient of this shape.

createSvgPipe

mxShape.prototype.createSvgPipe = function( id,
start,
end,
node )

Creates an invisible path which is used to increase the hit detection for edges in SVG.

createSvgGradient

mxShape.prototype.createSvgGradient = function( id,
start,
end,
node )

Creates a gradient object for SVG using the specified startcolor, endcolor and opacity.

createPoints

mxShape.prototype.createPoints = function( moveCmd,
lineCmd,
curveCmd,
isRelative )

Creates a path expression using the specified commands for this.points. If <isRounded> is true, then the path contains curves for the corners.

updateHtmlShape

mxShape.prototype.updateHtmlShape = function( node )

Updates the bounds or points of the specified HTML node and updates the inner children to reflect the changes.

updateVmlDashStyle

mxShape.prototype.updateVmlDashStyle = function()

Updates the dashstyle in the stroke node.

updateVmlShape

mxShape.prototype.updateVmlShape = function( node )

Updates the bounds or points of the specified VML node and updates the inner children to reflect the changes.

updateSvgBounds

mxShape.prototype.updateSvgBounds = function( node )

Updates the bounds of the given node using bounds.

updateSvgPath

mxShape.prototype.updateSvgPath = function( node )

Updates the path of the given node using points.

updateSvgScale

mxShape.prototype.updateSvgScale = function( node )

Updates the properties of the given node that depend on the scale and checks the crisp rendering attribute.

updateSvgShape

mxShape.prototype.updateSvgShape = function( node )

Updates the bounds or points of the specified SVG node and updates the inner children to reflect the changes.

getSvgShadowTransform

mxShape.prototype.getSvgShadowTransform = function( node,
shadow )

Returns the current transformation for SVG shadows.

updateSvgTransform

mxShape.prototype.updateSvgTransform = function( node,
shadow )

Updates the tranform of the given node.

reconfigure

mxShape.prototype.reconfigure = function()

Reconfigures this shape. This will update the colors etc in addition to the bounds or points.

redraw

mxShape.prototype.redraw = function()

Invokes redrawSvg, redrawVml or redrawHtml depending on the dialect of the shape.

updateBoundingBox

mxShape.prototype.updateBoundingBox = function()

Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.

createBoundingBox

mxShape.prototype.createBoundingBox = function()

Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.

augmentBoundingBox

mxShape.prototype.augmentBoundingBox = function( bbox )

Augments the bounding box with the strokewidth and shadow offsets.

redrawSvg

mxShape.prototype.redrawSvg = function()

Redraws this SVG shape by invoking updateSvgShape on this.node, this.innerNode and this.shadowNode.

updateVmlGlassPane

mxShape.prototype.updateVmlGlassPane = function()

Draws the glass overlay if mxConstants.STYLE_GLASS is 1.

updateSvgGlassPane

mxShape.prototype.updateSvgGlassPane = function()

Draws the glass overlay if mxConstants.STYLE_GLASS is 1.

redrawVml

mxShape.prototype.redrawVml = function()

Redraws this VML shape by invoking updateVmlShape on this.node.

redrawHtml

mxShape.prototype.redrawHtml = function()

Redraws this HTML shape by invoking updateHtmlShape on this.node.

getRotation

mxShape.prototype.getRotation = function()

Returns the current rotation including direction.

createPath

mxShape.prototype.createPath = function( arg )

Creates an mxPath for the specified format and origin. The path object is then passed to redrawPath and mxPath.getPath is returned.

redrawPath

mxShape.prototype.redrawPath = function( path,
x,
y,
w,
h )

Draws the path for this shape. This implementation is empty. See mxActor and mxCylinder for implementations.