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

selector wip

Browse Source
This commit is contained in:
barsdeveloper
2021-09-09 18:06:49 +02:00
parent 6b8b52ff37
commit ccaad9b677
6 changed files with 202 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
js/UEBlueprint.js
View File

@@ -49,12 +49,14 @@ export default class UEBlueprint extends HTMLElement {
constructor() {
super()
/** @type {Set<import("./UEBlueprintObject.js").default>}" */
this.nodes = new Set()
this.expandGridSize = 400
this.gridElement = null
this.viewportElement = null
this.overlayElement = null
this.selectorElement = null
this.selectorObserver = null
this.dragObject = null
this.selectObject = null
this.additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
@@ -102,6 +104,10 @@ export default class UEBlueprint extends HTMLElement {
this.selectObject.unlistenDOMElement()
}
getScroll() {
return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop]
}
setScroll(value, smooth = false) {
this.scroll = value
if (!smooth) {
@@ -151,10 +157,6 @@ export default class UEBlueprint extends HTMLElement {
this.setScroll(finalScroll, smooth)
}
getScroll() {
return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop]
}
scrollCenter() {
const scroll = this.getScroll()
const offset = [
@@ -278,26 +280,56 @@ export default class UEBlueprint extends HTMLElement {
return parseFloat(getComputedStyle(this.gridElement).getPropertyValue('--ueb-grid-scale'))
}
startSelecting(x, y) {
compensateTranslation(position) {
position[0] -= this.translateValue[0]
position[1] -= this.translateValue[1]
return position
}
/**
* Create a selection rectangle starting from the specified position
* @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element)
*/
startSelecting(initialPosition) {
if (this.selectorElement) {
this.finishSelecting()
}
initialPosition = this.compensateTranslation(initialPosition)
this.selectorElement = this.constructor.getElement(this.selectorTemplate())
this.querySelector('[data-nodes]').appendChild(this.selectorElement)
this.selectorElement.style.setProperty('--ueb-select-from-x', x)
this.selectorElement.style.setProperty('--ueb-select-from-y', y)
this.selectorElement.style.setProperty('--ueb-select-from-x', initialPosition[0])
this.selectorElement.style.setProperty('--ueb-select-from-y', initialPosition[1])
this.selectorObserver = new IntersectionObserver(
(entries, observer) => {
entries.map(entry => {
/** @type {import("./UEBlueprintObject.js").default;}" */
let target = entry.target
target.setSelected(entry.isIntersecting)
})
}, {
threshold: [0.01],
root: this.selectorElement
})
this.nodes.forEach(element => this.selectorObserver.observe(element))
}
finishSelecting() {
if (this.selectorElement) {
this.selectorElement.remove()
this.selectorElement = null
this.selectorObserver.disconnect()
this.selectorObserver = null
}
}
doSelecting(x, y) {
this.selectorElement.style.setProperty('--ueb-select-to-x', x)
this.selectorElement.style.setProperty('--ueb-select-to-y', y)
/**
* Move selection rectagle to the specified final position. The initial position was specified by startSelecting()
* @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element)
*/
doSelecting(finalPosition) {
finalPosition = this.compensateTranslation(finalPosition)
this.selectorElement.style.setProperty('--ueb-select-to-x', finalPosition[0])
this.selectorElement.style.setProperty('--ueb-select-to-y', finalPosition[1])
}
addNode(...blueprintNodes) {