@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
169 lines • 7.03 kB
JavaScript
import { NativeEventType, Button } from "./IInputManager";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { PointF } from "@aurigma/design-atoms-model/Math";
export class HtmlInputManagerAdapter {
constructor(_hostElement, _keyInputElement, _inputManager, _preventKeyHandleClass = 'preventCanvasKeyHandle', _preventClickHandleClass = "preventCanvasClickHandle") {
this._hostElement = _hostElement;
this._keyInputElement = _keyInputElement;
this._inputManager = _inputManager;
this._preventKeyHandleClass = _preventKeyHandleClass;
this._preventClickHandleClass = _preventClickHandleClass;
this._isTouchDevice = Environment.IsTouchDevice();
this._onTouchStart = (e) => {
if (e.target instanceof Element && !this._hostElement.contains(e.target))
return;
this._raiseTouchEvent(e, NativeEventType.TouchStart);
};
this._onTouchEnd = (e) => {
this._raiseTouchEvent(e, NativeEventType.TouchEnd);
};
this._onTouchMove = (e) => {
this._raiseTouchEvent(e, NativeEventType.TouchMove);
};
this._onMouseDown = (e) => {
if (e.target instanceof Element && !this._hostElement.contains(e.target))
return;
this._raiseMouseEvent(e, NativeEventType.MouseDown);
};
this._onMouseUp = (e) => {
this._raiseMouseEvent(e, NativeEventType.MouseUp);
};
this._onMouseMove = (e) => {
this._raiseMouseEvent(e, NativeEventType.MouseMove);
};
this._onKeyDown = (e) => {
this._raiseKeyEvent(e, NativeEventType.KeyDown);
};
this._onKeyUp = (e) => {
this._raiseKeyEvent(e, NativeEventType.KeyUp);
};
this._getButton = (e) => {
let result;
if (e.type === "mouseup" || e.type === "mousedown") {
switch (e.button) {
case 0:
result = Button.Primary;
break;
case 1:
result = Button.Tertiary;
break;
case 2:
result = Button.Secondary;
break;
default:
result = Button.None;
break;
}
}
else {
switch (e.buttons) {
case 1:
case 3:
result = Button.Primary;
break;
case 2:
result = Button.Secondary;
break;
case 4:
result = Button.Tertiary;
break;
default:
result = Button.None;
break;
}
}
return result;
};
this._onWheel = (e) => {
const args = {
altKey: e.altKey,
ctrlKey: e.ctrlKey,
delta: new PointF(e.deltaX, e.deltaY),
eventType: NativeEventType.Wheel,
shiftKey: e.shiftKey,
metaKey: e.metaKey,
preventDefault: () => e.preventDefault(),
};
this._inputManager.raiseNativeEvent(args);
};
if (this._keyInputElement == null)
this._keyInputElement = _hostElement;
if (this._isTouchDevice) {
document.addEventListener("touchstart", this._onTouchStart);
document.addEventListener("touchend", this._onTouchEnd);
document.addEventListener("touchmove", this._onTouchMove);
}
else {
document.addEventListener("mousedown", this._onMouseDown);
document.addEventListener("mouseup", this._onMouseUp);
document.addEventListener("mousemove", this._onMouseMove);
document.addEventListener("wheel", this._onWheel, { passive: false });
this._keyInputElement.addEventListener("keydown", this._onKeyDown);
this._keyInputElement.addEventListener("keyup", this._onKeyUp);
}
}
_raiseMouseEvent(e, type) {
if (this.checkIsEventExcluded(e)) {
return;
}
const args = {
eventType: type,
coordinates: new PointF(e.clientX, e.clientY),
preventDefault: () => e.preventDefault(),
button: this._getButton(e),
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
metaKey: e.metaKey
};
this._inputManager.raiseNativeEvent(args);
}
_raiseTouchEvent(e, type) {
const args = {
eventType: type,
preventDefault: () => e.preventDefault(),
touches: Array.from(e.targetTouches).map(t => new PointF(t.clientX, t.clientY)),
changedTouches: Array.from(e.changedTouches).map(t => new PointF(t.clientX, t.clientY)),
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
metaKey: e.metaKey
};
this._inputManager.raiseNativeEvent(args);
}
_raiseKeyEvent(e, type) {
if (this.checkIsEventExcluded(e))
return;
const args = {
eventType: type,
code: e.code,
key: e.key,
preventDefault: () => e.preventDefault(),
altKey: e.altKey,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
metaKey: e.metaKey
};
this._inputManager.raiseNativeEvent(args);
}
dispose() {
if (this._isTouchDevice) {
document.removeEventListener("touchstart", this._onTouchStart);
document.removeEventListener("touchend", this._onTouchEnd);
document.removeEventListener("touchmove", this._onTouchMove);
}
else {
document.removeEventListener("mousedown", this._onMouseDown);
document.removeEventListener("mouseup", this._onMouseUp);
document.removeEventListener("mousemove", this._onMouseMove);
document.removeEventListener("wheel", this._onWheel);
this._keyInputElement.removeEventListener("keydown", this._onKeyDown);
this._keyInputElement.removeEventListener("keyup", this._onKeyUp);
}
}
checkIsEventExcluded(event) {
const excludedElementClass = event.type === "keydown" || "keyup" ? this._preventKeyHandleClass : this._preventClickHandleClass;
return event.target.closest(`.${excludedElementClass}`) != null;
}
}
//# sourceMappingURL=HtmlInputManagerAdapter.js.map