Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-14 09:10:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Input system further simplified

Browse Source
This commit is contained in:
barsdeveloper
2021-10-04 21:35:01 +02:00
parent 5963836947
commit 0563663dfc
5 changed files with 69 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
js/UEBlueprint.js
View File

@@ -120,6 +120,7 @@ export default class UEBlueprint extends HTMLElement {
this.selectObject = new USelect(this.getGridDOMElement(), this, {
clickButton: 0,
moveEverywhere: true,
exitAnyButton: true
})
}

34
js/input/UMouseClickDrag.js
View File

@@ -1,18 +1,14 @@
import Utility from "../Utility"
import UPointing from "./UPointing"
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
*/
export default class UMouseClickDrag {
export default class UMouseClickDrag extends UPointing {
constructor(target, blueprint, options) {
this.target = target
/** @type {import("../UEBlueprint").default}" */
this.blueprint = blueprint
super(target, blueprint, options)
this.clickButton = options?.clickButton ?? 0
this.exitAnyButton = options?.exitAnyButton ?? true
this.looseTarget = options?.looseTarget ?? false
this.moveEverywhere = options?.moveEverywhere ?? false
this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
this.started = false
this.clickedPosition = [0, 0]
const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace
@@ -28,7 +24,7 @@ export default class UMouseClickDrag {
// Attach the listeners
movementListenedElement.addEventListener('mousemove', self.mouseStartedMovingHandler)
document.addEventListener('mouseup', self.mouseUpHandler)
self.clickedPosition = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]))
self.clickedPosition = self.getLocation(e)
self.clicked(self.clickedPosition)
}
break
@@ -56,9 +52,9 @@ export default class UMouseClickDrag {
this.mouseMoveHandler = function (e) {
e.preventDefault()
e.stopPropagation()
const offset = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]))
const location = self.getLocation(e)
const movement = [e.movementX, e.movementY]
self.dragTo(offset, movement)
self.dragTo(location, movement)
}
this.mouseUpHandler = function (e) {
@@ -81,24 +77,6 @@ export default class UMouseClickDrag {
e.preventDefault()
}
adjustLocation(location) {
const targetOffset = this.movementSpace.getBoundingClientRect()
location = [
(location[0] - targetOffset.x),
(location[1] - targetOffset.y)
]
return location
}
adjustScale(location) {
let scaleCorrection = 1 / Utility.getScale(this.target)
location = [
location[0] * scaleCorrection,
location[1] * scaleCorrection
]
return location
}
unlistenDOMElement() {
this.target.removeEventListener('mousedown', this.mouseDownHandler)
if (this.clickButton == 2) {

30
js/input/UMouseWheel.js
View File

@@ -1,6 +1,6 @@
import Utility from "../Utility"
import UPointing from "./UPointing"
export default class UMouseWheel {
export default class UMouseWheel extends UPointing {
/**
*
@@ -9,32 +9,14 @@ export default class UMouseWheel {
* @param {Object} options
*/
constructor(target, blueprint, options) {
this.target = target
this.blueprint = blueprint
super(target, blueprint, options)
this.looseTarget = options?.looseTarget ?? true
this.movementSpace = this.blueprint?.getGridDOMElement() ?? document
let self = this
this.mouseWheelHandler = function (e) {
e.preventDefault()
if (!self.looseTarget && e.target != e.currentTarget) {
return
}
let scaleCorrection = 1 / Utility.getScale(self.target)
let offset = [0, 0]
if (self.looseTarget) {
/*
* Compensating for having used the mouse wheel over a descendant of the target (the element listened for the 'wheel' event).
* We are interested to get the location relative to the listened target, not the descendant target that caused the event.
*/
const targetOffset = e.target.getBoundingClientRect()
const currentTargetOffset = e.currentTarget.getBoundingClientRect()
offset = [
e.offsetX + targetOffset.x * scaleCorrection - currentTargetOffset.x * scaleCorrection,
e.offsetY + targetOffset.y * scaleCorrection - currentTargetOffset.y * scaleCorrection
]
} // TODO else branch
self.wheel(Math.sign(e.deltaY), offset)
const location = self.getLocation(e)
self.wheel(Math.sign(e.deltaY), location)
}
this.movementSpace.addEventListener('wheel', this.mouseWheelHandler, false)
@@ -43,7 +25,7 @@ export default class UMouseWheel {
}
/* Subclasses will override the following method */
wheel(location, variation) {
wheel(variation, location) {
}
}

23
js/input/UPointing.js Normal file
View File

@@ -0,0 +1,23 @@
import Utility from "../Utility"
export default class UPointing {
constructor(target, blueprint, options) {
/** @type {HTMLElement} */
this.target = target
/** @type {import("../UEBlueprint").default}" */
this.blueprint = blueprint
this.moveEverywhere = options?.moveEverywhere ?? false
this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement
}
getLocation(mouseEvent) {
const scaleCorrection = 1 / Utility.getScale(this.target)
const targetOffset = this.movementSpace.getBoundingClientRect()
let location = [
(mouseEvent.clientX - targetOffset.x) * scaleCorrection,
(mouseEvent.clientY - targetOffset.y) * scaleCorrection
]
return location
}
}

83
ueblueprint.js
View File

@@ -8,19 +8,37 @@ class Utility {
}
}
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
*/
class UMouseClickDrag {
class UPointing {
constructor(target, blueprint, options) {
/** @type {HTMLElement} */
this.target = target;
/** @type {import("../UEBlueprint").default}" */
this.blueprint = blueprint;
this.moveEverywhere = options?.moveEverywhere ?? false;
this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement;
}
getLocation(mouseEvent) {
const scaleCorrection = 1 / Utility.getScale(this.target);
const targetOffset = this.movementSpace.getBoundingClientRect();
let location = [
(mouseEvent.clientX - targetOffset.x) * scaleCorrection,
(mouseEvent.clientY - targetOffset.y) * scaleCorrection
];
return location
}
}
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
*/
class UMouseClickDrag extends UPointing {
constructor(target, blueprint, options) {
super(target, blueprint, options);
this.clickButton = options?.clickButton ?? 0;
this.exitAnyButton = options?.exitAnyButton ?? true;
this.looseTarget = options?.looseTarget ?? false;
this.moveEverywhere = options?.moveEverywhere ?? false;
this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement;
this.started = false;
this.clickedPosition = [0, 0];
const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace;
@@ -36,7 +54,7 @@ class UMouseClickDrag {
// Attach the listeners
movementListenedElement.addEventListener('mousemove', self.mouseStartedMovingHandler);
document.addEventListener('mouseup', self.mouseUpHandler);
self.clickedPosition = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]));
self.clickedPosition = self.getLocation(e);
self.clicked(self.clickedPosition);
}
break
@@ -64,9 +82,9 @@ class UMouseClickDrag {
this.mouseMoveHandler = function (e) {
e.preventDefault();
e.stopPropagation();
const offset = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]));
const location = self.getLocation(e);
const movement = [e.movementX, e.movementY];
self.dragTo(offset, movement);
self.dragTo(location, movement);
};
this.mouseUpHandler = function (e) {
@@ -89,24 +107,6 @@ class UMouseClickDrag {
e.preventDefault();
}
adjustLocation(location) {
const targetOffset = this.movementSpace.getBoundingClientRect();
location = [
(location[0] - targetOffset.x),
(location[1] - targetOffset.y)
];
return location
}
adjustScale(location) {
let scaleCorrection = 1 / Utility.getScale(this.target);
location = [
location[0] * scaleCorrection,
location[1] * scaleCorrection
];
return location
}
unlistenDOMElement() {
this.target.removeEventListener('mousedown', this.mouseDownHandler);
if (this.clickButton == 2) {
@@ -163,7 +163,7 @@ class USelect extends UMouseClickDrag {
}
}
class UMouseWheel {
class UMouseWheel extends UPointing {
/**
*
@@ -172,32 +172,14 @@ class UMouseWheel {
* @param {Object} options
*/
constructor(target, blueprint, options) {
this.target = target;
this.blueprint = blueprint;
super(target, blueprint, options);
this.looseTarget = options?.looseTarget ?? true;
this.movementSpace = this.blueprint?.getGridDOMElement() ?? document;
let self = this;
this.mouseWheelHandler = function (e) {
e.preventDefault();
if (!self.looseTarget && e.target != e.currentTarget) {
return
}
let scaleCorrection = 1 / Utility.getScale(self.target);
let offset = [0, 0];
if (self.looseTarget) {
/*
* Compensating for having used the mouse wheel over a descendant of the target (the element listened for the 'wheel' event).
* We are interested to get the location relative to the listened target, not the descendant target that caused the event.
*/
const targetOffset = e.target.getBoundingClientRect();
const currentTargetOffset = e.currentTarget.getBoundingClientRect();
offset = [
e.offsetX + targetOffset.x * scaleCorrection - currentTargetOffset.x * scaleCorrection,
e.offsetY + targetOffset.y * scaleCorrection - currentTargetOffset.y * scaleCorrection
];
} // TODO else branch
self.wheel(Math.sign(e.deltaY), offset);
const location = self.getLocation(e);
self.wheel(Math.sign(e.deltaY), location);
};
this.movementSpace.addEventListener('wheel', this.mouseWheelHandler, false);
@@ -206,7 +188,7 @@ class UMouseWheel {
}
/* Subclasses will override the following method */
wheel(location, variation) {
wheel(variation, location) {
}
}
@@ -650,6 +632,7 @@ class UEBlueprint extends HTMLElement {
this.selectObject = new USelect(this.getGridDOMElement(), this, {
clickButton: 0,
moveEverywhere: true,
exitAnyButton: true
});
}