mxOutline

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

Example

let outline = new mxOutline(graph, div);

If an outline is used in an mxWindow 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.

let scale = graph.view.scale;
let 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);
}
Summary
mxOutlineImplements an outline (aka overview) for a graph.
Functions
mxOutlineConstructs a new outline for the specified graph inside the given container.
sourceReference to the source mxGraph.
outlineReference to the mxGraph that renders the outline.
graphRenderHintRenderhint to be used for the outline graph.
Variables
enabledSpecifies if events are handled.
showViewportSpecifies a viewport rectangle should be shown.
borderBorder to be added at the bottom and right.
enabledSpecifies the size of the sizer handler.
labelsVisibleSpecifies if labels should be visible in the outline.
updateOnPanSpecifies if update should be called for mxEvent.PAN in the source graph.
sizerImageOptional mxImage to be used for the sizer.
minScaleMinimum scale to be used.
suspendedOptional boolean flag to suspend updates.
forceVmlHandlesSpecifies if VML should be used to render the handles in this control.
Functions
createGraphCreates the mxGraph used in the outline.
initInitializes the outline inside the given container.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
setZoomEnabledEnables or disables the zoom handling by showing or hiding the respective handle.
refreshInvokes update and revalidate the outline.
createSizerCreates the shape used as the sizer.
getSourceContainerSizeReturns the size of the source container.
getOutlineOffsetReturns the offset for drawing the outline graph.
getSourceGraphBoundsReturns the graph bound boxing of the source.
updateUpdates the outline.
mouseDownHandles the event by starting a translation or zoom.
mouseMoveHandles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.
getTranslateForEventGets the translate for the given mouse event.
mouseUpHandles the event by applying the translation or zoom to <graph>.
destroyDestroy this outline and removes all listeners from source.

Functions

mxOutline

function mxOutline(source,
container)

Constructs a new outline for the specified graph inside the given container.

Parameters

sourcemxGraph to create the outline for.
containerDOM node that will contain the outline.

source

Reference to the source mxGraph.

outline

Reference to the mxGraph that renders the outline.

graphRenderHint

Renderhint to be used for the outline graph.  Default is faster.

Variables

enabled

mxOutline.prototype.enabled

Specifies if events are handled.  Default is true.

showViewport

mxOutline.prototype.showViewport

Specifies a viewport rectangle should be shown.  Default is true.

border

mxOutline.prototype.border

Border to be added at the bottom and right.  Default is 10.

enabled

Specifies the size of the sizer handler.  Default is 8.

labelsVisible

mxOutline.prototype.labelsVisible

Specifies if labels should be visible in the outline.  Default is false.

updateOnPan

mxOutline.prototype.updateOnPan

Specifies if update should be called for mxEvent.PAN in the source graph.  Default is false.

sizerImage

mxOutline.prototype.sizerImage

Optional mxImage to be used for the sizer.  Default is null.

minScale

mxOutline.prototype.minScale

Minimum scale to be used.  Default is 0.0001.

suspended

mxOutline.prototype.suspended

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

nav.suspended = !nav.suspended;

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

forceVmlHandles

mxOutline.prototype.forceVmlHandles

Specifies if VML should be used to render the handles in this control.  This is true for IE8 standards mode and false for all other browsers and modes.  This is a workaround for rendering issues of HTML elements over elements with filters in IE 8 standards mode.

Functions

createGraph

mxOutline.prototype.createGraph = function(container)

Creates the mxGraph used in the outline.

init

mxOutline.prototype.init = function(container)

Initializes the outline inside the given container.

isEnabled

mxOutline.prototype.isEnabled = function()

Returns true if events are handled.  This implementation returns enabled.

setEnabled

mxOutline.prototype.setEnabled = function(value)

Enables or disables event handling.  This implementation updates enabled.

Parameters

valueBoolean that specifies the new enabled state.

setZoomEnabled

mxOutline.prototype.setZoomEnabled = function(value)

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

Parameters

valueBoolean that specifies the new enabled state.

refresh

mxOutline.prototype.refresh = function()

Invokes update and revalidate the outline.  This method is deprecated.

createSizer

mxOutline.prototype.createSizer = function()

Creates the shape used as the sizer.

getSourceContainerSize

mxOutline.prototype.getSourceContainerSize = function()

Returns the size of the source container.

getOutlineOffset

mxOutline.prototype.getOutlineOffset = function(scale)

Returns the offset for drawing the outline graph.

getSourceGraphBounds

mxOutline.prototype.getSourceGraphBounds = function()

Returns the graph bound boxing of the source.

update

mxOutline.prototype.update = function(revalidate)

Updates the outline.

mouseDown

mxOutline.prototype.mouseDown = function(sender,
me)

Handles the event by starting a translation or zoom.

mouseMove

mxOutline.prototype.mouseMove = function(sender,
me)

Handles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.

getTranslateForEvent

mxOutline.prototype.getTranslateForEvent = function(me)

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

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

  if (!this.zoom)
  {
    let 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;
};

mouseUp

mxOutline.prototype.mouseUp = function(sender,
me)

Handles the event by applying the translation or zoom to <graph>.

destroy

mxOutline.prototype.destroy = function()

Destroy this outline and removes all listeners from source.

function mxOutline(source,
container)
Constructs a new outline for the specified graph inside the given container.
Extends mxEventSource to implement a graph component for the browser.
mxOutline.prototype.enabled
Specifies if events are handled.
mxOutline.prototype.showViewport
Specifies a viewport rectangle should be shown.
mxOutline.prototype.border
Border to be added at the bottom and right.
mxOutline.prototype.labelsVisible
Specifies if labels should be visible in the outline.
mxOutline.prototype.updateOnPan
Specifies if update should be called for mxEvent.PAN in the source graph.
mxOutline.prototype.update = function(revalidate)
Updates the outline.
PAN: 'pan'
Specifies the event name for pan.
mxOutline.prototype.sizerImage
Optional mxImage to be used for the sizer.
Encapsulates the URL, width and height of an image.
mxOutline.prototype.minScale
Minimum scale to be used.
mxOutline.prototype.suspended
Optional boolean flag to suspend updates.
mxOutline.prototype.forceVmlHandles
Specifies if VML should be used to render the handles in this control.
mxOutline.prototype.createGraph = function(container)
Creates the mxGraph used in the outline.
mxOutline.prototype.init = function(container)
Initializes the outline inside the given container.
mxOutline.prototype.isEnabled = function()
Returns true if events are handled.
mxOutline.prototype.setEnabled = function(value)
Enables or disables event handling.
mxOutline.prototype.setZoomEnabled = function(value)
Enables or disables the zoom handling by showing or hiding the respective handle.
mxOutline.prototype.refresh = function()
Invokes update and revalidate the outline.
mxOutline.prototype.createSizer = function()
Creates the shape used as the sizer.
mxOutline.prototype.getSourceContainerSize = function()
Returns the size of the source container.
mxOutline.prototype.getOutlineOffset = function(scale)
Returns the offset for drawing the outline graph.
mxOutline.prototype.getSourceGraphBounds = function()
Returns the graph bound boxing of the source.
mxOutline.prototype.mouseDown = function(sender,
me)
Handles the event by starting a translation or zoom.
mxOutline.prototype.mouseMove = function(sender,
me)
Handles the event by previewing the viewrect in graph and updating the rectangle that represents the viewrect in the outline.
mxOutline.prototype.getTranslateForEvent = function(me)
Gets the translate for the given mouse event.
mxOutline.prototype.mouseUp = function(sender,
me)
Handles the event by applying the translation or zoom to graph.
mxOutline.prototype.destroy = function()
Destroy this outline and removes all listeners from source.
Reference to the source mxGraph.
Basic window inside a document.
Close