Variable node type

2026-05-08 12:07:29 +08:00 · 2022-11-18 18:22:24 +01:00
parent ce37fd9c1d
commit 0981c15372
15 changed files with 161 additions and 29 deletions
--- a/dist/css/ueb-style.css
+++ b/dist/css/ueb-style.css
@@ -368,7 +368,7 @@ ueb-node[data-selected=true] > .ueb-node-border {
  padding: 0.2em 0.7em;
  box-shadow: inset 5px 1px 5px -3px rgba(255, 255, 255, 0.2509803922), inset 0 1px 2px 0 rgba(255, 255, 255, 0.2509803922);
  border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
-  background: linear-gradient(170deg, var(--ueb-node-color) 0%, var(--ueb-node-color) 50%, transparent 100%);
+  background: linear-gradient(170deg, rgb(var(--ueb-node-color)) 0%, rgb(var(--ueb-node-color)) 50%, transparent 100%);
  color: #c0c0c0;
  font-weight: 900;
  white-space: nowrap;
@@ -380,7 +380,7 @@ ueb-node[data-selected=true] > .ueb-node-border {
 }

 .ueb-zoom--2 ueb-node[data-pure-function=true] .ueb-node-top {
-  background: var(--ueb-node-color);
+  background: rgb(var(--ueb-node-color));
 }

 .ueb-node-name {
@@ -484,6 +484,26 @@ ueb-node[data-advanced-display=Shown] .ueb-node-expansion > svg {
  transform: scaleY(-1);
 }

+ueb-node.ueb-node-type-variable .ueb-node-wrapper,
+ueb-node.ueb-node-type-variable .ueb-node-border,
+ueb-node.ueb-node-type-variable {
+  border-radius: 15px;
+  box-shadow: none;
+}
+
+ueb-node.ueb-node-type-variable .ueb-node-wrapper {
+  border: 1px solid black;
+  box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 -2px 2px 1px rgba(0, 0, 0, 0.5) inset;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.188) 0%, rgba(255, 255, 255, 0.063) 49%, rgba(0, 0, 0, 0.251) 49%), linear-gradient(to right, transparent 10%, rgba(var(--ueb-node-color), 0.3) 50%, transparent 90%);
+  background-size: 100%, 100% 82%;
+  background-repeat: repeat, no-repeat;
+}
+
+ueb-node[data-selected=true] .ueb-node-border {
+  box-shadow: inset 0 0 0px 6px #ce8700;
+  background: none;
+}
+
 ueb-blueprint {
  --ueb-pin-color-dim: #afafaf;
 }
@@ -653,6 +673,7 @@ ueb-pin[data-type="/Script/CoreUObject.LinearColor"] .ueb-pin-input {
 .ueb-button {
  min-width: 60px;
  border: 1px solid #0f0f0f;
+  border-radius: 4px;
  padding: 2px 10px;
  background: #383838;
  text-align: center;
@@ -740,7 +761,7 @@ ueb-window .ueb-pin-input-content {
 ueb-window {
  display: block;
  position: absolute;
-  border: 2px solid black;
+  border: 2px solid #101010;
  top: 0;
  left: 0;
  transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
--- a/dist/css/ueb-style.css.map
+++ b/dist/css/ueb-style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-knot.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-knot.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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AGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;;ACzKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;AAAA;EAEI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AC5FR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA,YACI;;;AAWR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAIR;AAAA;EAEI;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;EAEI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA","file":"ueb-style.css"}
--- a/dist/css/ueb-style.min.css
+++ b/dist/css/ueb-style.min.css
--- a/dist/css/ueb-style.min.css.map
+++ b/dist/css/ueb-style.min.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-knot.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-knot.scss","../../scss/ueb-link.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-ui-controls.scss","../../scss/ueb-window.scss"],"names":[],"mappings":"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","file":"ueb-style.min.css"}
--- a/dist/ueblueprint.js
+++ b/dist/ueblueprint.js
@@ -24,7 +24,10 @@ var t$1;const i$2=globalThis.trustedTypes,s$1=i$2?i$2.createPolicy("lit-html",{c
 * SPDX-License-Identifier: BSD-3-Clause
 */var l,o;class s extends a$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=T(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return b}}s.finalized=!0,s._$litElement$=!0,null===(l=globalThis.litElementHydrateSupport)||void 0===l||l.call(globalThis,{LitElement:s});const n=globalThis.litElementPolyfillSupport;null==n||n({LitElement:s});(null!==(o=globalThis.litElementVersions)&&void 0!==o?o:globalThis.litElementVersions=[]).push("3.2.2");

-/** @typedef {import("./element/PinElement").default} PinElement */
+/**
+ * @typedef {import("./element/PinElement").default} PinElement
+ * @typedef {import("lit").CSSResult} CSSResult
+ */

 class Configuration {
    static #pinColor = {
@@ -65,7 +68,11 @@ class Configuration {
        end: "blueprint-unfocus",
    }
    static fontSize = r$2`12.5px`
-    /** @param {PinElement} pin */
+
+    /**
+     * @param {PinElement} pin
+     * @return {CSSResult}
+     */
    static getPinColor(pin) {
        if (!pin) {
            return Configuration.#pinColor["default"]
@@ -131,6 +138,7 @@ class Configuration {
        macro: "/Script/BlueprintGraph.K2Node_MacroInstance",
        pawn: "/Script/Engine.Pawn",
        reverseForEachLoop: "/Engine/EditorBlueprintResources/StandardMacros.StandardMacros:ReverseForEachLoop",
+        variableGet: "/Script/BlueprintGraph.K2Node_VariableGet",
        whileLoop: "/Engine/EditorBlueprintResources/StandardMacros.StandardMacros:WhileLoop",
    }
    static selectAllKeyboardKey = "(bCtrl=True,Key=A)"
@@ -3878,7 +3886,7 @@ class SVGIcon {

    static genericPin = $`
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-            <circle class="ueb-pin-tofill" cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="5" />
+            <circle class="ueb-pin-tofill" cx="16" cy="16" r="14" fill="black" stroke="currentColor" stroke-width="5" />
            <path d="M 34 6 L 34 26 L 42 16 Z" fill="currentColor" />
        </svg>
    `
@@ -4677,18 +4685,18 @@ class NodeTemplate extends ISelectableDraggableTemplate {
    }

    getColor() {
-        const functionColor = r$2`#557b9b`;
+        const functionColor = r$2`84, 122, 156`;
        switch (this.element.entity.getClass()) {
            case Configuration.nodeType.callFunction:
                if (this.element.entity.bIsPureFunc) {
-                    return r$2`#5f815a`
+                    return r$2`95, 129, 90`
                }
                return functionColor
            case Configuration.nodeType.macro:
            case Configuration.nodeType.executionSequence:
-                return r$2`#979797`
+                return r$2`150,150,150`
            case Configuration.nodeType.dynamicCast:
-                return r$2`#2d686a`
+                return r$2`46, 104, 106`

        }
        return functionColor
@@ -4877,13 +4885,44 @@ class KnotNodeTemplate extends NodeTemplate {
    }
 }

+/**
+ * @typedef {import("../element/NodeElement").default} NodeElement
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+
+class VariableNodeTemplate extends NodeTemplate {
+
+    /** @param {NodeElement} element */
+    constructed(element) {
+        super.constructed(element);
+        this.element.classList.add("ueb-node-type-variable");
+    }
+
+    render() {
+        return $`
+            <div class="ueb-node-border">
+                <div class="ueb-node-wrapper">
+                    <div class="ueb-node-outputs"></div>
+                </div>
+            </div>
+        `
+    }
+
+    setupPins() {
+        super.setupPins();
+        let outputPin = this.element.getPinElements().find(p => p.isOutput());
+        this.element.style.setProperty("--ueb-node-color", outputPin.getColor().cssText);
+    }
+}
+
 /** @typedef {import("./IElement").default} IElement */

 /** @extends {ISelectableDraggableElement<ObjectEntity, NodeTemplate>} */
 class NodeElement extends ISelectableDraggableElement {

    static #typeTemplateMap = {
-        "/Script/BlueprintGraph.K2Node_Knot": KnotNodeTemplate,
+        [Configuration.nodeType.knot]: KnotNodeTemplate,
+        [Configuration.nodeType.variableGet]: VariableNodeTemplate,
    }

    static properties = {
@@ -6865,6 +6904,7 @@ class VectorPinTemplate extends INumericPinTemplate {
 /**
 * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
 * @typedef {import("./NodeElement").default} NodeElement
+ * @typedef {import("lit").CSSResult} CSSResult
 */
 /**
 * @template T
@@ -7008,6 +7048,7 @@ class PinElement extends IElement {
        return Utility.formatStringName(this.entity.PinName)
    }

+    /** @return {CSSResult} */
    getColor() {
        return Configuration.getPinColor(this)
    }
--- a/dist/ueblueprint.min.js
+++ b/dist/ueblueprint.min.js
--- a/js/Configuration.js
+++ b/js/Configuration.js
@@ -1,6 +1,9 @@
 import { css } from "lit"

-/** @typedef {import("./element/PinElement").default} PinElement */
+/**
+ * @typedef {import("./element/PinElement").default} PinElement
+ * @typedef {import("lit").CSSResult} CSSResult
+ */

 export default class Configuration {
    static #pinColor = {
@@ -41,7 +44,11 @@ export default class Configuration {
        end: "blueprint-unfocus",
    }
    static fontSize = css`12.5px`
-    /** @param {PinElement} pin */
+
+    /**
+     * @param {PinElement} pin
+     * @return {CSSResult}
+     */
    static getPinColor(pin) {
        if (!pin) {
            return Configuration.#pinColor["default"]
@@ -107,6 +114,7 @@ export default class Configuration {
        macro: "/Script/BlueprintGraph.K2Node_MacroInstance",
        pawn: "/Script/Engine.Pawn",
        reverseForEachLoop: "/Engine/EditorBlueprintResources/StandardMacros.StandardMacros:ReverseForEachLoop",
+        variableGet: "/Script/BlueprintGraph.K2Node_VariableGet",
        whileLoop: "/Engine/EditorBlueprintResources/StandardMacros.StandardMacros:WhileLoop",
    }
    static selectAllKeyboardKey = "(bCtrl=True,Key=A)"
--- a/js/SVGIcon.js
+++ b/js/SVGIcon.js
@@ -77,7 +77,7 @@ export default class SVGIcon {

    static genericPin = html`
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-            <circle class="ueb-pin-tofill" cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="5" />
+            <circle class="ueb-pin-tofill" cx="16" cy="16" r="14" fill="black" stroke="currentColor" stroke-width="5" />
            <path d="M 34 6 L 34 26 L 42 16 Z" fill="currentColor" />
        </svg>
    `
--- a/js/element/NodeElement.js
+++ b/js/element/NodeElement.js
@@ -8,6 +8,7 @@ import PinEntity from "../entity/PinEntity"
 import PinReferenceEntity from "../entity/PinReferenceEntity"
 import SerializerFactory from "../serialization/SerializerFactory"
 import Utility from "../Utility"
+import VariableNodeTemplate from "../template/VariableNodeTemplate"

 /** @typedef {import("./IElement").default} IElement */

@@ -15,7 +16,8 @@ import Utility from "../Utility"
 export default class NodeElement extends ISelectableDraggableElement {

    static #typeTemplateMap = {
-        "/Script/BlueprintGraph.K2Node_Knot": KnotNodeTemplate,
+        [Configuration.nodeType.knot]: KnotNodeTemplate,
+        [Configuration.nodeType.variableGet]: VariableNodeTemplate,
    }

    static properties = {
--- a/js/element/PinElement.js
+++ b/js/element/PinElement.js
@@ -20,6 +20,7 @@ import VectorPinTemplate from "../template/VectorPinTemplate"
 /**
 * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
 * @typedef {import("./NodeElement").default} NodeElement
+ * @typedef {import("lit").CSSResult} CSSResult
 */
 /**
 * @template T
@@ -163,6 +164,7 @@ export default class PinElement extends IElement {
        return Utility.formatStringName(this.entity.PinName)
    }

+    /** @return {CSSResult} */
    getColor() {
        return Configuration.getPinColor(this)
    }
--- a/js/template/NodeTemplate.js
+++ b/js/template/NodeTemplate.js
@@ -33,18 +33,18 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
    }

    getColor() {
-        const functionColor = css`#557b9b`
+        const functionColor = css`84, 122, 156`
        switch (this.element.entity.getClass()) {
            case Configuration.nodeType.callFunction:
                if (this.element.entity.bIsPureFunc) {
-                    return css`#5f815a`
+                    return css`95, 129, 90`
                }
                return functionColor
            case Configuration.nodeType.macro:
            case Configuration.nodeType.executionSequence:
-                return css`#979797`
+                return css`150,150,150`
            case Configuration.nodeType.dynamicCast:
-                return css`#2d686a`
+                return css`46, 104, 106`

        }
        return functionColor
--- a/js/template/VariableNodeTemplate.js
+++ b/js/template/VariableNodeTemplate.js
@@ -0,0 +1,35 @@
+import { html } from "lit"
+import Configuration from "../Configuration"
+import ElementFactory from "../element/ElementFactory"
+import KnotPinTemplate from "./KnotPinTemplate"
+import NodeTemplate from "./NodeTemplate"
+
+/**
+ * @typedef {import("../element/NodeElement").default} NodeElement
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+
+export default class VariableNodeTemplate extends NodeTemplate {
+
+    /** @param {NodeElement} element */
+    constructed(element) {
+        super.constructed(element)
+        this.element.classList.add("ueb-node-type-variable")
+    }
+
+    render() {
+        return html`
+            <div class="ueb-node-border">
+                <div class="ueb-node-wrapper">
+                    <div class="ueb-node-outputs"></div>
+                </div>
+            </div>
+        `
+    }
+
+    setupPins() {
+        super.setupPins()
+        let outputPin = this.element.getPinElements().find(p => p.isOutput())
+        this.element.style.setProperty("--ueb-node-color", outputPin.getColor().cssText)
+    }
+}
--- a/scss/ueb-node.scss
+++ b/scss/ueb-node.scss
@@ -67,7 +67,7 @@ ueb-node[data-selected="true"]>.ueb-node-border {
        inset 5px 1px 5px -3px #ffffff40,
        inset 0 1px 2px 0 #ffffff40;
    border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
-    background: linear-gradient(170deg, var(--ueb-node-color) 0%, var(--ueb-node-color) 50%, transparent 100%);
+    background: linear-gradient(170deg, rgb(var(--ueb-node-color)) 0%, rgb(var(--ueb-node-color)) 50%, transparent 100%);
    color: #c0c0c0;
    font-weight: 900;
    white-space: nowrap;
@@ -79,7 +79,7 @@ ueb-node[data-selected="true"]>.ueb-node-border {
 }

 .ueb-zoom--2 ueb-node[data-pure-function="true"] .ueb-node-top {
-    background: var(--ueb-node-color);
+    background: rgb(var(--ueb-node-color));
 }


@@ -193,3 +193,25 @@ ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-node-expansio
 ueb-node[data-advanced-display="Shown"] .ueb-node-expansion>svg {
    transform: scaleY(-1)
 }
+
+ueb-node.ueb-node-type-variable .ueb-node-wrapper,
+ueb-node.ueb-node-type-variable .ueb-node-border,
+ueb-node.ueb-node-type-variable {
+    border-radius: 15px;
+    box-shadow: none;
+}
+
+ueb-node.ueb-node-type-variable .ueb-node-wrapper {
+    border: 1px solid black;
+    box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 -2px 2px 1px rgba(0, 0, 0, 0.5) inset;
+    background:
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.188) 0%, rgba(255, 255, 255, 0.063) 49%, rgba(0, 0, 0, 0.251) 49%),
+        linear-gradient(to right, transparent 10%, rgba(var(--ueb-node-color), 0.3) 50%, transparent 90%);
+    background-size: 100%, 100% 82%;
+    background-repeat: repeat, no-repeat;
+}
+
+ueb-node[data-selected="true"] .ueb-node-border {
+    box-shadow: inset 0 0 0px 6px #ce8700;
+    background: none;
+}
--- a/scss/ueb-ui-controls.scss
+++ b/scss/ueb-ui-controls.scss
@@ -1,6 +1,7 @@
 .ueb-button {
    min-width: 60px;
    border: 1px solid #0f0f0f;
+    border-radius: 4px;
    padding: 2px 10px;
    background: #383838;
    text-align: center;
--- a/scss/ueb-window.scss
+++ b/scss/ueb-window.scss
@@ -3,7 +3,7 @@
 ueb-window {
    display: block;
    position: absolute;
-    border: 2px solid black;
+    border: 2px solid #101010;
    top: 0;
    left: 0;
    transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));