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

Minor refactoring and fixes

Browse Source
This commit is contained in:
barsdeveloper
2022-12-26 14:10:25 +01:00
parent 3df33bfe05
commit a1ae7799a1
30 changed files with 651 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
js/template/BlueprintTemplate.js
View File

@@ -37,6 +37,14 @@ export default class BlueprintTemplate extends ITemplate {
"--ueb-node-radius": `${Configuration.nodeRadius}px`,
}
/** @type {HTMLElement} */ headerElement
/** @type {HTMLElement} */ overlayElement
/** @type {HTMLElement} */ viewportElement
/** @type {SelectorElement} */ selectorElement
/** @type {HTMLElement} */ gridElement
/** @type {HTMLElement} */ linksContainerElement
/** @type {HTMLElement} */ nodesContainerElement
/** @param {Blueprint} element */
initialize(element) {
super.initialize(element)
@@ -91,26 +99,26 @@ export default class BlueprintTemplate extends ITemplate {
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
this.element.headerElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-header'))
this.element.overlayElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-overlay'))
this.element.viewportElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-body'))
this.element.selectorElement = /** @type {SelectorElement} */(this.element.querySelector('ueb-selector'))
this.element.gridElement = /** @type {HTMLElement} */(this.element.viewportElement.querySelector(".ueb-grid"))
this.element.linksContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-links]"))
this.element.linksContainerElement.append(...this.element.getLinks())
this.element.nodesContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-nodes]"))
this.element.nodesContainerElement.append(...this.element.getNodes())
this.element.viewportElement.scroll(Configuration.expandGridSize, Configuration.expandGridSize)
this.headerElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-header'))
this.overlayElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-overlay'))
this.viewportElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-body'))
this.selectorElement = /** @type {SelectorElement} */(this.element.querySelector('ueb-selector'))
this.gridElement = /** @type {HTMLElement} */(this.viewportElement.querySelector(".ueb-grid"))
this.linksContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-links]"))
this.linksContainerElement.append(...this.element.getLinks())
this.nodesContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-nodes]"))
this.nodesContainerElement.append(...this.element.getNodes())
this.viewportElement.scroll(Configuration.expandGridSize, Configuration.expandGridSize)
}
/** @param {PropertyValues} changedProperties */
willUpdate(changedProperties) {
super.willUpdate(changedProperties)
if (this.element.headerElement && changedProperties.has("zoom")) {
this.element.headerElement.classList.add("ueb-zoom-changed")
this.element.headerElement.addEventListener(
if (this.headerElement && changedProperties.has("zoom")) {
this.headerElement.classList.add("ueb-zoom-changed")
this.headerElement.addEventListener(
"animationend",
() => this.element.headerElement.classList.remove("ueb-zoom-changed")
() => this.headerElement.classList.remove("ueb-zoom-changed")
)
}
}
@@ -119,7 +127,7 @@ export default class BlueprintTemplate extends ITemplate {
updated(changedProperties) {
super.updated(changedProperties)
if (changedProperties.has("scrollX") || changedProperties.has("scrollY")) {
this.element.viewportElement.scroll(this.element.scrollX, this.element.scrollY)
this.viewportElement.scroll(this.element.scrollX, this.element.scrollY)
}
if (changedProperties.has("zoom")) {
const previousZoom = changedProperties.get("zoom")
@@ -149,4 +157,12 @@ export default class BlueprintTemplate extends ITemplate {
`ueb-node[data-name="${pinReference.objectName}"] ueb-pin[data-id="${pinReference.pinGuid}"]`
))
}
/**
* @param {Number} x
* @param {Number} y
*/
isPointVisible(x, y) {
return false
}
}

2
js/template/IDraggableControlTemplate.js
View File

@@ -31,7 +31,7 @@ export default class IDraggableControlTemplate extends IDraggableTemplate {
}
createDraggableObject() {
return new MouseMoveDraggable(this.element, this.element.blueprint, {
return new MouseMoveDraggable(this.element, this.blueprint, {
draggableElement: this.movementSpace,
ignoreTranslateCompensate: true,
moveEverywhere: true,

2
js/template/IDraggableTemplate.js
View File

@@ -17,7 +17,7 @@ export default class IDraggableTemplate extends ITemplate {
}
createDraggableObject() {
return new MouseMoveDraggable(this.element, this.element.blueprint, {
return new MouseMoveDraggable(this.element, this.blueprint, {
draggableElement: this.getDraggableElement(),
})
}

16
js/template/IResizeableTemplate.js
View File

@@ -60,7 +60,7 @@ export default class IResizeableTemplate extends NodeTemplate {
createInputObjects() {
return [
...super.createInputObjects(),
new MouseClickDrag(this.#THandler, this.element.blueprint, {
new MouseClickDrag(this.#THandler, this.blueprint, {
onDrag: (location, movement) => {
movement[1] = location[1] - this.element.topBoundary()
if (this.setSizeY(this.element.sizeY - movement[1])) {
@@ -69,21 +69,21 @@ export default class IResizeableTemplate extends NodeTemplate {
},
onEndDrag: () => this.endResize(),
}),
new MouseClickDrag(this.#RHandler, this.element.blueprint, {
new MouseClickDrag(this.#RHandler, this.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.rightBoundary()
this.setSizeX(this.element.sizeX + movement[0])
},
onEndDrag: () => this.endResize(),
}),
new MouseClickDrag(this.#BHandler, this.element.blueprint, {
new MouseClickDrag(this.#BHandler, this.blueprint, {
onDrag: (location, movement) => {
movement[1] = location[1] - this.element.bottomBoundary()
this.setSizeY(this.element.sizeY + movement[1])
},
onEndDrag: () => this.endResize(),
}),
new MouseClickDrag(this.#LHandler, this.element.blueprint, {
new MouseClickDrag(this.#LHandler, this.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.leftBoundary()
if (this.setSizeX(this.element.sizeX - movement[0])) {
@@ -92,7 +92,7 @@ export default class IResizeableTemplate extends NodeTemplate {
},
onEndDrag: () => this.endResize(),
}),
new MouseClickDrag(this.#TRHandler, this.element.blueprint, {
new MouseClickDrag(this.#TRHandler, this.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.rightBoundary()
movement[1] = location[1] - this.element.topBoundary()
@@ -103,7 +103,7 @@ export default class IResizeableTemplate extends NodeTemplate {
},
onEndDrag: () => this.endResize(),
}),
new MouseClickDrag(this.#BRHandler, this.element.blueprint, {
new MouseClickDrag(this.#BRHandler, this.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.rightBoundary()
movement[1] = location[1] - this.element.bottomBoundary()
@@ -112,7 +112,7 @@ export default class IResizeableTemplate extends NodeTemplate {
},
onEndDrag: () => this.endResize(),
}),
new MouseClickDrag(this.#BLHandler, this.element.blueprint, {
new MouseClickDrag(this.#BLHandler, this.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.leftBoundary()
movement[1] = location[1] - this.element.bottomBoundary()
@@ -123,7 +123,7 @@ export default class IResizeableTemplate extends NodeTemplate {
},
onEndDrag: () => this.endResize(),
}),
new MouseClickDrag(this.#TLHandler, this.element.blueprint, {
new MouseClickDrag(this.#TLHandler, this.blueprint, {
onDrag: (location, movement) => {
movement[0] = location[0] - this.element.leftBoundary()
movement[1] = location[1] - this.element.topBoundary()

4
js/template/ISelectableDraggableTemplate.js
View File

@@ -14,11 +14,11 @@ import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
export default class ISelectableDraggableTemplate extends IDraggablePositionedTemplate {
getDraggableElement() {
return /** @type {Element} */ (this.element)
return /** @type {Element} */(this.element)
}
createDraggableObject() {
return /** @type {MouseMoveDraggable} */ (new MouseMoveNodes(this.element, this.element.blueprint, {
return /** @type {MouseMoveDraggable} */(new MouseMoveNodes(this.element, this.blueprint, {
draggableElement: this.getDraggableElement(),
}))
}

7
js/template/ITemplate.js
View File

@@ -12,6 +12,10 @@ export default class ITemplate {
/** @type {T} */
element
get blueprint() {
return this.element.blueprint
}
/** @type {IInput[]} */
#inputObjects = []
get inputObjects() {
@@ -28,10 +32,11 @@ export default class ITemplate {
}
setup() {
this.#inputObjects.forEach(v => v.setup())
}
cleanup() {
this.#inputObjects.forEach(v => v.unlistenDOMElement())
this.#inputObjects.forEach(v => v.cleanup())
}
/** @param {PropertyValues} changedProperties */

33
js/template/LinkTemplate.js
View File

@@ -25,11 +25,11 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
* function: p[1] = a / p[0] + q => q = p[1] - a / p[0]
* @param {Number} m slope
* @param {Number[]} p reference point
* @returns Maximum value
*/
static decreasingValue(m, p) {
const a = -m * p[0] ** 2
const q = p[1] - a / p[0]
/** @param {Number} x */
return x => a / x + q
}
@@ -63,29 +63,28 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
static c2Clamped = LinkTemplate.clampedLine([0, 100], [200, 30])
#createKnot =
/** @param {Number[]} location */
location => {
const knotEntity = new KnotEntity({}, this.element.sourcePin.entity)
const knot = /** @type {NodeElementConstructor} */(ElementFactory.getConstructor("ueb-node"))
.newObject(knotEntity)
knot.setLocation(this.element.blueprint.snapToGrid(location))
this.element.blueprint.addGraphElement(knot) // Important: keep it before changing existing links
const link = /** @type {LinkElementConstructor} */(ElementFactory.getConstructor("ueb-link"))
.newObject(
/** @type {(location: Number[]) => void} */
#createKnot = location => {
const knotEntity = new KnotEntity({}, this.element.sourcePin.entity)
const knot = /** @type {NodeElementConstructor} */(ElementFactory.getConstructor("ueb-node"))
.newObject(knotEntity)
knot.setLocation(this.blueprint.snapToGrid(location))
this.blueprint.addGraphElement(knot) // Important: keep it before changing existing links
const link = /** @type {LinkElementConstructor} */(ElementFactory.getConstructor("ueb-link"))
.newObject(
/** @type {KnotNodeTemplate} */(knot.template).outputPin,
this.element.destinationPin
)
this.element.destinationPin = /** @type {KnotNodeTemplate} */(knot.template).inputPin
this.element.blueprint.addGraphElement(link)
}
this.element.destinationPin
)
this.element.destinationPin = /** @type {KnotNodeTemplate} */(knot.template).inputPin
this.blueprint.addGraphElement(link)
}
createInputObjects() {
return [
...super.createInputObjects(),
new MouseDbClick(
this.element.querySelector(".ueb-link-area"),
this.element.blueprint,
this.blueprint,
undefined,
(location) => this.#createKnot(location)
)

4
js/template/WindowTemplate.js
View File

@@ -16,10 +16,10 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
}
createDraggableObject() {
return new MouseMoveDraggable(this.element, this.element.blueprint, {
return new MouseMoveDraggable(this.element, this.blueprint, {
draggableElement: this.getDraggableElement(),
ignoreTranslateCompensate: true,
movementSpace: this.element.blueprint,
movementSpace: this.blueprint,
stepSize: 1,
})
}

2
js/template/node/CommentNodeTemplate.js
View File

@@ -58,7 +58,7 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
}
manageNodesBind() {
let nodes = this.element.blueprint.getNodes()
let nodes = this.blueprint.getNodes()
for (let node of nodes) {
if (
node.topBoundary() >= this.element.topBoundary()

2
js/template/node/KnotNodeTemplate.js
View File

@@ -45,7 +45,7 @@ export default class KnotNodeTemplate extends NodeTemplate {
return true
}
KnotNodeTemplate.#traversedPin.add(startingPin)
for (let pin of startingPin.getLinks().map(l => this.element.blueprint.getPin(l))) {
for (let pin of startingPin.getLinks().map(l => this.blueprint.getPin(l))) {
if (this.findDirectionaPin(pin)) {
return true
}

2
js/template/pin/BoolPinTemplate.js
View File

@@ -31,7 +31,7 @@ export default class BoolInputPinTemplate extends PinTemplate {
createInputObjects() {
return [
...super.createInputObjects(),
new MouseIgnore(this.#input, this.element.blueprint),
new MouseIgnore(this.#input, this.blueprint),
]
}

2
js/template/pin/IInputPinTemplate.js
View File

@@ -64,7 +64,7 @@ export default class IInputPinTemplate extends PinTemplate {
createInputObjects() {
return [
...super.createInputObjects(),
...this.#inputContentElements.map(elem => new MouseIgnore(elem, this.element.blueprint)),
...this.#inputContentElements.map(elem => new MouseIgnore(elem, this.blueprint)),
]
}

4
js/template/pin/InputTemplate.js
View File

@@ -6,13 +6,13 @@ import ITemplate from "../ITemplate"
export default class InputTemplate extends ITemplate {
#focusHandler = () => {
this.element.blueprint.acknowledgeEditText(true)
this.blueprint.acknowledgeEditText(true)
if (this.element.selectOnFocus) {
getSelection().selectAllChildren(this.element)
}
}
#focusoutHandler = () => {
this.element.blueprint.acknowledgeEditText(false)
this.blueprint.acknowledgeEditText(false)
document.getSelection()?.removeAllRanges() // Deselect eventually selected text inside the input
}
#inputSingleLineHandler =

6
js/template/pin/KnotPinTemplate.js
View File

@@ -13,7 +13,7 @@ export default class KnotPinTemplate extends PinTemplate {
getLinkLocation() {
const rect = (
this.element.isInput()
? /** @type {KnotNodeTemplate} */ (this.element.nodeElement.template).outputPin.template
? /** @type {KnotNodeTemplate} */(this.element.nodeElement.template).outputPin.template
: this
)
.iconElement.getBoundingClientRect()
@@ -22,8 +22,8 @@ export default class KnotPinTemplate extends PinTemplate {
this.element.isInput() ? rect.left + 1 : rect.right + 2,
(rect.top + rect.bottom) / 2,
],
this.element.blueprint.gridElement
this.blueprint.template.gridElement
)
return this.element.blueprint.compensateTranslation(location)
return this.blueprint.compensateTranslation(location)
}
}

4
js/template/pin/LinearColorPinTemplate.js
View File

@@ -19,7 +19,7 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
/** @param {MouseEvent} e */
#launchColorPickerWindow = e => {
e.preventDefault()
this.element.blueprint.setFocused(true)
this.blueprint.setFocused(true)
/** @type {WindowElement} */
this.#window = /** @type {WindowElementConstructor} */(ElementFactory.getConstructor("ueb-window"))
.newObject({
@@ -31,7 +31,7 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
setPinColor: color => this.element.setDefaultValue(color),
},
})
this.element.blueprint.append(this.#window)
this.blueprint.append(this.#window)
const windowApplyHandler = () => {
this.element.setDefaultValue(
/** @type {ColorPickerWindowTemplate} */(this.#window.template).color

6
js/template/pin/PinTemplate.js
View File

@@ -34,7 +34,7 @@ export default class PinTemplate extends ITemplate {
/** @returns {IInput[]} */
createInputObjects() {
return [
new MouseCreateLink(this.getClickableElement(), this.element.blueprint, {
new MouseCreateLink(this.getClickableElement(), this.blueprint, {
moveEverywhere: true,
})
]
@@ -91,9 +91,9 @@ export default class PinTemplate extends ITemplate {
const rect = this.iconElement.getBoundingClientRect()
const location = Utility.convertLocation(
[(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2],
this.element.blueprint.gridElement
this.blueprint.template.gridElement
)
return this.element.blueprint.compensateTranslation(location)
return this.blueprint.compensateTranslation(location)
}
getClickableElement() {