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
mxShapeBase class for all shapes.
Functions
mxShapeConstructs a new shape.
Variables
SVG_STROKE_TOLERANCEEvent-tolerance for SVG strokes (in px).
scaleHolds the scale in which the shape is being painted.
dialectHolds the dialect in which the shape is to be painted.
crispSpecial attribute for SVG rendering to set the shape-rendering attribute to crispEdges in the output.
roundedCrispSvgSpecifies if crisp rendering should be enabled for rounded shapes.
mixedModeHtmlSpecifies if createHtml should be used in mixed Html mode.
preferModeHtmlSpecifies if createHtml should be used in prefer Html mode.
boundsHolds the mxRectangle that specifies the bounds of this shape.
pointsHolds the array of mxPoints that specify the points of this shape.
nodeHolds the outermost DOM node that represents this shape.
labelReference to the DOM node that should contain the label.
innerNodeHolds the DOM node that graphically represents this shape.
styleHolds the style of the cell state that corresponds to this shape.
startOffsetSpecifies the offset in pixels from the first point in points and the actual start of the shape.
endOffsetSpecifies the offset in pixels from the last point in points and the actual start of the shape.
boundingBoxContains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
vmlNodesArray if VML node names to fix in IE8 standards mode.
vmlScaleInternal scaling for VML using coordsize for better precision.
Functions
setCursorSets the cursor on the given shape.
getCursorReturns the current cursor.
initInitializes the shape by creaing the DOM node using create and adding it into the given container.
insertGradientInserts the given gradient node.
isMixedModeHtmlUsed to determine if a shape can be rendered using createHtml in mixed mode Html without compromising the display accuracy.
createCreates and returns the DOM node(s) for the shape in the given container.
createHtmlCreates and returns the HTML DOM node(s) to represent this shape.
destroyDestroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
applyApplies the style of the given mxCellState to the shape.
createSvgGroupCreates a SVG group element and adds the given shape as a child of the element.
createSvgShadowCreates a clone of the given node and configures the node’s color to use mxConstants.SHADOWCOLOR.
configureHtmlShapeConfigures the specified HTML node by applying the current color, bounds, shadow, opacity etc.
updateVmlFillUpdates the given VML fill node.
updateVmlStrokeNodeCreates the stroke node for VML.
updateVmlStrokeColorUpdates the VML stroke color for the given node.
configureVmlShapeConfigures the specified VML node by applying the current color, bounds, shadow, opacity etc.
createVmlShadowCreates the VML shadow node.
configureTransparentBackgroundHook to make the background of a shape transparent.
configureSvgShapeConfigures the specified SVG node by applying the current color, bounds, shadow, opacity etc.
getGradientIdCreates a unique ID for the gradient of this shape.
createSvgPipeCreates an invisible path which is used to increase the hit detection for edges in SVG.
createSvgGradientCreates a gradient object for SVG using the specified startcolor, endcolor and opacity.
createPointsCreates a path expression using the specified commands for this.points.
updateHtmlShapeUpdates the bounds or points of the specified HTML node and updates the inner children to reflect the changes.
updateVmlDashStyleUpdates the dashstyle in the stroke node.
updateVmlShapeUpdates the bounds or points of the specified VML node and updates the inner children to reflect the changes.
updateSvgBoundsUpdates the bounds of the given node using bounds.
updateSvgPathUpdates the path of the given node using points.
updateSvgScaleUpdates the properties of the given node that depend on the scale and checks the crisp rendering attribute.
updateSvgShapeUpdates the bounds or points of the specified SVG node and updates the inner children to reflect the changes.
getSvgShadowTransformReturns the current transformation for SVG shadows.
updateSvgTransformUpdates the tranform of the given node.
reconfigureReconfigures this shape.
redrawInvokes redrawSvg, redrawVml or redrawHtml depending on the dialect of the shape.
updateBoundingBoxUpdates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
createBoundingBoxReturns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
augmentBoundingBoxAugments the bounding box with the strokewidth and shadow offsets.
redrawSvgRedraws this SVG shape by invoking updateSvgShape on this.node, this.innerNode and this.shadowNode.
updateVmlGlassPaneDraws the glass overlay if mxConstants.STYLE_GLASS is 1.
updateSvgGlassPaneDraws the glass overlay if mxConstants.STYLE_GLASS is 1.
redrawVmlRedraws this VML shape by invoking updateVmlShape on this.node.
redrawHtmlRedraws this HTML shape by invoking updateHtmlShape on this.node.
getRotationReturns the current rotation including direction.
createPathCreates an mxPath for the specified format and origin.
redrawPathDraws 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.

Functions

setCursor

mxShape.prototype.setCursor = function(cursor)

Sets the cursor on the given shape.

Parameters

cursorThe 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

containerDOM node that will contain the shape.

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

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

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

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

function mxShape()
Constructs a new shape.
mxShape.prototype.SVG_STROKE_TOLERANCE
Event-tolerance for SVG strokes (in px).
mxShape.prototype.scale
Holds the scale in which the shape is being painted.
mxShape.prototype.dialect
Holds the dialect in which the shape is to be painted.
mxShape.prototype.crisp
Special attribute for SVG rendering to set the shape-rendering attribute to crispEdges in the output.
mxShape.prototype.roundedCrispSvg
Specifies if crisp rendering should be enabled for rounded shapes.
mxShape.prototype.mixedModeHtml
Specifies if createHtml should be used in mixed Html mode.
mxShape.prototype.createHtml = function()
Creates and returns the HTML DOM node(s) to represent this shape.
mxShape.prototype.preferModeHtml
Specifies if createHtml should be used in prefer Html mode.
mxShape.prototype.bounds
Holds the mxRectangle that specifies the bounds of this shape.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxShape.prototype.points
Holds the array of mxPoints that specify the points of this shape.
Implements a 2-dimensional vector with double precision coordinates.
mxShape.prototype.node
Holds the outermost DOM node that represents this shape.
mxShape.prototype.label
Reference to the DOM node that should contain the label.
mxShape.prototype.innerNode
Holds the DOM node that graphically represents this shape.
mxShape.prototype.style
Holds the style of the cell state that corresponds to this shape.
mxShape.prototype.startOffset
Specifies the offset in pixels from the first point in points and the actual start of the shape.
mxShape.prototype.endOffset
Specifies the offset in pixels from the last point in points and the actual start of the shape.
mxShape.prototype.boundingBox
Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
mxShape.prototype.vmlNodes
Array if VML node names to fix in IE8 standards mode.
mxShape.prototype.vmlScale
Internal scaling for VML using coordsize for better precision.
mxShape.prototype.setCursor = function(cursor)
Sets the cursor on the given shape.
mxShape.prototype.getCursor = function()
Returns the current cursor.
mxShape.prototype.init = function(container)
Initializes the shape by creaing the DOM node using create and adding it into the given container.
mxShape.prototype.create = function(container)
Creates and returns the DOM node(s) for the shape in the given container.
mxShape.prototype.insertGradient = function(node)
Inserts the given gradient node.
mxShape.prototype.isMixedModeHtml = function()
Used to determine if a shape can be rendered using createHtml in mixed mode Html without compromising the display accuracy.
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.
release: function(element)
Removes the known listeners from the given DOM node and its descendants.
mxShape.prototype.apply = function(state)
Applies the style of the given mxCellState to the shape.
Represents the current state of a cell in a given mxGraphView.
mxShape.prototype.createSvgGroup = function(shape)
Creates a SVG group element and adds the given shape as a child of the element.
mxShape.prototype.createSvgShadow = function(node)
Creates a clone of the given node and configures the node’s color to use mxConstants.SHADOWCOLOR.
Defines the color to be used to draw shadows in shapes and windows.
mxShape.prototype.configureHtmlShape = function(node)
Configures the specified HTML node by applying the current color, bounds, shadow, opacity etc.
mxShape.prototype.updateVmlFill = function(node,
c1,
c2,
dir,
alpha)
Updates the given VML fill node.
mxShape.prototype.updateVmlStrokeNode = function(parent)
Creates the stroke node for VML.
mxShape.prototype.updateVmlStrokeColor = function(node)
Updates the VML stroke color for the given node.
mxShape.prototype.configureVmlShape = function(node)
Configures the specified VML node by applying the current color, bounds, shadow, opacity etc.
mxShape.prototype.createVmlShadow = function(node)
Creates the VML shadow node.
mxShape.prototype.configureTransparentBackground = function(node)
Hook to make the background of a shape transparent.
mxShape.prototype.configureSvgShape = function(node)
Configures the specified SVG node by applying the current color, bounds, shadow, opacity etc.
mxShape.prototype.getGradientId = function(start,
end)
Creates a unique ID for the gradient of this shape.
mxShape.prototype.createSvgPipe = function(id,
start,
end,
node)
Creates an invisible path which is used to increase the hit detection for edges in SVG.
mxShape.prototype.createSvgGradient = function(id,
start,
end,
node)
Creates a gradient object for SVG using the specified startcolor, endcolor and opacity.
mxShape.prototype.createPoints = function(moveCmd,
lineCmd,
curveCmd,
isRelative)
Creates a path expression using the specified commands for this.points.
mxShape.prototype.updateHtmlShape = function(node)
Updates the bounds or points of the specified HTML node and updates the inner children to reflect the changes.
mxShape.prototype.updateVmlDashStyle = function()
Updates the dashstyle in the stroke node.
mxShape.prototype.updateVmlShape = function(node)
Updates the bounds or points of the specified VML node and updates the inner children to reflect the changes.
mxShape.prototype.updateSvgBounds = function(node)
Updates the bounds of the given node using bounds.
mxShape.prototype.updateSvgPath = function(node)
Updates the path of the given node using points.
mxShape.prototype.updateSvgScale = function(node)
Updates the properties of the given node that depend on the scale and checks the crisp rendering attribute.
mxShape.prototype.updateSvgShape = function(node)
Updates the bounds or points of the specified SVG node and updates the inner children to reflect the changes.
mxShape.prototype.getSvgShadowTransform = function(node,
shadow)
Returns the current transformation for SVG shadows.
mxShape.prototype.updateSvgTransform = function(node,
shadow)
Updates the tranform of the given node.
mxShape.prototype.reconfigure = function()
Reconfigures this shape.
mxShape.prototype.redraw = function()
Invokes redrawSvg, redrawVml or redrawHtml depending on the dialect of the shape.
mxShape.prototype.redrawSvg = function()
Redraws this SVG shape by invoking updateSvgShape on this.node, this.innerNode and this.shadowNode.
mxShape.prototype.redrawVml = function()
Redraws this VML shape by invoking updateVmlShape on this.node.
mxShape.prototype.redrawHtml = function()
Redraws this HTML shape by invoking updateHtmlShape on this.node.
mxShape.prototype.updateBoundingBox = function()
Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
mxShape.prototype.createBoundingBox = function()
Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
mxShape.prototype.augmentBoundingBox = function(bbox)
Augments the bounding box with the strokewidth and shadow offsets.
mxShape.prototype.updateVmlGlassPane = function()
Draws the glass overlay if mxConstants.STYLE_GLASS is 1.
mxShape.prototype.updateSvgGlassPane = function()
Draws the glass overlay if mxConstants.STYLE_GLASS is 1.
mxShape.prototype.getRotation = function()
Returns the current rotation including direction.
mxShape.prototype.createPath = function(arg)
Creates an mxPath for the specified format and origin.
An abstraction for creating VML and SVG paths.
mxShape.prototype.redrawPath = function(path,
x,
y,
w,
h)
Draws the path for this shape.
Renders cells into a document object model.
Extends mxEventSource to implement a graph component for the browser.
Extends mxShape to implement an actor shape.
Extends mxShape to implement an cylinder shape.
mxCylinder.prototype.redrawPath = function(path,
x,
y,
w,
h,
isForeground)
Draws the path for this shape.
Defines various global constants.
Defines the key for the fill color.
Defines the key for the gradient color.
Defines the key for the gradient direction.
Defines the key for the opacity style.
Defines the key for the strokeColor style.
Defines the key for the strokeWidth style.
Defines the key for the shadow style.
Defines the key for the endSize style.
Defines the key for the spacing.
Defines the key for the startSize style.
Defines the key for the endSize style.
Defines the key for the rounded style.
Defines the key for the start arrow marker.
Defines the key for the end arrow marker.
Defines the key for the rotation style.
Defines the key for the direction style.
mxPath.prototype.getPath = function()
Returns string that represents the path in format.
Close