Implements an outline (aka overview) for a graph. Set updateOnPan to true to enable updates while the source graph is panning.
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);
}| mxOutline | Implements an outline (aka overview) for a graph. |
| Functions | |
| mxOutline | Constructs a new outline for the specified graph inside the given container. |
| source | Reference to the source mxGraph. |
| outline | Reference to the mxGraph that renders the outline. |
| graphRenderHint | Renderhint to be used for the outline graph. |
| Variables | |
| enabled | Specifies if events are handled. |
| showViewport | Specifies a viewport rectangle should be shown. |
| border | Border to be added at the bottom and right. |
| enabled | Specifies the size of the sizer handler. |
| labelsVisible | Specifies if labels should be visible in the outline. |
| updateOnPan | Specifies if update should be called for mxEvent.PAN in the source graph. |
| sizerImage | Optional mxImage to be used for the sizer. |
| minScale | Minimum scale to be used. |
| suspended | Optional boolean flag to suspend updates. |
| forceVmlHandles | Specifies if VML should be used to render the handles in this control. |
| Functions | |
| createGraph | Creates the mxGraph used in the outline. |
| init | Initializes the outline inside the given container. |
| isEnabled | Returns true if events are handled. |
| setEnabled | Enables or disables event handling. |
| setZoomEnabled | Enables or disables the zoom handling by showing or hiding the respective handle. |
| refresh | Invokes update and revalidate the outline. |
| createSizer | Creates the shape used as the sizer. |
| getSourceContainerSize | Returns the size of the source container. |
| getOutlineOffset | Returns the offset for drawing the outline graph. |
| getSourceGraphBounds | Returns the graph bound boxing of the source. |
| update | Updates the outline. |
| mouseDown | Handles the event by starting a translation or zoom. |
| mouseMove | Handles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline. |
| getTranslateForEvent | Gets the translate for the given mouse event. |
| mouseUp | Handles the event by applying the translation or zoom to <graph>. |
| destroy | 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.
| source | mxGraph to create the outline for. |
| container | DOM node that will contain the outline. |
Reference to the source mxGraph.
Reference to the mxGraph that renders the outline.
mxOutline.prototype.updateOnPan
Specifies if update should be called for mxEvent.PAN in the source graph. Default is false.
mxOutline.prototype.sizerImage
Optional mxImage to be used for the sizer. Default is null.
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.
mxOutline.prototype.createGraph = function( container )
Creates the mxGraph used in the outline.
mxOutline.prototype.isEnabled = function()
Returns true if events are handled. This implementation returns enabled.
mxOutline.prototype.setEnabled = function( value )
Enables or disables event handling. This implementation updates enabled.
| value | Boolean that specifies the new enabled state. |
mxOutline.prototype.refresh = function()
Invokes update and revalidate the outline. This method is deprecated.
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;
};
mxOutline.prototype.destroy = function()
Destroy this outline and removes all listeners from source.
Constructs a new outline for the specified graph inside the given container.
function mxOutline( source, container )
Specifies if events are handled.
mxOutline.prototype.enabled
Specifies a viewport rectangle should be shown.
mxOutline.prototype.showViewport
Border to be added at the bottom and right.
mxOutline.prototype.border
Specifies if labels should be visible in the outline.
mxOutline.prototype.labelsVisible
Specifies if update should be called for mxEvent.PAN in the source graph.
mxOutline.prototype.updateOnPan
Updates the outline.
mxOutline.prototype.update = function( revalidate )
Specifies the event name for pan.
PAN: 'pan'
Optional mxImage to be used for the sizer.
mxOutline.prototype.sizerImage
Minimum scale to be used.
mxOutline.prototype.minScale
Optional boolean flag to suspend updates.
mxOutline.prototype.suspended
Specifies if VML should be used to render the handles in this control.
mxOutline.prototype.forceVmlHandles
Creates the mxGraph used in the outline.
mxOutline.prototype.createGraph = function( container )
Initializes the outline inside the given container.
mxOutline.prototype.init = function( container )
Returns true if events are handled.
mxOutline.prototype.isEnabled = function()
Enables or disables event handling.
mxOutline.prototype.setEnabled = function( value )
Enables or disables the zoom handling by showing or hiding the respective handle.
mxOutline.prototype.setZoomEnabled = function( value )
Invokes update and revalidate the outline.
mxOutline.prototype.refresh = function()
Creates the shape used as the sizer.
mxOutline.prototype.createSizer = function()
Returns the size of the source container.
mxOutline.prototype.getSourceContainerSize = function()
Returns the offset for drawing the outline graph.
mxOutline.prototype.getOutlineOffset = function( scale )
Returns the graph bound boxing of the source.
mxOutline.prototype.getSourceGraphBounds = function()
Handles the event by starting a translation or zoom.
mxOutline.prototype.mouseDown = 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.mouseMove = function( sender, me )
Gets the translate for the given mouse event.
mxOutline.prototype.getTranslateForEvent = function( me )
Handles the event by applying the translation or zoom to graph.
mxOutline.prototype.mouseUp = function( sender, me )
Destroy this outline and removes all listeners from source.
mxOutline.prototype.destroy = function()