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

Input classes simplified further

Browse Source
This commit is contained in:
barsdeveloper
2021-10-04 21:10:14 +02:00
parent 1842e45888
commit 5963836947
9 changed files with 193 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
js/input/UDrag.js
View File

@@ -3,29 +3,31 @@ import UMouseClickDrag from "./UMouseClickDrag"
export default class UDrag extends UMouseClickDrag {
constructor(target, blueprint, options) {
super(target, blueprint, options)
this.stepSize = options?.stepSize
this.stepSize = parseInt(options?.stepSize)
this.mousePosition = [0, 0]
}
snapToGrid(posX, posY) {
snapToGrid(location) {
return [
this.stepSize * Math.round(posX / this.stepSize),
this.stepSize * Math.round(posY / this.stepSize)
this.stepSize * Math.round(location[0] / this.stepSize),
this.stepSize * Math.round(location[1] / this.stepSize)
]
}
startDrag(e) {
if (!this.stepSize) {
startDrag() {
if (isNaN(this.stepSize) || this.stepSize <= 0) {
this.stepSize = parseInt(getComputedStyle(this.target).getPropertyValue('--ueb-grid-snap'))
if (isNaN(this.stepSize) || this.stepSize <= 0) {
this.stepSize = 1
}
}
// Get the current mouse position
this.mousePosition = this.snapToGrid(e.clientX, e.clientY)
this.mousePosition = this.stepSize != 1 ? this.snapToGrid(this.clickedPosition) : this.clickedPosition
}
dragTo(e) {
let mousePosition = this.snapToGrid(e.clientX, e.clientY)
let scaleCorrection = 1 / this.target.getScale()
const d = [(mousePosition[0] - this.mousePosition[0]) * scaleCorrection, (mousePosition[1] - this.mousePosition[1]) * scaleCorrection]
dragTo(location, movement) {
const mousePosition = this.stepSize != 1 ? this.snapToGrid(location) : location
const d = [mousePosition[0] - this.mousePosition[0], mousePosition[1] - this.mousePosition[1]]
if (d[0] == 0 && d[1] == 0) {
return

17
js/input/UDragScroll.js
View File

@@ -1,18 +1,9 @@
import UDrag from "./UDrag"
import UMouseClickDrag from "./UMouseClickDrag"
export default class UDragScroll extends UDrag {
export default class UDragScroll extends UMouseClickDrag {
dragTo(e) {
const mousePosition = this.snapToGrid(e.clientX, e.clientY)
// How far the mouse has been moved
const dx = mousePosition[0] - this.mousePosition[0]
const dy = mousePosition[1] - this.mousePosition[1]
this.blueprint.scrollDelta([-dx, -dy])
// Reassign the position of mouse
this.mousePosition = mousePosition
dragTo(location, movement) {
this.blueprint.scrollDelta([-movement[0], -movement[1]])
}
}

59
js/input/UMouseClickDrag.js
View File

@@ -1,3 +1,5 @@
import Utility from "../Utility"
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
*/
@@ -9,9 +11,11 @@ export default class UMouseClickDrag {
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]
let movementSpace = this.blueprint?.getGridDOMElement() ?? document
const movementListenedElement = this.moveEverywhere ? document.documentElement : this.movementSpace
let self = this
this.mouseDownHandler = function (e) {
@@ -19,12 +23,13 @@ export default class UMouseClickDrag {
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.stopPropagation()
self.started = false
// Attach the listeners
movementSpace.addEventListener('mousemove', self.mouseStartedMovingHandler)
movementListenedElement.addEventListener('mousemove', self.mouseStartedMovingHandler)
document.addEventListener('mouseup', self.mouseUpHandler)
self.clickedPosition = [e.offsetX, e.offsetY]
self.clicked(e)
self.clickedPosition = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]))
self.clicked(self.clickedPosition)
}
break
default:
@@ -37,28 +42,32 @@ export default class UMouseClickDrag {
this.mouseStartedMovingHandler = function (e) {
e.preventDefault()
e.stopPropagation()
// Delegate from now on to self.mouseMoveHandler
movementSpace.removeEventListener('mousemove', self.mouseStartedMovingHandler)
movementSpace.addEventListener('mousemove', self.mouseMoveHandler)
movementListenedElement.removeEventListener('mousemove', self.mouseStartedMovingHandler)
movementListenedElement.addEventListener('mousemove', self.mouseMoveHandler)
// Do actual actions
self.startDrag(e)
self.startDrag()
self.started = true
}
this.mouseMoveHandler = function (e) {
e.preventDefault()
self.dragTo(e)
e.stopPropagation()
const offset = self.adjustScale(self.adjustLocation([e.clientX, e.clientY]))
const movement = [e.movementX, e.movementY]
self.dragTo(offset, movement)
}
this.mouseUpHandler = function (e) {
if (!self.exitAnyButton || e.button == self.clickButton) {
// Remove the handlers of `mousemove` and `mouseup`
movementSpace.removeEventListener('mousemove', self.mouseStartedMovingHandler)
movementSpace.removeEventListener('mousemove', self.mouseMoveHandler)
// Remove the handlers of "mousemove" and "mouseup"
movementListenedElement.removeEventListener('mousemove', self.mouseStartedMovingHandler)
movementListenedElement.removeEventListener('mousemove', self.mouseMoveHandler)
document.removeEventListener('mouseup', self.mouseUpHandler)
self.endDrag(e)
self.endDrag()
}
}
@@ -72,6 +81,24 @@ 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) {
@@ -80,15 +107,15 @@ export default class UMouseClickDrag {
}
/* Subclasses will override the following methods */
clicked(e) {
clicked(location) {
}
startDrag(e) {
startDrag() {
}
dragTo(e) {
dragTo(location, movement) {
}
endDrag(e) {
endDrag() {
}
}

12
js/input/UMouseWheel.js
View File

@@ -1,3 +1,5 @@
import Utility from "../Utility"
export default class UMouseWheel {
/**
@@ -18,8 +20,8 @@ export default class UMouseWheel {
if (!self.looseTarget && e.target != e.currentTarget) {
return
}
let scaleCorrection = 1 / self.blueprint.getScale()
let offset = [e.offsetX, e.offsetY]
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).
@@ -28,10 +30,10 @@ export default class UMouseWheel {
const targetOffset = e.target.getBoundingClientRect()
const currentTargetOffset = e.currentTarget.getBoundingClientRect()
offset = [
offset[0] + targetOffset.x * scaleCorrection - currentTargetOffset.x * scaleCorrection,
offset[1] + targetOffset.y * scaleCorrection - currentTargetOffset.y * scaleCorrection
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)
}

18
js/input/USelect.js
View File

@@ -10,25 +10,15 @@ export default class USelect extends UMouseClickDrag {
this.mousePosition = [0, 0]
}
clicked(e) {
}
startDrag(e) {
startDrag() {
this.blueprint.startSelecting(this.clickedPosition)
}
dragTo(e) {
let scaleCorrection = 1 / this.blueprint.getScale()
const targetOffset = e.target.getBoundingClientRect()
const currentTargetOffset = e.currentTarget.getBoundingClientRect()
let offset = [
e.offsetX + targetOffset.x * scaleCorrection - currentTargetOffset.x * scaleCorrection,
e.offsetY + targetOffset.y * scaleCorrection - currentTargetOffset.y * scaleCorrection
]
this.blueprint.doSelecting(offset)
dragTo(location, movement) {
this.blueprint.doSelecting(location)
}
endDrag(e) {
endDrag() {
if (this.started) {
this.blueprint.finishSelecting()
} else {