@maxgraph/core
    Preparing search index...

    Class Outline

    Implements an outline (aka overview or minimap) for a Graph.

    Set updateOnPan to true to enable updates while the source graph is panning.

    const outline = new Outline(graph, div);

    To move the graph to the top, left corner the following code can be used.

    const scale = graph.view.scale;
    const bounds = graph.getGraphBounds();
    graph.view.setTranslate(-bounds.x / scale, -bounds.y / scale);

    To toggle the suspended mode, the following can be used.

    outline.suspended = !outline.suspended;
    if (!outline.suspended) {
      outline.update(true);
    }

    Implements

    Index

    Constructors

    constructor

    Properties

    active border bounds dx0 dy0 enabled graphRenderHint index labelsVisible minScale outline panHandler refreshHandler selectionBorder showViewport sizer sizerImage sizerSize source startX startY suspended updateHandler updateOnPan zoom

    Methods

    createGraph createSizer destroy getOutlineOffset getSourceContainerSize getSourceGraphBounds getTranslateForEvent init isEnabled mouseDown mouseMove mouseUp refresh setEnabled setZoomEnabled update

    Constructors

    Properties

    active: null | boolean = null
    border: number = 10

    Border to be added at the bottom and right.

    10
    bounds: null | Rectangle = null
    dx0: null | number = null
    dy0: null | number = null
    enabled: boolean = true

    Specifies if events are handled.

    true
    graphRenderHint: string = 'exact'

    Renderhint to be used for the outline graph.

    faster
    index: null | number = null
    labelsVisible: boolean = false

    Specifies if labels should be visible in the outline.

    false
    minScale: number = 0.0001

    Minimum scale to be used.

    0.0001
    outline: null | AbstractGraph = null

    Reference to the AbstractGraph that renders the outline.

    panHandler: null | ((sender: any, evt: EventObject) => void) = null
    refreshHandler: null | ((sender: any, evt: EventObject) => void) = null
    selectionBorder: null | RectangleShape = null
    showViewport: boolean = true

    Specifies a viewport rectangle should be shown.

    true
    sizer: null | RectangleShape = null
    sizerImage: null | ImageBox = null

    Optional Image to be used for the sizer.

    null
    sizerSize: number = 8

    Specifies the size of the sizer handler.

    8
    source: AbstractGraph

    Reference to the source AbstractGraph.

    startX: null | number = null
    startY: null | number = null
    suspended: boolean = false

    Optional boolean flag to suspend updates. This flag will also suspend repaints of the outline. To toggle this switch, use the following code.

    false

    nav.suspended = !nav.suspended;

    if (!nav.suspended)
    {
      nav.update(true);
    }
    updateHandler: null | ((sender: any, evt: EventObject) => void) = null
    updateOnPan: boolean = false

    Specifies if update should be called for InternalEvent.PAN in the source graph.

    false
    zoom: boolean = false

    Methods

    • Returns the offset for drawing the outline graph.

      Parameters

      • Optionalscale: number

      Returns null | Point

    • Gets the translate for the given mouse event. Here is an example to limit the outline to stay within positive coordinates:

      Parameters

      Returns Point

      outline.getTranslateForEvent(me)
      {
        var pt = new mxPoint(me.getX() - this.startX, me.getY() - this.startY);

        if (!this.zoom)
        {
          var tr = this.source.view.translate;
          pt.x = Math.max(tr.x * this.outline.view.scale, pt.x);
          pt.y = Math.max(tr.y * this.outline.view.scale, pt.y);
        }

        return pt;
      };

    • Initializes the outline inside the given container.

      Parameters

      • container: HTMLElement

      Returns void

    • Enables or disables event handling. This implementation updates enabled.

      Parameters

      • value: boolean

        Boolean that specifies the new enabled state.

      Returns void

    • Enables or disables the zoom handling by showing or hiding the respective handle.

      Parameters

      • value: boolean

        Boolean that specifies the new enabled state.

      Returns void

    • Updates the outline.

      Parameters

      • revalidate: boolean = false

      Returns void

    Settings

    Member Visibility

    On This Page

    Example
    Constructors
    Properties
    Methods