Define Shape Geometries

Diagrams can display geometric shapes by setting the shape property of ShapeNode instances.

Shape Templates

The Shape class provides the means for defining complex node shapes, made of straight lines, arcs and Bézier curves. A shape template must always contain an outline to be used for hit testing, clipping and finding intersections with other items. Optionally shapes can contain decoration elements, which are visual elements that do not take part in hit testing and clipping. JsDiagram provides a set of over a 100 predefined shape templates, which can be accessed by the Shapes collection or fromId method of the Shape class. A shape is assigned to a node by means of the shape property.

JavaScript

shapeNode.shape = MindFusion.Diagramming.Shapes.Actor();
shapeNode.shape = MindFusion.Diagramming.Shape.fromId("Actor");

Custom Shapes

You can define your own shapes by using the static createShape method of the Diagramming.Controls.ShapeBuilder class. The shape geometry is specified as an array of ShapeElements. The ShapeElement class constructor expects a command and an array of command parameters, and optionally styling. The list of supported commands matches the HTML Canvas drawing API (e.g moveTo, lineTo, bezierCurveTo, arc, roundRect). Coordinates are defined as percentage of a node's bounding rectangle.

JavaScript

var outline = [];
outline.push(new ShapeElement("moveTo", [0, 33]));
outline.push(new ShapeElement("lineTo", [33, 0]));
outline.push(new ShapeElement("lineTo", [66, 0]));
outline.push(new ShapeElement("lineTo", [100, 33]));
outline.push(new ShapeElement("lineTo", [100, 100]));
outline.push(new ShapeElement("bezierCurveTo", [66, 112, 33, 87, 0, 100]));
outline.push(new ShapeElement("lineTo", [0, 33]));
var shape = MindFusion.Diagramming.Controls.ShapeBuilder.createShape("MyShape", outline);
shapeNode.shape = shape;

The Shape definition can also contain decorations and shape decorations. A decoration is a geometry that consists of one or more lines or curves. A shape decoration is a closed path of lines and/or curves, that can also have a fill. A shape can have one decoration and a number of shape decorations, that are specified through the decorationElements and shapeDecorationElements parameters as follows:

JavaScript

var decoration = [];
decoration.push(new ShapeElement("moveTo", [0, 33]));
decoration.push(new ShapeElement("lineTo", [33, 0], "red"));
decoration.push(new ShapeElement("lineTo", [66, 33], "blue", 4));

var shapeDecorationElements = [];
shapeDecorationElements.push(new ShapeElement("roundRect", [50, 50, 80, 80, 2]));
var shapeDecoration = new ShapeDecoration(shapeDecorationsElements, "red");

var shape = MindFusion.Diagramming.Controls.ShapeBuilder.createShape(
    "MyShape", outline, decoration, [shapeDecoration]);

If you don't need the per-element styling options, another way to create a shape is by creating an instance of the Shape class providing the outline definition using SVG Path syntax.

JavaScript

var shape = new Shape({
    id: "MyShape"
    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"});

A string identifier must be specified for every shape so they will be accessible via the Shape.fromId method.

Shape Libraries

You can use a Shape Library xml file to store your collection of custom shapes. Set the shapeLibraryLocation property to specify the path to the file.

JavaScript

diagram.shapeLibraryLocation = "MyShapes.sl";

The shapes in the Shape Library file will be automatically added to the shared list of shapes kept in the Shape class, which lets you access them by calling the fromId method.

Shape Designer Tool

The ShapeDesigner tool that comes with JsDiagram lets you create and edit custom shapes interactively and save them to Shape Library files. When the tool starts, a new shape library is created by default with a single basic rectangular shape in it. To modify the shape, drag and drop shape elements from the palette to the right onto the shape canvas. The following drop operations are supported:

• dropping an element over existing element of a shape outline replaces the element (the element to be replaced will be marked in red)
• dropping an element over the joint of two outline elements inserts the element between them (the joint will be marked in blue)
• dropping an element on an empty area of the canvas adds a decoration to the Shape
• dropping a decoration over the shape outline replaces all elements of the outline with ones from the decoration
• dropping a decoration on an empty area of the canvas adds a filled ShapeDecoration to the Shape
• dropping a decoration over a ShapeDecoration replaces its elements

Elements/decorations can be further customized by dragging their control points.
You can delete, copy and paste dropped elements/decorations, as well as undo and redo drop actions via the options in the Edit menu.
Styling can be specified to elements/decorations by using the controls in the property panel, that is shown when an element/decoration is selected.
The Preview panel lets you see how your shape will look and behave in a real DiagramView control.  
New shapes can be added from the Shape/New menu option.
The finished library can be exported to an .sl file from the File/Save Library menu option.