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

Window introduced

Browse Source
This commit is contained in:
barsdeveloper
2022-09-24 20:27:52 +02:00
parent bf2c3ec939
commit 9a4d323a87
27 changed files with 891 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
js/input/mouse/IMouseClick.js Normal file
View File

@@ -0,0 +1,80 @@
import IPointing from "./IPointing"
/** @typedef {import("../../Blueprint").default} Blueprint */
/**
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
export default class IMouseClick extends IPointing {
/** @type {(e: MouseEvent) => void} */
#mouseDownHandler
/** @type {(e: MouseEvent) => void} */
#mouseUpHandler
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0
options.consumeEvent ??= true
options.exitAnyButton ??= true
options.looseTarget ??= false
super(target, blueprint, options)
this.clickedPosition = [0, 0]
let self = this
this.#mouseDownHandler = e => {
self.blueprint.setFocused(true)
switch (e.button) {
case self.options.clickButton:
// Either doesn't matter or consider the click only when clicking on the target, not descandants
if (self.options.looseTarget || e.target == e.currentTarget) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Attach the listeners
document.addEventListener("mouseup", self.#mouseUpHandler)
self.clickedPosition = self.locationFromEvent(e)
self.clicked(self.clickedPosition)
}
break
default:
if (!self.options.exitAnyButton) {
self.#mouseUpHandler(e)
}
break
}
}
this.#mouseUpHandler = e => {
if (!self.options.exitAnyButton || e.button == self.options.clickButton) {
if (self.options.consumeEvent) {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
document.removeEventListener("mouseup", self.#mouseUpHandler)
self.unclicked()
}
}
this.listenEvents()
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler)
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault())
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler)
}
/* Subclasses will override the following methods */
clicked(location) {
}
unclicked(location) {
}
}

30
js/input/mouse/IMouseClickDrag.js
View File

@@ -1,12 +1,12 @@
import Configuration from "../../Configuration"
import IPointing from "./IPointing"
import Utility from "../../Utility"
/**
* @typedef {import("../../Blueprint").default} Blueprint
*/
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
@@ -25,19 +25,26 @@ export default class IMouseClickDrag extends IPointing {
#mouseUpHandler
#trackingMouse = false
#movementListenedElement
#draggableElement
started = false
stepSize = 1
clickedPosition = [0, 0]
mouseLocation = [0, 0]
constructor(target, blueprint, options = {}) {
options.clickButton ??= 0
options.consumeEvent ??= true
options.exitAnyButton ??= true
options.draggableElement ??= target
options.looseTarget ??= false
options.moveEverywhere ??= false
super(target, blueprint, options)
this.clickedPosition = [0, 0]
this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
const movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
this.#movementListenedElement = this.options.moveEverywhere ? document.documentElement : this.movementSpace
this.#draggableElement = this.options.draggableElement
let self = this
this.#mouseDownHandler = e => {
@@ -50,7 +57,7 @@ export default class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Attach the listeners
movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
self.#movementListenedElement.addEventListener("mousemove", self.#mouseStartedMovingHandler)
document.addEventListener("mouseup", self.#mouseUpHandler)
self.clickedPosition = self.locationFromEvent(e)
self.clicked(self.clickedPosition)
@@ -69,13 +76,14 @@ export default class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Delegate from now on to self.#mouseMoveHandler
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler)
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
self.#movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler)
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin)
self.#trackingMouse = self.target.dispatchEvent(dragEvent) == false
const location = self.locationFromEvent(e)
// Do actual actions
this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
self.startDrag(location)
self.started = true
}
@@ -98,8 +106,8 @@ export default class IMouseClickDrag extends IPointing {
e.stopImmediatePropagation() // Captured, don't call anyone else
}
// Remove the handlers of "mousemove" and "mouseup"
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
self.#movementListenedElement.removeEventListener("mousemove", self.#mouseMoveHandler)
document.removeEventListener("mouseup", self.#mouseUpHandler)
if (self.started) {
self.endDrag()
@@ -118,14 +126,14 @@ export default class IMouseClickDrag extends IPointing {
}
listenEvents() {
this.target.addEventListener("mousedown", this.#mouseDownHandler)
this.#draggableElement.addEventListener("mousedown", this.#mouseDownHandler)
if (this.options.clickButton == 2) {
this.target.addEventListener("contextmenu", e => e.preventDefault())
this.#draggableElement.addEventListener("contextmenu", e => e.preventDefault())
}
}
unlistenEvents() {
this.target.removeEventListener("mousedown", this.#mouseDownHandler)
this.#draggableElement.removeEventListener("mousedown", this.#mouseDownHandler)
}
getEvent(eventName) {

2
js/input/mouse/MouseIgnore.js
View File

@@ -1,4 +1,4 @@
import IMouseClickDrag from "./IMouseClickDrag";
import IMouseClickDrag from "./IMouseClickDrag"
/**
* @typedef {import("../../element/PinElement").default} PinElement

31
js/input/mouse/MouseMoveDraggable.js Executable file
View File

@@ -0,0 +1,31 @@
import IMouseClickDrag from "./IMouseClickDrag"
import Utility from "../../Utility"
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
export default class MouseMoveDraggable extends IMouseClickDrag {
dragTo(location, movement) {
const initialTargetLocation = [this.target.locationX, this.target.locationY]
const [mouseLocation, targetLocation] = this.stepSize > 1
? [Utility.snapToGrid(location, this.stepSize), Utility.snapToGrid(initialTargetLocation, this.stepSize)]
: [location, initialTargetLocation]
const d = [
mouseLocation[0] - this.mouseLocation[0],
mouseLocation[1] - this.mouseLocation[1]
]
if (d[0] == 0 && d[1] == 0) {
return
}
// Make sure it snaps on the grid
d[0] += targetLocation[0] - this.target.locationX
d[1] += targetLocation[1] - this.target.locationY
this.target.addLocation(d)
// Reassign the position of mouse
this.mouseLocation = mouseLocation
}
}

21
js/input/mouse/MouseMoveNodes.js
View File

@@ -1,5 +1,5 @@
import Configuration from "../../Configuration"
import IMouseClickDrag from "./IMouseClickDrag"
import MouseMoveDraggable from "./MouseMoveDraggable"
import Utility from "../../Utility"
/**
@@ -7,21 +7,10 @@ import Utility from "../../Utility"
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/**
* @extends {IMouseClickDrag<ISelectableDraggableElement>}
*/
export default class MouseMoveNodes extends IMouseClickDrag {
constructor(target, blueprint, options) {
super(target, blueprint, options)
this.stepSize = parseInt(options?.stepSize ?? Configuration.gridSize)
this.mouseLocation = [0, 0]
}
/** @extends {IMouseClickDrag<ISelectableDraggableElement>} */
export default class MouseMoveNodes extends MouseMoveDraggable {
startDrag() {
// Get the current mouse position
this.mouseLocation = Utility.snapToGrid(this.clickedPosition, this.stepSize)
if (!this.target.selected) {
this.blueprint.unselectAll()
this.target.setSelected(true)
@@ -37,17 +26,13 @@ export default class MouseMoveNodes extends IMouseClickDrag {
mouseLocation[0] - this.mouseLocation[0],
mouseLocation[1] - this.mouseLocation[1]
]
if (d[0] == 0 && d[1] == 0) {
return
}
// Make sure it snaps on the grid
d[0] += targetLocation[0] - this.target.locationX
d[1] += targetLocation[1] - this.target.locationY
this.target.dispatchDragEvent(d)
// Reassign the position of mouse
this.mouseLocation = mouseLocation
}

26
js/input/mouse/MouseOpenWindow.js Normal file
View File

@@ -0,0 +1,26 @@
import IMouseClick from "./IMouseClick"
import WindowElement from "../../element/WindowElement"
/**
* @template {HTMLElement} T
* @extends {IMouseClick<T>}
*/
export default class MouseOpenWindow extends IMouseClick {
#window
constructor(target, blueprint, options = {}) {
options.windowType ??= "window"
super(target, blueprint, options)
}
clicked(location) {
}
unclicked(location) {
this.#window = new WindowElement({
type: this.options.windowType
})
this.blueprint.append(this.#window)
}
}