Stashes saved

js/template/CommentNodeTemplate.js

@@ -0,0 +1,60 @@
+import { css, html } from "lit"
+import LinearColorEntity from "../entity/LinearColorEntity"
+import NodeTemplate from "./NodeTemplate"
+
+/**
+ * @typedef {import("../element/NodeElement").default} NodeElement
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+
+export default class CommentNodeTemplate extends NodeTemplate {
+
+    #color = LinearColorEntity.getWhite()
+
+    /** @param {NodeElement} element */
+    constructed(element) {
+        if (element.entity.CommentColor) {
+            this.#color.setFromRGBANumber(element.entity.CommentColor.toNumber())
+        }
+        // Dimming the colors to 2/3
+        const factor = 2 / 3
+        this.#color.setFromRGBA(
+            this.#color.R.value * factor,
+            this.#color.G.value * factor,
+            this.#color.B.value * factor,
+        )
+        element.classList.add("ueb-node-style-comment", "ueb-node-resizeable")
+        super.constructed(element) // Keep it at the end
+    }
+
+    getColor() {
+        return css`${Math.round(this.#color.R.value * 255)}, ${Math.round(this.#color.G.value * 255)}, ${Math.round(this.#color.B.value * 255)}`
+    }
+
+    getDraggableElement() {
+        return this.element.querySelector(".ueb-node-top")
+    }
+
+    render() {
+        const width = this.element.entity.getNodeWidth()
+        const height = this.element.entity.getNodeHeight()
+        return html`
+            <div class="ueb-node-border">
+                <div class="ueb-node-handler-top"></div>
+                <div class="ueb-node-handler-right"></div>
+                <div class="ueb-node-handler-bottom"></div>
+                <div class="ueb-node-handler-left"></div>
+                <div class="ueb-node-wrapper">
+                    <div class="ueb-node-top">
+                        ${this.element.entity.NodeComment}
+                    </div>
+                    <div class="ueb-node-content"
+                        style="${`width: ${width}px; height: ${height}px;`}">
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+
+}

js/template/IDraggableTemplate.js

@@ -13,7 +13,7 @@ import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
 export default class IDraggableTemplate extends ITemplate {
 
     getDraggableElement() {
-        return this.element
+        return /** @type {Element} */(this.element)
     }
 
     createDraggableObject() {

js/template/ISelectableDraggableTemplate.js

@@ -13,7 +13,7 @@ import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 export default class ISelectableDraggableTemplate extends IDraggablePositionedTemplate {
 
     getDraggableElement() {
-        return this.element
+        return /** @type {Element} */ (this.element)
     }
 
     createDraggableObject() {

js/template/NodeTemplate.js

@@ -37,6 +37,12 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         this.element.addNextUpdatedCallbacks(() => this.element.dispatchReflowEvent(), true)
     }
 
+    /** @param {NodeElement} element */
+    constructed(element) {
+        super.constructed(element)
+        this.element.style.setProperty("--ueb-node-color", this.getColor().cssText)
+    }
+
     getColor() {
         const functionColor = css`84, 122, 156`
         const pureFunctionColor = css`95, 129, 90`
@@ -60,12 +66,6 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         return functionColor
     }
 
-    /** @param {NodeElement} element */
-    constructed(element) {
-        super.constructed(element)
-        this.element.style.setProperty("--ueb-node-color", this.getColor().cssText)
-    }
-
     render() {
         const icon = this.renderNodeIcon()
         const name = this.renderNodeName()