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

Add pin (#6)

Browse Source 
* Add pin and minor style fix WIP

* Fix default pin graphics

* Fix sorting

* Min, max nodes are variadic
This commit is contained in:
barsdeveloper
2023-05-15 22:29:52 +02:00
committed by GitHub
parent 64baa42049
commit c4813d8106
21 changed files with 495 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
js/template/node/NodeTemplate.js
View File

@@ -8,6 +8,7 @@ import Utility from "../../Utility.js"
* @typedef {import("../../element/NodeElement.js").default} NodeElement
* @typedef {import("../../element/PinElement.js").default} PinElement
* @typedef {import("../../element/PinElement.js").PinElementConstructor} PinElementConstructor
* @typedef {import("../../entity/PinEntity.js").default} PinEntity
* @typedef {import("lit").PropertyValues} PropertyValues
*/
@@ -16,9 +17,33 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
/** @typedef {typeof NodeTemplate} NodeTemplateConstructor */
static nodeStyleClasses = ["ueb-node-style-default"]
#hasSubtitle = false
static nodeStyleClasses = ["ueb-node-style-default"]
/** @type {() => PinEntity} */
pinInserter
/** @type {HTMLElement} */
inputContainer
/** @type {HTMLElement} */
outputContainer
/** @type {PinElement} */
pinElement
addPinHandler = () => {
const pin = this.pinInserter?.()
if (pin) {
if (this.defaultPin && this.defaultPin.isInput() === pin.isInput()) {
this.defaultPin.before(this.createPinElement(pin))
} else {
(pin.isInput() ? this.inputContainer : this.outputContainer).appendChild(this.createPinElement(pin))
}
this.element.acknowledgeReflow()
}
}
toggleAdvancedDisplayHandler = () => {
this.element.toggleShowAdvancedPinDisplay()
@@ -26,11 +51,23 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
this.element.updateComplete.then(() => this.element.acknowledgeReflow())
}
/** @param {PinEntity} pinEntity */
createPinElement(pinEntity) {
const pinElement = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
.newObject(pinEntity, undefined, this.element)
if (this.pinInserter && !this.defaultPin && pinElement.getPinName() === "Default") {
this.defaultPin = pinElement
this.defaultPin.classList.add("ueb-node-variadic-default")
}
return pinElement
}
/** @param {NodeElement} element */
initialize(element) {
super.initialize(element)
this.element.classList.add(.../** @type {NodeTemplateConstructor} */(this.constructor).nodeStyleClasses)
this.element.style.setProperty("--ueb-node-color", this.getColor().cssText)
this.pinInserter = this.element.entity.additionalPinInserter()
}
getColor() {
@@ -45,6 +82,11 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
<div class="ueb-node-content">
<div class="ueb-node-inputs"></div>
<div class="ueb-node-outputs"></div>
${this.pinInserter ? html`
<div class="ueb-node-variadic" @click="${this.addPinHandler}">
Add pin ${SVGIcon.plusCircle}
</div>
`: nothing}
</div>
${this.element.entity.isDevelopmentOnly() ? html`
<div class="ueb-node-developmentonly">
@@ -94,25 +136,31 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
this.inputContainer = this.element.querySelector(".ueb-node-inputs")
this.outputContainer = this.element.querySelector(".ueb-node-outputs")
this.setupPins()
this.element.updateComplete.then(() => this.element.acknowledgeReflow())
}
setupPins() {
const inputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-inputs"))
const outputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-outputs"))
this.element.nodeNameElement = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-name-text"))
let hasInput = false
let hasOutput = false
this.element.getPinElements().forEach(p => {
for (const p of this.element.getPinElements()) {
if (p === this.defaultPin) {
continue
}
if (p.isInput()) {
inputContainer.appendChild(p)
this.inputContainer.appendChild(p)
hasInput = true
} else if (p.isOutput()) {
outputContainer.appendChild(p)
this.outputContainer.appendChild(p)
hasOutput = true
}
})
}
if (this.defaultPin) {
(this.defaultPin.isInput() ? this.inputContainer : this.outputContainer).appendChild(this.defaultPin)
}
if (hasInput) {
this.element.classList.add("ueb-node-has-inputs")
}
@@ -127,9 +175,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
.map(pinEntity => {
this.#hasSubtitle = this.#hasSubtitle
|| pinEntity.PinName === "self" && pinEntity.pinDisplayName() === "Target"
let pinElement = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
.newObject(pinEntity, undefined, this.element)
return pinElement
return this.createPinElement(pinEntity)
})
}

6
js/template/node/VariableMangementNodeTemplate.js
View File

@@ -1,6 +1,7 @@
import { html, nothing } from "lit"
import ElementFactory from "../../element/ElementFactory.js"
import NodeTemplate from "./NodeTemplate.js"
import SVGIcon from "../../SVGIcon.js"
/**
* @typedef {import("../../element/NodeElement.js").default} NodeElement
@@ -41,6 +42,11 @@ export default class VariableManagementNodeTemplate extends NodeTemplate {
${this.#hasOutput ? html`
<div class="ueb-node-outputs"></div>
` : nothing}
${this.pinInserter ? html`
<div class="ueb-node-variadic" @click="${this.addPinHandler}">
Add pin ${SVGIcon.plusCircle}
</div>
`: nothing}
</div>
</div>
</div>