Class Diagram

A renderable diagram, created with DiagramBuilder.prototype.build. You should pass a factory method to useDiagram to create a Diagram from within a React component, for performance reasons.

Methods

addInputEffect beginDrag discard endDrag getCanvas getDraggingConstraints getInput getInteractiveElement getOptimized optimizationStep removeInputEffect render renderStatic setInput setOnInteraction setOptimized translate create

Methods

addInputEffect

  • addInputEffect(name, fn): void

  • Add an effect to an input. The effect will be called any time the input changes.

    Parameters

    • name: string

      The name of the input

    • fn: ((val: number, name: string) => void)

      The effect function

        • (val, name): void

        • Parameters

          • val: number
          • name: string

          Returns void

    Returns void

beginDrag

discard

endDrag

getCanvas

  • getCanvas(): {
        height: number;
        size: [number, number];
        width: number;
        xRange: Range;
        yRange: Range;
    }

  • Get the canvas of the diagram.

    Returns {
        height: number;
        size: [number, number];
        width: number;
        xRange: Range;
        yRange: Range;
    }

    • height: number
    • size: [number, number]
    • width: number
    • xRange: Range
    • yRange: Range

getDraggingConstraints

getInput

  • getInput(name): number

  • Get the value of an input by name.

    Parameters

    • name: string

      The name of the input

    Returns number

getInteractiveElement

  • getInteractiveElement(): HTMLDivElement

  • Returns an HTMLElement presenting an interactive diagram. This element should be appended added to an existing document node to be visible. The element is styled by default with "width: 100%; height: 100%l touch-action: none".

    Returns HTMLDivElement

getOptimized

optimizationStep

  • optimizationStep(): Promise<boolean>

  • Take one optimization step. This will update the internal state of the diagram.

    Returns Promise<boolean>

    true if the optimization should continue, false if it should stop (i.e. when optimization converges or fails)

removeInputEffect

  • removeInputEffect(name, fn): void

  • Remove an effect from an input.

    Parameters

    • name: string

      The name of the input

    • fn: ((val: number, name: string) => void)

      The effect function

        • (val, name): void

        • Parameters

          • val: number
          • name: string

          Returns void

    Returns void

render

  • render(): Promise<{
        nameElemMap: Map<string, SVGElement>;
        svg: SVGSVGElement;
    }>

  • Render an SVG of the current diagram state and a map of shape names to SVG elements.

    Returns Promise<{
        nameElemMap: Map<string, SVGElement>;
        svg: SVGSVGElement;
    }>

renderStatic

setInput

  • setInput(name, val): void

  • Set the value of an input by name.

    Parameters

    • name: string

      The name of the input

    • val: number

      The new value

    Returns void

setOnInteraction

  • setOnInteraction(fn): (() => void)

  • Parameters

    • fn: (() => void)
        • (): void

        • Returns void

    Returns (() => void)

      • (): void

      • Returns void

setOptimized

  • setOptimized(name, optimized): void

  • Set the value of an input by index.

    Parameters

    • name: string
    • optimized: boolean

      Whether the input should be optimized

    Returns void

translate

Staticcreate

Settings

Member Visibility

On This Page

Methods