mxOutline

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 the selection border in the outline appears behind the contents of the graph, then you can use the following code.  (This may happen when using a transparent container for the outline in IE.)

mxOutline.prototype.graphRenderHint = mxConstants.RENDERING_HINT_EXACT;

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);
}
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 outline mxGraph.
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.
updateOnPanSpecifies if update should be called for mxEvent.PAN in the source graph.
sizerImageOptional mxImage to be used for the sizer.
suspendedOptional boolean flag to suspend updates.
Functions
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.
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.
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 outline mxGraph.

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.

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.

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

Functions

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.

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.

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.updateOnPan
Specifies if update should be called for mxEvent.PAN in the source graph.
mxOutline.prototype.update = function(revalidate)
Updates the outline.
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.suspended
Optional boolean flag to suspend updates.
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.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.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.
Close