Default ShapeLibrary implementation. Use one of these to manage a set of shapes for rendering into your vertices and/or for rendering as a palette from which the user can drag new objects.

Type Parameters

  • T extends ObjectData


  • ShapeLibrary<T>


compiledIconList: CompiledIconDefinition[] = []

Also we keep a list of all compiled icons, but here we've stripped the category out. we use this in the event that some data doesn't have a category. then it's a lucky dip. the user gets the first icon with a matching id.

compiledIcons: Map<string, Map<string, CompiledIconDefinition>> = ...

map of compiled icons. the keys of this map are set IDs. The values are maps of icon ids to compiled definitions.


  • Private

    TODO would this be better done via css? or would that br a problem for headless scenarios?


    • el: HTMLElement | SVGElement

    Returns void

  • Gets a compiled version of the given shape, creating and caching it if it does not already exist.


    • type: string

      Shape type.

    • Optional category: string

      Category to use. Defaults to the ID of the first category provided in the shape list.

    Returns ShapeGeneratorFunction

  • Gets the definition for some shape. May return null.


    • type: string
    • Optional set: string

    Returns ShapeType

  • Returns a tag definition that can be used in a Surface's tags declaration. Note that this method returns an object containing the tag's implementation, but not the name of the tag. You can call the tag whatever you like.


    • Optional strokeWidth: number
    • Optional includeLabel: boolean
    • labelAttribute: string = ATTRIBUTE_LABEL

    Returns CustomTagOptions

  • Gets the template for the given shape type in the given set. If no template is resolved then we return DEFAULT_TEMPLATE (and log the issue to the console).


    • type: string

      Shape type

    • set: string

      Name of set. If not provided, the value of DEFAULT_SET is used as the set name.

    Returns string

  • Render the given data with the appropriate template. A fill value is set on the resulting element, and the vector-effect attribute is set to 'non scaling stroke', ie. when the shape is scaled due to the element dimensions differing from the viewbox, the stroke does not change.


    • data: ObjectData
    • Optional strokeWidth: number

      Stroke width to use. This is passed to the underlying template and is taken into account by the shape template (or at least, it should be, because it has a bearing on the quality of the result)

    Returns HTMLElement | SVGElement

  • Render a label element for the given data - an SVG text element.


    • data: ObjectData

      Data to extract label from

    • Optional labelProperty: string

      Name of the property that provides the label. Defaults to "label"

    • Optional strokeWidth: string

      Optional stroke width, defaults to 0.25px

    Returns SVGTextElement