Shape Class
Remarks See Also

An instance of this class represents a shape defined through a series of arc, line and Bezier segments. The segments can be a part of the shape outline, in which case they define the part of the shape is filled, used for hit-testing and for aligning links to the node edges. Segments can also be added as decoration elements, in which case they only affect the appearance of a ShapeNode.

Namespace: MindFusion.Diagramming
Package: Shape.js


JavaScript  Copy Code

// class
Shape.prototype = {}


The Shape class can also be used as a component in composite nodes. When its isOutline attribute is set, the shape will control CompositeNode's geometry, defining hit test and clip area, and link alignment points along node's border. If isOutline is disabled, the shape will serve mostly as a decorative element. The code below shows a sample fragment specifying shape component in template:

JavaScript  Copy Code

    component: "Shape",
    id: "Cloud",
    autoProperty: true,
    name: "OutlineShape",
    pen: "gray",
    brush: "Transparent",
    isOutline: true


Custom shapes can be defined using SVG Path syntax. The following code creates custom shape geoometry and assigns it to a ShapeNode:

JavaScript  Copy Code

var shape = new MindFusion.Diagramming.Shape({
   id: "DoubleEllipse",
   outline: "M100,50 A50,50,0,1,1,0,50 A50,50,0,1,1,100,50",
   decoration: "M98,50 A48,48,0,1,1,2,50 A48,48,0,1,1,98,50",
   fillMode: "nonzero"});

node.shape = shape;

 Inheritance Hierarchy


 See Also