Make elements default constructible, testing wip

This commit is contained in:
barsdeveloper
2022-12-24 15:29:12 +01:00
parent 7ed36f21e5
commit c3ab6478b0
53 changed files with 992 additions and 712 deletions

View File

@@ -6,6 +6,7 @@ import LinearColorEntity from "../../entity/LinearColorEntity"
/**
* @typedef {import("../../element/NodeElement").default} NodeElement
* @typedef {import("../../element/PinElement").default} PinElement
* @typedef {import("lit").PropertyValues} PropertyValues
*/
export default class CommentNodeTemplate extends IResizeableTemplate {
@@ -14,15 +15,19 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
#selectableAreaHeight = 0
/** @param {NodeElement} element */
constructed(element) {
initialize(element) {
if (element.entity.CommentColor) {
this.#color.setFromRGBANumber(element.entity.CommentColor.toNumber())
this.#color.setFromHSVA(this.#color.H.value, this.#color.S.value, Math.pow(this.#color.V.value, 0.45) * 0.67)
this.#color.setFromHSVA(
this.#color.H.value,
this.#color.S.value,
Math.pow(this.#color.V.value, 0.45) * 0.67
)
}
element.classList.add("ueb-node-style-comment", "ueb-node-resizeable")
element.sizeX ??= 25 * Configuration.gridSize
element.sizeY ??= 6 * Configuration.gridSize
super.constructed(element) // Keep it at the end because it calls this.getColor() where this.#color must be initialized
super.initialize(element) // Keep it at the end because it calls this.getColor() where this.#color must be initialized
}
getColor() {
@@ -45,7 +50,7 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
`
}
/** @param {Map} changedProperties */
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
const bounding = this.getDraggableElement().getBoundingClientRect()

View File

@@ -7,6 +7,7 @@ import NodeTemplate from "./NodeTemplate"
/**
* @typedef {import("../../element/NodeElement").default} NodeElement
* @typedef {import("../../element/PinElement").default} PinElement
* @typedef {import("../../element/PinElement").PinElementConstructor} PinElementConstructor
*/
export default class KnotNodeTemplate extends NodeTemplate {
@@ -29,8 +30,8 @@ export default class KnotNodeTemplate extends NodeTemplate {
}
/** @param {NodeElement} element */
constructed(element) {
super.constructed(element)
initialize(element) {
super.initialize(element)
this.element.classList.add("ueb-node-style-minimal")
}
@@ -76,19 +77,12 @@ export default class KnotNodeTemplate extends NodeTemplate {
const entities = this.element.getPinEntities().filter(v => !v.isHidden())
const inputEntity = entities[entities[0].isInput() ? 0 : 1]
const outputEntity = entities[entities[0].isOutput() ? 0 : 1]
const pinElementConstructor = ElementFactory.getConstructor("ueb-pin")
return [
this.#inputPin = /** @type {PinElement} */(new pinElementConstructor(
inputEntity,
new KnotPinTemplate(),
this.element
)),
this.#outputPin = /** @type {PinElement} */(new pinElementConstructor(
outputEntity,
new KnotPinTemplate(),
this.element
)),
const pinElementConstructor = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
let result = [
this.#inputPin = pinElementConstructor.newObject(inputEntity, new KnotPinTemplate(), this.element),
this.#outputPin = pinElementConstructor.newObject(outputEntity, new KnotPinTemplate(), this.element),
]
return result
}
linksChanged() {

View File

@@ -8,6 +8,8 @@ import Utility from "../../Utility"
/**
* @typedef {import("../../element/NodeElement").default} NodeElement
* @typedef {import("../../element/PinElement").default} PinElement
* @typedef {import("../../element/PinElement").PinElementConstructor} PinElementConstructor
* @typedef {import("lit").PropertyValues} PropertyValues
*/
/** @extends {ISelectableDraggableTemplate<NodeElement>} */
@@ -38,8 +40,8 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
}
/** @param {NodeElement} element */
constructed(element) {
super.constructed(element)
initialize(element) {
super.initialize(element)
this.element.style.setProperty("--ueb-node-color", this.getColor().cssText)
}
@@ -125,7 +127,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
return this.element.getNodeDisplayName()
}
/** @param {Map} changedProperties */
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
this.setupPins()
@@ -152,9 +154,9 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
if (!this.#hasTargetInputNode && v.getDisplayName() === "Target") {
this.#hasTargetInputNode = true
}
return /** @type {PinElement} */(
new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
)
let pinElement = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
.newObject(v, undefined, this.element)
return pinElement
})
}

View File

@@ -5,6 +5,7 @@ import NodeTemplate from "./NodeTemplate"
/**
* @typedef {import("../../element/NodeElement").default} NodeElement
* @typedef {import("../../element/PinElement").default} PinElement
* @typedef {import("../../element/PinElement").PinElementConstructor} PinElementConstructor
*/
export default class VariableAccessNodeTemplate extends NodeTemplate {
@@ -14,8 +15,8 @@ export default class VariableAccessNodeTemplate extends NodeTemplate {
#displayName = ""
/** @param {NodeElement} element */
constructed(element) {
super.constructed(element)
initialize(element) {
super.initialize(element)
this.element.classList.add("ueb-node-style-glass")
this.#displayName = this.element.getNodeDisplayName()
}
@@ -52,9 +53,9 @@ export default class VariableAccessNodeTemplate extends NodeTemplate {
.map(v => {
this.#hasInput ||= v.isInput()
this.#hasOutput ||= v.isOutput()
return /** @type {PinElement} */(
new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
)
const result = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
.newObject(v, undefined, this.element)
return result
})
}