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

Move style related actions to templates

Browse Source
This commit is contained in:
barsdeveloper
2021-12-10 21:05:44 +01:00
parent 7bc0f4e2f2
commit 6b02ab7e08
19 changed files with 2693 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
js/template/NodeTemplate.js
View File

@@ -1,23 +1,23 @@
import html from "./html"
import PinEntity from "../entity/PinEntity"
import Template from "./Template"
import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
/**
* @typedef {import("../entity/ObjectEntity").default} ObjectEntity
* @typedef {import("../graph/GraphNode").default} GraphNode
*/
export default class NodeTemplate extends Template {
export default class NodeTemplate extends SelectableDraggableTemplate {
/**
* Computes the html content of the target element.
* @param {ObjectEntity} entity Entity representing the element
* @returns The computed html
* @param {GraphNode} node Graph node element
* @returns The result html
*/
header(entity) {
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">${entity.getNodeDisplayName()}</span>
<span class="ueb-node-text">${node.entity.getNodeDisplayName()}</span>
</span>
</div>
`
@@ -25,14 +25,14 @@ export default class NodeTemplate extends Template {
/**
* Computes the html content of the target element.
* @param {ObjectEntity} entity Entity representing the element
* @returns The computed html
* @param {GraphNode} node Graph node element
* @returns The result html
*/
body(entity) {
body(node) {
/** @type {PinEntity[]} */
let inputs = entity.CustomProperties.filter(v => v instanceof PinEntity)
let inputs = node.entity.CustomProperties.filter(v => v instanceof PinEntity)
let outputs = inputs.filter(v => v.isOutput())
inputs = inputs.filter(v => !v.isOutput())
inputs = inputs.filter(v => v.isInput())
return html`
<div class="ueb-node-body">
<div class="ueb-node-inputs">
@@ -57,17 +57,31 @@ export default class NodeTemplate extends Template {
/**
* Computes the html content of the target element.
* @param {ObjectEntity} entity Entity representing the element
* @returns The computed html
* @param {GraphNode} node Graph node element
* @returns The result html
*/
render(entity) {
render(node) {
return html`
<div class="ueb-node-border">
<div class="ueb-node-content">
${this.header(entity)}
${this.body(entity)}
${this.header(node)}
${this.body(node)}
</div>
</div>
`
}
/**
* Returns the html elements rendered from this template.
* @param {GraphNode} node Element of the graph
*/
apply(node) {
super.apply(node)
node.classList.add("ueb-node")
if (node.selected) {
node.classList.add("ueb-selected")
}
node.style.setProperty("--ueb-position-x", node.location[0])
node.style.setProperty("--ueb-position-y", node.location[1])
}
}