Skip to main content

PaperScroller

The plugin implements scrolling, panning, zooming, centering and auto-resizing of Paper content.

To learn more about the plugin, check out the Zoom & Scroll section.

constructor​

constructor(opt?: PaperScroller.Options);

The PaperScroller constructor accepts several parameters:

autoResizePaper​

autoResizePaper?: boolean;

[optional] Is the PaperScroller allowed to automatically resize the Paper in order to ensure that the Paper fits all of its content? The default is false.

Setting this option to true makes it possible to have a fixed (even smaller) size of the Paper; when the user drags an Element outside the original Paper area, the PaperScroller extends the Paper in order to accommodate the Element in its new position.

baseHeight​

baseHeight?: number;

[optional] A number specifying the default height by which the Paper should be extended when paperScroller.options.autoResizePaper is true and the user drags an Element outside of the original Paper area. The Paper's height is used as the default value.

baseWidth​

baseWidth?: number;

[optional] A number specifying the default width by which the Paper should be extended when paperScroller.options.autoResizePaper is true and the user drags an Element outside of the original Paper area. The Paper's width is used as the default value.

borderless​

borderless?: boolean;

[optional] Should the PaperScroller padding be affixed to the Paper itself, instead of the PaperScroller? It is false by default.

If set to true, the Paper inside the PaperScroller is visually extended into the padding area (which would normally be blank), which has the effect of making the Paper's borders visible no more.

contentOptions​

contentOptions?: dia.Paper.FitToContentOptions | ((paperScroller: PaperScroller) => dia.Paper.FitToContentOptions);

[optional] An object or a function adjusting the behavior of the paperScroller.options.autoResizePaper algorithm.

  • object - The object may contain additional parameters that will be mixed in with the calculated ones before calling the paper.fitToContent() function. This is handy if you, for example, want to set the maximum width and height of the Paper via maxWidth and maxHeight:

    const paperScroller = new ui.PaperScroller({
        autoResizePaper: true,
        contentOptions: {
            maxWidth: 3000,
            maxHeight: 3000
        }
    });

  • function - contentOptions may also be specified as a function which is provided with the PaperScroller instance as a parameter, and which is expected to return the content options as an object (see above):

const paperScroller = new ui.PaperScroller({
    paper: paper
    padding: 0,
    contentOptions: function(paperScroller) {
        const visibleArea = paperScroller.getVisibleArea();
        return {
            padding: {
                bottom: visibleArea.height / 2,
                top: visibleArea.height / 2,
                left: visibleArea.width / 2,
                right: visibleArea.width / 2
            },
            allowNewOrigin: 'any'
        };
    }
});

cursor​

cursor?: string;

[optional] A string understandable as a valid CSS cursor property value specifying the default cursor applied when the user's mouse pointer is over the PaperScroller. It defaults to 'default'.

minVisiblePaperSize​

minVisiblePaperSize?: number;

[optional] A number specifying the minimum amount of the paper in px that needs to be visible in each direction when panning brings the user to the edge of the Paper, when the default paperSize.options.padding function is used. Default is 1.

inertia​

inertia?: boolean | InertiaOptions;

[optional] Should panning of the PaperScroller have an inertia effect (where the PaperScroller builds momentum while dragging and continues moving in the same direction for some time after the user stops dragging)? Default is false.

  • boolean - If set to true, the inertia effect is enabled with default options (see below).

  • object - To modify the inertia behavior, you can specify the option as an object with the following property:

    • [optional] friction is a number between 0 and 1 that specifies the rate at which values slow down after the user releases the pointer. It is 0.92 by default.

padding​

padding?: dia.Padding | ((paperScroller: PaperScroller) => dia.Padding);

[optional] The default padding around the Paper content. The option may be specified as a number, an object, or a function.

  • number - Apply identical padding on all sides of the Paper content:

    const paperScroller = new ui.PaperScroller({
        paper: paper,
        padding: 10
    });

  • object - You may specify different padding for each side by providing an object with optional left, right, top and bottom properties. It is not necessary to provide a value for all of these properties - omitted sides be assigned padding of 0:

    const paperScroller = new ui.PaperScroller({
        paper: paper,
        padding: { top: 20, left: 20 }
    });

  • function - The padding may also be specified as a function which is provided with the PaperScroller instance as a parameter, and which is expected to return padding as a number or object (see above):

    const paperScroller = new ui.PaperScroller({
        paper: paper,
        padding: function() { return 10; }
    })

  • undefined - If you do not provide a value for this option, a default function is used, which ensures that the Paper inside the PaperScroller is always pannable all the way to the left, right, top and bottom, while also making sure that there is always at least a fragment of the Paper visible. The function is specified as the following:

    const paperScroller = new ui.PaperScroller({
        paper: paper,
        // Default padding function
        padding: function() {

            // current viewport client dimensions as reported by the browser
            const clientSize = this.getClientSize();
            const minVisibleSize = Math.max(this.options.minVisiblePaperSize, 1) || 1;
            const padding = {};

            padding.left = padding.right = Math.max(clientSize.width - minVisibleSize, 0);
            padding.top = padding.bottom = Math.max(clientSize.height - minVisibleSize, 0);

            return padding;
        }
    });

paper​

paper: dia.Paper

[required] The Paper component to wrap. The PaperScroller will serve as a window into the Paper content, as detailed in the Zoom & Scroll section.

scrollWhileDragging​

scrollWhileDragging?: boolean | ScrollWhileDraggingOptions;

[optional] Should the PaperScroller automatically scroll its viewport when the user drags an element outside of the current viewport? The default is false.

  • boolean - If set to true, default options are used to ensure that the dragged Element stays within the viewport (see below).

  • object - To modify the scrolling behavior, you can specify the option as an object with the following properties (any values you provide get mixed in with the remaining defaults):

    • [optional] interval is a debounce interval in milliseconds between changes in the scrollLeft and scrollTop properties of the PaperScroller. It is 25 by default.
    • [optional] padding is a number in pixels which specifies additional padding to add to the PaperScroller viewport area at which scrolling is triggered. A negative value means that scrolling is triggered when the dragging pointer approaches the viewport boundary from the inside. A value of 0 means that scrolling is triggered when the dragging pointer crosses the viewport boundary. A positive value means that scrolling is triggered when the dragging pointer is that much farther from the viewport boundary. It is -20 by default.
    • [optional] scrollingFunction is a function that translates the distance between the pointer and the viewport boundary into the number of pixels by which to scroll. It is provided with the current distance and evt as parameters. The default function is (distance) => ((distance < 20) ? 5 : 20) - it scrolls slowly while the pointer is within the viewport and goes faster when the pointer leaves the viewport.

Methods​

center()​

paperScroller.center(opt?: { [key: string]: any }): this;

Position the center of the Paper to the center of the PaperScroller viewport.

Accepts an optional opt object, which can have the following properties:

  • [optional] padding is additional padding that reduces the effective size of the PaperScroller viewport, as explained in the Zoom & Scroll Padding section. The padding value is normalized using the util.normalizeSides() function; either a single number may be passed (e.g. padding: 10 applies padding of 10px to all edges), or an object with numeric properties (e.g. padding: { top: 20, horizontal: 10 } applies padding of 20px to the top edge and 10px to the right and left edges). Example:

    paperScroller.center({ padding: { left: 100 }});
paperScroller.center(x: number, y?: number, opt?: { [key: string]: any }): this;

Position the point with provided Paper local coordinates x and y to the center of the PaperScroller viewport. If only one of the coordinates is specified, only center the Paper along the specified dimension and keep the other coordinate unchanged. Examples:

paperScroller.center(100, 200); // center at the point (100,200)
paperScroller.center(100); // center at the point (100,[y of center of visible area])
paperScroller.center(null, 200); // center at the point ([x of center of visible area],200)

Accepts an optional opt object, as defined above. Examples:

paperScroller.center(100, 200, { padding: { left: 100 }});
paperScroller.center(100, null, { padding: { left: 100 }});
paperScroller.center(null, 200, { padding: { left: 100 }});

centerContent()​

paperScroller.centerContent(opt?: { [key: string]: any }): this;

Position the center of Paper content to the center of the PaperScroller viewport.

Accepts an optional opt object, which can have the following properties:

  • [optional] padding is additional padding that reduces the effective size of the PaperScroller viewport, as explained in the Zoom & Scroll Padding section. See paperScroller.center() for details. Example:

    paperScroller.centerContent({ padding: { left: 100 }});

centerElement()​

paperScroller.centerElement(element: dia.Element, opt?: { [key: string]: any }): this;

Position the center of the provided Element to the center of the PaperScroller viewport.

Accepts an optional opt object, which can have the following properties:

  • [optional] padding is additional padding that reduces the effective size of the PaperScroller viewport, as explained in the Zoom & Scroll Padding section. See paperScroller.center() for details. Example:

    paperScroller.centerElement(element, { padding: { left: 100 }});

getVisibleArea()​

paperScroller.getVisibleArea(): g.Rect;

Return the dimensions of the visible area (in Paper local coordinates) as an object with x, y, width and height number properties.

Answers the question What part of the Paper can be seen by the user through the window, taking zooming and panning into account?

Example:

// return elements currenly visible in the paperScroller viewport.
const visibleElements = graph.findModelsInArea(paperScroller.getVisibleArea());

isElementVisible()​

paperScroller.isElementVisible(element: dia.Element, opt?: { [key: string]: any }): boolean;

Return true if the specified Element is visible in the current PaperScroller viewport. Return false otherwise.

Accepts an optional opt object, which can have the following properties:

  • [optional] strict is a boolean specifying whether complete visibility within the viewport is required (true). By default, the function is non-strict (false), i.e. reporting also all Elements which are partially visible within the viewport. Example:

    // Scroll to an element only if it is not completely in the viewport.
    if (!paperScroller.isElementVisible(rect, { strict: true })) {
        paperScroller.scrollToElement(rect);
    }

isPointVisible()​

paperScroller.isPointVisible(point: dia.Point): boolean;

Return true if the point (e.g. { x: 100, y: 200 }) is visible in the current PaperScroller viewport. Return false otherwise.

lock()​

paperScroller.lock(): this;

Lock the current viewport by disabling user scrolling.

positionContent()​

paperScroller.positionContent(positionName: string, opt?: { [key: string]: any }): this;

Align Paper content inside the PaperScroller viewport as specified by positionName ('top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left' or 'center'). The appropriate point of the Paper content area is positioned to the corresponding point inside the PaperScroller viewport.

For example, when positionName is 'bottom-left', the bottom-left corner of Paper content area is positioned to the bottom-left corner of the PaperScroller viewport, but inside requested PaperScroller paddings if those are specified (see below):

paperScroller.positionContent('bottom-left');

Accepts an optional opt object, which can have the following properties:

  • [optional] padding is additional padding that reduces the effective size of the PaperScroller viewport, as explained in the Zoom & Scroll Padding section. See paperScroller.center() for details. Example:

    paperScroller.positionContent('bottom-left', { padding: { horizontal: 20, vertical: 10 }});

positionElement()​

paperScroller.positionElement(element: dia.Element, positionName: string, opt?: { [key: string]: any }): this;

Align provided Element inside the PaperScroller viewport as specified by positionName ('top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left' or 'center'). The appropriate point of the Element's bbox is positioned to the corresponding point inside the PaperScroller viewport.

For example, when positionName is 'bottom-left', the bottom-left corner of the Element's bbox is positioned to the bottom-left corner of the PaperScroller viewport, but inside requested PaperScroller paddings if those are specified (see below):

paperScroller.positionElement(element, 'bottom-left');

Accepts an optional opt object, which can have the following properties:

  • [optional] padding is additional padding that reduces the effective size of the PaperScroller viewport, as explained in the Zoom & Scroll Padding section. See paperScroller.center() for details. Example:

    paperScroller.positionElement(element, 'bottom-left', { padding: { horizontal: 20, vertical: 10 }});

positionPoint()​

paperScroller.positionPoint(point: g.Point, x: number | string, y: number | string, opt?: { [key: string]: any }): this;

Position a custom point on the Paper (in local coordinates) to the point (x,y) in PaperScroller viewport (in client coordinates). This is useful when you need complete control over what to position where.

Percentage values are allowed for x and y; the percentages are relative to the PaperScroller area, but only the area inside requested PaperScroller paddings if those are specified (see below). Negative values/percentages cause the algorithm to look from opposite edge (i.e. from right/bottom).

As such, the following two examples are equivalent - they both position the origin (top-left point) of the Paper to the origin (top-left point) of the PaperScroller viewport:

paperScroller.positionPoint(new g.Point(0,0), 0, 0);
paperScroller.positionPoint(new g.Point(0,0), '-100%', '-100%');

The following example positions point to the point 25% of the way between the right and the left edge of the PaperScroller viewport and 40px above the bottom edge:

paperScroller.positionPoint(point, '25%', -40);

Accepts an optional opt object, which can have the following properties:

  • [optional] padding is additional padding that reduces the effective size of the PaperScroller viewport, as explained in the Zoom & Scroll Padding section. See paperScroller.center() for details. The following example positions point to the point 30px away from right edge of the PaperScroller viewport (10px + 20px padding) and 20px above bottom edge (-(10px + 10px padding)):

    paperScroller.positionPoint(point, 10, -10, { padding: { horizontal: 20, vertical: 10 }})

positionRect()​

paperScroller.positionRect(rect: g.Rect, positionName: string, opt?: { [key: string]: any }): this;

Align a custom rectangle inside the PaperScroller viewport as specified by positionName ('top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left' or 'center'). The appropriate point of the rectangle is positioned to the corresponding point inside the PaperScroller viewport.

For example, when positionName is 'bottom-left', the bottom-left corner of the rectangle is positioned to the bottom-left corner of the PaperScroller viewport, but inside requested PaperScroller paddings if those are specified (see below):

paperScroller.positionElement(element1.getBBox().union(element2.getBBox()), 'bottom-left');

Accepts an optional opt object, which can have the following properties:

  • [optional] padding is additional padding that reduces the effective size of the PaperScroller viewport, as explained in the Zoom & Scroll Padding section. See paperScroller.center() for details. Example:

    paperScroller.positionElement(path.bbox(), 'bottom-left', { padding: { horizontal: 20, vertical: 10 }});

removeTransition()​

paperScroller.removeTransition(): this;

Remove any ongoing PaperScroller transition and prevent the associated opt.onTransitionEnd callback from being fired.

render()​

paperScroller.render(): this;

Render the PaperScroller. This creates a paperScroller.el HTML element which can be added to your HTML, as explained in the Zoom & Scroll section.

scroll()​

paperScroller.scroll(x: number, y?: number, opt?: PaperScroller.ScrollOptions): void;

Try to scroll the PaperScroller so that the position (x,y) on the Paper (in local coordinates) is at the center of the PaperScroller viewport. If only one of the coordinates is specified, only try to scroll the Paper along the specified dimension and keep the other coordinate unchanged. Examples:

paperScroller.scroll(100, 200); // scroll to the point (100,200)
paperScroller.scroll(100); // scroll to the point (100,[current y coordinate of center of visible area])
paperScroller.scroll(null, 200); // center at the point ([current x coordinate of center of visible area],200)

Accepts an optional opt object, which can have the following properties:

  • [optional] animation can be a boolean or an object specifying that the scrolling should be animated:

    info

    Animated transitions are better supported with transition functions, such as paperScroller.transitionToPoint().

    • boolean - If set to true, scrolling is animated using default options (see below).

    • object - To modify the scrolling animation behavior, you can specify the property as an object with the following properties (any values you provide get mixed in with the remaining defaults):

      • [optional] complete is a callback function called when the animation is complete. It is undefined by default.

      • [optional] duration is a number which specifies the duration of the animation in milliseconds. It is 400 by default.

      • [optional] timingFunction is a callback function which is called on every frame of the animation. It receives the time progress of the animation (t), represented as a number between 0 and 1, as its first argument. This function is responsible for computing and returning the current step of the animation based on the provided progress value. By default, it is specified as the following:

        function swing(t) {
            if (t <= 0) return 0;
            if (t >= 1) return 1;

            return 0.5 - Math.cos(t * Math.PI) / 2;
        }

    Examples:

    paperScroller.scroll(100, 200, { animation: { duration: 400 }});
    paperScroller.scroll(100, null, { animation: { duration: 200, timingFunction: (t) => t }});
    paperScroller.scroll(null, 200, { animation: { duration: 600 }});

scrollToContent()​

paperScroller.scrollToContent(opt?: PaperScroller.ScrollOptions): void;

Try to scroll the PaperScroller so that the center of Paper content is at the center of the PaperScroller viewport.

Accepts an optional opt object, which can have the following properties:

  • [optional] animation can be a boolean or an object specifying that the scrolling should be animated. See paperScroller.scroll() for details. Example:

    paperScroller.scrollToContent({ animation: { duration: 600 }});

scrollToElement()​

paperScroller.scrollToElement(element: dia.Element, opt?: PaperScroller.ScrollOptions): void;

Try to scroll the PaperScroller so that the center of the provided Element is at the center of the PaperScroller viewport.

Accepts an optional opt object, which can have the following properties:

  • [optional] animation can be a boolean or an object specifying that the scrolling should be animated. See paperScroller.scroll() for details. Example:

    paperScroller.scrollToElement(element, { animation: { duration: 600 }});

setCursor()​

paperScroller.setCursor(cursor: string): this;

Set the cursor applied when the user's mouse pointer is over the PaperScroller.

startPanning()​

paperScroller.startPanning(evt: dia.Event): void;

Initiate panning of the Paper, as shown in the Zoom & Scroll Panning section. Expects to receive a mousedown or touchstart Document event as evt.

Automatically delegates mousemove and touchmove Document events to implement panning via internal logic. Also automatically delegates mouseup, touchend and touchcancel Document events to stop panning via internal logic.

transitionToPoint()​

paperScroller.transitionToPoint(x: number, y: number, opt?: { [key: string]: any }): this;

Pan and optionally zoom the PaperScroller to a given point (x, y) on the Paper (in local coordinates).

Accepts an optional opt object, which can have the following properties:

  • [optional] scale is the zoom level to reach at the end of the transition. It defaults to the current PaperScroller zoom level (i.e. no change).
  • [optional] duration is a string representing the number of seconds or milliseconds that the transition animation should take to complete, e.g. '500ms' or '2s'. It defaults to '1s'.
  • [optional] delay is a string representing the amount of time to wait before a transition starts, in the same format as duration. It defaults to '0s' (no delay).
  • [optional] timingFunction is a string representing the timing function used to calculate the intermediate pan positions and zoom values. For a list of available values, visit the CSS transition-timing-function documentation. It defaults to 'ease'.
  • [optional] onTransitionEnd is a callback function fired when the transition ends, with transitionend event as its first parameter.

Examples:

// Move paper point (x=100, y=100) to the center of the viewport.
paperScroller.transitionToPoint(100, 100);
// Move and scale paper, so the point { x: 100, y: 100 } will appear in the center of the viewport.
paperScroller.transitionToPoint(100, 100, { scale: 2 });
// Move the the center of the `element` to the center of the viewport.
paperScroller.transitionToPoint(element.getBBox().center(), {
    duration: '500ms',
    onTransitionEnd: function(transitionEvent) {
        // do something when the animation ends
    }
})
paperScroller.transitionToPoint(point: g.Point, opt?: { [key: string]: any }): this;

Pan and optionally zoom the PaperScroller to a given point on the Paper (in local coordinates).

Accepts an optional opt object, as defined above.

transitionToRect()​

paperScroller.transitionToRect(rect: dia.BBox, opt?: PaperScroller.TransitionToRectOptions): this;

Pan and zoom the PaperScroller over a specific period so that a given rectangular area (in Paper local coordinates) ends up entirely visible in the PaperScroller viewport at the end of the transition. The rectangular area is an object with x, y, width and height number properties.

Accepts an optional opt object, which can have the following properties (all properties from the paperScroller.transitionToPoint() function except scale plus additional properties):

  • [optional] duration (see paperScroller.transitionToPoint())
  • [optional] delay (see paperScroller.transitionToPoint())
  • [optional] timingFunction (see paperScroller.transitionToPoint())
  • [optional] onTransitionEnd (see paperScroller.transitionToPoint())
  • [optional] center is an object with x and y properties, which defines the point to be in the center of the viewport when the transition ends. By default, the center of the provided rectangular area is used.
  • [optional] visibility is a number to change the percentage coverage of the viewport. The rectangular area covers 100% of the viewport by default (i.e. { visibility: 1 }). For instance, 80% coverage could be set with { visibility: .8 }.
  • [optional] minScale is a number to make the resulting scale always greater than or equal to minScale value.
  • [optional] maxScale is a number to make the resulting scale always less than or equal to maxScale value.
  • [optional] scaleGrid is a number to make the resulting scale the largest multiple of scaleGrid value less than or equal to the calculated scale.

Examples:

// Zoom the paperScroller so the given area covers 90% of the viewport.
// Also do not let the paperScroller exceed the zoom level 3.
paperScroller.transitionToRect({
    x: 100,
    y: 100
    width: 200,
    height: 200
}, {
    visibility: 0.9,
    maxScale: 3,
    onTransitionEnd: function(transitionEvent) {
        // do something when the animation ends
    }
});
// Zoom the paperScroller in a way the elements `el1`, `el2`, `el3` cover the entire viewport
// and the center of the `el1` moves to the center of the viewport.
const rect = graph.getCellsBBox([el1, el2, el3]);
paperScroller.transitionToRect(rect, {
    duration: '500ms',
    center: el1.getBBox().center()
});

unlock()​

paperScroller.unlock(): this;

Enable user scrolling if previously locked.

zoom()​

paperScroller.zoom(): number;

Return the current zoom level of the Paper. Technically speaking, the zoom level is the scaling factor (sx) of the Paper's SVGElement.

paperScroller.zoom(value: number, opt?: PaperScroller.ZoomOptions): this;

Increase/decrease the scaling factor of the Paper by the provided value. A positive value increases the scaling factor, which causes the Paper to be zoomed in. A negative value decreases the scaling factor, which causes the Paper to be zoomed out.

Accepts an optional opt object, which can have the following properties:

  • [optional] min and max are numbers which cap the range of possible scaling factors. The scaling factor cannot be decreased below min (if provided), nor increased above max (if provided). These options are often useful in practice, e.g. to restrict the range of UI buttons bound to the PaperScroller's zooming operations:

    document.getElementById('zoom-in').addEventListener('click', () => {
        paperScroller.zoom(0.2, { max: 4 });
    });

    document.getElementById('zoom-out').addEventListener('click', () => {
        paperScroller.zoom(-0.2, { min: 0.2 });
    });

  • [optional] ox and oy are numbers (in px) which translate the origin of the zoom. By default, the origin is the center of the PaperScroller viewport. Example of using the current coordinates of user pointer in a blank:mousewheel Paper event handler:

    paper.on('blank:mousewheel', (evt, ox, oy, delta) => {
        evt.preventDefault();
        paperScroller.zoom(delta * 0.2, { min: 0.4, max: 3, grid: 0.2, ox, oy });
    });

  • [optional] grid is a number specifying the rounding of the final scaling factor. When a value is specified for this option, the calculated scaling factor is rounded to the closet multiple of the grid value.

  • [optional] absolute is a boolean switching the behavior of the scaling factor. When true, the scaling factor is set directly to the provided value (instead of being treated as a relative value). The default is false. Note that the constraints imposed by other options (min, max, and grid) are still in effect when this option is enabled.

zoomToRect()​

paperScroller.zoomToRect(rect: dia.BBox, opt?: dia.Paper.ScaleContentOptions): this;

Zoom and reposition the Paper so that the area defined by rect (in Paper local coordinates) fits into the PaperScroller viewport. The rectangular area is an object with x, y, width and height number properties.

For a list of available options, refer to paper.transformToFitContent() documentation.

zoomToFit()​

paperScroller.zoomToFit(opt?: dia.Paper.ScaleContentOptions): this;

Zoom the Paper so that all of its content fits into the PaperScroller viewport.

For a list of available options, refer to paper.transformToFitContent() documentation.

Events​

The plugin fires the following events:

pan:start​

Triggered when the user starts panning.

paperScroller.on('pan:start', (
    evt: dia.Event
) => {
    // panning has started
});
  • evt is a mouse event object.

pan:stop​

Triggered when the user stops panning.

paperScroller.on('pan:stop', (
    evt: dia.Event
) => {
    // panning has stopped
});
  • evt is a mouse event object.

scroll​

Triggered when the paper has been scrolled.

paperScroller.on('scroll', (
    evt: dia.Event
) => {
    // paper was scrolled
});
  • evt is a scroll event object.

Example usage:

paperScroller.on('scroll', function(evt) {
    console.log('The visible area has been changed:', this.getVisibleArea());
});

Types​

The plugin uses the following types:

InertiaOptions​

interface InertiaOptions {
    friction?: number;
}

Options​

interface Options extends mvc.ViewOptions<undefined> {
    paper: dia.Paper;
    padding?: dia.Padding | ((paperScroller: PaperScroller) => dia.Padding);
    minVisiblePaperSize?: number;
    autoResizePaper?: boolean;
    baseWidth?: number;
    baseHeight?: number;
    contentOptions?: dia.Paper.FitToContentOptions | ((paperScroller: PaperScroller) => dia.Paper.FitToContentOptions);
    cursor?: string;
    scrollWhileDragging?: boolean | ScrollWhileDraggingOptions;
    inertia?: boolean | InertiaOptions;
    borderless?: boolean;
}

ScrollAnimationOptions​

interface ScrollAnimationOptions {
    duration?: number;
    timingFunction?: util.timing.TimingFunction;
    complete?: () => void;
}

ScrollOptions​

interface ScrollOptions {
    animation?: boolean | ScrollAnimationOptions;
    [key: string]: any;
}

ScrollWhileDraggingOptions​

type ScrollWhileDraggingOptions = {
    interval?: number;
    padding?: dia.Padding;
    scrollingFunction?: (distance: number, evt: dia.Event) => number;
};

TransitionToRectOptions​

interface TransitionToRectOptions {
    maxScale?: number;
    minScale?: number;
    scaleGrid?: number;
    visibility?: number;
    center?: dia.Point;
    [key: string]: any;
}

ZoomOptions​

interface ZoomOptions {
    absolute?: boolean;
    grid?: number;
    max?: number;
    min?: number;
    ox?: number;
    oy?: number;
}

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub