@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
346 lines • 16 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__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;
};
return __assign.apply(this, arguments);
};
import { InputType, NativeEventType, Button, InputState, isNativeMouseEvent } from "./IInputManager";
import { EventObject } from "@aurigma/design-atoms-model/EventObject";
import { PointF, RectangleF } from "@aurigma/design-atoms-model/Math";
import { FrontEndLogger, LogSource, LogClr } from "../../Services/FrontEndLogger";
import { PointerInputHelper } from "./PointerInputHelper";
var InputManager = /** @class */ (function () {
function InputManager(_convertor, settings) {
var _this = this;
if (_convertor === void 0) { _convertor = null; }
if (settings === void 0) { settings = null; }
this._convertor = _convertor;
this._touchEndCancel = false;
this._keyMap = new Map();
this._onMouseDown = function (event) {
if (_this._currentAction != null)
return;
_this._pointerInputHelper.onButtonDown(event.coordinates);
_this._pointerEventNotify(event, InputType.PointerDown);
};
this._onMouseMove = function (event) {
_this._pointerEventNotify(event, InputType.Hover);
if ((event.button !== Button.Primary) && (event.button !== Button.Tertiary))
return;
if (_this._currentAction === InputType.Move)
return _this._dragEventNotify(event, _this._currentAction == null ? InputState.Started : InputState.InProgress);
if (_this._currentAction == null && _this._pointerInputHelper.isButtonDown() == false || _this._pointerInputHelper.isInDownUpThresholdArea(event.coordinates, false))
return;
_this._dragEventNotify(event, _this._currentAction == null ? InputState.Started : InputState.InProgress);
};
this._onMouseUp = function (event) {
if (_this._pointerInputHelper.isButtonDown() == false)
return;
var clickCount = _this._pointerInputHelper.onButtonUp(event.coordinates, false, event.button);
if (_this._currentAction !== InputType.Move) {
if (clickCount > 0)
_this._pointerEventNotify(event, InputType.Click, clickCount);
}
else {
if (event.button !== Button.Primary && event.button !== Button.Secondary && event.button !== Button.Tertiary)
return;
_this._dragEventNotify(event, InputState.Finished);
}
_this._resetState();
};
this._onTouchStart = function (event) {
_this._touchEndCancel = false;
_this._pointerInputHelper.onButtonDown(event.touches[0]);
_this._clearLongTapTimeout();
if (event.touches.length === 2) {
_this._transformPoints = event.touches;
}
else {
_this._longTapTimeout = window.setTimeout(_this._onLongTap, _this._settings.longTapTime, event);
_this._pointerEventNotify(event, InputType.PointerDown);
}
};
this._onTouchMove = function (event) {
if (_this._pointerInputHelper.isButtonDown() == false)
return;
if (event.touches.length === 2 && _this._currentAction !== InputType.Move) {
var state = void 0;
if (_this._currentAction == null) {
state = InputState.Started;
_this._currentAction = InputType.Transform;
}
else {
state = InputState.InProgress;
}
_this._transformEventNotify(event, state);
_this._transformPoints = event.touches;
}
else {
if (_this._currentAction !== InputType.Move && _this._pointerInputHelper.isInDownUpThresholdArea(event.touches[0], true))
return;
_this._clearLongTapTimeout();
_this._dragEventNotify(event, _this._currentAction == null ? InputState.Started : InputState.InProgress);
}
};
this._onTouchEnd = function (event) {
if (_this._pointerInputHelper.isButtonDown() == false || _this._touchEndCancel)
return;
var time = Date.now();
var clickCount = _this._pointerInputHelper.onButtonUp(event.changedTouches[0], true, Button.Primary);
if (_this._currentAction === InputType.Transform) {
_this._transformEventNotify(event, InputState.Finished);
}
else if (_this._currentAction !== InputType.Move) {
if (clickCount > 0)
_this._pointerEventNotify(event, InputType.Click, clickCount);
}
else {
if (event.touches.length > 0)
return;
_this._dragEventNotify(event, InputState.Finished);
}
_this._resetState();
};
this._resetState = function () {
_this._currentAction = null;
_this._transformPoints = null;
_this._clearLongTapTimeout();
};
this._clearLongTapTimeout = function () {
if (_this._longTapTimeout != null)
clearTimeout(_this._longTapTimeout);
};
this._onLongTap = function (e) {
_this._pointerEventNotify(e, InputType.LongTap);
_this._clearLongTapTimeout();
_this._touchEndCancel = true;
};
this._pointerEventNotify = function (e, type, clickCount) {
if (clickCount === void 0) { clickCount = 0; }
var data = _this._getPointerArgs(e, type, clickCount);
_this._emitEvent(data);
};
this._transformEventNotify = function (e, state) {
try {
var args = {
preventDefault: e.preventDefault,
scale: _this._calculateScale(_this._transformPoints[0], _this._transformPoints[1], e.touches[0], e.touches[1]),
translate: _this._calculateTransform(_this._transformPoints[0], _this._transformPoints[1], e.touches[0], e.touches[1]),
type: InputType.Transform,
state: state,
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
metaKey: e.metaKey
};
_this._emitEvent(args);
_this._transformPoints = e.touches;
if (state !== InputState.Finished)
_this._currentAction = InputType.Transform;
}
catch (ex) {
console.error(ex);
}
};
this._calculateScale = function (oldPoint1, oldPoint2, newPoint1, newPoint2) {
if (oldPoint1 == null || oldPoint2 == null || newPoint1 == null || newPoint2 == null)
return 1;
var oldDistance = oldPoint1.distance(oldPoint2);
var newDistance = newPoint1.distance(newPoint2);
if (newDistance <= _this._settings.minimalScaleDistance)
return 1;
var scale = newDistance / oldDistance;
return isNaN(scale) ? 1 : scale;
};
this._calculateTransform = function (oldPoint1, oldPoint2, newPoint1, newPoint2) {
if (oldPoint1 == null || oldPoint2 == null || newPoint1 == null || newPoint2 == null)
return new PointF();
var oldRect = RectangleF.fromPoints(oldPoint1, oldPoint2);
var newRect = RectangleF.fromPoints(newPoint1, newPoint2);
var oldCenter = oldRect.center;
var newCenter = newRect.center;
return new PointF(newCenter.x - oldCenter.x, newCenter.y - oldCenter.y);
};
this._getPointerArgs = function (e, type, clickCount) {
if (clickCount === void 0) { clickCount = 0; }
var firstPoint = _this._getFirstCoordinate(e);
var workspaceCoords = _this._convertor.pageToWorkspacePoint(firstPoint);
var buttonType = isNativeMouseEvent(e) ? e.button : Button.Primary;
var data = {
page: firstPoint,
workspace: workspaceCoords,
preventDefault: e.preventDefault,
type: type,
button: buttonType,
isMobile: !isNativeMouseEvent(e),
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
metaKey: e.metaKey,
clickCount: clickCount
};
return data;
};
this._getFirstCoordinate = function (e) {
var _a;
return isNativeMouseEvent(e) ? e.coordinates : ((_a = e.touches[0]) !== null && _a !== void 0 ? _a : e.changedTouches[0]);
};
this._dragEventNotify = function (e, state) {
var _a, _b;
var data = _this._getPointerArgs(e, InputType.Move);
var downPoint = new PointF((_a = _this._pointerInputHelper.lastDownPoint) === null || _a === void 0 ? void 0 : _a.x, (_b = _this._pointerInputHelper.lastDownPoint) === null || _b === void 0 ? void 0 : _b.y);
data.startPage = downPoint.clone();
data.startWorkspace = _this._convertor.pageToWorkspacePoint(downPoint);
data.state = state;
_this._emitEvent(data);
if (state !== InputState.Finished)
_this._currentAction = InputType.Move;
};
this._onKeyDown = function (e) {
var state = _this._keyMap.get(e.code);
if (_this._pointerInputHelper.isButtonDown())
return;
if (state == null || state === InputState.Finished)
_this._keyMap.set(e.code, InputState.Started);
else
_this._keyMap.set(e.code, InputState.InProgress);
_this._emitKeyEvent(e);
};
this._onKeyUp = function (e) {
_this._keyMap.set(e.code, InputState.Finished);
_this._emitKeyEvent(e);
};
this._emitKeyEvent = function (e) {
var params = {
altKey: e.altKey,
ctrlKey: e.ctrlKey,
code: e.code,
key: e.key,
preventDefault: e.preventDefault,
type: InputType.Key,
shiftKey: e.shiftKey,
metaKey: e.metaKey,
state: _this._keyMap.get(e.code)
};
_this._emitEvent(params);
};
this._onWheel = function (e) {
var args = {
altKey: e.altKey,
ctrlKey: e.ctrlKey,
delta: e.delta,
preventDefault: e.preventDefault,
shiftKey: e.shiftKey,
type: InputType.Wheel,
metaKey: e.metaKey
};
_this._emitEvent(args);
};
this._emitEvent = function (data) {
InputManagerLogger.log(data);
_this._inputEvent.notify(data);
};
this._inputEvent = new EventObject();
if (this._convertor == null)
this._convertor = { pageToWorkspacePoint: function (x) { return x; } };
var defaultSettings = {
clickThreshold: 4,
tapThreshold: 10,
doubleTapThreshold: 20,
doubleTapTime: 500,
longTapTime: 500,
minimalScaleDistance: 120
};
this._settings = __assign(__assign({}, defaultSettings), (settings || {}));
this._pointerInputHelper = new PointerInputHelper(this._settings);
}
InputManager.prototype.raiseNativeEvent = function (event) {
switch (event.eventType) {
case NativeEventType.MouseDown:
this._onMouseDown(event);
break;
case NativeEventType.MouseMove:
this._onMouseMove(event);
break;
case NativeEventType.MouseUp:
this._onMouseUp(event);
break;
case NativeEventType.TouchStart:
var touchEvent = event;
this._onTouchStart(touchEvent);
break;
case NativeEventType.TouchMove:
this._onTouchMove(event);
break;
case NativeEventType.TouchEnd:
this._onTouchEnd(event);
break;
case NativeEventType.KeyDown:
this._onKeyDown(event);
break;
case NativeEventType.KeyUp:
this._onKeyUp(event);
break;
case NativeEventType.Wheel:
this._onWheel(event);
break;
}
};
InputManager.prototype.addOnInput = function (handler) { this._inputEvent.add(handler); };
InputManager.prototype.removeOnInput = function (handler) { this._inputEvent.remove(handler); };
InputManager.prototype.dispose = function () {
};
return InputManager;
}());
export { InputManager };
var InputManagerLogger = /** @class */ (function () {
function InputManagerLogger() {
}
InputManagerLogger.log = function (data) {
var message = LogClr.green(data.type.toString()) + " was performed!";
switch (data.type) {
case InputType.Hover:
return;
case InputType.Click:
case InputType.LongTap:
case InputType.PointerDown:
var clickData = data;
message += " " + LogClr.cyan(clickData.workspace.toString());
message += " with " + LogClr.green(clickData.button.toString()) + " button";
message += " clickCount: " + LogClr.cyan(clickData.clickCount.toString());
break;
case InputType.Move:
var dragData = data;
message += " From " + LogClr.cyan(dragData.startWorkspace.toString());
message += " to " + LogClr.cyan(dragData.workspace.toString()) + ".";
message += " State is " + dragData.state + ".";
break;
case InputType.Key:
var keyData = data;
message += " Key code was " + keyData.code;
if (keyData.altKey)
message += " with alt";
if (keyData.ctrlKey)
message += " with ctrl";
message += ". State is " + keyData.state + ".";
break;
case InputType.Transform:
var transformParams = data;
message += " Scale: " + LogClr.cyan(transformParams.scale.toFixed(2)) + ", translate: " + LogClr.cyan(transformParams.translate.toString());
message += " State is " + transformParams.state + ".";
break;
case InputType.Wheel:
var wheelParams = data;
message += " Delta: " + wheelParams.delta.toString();
break;
}
FrontEndLogger.debugLog(message, LogSource.InputManager);
};
return InputManagerLogger;
}());
//# sourceMappingURL=InputManager.js.map