IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity
895ec55a46
iwmlib/lib/3rdparty/pixi-viewport.js

3466 lines
136 KiB
JavaScript
Raw Normal View History

Added Scrollview.
2019-05-14 13:56:05 +02:00
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var utils = require('./utils');
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(Bounce, _Plugin);
/**
* @private
* @param {Viewport} parent
* @param {object} [options]
* @param {string} [options.sides=all] all, horizontal, vertical, or combination of top, bottom, right, left (e.g., 'top-bottom-right')
* @param {number} [options.friction=0.5] friction to apply to decelerate if active
* @param {number} [options.time=150] time in ms to finish bounce
* @param {string|function} [ease=easeInOutSine] ease function or name (see http://easings.net/ for supported names)
* @param {string} [options.underflow=center] (top/bottom/center and left/right/center, or center) where to place world if too small for screen
* @fires bounce-start-x
* @fires bounce.end-x
* @fires bounce-start-y
* @fires bounce-end-y
*/
function Bounce(parent, options) {
_classCallCheck(this, Bounce);
var _this = _possibleConstructorReturn(this, (Bounce.__proto__ || Object.getPrototypeOf(Bounce)).call(this, parent));
options = options || {};
_this.time = options.time || 150;
_this.ease = utils.ease(options.ease, 'easeInOutSine');
_this.friction = options.friction || 0.5;
options.sides = options.sides || 'all';
if (options.sides) {
if (options.sides === 'all') {
_this.top = _this.bottom = _this.left = _this.right = true;
} else if (options.sides === 'horizontal') {
_this.right = _this.left = true;
} else if (options.sides === 'vertical') {
_this.top = _this.bottom = true;
} else {
_this.top = options.sides.indexOf('top') !== -1;
_this.bottom = options.sides.indexOf('bottom') !== -1;
_this.left = options.sides.indexOf('left') !== -1;
_this.right = options.sides.indexOf('right') !== -1;
}
}
_this.parseUnderflow(options.underflow || 'center');
_this.last = {};
return _this;
}
_createClass(Bounce, [{
key: 'parseUnderflow',
value: function parseUnderflow(clamp) {
clamp = clamp.toLowerCase();
if (clamp === 'center') {
this.underflowX = 0;
this.underflowY = 0;
} else {
this.underflowX = clamp.indexOf('left') !== -1 ? -1 : clamp.indexOf('right') !== -1 ? 1 : 0;
this.underflowY = clamp.indexOf('top') !== -1 ? -1 : clamp.indexOf('bottom') !== -1 ? 1 : 0;
}
}
}, {
key: 'down',
value: function down() {
this.toX = this.toY = null;
}
}, {
key: 'up',
value: function up() {
this.bounce();
}
}, {
key: 'update',
value: function update(elapsed) {
if (this.paused) {
return;
}
this.bounce();
if (this.toX) {
var toX = this.toX;
toX.time += elapsed;
this.parent.emit('moved', { viewport: this.parent, type: 'bounce-x' });
if (toX.time >= this.time) {
this.parent.x = toX.end;
this.toX = null;
this.parent.emit('bounce-x-end', this.parent);
} else {
this.parent.x = this.ease(toX.time, toX.start, toX.delta, this.time);
}
this.parent.dirty = true;
}
if (this.toY) {
var toY = this.toY;
toY.time += elapsed;
this.parent.emit('moved', { viewport: this.parent, type: 'bounce-y' });
if (toY.time >= this.time) {
this.parent.y = toY.end;
this.toY = null;
this.parent.emit('bounce-y-end', this.parent);
} else {
this.parent.y = this.ease(toY.time, toY.start, toY.delta, this.time);
}
this.parent.dirty = true;
}
}
}, {
key: 'calcUnderflowX',
value: function calcUnderflowX() {
var x = void 0;
switch (this.underflowX) {
case -1:
x = 0;
break;
case 1:
x = this.parent.screenWidth - this.parent.screenWorldWidth;
break;
default:
x = (this.parent.screenWidth - this.parent.screenWorldWidth) / 2;
}
return x;
}
}, {
key: 'calcUnderflowY',
value: function calcUnderflowY() {
var y = void 0;
switch (this.underflowY) {
case -1:
y = 0;
break;
case 1:
y = this.parent.screenHeight - this.parent.screenWorldHeight;
break;
default:
y = (this.parent.screenHeight - this.parent.screenWorldHeight) / 2;
}
return y;
}
}, {
key: 'bounce',
value: function bounce() {
if (this.paused) {
return;
}
var oob = void 0;
var decelerate = this.parent.plugins['decelerate'];
if (decelerate && (decelerate.x || decelerate.y)) {
if (decelerate.x && decelerate.percentChangeX === decelerate.friction || decelerate.y && decelerate.percentChangeY === decelerate.friction) {
oob = this.parent.OOB();
if (oob.left && this.left || oob.right && this.right) {
decelerate.percentChangeX = this.friction;
}
if (oob.top && this.top || oob.bottom && this.bottom) {
decelerate.percentChangeY = this.friction;
}
}
}
var drag = this.parent.plugins['drag'] || {};
var pinch = this.parent.plugins['pinch'] || {};
decelerate = decelerate || {};
if (!drag.active && !pinch.active && (!this.toX || !this.toY) && (!decelerate.x || !decelerate.y)) {
oob = oob || this.parent.OOB();
var point = oob.cornerPoint;
if (!this.toX && !decelerate.x) {
var x = null;
if (oob.left && this.left) {
x = this.parent.screenWorldWidth < this.parent.screenWidth ? this.calcUnderflowX() : 0;
} else if (oob.right && this.right) {
x = this.parent.screenWorldWidth < this.parent.screenWidth ? this.calcUnderflowX() : -point.x;
}
if (x !== null && this.parent.x !== x) {
this.toX = { time: 0, start: this.parent.x, delta: x - this.parent.x, end: x };
this.parent.emit('bounce-x-start', this.parent);
}
}
if (!this.toY && !decelerate.y) {
var y = null;
if (oob.top && this.top) {
y = this.parent.screenWorldHeight < this.parent.screenHeight ? this.calcUnderflowY() : 0;
} else if (oob.bottom && this.bottom) {
y = this.parent.screenWorldHeight < this.parent.screenHeight ? this.calcUnderflowY() : -point.y;
}
if (y !== null && this.parent.y !== y) {
this.toY = { time: 0, start: this.parent.y, delta: y - this.parent.y, end: y };
this.parent.emit('bounce-y-start', this.parent);
}
}
}
}
}, {
key: 'reset',
value: function reset() {
this.toX = this.toY = null;
}
}]);
return Bounce;
}(Plugin);
},{"./plugin":9,"./utils":12}],2:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(ClampZoom, _Plugin);
/**
* @private
* @param {object} [options]
* @param {number} [options.minWidth] minimum width
* @param {number} [options.minHeight] minimum height
* @param {number} [options.maxWidth] maximum width
* @param {number} [options.maxHeight] maximum height
*/
function ClampZoom(parent, options) {
_classCallCheck(this, ClampZoom);
var _this = _possibleConstructorReturn(this, (ClampZoom.__proto__ || Object.getPrototypeOf(ClampZoom)).call(this, parent));
_this.minWidth = options.minWidth;
_this.minHeight = options.minHeight;
_this.maxWidth = options.maxWidth;
_this.maxHeight = options.maxHeight;
return _this;
}
_createClass(ClampZoom, [{
key: 'resize',
value: function resize() {
this.clamp();
}
}, {
key: 'clamp',
value: function clamp() {
if (this.paused) {
return;
}
var width = this.parent.worldScreenWidth;
var height = this.parent.worldScreenHeight;
if (this.minWidth && width < this.minWidth) {
this.parent.fitWidth(this.minWidth);
width = this.parent.worldScreenWidth;
height = this.parent.worldScreenHeight;
this.parent.emit('zoomed', { viewport: this.parent, type: 'clamp-zoom' });
}
if (this.maxWidth && width > this.maxWidth) {
this.parent.fitWidth(this.maxWidth);
width = this.parent.worldScreenWidth;
height = this.parent.worldScreenHeight;
this.parent.emit('zoomed', { viewport: this.parent, type: 'clamp-zoom' });
}
if (this.minHeight && height < this.minHeight) {
this.parent.fitHeight(this.minHeight);
width = this.parent.worldScreenWidth;
height = this.parent.worldScreenHeight;
this.parent.emit('zoomed', { viewport: this.parent, type: 'clamp-zoom' });
}
if (this.maxHeight && height > this.maxHeight) {
this.parent.fitHeight(this.maxHeight);
this.parent.emit('zoomed', { viewport: this.parent, type: 'clamp-zoom' });
}
}
}]);
return ClampZoom;
}(Plugin);
},{"./plugin":9}],3:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Plugin = require('./plugin');
var utils = require('./utils');
module.exports = function (_Plugin) {
_inherits(clamp, _Plugin);
/**
* @private
* @param {object} options
* @param {(number|boolean)} [options.left] clamp left; true=0
* @param {(number|boolean)} [options.right] clamp right; true=viewport.worldWidth
* @param {(number|boolean)} [options.top] clamp top; true=0
* @param {(number|boolean)} [options.bottom] clamp bottom; true=viewport.worldHeight
* @param {string} [options.direction] (all, x, or y) using clamps of [0, viewport.worldWidth/viewport.worldHeight]; replaces left/right/top/bottom if set
* @param {string} [options.underflow=center] (top/bottom/center and left/right/center, or center) where to place world if too small for screen
*/
function clamp(parent, options) {
_classCallCheck(this, clamp);
options = options || {};
var _this = _possibleConstructorReturn(this, (clamp.__proto__ || Object.getPrototypeOf(clamp)).call(this, parent));
if (typeof options.direction === 'undefined') {
_this.left = utils.defaults(options.left, null);
_this.right = utils.defaults(options.right, null);
_this.top = utils.defaults(options.top, null);
_this.bottom = utils.defaults(options.bottom, null);
} else {
_this.left = options.direction === 'x' || options.direction === 'all';
_this.right = options.direction === 'x' || options.direction === 'all';
_this.top = options.direction === 'y' || options.direction === 'all';
_this.bottom = options.direction === 'y' || options.direction === 'all';
}
_this.parseUnderflow(options.underflow || 'center');
_this.move();
return _this;
}
_createClass(clamp, [{
key: 'parseUnderflow',
value: function parseUnderflow(clamp) {
clamp = clamp.toLowerCase();
if (clamp === 'center') {
this.underflowX = 0;
this.underflowY = 0;
} else {
this.underflowX = clamp.indexOf('left') !== -1 ? -1 : clamp.indexOf('right') !== -1 ? 1 : 0;
this.underflowY = clamp.indexOf('top') !== -1 ? -1 : clamp.indexOf('bottom') !== -1 ? 1 : 0;
}
}
}, {
key: 'move',
value: function move() {
this.update();
}
}, {
key: 'update',
value: function update() {
if (this.paused) {
return;
}
var decelerate = this.parent.plugins['decelerate'] || {};
if (this.left !== null || this.right !== null) {
var moved = void 0;
if (this.parent.screenWorldWidth < this.parent.screenWidth) {
switch (this.underflowX) {
case -1:
if (this.parent.x !== 0) {
this.parent.x = 0;
moved = true;
}
break;
case 1:
if (this.parent.x !== this.parent.screenWidth - this.parent.screenWorldWidth) {
this.parent.x = this.parent.screenWidth - this.parent.screenWorldWidth;
moved = true;
}
break;
default:
if (this.parent.x !== (this.parent.screenWidth - this.parent.screenWorldWidth) / 2) {
this.parent.x = (this.parent.screenWidth - this.parent.screenWorldWidth) / 2;
moved = true;
}
}
} else {
if (this.left !== null) {
if (this.parent.left < (this.left === true ? 0 : this.left)) {
this.parent.x = -(this.left === true ? 0 : this.left) * this.parent.scale.x;
decelerate.x = 0;
moved = true;
}
}
if (this.right !== null) {
if (this.parent.right > (this.right === true ? this.parent.worldWidth : this.right)) {
this.parent.x = -(this.right === true ? this.parent.worldWidth : this.right) * this.parent.scale.x + this.parent.screenWidth;
decelerate.x = 0;
moved = true;
}
}
}
if (moved) {
this.parent.emit('moved', { viewport: this.parent, type: 'clamp-x' });
}
}
if (this.top !== null || this.bottom !== null) {
var _moved = void 0;
if (this.parent.screenWorldHeight < this.parent.screenHeight) {
switch (this.underflowY) {
case -1:
if (this.parent.y !== 0) {
this.parent.y = 0;
_moved = true;
}
break;
case 1:
if (this.parent.y !== this.parent.screenHeight - this.parent.screenWorldHeight) {
this.parent.y = this.parent.screenHeight - this.parent.screenWorldHeight;
_moved = true;
}
break;
default:
if (this.parent.y !== (this.parent.screenHeight - this.parent.screenWorldHeight) / 2) {
this.parent.y = (this.parent.screenHeight - this.parent.screenWorldHeight) / 2;
_moved = true;
}
}
} else {
if (this.top !== null) {
if (this.parent.top < (this.top === true ? 0 : this.top)) {
this.parent.y = -(this.top === true ? 0 : this.top) * this.parent.scale.y;
decelerate.y = 0;
_moved = true;
}
}
if (this.bottom !== null) {
if (this.parent.bottom > (this.bottom === true ? this.parent.worldHeight : this.bottom)) {
this.parent.y = -(this.bottom === true ? this.parent.worldHeight : this.bottom) * this.parent.scale.y + this.parent.screenHeight;
decelerate.y = 0;
_moved = true;
}
}
}
if (_moved) {
this.parent.emit('moved', { viewport: this.parent, type: 'clamp-y' });
}
}
}
}]);
return clamp;
}(Plugin);
},{"./plugin":9,"./utils":12}],4:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var utils = require('./utils');
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(Decelerate, _Plugin);
/**
* @private
* @param {Viewport} parent
* @param {object} [options]
* @param {number} [options.friction=0.95] percent to decelerate after movement
* @param {number} [options.bounce=0.8] percent to decelerate when past boundaries (only applicable when viewport.bounce() is active)
* @param {number} [options.minSpeed=0.01] minimum velocity before stopping/reversing acceleration
*/
function Decelerate(parent, options) {
_classCallCheck(this, Decelerate);
var _this = _possibleConstructorReturn(this, (Decelerate.__proto__ || Object.getPrototypeOf(Decelerate)).call(this, parent));
options = options || {};
_this.friction = options.friction || 0.95;
_this.bounce = options.bounce || 0.5;
_this.minSpeed = typeof options.minSpeed !== 'undefined' ? options.minSpeed : 0.01;
_this.saved = [];
return _this;
}
_createClass(Decelerate, [{
key: 'down',
value: function down() {
this.saved = [];
this.x = this.y = false;
}
}, {
key: 'move',
value: function move() {
if (this.paused) {
return;
}
var count = this.parent.countDownPointers();
if (count === 1 || count > 1 && !this.parent.plugins['pinch']) {
this.saved.push({ x: this.parent.x, y: this.parent.y, time: performance.now() });
if (this.saved.length > 60) {
this.saved.splice(0, 30);
}
}
}
}, {
key: 'up',
value: function up() {
if (this.parent.countDownPointers() === 0 && this.saved.length) {
var now = performance.now();
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = this.saved[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var save = _step.value;
if (save.time >= now - 100) {
var time = now - save.time;
this.x = (this.parent.x - save.x) / time;
this.y = (this.parent.y - save.y) / time;
this.percentChangeX = this.percentChangeY = this.friction;
break;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
}
/**
* manually activate plugin
* @param {object} options
* @param {number} [options.x]
* @param {number} [options.y]
*/
}, {
key: 'activate',
value: function activate(options) {
options = options || {};
if (typeof options.x !== 'undefined') {
this.x = options.x;
this.percentChangeX = this.friction;
}
if (typeof options.y !== 'undefined') {
this.y = options.y;
this.percentChangeY = this.friction;
}
}
}, {
key: 'update',
value: function update(elapsed) {
if (this.paused) {
return;
}
var moved = void 0;
if (this.x) {
this.parent.x += this.x * elapsed;
this.x *= this.percentChangeX;
if (Math.abs(this.x) < this.minSpeed) {
this.x = 0;
}
moved = true;
}
if (this.y) {
this.parent.y += this.y * elapsed;
this.y *= this.percentChangeY;
if (Math.abs(this.y) < this.minSpeed) {
this.y = 0;
}
moved = true;
}
if (moved) {
this.parent.dirty = true;
this.parent.emit('moved', { viewport: this.parent, type: 'decelerate' });
}
}
}, {
key: 'reset',
value: function reset() {
this.x = this.y = null;
}
}]);
return Decelerate;
}(Plugin);
},{"./plugin":9,"./utils":12}],5:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var utils = require('./utils');
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(Drag, _Plugin);
/**
* enable one-finger touch to drag
* @private
* @param {Viewport} parent
* @param {object} [options]
* @param {string} [options.direction=all] direction to drag (all, x, or y)
* @param {boolean} [options.wheel=true] use wheel to scroll in y direction (unless wheel plugin is active)
* @param {number} [options.wheelScroll=1] number of pixels to scroll with each wheel spin
* @param {boolean} [options.reverse] reverse the direction of the wheel scroll
* @param {boolean|string} [options.clampWheel] (true, x, or y) clamp wheel (to avoid weird bounce with mouse wheel)
* @param {string} [options.underflow=center] (top/bottom/center and left/right/center, or center) where to place world if too small for screen
*/
function Drag(parent, options) {
_classCallCheck(this, Drag);
options = options || {};
var _this = _possibleConstructorReturn(this, (Drag.__proto__ || Object.getPrototypeOf(Drag)).call(this, parent));
_this.moved = false;
_this.wheelActive = utils.defaults(options.wheel, true);
_this.wheelScroll = options.wheelScroll || 1;
_this.reverse = options.reverse ? 1 : -1;
_this.clampWheel = options.clampWheel;
_this.xDirection = !options.direction || options.direction === 'all' || options.direction === 'x';
_this.yDirection = !options.direction || options.direction === 'all' || options.direction === 'y';
_this.parseUnderflow(options.underflow || 'center');
return _this;
}
_createClass(Drag, [{
key: 'parseUnderflow',
value: function parseUnderflow(clamp) {
clamp = clamp.toLowerCase();
if (clamp === 'center') {
this.underflowX = 0;
this.underflowY = 0;
} else {
this.underflowX = clamp.indexOf('left') !== -1 ? -1 : clamp.indexOf('right') !== -1 ? 1 : 0;
this.underflowY = clamp.indexOf('top') !== -1 ? -1 : clamp.indexOf('bottom') !== -1 ? 1 : 0;
}
}
}, {
key: 'down',
value: function down(e) {
if (this.paused) {
return;
}
var count = this.parent.countDownPointers();
if ((count === 1 || count > 1 && !this.parent.plugins['pinch']) && this.parent.parent) {
var parent = this.parent.parent.toLocal(e.data.global);
this.last = { x: e.data.global.x, y: e.data.global.y, parent: parent };
this.current = e.data.pointerId;
} else {
this.last = null;
}
}
}, {
key: 'move',
value: function move(e) {
if (this.paused) {
return;
}
if (this.last && this.current === e.data.pointerId) {
var x = e.data.global.x;
var y = e.data.global.y;
var count = this.parent.countDownPointers();
if (count === 1 || count > 1 && !this.parent.plugins['pinch']) {
var distX = x - this.last.x;
var distY = y - this.last.y;
if (this.moved || this.xDirection && this.parent.checkThreshold(distX) || this.yDirection && this.parent.checkThreshold(distY)) {
var newParent = this.parent.parent.toLocal(e.data.global);
if (this.xDirection) {
this.parent.x += newParent.x - this.last.parent.x;
}
if (this.yDirection) {
this.parent.y += newParent.y - this.last.parent.y;
}
this.last = { x: x, y: y, parent: newParent };
if (!this.moved) {
this.parent.emit('drag-start', { screen: this.last, world: this.parent.toWorld(this.last), viewport: this.parent });
}
this.moved = true;
this.parent.dirty = true;
this.parent.emit('moved', { viewport: this.parent, type: 'drag' });
}
} else {
this.moved = false;
}
}
}
}, {
key: 'up',
value: function up() {
var touches = this.parent.getTouchPointers();
if (touches.length === 1) {
var pointer = touches[0];
if (pointer.last) {
var parent = this.parent.parent.toLocal(pointer.last);
this.last = { x: pointer.last.x, y: pointer.last.y, parent: parent };
this.current = pointer.last.data.pointerId;
}
this.moved = false;
} else if (this.last) {
if (this.moved) {
this.parent.emit('drag-end', { screen: this.last, world: this.parent.toWorld(this.last), viewport: this.parent });
this.last = this.moved = false;
}
}
}
}, {
key: 'wheel',
value: function wheel(e) {
if (this.paused) {
return;
}
if (this.wheelActive) {
var wheel = this.parent.plugins['wheel'];
if (!wheel) {
this.parent.x += e.deltaX * this.wheelScroll * this.reverse;
this.parent.y += e.deltaY * this.wheelScroll * this.reverse;
if (this.clampWheel) {
this.clamp();
}
this.parent.emit('wheel-scroll', this.parent);
this.parent.emit('moved', this.parent);
this.parent.dirty = true;
e.preventDefault();
return true;
}
}
}
}, {
key: 'resume',
value: function resume() {
this.last = null;
this.paused = false;
}
}, {
key: 'clamp',
value: function clamp() {
var decelerate = this.parent.plugins['decelerate'] || {};
if (this.clampWheel !== 'y') {
if (this.parent.screenWorldWidth < this.parent.screenWidth) {
switch (this.underflowX) {
case -1:
this.parent.x = 0;
break;
case 1:
this.parent.x = this.parent.screenWidth - this.parent.screenWorldWidth;
break;
default:
this.parent.x = (this.parent.screenWidth - this.parent.screenWorldWidth) / 2;
}
} else {
if (this.parent.left < 0) {
this.parent.x = 0;
decelerate.x = 0;
} else if (this.parent.right > this.parent.worldWidth) {
this.parent.x = -this.parent.worldWidth * this.parent.scale.x + this.parent.screenWidth;
decelerate.x = 0;
}
}
}
if (this.clampWheel !== 'x') {
if (this.parent.screenWorldHeight < this.parent.screenHeight) {
switch (this.underflowY) {
case -1:
this.parent.y = 0;
break;
case 1:
this.parent.y = this.parent.screenHeight - this.parent.screenWorldHeight;
break;
default:
this.parent.y = (this.parent.screenHeight - this.parent.screenWorldHeight) / 2;
}
} else {
if (this.parent.top < 0) {
this.parent.y = 0;
decelerate.y = 0;
}
if (this.parent.bottom > this.parent.worldHeight) {
this.parent.y = -this.parent.worldHeight * this.parent.scale.y + this.parent.screenHeight;
decelerate.y = 0;
}
}
}
}
}, {
key: 'active',
get: function get() {
return this.moved;
}
}]);
return Drag;
}(Plugin);
},{"./plugin":9,"./utils":12}],6:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(Follow, _Plugin);
/**
* @private
* @param {Viewport} parent
* @param {PIXI.DisplayObject} target to follow (object must include {x: x-coordinate, y: y-coordinate})
* @param {object} [options]
* @param {number} [options.speed=0] to follow in pixels/frame (0=teleport to location)
* @param {number} [options.radius] radius (in world coordinates) of center circle where movement is allowed without moving the viewport
*/
function Follow(parent, target, options) {
_classCallCheck(this, Follow);
var _this = _possibleConstructorReturn(this, (Follow.__proto__ || Object.getPrototypeOf(Follow)).call(this, parent));
options = options || {};
_this.speed = options.speed || 0;
_this.target = target;
_this.radius = options.radius;
return _this;
}
_createClass(Follow, [{
key: 'update',
value: function update() {
if (this.paused) {
return;
}
var center = this.parent.center;
var toX = this.target.x,
toY = this.target.y;
if (this.radius) {
var distance = Math.sqrt(Math.pow(this.target.y - center.y, 2) + Math.pow(this.target.x - center.x, 2));
if (distance > this.radius) {
var angle = Math.atan2(this.target.y - center.y, this.target.x - center.x);
toX = this.target.x - Math.cos(angle) * this.radius;
toY = this.target.y - Math.sin(angle) * this.radius;
} else {
return;
}
}
if (this.speed) {
var deltaX = toX - center.x;
var deltaY = toY - center.y;
if (deltaX || deltaY) {
var _angle = Math.atan2(toY - center.y, toX - center.x);
var changeX = Math.cos(_angle) * this.speed;
var changeY = Math.sin(_angle) * this.speed;
var x = Math.abs(changeX) > Math.abs(deltaX) ? toX : center.x + changeX;
var y = Math.abs(changeY) > Math.abs(deltaY) ? toY : center.y + changeY;
this.parent.moveCenter(x, y);
this.parent.emit('moved', { viewport: this.parent, type: 'follow' });
}
} else {
this.parent.moveCenter(toX, toY);
this.parent.emit('moved', { viewport: this.parent, type: 'follow' });
}
}
}]);
return Follow;
}(Plugin);
},{"./plugin":9}],7:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var utils = require('./utils');
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(MouseEdges, _Plugin);
/**
* Scroll viewport when mouse hovers near one of the edges.
* @private
* @param {Viewport} parent
* @param {object} [options]
* @param {number} [options.radius] distance from center of screen in screen pixels
* @param {number} [options.distance] distance from all sides in screen pixels
* @param {number} [options.top] alternatively, set top distance (leave unset for no top scroll)
* @param {number} [options.bottom] alternatively, set bottom distance (leave unset for no top scroll)
* @param {number} [options.left] alternatively, set left distance (leave unset for no top scroll)
* @param {number} [options.right] alternatively, set right distance (leave unset for no top scroll)
* @param {number} [options.speed=8] speed in pixels/frame to scroll viewport
* @param {boolean} [options.reverse] reverse direction of scroll
* @param {boolean} [options.noDecelerate] don't use decelerate plugin even if it's installed
* @param {boolean} [options.linear] if using radius, use linear movement (+/- 1, +/- 1) instead of angled movement (Math.cos(angle from center), Math.sin(angle from center))
*
* @event mouse-edge-start(Viewport) emitted when mouse-edge starts
* @event mouse-edge-end(Viewport) emitted when mouse-edge ends
*/
function MouseEdges(parent, options) {
_classCallCheck(this, MouseEdges);
var _this = _possibleConstructorReturn(this, (MouseEdges.__proto__ || Object.getPrototypeOf(MouseEdges)).call(this, parent));
options = options || {};
_this.options = options;
_this.reverse = options.reverse ? 1 : -1;
_this.noDecelerate = options.noDecelerate;
_this.linear = options.linear;
_this.radiusSquared = Math.pow(options.radius, 2);
_this.resize();
_this.speed = options.speed || 8;
return _this;
}
_createClass(MouseEdges, [{
key: 'resize',
value: function resize() {
var options = this.options;
var distance = options.distance;
if (utils.exists(distance)) {
this.left = distance;
this.top = distance;
this.right = window.innerWidth - distance;
this.bottom = window.innerHeight - distance;
} else if (!this.radius) {
this.left = utils.exists(options.left) ? options.left : null;
this.top = utils.exists(options.top) ? options.top : null;
this.right = utils.exists(options.right) ? window.innerWidth - options.right : null;
this.bottom = utils.exists(options.bottom) ? window.innerHeight - options.bottom : null;
}
}
}, {
key: 'down',
value: function down() {
this.horizontal = this.vertical = null;
}
}, {
key: 'move',
value: function move(e) {
if (e.data.identifier !== 'MOUSE' || e.data.buttons !== 0) {
return;
}
var x = e.data.global.x;
var y = e.data.global.y;
if (this.radiusSquared) {
var center = this.parent.toScreen(this.parent.center);
var distance = Math.pow(center.x - x, 2) + Math.pow(center.y - y, 2);
if (distance >= this.radiusSquared) {
var angle = Math.atan2(center.y - y, center.x - x);
if (this.linear) {
this.horizontal = Math.round(Math.cos(angle)) * this.speed * this.reverse * (60 / 1000);
this.vertical = Math.round(Math.sin(angle)) * this.speed * this.reverse * (60 / 1000);
} else {
this.horizontal = Math.cos(angle) * this.speed * this.reverse * (60 / 1000);
this.vertical = Math.sin(angle) * this.speed * this.reverse * (60 / 1000);
}
} else {
if (this.horizontal) {
this.decelerateHorizontal();
}
if (this.vertical) {
this.decelerateVertical();
}
this.horizontal = this.vertical = 0;
}
} else {
if (utils.exists(this.left) && x < this.left) {
this.horizontal = 1 * this.reverse * this.speed * (60 / 1000);
} else if (utils.exists(this.right) && x > this.right) {
this.horizontal = -1 * this.reverse * this.speed * (60 / 1000);
} else {
this.decelerateHorizontal();
this.horizontal = 0;
}
if (utils.exists(this.top) && y < this.top) {
this.vertical = 1 * this.reverse * this.speed * (60 / 1000);
} else if (utils.exists(this.bottom) && y > this.bottom) {
this.vertical = -1 * this.reverse * this.speed * (60 / 1000);
} else {
this.decelerateVertical();
this.vertical = 0;
}
}
}
}, {
key: 'decelerateHorizontal',
value: function decelerateHorizontal() {
var decelerate = this.parent.plugins['decelerate'];
if (this.horizontal && decelerate && !this.noDecelerate) {
decelerate.activate({ x: this.horizontal * this.speed * this.reverse / (1000 / 60) });
}
}
}, {
key: 'decelerateVertical',
value: function decelerateVertical() {
var decelerate = this.parent.plugins['decelerate'];
if (this.vertical && decelerate && !this.noDecelerate) {
decelerate.activate({ y: this.vertical * this.speed * this.reverse / (1000 / 60) });
}
}
}, {
key: 'up',
value: function up() {
if (this.horizontal) {
this.decelerateHorizontal();
}
if (this.vertical) {
this.decelerateVertical();
}
this.horizontal = this.vertical = null;
}
}, {
key: 'update',
value: function update() {
if (this.paused) {
return;
}
if (this.horizontal || this.vertical) {
var center = this.parent.center;
if (this.horizontal) {
center.x += this.horizontal * this.speed;
}
if (this.vertical) {
center.y += this.vertical * this.speed;
}
this.parent.moveCenter(center);
this.parent.emit('moved', { viewport: this.parent, type: 'mouse-edges' });
}
}
}]);
return MouseEdges;
}(Plugin);
},{"./plugin":9,"./utils":12}],8:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(Pinch, _Plugin);
/**
* @private
* @param {Viewport} parent
* @param {object} [options]
* @param {boolean} [options.noDrag] disable two-finger dragging
* @param {number} [options.percent=1.0] percent to modify pinch speed
* @param {PIXI.Point} [options.center] place this point at center during zoom instead of center of two fingers
*/
function Pinch(parent, options) {
_classCallCheck(this, Pinch);
var _this = _possibleConstructorReturn(this, (Pinch.__proto__ || Object.getPrototypeOf(Pinch)).call(this, parent));
options = options || {};
_this.percent = options.percent || 1.0;
_this.noDrag = options.noDrag;
_this.center = options.center;
return _this;
}
_createClass(Pinch, [{
key: 'down',
value: function down() {
if (this.parent.countDownPointers() >= 2) {
this.active = true;
}
}
}, {
key: 'move',
value: function move(e) {
if (this.paused || !this.active) {
return;
}
var x = e.data.global.x;
var y = e.data.global.y;
var pointers = this.parent.getTouchPointers();
if (pointers.length >= 2) {
var first = pointers[0];
var second = pointers[1];
var last = first.last && second.last ? Math.sqrt(Math.pow(second.last.x - first.last.x, 2) + Math.pow(second.last.y - first.last.y, 2)) : null;
if (first.pointerId === e.data.pointerId) {
first.last = { x: x, y: y, data: e.data };
} else if (second.pointerId === e.data.pointerId) {
second.last = { x: x, y: y, data: e.data };
}
if (last) {
var oldPoint = void 0;
var point = { x: first.last.x + (second.last.x - first.last.x) / 2, y: first.last.y + (second.last.y - first.last.y) / 2 };
if (!this.center) {
oldPoint = this.parent.toLocal(point);
}
var dist = Math.sqrt(Math.pow(second.last.x - first.last.x, 2) + Math.pow(second.last.y - first.last.y, 2));
var change = (dist - last) / this.parent.screenWidth * this.parent.scale.x * this.percent;
this.parent.scale.x += change;
this.parent.scale.y += change;
this.parent.emit('zoomed', { viewport: this.parent, type: 'pinch' });
var clamp = this.parent.plugins['clamp-zoom'];
if (clamp) {
clamp.clamp();
}
if (this.center) {
this.parent.moveCenter(this.center);
} else {
var newPoint = this.parent.toGlobal(oldPoint);
this.parent.x += point.x - newPoint.x;
this.parent.y += point.y - newPoint.y;
this.parent.emit('moved', { viewport: this.parent, type: 'pinch' });
}
if (!this.noDrag && this.lastCenter) {
this.parent.x += point.x - this.lastCenter.x;
this.parent.y += point.y - this.lastCenter.y;
this.parent.emit('moved', { viewport: this.parent, type: 'pinch' });
}
this.lastCenter = point;
this.moved = true;
} else {
if (!this.pinching) {
this.parent.emit('pinch-start', this.parent);
this.pinching = true;
}
}
this.parent.dirty = true;
}
}
}, {
key: 'up',
value: function up() {
if (this.pinching) {
if (this.parent.touches.length <= 1) {
this.active = false;
this.lastCenter = null;
this.pinching = false;
this.moved = false;
this.parent.emit('pinch-end', this.parent);
}
}
}
}]);
return Pinch;
}(Plugin);
},{"./plugin":9}],9:[function(require,module,exports){
"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
module.exports = function () {
function Plugin(parent) {
_classCallCheck(this, Plugin);
this.parent = parent;
this.paused = false;
}
_createClass(Plugin, [{
key: "down",
value: function down() {}
}, {
key: "move",
value: function move() {}
}, {
key: "up",
value: function up() {}
}, {
key: "wheel",
value: function wheel() {}
}, {
key: "update",
value: function update() {}
}, {
key: "resize",
value: function resize() {}
}, {
key: "reset",
value: function reset() {}
}, {
key: "pause",
value: function pause() {
this.paused = true;
}
}, {
key: "resume",
value: function resume() {
this.paused = false;
}
}]);
return Plugin;
}();
},{}],10:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Plugin = require('./plugin');
var utils = require('./utils');
module.exports = function (_Plugin) {
_inherits(SnapZoom, _Plugin);
/**
* @private
* @param {Viewport} parent
* @param {object} [options]
* @param {number} [options.width] the desired width to snap (to maintain aspect ratio, choose only width or height)
* @param {number} [options.height] the desired height to snap (to maintain aspect ratio, choose only width or height)
* @param {number} [options.time=1000]
* @param {string|function} [options.ease=easeInOutSine] ease function or name (see http://easings.net/ for supported names)
* @param {PIXI.Point} [options.center] place this point at center during zoom instead of center of the viewport
* @param {boolean} [options.interrupt=true] pause snapping with any user input on the viewport
* @param {boolean} [options.removeOnComplete] removes this plugin after snapping is complete
* @param {boolean} [options.removeOnInterrupt] removes this plugin if interrupted by any user input
* @param {boolean} [options.forceStart] starts the snap immediately regardless of whether the viewport is at the desired zoom
* @param {boolean} [options.noMove] zoom but do not move
*
* @event snap-zoom-start(Viewport) emitted each time a fit animation starts
* @event snap-zoom-end(Viewport) emitted each time fit reaches its target
* @event snap-zoom-end(Viewport) emitted each time fit reaches its target
*/
function SnapZoom(parent, options) {
_classCallCheck(this, SnapZoom);
var _this = _possibleConstructorReturn(this, (SnapZoom.__proto__ || Object.getPrototypeOf(SnapZoom)).call(this, parent));
options = options || {};
_this.width = options.width;
_this.height = options.height;
if (_this.width > 0) {
_this.x_scale = parent._screenWidth / _this.width;
}
if (_this.height > 0) {
_this.y_scale = parent._screenHeight / _this.height;
}
_this.xIndependent = utils.exists(_this.x_scale);
_this.yIndependent = utils.exists(_this.y_scale);
_this.x_scale = _this.xIndependent ? _this.x_scale : _this.y_scale;
_this.y_scale = _this.yIndependent ? _this.y_scale : _this.x_scale;
_this.time = utils.defaults(options.time, 1000);
_this.ease = utils.ease(options.ease, 'easeInOutSine');
_this.center = options.center;
_this.noMove = options.noMove;
_this.stopOnResize = options.stopOnResize;
_this.removeOnInterrupt = options.removeOnInterrupt;
_this.removeOnComplete = utils.defaults(options.removeOnComplete, true);
_this.interrupt = utils.defaults(options.interrupt, true);
if (_this.time === 0) {
parent.container.scale.x = _this.x_scale;
parent.container.scale.y = _this.y_scale;
if (_this.removeOnComplete) {
_this.parent.removePlugin('snap-zoom');
}
} else if (options.forceStart) {
_this.createSnapping();
}
return _this;
}
_createClass(SnapZoom, [{
key: 'createSnapping',
value: function createSnapping() {
var scale = this.parent.scale;
this.snapping = { time: 0, startX: scale.x, startY: scale.y, deltaX: this.x_scale - scale.x, deltaY: this.y_scale - scale.y };
this.parent.emit('snap-zoom-start', this.parent);
}
}, {
key: 'resize',
value: function resize() {
this.snapping = null;
if (this.width > 0) {
this.x_scale = this.parent._screenWidth / this.width;
}
if (this.height > 0) {
this.y_scale = this.parent._screenHeight / this.height;
}
this.x_scale = this.xIndependent ? this.x_scale : this.y_scale;
this.y_scale = this.yIndependent ? this.y_scale : this.x_scale;
}
}, {
key: 'reset',
value: function reset() {
this.snapping = null;
}
}, {
key: 'wheel',
value: function wheel() {
if (this.removeOnInterrupt) {
this.parent.removePlugin('snap-zoom');
}
}
}, {
key: 'down',
value: function down() {
if (this.removeOnInterrupt) {
this.parent.removePlugin('snap-zoom');
} else if (this.interrupt) {
this.snapping = null;
}
}
}, {
key: 'update',
value: function update(elapsed) {
if (this.paused) {
return;
}
if (this.interrupt && this.parent.countDownPointers() !== 0) {
return;
}
var oldCenter = void 0;
if (!this.center && !this.noMove) {
oldCenter = this.parent.center;
}
if (!this.snapping) {
if (this.parent.scale.x !== this.x_scale || this.parent.scale.y !== this.y_scale) {
this.createSnapping();
}
} else if (this.snapping) {
var snapping = this.snapping;
snapping.time += elapsed;
if (snapping.time >= this.time) {
this.parent.scale.set(this.x_scale, this.y_scale);
if (this.removeOnComplete) {
this.parent.removePlugin('snap-zoom');
}
this.parent.emit('snap-zoom-end', this.parent);
this.snapping = null;
} else {
var _snapping = this.snapping;
this.parent.scale.x = this.ease(_snapping.time, _snapping.startX, _snapping.deltaX, this.time);
this.parent.scale.y = this.ease(_snapping.time, _snapping.startY, _snapping.deltaY, this.time);
}
var clamp = this.parent.plugins['clamp-zoom'];
if (clamp) {
clamp.clamp();
}
if (!this.noMove) {
if (!this.center) {
this.parent.moveCenter(oldCenter);
} else {
this.parent.moveCenter(this.center);
}
}
}
}
}, {
key: 'resume',
value: function resume() {
this.snapping = null;
_get(SnapZoom.prototype.__proto__ || Object.getPrototypeOf(SnapZoom.prototype), 'resume', this).call(this);
}
}]);
return SnapZoom;
}(Plugin);
},{"./plugin":9,"./utils":12}],11:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Plugin = require('./plugin');
var utils = require('./utils');
module.exports = function (_Plugin) {
_inherits(Snap, _Plugin);
/**
* @private
* @param {Viewport} parent
* @param {number} x
* @param {number} y
* @param {object} [options]
* @param {boolean} [options.topLeft] snap to the top-left of viewport instead of center
* @param {number} [options.friction=0.8] friction/frame to apply if decelerate is active
* @param {number} [options.time=1000]
* @param {string|function} [options.ease=easeInOutSine] ease function or name (see http://easings.net/ for supported names)
* @param {boolean} [options.interrupt=true] pause snapping with any user input on the viewport
* @param {boolean} [options.removeOnComplete] removes this plugin after snapping is complete
* @param {boolean} [options.removeOnInterrupt] removes this plugin if interrupted by any user input
* @param {boolean} [options.forceStart] starts the snap immediately regardless of whether the viewport is at the desired location
*
* @event snap-start(Viewport) emitted each time a snap animation starts
* @event snap-restart(Viewport) emitted each time a snap resets because of a change in viewport size
* @event snap-end(Viewport) emitted each time snap reaches its target
* @event snap-remove(Viewport) emitted if snap plugin is removed
*/
function Snap(parent, x, y, options) {
_classCallCheck(this, Snap);
var _this = _possibleConstructorReturn(this, (Snap.__proto__ || Object.getPrototypeOf(Snap)).call(this, parent));
options = options || {};
_this.friction = options.friction || 0.8;
_this.time = options.time || 1000;
_this.ease = utils.ease(options.ease, 'easeInOutSine');
_this.x = x;
_this.y = y;
_this.topLeft = options.topLeft;
_this.interrupt = utils.defaults(options.interrupt, true);
_this.removeOnComplete = options.removeOnComplete;
_this.removeOnInterrupt = options.removeOnInterrupt;
if (options.forceStart) {
_this.startEase();
}
return _this;
}
_createClass(Snap, [{
key: 'snapStart',
value: function snapStart() {
this.percent = 0;
this.snapping = { time: 0 };
var current = this.topLeft ? this.parent.corner : this.parent.center;
this.deltaX = this.x - current.x;
this.deltaY = this.y - current.y;
this.startX = current.x;
this.startY = current.y;
this.parent.emit('snap-start', this.parent);
}
}, {
key: 'wheel',
value: function wheel() {
if (this.removeOnInterrupt) {
this.parent.removePlugin('snap');
}
}
}, {
key: 'down',
value: function down() {
if (this.removeOnInterrupt) {
this.parent.removePlugin('snap');
} else if (this.interrupt) {
this.snapping = null;
}
}
}, {
key: 'up',
value: function up() {
if (this.parent.countDownPointers() === 0) {
var decelerate = this.parent.plugins['decelerate'];
if (decelerate && (decelerate.x || decelerate.y)) {
decelerate.percentChangeX = decelerate.percentChangeY = this.friction;
}
}
}
}, {
key: 'update',
value: function update(elapsed) {
if (this.paused) {
return;
}
if (this.interrupt && this.parent.countDownPointers() !== 0) {
return;
}
if (!this.snapping) {
var current = this.topLeft ? this.parent.corner : this.parent.center;
if (current.x !== this.x || current.y !== this.y) {
this.snapStart();
}
} else {
var snapping = this.snapping;
snapping.time += elapsed;
var finished = void 0,
x = void 0,
y = void 0;
if (snapping.time > this.time) {
finished = true;
x = this.startX + this.deltaX;
y = this.startY + this.deltaY;
} else {
var percent = this.ease(snapping.time, 0, 1, this.time);
x = this.startX + this.deltaX * percent;
y = this.startY + this.deltaY * percent;
}
if (this.topLeft) {
this.parent.moveCorner(x, y);
} else {
this.parent.moveCenter(x, y);
}
this.parent.emit('moved', { viewport: this.parent, type: 'snap' });
if (finished) {
if (this.removeOnComplete) {
this.parent.removePlugin('snap');
}
this.parent.emit('snap-end', this.parent);
this.snapping = null;
}
}
}
}]);
return Snap;
}(Plugin);
},{"./plugin":9,"./utils":12}],12:[function(require,module,exports){
'use strict';
var Penner = require('penner');
function exists(a) {
return a !== undefined && a !== null;
}
function defaults(a, defaults) {
return a !== undefined && a !== null ? a : defaults;
}
/**
* @param {(function|string)} [ease]
* @param {string} defaults for pennr equation
* @private
* @returns {function} correct penner equation
*/
function ease(ease, defaults) {
if (!exists(ease)) {
return Penner[defaults];
} else if (typeof ease === 'function') {
return ease;
} else if (typeof ease === 'string') {
return Penner[ease];
}
}
module.exports = {
exists: exists,
defaults: defaults,
ease: ease
};
},{"penner":15}],13:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var utils = require('./utils');
var Drag = require('./drag');
var Pinch = require('./pinch');
var Clamp = require('./clamp');
var ClampZoom = require('./clamp-zoom');
var Decelerate = require('./decelerate');
var Bounce = require('./bounce');
var Snap = require('./snap');
var SnapZoom = require('./snap-zoom');
var Follow = require('./follow');
var Wheel = require('./wheel');
var MouseEdges = require('./mouse-edges');
var PLUGIN_ORDER = ['drag', 'pinch', 'wheel', 'follow', 'mouse-edges', 'decelerate', 'bounce', 'snap-zoom', 'clamp-zoom', 'snap', 'clamp'];
var Viewport = function (_PIXI$Container) {
_inherits(Viewport, _PIXI$Container);
/**
* @extends PIXI.Container
* @extends EventEmitter
* @param {object} [options]
* @param {number} [options.screenWidth=window.innerWidth]
* @param {number} [options.screenHeight=window.innerHeight]
* @param {number} [options.worldWidth=this.width]
* @param {number} [options.worldHeight=this.height]
* @param {number} [options.threshold = 5] number of pixels to move to trigger an input event (e.g., drag, pinch)
* @param {(PIXI.Rectangle|PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.RoundedRectangle)} [options.forceHitArea] change the default hitArea from world size to a new value
* @param {PIXI.ticker.Ticker} [options.ticker=PIXI.ticker.shared] use this PIXI.ticker for updates
* @param {PIXI.InteractionManager} [options.interaction=null] InteractionManager, available from instantiated WebGLRenderer/CanvasRenderer.plugins.interaction - used to calculate pointer postion relative to canvas location on screen
* @param {HTMLElement} [options.divWheel=document.body] div to attach the wheel event
* @fires clicked
* @fires drag-start
* @fires drag-end
* @fires drag-remove
* @fires pinch-start
* @fires pinch-end
* @fires pinch-remove
* @fires snap-start
* @fires snap-end
* @fires snap-remove
* @fires snap-zoom-start
* @fires snap-zoom-end
* @fires snap-zoom-remove
* @fires bounce-x-start
* @fires bounce-x-end
* @fires bounce-y-start
* @fires bounce-y-end
* @fires bounce-remove
* @fires wheel
* @fires wheel-remove
* @fires wheel-scroll
* @fires wheel-scroll-remove
* @fires mouse-edge-start
* @fires mouse-edge-end
* @fires mouse-edge-remove
* @fires moved
*/
function Viewport(options) {
_classCallCheck(this, Viewport);
options = options || {};
var _this = _possibleConstructorReturn(this, (Viewport.__proto__ || Object.getPrototypeOf(Viewport)).call(this));
_this.plugins = {};
_this.pluginsList = [];
_this._screenWidth = options.screenWidth;
_this._screenHeight = options.screenHeight;
_this._worldWidth = options.worldWidth;
_this._worldHeight = options.worldHeight;
_this.hitAreaFullScreen = utils.defaults(options.hitAreaFullScreen, true);
_this.forceHitArea = options.forceHitArea;
_this.threshold = utils.defaults(options.threshold, 5);
_this.interaction = options.interaction || null;
_this.div = options.divWheel || document.body;
_this.listeners(_this.div);
/**
* active touch point ids on the viewport
* @type {number[]}
* @readonly
*/
_this.touches = [];
_this.ticker = options.ticker || PIXI.ticker.shared;
_this.tickerFunction = function () {
return _this.update();
};
_this.ticker.add(_this.tickerFunction);
return _this;
}
/**
* removes all event listeners from viewport
* (useful for cleanup of wheel and ticker events when removing viewport)
*/
_createClass(Viewport, [{
key: 'removeListeners',
value: function removeListeners() {
this.ticker.remove(this.tickerFunction);
this.div.removeEventListener('wheel', this.wheelFunction);
}
/**
* overrides PIXI.Container's destroy to also remove the 'wheel' and PIXI.Ticker listeners
*/
}, {
key: 'destroy',
value: function destroy(options) {
_get(Viewport.prototype.__proto__ || Object.getPrototypeOf(Viewport.prototype), 'destroy', this).call(this, options);
this.removeListeners();
}
/**
* update animations
* @private
*/
}, {
key: 'update',
value: function update() {
if (!this.pause) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = this.pluginsList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var plugin = _step.value;
plugin.update(this.ticker.elapsedMS);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
if (!this.forceHitArea) {
this.hitArea.x = this.left;
this.hitArea.y = this.top;
this.hitArea.width = this.worldScreenWidth;
this.hitArea.height = this.worldScreenHeight;
}
}
/**
* use this to set screen and world sizes--needed for pinch/wheel/clamp/bounce
* @param {number} screenWidth
* @param {number} screenHeight
* @param {number} [worldWidth]
* @param {number} [worldHeight]
*/
}, {
key: 'resize',
value: function resize(screenWidth, screenHeight, worldWidth, worldHeight) {
this._screenWidth = screenWidth || window.innerWidth;
this._screenHeight = screenHeight || window.innerHeight;
this._worldWidth = worldWidth;
this._worldHeight = worldHeight;
this.resizePlugins();
}
/**
* called after a worldWidth/Height change
* @private
*/
}, {
key: 'resizePlugins',
value: function resizePlugins() {
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = this.pluginsList[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var plugin = _step2.value;
plugin.resize();
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
}
/**
* screen width in screen pixels
* @type {number}
*/
}, {
key: 'listeners',
/**
* add input listeners
* @private
*/
value: function listeners(div) {
var _this2 = this;
this.interactive = true;
if (!this.forceHitArea) {
this.hitArea = new PIXI.Rectangle(0, 0, this.worldWidth, this.worldHeight);
}
this.on('pointerdown', this.down);
this.on('pointermove', this.move);
this.on('pointerup', this.up);
this.on('pointerupoutside', this.up);
this.on('pointercancel', this.up);
this.on('pointerout', this.up);
this.wheelFunction = function (e) {
return _this2.handleWheel(e);
};
div.addEventListener('wheel', this.wheelFunction);
this.leftDown = false;
}
/**
* handle down events
* @private
*/
}, {
key: 'down',
value: function down(e) {
if (this.pause) {
return;
}
if (e.data.pointerType === 'mouse') {
if (e.data.originalEvent.button == 0) {
this.leftDown = true;
}
} else {
this.touches.push(e.data.pointerId);
}
if (this.countDownPointers() === 1) {
this.last = { x: e.data.global.x, y: e.data.global.y
// clicked event does not fire if viewport is decelerating or bouncing
};var decelerate = this.plugins['decelerate'];
var bounce = this.plugins['bounce'];
if ((!decelerate || !decelerate.x && !decelerate.y) && (!bounce || !bounce.toX && !bounce.toY)) {
this.clickedAvailable = true;
}
} else {
this.clickedAvailable = false;
}
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = this.pluginsList[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var plugin = _step3.value;
plugin.down(e);
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
}
/**
* whether change exceeds threshold
* @private
* @param {number} change
*/
}, {
key: 'checkThreshold',
value: function checkThreshold(change) {
if (Math.abs(change) >= this.threshold) {
return true;
}
return false;
}
/**
* handle move events
* @private
*/
}, {
key: 'move',
value: function move(e) {
if (this.pause) {
return;
}
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = this.pluginsList[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var plugin = _step4.value;
plugin.move(e);
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return) {
_iterator4.return();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}
if (this.clickedAvailable) {
var distX = e.data.global.x - this.last.x;
var distY = e.data.global.y - this.last.y;
if (this.checkThreshold(distX) || this.checkThreshold(distY)) {
this.clickedAvailable = false;
}
}
}
/**
* handle up events
* @private
*/
}, {
key: 'up',
value: function up(e) {
if (this.pause) {
return;
}
if (e.data.originalEvent instanceof MouseEvent && e.data.originalEvent.button == 0) {
this.leftDown = false;
}
if (e.data.pointerType !== 'mouse') {
for (var i = 0; i < this.touches.length; i++) {
if (this.touches[i] === e.data.pointerId) {
this.touches.splice(i, 1);
break;
}
}
}
var _iteratorNormalCompletion5 = true;
var _didIteratorError5 = false;
var _iteratorError5 = undefined;
try {
for (var _iterator5 = this.pluginsList[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var plugin = _step5.value;
plugin.up(e);
}
} catch (err) {
_didIteratorError5 = true;
_iteratorError5 = err;
} finally {
try {
if (!_iteratorNormalCompletion5 && _iterator5.return) {
_iterator5.return();
}
} finally {
if (_didIteratorError5) {
throw _iteratorError5;
}
}
}
if (this.clickedAvailable && this.countDownPointers() === 0) {
this.emit('clicked', { screen: this.last, world: this.toWorld(this.last), viewport: this });
this.clickedAvailable = false;
}
}
/**
* gets pointer position if this.interaction is set
* @param {UIEvent} evt
* @private
*/
}, {
key: 'getPointerPosition',
value: function getPointerPosition(evt) {
var point = new PIXI.Point();
if (this.interaction) {
this.interaction.mapPositionToPoint(point, evt.clientX, evt.clientY);
} else {
point.x = evt.clientX;
point.y = evt.clientY;
}
return point;
}
/**
* handle wheel events
* @private
*/
}, {
key: 'handleWheel',
value: function handleWheel(e) {
if (this.pause) {
return;
}
// only handle wheel events where the mouse is over the viewport
var point = this.toLocal(this.getPointerPosition(e));
if (this.left <= point.x && point.x <= this.right && this.top <= point.y && point.y <= this.bottom) {
var result = void 0;
var _iteratorNormalCompletion6 = true;
var _didIteratorError6 = false;
var _iteratorError6 = undefined;
try {
for (var _iterator6 = this.pluginsList[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
var plugin = _step6.value;
if (plugin.wheel(e)) {
result = true;
}
}
} catch (err) {
_didIteratorError6 = true;
_iteratorError6 = err;
} finally {
try {
if (!_iteratorNormalCompletion6 && _iterator6.return) {
_iterator6.return();
}
} finally {
if (_didIteratorError6) {
throw _iteratorError6;
}
}
}
return result;
}
}
/**
* change coordinates from screen to world
* @param {number|PIXI.Point} x
* @param {number} [y]
* @returns {PIXI.Point}
*/
}, {
key: 'toWorld',
value: function toWorld() {
if (arguments.length === 2) {
var x = arguments[0];
var y = arguments[1];
return this.toLocal({ x: x, y: y });
} else {
return this.toLocal(arguments[0]);
}
}
/**
* change coordinates from world to screen
* @param {number|PIXI.Point} x
* @param {number} [y]
* @returns {PIXI.Point}
*/
}, {
key: 'toScreen',
value: function toScreen() {
if (arguments.length === 2) {
var x = arguments[0];
var y = arguments[1];
return this.toGlobal({ x: x, y: y });
} else {
var point = arguments[0];
return this.toGlobal(point);
}
}
/**
* screen width in world coordinates
* @type {number}
* @readonly
*/
}, {
key: 'moveCenter',
/**
* move center of viewport to point
* @param {(number|PIXI.PointLike)} x or point
* @param {number} [y]
* @return {Viewport} this
*/
value: function moveCenter() /*x, y | PIXI.Point*/{
var x = void 0,
y = void 0;
if (!isNaN(arguments[0])) {
x = arguments[0];
y = arguments[1];
} else {
x = arguments[0].x;
y = arguments[0].y;
}
this.position.set((this.worldScreenWidth / 2 - x) * this.scale.x, (this.worldScreenHeight / 2 - y) * this.scale.y);
this._reset();
return this;
}
/**
* top-left corner
* @type {PIXI.PointLike}
*/
}, {
key: 'moveCorner',
/**
* move viewport's top-left corner; also clamps and resets decelerate and bounce (as needed)
* @param {number|PIXI.Point} x|point
* @param {number} y
* @return {Viewport} this
*/
value: function moveCorner() /*x, y | point*/{
if (arguments.length === 1) {
this.position.set(-arguments[0].x * this.scale.x, -arguments[0].y * this.scale.y);
} else {
this.position.set(-arguments[0] * this.scale.x, -arguments[1] * this.scale.y);
}
this._reset();
return this;
}
/**
* change zoom so the width fits in the viewport
* @param {number} [width=this._worldWidth] in world coordinates
* @param {boolean} [center] maintain the same center
* @return {Viewport} this
*/
}, {
key: 'fitWidth',
value: function fitWidth(width, center) {
var save = void 0;
if (center) {
save = this.center;
}
width = width || this.worldWidth;
this.scale.x = this.screenWidth / width;
this.scale.y = this.scale.x;
if (center) {
this.moveCenter(save);
}
return this;
}
/**
* change zoom so the height fits in the viewport
* @param {number} [height=this._worldHeight] in world coordinates
* @param {boolean} [center] maintain the same center of the screen after zoom
* @return {Viewport} this
*/
}, {
key: 'fitHeight',
value: function fitHeight(height, center) {
var save = void 0;
if (center) {
save = this.center;
}
height = height || this.worldHeight;
this.scale.y = this.screenHeight / height;
this.scale.x = this.scale.y;
if (center) {
this.moveCenter(save);
}
return this;
}
/**
* change zoom so it fits the entire world in the viewport
* @param {boolean} [center] maintain the same center of the screen after zoom
* @return {Viewport} this
*/
}, {
key: 'fitWorld',
value: function fitWorld(center) {
var save = void 0;
if (center) {
save = this.center;
}
this.scale.x = this._screenWidth / this._worldWidth;
this.scale.y = this._screenHeight / this._worldHeight;
if (this.scale.x < this.scale.y) {
this.scale.y = this.scale.x;
} else {
this.scale.x = this.scale.y;
}
if (center) {
this.moveCenter(save);
}
return this;
}
/**
* change zoom so it fits the size or the entire world in the viewport
* @param {boolean} [center] maintain the same center of the screen after zoom
* @param {number} [width] desired width
* @param {number} [height] desired height
* @return {Viewport} this
*/
}, {
key: 'fit',
value: function fit(center, width, height) {
var save = void 0;
if (center) {
save = this.center;
}
width = width || this.worldWidth;
height = height || this.worldHeight;
this.scale.x = this.screenWidth / width;
this.scale.y = this.screenHeight / height;
if (this.scale.x < this.scale.y) {
this.scale.y = this.scale.x;
} else {
this.scale.x = this.scale.y;
}
if (center) {
this.moveCenter(save);
}
return this;
}
/**
* zoom viewport by a certain percent (in both x and y direction)
* @param {number} percent change (e.g., 0.25 would increase a starting scale of 1.0 to 1.25)
* @param {boolean} [center] maintain the same center of the screen after zoom
* @return {Viewport} the viewport
*/
}, {
key: 'zoomPercent',
value: function zoomPercent(percent, center) {
var save = void 0;
if (center) {
save = this.center;
}
var scale = this.scale.x + this.scale.x * percent;
this.scale.set(scale);
if (center) {
this.moveCenter(save);
}
return this;
}
/**
* zoom viewport by increasing/decreasing width by a certain number of pixels
* @param {number} change in pixels
* @param {boolean} [center] maintain the same center of the screen after zoom
* @return {Viewport} the viewport
*/
}, {
key: 'zoom',
value: function zoom(change, center) {
this.fitWidth(change + this.worldScreenWidth, center);
return this;
}
/**
* @param {object} [options]
* @param {number} [options.width] the desired width to snap (to maintain aspect ratio, choose only width or height)
* @param {number} [options.height] the desired height to snap (to maintain aspect ratio, choose only width or height)
* @param {number} [options.time=1000]
* @param {string|function} [options.ease=easeInOutSine] ease function or name (see http://easings.net/ for supported names)
* @param {PIXI.Point} [options.center] place this point at center during zoom instead of center of the viewport
* @param {boolean} [options.interrupt=true] pause snapping with any user input on the viewport
* @param {boolean} [options.removeOnComplete] removes this plugin after snapping is complete
* @param {boolean} [options.removeOnInterrupt] removes this plugin if interrupted by any user input
* @param {boolean} [options.forceStart] starts the snap immediately regardless of whether the viewport is at the desired zoom
*/
}, {
key: 'snapZoom',
value: function snapZoom(options) {
this.plugins['snap-zoom'] = new SnapZoom(this, options);
this.pluginsSort();
return this;
}
/**
* @private
* @typedef OutOfBounds
* @type {object}
* @property {boolean} left
* @property {boolean} right
* @property {boolean} top
* @property {boolean} bottom
*/
/**
* is container out of world bounds
* @return {OutOfBounds}
* @private
*/
}, {
key: 'OOB',
value: function OOB() {
var result = {};
result.left = this.left < 0;
result.right = this.right > this._worldWidth;
result.top = this.top < 0;
result.bottom = this.bottom > this._worldHeight;
result.cornerPoint = {
x: this._worldWidth * this.scale.x - this._screenWidth,
y: this._worldHeight * this.scale.y - this._screenHeight
};
return result;
}
/**
* world coordinates of the right edge of the screen
* @type {number}
*/
}, {
key: 'countDownPointers',
/**
* count of mouse/touch pointers that are down on the viewport
* @private
* @return {number}
*/
value: function countDownPointers() {
return (this.leftDown ? 1 : 0) + this.touches.length;
}
/**
* array of touch pointers that are down on the viewport
* @private
* @return {PIXI.InteractionTrackingData[]}
*/
}, {
key: 'getTouchPointers',
value: function getTouchPointers() {
var results = [];
var pointers = this.trackedPointers;
for (var key in pointers) {
var pointer = pointers[key];
if (this.touches.indexOf(pointer.pointerId) !== -1) {
results.push(pointer);
}
}
return results;
}
/**
* array of pointers that are down on the viewport
* @private
* @return {PIXI.InteractionTrackingData[]}
*/
}, {
key: 'getPointers',
value: function getPointers() {
var results = [];
var pointers = this.trackedPointers;
for (var key in pointers) {
results.push(pointers[key]);
}
return results;
}
/**
* clamps and resets bounce and decelerate (as needed) after manually moving viewport
* @private
*/
}, {
key: '_reset',
value: function _reset() {
if (this.plugins['bounce']) {
this.plugins['bounce'].reset();
this.plugins['bounce'].bounce();
}
if (this.plugins['decelerate']) {
this.plugins['decelerate'].reset();
}
if (this.plugins['snap']) {
this.plugins['snap'].reset();
}
if (this.plugins['clamp']) {
this.plugins['clamp'].update();
}
if (this.plugins['clamp-zoom']) {
this.plugins['clamp-zoom'].clamp();
}
this.dirty = true;
}
// PLUGINS
/**
* removes installed plugin
* @param {string} type of plugin (e.g., 'drag', 'pinch')
*/
}, {
key: 'removePlugin',
value: function removePlugin(type) {
if (this.plugins[type]) {
this.plugins[type] = null;
this.emit(type + '-remove');
this.pluginsSort();
}
}
/**
* pause plugin
* @param {string} type of plugin (e.g., 'drag', 'pinch')
*/
}, {
key: 'pausePlugin',
value: function pausePlugin(type) {
if (this.plugins[type]) {
this.plugins[type].pause();
}
}
/**
* resume plugin
* @param {string} type of plugin (e.g., 'drag', 'pinch')
*/
}, {
key: 'resumePlugin',
value: function resumePlugin(type) {
if (this.plugins[type]) {
this.plugins[type].resume();
}
}
/**
* sort plugins for updates
* @private
*/
}, {
key: 'pluginsSort',
value: function pluginsSort() {
this.pluginsList = [];
var _iteratorNormalCompletion7 = true;
var _didIteratorError7 = false;
var _iteratorError7 = undefined;
try {
for (var _iterator7 = PLUGIN_ORDER[Symbol.iterator](), _step7; !(_iteratorNormalCompletion7 = (_step7 = _iterator7.next()).done); _iteratorNormalCompletion7 = true) {
var plugin = _step7.value;
if (this.plugins[plugin]) {
this.pluginsList.push(this.plugins[plugin]);
}
}
} catch (err) {
_didIteratorError7 = true;
_iteratorError7 = err;
} finally {
try {
if (!_iteratorNormalCompletion7 && _iterator7.return) {
_iterator7.return();
}
} finally {
if (_didIteratorError7) {
throw _iteratorError7;
}
}
}
}
/**
* enable one-finger touch to drag
* @param {object} [options]
* @param {string} [options.direction=all] direction to drag (all, x, or y)
* @param {boolean} [options.wheel=true] use wheel to scroll in y direction (unless wheel plugin is active)
* @param {number} [options.wheelScroll=10] number of pixels to scroll with each wheel spin
* @param {boolean} [options.reverse] reverse the direction of the wheel scroll
* @param {string} [options.underflow=center] (top/bottom/center and left/right/center, or center) where to place world if too small for screen
*/
}, {
key: 'drag',
value: function drag(options) {
this.plugins['drag'] = new Drag(this, options);
this.pluginsSort();
return this;
}
/**
* clamp to world boundaries or other provided boundaries
* NOTES:
* clamp is disabled if called with no options; use { direction: 'all' } for all edge clamping
* screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
* @param {object} [options]
* @param {(number|boolean)} [options.left] clamp left; true=0
* @param {(number|boolean)} [options.right] clamp right; true=viewport.worldWidth
* @param {(number|boolean)} [options.top] clamp top; true=0
* @param {(number|boolean)} [options.bottom] clamp bottom; true=viewport.worldHeight
* @param {string} [options.direction] (all, x, or y) using clamps of [0, viewport.worldWidth/viewport.worldHeight]; replaces left/right/top/bottom if set
* @param {string} [options.underflow=center] (top/bottom/center and left/right/center, or center) where to place world if too small for screen
* @return {Viewport} this
*/
}, {
key: 'clamp',
value: function clamp(options) {
this.plugins['clamp'] = new Clamp(this, options);
this.pluginsSort();
return this;
}
/**
* decelerate after a move
* @param {object} [options]
* @param {number} [options.friction=0.95] percent to decelerate after movement
* @param {number} [options.bounce=0.8] percent to decelerate when past boundaries (only applicable when viewport.bounce() is active)
* @param {number} [options.minSpeed=0.01] minimum velocity before stopping/reversing acceleration
* @return {Viewport} this
*/
}, {
key: 'decelerate',
value: function decelerate(options) {
this.plugins['decelerate'] = new Decelerate(this, options);
this.pluginsSort();
return this;
}
/**
* bounce on borders
* NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
* @param {object} [options]
* @param {string} [options.sides=all] all, horizontal, vertical, or combination of top, bottom, right, left (e.g., 'top-bottom-right')
* @param {number} [options.friction=0.5] friction to apply to decelerate if active
* @param {number} [options.time=150] time in ms to finish bounce
* @param {string|function} [options.ease=easeInOutSine] ease function or name (see http://easings.net/ for supported names)
* @param {string} [options.underflow=center] (top/bottom/center and left/right/center, or center) where to place world if too small for screen
* @return {Viewport} this
*/
}, {
key: 'bounce',
value: function bounce(options) {
this.plugins['bounce'] = new Bounce(this, options);
this.pluginsSort();
return this;
}
/**
* enable pinch to zoom and two-finger touch to drag
* NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
* @param {number} [options.percent=1.0] percent to modify pinch speed
* @param {boolean} [options.noDrag] disable two-finger dragging
* @param {PIXI.Point} [options.center] place this point at center during zoom instead of center of two fingers
* @return {Viewport} this
*/
}, {
key: 'pinch',
value: function pinch(options) {
this.plugins['pinch'] = new Pinch(this, options);
this.pluginsSort();
return this;
}
/**
* snap to a point
* @param {number} x
* @param {number} y
* @param {object} [options]
* @param {boolean} [options.topLeft] snap to the top-left of viewport instead of center
* @param {number} [options.friction=0.8] friction/frame to apply if decelerate is active
* @param {number} [options.time=1000]
* @param {string|function} [options.ease=easeInOutSine] ease function or name (see http://easings.net/ for supported names)
* @param {boolean} [options.interrupt=true] pause snapping with any user input on the viewport
* @param {boolean} [options.removeOnComplete] removes this plugin after snapping is complete
* @param {boolean} [options.removeOnInterrupt] removes this plugin if interrupted by any user input
* @param {boolean} [options.forceStart] starts the snap immediately regardless of whether the viewport is at the desired location
* @return {Viewport} this
*/
}, {
key: 'snap',
value: function snap(x, y, options) {
this.plugins['snap'] = new Snap(this, x, y, options);
this.pluginsSort();
return this;
}
/**
* follow a target
* @param {PIXI.DisplayObject} target to follow (object must include {x: x-coordinate, y: y-coordinate})
* @param {object} [options]
* @param {number} [options.speed=0] to follow in pixels/frame (0=teleport to location)
* @param {number} [options.radius] radius (in world coordinates) of center circle where movement is allowed without moving the viewport
* @return {Viewport} this
*/
}, {
key: 'follow',
value: function follow(target, options) {
this.plugins['follow'] = new Follow(this, target, options);
this.pluginsSort();
return this;
}
/**
* zoom using mouse wheel
* @param {object} [options]
* @param {number} [options.percent=0.1] percent to scroll with each spin
* @param {boolean} [options.reverse] reverse the direction of the scroll
* @param {PIXI.Point} [options.center] place this point at center during zoom instead of current mouse position
* @return {Viewport} this
*/
}, {
key: 'wheel',
value: function wheel(options) {
this.plugins['wheel'] = new Wheel(this, options);
this.pluginsSort();
return this;
}
/**
* enable clamping of zoom to constraints
* NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly
* @param {object} [options]
* @param {number} [options.minWidth] minimum width
* @param {number} [options.minHeight] minimum height
* @param {number} [options.maxWidth] maximum width
* @param {number} [options.maxHeight] maximum height
* @return {Viewport} this
*/
}, {
key: 'clampZoom',
value: function clampZoom(options) {
this.plugins['clamp-zoom'] = new ClampZoom(this, options);
this.pluginsSort();
return this;
}
/**
* Scroll viewport when mouse hovers near one of the edges or radius-distance from center of screen.
* @param {object} [options]
* @param {number} [options.radius] distance from center of screen in screen pixels
* @param {number} [options.distance] distance from all sides in screen pixels
* @param {number} [options.top] alternatively, set top distance (leave unset for no top scroll)
* @param {number} [options.bottom] alternatively, set bottom distance (leave unset for no top scroll)
* @param {number} [options.left] alternatively, set left distance (leave unset for no top scroll)
* @param {number} [options.right] alternatively, set right distance (leave unset for no top scroll)
* @param {number} [options.speed=8] speed in pixels/frame to scroll viewport
* @param {boolean} [options.reverse] reverse direction of scroll
* @param {boolean} [options.noDecelerate] don't use decelerate plugin even if it's installed
* @param {boolean} [options.linear] if using radius, use linear movement (+/- 1, +/- 1) instead of angled movement (Math.cos(angle from center), Math.sin(angle from center))
*/
}, {
key: 'mouseEdges',
value: function mouseEdges(options) {
this.plugins['mouse-edges'] = new MouseEdges(this, options);
this.pluginsSort();
return this;
}
/**
* pause viewport (including animation updates such as decelerate)
* NOTE: when setting pause=true, all touches and mouse actions are cleared (i.e., if mousedown was active, it becomes inactive for purposes of the viewport)
* @type {boolean}
*/
}, {
key: 'screenWidth',
get: function get() {
return this._screenWidth;
},
set: function set(value) {
this._screenWidth = value;
}
/**
* screen height in screen pixels
* @type {number}
*/
}, {
key: 'screenHeight',
get: function get() {
return this._screenHeight;
},
set: function set(value) {
this._screenHeight = value;
}
/**
* world width in pixels
* @type {number}
*/
}, {
key: 'worldWidth',
get: function get() {
if (this._worldWidth) {
return this._worldWidth;
} else {
return this.width;
}
},
set: function set(value) {
this._worldWidth = value;
this.resizePlugins();
}
/**
* world height in pixels
* @type {number}
*/
}, {
key: 'worldHeight',
get: function get() {
if (this._worldHeight) {
return this._worldHeight;
} else {
return this.height;
}
},
set: function set(value) {
this._worldHeight = value;
this.resizePlugins();
}
}, {
key: 'worldScreenWidth',
get: function get() {
return this._screenWidth / this.scale.x;
}
/**
* screen height in world coordinates
* @type {number}
* @readonly
*/
}, {
key: 'worldScreenHeight',
get: function get() {
return this._screenHeight / this.scale.y;
}
/**
* world width in screen coordinates
* @type {number}
* @readonly
*/
}, {
key: 'screenWorldWidth',
get: function get() {
return this._worldWidth * this.scale.x;
}
/**
* world height in screen coordinates
* @type {number}
* @readonly
*/
}, {
key: 'screenWorldHeight',
get: function get() {
return this._worldHeight * this.scale.y;
}
/**
* get center of screen in world coordinates
* @type {PIXI.PointLike}
*/
}, {
key: 'center',
get: function get() {
return { x: this.worldScreenWidth / 2 - this.x / this.scale.x, y: this.worldScreenHeight / 2 - this.y / this.scale.y };
},
set: function set(value) {
this.moveCenter(value);
}
}, {
key: 'corner',
get: function get() {
return { x: -this.x / this.scale.x, y: -this.y / this.scale.y };
},
set: function set(value) {
this.moveCorner(value);
}
}, {
key: 'right',
get: function get() {
return -this.x / this.scale.x + this.worldScreenWidth;
},
set: function set(value) {
this.x = -value * this.scale.x + this.screenWidth;
this._reset();
}
/**
* world coordinates of the left edge of the screen
* @type {number}
*/
}, {
key: 'left',
get: function get() {
return -this.x / this.scale.x;
},
set: function set(value) {
this.x = -value * this.scale.x;
this._reset();
}
/**
* world coordinates of the top edge of the screen
* @type {number}
*/
}, {
key: 'top',
get: function get() {
return -this.y / this.scale.y;
},
set: function set(value) {
this.y = -value * this.scale.y;
this._reset();
}
/**
* world coordinates of the bottom edge of the screen
* @type {number}
*/
}, {
key: 'bottom',
get: function get() {
return -this.y / this.scale.y + this.worldScreenHeight;
},
set: function set(value) {
this.y = -value * this.scale.y + this.screenHeight;
this._reset();
}
/**
* determines whether the viewport is dirty (i.e., needs to be renderered to the screen because of a change)
* @type {boolean}
*/
}, {
key: 'dirty',
get: function get() {
return this._dirty;
},
set: function set(value) {
this._dirty = value;
}
/**
* permanently changes the Viewport's hitArea
* <p>NOTE: normally the hitArea = PIXI.Rectangle(Viewport.left, Viewport.top, Viewport.worldScreenWidth, Viewport.worldScreenHeight)</p>
* @type {(PIXI.Rectangle|PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.RoundedRectangle)}
*/
}, {
key: 'forceHitArea',
get: function get() {
return this._forceHitArea;
},
set: function set(value) {
if (value) {
this._forceHitArea = value;
this.hitArea = value;
} else {
this._forceHitArea = false;
this.hitArea = new PIXI.Rectangle(0, 0, this.worldWidth, this.worldHeight);
}
}
}, {
key: 'pause',
get: function get() {
return this._pause;
},
set: function set(value) {
this._pause = value;
if (value) {
this.touches = [];
this.leftDown = false;
}
}
}]);
return Viewport;
}(PIXI.Container);
/**
* fires after a mouse or touch click
* @event Viewport#clicked
* @type {object}
* @property {PIXI.PointLike} screen
* @property {PIXI.PointLike} world
* @property {Viewport} viewport
*/
/**
* fires when a drag starts
* @event Viewport#drag-start
* @type {object}
* @property {PIXI.PointLike} screen
* @property {PIXI.PointLike} world
* @property {Viewport} viewport
*/
/**
* fires when a drag ends
* @event Viewport#drag-end
* @type {object}
* @property {PIXI.PointLike} screen
* @property {PIXI.PointLike} world
* @property {Viewport} viewport
*/
/**
* fires when a pinch starts
* @event Viewport#pinch-start
* @type {Viewport}
*/
/**
* fires when a pinch end
* @event Viewport#pinch-end
* @type {Viewport}
*/
/**
* fires when a snap starts
* @event Viewport#snap-start
* @type {Viewport}
*/
/**
* fires when a snap ends
* @event Viewport#snap-end
* @type {Viewport}
*/
/**
* fires when a snap-zoom starts
* @event Viewport#snap-zoom-start
* @type {Viewport}
*/
/**
* fires when a snap-zoom ends
* @event Viewport#snap-zoom-end
* @type {Viewport}
*/
/**
* fires when a bounce starts in the x direction
* @event Viewport#bounce-x-start
* @type {Viewport}
*/
/**
* fires when a bounce ends in the x direction
* @event Viewport#bounce-x-end
* @type {Viewport}
*/
/**
* fires when a bounce starts in the y direction
* @event Viewport#bounce-y-start
* @type {Viewport}
*/
/**
* fires when a bounce ends in the y direction
* @event Viewport#bounce-y-end
* @type {Viewport}
*/
/**
* fires when for a mouse wheel event
* @event Viewport#wheel
* @type {object}
* @property {object} wheel
* @property {number} wheel.dx
* @property {number} wheel.dy
* @property {number} wheel.dz
* @property {Viewport} viewport
*/
/**
* fires when a wheel-scroll occurs
* @event Viewport#wheel-scroll
* @type {Viewport}
*/
/**
* fires when a mouse-edge starts to scroll
* @event Viewport#mouse-edge-start
* @type {Viewport}
*/
/**
* fires when the mouse-edge scrolling ends
* @event Viewport#mouse-edge-end
* @type {Viewport}
*/
/**
* fires when viewport moves through UI interaction, deceleration, or follow
* @event Viewport#moved
* @type {object}
* @property {Viewport} viewport
* @property {string} type (drag, snap, pinch, follow, bounce-x, bounce-y, clamp-x, clamp-y, decelerate, mouse-edges, wheel)
*/
/**
* fires when viewport moves through UI interaction, deceleration, or follow
* @event Viewport#zoomed
* @type {object}
* @property {Viewport} viewport
* @property {string} type (drag-zoom, pinch, wheel, clamp-zoom)
*/
PIXI.extras.Viewport = Viewport;
module.exports = Viewport;
},{"./bounce":1,"./clamp":3,"./clamp-zoom":2,"./decelerate":4,"./drag":5,"./follow":6,"./mouse-edges":7,"./pinch":8,"./snap":11,"./snap-zoom":10,"./utils":12,"./wheel":14}],14:[function(require,module,exports){
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Plugin = require('./plugin');
module.exports = function (_Plugin) {
_inherits(Wheel, _Plugin);
/**
* @private
* @param {Viewport} parent
* @param {object} [options]
* @param {number} [options.percent=0.1] percent to scroll with each spin
* @param {boolean} [options.reverse] reverse the direction of the scroll
* @param {PIXI.Point} [options.center] place this point at center during zoom instead of current mouse position
*
* @event wheel({wheel: {dx, dy, dz}, event, viewport})
*/
function Wheel(parent, options) {
_classCallCheck(this, Wheel);
var _this = _possibleConstructorReturn(this, (Wheel.__proto__ || Object.getPrototypeOf(Wheel)).call(this, parent));
options = options || {};
_this.percent = options.percent || 0.1;
_this.center = options.center;
_this.reverse = options.reverse;
return _this;
}
_createClass(Wheel, [{
key: 'wheel',
value: function wheel(e) {
if (this.paused) {
return;
}
var change = void 0;
if (this.reverse) {
change = e.deltaY > 0 ? 1 + this.percent : 1 - this.percent;
} else {
change = e.deltaY > 0 ? 1 - this.percent : 1 + this.percent;
}
var point = this.parent.getPointerPosition(e);
var oldPoint = void 0;
if (!this.center) {
oldPoint = this.parent.toLocal(point);
}
this.parent.scale.x *= change;
this.parent.scale.y *= change;
this.parent.emit('zoomed', { viewport: this.parent, type: 'wheel' });
var clamp = this.parent.plugins['clamp-zoom'];
if (clamp) {
clamp.clamp();
}
if (this.center) {
this.parent.moveCenter(this.center);
} else {
var newPoint = this.parent.toGlobal(oldPoint);
this.parent.x += point.x - newPoint.x;
this.parent.y += point.y - newPoint.y;
}
this.parent.emit('moved', { viewport: this.parent, type: 'wheel' });
this.parent.emit('wheel', { wheel: { dx: e.deltaX, dy: e.deltaY, dz: e.deltaZ }, event: e, viewport: this.parent });
e.preventDefault();
}
}]);
return Wheel;
}(Plugin);
},{"./plugin":9}],15:[function(require,module,exports){
/*
Copyright © 2001 Robert Penner
All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
Redistributions of source code must retain the above copyright notice, this list of
conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this list
of conditions and the following disclaimer in the documentation and/or other materials
provided with the distribution.
Neither the name of the author nor the names of contributors may be used to endorse
or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
OF THE POSSIBILITY OF SUCH DAMAGE.
*/
(function() {
var penner, umd;
umd = function(factory) {
if (typeof exports === 'object') {
return module.exports = factory;
} else if (typeof define === 'function' && define.amd) {
return define([], factory);
} else {
return this.penner = factory;
}
};
penner = {
linear: function(t, b, c, d) {
return c * t / d + b;
},
easeInQuad: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOutQuad: function(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOutQuad: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
} else {
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
easeInCubic: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOutCubic: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOutCubic: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t + b;
} else {
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
easeInQuart: function(t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOutQuart: function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOutQuart: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t + b;
} else {
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
},
easeInQuint: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOutQuint: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOutQuint: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t * t + b;
} else {
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
},
easeInSine: function(t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: function(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOutSine: function(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
easeInExpo: function(t, b, c, d) {
if (t === 0) {
return b;
} else {
return c * Math.pow(2, 10 * (t / d - 1)) + b;
}
},
easeOutExpo: function(t, b, c, d) {
if (t === d) {
return b + c;
} else {
return c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
},
easeInOutExpo: function(t, b, c, d) {
if (t === 0) {
b;
}
if (t === d) {
b + c;
}
if ((t /= d / 2) < 1) {
return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
} else {
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
easeInCirc: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOutCirc: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOutCirc: function(t, b, c, d) {
if ((t /= d / 2) < 1) {
return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
} else {
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
easeInElastic: function(t, b, c, d) {
var a, p, s;
s = 1.70158;
p = 0;
a = c;
if (t === 0) {
b;
} else if ((t /= d) === 1) {
b + c;
}
if (!p) {
p = d * .3;
}
if (a < Math.abs(c)) {
a = c;
s = p / 4;
} else {
s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOutElastic: function(t, b, c, d) {
var a, p, s;
s = 1.70158;
p = 0;
a = c;
if (t === 0) {
b;
} else if ((t /= d) === 1) {
b + c;
}
if (!p) {
p = d * .3;
}
if (a < Math.abs(c)) {
a = c;
s = p / 4;
} else {
s = p / (2 * Math.PI) * Math.asin(c / a);
}
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
easeInOutElastic: function(t, b, c, d) {
var a, p, s;
s = 1.70158;
p = 0;
a = c;
if (t === 0) {
b;
} else if ((t /= d / 2) === 2) {
b + c;
}
if (!p) {
p = d * (.3 * 1.5);
}
if (a < Math.abs(c)) {
a = c;
s = p / 4;
} else {
s = p / (2 * Math.PI) * Math.asin(c / a);
}
if (t < 1) {
return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
} else {
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
},
easeInBack: function(t, b, c, d, s) {
if (s === void 0) {
s = 1.70158;
}
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOutBack: function(t, b, c, d, s) {
if (s === void 0) {
s = 1.70158;
}
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOutBack: function(t, b, c, d, s) {
if (s === void 0) {
s = 1.70158;
}
if ((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
} else {
return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
}
},
easeInBounce: function(t, b, c, d) {
var v;
v = penner.easeOutBounce(d - t, 0, c, d);
return c - v + b;
},
easeOutBounce: function(t, b, c, d) {
if ((t /= d) < 1 / 2.75) {
return c * (7.5625 * t * t) + b;
} else if (t < 2 / 2.75) {
return c * (7.5625 * (t -= 1.5 / 2.75) * t + .75) + b;
} else if (t < 2.5 / 2.75) {
return c * (7.5625 * (t -= 2.25 / 2.75) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= 2.625 / 2.75) * t + .984375) + b;
}
},
easeInOutBounce: function(t, b, c, d) {
var v;
if (t < d / 2) {
v = penner.easeInBounce(t * 2, 0, c, d);
return v * .5 + b;
} else {
v = penner.easeOutBounce(t * 2 - d, 0, c, d);
return v * .5 + c * .5 + b;
}
}
};
umd(penner);
}).call(this);
},{}]},{},[13]);
Reference in New Issue Copy Permalink