@progress/kendo-charts/dist/es/map/scroller/draggable.js

Kendo UI platform-independent Charts library

import {
    Class,
    Observable,
    elementOffset,
    eventMap
} from '../../common';

import {
    proxy
} from '../utils';

var extend = Object.assign;

var CHANGE = 'change';

export var TapCapture = (function (Observable) {
    function TapCapture(element, options) {
        Observable.call(this);
        var that = this,
            domElement = element[0] || element;

        that.capture = false;

        if (domElement.addEventListener) {
            eventMap.down.split(' ').forEach(function(event) {
                domElement.addEventListener(event, proxy(that._press, that), true);
            });
            eventMap.up.split(' ').forEach(function(event) {
                domElement.addEventListener(event, proxy(that._release, that), true);
            });
        } else {
            eventMap.down.split(' ').forEach(function(event) {
                domElement.attachEvent(event, proxy(that._press, that));
            });
            eventMap.up.split(' ').forEach(function(event) {
                domElement.attachEvent(event, proxy(that._release, that));
            });
        }

        that.bind([
            'press',
            'release'
        ], options || {});
    }

    if ( Observable ) TapCapture.__proto__ = Observable;
    TapCapture.prototype = Object.create( Observable && Observable.prototype );
    TapCapture.prototype.constructor = TapCapture;

    TapCapture.prototype.captureNext = function captureNext () {
        this.capture = true;
    };

    TapCapture.prototype.cancelCapture = function cancelCapture () {
        this.capture = false;
    };

    TapCapture.prototype._press = function _press (e) {
        var that = this;

        that.trigger('press');

        if (that.capture) {
            e.preventDefault();
        }
    };

    TapCapture.prototype._release = function _release (e) {
        var that = this;

        that.trigger('release');

        if (that.capture) {
            e.preventDefault();
            that.cancelCapture();
        }
    };

    return TapCapture;
}(Observable));

export var PaneDimension = (function (Observable) {
    function PaneDimension(options) {
        Observable.call(this);
        var that = this;
        that.forcedEnabled = false;
        extend(that, options);
        that.scale = 1;

        if (that.horizontal) {
            that.measure = 'offsetWidth';
            that.scrollSize = 'scrollWidth';
            that.axis = 'x';
        } else {
            that.measure = 'offsetHeight';
            that.scrollSize = 'scrollHeight';
            that.axis = 'y';
        }
    }

    if ( Observable ) PaneDimension.__proto__ = Observable;
    PaneDimension.prototype = Object.create( Observable && Observable.prototype );
    PaneDimension.prototype.constructor = PaneDimension;

    PaneDimension.prototype.makeVirtual = function makeVirtual () {
        extend(this, {
            virtual: true,
            forcedEnabled: true,
            _virtualMin: 0,
            _virtualMax: 0
        });
    };

    PaneDimension.prototype.virtualSize = function virtualSize (min, max) {
        if (this._virtualMin !== min || this._virtualMax !== max) {
            this._virtualMin = min;
            this._virtualMax = max;
            this.update();
        }
    };

    PaneDimension.prototype.outOfBounds = function outOfBounds (offset) {
        return offset > this.max || offset < this.min;
    };

    PaneDimension.prototype.forceEnabled = function forceEnabled () {
        this.forcedEnabled = true;
    };

    PaneDimension.prototype.getSize = function getSize () {
        return this.container[this.measure];
    };

    PaneDimension.prototype.getTotal = function getTotal () {
        return this.element[this.scrollSize];
    };

    PaneDimension.prototype.rescale = function rescale (scale) {
        this.scale = scale;
    };

    PaneDimension.prototype.update = function update (silent) {
        var that = this,
            total = that.virtual ? that._virtualMax : that.getTotal(),
            scaledTotal = total * that.scale,
            size = that.getSize();

        if (total === 0 && !that.forcedEnabled) {
            return;
        }

        that.max = that.virtual ? -that._virtualMin : 0;
        that.size = size;
        that.total = scaledTotal;
        that.min = Math.min(that.max, size - scaledTotal);
        that.minScale = size / total;
        that.centerOffset = (scaledTotal - size) / 2;
        that.enabled = that.forcedEnabled || scaledTotal > size;

        if (!silent) {
            that.trigger(CHANGE, that);
        }
    };

    return PaneDimension;
}(Observable));

export var PaneDimensions = (function (Observable) {
    function PaneDimensions(options) {
        Observable.call(this);
        var that = this;

        that.x = new PaneDimension(extend({
            horizontal: true
        }, options));

        that.y = new PaneDimension(extend({
            horizontal: false
        }, options));

        that.container = options.container;
        that.forcedMinScale = options.minScale;
        that.maxScale = options.maxScale || 100;
        that.bind(CHANGE, options);
    }

    if ( Observable ) PaneDimensions.__proto__ = Observable;
    PaneDimensions.prototype = Object.create( Observable && Observable.prototype );
    PaneDimensions.prototype.constructor = PaneDimensions;

    PaneDimensions.prototype.rescale = function rescale (newScale) {
        this.x.rescale(newScale);
        this.y.rescale(newScale);
        this.refresh();
    };

    PaneDimensions.prototype.centerCoordinates = function centerCoordinates () {
        return {
            x: Math.min(0, -this.x.centerOffset),
            y: Math.min(0, -this.y.centerOffset)
        };
    };

    PaneDimensions.prototype.refresh = function refresh () {
        var that = this;
        that.x.update();
        that.y.update();
        that.enabled = that.x.enabled || that.y.enabled;
        that.minScale = that.forcedMinScale || Math.min(that.x.minScale, that.y.minScale);
        that.fitScale = Math.max(that.x.minScale, that.y.minScale);
        that.trigger(CHANGE);
    };

    return PaneDimensions;
}(Observable));

export var PaneAxis = (function (Observable) {
    function PaneAxis(options) {
        Observable.call(this);
        extend(this, options);
    }

    if ( Observable ) PaneAxis.__proto__ = Observable;
    PaneAxis.prototype = Object.create( Observable && Observable.prototype );
    PaneAxis.prototype.constructor = PaneAxis;

    PaneAxis.prototype.outOfBounds = function outOfBounds () {
        return this.dimension.outOfBounds(this.movable[this.axis]);
    };

    PaneAxis.prototype.dragMove = function dragMove (delta) {
        var that = this,
            dimension = that.dimension,
            axis = that.axis,
            movable = that.movable,
            position = movable[axis] + delta;

        if (!dimension.enabled) {
            return;
        }

        var dragDelta = delta;

        if (position < dimension.min && delta < 0 || position > dimension.max && delta > 0) {
            dragDelta *= that.resistance;
        }

        movable.translateAxis(axis, dragDelta);
        that.trigger(CHANGE, that);
    };

    return PaneAxis;
}(Observable));

export var Pane = (function (Class) {
    function Pane(options) {
        Class.call(this);

        var that = this,
            x, y,
            resistance,
            movable;

        extend(that, {
            elastic: true
        }, options);

        resistance = that.elastic ? 0.5 : 0;
        movable = that.movable;

        that.x = x = new PaneAxis({
            axis: 'x',
            dimension: that.dimensions.x,
            resistance: resistance,
            movable: movable
        });

        that.y = y = new PaneAxis({
            axis: 'y',
            dimension: that.dimensions.y,
            resistance: resistance,
            movable: movable
        });

        that.userEvents.bind([
            'press',
            'move',
            'end',
            'gesturestart',
            'gesturechange'
        ], {
            gesturestart: function gesturestart(e) {
                that.gesture = e;

                that.offset = elementOffset(that.dimensions.container);
            },
            press: function press(e) {
                var closestAnchor = e.event.target.closest('a');

                if (closestAnchor && closestAnchor.matches('[data-navigate-on-press=true]')) {
                    e.sender.cancel();
                }
            },
            gesturechange: function gesturechange(e) {
                var previousGesture = that.gesture,
                    previousCenter = previousGesture.center,
                    center = e.center,
                    scaleDelta = e.distance / previousGesture.distance,
                    minScale = that.dimensions.minScale,
                    maxScale = that.dimensions.maxScale,
                    coordinates;
                if (movable.scale <= minScale && scaleDelta < 1) {
                    scaleDelta += (1 - scaleDelta) * 0.8;
                }

                if (movable.scale * scaleDelta >= maxScale) {
                    scaleDelta = maxScale / movable.scale;
                }

                var offsetX = movable.x + that.offset.left,
                    offsetY = movable.y + that.offset.top;
                coordinates = {
                    x: (offsetX - previousCenter.x) * scaleDelta + center.x - offsetX,
                    y: (offsetY - previousCenter.y) * scaleDelta + center.y - offsetY
                };

                movable.scaleWith(scaleDelta);

                x.dragMove(coordinates.x);
                y.dragMove(coordinates.y);

                that.dimensions.rescale(movable.scale);
                that.gesture = e;

                e.preventDefault();
            },
            move: function move(e) {
                if (e.event.target.tagName.match(/textarea|input/i)) {
                    return;
                }

                if (x.dimension.enabled || y.dimension.enabled) {
                    x.dragMove(e.x.delta);
                    y.dragMove(e.y.delta);
                    e.preventDefault();
                } else {
                    e.touch.skip();
                }
            },
            end: function end(e) {
                e.preventDefault();
            }
        });
    }

    if ( Class ) Pane.__proto__ = Class;
    Pane.prototype = Object.create( Class && Class.prototype );
    Pane.prototype.constructor = Pane;

    return Pane;
}(Class));

var translate = function(x, y, scale) {
    return 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + scale + ')';
};

export var Movable = (function (Observable) {
    function Movable(element) {
        Observable.call(this);

        var that = this;

        that.element = element;
        that.element.style.transformOrigin = 'left top';
        that.x = 0;
        that.y = 0;
        that.scale = 1;

        var coordinates = translate(that.x, that.y, that.scale);
        that.element.style.transform = coordinates;

        that._saveCoordinates(coordinates);
    }

    if ( Observable ) Movable.__proto__ = Observable;
    Movable.prototype = Object.create( Observable && Observable.prototype );
    Movable.prototype.constructor = Movable;

    Movable.prototype.translateAxis = function translateAxis (axis, by) {
        this[axis] += by;
        this.refresh();
    };

    Movable.prototype.scaleTo = function scaleTo (scale) {
        this.scale = scale;
        this.refresh();
    };

    Movable.prototype.scaleWith = function scaleWith (scaleDelta) {
        this.scale *= scaleDelta;
        this.refresh();
    };

    Movable.prototype.translate = function translate (coordinates) {
        this.x += coordinates.x;
        this.y += coordinates.y;
        this.refresh();
    };

    Movable.prototype.moveAxis = function moveAxis (axis, value) {
        this[axis] = value;
        this.refresh();
    };

    Movable.prototype.moveTo = function moveTo (coordinates) {
        extend(this, coordinates);
        this.refresh();
    };

    Movable.prototype.refresh = function refresh () {
        var that = this,
            x = that.x,
            y = that.y,
            newCoordinates;

        if (that.round) {
            x = Math.round(x);
            y = Math.round(y);
        }

        newCoordinates = translate(x, y, that.scale);

        if (newCoordinates !== that.coordinates) {
            that.element.style.transform = newCoordinates;

            that._saveCoordinates(newCoordinates);
            that.trigger(CHANGE);
        }
    };

    Movable.prototype._saveCoordinates = function _saveCoordinates (coordinates) {
        this.coordinates = coordinates;
    };

    return Movable;
}(Observable));