Class Shape

Base class for all shapes. A shape in maxGraph 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 CellRenderer when the shape is created. The dialect must be assigned for a shape, and it does normally depend on the browser and the configuration of the graph (see maxGraph rendering hint).

For each supported shape in SVG and VML, a corresponding shape exists in maxGraph, namely for text, image, rectangle, rhombus, ellipse and polyline. The other shapes are a combination of these shapes (e.g. label and swimlane) or they consist of one or more (filled) path objects (e.g. actor and cylinder). The HTML implementation is optional but may be required for a HTML-only view of the graph.

Custom Shapes

A custom shape is a class extending one of the exported shape classes, registered in ShapeRegistry under a name, then referenced by that name as the shape property of a cell style.

Choose the base class according to what is painted:

• Shape itself for a vertex made of a single filled and stroked path: override paintVertexShape(c, x, y, w, h) and call c.translate(x, y), c.begin(), the path drawing operations, then c.fillAndStroke().
• AbstractPathShape for the same single path vertex, without that boilerplate: override redrawPath(c, x, y, w, h) with the drawing operations only.
• CylinderShape for a filled area plus a stroke only overlay path: override redrawPath(c, x, y, w, h, isForeground).
• RectangleShape (override paintBackground or paintForeground) or EllipseShape (override paintVertexShape) to decorate an existing shape.
• For edges, ConnectorShape, PolylineShape, ArrowShape or ArrowConnectorShape: override paintEdgeShape(c, pts).

The constructor must take no argument. CellRenderer.createShape instantiates the registered class with new shapeConstructor(), for vertices and edges alike, so the legacy (bounds, fill, stroke, strokeWidth) parameters still declared by several built-in shapes are never passed on that path. The renderer populates the instance afterwards: Shape.apply sets Shape.state, Shape.style and the fields derived from the style, then CellRenderer.redrawShape sets Shape.bounds for a vertex, Shape.points for an edge, and Shape.scale.

Consequently, the cell style is only available at paint time, through Shape.style, which is CellStateStyle | null and must be guarded.

class CustomShape extends Shape {
  override paintVertexShape(
    c: AbstractCanvas2D,
    x: number,
    y: number,
    w: number,
    h: number
  ): void {
    const notch = this.style?.arcSize ?? 10;
    c.translate(x, y);
    c.begin();
    c.moveTo(0, 0);
    c.lineTo(w - notch, 0);
    c.lineTo(w, notch);
    c.lineTo(w, h);
    c.lineTo(0, h);
    c.close();
    c.fillAndStroke();
  }
}

ShapeRegistry.add('customShape', CustomShape);

graph.insertVertex({ value: 'custom', position: [10, 10], size: [100, 60], style: { shape: 'customShape' } });
Copy

See the Extend maxGraph page of the documentation for a complete walkthrough.