New nodes types added

js/template/IDraggableControlTemplate.js

@@ -3,6 +3,7 @@ import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
 
 /**
  * @typedef {import("../element/IDraggableElement").default} IDraggableElement
+ * @typedef {import("lit").PropertyValues} PropertyValues
  */
 
 /**
@@ -23,9 +24,14 @@ export default class IDraggableControlTemplate extends IDraggableTemplate {
     movementSpace
     movementSpaceSize = [0, 0]
 
+    /** @param {PropertyValues} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        this.movementSpace = this.element.parentElement
+    }
+
     setup() {
         super.setup()
-        this.movementSpace = this.element.parentElement
         const bounding = this.movementSpace.getBoundingClientRect()
         this.movementSpaceSize = [bounding.width, bounding.height]
     }

js/template/WindowTemplate.js

@@ -18,7 +18,8 @@ export default class WindowTemplate extends IDraggablePositionedTemplate {
     createDraggableObject() {
         return new MouseMoveDraggable(this.element, this.blueprint, {
             draggableElement: this.getDraggableElement(),
-            ignoreTranslateCompensate: true,
+            ignoreScale: true,
+            ignoreTranslateCompensate: false,
             movementSpace: this.blueprint,
             stepSize: 1,
         })

js/template/node/NodeTemplate.js

@@ -150,12 +150,12 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     createPinElements() {
         return this.element.getPinEntities()
             .filter(v => !v.isHidden())
-            .map(v => {
-                if (!this.#hasTargetInputNode && v.getDisplayName() === "Target") {
+            .map(pinEntity => {
+                if (!this.#hasTargetInputNode && pinEntity.getDisplayName() == "Target") {
                     this.#hasTargetInputNode = true
                 }
                 let pinElement = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
-                    .newObject(v, undefined, this.element)
+                    .newObject(pinEntity, undefined, this.element)
                 return pinElement
             })
     }

js/template/node/VariableAccessNodeTemplate.js

@@ -1,62 +1,18 @@
-import { html, nothing } from "lit"
-import ElementFactory from "../../element/ElementFactory"
-import NodeTemplate from "./NodeTemplate"
+import Configuration from "../../Configuration"
+import VariableManagementNodeTemplate from "./VariableMangementNodeTemplate"
 
-/**
- * @typedef {import("../../element/NodeElement").default} NodeElement
- * @typedef {import("../../element/PinElement").default} PinElement
- * @typedef {import("../../element/PinElement").PinElementConstructor} PinElementConstructor
- */
+/** @typedef {import("../../element/NodeElement").default} NodeElement */
 
-export default class VariableAccessNodeTemplate extends NodeTemplate {
-
-    #hasInput = false
-    #hasOutput = false
-    #displayName = ""
+export default class VariableAccessNodeTemplate extends VariableManagementNodeTemplate {
 
     /** @param {NodeElement} element */
     initialize(element) {
         super.initialize(element)
-        this.element.classList.add("ueb-node-style-glass")
-        this.#displayName = this.element.getNodeDisplayName()
-    }
-
-    render() {
-        return html`
-            <div class="ueb-node-border">
-                <div class="ueb-node-wrapper">
-                    ${this.#displayName ? html`
-                        <div class="ueb-node-top">
-                            <div class="ueb-node-name">
-                                <span class="ueb-node-name-text ueb-ellipsis-nowrap-text">
-                                    ${this.#displayName}
-                                </span>
-                            </div>
-                        </div>
-                    ` : nothing}
-                    <div class="ueb-node-content">
-                        ${this.#hasInput ? html`
-                            <div class="ueb-node-inputs"></div>
-                        ` : nothing}
-                        ${this.#hasOutput ? html`
-                            <div class="ueb-node-outputs"></div>
-                        ` : nothing}
-                    </div>
-                </div>
-            </div>
-        `
-    }
-
-    createPinElements() {
-        return this.element.getPinEntities()
-            .filter(v => !v.isHidden())
-            .map(v => {
-                this.#hasInput ||= v.isInput()
-                this.#hasOutput ||= v.isOutput()
-                const result = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
-                    .newObject(v, undefined, this.element)
-                return result
-            })
+        if (element.getType() === Configuration.nodeType.variableGet) {
+            this.element.classList.add("ueb-node-style-getter")
+        } else if (element.getType() === Configuration.nodeType.variableSet) {
+            this.element.classList.add("ueb-node-style-setter")
+        }
     }
 
     setupPins() {

js/template/node/VariableConversionNodeTemplate.js

@@ -0,0 +1,13 @@
+import VariableManagementNodeTemplate from "./VariableMangementNodeTemplate"
+
+/** @typedef {import("../../element/NodeElement").default} NodeElement */
+
+export default class VariableConversionNodeTemplate extends VariableManagementNodeTemplate {
+
+
+    /** @param {NodeElement} element */
+    initialize(element) {
+        super.initialize(element)
+        this.element.classList.add("ueb-node-style-conversion")
+    }
+}

js/template/node/VariableMangementNodeTemplate.js

@@ -0,0 +1,60 @@
+import { html, nothing } from "lit"
+import ElementFactory from "../../element/ElementFactory"
+import NodeTemplate from "./NodeTemplate"
+
+/**
+ * @typedef {import("../../element/NodeElement").default} NodeElement
+ * @typedef {import("../../element/PinElement").PinElementConstructor} PinElementConstructor
+ */
+
+export default class VariableManagementNodeTemplate extends NodeTemplate {
+
+    #hasInput = false
+    #hasOutput = false
+    #displayName = ""
+
+    /** @param {NodeElement} element */
+    initialize(element) {
+        super.initialize(element)
+        this.element.classList.add("ueb-node-style-glass")
+        this.#displayName = this.element.getNodeDisplayName()
+    }
+
+    render() {
+        return html`
+            <div class="ueb-node-border">
+                <div class="ueb-node-wrapper">
+                    ${this.#displayName ? html`
+                        <div class="ueb-node-top">
+                            <div class="ueb-node-name">
+                                <span class="ueb-node-name-text ueb-ellipsis-nowrap-text">
+                                    ${this.#displayName}
+                                </span>
+                            </div>
+                        </div>
+                    ` : nothing}
+                    <div class="ueb-node-content">
+                        ${this.#hasInput ? html`
+                            <div class="ueb-node-inputs"></div>
+                        ` : nothing}
+                        ${this.#hasOutput ? html`
+                            <div class="ueb-node-outputs"></div>
+                        ` : nothing}
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+    createPinElements() {
+        return this.element.getPinEntities()
+            .filter(v => !v.isHidden())
+            .map(v => {
+                this.#hasInput ||= v.isInput()
+                this.#hasOutput ||= v.isOutput()
+                const result = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
+                    .newObject(v, undefined, this.element)
+                return result
+            })
+    }
+}

js/template/node/VariableOperationNodeTemplate.js

@@ -0,0 +1,13 @@
+import VariableManagementNodeTemplate from "./VariableMangementNodeTemplate"
+
+/** @typedef {import("../../element/NodeElement").default} NodeElement */
+
+export default class VariableOperationNodeTemplate extends VariableManagementNodeTemplate {
+
+
+    /** @param {NodeElement} element */
+    initialize(element) {
+        super.initialize(element)
+        this.element.classList.add("ueb-node-style-operation")
+    }
+}

js/template/pin/PinTemplate.js

@@ -1,9 +1,11 @@
-import { html } from "lit"
+import { html, nothing } from "lit"
 import Configuration from "../../Configuration"
 import ITemplate from "../ITemplate"
 import MouseCreateLink from "../../input/mouse/MouseCreateLink"
 import SVGIcon from "../../SVGIcon"
 import Utility from "../../Utility"
+import VariableConversionNodeTemplate from "../node/VariableConversionNodeTemplate"
+import VariableOperationNodeTemplate from "../node/VariableOperationNodeTemplate"
 
 /**
  * @typedef {import("../../input/IInput").default} IInput
@@ -26,9 +28,19 @@ export default class PinTemplate extends ITemplate {
         return this.#iconElement
     }
 
+    isNameRendered = true
+
     setup() {
         super.setup()
         this.element.nodeElement = this.element.closest("ueb-node")
+        const nodeTemplate = this.element.nodeElement.template
+        if (
+            nodeTemplate instanceof VariableConversionNodeTemplate
+            || nodeTemplate instanceof VariableOperationNodeTemplate
+        ) {
+            this.isNameRendered = false
+            this.element.requestUpdate()
+        }
     }
 
     /** @returns {IInput[]} */
@@ -44,7 +56,7 @@ export default class PinTemplate extends ITemplate {
         const icon = html`<div class="ueb-pin-icon">${this.renderIcon()}</div>`
         const content = html`
             <div class="ueb-pin-content">
-                ${this.renderName()}
+                ${this.isNameRendered ? this.renderName() : nothing}
                 ${this.element.isInput() && !this.element.entity.bDefaultValueIsIgnored ? this.renderInput() : html``}
             </div>
         `