diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 3548bfd..98a34b1 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -1486,23 +1486,22 @@ End Object`; class Copy extends Context { + #copyHandler + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true; super(target, blueprint, options); this.serializer = new ObjectSerializer(); let self = this; - this.copyHandler = _ => { - self.copied(); - return true - }; + this.#copyHandler = _ => self.copied(); } listenEvents() { - document.body.addEventListener("copy", this.copyHandler); + document.body.addEventListener("copy", this.#copyHandler); } unlistenEvents() { - document.body.removeEventListener("copy", this.copyHandler); + document.body.removeEventListener("copy", this.#copyHandler); } copied() { @@ -1814,105 +1813,120 @@ class Pointing extends Context { */ class MouseClickDrag extends Pointing { + #mouseDownHandler = _ => { } + #mouseStartedMovingHandler + #mouseMoveHandler + #mouseUpHandler + #trackingMouse = false + constructor(target, blueprint, options) { super(target, blueprint, options); this.clickButton = options?.clickButton ?? 0; this.exitAnyButton = options?.exitAnyButton ?? true; this.moveEverywhere = options?.moveEverywhere ?? false; this.looseTarget = options?.looseTarget ?? false; + this.consumeClickEvent = options?.consumeClickEvent ?? true; this.started = false; this.clickedPosition = [0, 0]; const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace; let self = this; - this.mouseDownHandler = e => { + /** + * + * @param {MouseEvent} e + */ + this.#mouseDownHandler = e => { this.blueprint.setFocused(true); switch (e.button) { case self.clickButton: // Either doesn't matter or consider the click only when clicking on the parent, not descandants if (self.looseTarget || e.target == e.currentTarget) { e.preventDefault(); - e.stopPropagation(); + if (this.consumeClickEvent) { + e.stopImmediatePropagation(); // Captured, don't call anyone else + } self.started = false; // Attach the listeners - movementListenedElement.addEventListener("mousemove", self.mouseStartedMovingHandler); - document.addEventListener("mouseup", self.mouseUpHandler); + movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler); + document.addEventListener("mouseup", self.#mouseUpHandler); self.clickedPosition = self.locationFromEvent(e); self.clicked(self.clickedPosition); - return true } break default: if (!self.exitAnyButton) { - self.mouseUpHandler(e); + self.#mouseUpHandler(e); } break } - return false }; - this.mouseStartedMovingHandler = e => { + /** + * + * @param {MouseEvent} e + */ + this.#mouseStartedMovingHandler = e => { e.preventDefault(); - e.stopPropagation(); - - // Delegate from now on to self.mouseMoveHandler - movementListenedElement.removeEventListener("mousemove", self.mouseStartedMovingHandler); - movementListenedElement.addEventListener("mousemove", self.mouseMoveHandler); + // Delegate from now on to self.#mouseMoveHandler + movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler); + movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler); // Do actual actions self.startDrag(); self.started = true; - const dragEvent = new CustomEvent(Configuration.trackingMouseEventName.begin, { - bubbles: true, - cancelable: true - }); - this.target.dispatchEvent(dragEvent); - return true + const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin); + // Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false + self.#trackingMouse = this.target.dispatchEvent(dragEvent) == false; }; - this.mouseMoveHandler = e => { + this.#mouseMoveHandler = e => { e.preventDefault(); - e.stopPropagation(); const location = self.locationFromEvent(e); const movement = [e.movementX, e.movementY]; self.dragTo(location, movement); - self.blueprint.entity.mousePosition = self.locationFromEvent(e); - return true - }; - - this.mouseUpHandler = e => { - if (!self.exitAnyButton || e.button == self.clickButton) { - // Remove the handlers of "mousemove" and "mouseup" - movementListenedElement.removeEventListener("mousemove", self.mouseStartedMovingHandler); - movementListenedElement.removeEventListener("mousemove", self.mouseMoveHandler); - document.removeEventListener("mouseup", self.mouseUpHandler); - self.endDrag(); - const dragEvent = new CustomEvent(Configuration.trackingMouseEventName.end, { - bubbles: true, - cancelable: true - }); - this.target.dispatchEvent(dragEvent); - return true + if (self.#trackingMouse) { + self.blueprint.entity.mousePosition = self.locationFromEvent(e); } - return false }; - this.target.addEventListener("mousedown", this.mouseDownHandler); + this.#mouseUpHandler = e => { + if (!self.exitAnyButton || e.button == self.clickButton) { + e.preventDefault(); + // Remove the handlers of "mousemove" and "mouseup" + movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler); + movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler); + document.removeEventListener("mouseup", self.#mouseUpHandler); + self.endDrag(); + if (self.#trackingMouse) { + const dragEvent = self.getEvent(Configuration.trackingMouseEventName.end); + this.target.dispatchEvent(dragEvent); + self.#trackingMouse = false; + } + } + }; + + this.target.addEventListener("mousedown", this.#mouseDownHandler); if (this.clickButton == 2) { - this.target.addEventListener("contextmenu", this.preventDefault); + this.target.addEventListener("contextmenu", e => e.preventDefault()); } } - preventDefault(e) { - e.preventDefault(); + getEvent(eventName) { + return new CustomEvent(eventName, { + detail: { + tracker: this + }, + bubbles: true, + cancelable: true + }) } unlistenDOMElement() { super.unlistenDOMElement(); - this.target.removeEventListener("mousedown", this.mouseDownHandler); + this.target.removeEventListener("mousedown", this.#mouseDownHandler); if (this.clickButton == 2) { - this.target.removeEventListener("contextmenu", this.preventDefault); + this.target.removeEventListener("contextmenu", e => e.preventDefault()); } } @@ -2460,67 +2474,89 @@ class MouseScrollGraph extends MouseClickDrag { class MouseTracking extends Pointing { + #mouseTracker = null + #mousemoveHandler + #trackingMouseStolenHandler + #trackingMouseGaveBackHandler + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true; super(target, blueprint, options); - this.trackingStolen = null; let self = this; - this.mousemoveHandler = e => { + + /** + * + * @param {MouseEvent} e + */ + this.#mousemoveHandler = e => { self.blueprint.entity.mousePosition = self.locationFromEvent(e); - return true }; - this.trackingMouseStolenHandler = e => { - this.trackingStolen = e.target; - self.unlistenMouseMove(); - return true - }; - this.trackingMouseGaveBackHandler = e => { - if (!this.trackingStolen == e.target) { - return false + + /** + * + * @param {CustomEvent} e + */ + this.#trackingMouseStolenHandler = e => { + if (!self.#mouseTracker) { + e.preventDefault(); + this.#mouseTracker = e.detail.tracker; + self.unlistenMouseMove(); + } + }; + + /** + * + * @param {CustomEvent} e + */ + this.#trackingMouseGaveBackHandler = e => { + if (self.#mouseTracker == e.detail.tracker) { + e.preventDefault(); + self.#mouseTracker = null; + self.listenMouseMove(); } - self.listenMouseMove(); - return true }; } listenMouseMove() { - this.target.addEventListener("mousemove", this.mousemoveHandler); + this.target.addEventListener("mousemove", this.#mousemoveHandler); } unlistenMouseMove() { - this.target.removeEventListener("mousemove", this.mousemoveHandler); + this.target.removeEventListener("mousemove", this.#mousemoveHandler); } listenEvents() { this.listenMouseMove(); - this.blueprint.addEventListener(Configuration.trackingMouseEventName.begin, this.trackingMouseStolenHandler); - this.blueprint.addEventListener(Configuration.trackingMouseEventName.end, this.trackingMouseGaveBackHandler); + this.blueprint.addEventListener(Configuration.trackingMouseEventName.begin, this.#trackingMouseStolenHandler); + this.blueprint.addEventListener(Configuration.trackingMouseEventName.end, this.#trackingMouseGaveBackHandler); } unlistenEvents() { this.unlistenMouseMove(); - this.blueprint.removeEventListener(Configuration.trackingMouseEventName.begin, this.trackingMouseStolenHandler); - this.blueprint.removeEventListener(Configuration.trackingMouseEventName.end, this.trackingMouseGaveBackHandler); + this.blueprint.removeEventListener(Configuration.trackingMouseEventName.begin, this.#trackingMouseStolenHandler); + this.blueprint.removeEventListener(Configuration.trackingMouseEventName.end, this.#trackingMouseGaveBackHandler); } } class Paste extends Context { + #pasteHandle + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true; super(target, blueprint, options); this.serializer = new ObjectSerializer(); let self = this; - this.pasteHandle = e => self.pasted(e.clipboardData.getData("Text")); + this.#pasteHandle = e => self.pasted(e.clipboardData.getData("Text")); } listenEvents() { - document.body.addEventListener("paste", this.pasteHandle); + document.body.addEventListener("paste", this.#pasteHandle); } unlistenEvents() { - document.body.removeEventListener("paste", this.pasteHandle); + document.body.removeEventListener("paste", this.#pasteHandle); } pasted(value) { @@ -2580,40 +2616,44 @@ class Select extends MouseClickDrag { class Unfocus extends Context { + #clickHandler + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true; super(target, blueprint, options); let self = this; - this.clickHandler = e => self.clickedSomewhere(e); + this.#clickHandler = e => self.clickedSomewhere(e.target); if (this.blueprint.focuse) { - document.addEventListener("click", this.clickHandler); + document.addEventListener("click", this.#clickHandler); } } /** * - * @param {MouseEvent} e + * @param {HTMLElement} e */ - clickedSomewhere(e) { - // If target is inside the blueprint grid - if (e.target.closest("ueb-blueprint")) { - return + clickedSomewhere(target) { + // If target is outside the blueprint grid + if (!target.closest("ueb-blueprint")) { + this.blueprint.setFocused(false); } - this.blueprint.setFocused(false); } listenEvents() { - document.addEventListener("click", this.clickHandler); + document.addEventListener("click", this.#clickHandler); } unlistenEvents() { - document.removeEventListener("click", this.clickHandler); + document.removeEventListener("click", this.#clickHandler); } } class MouseWheel extends Pointing { + #mouseWheelHandler + #mouseParentWheelHandler + /** * * @param {HTMLElement} target @@ -2626,27 +2666,26 @@ class MouseWheel extends Pointing { this.looseTarget = options?.looseTarget ?? true; let self = this; - this.mouseWheelHandler = e => { + this.#mouseWheelHandler = e => { e.preventDefault(); const location = self.locationFromEvent(e); self.wheel(Math.sign(e.deltaY), location); - return true }; - this.mouseParentWheelHandler = e => e.preventDefault(); + this.#mouseParentWheelHandler = e => e.preventDefault(); if (this.blueprint.focused) { - this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false); + this.movementSpace.addEventListener("wheel", this.#mouseWheelHandler, false); } } listenEvents() { - this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false); - this.movementSpace.parentElement?.addEventListener("wheel", this.mouseParentWheelHandler); + this.movementSpace.addEventListener("wheel", this.#mouseWheelHandler, false); + this.movementSpace.parentElement?.addEventListener("wheel", this.#mouseParentWheelHandler); } unlistenEvents() { - this.movementSpace.removeEventListener("wheel", this.mouseWheelHandler, false); - this.movementSpace.parentElement?.removeEventListener("wheel", this.mouseParentWheelHandler); + this.movementSpace.removeEventListener("wheel", this.#mouseWheelHandler, false); + this.movementSpace.parentElement?.removeEventListener("wheel", this.#mouseParentWheelHandler); } /* Subclasses will override the following method */ diff --git a/js/input/common/Copy.js b/js/input/common/Copy.js index ff4940e..162ddfa 100755 --- a/js/input/common/Copy.js +++ b/js/input/common/Copy.js @@ -3,23 +3,22 @@ import ObjectSerializer from "../../serialization/ObjectSerializer" export default class Copy extends Context { + #copyHandler + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true super(target, blueprint, options) this.serializer = new ObjectSerializer() let self = this - this.copyHandler = _ => { - self.copied() - return true - } + this.#copyHandler = _ => self.copied() } listenEvents() { - document.body.addEventListener("copy", this.copyHandler) + document.body.addEventListener("copy", this.#copyHandler) } unlistenEvents() { - document.body.removeEventListener("copy", this.copyHandler) + document.body.removeEventListener("copy", this.#copyHandler) } copied() { diff --git a/js/input/common/Paste.js b/js/input/common/Paste.js index fc4cf03..2736160 100755 --- a/js/input/common/Paste.js +++ b/js/input/common/Paste.js @@ -4,20 +4,22 @@ import Context from "../Context" export default class Paste extends Context { + #pasteHandle + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true super(target, blueprint, options) this.serializer = new ObjectSerializer() let self = this - this.pasteHandle = e => self.pasted(e.clipboardData.getData("Text")) + this.#pasteHandle = e => self.pasted(e.clipboardData.getData("Text")) } listenEvents() { - document.body.addEventListener("paste", this.pasteHandle) + document.body.addEventListener("paste", this.#pasteHandle) } unlistenEvents() { - document.body.removeEventListener("paste", this.pasteHandle) + document.body.removeEventListener("paste", this.#pasteHandle) } pasted(value) { diff --git a/js/input/mouse/MouseClickDrag.js b/js/input/mouse/MouseClickDrag.js index 64f9839..d47456d 100755 --- a/js/input/mouse/MouseClickDrag.js +++ b/js/input/mouse/MouseClickDrag.js @@ -6,105 +6,120 @@ import Pointing from "./Pointing" */ export default class MouseClickDrag extends Pointing { + #mouseDownHandler = _ => { } + #mouseStartedMovingHandler + #mouseMoveHandler + #mouseUpHandler + #trackingMouse = false + constructor(target, blueprint, options) { super(target, blueprint, options) this.clickButton = options?.clickButton ?? 0 this.exitAnyButton = options?.exitAnyButton ?? true this.moveEverywhere = options?.moveEverywhere ?? false this.looseTarget = options?.looseTarget ?? false + this.consumeClickEvent = options?.consumeClickEvent ?? true this.started = false this.clickedPosition = [0, 0] const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace let self = this - this.mouseDownHandler = e => { + /** + * + * @param {MouseEvent} e + */ + this.#mouseDownHandler = e => { this.blueprint.setFocused(true) switch (e.button) { case self.clickButton: // Either doesn't matter or consider the click only when clicking on the parent, not descandants if (self.looseTarget || e.target == e.currentTarget) { e.preventDefault() - e.stopPropagation() + if (this.consumeClickEvent) { + e.stopImmediatePropagation() // Captured, don't call anyone else + } self.started = false // Attach the listeners - movementListenedElement.addEventListener("mousemove", self.mouseStartedMovingHandler) - document.addEventListener("mouseup", self.mouseUpHandler) + movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler) + document.addEventListener("mouseup", self.#mouseUpHandler) self.clickedPosition = self.locationFromEvent(e) self.clicked(self.clickedPosition) - return true } break default: if (!self.exitAnyButton) { - self.mouseUpHandler(e) + self.#mouseUpHandler(e) } break } - return false } - this.mouseStartedMovingHandler = e => { + /** + * + * @param {MouseEvent} e + */ + this.#mouseStartedMovingHandler = e => { e.preventDefault() - e.stopPropagation() - - // Delegate from now on to self.mouseMoveHandler - movementListenedElement.removeEventListener("mousemove", self.mouseStartedMovingHandler) - movementListenedElement.addEventListener("mousemove", self.mouseMoveHandler) + // Delegate from now on to self.#mouseMoveHandler + movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler) + movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler) // Do actual actions self.startDrag() self.started = true - const dragEvent = new CustomEvent(Configuration.trackingMouseEventName.begin, { - bubbles: true, - cancelable: true - }) - this.target.dispatchEvent(dragEvent) - return true + const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin) + // Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false + self.#trackingMouse = this.target.dispatchEvent(dragEvent) == false } - this.mouseMoveHandler = e => { + this.#mouseMoveHandler = e => { e.preventDefault() - e.stopPropagation() const location = self.locationFromEvent(e) const movement = [e.movementX, e.movementY] self.dragTo(location, movement) - self.blueprint.entity.mousePosition = self.locationFromEvent(e) - return true - } - - this.mouseUpHandler = e => { - if (!self.exitAnyButton || e.button == self.clickButton) { - // Remove the handlers of "mousemove" and "mouseup" - movementListenedElement.removeEventListener("mousemove", self.mouseStartedMovingHandler) - movementListenedElement.removeEventListener("mousemove", self.mouseMoveHandler) - document.removeEventListener("mouseup", self.mouseUpHandler) - self.endDrag() - const dragEvent = new CustomEvent(Configuration.trackingMouseEventName.end, { - bubbles: true, - cancelable: true - }) - this.target.dispatchEvent(dragEvent) - return true + if (self.#trackingMouse) { + self.blueprint.entity.mousePosition = self.locationFromEvent(e) } - return false } - this.target.addEventListener("mousedown", this.mouseDownHandler) + this.#mouseUpHandler = e => { + if (!self.exitAnyButton || e.button == self.clickButton) { + e.preventDefault() + // Remove the handlers of "mousemove" and "mouseup" + movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler) + movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler) + document.removeEventListener("mouseup", self.#mouseUpHandler) + self.endDrag() + if (self.#trackingMouse) { + const dragEvent = self.getEvent(Configuration.trackingMouseEventName.end) + this.target.dispatchEvent(dragEvent) + self.#trackingMouse = false + } + } + } + + this.target.addEventListener("mousedown", this.#mouseDownHandler) if (this.clickButton == 2) { - this.target.addEventListener("contextmenu", this.preventDefault) + this.target.addEventListener("contextmenu", e => e.preventDefault()) } } - preventDefault(e) { - e.preventDefault() + getEvent(eventName) { + return new CustomEvent(eventName, { + detail: { + tracker: this + }, + bubbles: true, + cancelable: true + }) } unlistenDOMElement() { super.unlistenDOMElement() - this.target.removeEventListener("mousedown", this.mouseDownHandler) + this.target.removeEventListener("mousedown", this.#mouseDownHandler) if (this.clickButton == 2) { - this.target.removeEventListener("contextmenu", this.preventDefault) + this.target.removeEventListener("contextmenu", e => e.preventDefault()) } } diff --git a/js/input/mouse/MouseTracking.js b/js/input/mouse/MouseTracking.js index 53bc19b..aa893de 100755 --- a/js/input/mouse/MouseTracking.js +++ b/js/input/mouse/MouseTracking.js @@ -3,47 +3,67 @@ import Pointing from "./Pointing" export default class MouseTracking extends Pointing { + #mouseTracker = null + #mousemoveHandler + #trackingMouseStolenHandler + #trackingMouseGaveBackHandler + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true super(target, blueprint, options) - this.trackingStolen = null let self = this - this.mousemoveHandler = e => { + + /** + * + * @param {MouseEvent} e + */ + this.#mousemoveHandler = e => { self.blueprint.entity.mousePosition = self.locationFromEvent(e) - return true } - this.trackingMouseStolenHandler = e => { - this.trackingStolen = e.target - self.unlistenMouseMove() - return true - } - this.trackingMouseGaveBackHandler = e => { - if (!this.trackingStolen == e.target) { - return false + + /** + * + * @param {CustomEvent} e + */ + this.#trackingMouseStolenHandler = e => { + if (!self.#mouseTracker) { + e.preventDefault() + this.#mouseTracker = e.detail.tracker + self.unlistenMouseMove() + } + } + + /** + * + * @param {CustomEvent} e + */ + this.#trackingMouseGaveBackHandler = e => { + if (self.#mouseTracker == e.detail.tracker) { + e.preventDefault() + self.#mouseTracker = null + self.listenMouseMove() } - self.listenMouseMove() - return true } } listenMouseMove() { - this.target.addEventListener("mousemove", this.mousemoveHandler) + this.target.addEventListener("mousemove", this.#mousemoveHandler) } unlistenMouseMove() { - this.target.removeEventListener("mousemove", this.mousemoveHandler) + this.target.removeEventListener("mousemove", this.#mousemoveHandler) } listenEvents() { this.listenMouseMove() - this.blueprint.addEventListener(Configuration.trackingMouseEventName.begin, this.trackingMouseStolenHandler) - this.blueprint.addEventListener(Configuration.trackingMouseEventName.end, this.trackingMouseGaveBackHandler) + this.blueprint.addEventListener(Configuration.trackingMouseEventName.begin, this.#trackingMouseStolenHandler) + this.blueprint.addEventListener(Configuration.trackingMouseEventName.end, this.#trackingMouseGaveBackHandler) } unlistenEvents() { this.unlistenMouseMove() - this.blueprint.removeEventListener(Configuration.trackingMouseEventName.begin, this.trackingMouseStolenHandler) - this.blueprint.removeEventListener(Configuration.trackingMouseEventName.end, this.trackingMouseGaveBackHandler) + this.blueprint.removeEventListener(Configuration.trackingMouseEventName.begin, this.#trackingMouseStolenHandler) + this.blueprint.removeEventListener(Configuration.trackingMouseEventName.end, this.#trackingMouseGaveBackHandler) } } diff --git a/js/input/mouse/MouseWheel.js b/js/input/mouse/MouseWheel.js index 4f48f00..db49832 100755 --- a/js/input/mouse/MouseWheel.js +++ b/js/input/mouse/MouseWheel.js @@ -2,6 +2,9 @@ import Pointing from "./Pointing" export default class MouseWheel extends Pointing { + #mouseWheelHandler + #mouseParentWheelHandler + /** * * @param {HTMLElement} target @@ -14,27 +17,26 @@ export default class MouseWheel extends Pointing { this.looseTarget = options?.looseTarget ?? true let self = this - this.mouseWheelHandler = e => { + this.#mouseWheelHandler = e => { e.preventDefault() const location = self.locationFromEvent(e) self.wheel(Math.sign(e.deltaY), location) - return true } - this.mouseParentWheelHandler = e => e.preventDefault() + this.#mouseParentWheelHandler = e => e.preventDefault() if (this.blueprint.focused) { - this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false) + this.movementSpace.addEventListener("wheel", this.#mouseWheelHandler, false) } } listenEvents() { - this.movementSpace.addEventListener("wheel", this.mouseWheelHandler, false) - this.movementSpace.parentElement?.addEventListener("wheel", this.mouseParentWheelHandler) + this.movementSpace.addEventListener("wheel", this.#mouseWheelHandler, false) + this.movementSpace.parentElement?.addEventListener("wheel", this.#mouseParentWheelHandler) } unlistenEvents() { - this.movementSpace.removeEventListener("wheel", this.mouseWheelHandler, false) - this.movementSpace.parentElement?.removeEventListener("wheel", this.mouseParentWheelHandler) + this.movementSpace.removeEventListener("wheel", this.#mouseWheelHandler, false) + this.movementSpace.parentElement?.removeEventListener("wheel", this.#mouseParentWheelHandler) } /* Subclasses will override the following method */ diff --git a/js/input/mouse/Unfocus.js b/js/input/mouse/Unfocus.js index 521f3fc..17eeeb9 100755 --- a/js/input/mouse/Unfocus.js +++ b/js/input/mouse/Unfocus.js @@ -2,34 +2,35 @@ import Context from "../Context" export default class Unfocus extends Context { + #clickHandler + constructor(target, blueprint, options = {}) { options.wantsFocusCallback = true super(target, blueprint, options) let self = this - this.clickHandler = e => self.clickedSomewhere(e) + this.#clickHandler = e => self.clickedSomewhere(e.target) if (this.blueprint.focuse) { - document.addEventListener("click", this.clickHandler) + document.addEventListener("click", this.#clickHandler) } } /** * - * @param {MouseEvent} e + * @param {HTMLElement} e */ - clickedSomewhere(e) { - // If target is inside the blueprint grid - if (e.target.closest("ueb-blueprint")) { - return + clickedSomewhere(target) { + // If target is outside the blueprint grid + if (!target.closest("ueb-blueprint")) { + this.blueprint.setFocused(false) } - this.blueprint.setFocused(false) } listenEvents() { - document.addEventListener("click", this.clickHandler) + document.addEventListener("click", this.#clickHandler) } unlistenEvents() { - document.removeEventListener("click", this.clickHandler) + document.removeEventListener("click", this.#clickHandler) } } diff --git a/rollup.config.js b/rollup.config.js index 5b42cc6..a20213e 100755 --- a/rollup.config.js +++ b/rollup.config.js @@ -14,7 +14,7 @@ export default { nodeResolve({ browser: true }), //minifyHTML(), commonjs(), - //terser() + //terser(), copy({ targets: [ {