Navigator

Navigator is a UI widget that displays a smaller view into a larger diagram.

Learn more about the Navigator plugin.

constructor

constructor(opt: Navigator.Options);

The ui.Navigator constructor accepts the following parameters:

dynamicZoom

dynamicZoom?: boolean;

[optional] Should the visible area in the navigator stretch to contain all of the navigator view rectangle at all times? The default is false, meaning that the navigator view rectangle is allowed to go outside the area visible in the navigator.

height

height?: number;

[optional] The height of the navigator view. The default is 200.

padding

padding?: number;

[optional] The initial padding between the small paper inside the navigator, and the navigator view rectangle edges. The default is 10.

paperConstructor

paperConstructor?: typeof dia.Paper;

[optional] The type of the paper. It defaults to joint.dia.Paper.

This setting is useful if you use a different paper type for rendering graphics in the navigator. In case you inherit from joint.dia.Paper to implement some specific rendering, you can pass the constructor function to this parameter and potentially use the paperOptions parameter to pass additional options to your special paper.

paperOptions

paperOptions?: dia.Paper.Options;

[optional] Options object that will be passed to the internal paper used for rendering graphics in the navigator. The default is {}.

paperScroller

paperScroller: PaperScroller;

The paper scroller. See ui.PaperScroller plugin for more details.

preserveAspectRatio

preserveAspectRatio?: boolean;

[optional] If disabled, the navigator will stretch the content to fit the entire navigator space. It defaults to true.

useContentBBox

useContentBBox?: UseContentBBox;

[optional] An option of type UseContentBBox. When enabled, the navigator only shows the content of the paper rather than the entire scrollable area. An object with a single option can be passed here to calculate the content size from the model { useModelGeometry: true }. It defaults to false.

When used together with the dynamicZoom option, it shows the minimal rectangle containing both the content of the paper and the current content of the navigator view rectangle.

width

width?: number;

[optional] The width of the navigator view. The default is 300.

zoom

zoom?: boolean | PaperScroller.ZoomOptions;

[optional] A boolean or an object of type ui.PaperScroller.ZoomOptions with parameters controlling the zoom functions:

• Notably, zoomOptions.min and zoomOptions.max determine the minimum and the maximum zoom allowed when zooming via dragging the rectangle corner inside the navigator.

The default is { min: 0.5, max: 2 }. Pass a value of false to disable zooming.

zoomOptions

zoomOptions?: PaperScroller.ZoomOptions;

(deprecated) - Use zoom instead.

[optional] An object of type ui.PaperScroller.ZoomOptions with parameters controlling the zoom functions:

• Notably, zoomOptions.min and zoomOptions.max determine the minimum and the maximum zoom allowed when zooming via dragging the rectangle corner inside the navigator.

Methods

freeze()

navigator.freeze(opt?: dia.Paper.FreezeOptions): void;

Freeze the paper of the navigator. In this state, the paper does not automatically re-render upon changes in the graph. This is useful when for instance the navigator is collapsed (not visible on the screen). For more information see paper.freeze().

remove()

navigator.render(): this;

Remove the navigator, and clean up all its registered event handlers. Call this once you do not need the navigator anymore.

render()

navigator.render(): this;

Render the navigator. You should call this method after you have appended the navigator view root HTML element to your container.

unfreeze()

navigator.unfreeze(opt?: dia.Paper.UnfreezeOptions): void;

Unfreeze the paper of the navigator. For more information see paper.unfreeze().

updateCurrentView()

navigator.updateCurrentView(): void;

Updates the navigator's viewport based on the associated paperScroller state. The method is debounced (the invoking is delayed until after 0 milliseconds have elapsed since the last time the method was invoked), and is called automatically when the paperScroller is scrolled or zoomed.

Properties

sourcePaper

sourcePaper: dia.Paper;

The paper used by options.paperScroller.

targetPaper

targetPaper: dia.Paper;

The paper inside the navigator, that is used for rendering the content.

Events

pan:start

Triggered when the user starts panning the viewport.

The handler is passed an evt (the mousedown event).

pan:stop

Triggered when the user stops panning the viewport.

The handler is passed an evt (the mouseup event).

zoom:start

Triggered when the user starts zooming the viewport.

The handler is passed an evt (the mousedown event).

zoom:stop

Triggered when the user stops zooming the viewport.

The handler is passed an evt (the mouseup event).

Types

Options

interface Options extends mvc.ViewOptions<undefined> {
    paperConstructor?: typeof dia.Paper;
    paperOptions?: dia.Paper.Options;
    paperScroller: PaperScroller;
    /**
     * @deprecated use zoom instead
     */
    zoomOptions?: PaperScroller.ZoomOptions;
    zoom?: boolean | PaperScroller.ZoomOptions;
    width?: number;
    height?: number;
    padding?: number;
    useContentBBox?: UseContentBBox;
    dynamicZoom?: boolean;
    preserveAspectRatio?: boolean;
}

UseContentBBox

type UseContentBBox = boolean | { useModelGeometry?: boolean };