Class Outline

Outline

Implements an outline (aka overview) for a graph. Set updateOnPan to true to enable updates while the source graph is panning.

Example

var outline = new mxOutline(graph, div);

If an outline is used in an MaxWindow in IE8 standards mode, the following code makes sure that the shadow filter is not inherited and that any transparent elements in the graph do not show the page background, but the background of the graph container.

if (document.documentMode == 8)
{
  container.style.filter = 'progid:DXImageTransform.Microsoft.alpha(opacity=100)';
}

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

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

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

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

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

constructor

Properties

active

active: null | boolean = null

border

border: number = 10

Border to be added at the bottom and right.

Default

10

bounds

bounds: null | Rectangle = null

dx0

dx0: null | number = null

dy0

dy0: null | number = null

enabled

enabled: boolean = true

Specifies if events are handled.

Default

true

graphRenderHint

graphRenderHint: string = 'exact'

Renderhint to be used for the outline graph.

Default

faster

index

index: null | number = null

labelsVisible

labelsVisible: boolean = false

Specifies if labels should be visible in the outline.

Default

false

minScale

minScale: number = 0.0001

Minimum scale to be used.

Default

0.0001

outline

outline: null | Graph = null

Reference to the graph that renders the outline.

panHandler

panHandler: null | ((sender: any, evt: EventObject) => void) = null

refreshHandler

refreshHandler: null | ((sender: any, evt: EventObject) => void) = null

selectionBorder

selectionBorder: null | RectangleShape = null

showViewport

showViewport: boolean = true

Specifies a viewport rectangle should be shown.

Default

true

sizer

sizer: null | RectangleShape = null

sizerImage

sizerImage: null | ImageBox = null

Optional Image to be used for the sizer.

Default

null

sizerSize

sizerSize: number = 8

Specifies the size of the sizer handler.

Default

8

source

source: Graph

Reference to the source graph.

startX

startX: null | number = null

startY

startY: null | number = null

suspended

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.

Default

false

Example

nav.suspended = !nav.suspended;

if (!nav.suspended)
{
  nav.update(true);
}

updateHandler

updateHandler: null | ((sender: any, evt: EventObject) => void) = null

updateOnPan

updateOnPan: boolean = false

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

Default

false

zoom

zoom: boolean = false

Methods

createGraph

createSizer

destroy

getOutlineOffset

  • getOutlineOffset(scale?): null | Point

  • Returns the offset for drawing the outline graph.

    Parameters

    • Optionalscale: number

    Returns null | Point

getSourceContainerSize

getSourceGraphBounds

getTranslateForEvent

  • getTranslateForEvent(me): 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

    Example

    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;
    };

init

  • init(container): void

  • Initializes the outline inside the given container.

    Parameters

    • container: HTMLElement

    Returns void

isEnabled

mouseDown

mouseMove

mouseUp

refresh

setEnabled

  • setEnabled(value): void

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

    Parameters

    • value: boolean

      Boolean that specifies the new enabled state.

    Returns void

setZoomEnabled

  • setZoomEnabled(value): 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

update

  • update(revalidate?): void

  • Updates the outline.

    Parameters

    • revalidate: boolean = false

    Returns void

Settings

Member Visibility

On This Page

Example
Constructors
Properties
Methods