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

Small refactoring

Browse Source
This commit is contained in:
barsdeveloper
2021-12-11 23:58:40 +01:00
parent 6b02ab7e08
commit a5c4f04f2b
11 changed files with 235 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
js/template/BlueprintTemplate.js
View File

@@ -1,4 +1,3 @@
import Blueprint from "../Blueprint"
import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"

45
js/template/NodeTemplate.js
View File

@@ -1,6 +1,7 @@
import html from "./html"
import PinEntity from "../entity/PinEntity"
import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
import GraphPin from "../graph/GraphPin"
/**
* @typedef {import("../graph/GraphNode").default} GraphNode
@@ -14,12 +15,6 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
*/
header(node) {
return html`
<div class="ueb-node-header">
<span class="ueb-node-name">
<span class="ueb-node-symbol"></span>
<span class="ueb-node-text">${node.entity.getNodeDisplayName()}</span>
</span>
</div>
`
}
@@ -29,29 +24,10 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
* @returns The result html
*/
body(node) {
/** @type {PinEntity[]} */
let inputs = node.entity.CustomProperties.filter(v => v instanceof PinEntity)
let outputs = inputs.filter(v => v.isOutput())
inputs = inputs.filter(v => v.isInput())
return html`
<div class="ueb-node-body">
<div class="ueb-node-inputs">
${inputs.map((input, index) => html`
<div class="ueb-node-input ueb-node-value-${input.type}">
<span class="ueb-node-value-icon ${inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
${input.getPinDisplayName()}
</div>
`).join("") ?? ""}
</div>
<div class="ueb-node-outputs">
${outputs.map((output, index) => html`
<div class="ueb-node-output ueb-node-value-${output.type}">
${output.getPinDisplayName()}
<span class="ueb-node-value-icon ${outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
</div>
`).join('') ?? ''}
</div>
</div>
`
}
@@ -64,8 +40,16 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
return html`
<div class="ueb-node-border">
<div class="ueb-node-content">
${this.header(node)}
${this.body(node)}
<div class="ueb-node-header">
<span class="ueb-node-name">
<span class="ueb-node-symbol"></span>
<span class="ueb-node-text">${node.entity.getNodeDisplayName()}</span>
</span>
</div>
<div class="ueb-node-body">
<div class="ueb-node-inputs"></div>
<div class="ueb-node-outputs"></div>
</div>
</div>
</div>
`
@@ -83,5 +67,12 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
}
node.style.setProperty("--ueb-position-x", node.location[0])
node.style.setProperty("--ueb-position-y", node.location[1])
/** @type {HTMLElement} */
let inputContainer = node.querySelector(".ueb-node-inputs")
/** @type {HTMLElement} */
let outputContainer = node.querySelector(".ueb-node-outputs")
let pins = node.getPinEntities()
pins.filter(v => v.isInput()).forEach(v => inputContainer.appendChild(new GraphPin(v)))
pins.filter(v => v.isOutput()).forEach(v => outputContainer.appendChild(new GraphPin(v)))
}
}

57
js/template/PinTemplate.js
View File

@@ -2,50 +2,35 @@ import html from "./html"
import Template from "./Template"
/**
* @typedef {import("../entity/PinEntity").default} PinEntity
* @typedef {import("../graph/GraphPin").default} GraphPin
*/
export default class PinTemplate extends Template {
/**
* Computes the template for a pin in case it is an input.
* @param {PinEntity} pin Pin entity
* @returns The result html
*/
renderInputPin(pin) {
return html`
<div class="ueb-node-input ueb-node-value-${pin.getType()}">
<span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
${pin.getPinDisplayName()}
</div>
`
}
/**
* Computes the template for a pin in case it is an output.
* @param {PinEntity} pin Pin entity
* @returns The result html
*/
renderOutputPin(pin) {
return html`
<div class="ueb-node-output ueb-node-value-${pin.getType()}">
${output.getPinDisplayName()}
<span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
</div>
`
}
/**
* Computes the html content of the pin.
* @param {PinEntity} pin Pin entity
* @param {GraphPin} pin Pin entity
* @returns The result html
*/
render(pin) {
if (pin.isInput()) {
return this.renderInputPin(pin)
return html`
<span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
${pin.getPinDisplayName()}
`
} else {
return html`
${pin.getPinDisplayName()}
<span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
`
}
if (pin.isOutput()) {
return this.renderOutputPin(pin)
}
return ""
}
}
/**
* Applies the style to the element.
* @param {GraphPin} pin Element of the graph
*/
apply(pin) {
super.apply(pin)
pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + pin.getType())
}
}