From e75e8cc0e35bdc7333ccc0c0ea8208c21390db5a Mon Sep 17 00:00:00 2001 From: sculove Date: Fri, 12 Jan 2018 17:37:41 +0900 Subject: [PATCH] chore(env): support es modules ref #90 --- .gitignore | 1 - declaration/index.d.ts | 6 +- declaration/index.umd.d.ts | 2 + demo/started.md | 16 +-- outjs/AnimationManager.js | 201 ++++++++++++++++++++++++++++++ outjs/Axes.js | 122 +++++++++++++++++++ outjs/AxisManager.js | 122 +++++++++++++++++++ outjs/Coordinate.js | 39 ++++++ outjs/EventManager.js | 82 +++++++++++++ outjs/InputObserver.js | 140 +++++++++++++++++++++ outjs/InterruptManager.js | 20 +++ outjs/const.js | 23 ++++ outjs/index.js | 12 ++ outjs/index.umd.js | 11 ++ outjs/inputType/InputType.js | 49 ++++++++ outjs/inputType/MoveKeyInput.js | 111 +++++++++++++++++ outjs/inputType/PanInput.js | 210 ++++++++++++++++++++++++++++++++ outjs/inputType/PinchInput.js | 135 ++++++++++++++++++++ outjs/inputType/WheelInput.js | 89 ++++++++++++++ outjs/utils.js | 84 +++++++++++++ package.json | 9 +- src/index.ts | 16 +-- src/index.umd.ts | 12 ++ tsconfig.declaration.json | 2 +- tsconfig.doc.json | 6 - tsconfig.json | 3 +- webpack.config.js | 2 +- 27 files changed, 1491 insertions(+), 34 deletions(-) create mode 100644 declaration/index.umd.d.ts create mode 100644 outjs/AnimationManager.js create mode 100644 outjs/Axes.js create mode 100644 outjs/AxisManager.js create mode 100644 outjs/Coordinate.js create mode 100644 outjs/EventManager.js create mode 100644 outjs/InputObserver.js create mode 100644 outjs/InterruptManager.js create mode 100644 outjs/const.js create mode 100644 outjs/index.js create mode 100644 outjs/index.umd.js create mode 100644 outjs/inputType/InputType.js create mode 100644 outjs/inputType/MoveKeyInput.js create mode 100644 outjs/inputType/PanInput.js create mode 100644 outjs/inputType/PinchInput.js create mode 100644 outjs/inputType/WheelInput.js create mode 100644 outjs/utils.js create mode 100755 src/index.umd.ts delete mode 100644 tsconfig.doc.json diff --git a/.gitignore b/.gitignore index 43627ecb..9aea236d 100644 --- a/.gitignore +++ b/.gitignore @@ -203,7 +203,6 @@ GitHub.sublime-settings !.vscode/extensions.json ### Custom ### -outjs/ report/ temp/ doc/ diff --git a/declaration/index.d.ts b/declaration/index.d.ts index 99991532..30de3f95 100644 --- a/declaration/index.d.ts +++ b/declaration/index.d.ts @@ -1,2 +1,6 @@ import Axes from "./Axes"; -export = Axes; +export { PanInput } from "./inputType/PanInput"; +export { PinchInput } from "./inputType/PinchInput"; +export { WheelInput } from "./inputType/WheelInput"; +export { MoveKeyInput } from "./inputType/MoveKeyInput"; +export default Axes; diff --git a/declaration/index.umd.d.ts b/declaration/index.umd.d.ts new file mode 100644 index 00000000..99991532 --- /dev/null +++ b/declaration/index.umd.d.ts @@ -0,0 +1,2 @@ +import Axes from "./Axes"; +export = Axes; diff --git a/demo/started.md b/demo/started.md index ea782b48..3c68ba43 100644 --- a/demo/started.md +++ b/demo/started.md @@ -20,17 +20,17 @@ IE 10+, latest of Chrome/FF/Safari, iOS 7+ and Android 2.3+ (except 3.x) ##### ES6+ ```js -import Axes from "@egjs/axes"; +import Axes, {PanInput, PinchInput, WheelInput, MoveKeyInput} from "@egjs/axes"; ``` -#### 3. Initialize eg.Axes +#### 3. Initialize Axes -Initialize eg.Axes. specify the axis to be used. +Initialize Axes. specify the axis to be used. The key of the axis specifies the name to use as the logical virtual coordinate system. ```js // create eg.Axes with option -const axes = new eg.Axes({ +const axes = new Axes({ something1: { range: [0, 100] }, something2: { range: [0, 100] }, somethingN: { range: [-200, 200] } @@ -63,10 +63,10 @@ Axes provides three inputTypes. ```js // create inputTypes to use -const panInput = new eg.Axes.PanInput("#area"); -const wheelInput = new eg.Axes.WheelInput("#wArea"); -const pinchInput = new eg.Axes.PinchInput("#pArea"); -const movekeyInput = new eg.Axes.MoveKeyInput("#mArea"); +const panInput = new PanInput("#area"); +const wheelInput = new WheelInput("#wArea"); +const pinchInput = new PinchInput("#pArea"); +const movekeyInput = new MoveKeyInput("#mArea"); ``` #### 6. Connect eg.Axes and InputTypes diff --git a/outjs/AnimationManager.js b/outjs/AnimationManager.js new file mode 100644 index 00000000..6721cd29 --- /dev/null +++ b/outjs/AnimationManager.js @@ -0,0 +1,201 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var Coordinate_1 = require("./Coordinate"); +var AxisManager_1 = require("./AxisManager"); +var utils_1 = require("./utils"); +var AnimationManager = (function () { + function AnimationManager(_a) { + var options = _a.options, itm = _a.itm, em = _a.em, axm = _a.axm; + this.options = options; + this.itm = itm; + this.em = em; + this.axm = axm; + this.animationEnd = this.animationEnd.bind(this); + } + AnimationManager.getDuration = function (duration, min, max) { + return Math.max(Math.min(duration, max), min); + }; + AnimationManager.prototype.getDuration = function (depaPos, destPos, wishDuration) { + var _this = this; + var duration; + if (typeof wishDuration !== "undefined") { + duration = wishDuration; + } + else { + var durations_1 = this.axm.map(destPos, function (v, k) { return Coordinate_1["default"].getDuration(Math.abs(Math.abs(v) - Math.abs(depaPos[k])), _this.options.deceleration); }); + duration = Object.keys(durations_1).reduce(function (max, v) { return Math.max(max, durations_1[v]); }, -Infinity); + } + return AnimationManager.getDuration(duration, this.options.minimumDuration, this.options.maximumDuration); + }; + AnimationManager.prototype.createAnimationParam = function (pos, duration, option) { + var depaPos = this.axm.get(); + var destPos = pos; + var inputEvent = option && option.event || null; + return { + depaPos: depaPos, + destPos: destPos, + duration: AnimationManager.getDuration(duration, this.options.minimumDuration, this.options.maximumDuration), + delta: this.axm.getDelta(depaPos, destPos), + inputEvent: inputEvent, + input: option && option.input || null, + isTrusted: !!inputEvent, + done: this.animationEnd + }; + }; + AnimationManager.prototype.grab = function (axes, option) { + if (this._animateParam && axes.length) { + var orgPos_1 = this.axm.get(axes); + var pos = this.axm.map(orgPos_1, function (v, k, opt) { return Coordinate_1["default"].getCirculatedPos(v, opt.range, opt.circular); }); + if (!this.axm.every(pos, function (v, k) { return orgPos_1[k] === v; })) { + this.em.triggerChange(pos, option, !!option); + } + this._animateParam = null; + this._raf && utils_1.cancelAnimationFrame(this._raf); + this._raf = null; + this.em.triggerAnimationEnd(!!(option && option.event)); + } + }; + AnimationManager.prototype.getEventInfo = function () { + if (this._animateParam && this._animateParam.input && this._animateParam.inputEvent) { + return { + input: this._animateParam.input, + event: this._animateParam.inputEvent + }; + } + else { + return null; + } + }; + AnimationManager.prototype.restore = function (option) { + var pos = this.axm.get(); + var destPos = this.axm.map(pos, function (v, k, opt) { return Math.min(opt.range[1], Math.max(opt.range[0], v)); }); + this.animateTo(destPos, this.getDuration(pos, destPos), option); + }; + AnimationManager.prototype.animationEnd = function () { + var beforeParam = this.getEventInfo(); + this._animateParam = null; + var circularTargets = this.axm.filter(this.axm.get(), function (v, k, opt) { return Coordinate_1["default"].isCircularable(v, opt.range, opt.circular); }); + Object.keys(circularTargets).length > 0 && this.setTo(this.axm.map(circularTargets, function (v, k, opt) { return Coordinate_1["default"].getCirculatedPos(v, opt.range, opt.circular); })); + this.itm.setInterrupt(false); + this.em.triggerAnimationEnd(!!beforeParam); + if (this.axm.isOutside()) { + this.restore(beforeParam); + } + else { + this.em.triggerFinish(!!beforeParam); + } + }; + AnimationManager.prototype.animateLoop = function (param, complete) { + this._animateParam = __assign({}, param); + this._animateParam.startTime = new Date().getTime(); + if (param.duration) { + var info_1 = this._animateParam; + var self_1 = this; + (function loop() { + self_1._raf = null; + if (self_1.frame(info_1) >= 1) { + if (!AxisManager_1.AxisManager.equal(param.destPos, self_1.axm.get(Object.keys(param.destPos)))) { + self_1.em.triggerChange(param.destPos); + } + complete(); + return; + } + self_1._raf = utils_1.requestAnimationFrame(loop); + })(); + } + else { + this.em.triggerChange(param.destPos); + complete(); + } + }; + AnimationManager.prototype.getUserControll = function (param) { + var userWish = param.setTo(); + userWish.destPos = this.axm.get(userWish.destPos); + userWish.duration = AnimationManager.getDuration(userWish.duration, this.options.minimumDuration, this.options.maximumDuration); + return userWish; + }; + AnimationManager.prototype.animateTo = function (destPos, duration, option) { + var _this = this; + var param = this.createAnimationParam(destPos, duration, option); + var depaPos = __assign({}, param.depaPos); + var retTrigger = this.em.triggerAnimationStart(param); + var userWish = this.getUserControll(param); + if (!retTrigger && this.axm.every(userWish.destPos, function (v, k, opt) { return Coordinate_1["default"].isCircularable(v, opt.range, opt.circular); })) { + console.warn("You can't stop the 'animation' event when 'circular' is true."); + } + if (retTrigger && !AxisManager_1.AxisManager.equal(userWish.destPos, depaPos)) { + var inputEvent = option && option.event || null; + this.animateLoop({ + depaPos: depaPos, + destPos: userWish.destPos, + duration: userWish.duration, + delta: this.axm.getDelta(depaPos, userWish.destPos), + isTrusted: !!inputEvent, + inputEvent: inputEvent, + input: option && option.input || null + }, function () { return _this.animationEnd(); }); + } + }; + AnimationManager.prototype.frame = function (param) { + var curTime = new Date().getTime() - param.startTime; + var easingPer = this.easing(curTime / param.duration); + var toPos = param.depaPos; + toPos = this.axm.map(toPos, function (v, k, opt) { + v += param.delta[k] * easingPer; + return Coordinate_1["default"].getCirculatedPos(v, opt.range, opt.circular); + }); + this.em.triggerChange(toPos); + return easingPer; + }; + AnimationManager.prototype.easing = function (p) { + return p > 1 ? 1 : this.options.easing(p); + }; + AnimationManager.prototype.setTo = function (pos, duration) { + if (duration === void 0) { duration = 0; } + var axes = Object.keys(pos); + this.grab(axes); + var orgPos = this.axm.get(axes); + if (AxisManager_1.AxisManager.equal(pos, orgPos)) { + return this; + } + this.itm.setInterrupt(true); + var movedPos = this.axm.filter(pos, function (v, k) { return orgPos[k] !== v; }); + if (!Object.keys(movedPos).length) { + return this; + } + movedPos = this.axm.map(movedPos, function (v, k, opt) { + if (opt.circular && (opt.circular[0] || opt.circular[1])) { + return duration > 0 ? v : Coordinate_1["default"].getCirculatedPos(v, opt.range, opt.circular); + } + else { + return Coordinate_1["default"].getInsidePosition(v, opt.range, opt.circular); + } + }); + if (AxisManager_1.AxisManager.equal(movedPos, orgPos)) { + return this; + } + if (duration > 0) { + this.animateTo(movedPos, duration); + } + else { + this.em.triggerChange(movedPos); + this.itm.setInterrupt(false); + } + return this; + }; + AnimationManager.prototype.setBy = function (pos, duration) { + if (duration === void 0) { duration = 0; } + return this.setTo(this.axm.map(this.axm.get(Object.keys(pos)), function (v, k) { return v + pos[k]; }), duration); + }; + return AnimationManager; +}()); +exports.AnimationManager = AnimationManager; +; diff --git a/outjs/Axes.js b/outjs/Axes.js new file mode 100644 index 00000000..a3d46770 --- /dev/null +++ b/outjs/Axes.js @@ -0,0 +1,122 @@ +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var Component = require("@egjs/component"); +var AnimationManager_1 = require("./AnimationManager"); +var EventManager_1 = require("./EventManager"); +var InterruptManager_1 = require("./InterruptManager"); +var AxisManager_1 = require("./AxisManager"); +var InputObserver_1 = require("./InputObserver"); +var const_1 = require("./const"); +var Axes = (function (_super) { + __extends(Axes, _super); + function Axes(axis, options, startPos) { + if (axis === void 0) { axis = {}; } + var _this = _super.call(this) || this; + _this.axis = axis; + _this._inputs = []; + _this.options = __assign({ + easing: function easeOutCubic(x) { + return 1 - Math.pow(1 - x, 3); + }, + interruptable: true, + maximumDuration: Infinity, + minimumDuration: 0, + deceleration: 0.0006 + }, options); + _this.itm = new InterruptManager_1.InterruptManager(_this.options); + _this.axm = new AxisManager_1.AxisManager(_this.axis, _this.options); + _this.em = new EventManager_1.EventManager(_this); + _this.am = new AnimationManager_1.AnimationManager(_this); + _this.io = new InputObserver_1.InputObserver(_this); + _this.em.setAnimationManager(_this.am); + startPos && _this.em.triggerChange(startPos); + return _this; + } + Axes.prototype.connect = function (axes, inputType) { + var mapped; + if (typeof axes === "string") { + mapped = axes.split(" "); + } + else { + mapped = axes.concat(); + } + if (~this._inputs.indexOf(inputType)) { + this.disconnect(inputType); + } + if ("hammer" in inputType) { + var targets = this._inputs.filter(function (v) { return v.hammer && v.element === inputType.element; }); + if (targets.length) { + inputType.hammer = targets[0].hammer; + } + } + inputType.mapAxes(mapped); + inputType.connect(this.io); + this._inputs.push(inputType); + return this; + }; + Axes.prototype.disconnect = function (inputType) { + if (inputType) { + var index = this._inputs.indexOf(inputType); + if (index >= 0) { + this._inputs[index].disconnect(); + this._inputs.splice(index, 1); + } + } + else { + this._inputs.forEach(function (v) { return v.disconnect(); }); + this._inputs = []; + } + return this; + }; + Axes.prototype.get = function (axes) { + return this.axm.get(axes); + }; + Axes.prototype.setTo = function (pos, duration) { + if (duration === void 0) { duration = 0; } + this.am.setTo(pos, duration); + return this; + }; + Axes.prototype.setBy = function (pos, duration) { + if (duration === void 0) { duration = 0; } + this.am.setBy(pos, duration); + return this; + }; + Axes.prototype.isBounceArea = function (axes) { + return this.axm.isOutside(axes); + }; + Axes.prototype.destroy = function () { + this.disconnect(); + this.em.destroy(); + }; + Axes.VERSION = "#__VERSION__#"; + Axes.TRANSFORM = const_1.TRANSFORM; + Axes.DIRECTION_NONE = const_1.DIRECTION.DIRECTION_NONE; + Axes.DIRECTION_LEFT = const_1.DIRECTION.DIRECTION_LEFT; + Axes.DIRECTION_RIGHT = const_1.DIRECTION.DIRECTION_RIGHT; + Axes.DIRECTION_UP = const_1.DIRECTION.DIRECTION_UP; + Axes.DIRECTION_DOWN = const_1.DIRECTION.DIRECTION_DOWN; + Axes.DIRECTION_HORIZONTAL = const_1.DIRECTION.DIRECTION_HORIZONTAL; + Axes.DIRECTION_VERTICAL = const_1.DIRECTION.DIRECTION_VERTICAL; + Axes.DIRECTION_ALL = const_1.DIRECTION.DIRECTION_ALL; + return Axes; +}(Component)); +exports["default"] = Axes; +; diff --git a/outjs/AxisManager.js b/outjs/AxisManager.js new file mode 100644 index 00000000..09557f9b --- /dev/null +++ b/outjs/AxisManager.js @@ -0,0 +1,122 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var Coordinate_1 = require("./Coordinate"); +; +var AxisManager = (function () { + function AxisManager(axis, options) { + var _this = this; + this.axis = axis; + this.options = options; + this._complementOptions(); + this._pos = Object.keys(this.axis).reduce(function (acc, v) { + acc[v] = _this.axis[v].range[0]; + return acc; + }, {}); + } + AxisManager.equal = function (target, base) { + for (var k in target) { + if (target[k] !== base[k]) { + return false; + } + } + return true; + }; + AxisManager.prototype._complementOptions = function () { + var _this = this; + Object.keys(this.axis).forEach(function (axis) { + _this.axis[axis] = __assign({ + range: [0, 100], + bounce: [0, 0], + circular: [false, false] + }, _this.axis[axis]); + ["bounce", "circular"].forEach(function (v) { + var axisOption = _this.axis; + var key = axisOption[axis][v]; + if (/string|number|boolean/.test(typeof key)) { + axisOption[axis][v] = [key, key]; + } + }); + }); + }; + AxisManager.prototype.getDelta = function (depaPos, destPos) { + var fullDepaPos = this.get(depaPos); + return this.map(this.get(destPos), function (v, k) { return v - fullDepaPos[k]; }); + }; + AxisManager.prototype.get = function (axes) { + var _this = this; + if (axes && Array.isArray(axes)) { + return axes.reduce(function (acc, v) { + if (v && (v in _this._pos)) { + acc[v] = _this._pos[v]; + } + return acc; + }, {}); + } + else { + return __assign({}, this._pos, (axes || {})); + } + }; + AxisManager.prototype.moveTo = function (pos) { + var _this = this; + var delta = this.map(this._pos, function (v, key) { + return pos[key] ? pos[key] - _this._pos[key] : 0; + }); + this.set(pos); + return { + pos: __assign({}, this._pos), + delta: delta + }; + }; + AxisManager.prototype.set = function (pos) { + for (var k in pos) { + if (k && (k in this._pos)) { + this._pos[k] = pos[k]; + } + } + }; + AxisManager.prototype.every = function (pos, callback) { + var axisOptions = this.axis; + for (var k in pos) { + if (k) { + if (!callback(pos[k], k, axisOptions[k])) { + return false; + } + } + } + return true; + }; + AxisManager.prototype.filter = function (pos, callback) { + var filtered = {}; + var axisOptions = this.axis; + for (var k in pos) { + if (k) { + callback(pos[k], k, axisOptions[k]) && (filtered[k] = pos[k]); + } + } + return filtered; + }; + AxisManager.prototype.map = function (pos, callback) { + var tranformed = {}; + var axisOptions = this.axis; + for (var k in pos) { + if (k) { + tranformed[k] = callback(pos[k], k, axisOptions[k]); + } + } + return tranformed; + }; + AxisManager.prototype.isOutside = function (axes) { + return !this.every(axes ? this.get(axes) : this._pos, function (v, k, opt) { return !Coordinate_1["default"].isOutside(v, opt.range); }); + }; + return AxisManager; +}()); +exports.AxisManager = AxisManager; +; diff --git a/outjs/Coordinate.js b/outjs/Coordinate.js new file mode 100644 index 00000000..e6f1b324 --- /dev/null +++ b/outjs/Coordinate.js @@ -0,0 +1,39 @@ +"use strict"; +exports.__esModule = true; +var Coordinate = { + getInsidePosition: function (destPos, range, circular, bounce) { + var toDestPos = destPos; + var targetRange = [ + circular[0] ? range[0] : (bounce ? range[0] - bounce[0] : range[0]), + circular[1] ? range[1] : (bounce ? range[1] + bounce[1] : range[1]) + ]; + toDestPos = Math.max(targetRange[0], toDestPos); + toDestPos = Math.min(targetRange[1], toDestPos); + return +toDestPos.toFixed(5); + }, + isOutside: function (pos, range) { + return pos < range[0] || pos > range[1]; + }, + getDuration: function (distance, deceleration) { + var duration = Math.sqrt(distance / deceleration * 2); + return duration < 100 ? 0 : duration; + }, + isCircularable: function (destPos, range, circular) { + return (circular[1] && destPos > range[1]) || + (circular[0] && destPos < range[0]); + }, + getCirculatedPos: function (pos, range, circular) { + var toPos = pos; + var min = range[0]; + var max = range[1]; + var length = max - min; + if (circular[1] && pos > max) { + toPos = (toPos - max) % length + min; + } + if (circular[0] && pos < min) { + toPos = (toPos - min) % length + max; + } + return +toPos.toFixed(5); + } +}; +exports["default"] = Coordinate; diff --git a/outjs/EventManager.js b/outjs/EventManager.js new file mode 100644 index 00000000..36c08714 --- /dev/null +++ b/outjs/EventManager.js @@ -0,0 +1,82 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var EventManager = (function () { + function EventManager(axes) { + this.axes = axes; + } + EventManager.prototype.triggerHold = function (pos, option) { + this.axes.trigger("hold", { + pos: pos, + input: option.input || null, + inputEvent: option.event || null, + isTrusted: true + }); + }; + EventManager.prototype.triggerRelease = function (param) { + param.setTo = this.createUserControll(param.destPos, param.duration); + this.axes.trigger("release", param); + }; + EventManager.prototype.triggerChange = function (pos, option, holding) { + if (option === void 0) { option = null; } + if (holding === void 0) { holding = false; } + var eventInfo = this.am.getEventInfo(); + var moveTo = this.am.axm.moveTo(pos); + var inputEvent = option && option.event || eventInfo && eventInfo.event || null; + var param = { + pos: moveTo.pos, + delta: moveTo.delta, + holding: holding, + inputEvent: inputEvent, + isTrusted: !!inputEvent, + input: option && option.input || eventInfo && eventInfo.input || null, + set: inputEvent ? this.createUserControll(moveTo.pos) : function () { } + }; + this.axes.trigger("change", param); + inputEvent && this.am.axm.set(param.set()["destPos"]); + }; + EventManager.prototype.triggerAnimationStart = function (param) { + param.setTo = this.createUserControll(param.destPos, param.duration); + return this.axes.trigger("animationStart", param); + }; + EventManager.prototype.triggerAnimationEnd = function (isTrusted) { + if (isTrusted === void 0) { isTrusted = false; } + this.axes.trigger("animationEnd", { + isTrusted: isTrusted + }); + }; + EventManager.prototype.triggerFinish = function (isTrusted) { + if (isTrusted === void 0) { isTrusted = false; } + this.axes.trigger("finish", { + isTrusted: isTrusted + }); + }; + EventManager.prototype.createUserControll = function (pos, duration) { + if (duration === void 0) { duration = 0; } + var userControl = { + destPos: __assign({}, pos), + duration: duration + }; + return function (toPos, userDuration) { + toPos && (userControl.destPos = __assign({}, toPos)); + (userDuration !== undefined) && (userControl.duration = userDuration); + return userControl; + }; + }; + EventManager.prototype.setAnimationManager = function (am) { + this.am = am; + }; + EventManager.prototype.destroy = function () { + this.axes.off(); + }; + return EventManager; +}()); +exports.EventManager = EventManager; +; diff --git a/outjs/InputObserver.js b/outjs/InputObserver.js new file mode 100644 index 00000000..fd87ded2 --- /dev/null +++ b/outjs/InputObserver.js @@ -0,0 +1,140 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var AxisManager_1 = require("./AxisManager"); +var Coordinate_1 = require("./Coordinate"); +var InputObserver = (function () { + function InputObserver(_a) { + var options = _a.options, itm = _a.itm, em = _a.em, axm = _a.axm, am = _a.am; + this.isOutside = false; + this.moveDistance = null; + this.options = options; + this.itm = itm; + this.em = em; + this.axm = axm; + this.am = am; + } + InputObserver.prototype.atOutside = function (pos) { + var _this = this; + if (this.isOutside) { + return this.axm.map(pos, function (v, k, opt) { + var tn = opt.range[0] - opt.bounce[0]; + var tx = opt.range[1] + opt.bounce[1]; + return v > tx ? tx : (v < tn ? tn : v); + }); + } + else { + var initSlope_1 = this.am.easing(0.00001) / 0.00001; + return this.axm.map(pos, function (v, k, opt) { + var min = opt.range[0]; + var max = opt.range[1]; + var out = opt.bounce; + if (v < min) { + return min - _this.am.easing((min - v) / (out[0] * initSlope_1)) * out[0]; + } + else if (v > max) { + return max + _this.am.easing((v - max) / (out[1] * initSlope_1)) * out[1]; + } + return v; + }); + } + }; + InputObserver.prototype.get = function (input) { + return this.axm.get(input.axes); + }; + InputObserver.prototype.hold = function (input, event) { + if (this.itm.isInterrupted() || !input.axes.length) { + return; + } + var changeOption = { + input: input, + event: event + }; + this.itm.setInterrupt(true); + this.am.grab(input.axes, changeOption); + !this.moveDistance && this.em.triggerHold(this.axm.get(), changeOption); + this.isOutside = this.axm.isOutside(input.axes); + this.moveDistance = this.axm.get(input.axes); + }; + InputObserver.prototype.change = function (input, event, offset) { + if (!this.itm.isInterrupting() || this.axm.every(offset, function (v) { return v === 0; })) { + return; + } + var depaPos = this.axm.get(input.axes); + var destPos; + destPos = this.axm.map(this.moveDistance || depaPos, function (v, k) { return v + (offset[k] || 0); }); + this.moveDistance && (this.moveDistance = destPos); + destPos = this.axm.map(destPos, function (v, k, opt) { return Coordinate_1["default"].getCirculatedPos(v, opt.range, opt.circular); }); + if (this.isOutside && + this.axm.every(depaPos, function (v, k, opt) { return !Coordinate_1["default"].isOutside(v, opt.range); })) { + this.isOutside = false; + } + destPos = this.atOutside(destPos); + this.em.triggerChange(destPos, { + input: input, + event: event + }, true); + }; + InputObserver.prototype.release = function (input, event, offset, inputDuration) { + if (!this.itm.isInterrupting()) { + return; + } + if (!this.moveDistance) { + return; + } + var pos = this.axm.get(input.axes); + var depaPos = this.axm.get(); + var destPos = this.axm.get(this.axm.map(offset, function (v, k, opt) { + if (opt.circular && (opt.circular[0] || opt.circular[1])) { + return pos[k] + v; + } + else { + return Coordinate_1["default"].getInsidePosition(pos[k] + v, opt.range, opt.circular, opt.bounce); + } + })); + var duration = this.am.getDuration(destPos, pos, inputDuration); + if (duration === 0) { + destPos = __assign({}, depaPos); + } + var param = { + depaPos: depaPos, + destPos: destPos, + duration: duration, + delta: this.axm.getDelta(depaPos, destPos), + inputEvent: event, + input: input, + isTrusted: true + }; + this.em.triggerRelease(param); + this.moveDistance = null; + var userWish = this.am.getUserControll(param); + var isEqual = AxisManager_1.AxisManager.equal(userWish.destPos, depaPos); + var changeOption = { + input: input, + event: event + }; + if (isEqual || userWish.duration === 0) { + !isEqual && this.em.triggerChange(userWish.destPos, changeOption, true); + this.itm.setInterrupt(false); + if (this.axm.isOutside()) { + this.am.restore(changeOption); + } + else { + this.em.triggerFinish(true); + } + } + else { + this.am.animateTo(userWish.destPos, userWish.duration, changeOption); + } + }; + return InputObserver; +}()); +exports.InputObserver = InputObserver; +; diff --git a/outjs/InterruptManager.js b/outjs/InterruptManager.js new file mode 100644 index 00000000..b4bed9a8 --- /dev/null +++ b/outjs/InterruptManager.js @@ -0,0 +1,20 @@ +"use strict"; +exports.__esModule = true; +var InterruptManager = (function () { + function InterruptManager(options) { + this.options = options; + this._prevented = false; + } + InterruptManager.prototype.isInterrupting = function () { + return this.options.interruptable || this._prevented; + }; + InterruptManager.prototype.isInterrupted = function () { + return !this.options.interruptable && this._prevented; + }; + InterruptManager.prototype.setInterrupt = function (prevented) { + !this.options.interruptable && (this._prevented = prevented); + }; + return InterruptManager; +}()); +exports.InterruptManager = InterruptManager; +; diff --git a/outjs/const.js b/outjs/const.js new file mode 100644 index 00000000..be9a6b31 --- /dev/null +++ b/outjs/const.js @@ -0,0 +1,23 @@ +"use strict"; +exports.__esModule = true; +var DIRECTION; +(function (DIRECTION) { + DIRECTION[DIRECTION["DIRECTION_NONE"] = 1] = "DIRECTION_NONE"; + DIRECTION[DIRECTION["DIRECTION_LEFT"] = 2] = "DIRECTION_LEFT"; + DIRECTION[DIRECTION["DIRECTION_RIGHT"] = 4] = "DIRECTION_RIGHT"; + DIRECTION[DIRECTION["DIRECTION_HORIZONTAL"] = 6] = "DIRECTION_HORIZONTAL"; + DIRECTION[DIRECTION["DIRECTION_UP"] = 8] = "DIRECTION_UP"; + DIRECTION[DIRECTION["DIRECTION_DOWN"] = 16] = "DIRECTION_DOWN"; + DIRECTION[DIRECTION["DIRECTION_VERTICAL"] = 24] = "DIRECTION_VERTICAL"; + DIRECTION[DIRECTION["DIRECTION_ALL"] = 30] = "DIRECTION_ALL"; +})(DIRECTION = exports.DIRECTION || (exports.DIRECTION = {})); +exports.TRANSFORM = (function () { + var bodyStyle = (document.head || document.getElementsByTagName("head")[0]).style; + var target = ["transform", "webkitTransform", "msTransform", "mozTransform"]; + for (var i = 0, len = target.length; i < len; i++) { + if (target[i] in bodyStyle) { + return target[i]; + } + } + return ""; +})(); diff --git a/outjs/index.js b/outjs/index.js new file mode 100644 index 00000000..6116ba7f --- /dev/null +++ b/outjs/index.js @@ -0,0 +1,12 @@ +"use strict"; +exports.__esModule = true; +var Axes_1 = require("./Axes"); +var PanInput_1 = require("./inputType/PanInput"); +exports.PanInput = PanInput_1.PanInput; +var PinchInput_1 = require("./inputType/PinchInput"); +exports.PinchInput = PinchInput_1.PinchInput; +var WheelInput_1 = require("./inputType/WheelInput"); +exports.WheelInput = WheelInput_1.WheelInput; +var MoveKeyInput_1 = require("./inputType/MoveKeyInput"); +exports.MoveKeyInput = MoveKeyInput_1.MoveKeyInput; +exports["default"] = Axes_1["default"]; diff --git a/outjs/index.umd.js b/outjs/index.umd.js new file mode 100644 index 00000000..7d4288b0 --- /dev/null +++ b/outjs/index.umd.js @@ -0,0 +1,11 @@ +"use strict"; +var Axes_1 = require("./Axes"); +var PanInput_1 = require("./inputType/PanInput"); +var PinchInput_1 = require("./inputType/PinchInput"); +var WheelInput_1 = require("./inputType/WheelInput"); +var MoveKeyInput_1 = require("./inputType/MoveKeyInput"); +Axes_1["default"].PanInput = PanInput_1.PanInput; +Axes_1["default"].PinchInput = PinchInput_1.PinchInput; +Axes_1["default"].WheelInput = WheelInput_1.WheelInput; +Axes_1["default"].MoveKeyInput = MoveKeyInput_1.MoveKeyInput; +module.exports = Axes_1["default"]; diff --git a/outjs/inputType/InputType.js b/outjs/inputType/InputType.js new file mode 100644 index 00000000..c0967fc3 --- /dev/null +++ b/outjs/inputType/InputType.js @@ -0,0 +1,49 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var Hammer = require("hammerjs"); +exports.SUPPORT_TOUCH = "ontouchstart" in window; +exports.UNIQUEKEY = "_EGJS_AXES_INPUTTYPE_"; +function toAxis(source, offset) { + return offset.reduce(function (acc, v, i) { + if (source[i]) { + acc[source[i]] = v; + } + return acc; + }, {}); +} +exports.toAxis = toAxis; +; +function createHammer(element, options) { + try { + return new Hammer.Manager(element, __assign({}, options)); + } + catch (e) { + return null; + } +} +exports.createHammer = createHammer; +; +function convertInputType(inputType) { + if (inputType === void 0) { inputType = []; } + var hasTouch = false; + var hasMouse = false; + inputType.forEach(function (v) { + switch (v) { + case "mouse": + hasMouse = true; + break; + case "touch": hasTouch = exports.SUPPORT_TOUCH; + } + }); + return (hasTouch && Hammer.TouchInput) || + (hasMouse && Hammer.MouseInput) || null; +} +exports.convertInputType = convertInputType; diff --git a/outjs/inputType/MoveKeyInput.js b/outjs/inputType/MoveKeyInput.js new file mode 100644 index 00000000..fb0cbd81 --- /dev/null +++ b/outjs/inputType/MoveKeyInput.js @@ -0,0 +1,111 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var utils_1 = require("../utils"); +var InputType_1 = require("./InputType"); +exports.KEYMAP = { + LEFT_ARROW: 37, + A: 65, + UP_ARROW: 38, + W: 87, + RIGHT_ARROW: 39, + D: 68, + DOWN_ARROW: 40, + S: 83 +}; +var MoveKeyInput = (function () { + function MoveKeyInput(el, options) { + this.axes = []; + this.element = null; + this._isEnabled = false; + this._isHolded = false; + this.element = utils_1.$(el); + this.options = __assign({ + scale: [1, 1] + }, options); + this.onKeydown = this.onKeydown.bind(this); + } + MoveKeyInput.prototype.mapAxes = function (axes) { + this.axes = axes; + }; + MoveKeyInput.prototype.connect = function (observer) { + this.dettachEvent(); + if (this.element.getAttribute("tabindex") !== "0") { + this.element.setAttribute("tabindex", "0"); + } + this.attachEvent(observer); + return this; + }; + MoveKeyInput.prototype.disconnect = function () { + this.dettachEvent(); + return this; + }; + MoveKeyInput.prototype.destroy = function () { + this.disconnect(); + this.element = null; + }; + MoveKeyInput.prototype.onKeydown = function (event) { + if (!this._isEnabled) { + return; + } + event.preventDefault(); + var isMoveKey = true; + var offsets; + var e = event; + switch (e.keyCode) { + case exports.KEYMAP.LEFT_ARROW: + case exports.KEYMAP.A: + offsets = [-this.options.scale[0], 0]; + break; + case exports.KEYMAP.RIGHT_ARROW: + case exports.KEYMAP.D: + offsets = [this.options.scale[0], 0]; + break; + case exports.KEYMAP.UP_ARROW: + case exports.KEYMAP.W: + offsets = [0, this.options.scale[1]]; + break; + case exports.KEYMAP.DOWN_ARROW: + case exports.KEYMAP.S: + offsets = [0, -this.options.scale[1]]; + break; + default: + isMoveKey = false; + } + if (isMoveKey) { + this.observer.change(this, event, InputType_1.toAxis(this.axes, offsets)); + e.preventDefault(); + } + }; + MoveKeyInput.prototype.attachEvent = function (observer) { + this.observer = observer; + this.element.addEventListener("keydown", this.onKeydown, false); + this._isEnabled = true; + }; + MoveKeyInput.prototype.dettachEvent = function () { + this.element.removeEventListener("keydown", this.onKeydown, false); + this._isEnabled = false; + this.observer = null; + }; + MoveKeyInput.prototype.enable = function () { + this._isEnabled = true; + return this; + }; + MoveKeyInput.prototype.disable = function () { + this._isEnabled = false; + return this; + }; + MoveKeyInput.prototype.isEnable = function () { + return this._isEnabled; + }; + return MoveKeyInput; +}()); +exports.MoveKeyInput = MoveKeyInput; +; diff --git a/outjs/inputType/PanInput.js b/outjs/inputType/PanInput.js new file mode 100644 index 00000000..1531596c --- /dev/null +++ b/outjs/inputType/PanInput.js @@ -0,0 +1,210 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var Hammer = require("hammerjs"); +var const_1 = require("../const"); +var utils_1 = require("../utils"); +var InputType_1 = require("./InputType"); +var PanInput = (function () { + function PanInput(el, options) { + this.axes = []; + this.hammer = null; + this.element = null; + if (typeof Hammer === "undefined") { + throw new Error("The Hammerjs must be loaded before eg.Axes.PanInput.\nhttp://hammerjs.github.io/"); + } + this.element = utils_1.$(el); + this.options = __assign({ + inputType: ["touch", "mouse"], + scale: [1, 1], + thresholdAngle: 45, + threshold: 0, + hammerManagerOptions: { + cssProps: { + userSelect: "none", + touchSelect: "none", + touchCallout: "none", + userDrag: "none" + } + } + }, options); + this.onHammerInput = this.onHammerInput.bind(this); + this.onPanmove = this.onPanmove.bind(this); + this.onPanend = this.onPanend.bind(this); + } + PanInput.getDirectionByAngle = function (angle, thresholdAngle) { + if (thresholdAngle < 0 || thresholdAngle > 90) { + return const_1.DIRECTION.DIRECTION_NONE; + } + var toAngle = Math.abs(angle); + return toAngle > thresholdAngle && toAngle < 180 - thresholdAngle ? + const_1.DIRECTION.DIRECTION_VERTICAL : const_1.DIRECTION.DIRECTION_HORIZONTAL; + }; + PanInput.getNextOffset = function (speeds, deceleration) { + var normalSpeed = Math.sqrt(speeds[0] * speeds[0] + speeds[1] * speeds[1]); + var duration = Math.abs(normalSpeed / -deceleration); + return [ + speeds[0] / 2 * duration, + speeds[1] / 2 * duration + ]; + }; + PanInput.useDirection = function (checkType, direction, userDirection) { + if (userDirection) { + return !!((direction === const_1.DIRECTION.DIRECTION_ALL) || + ((direction & checkType) && (userDirection & checkType))); + } + else { + return !!(direction & checkType); + } + }; + PanInput.prototype.mapAxes = function (axes) { + var useHorizontal = !!axes[0]; + var useVertical = !!axes[1]; + if (useHorizontal && useVertical) { + this._direction = const_1.DIRECTION.DIRECTION_ALL; + } + else if (useHorizontal) { + this._direction = const_1.DIRECTION.DIRECTION_HORIZONTAL; + } + else if (useVertical) { + this._direction = const_1.DIRECTION.DIRECTION_VERTICAL; + } + else { + this._direction = const_1.DIRECTION.DIRECTION_NONE; + } + this.axes = axes; + }; + PanInput.prototype.connect = function (observer) { + var hammerOption = { + direction: this._direction, + threshold: this.options.threshold + }; + if (this.hammer) { + this.dettachEvent(); + this.hammer.add(new Hammer.Pan(hammerOption)); + } + else { + var keyValue = this.element[InputType_1.UNIQUEKEY]; + if (keyValue) { + this.hammer && this.hammer.destroy(); + } + else { + keyValue = String(Math.round(Math.random() * new Date().getTime())); + } + var inputClass = InputType_1.convertInputType(this.options.inputType); + if (!inputClass) { + throw new Error("Wrong inputType parameter!"); + } + this.hammer = InputType_1.createHammer(this.element, __assign({ + recognizers: [ + [Hammer.Pan, hammerOption], + ], + inputClass: inputClass + }, this.options.hammerManagerOptions)); + this.element[InputType_1.UNIQUEKEY] = keyValue; + } + this.attachEvent(observer); + return this; + }; + PanInput.prototype.disconnect = function () { + if (this.hammer) { + this.dettachEvent(); + } + this._direction = const_1.DIRECTION.DIRECTION_NONE; + return this; + }; + PanInput.prototype.destroy = function () { + this.disconnect(); + if (this.hammer) { + this.hammer.destroy(); + } + delete this.element[InputType_1.UNIQUEKEY]; + this.element = null; + this.hammer = null; + }; + PanInput.prototype.enable = function () { + this.hammer && (this.hammer.get("pan").options.enable = true); + return this; + }; + PanInput.prototype.disable = function () { + this.hammer && (this.hammer.get("pan").options.enable = false); + return this; + }; + PanInput.prototype.isEnable = function () { + return !!(this.hammer && this.hammer.get("pan").options.enable); + }; + PanInput.prototype.onHammerInput = function (event) { + if (this.isEnable()) { + if (event.isFirst) { + this.observer.hold(this, event); + } + else if (event.isFinal) { + this.onPanend(event); + } + } + }; + PanInput.prototype.onPanmove = function (event) { + var userDirection = PanInput.getDirectionByAngle(event.angle, this.options.thresholdAngle); + var prevInput = this.hammer.session.prevInput; + if (prevInput) { + event.offsetX = event.deltaX - prevInput.deltaX; + event.offsetY = event.deltaY - prevInput.deltaY; + } + else { + event.offsetX = 0; + event.offsetY = 0; + } + var offset = this.getOffset([event.offsetX, event.offsetY], [ + PanInput.useDirection(const_1.DIRECTION.DIRECTION_HORIZONTAL, this._direction, userDirection), + PanInput.useDirection(const_1.DIRECTION.DIRECTION_VERTICAL, this._direction, userDirection) + ]); + var prevent = offset.some(function (v) { return v !== 0; }); + if (prevent) { + event.srcEvent.preventDefault(); + event.srcEvent.stopPropagation(); + } + event.preventSystemEvent = prevent; + prevent && this.observer.change(this, event, InputType_1.toAxis(this.axes, offset)); + }; + PanInput.prototype.onPanend = function (event) { + var offset = this.getOffset([ + Math.abs(event.velocityX) * (event.deltaX < 0 ? -1 : 1), + Math.abs(event.velocityY) * (event.deltaY < 0 ? -1 : 1) + ], [ + PanInput.useDirection(const_1.DIRECTION.DIRECTION_HORIZONTAL, this._direction), + PanInput.useDirection(const_1.DIRECTION.DIRECTION_VERTICAL, this._direction) + ]); + offset = PanInput.getNextOffset(offset, this.observer.options.deceleration); + this.observer.release(this, event, InputType_1.toAxis(this.axes, offset)); + }; + PanInput.prototype.attachEvent = function (observer) { + this.observer = observer; + this.hammer.on("hammer.input", this.onHammerInput) + .on("panstart panmove", this.onPanmove); + }; + PanInput.prototype.dettachEvent = function () { + this.hammer.off("hammer.input", this.onHammerInput) + .off("panstart panmove", this.onPanmove); + this.observer = null; + }; + PanInput.prototype.getOffset = function (properties, useDirection) { + var offset = [0, 0]; + var scale = this.options.scale; + if (useDirection[0]) { + offset[0] = (properties[0] * scale[0]); + } + if (useDirection[1]) { + offset[1] = (properties[1] * scale[1]); + } + return offset; + }; + return PanInput; +}()); +exports.PanInput = PanInput; diff --git a/outjs/inputType/PinchInput.js b/outjs/inputType/PinchInput.js new file mode 100644 index 00000000..d8c31603 --- /dev/null +++ b/outjs/inputType/PinchInput.js @@ -0,0 +1,135 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var Hammer = require("hammerjs"); +var utils_1 = require("../utils"); +var InputType_1 = require("./InputType"); +var PinchInput = (function () { + function PinchInput(el, options) { + this.axes = []; + this.hammer = null; + this.element = null; + this._base = null; + this._prev = null; + if (typeof Hammer === "undefined") { + throw new Error("The Hammerjs must be loaded before eg.Axes.PinchInput.\nhttp://hammerjs.github.io/"); + } + this.element = utils_1.$(el); + this.options = __assign({ + scale: 1, + threshold: 0, + hammerManagerOptions: { + cssProps: { + userSelect: "none", + touchSelect: "none", + touchCallout: "none", + userDrag: "none" + } + } + }, options); + this.onPinchStart = this.onPinchStart.bind(this); + this.onPinchMove = this.onPinchMove.bind(this); + this.onPinchEnd = this.onPinchEnd.bind(this); + } + PinchInput.prototype.mapAxes = function (axes) { + this.axes = axes; + }; + PinchInput.prototype.connect = function (observer) { + var hammerOption = { + threshold: this.options.threshold + }; + if (this.hammer) { + this.dettachEvent(); + this.hammer.add(new Hammer.Pinch(hammerOption)); + } + else { + var keyValue = this.element[InputType_1.UNIQUEKEY]; + if (keyValue) { + this.hammer.destroy(); + } + else { + keyValue = String(Math.round(Math.random() * new Date().getTime())); + } + this.hammer = InputType_1.createHammer(this.element, __assign({ + recognizers: [ + [Hammer.Pinch, hammerOption], + ], + inputClass: Hammer.TouchInput + }, this.options.hammerManagerOptions)); + this.element[InputType_1.UNIQUEKEY] = keyValue; + } + this.attachEvent(observer); + return this; + }; + PinchInput.prototype.disconnect = function () { + if (this.hammer) { + this.dettachEvent(); + } + return this; + }; + PinchInput.prototype.destroy = function () { + this.disconnect(); + if (this.hammer) { + this.hammer.destroy(); + } + delete this.element[InputType_1.UNIQUEKEY]; + this.element = null; + this.hammer = null; + }; + PinchInput.prototype.onPinchStart = function (event) { + this._base = this.observer.get(this)[this.axes[0]]; + var offset = this.getOffset(event.scale); + this.observer.hold(this, event); + this.observer.change(this, event, InputType_1.toAxis(this.axes, [offset])); + this._prev = event.scale; + }; + PinchInput.prototype.onPinchMove = function (event) { + var offset = this.getOffset(event.scale, this._prev); + this.observer.change(this, event, InputType_1.toAxis(this.axes, [offset])); + this._prev = event.scale; + }; + PinchInput.prototype.onPinchEnd = function (event) { + var offset = this.getOffset(event.scale, this._prev); + this.observer.change(this, event, InputType_1.toAxis(this.axes, [offset])); + this.observer.release(this, event, InputType_1.toAxis(this.axes, [0]), 0); + this._base = null; + this._prev = null; + }; + PinchInput.prototype.getOffset = function (pinchScale, prev) { + if (prev === void 0) { prev = 1; } + return this._base * (pinchScale - prev) * this.options.scale; + }; + PinchInput.prototype.attachEvent = function (observer) { + this.observer = observer; + this.hammer.on("pinchstart", this.onPinchStart) + .on("pinchmove", this.onPinchMove) + .on("pinchend", this.onPinchEnd); + }; + PinchInput.prototype.dettachEvent = function () { + this.hammer.off("pinchstart", this.onPinchStart) + .off("pinchmove", this.onPinchMove) + .off("pinchend", this.onPinchEnd); + this.observer = null; + this._prev = null; + }; + PinchInput.prototype.enable = function () { + this.hammer && (this.hammer.get("pinch").options.enable = true); + return this; + }; + PinchInput.prototype.disable = function () { + this.hammer && (this.hammer.get("pinch").options.enable = false); + return this; + }; + PinchInput.prototype.isEnable = function () { + return !!(this.hammer && this.hammer.get("pinch").options.enable); + }; + return PinchInput; +}()); +exports.PinchInput = PinchInput; diff --git a/outjs/inputType/WheelInput.js b/outjs/inputType/WheelInput.js new file mode 100644 index 00000000..793c2150 --- /dev/null +++ b/outjs/inputType/WheelInput.js @@ -0,0 +1,89 @@ +"use strict"; +var __assign = (this && this.__assign) || Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; +}; +exports.__esModule = true; +var utils_1 = require("../utils"); +var InputType_1 = require("./InputType"); +var WheelInput = (function () { + function WheelInput(el, options) { + this.axes = []; + this.element = null; + this._isEnabled = false; + this._isHolded = false; + this._timer = null; + this.element = utils_1.$(el); + this.options = __assign({ + scale: 1 + }, options); + this.onWheel = this.onWheel.bind(this); + } + WheelInput.prototype.mapAxes = function (axes) { + this.axes = axes; + }; + WheelInput.prototype.connect = function (observer) { + this.dettachEvent(); + this.attachEvent(observer); + return this; + }; + WheelInput.prototype.disconnect = function () { + this.dettachEvent(); + return this; + }; + WheelInput.prototype.destroy = function () { + this.disconnect(); + this.element = null; + }; + WheelInput.prototype.onWheel = function (event) { + var _this = this; + if (!this._isEnabled) { + return; + } + event.preventDefault(); + if (event.deltaY === 0) { + return; + } + if (!this._isHolded) { + this.observer.hold(this, event); + this._isHolded = true; + } + var offset = (event.deltaY > 0 ? -1 : 1) * this.options.scale; + this.observer.change(this, event, InputType_1.toAxis(this.axes, [offset])); + clearTimeout(this._timer); + this._timer = setTimeout(function () { + if (_this._isHolded) { + _this.observer.release(_this, event, InputType_1.toAxis(_this.axes, [0])); + _this._isHolded = false; + } + }, 50); + }; + WheelInput.prototype.attachEvent = function (observer) { + this.observer = observer; + this.element.addEventListener("wheel", this.onWheel); + this._isEnabled = true; + }; + WheelInput.prototype.dettachEvent = function () { + this.element.removeEventListener("wheel", this.onWheel); + this._isEnabled = false; + this.observer = null; + }; + WheelInput.prototype.enable = function () { + this._isEnabled = true; + return this; + }; + WheelInput.prototype.disable = function () { + this._isEnabled = false; + return this; + }; + WheelInput.prototype.isEnable = function () { + return this._isEnabled; + }; + return WheelInput; +}()); +exports.WheelInput = WheelInput; +; diff --git a/outjs/utils.js b/outjs/utils.js new file mode 100644 index 00000000..d2446167 --- /dev/null +++ b/outjs/utils.js @@ -0,0 +1,84 @@ +"use strict"; +exports.__esModule = true; +function toArray(nodes) { + var el = []; + for (var i = 0, len = nodes.length; i < len; i++) { + el.push(nodes[i]); + } + return el; +} +exports.toArray = toArray; +function $(param, multi) { + if (multi === void 0) { multi = false; } + var el; + if (typeof param === "string") { + var match = param.match(/^<([a-z]+)\s*([^>]*)>/); + if (match) { + var dummy = document.createElement("div"); + dummy.innerHTML = param; + el = toArray(dummy.childNodes); + } + else { + el = toArray(document.querySelectorAll(param)); + } + if (!multi) { + el = el.length >= 1 ? el[0] : undefined; + } + } + else if (param === window) { + el = param; + } + else if (param.nodeName && + (param.nodeType === 1 || param.nodeType === 9)) { + el = param; + } + else if (("jQuery" in window && param instanceof jQuery) || + param.constructor.prototype.jquery) { + el = multi ? param.toArray() : param.get(0); + } + else if (Array.isArray(param)) { + el = param.map(function (v) { return $(v); }); + if (!multi) { + el = el.length >= 1 ? el[0] : undefined; + } + } + return el; +} +exports.$ = $; +var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame; +var caf = window.cancelAnimationFrame || window.webkitCancelAnimationFrame; +if (raf && !caf) { + var keyInfo_1 = {}; + var oldraf_1 = raf; + raf = function (callback) { + function wrapCallback(timestamp) { + if (keyInfo_1[key]) { + callback(timestamp); + } + } + var key = oldraf_1(wrapCallback); + keyInfo_1[key] = true; + return key; + }; + caf = function (key) { + delete keyInfo_1[key]; + }; +} +else if (!(raf && caf)) { + raf = function (callback) { + return window.setTimeout(function () { + callback(window.performance && window.performance.now && window.performance.now() || new Date().getTime()); + }, 16); + }; + caf = window.clearTimeout; +} +function requestAnimationFrame(fp) { + return raf(fp); +} +exports.requestAnimationFrame = requestAnimationFrame; +; +function cancelAnimationFrame(key) { + caf(key); +} +exports.cancelAnimationFrame = cancelAnimationFrame; +; diff --git a/package.json b/package.json index 99dac991..186dd286 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,15 @@ "version": "2.3.3-snapshot", "description": "A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.", "main": "dist/axes.js", - "types": "declaration/Axes.d.ts", + "module": "outjs/index.js", + "types": "declaration/index.d.ts", "scripts": { "start": "webpack-dev-server --open", "build": "webpack --env production && webpack --env packaged && npm run declaration", "test": "karma start", "test:chrome": "karma start --chrome", "lint": "tslint src", - "jsdoc": "rm -rf ./doc && rm -rf outjs && tsc -p tsconfig.doc.json && jsdoc -c jsdoc.json", + "jsdoc": "rm -rf ./doc && rm -rf outjs && tsc -p tsconfig.json && jsdoc -c jsdoc.json", "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json", "coverage": "karma start --coverage", "demo:start": "npm run demo:prebuild-latest && npm run demo:updateVersion && jekyll serve --host=0.0.0.0 -s demo", @@ -74,7 +75,7 @@ "sinon": "^4.1.4", "string-replace-webpack-plugin": "0.1.3", "sync-exec": "^0.6.2", - "tslint": "^5.8.0", + "tslint": "^5.9.1", "tslint-eslint-rules": "^4.1.1", "tslint-loader": "^3.5.3", "typescript": "^2.6.2", @@ -84,6 +85,6 @@ "webpack-merge": "^4.1.1", "write-file-webpack-plugin": "^4.2.0", "xml2js": "^0.4.19", - "marked": "^0.3.9" + "marked": "^0.3.12" } } diff --git a/src/index.ts b/src/index.ts index 7d7f4dd1..30de3f95 100755 --- a/src/index.ts +++ b/src/index.ts @@ -1,12 +1,6 @@ import Axes from "./Axes"; -import { PanInput } from "./inputType/PanInput"; -import { PinchInput } from "./inputType/PinchInput"; -import { WheelInput } from "./inputType/WheelInput"; -import { MoveKeyInput } from "./inputType/MoveKeyInput"; - -Axes.PanInput = PanInput; -Axes.PinchInput = PinchInput; -Axes.WheelInput = WheelInput; -Axes.MoveKeyInput = MoveKeyInput; - -export = Axes; +export { PanInput } from "./inputType/PanInput"; +export { PinchInput } from "./inputType/PinchInput"; +export { WheelInput } from "./inputType/WheelInput"; +export { MoveKeyInput } from "./inputType/MoveKeyInput"; +export default Axes; diff --git a/src/index.umd.ts b/src/index.umd.ts new file mode 100755 index 00000000..7d7f4dd1 --- /dev/null +++ b/src/index.umd.ts @@ -0,0 +1,12 @@ +import Axes from "./Axes"; +import { PanInput } from "./inputType/PanInput"; +import { PinchInput } from "./inputType/PinchInput"; +import { WheelInput } from "./inputType/WheelInput"; +import { MoveKeyInput } from "./inputType/MoveKeyInput"; + +Axes.PanInput = PanInput; +Axes.PinchInput = PinchInput; +Axes.WheelInput = WheelInput; +Axes.MoveKeyInput = MoveKeyInput; + +export = Axes; diff --git a/tsconfig.declaration.json b/tsconfig.declaration.json index 4687e5f1..74702095 100644 --- a/tsconfig.declaration.json +++ b/tsconfig.declaration.json @@ -1,5 +1,5 @@ { - "extends": "./tsconfig.doc", + "extends": "./tsconfig", "compilerOptions": { "removeComments": true, "declaration": true, diff --git a/tsconfig.doc.json b/tsconfig.doc.json deleted file mode 100644 index 4939293b..00000000 --- a/tsconfig.doc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./tsconfig", - "compilerOptions": { - "outDir": "outjs" - } -} diff --git a/tsconfig.json b/tsconfig.json index 7dcbde6e..facce8cf 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,8 @@ "target": "es3", "module": "commonjs", "lib": ["es5", "dom"], - "removeComments": false + "removeComments": false, + "outDir": "outjs" }, "include": [ "src/**/*.ts" diff --git a/webpack.config.js b/webpack.config.js index 2e198f6e..0bc38d2b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,7 @@ var StringReplacePlugin = require("string-replace-webpack-plugin"); var config = { entry: { - "axes": "./src/index.ts" + "axes": "./src/index.umd.ts" }, output: { path: path.resolve(__dirname, "dist"),