diff --git a/js/UEBlueprint.js b/js/UEBlueprint.js index 6b6fdcc..9332d47 100644 --- a/js/UEBlueprint.js +++ b/js/UEBlueprint.js @@ -120,6 +120,7 @@ export default class UEBlueprint extends HTMLElement { this.selectObject = new USelect(this.getGridDOMElement(), this, { clickButton: 0, + moveEverywhere: true, exitAnyButton: true }) } diff --git a/js/input/UMouseClickDrag.js b/js/input/UMouseClickDrag.js index 098acac..d402745 100644 --- a/js/input/UMouseClickDrag.js +++ b/js/input/UMouseClickDrag.js @@ -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) { diff --git a/js/input/UMouseWheel.js b/js/input/UMouseWheel.js index 6f22b8d..fb9c5b9 100644 --- a/js/input/UMouseWheel.js +++ b/js/input/UMouseWheel.js @@ -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) { } } \ No newline at end of file diff --git a/js/input/UPointing.js b/js/input/UPointing.js new file mode 100644 index 0000000..6132d39 --- /dev/null +++ b/js/input/UPointing.js @@ -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 + } +} \ No newline at end of file diff --git a/ueblueprint.js b/ueblueprint.js index e7df3b9..e1f593c 100644 --- a/ueblueprint.js +++ b/ueblueprint.js @@ -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 }); }