Move pin templates to subdirectory

js/template/node/CommentNodeTemplate.js

@@ -0,0 +1,112 @@
+import { css, html } from "lit"
+import Configuration from "../../Configuration"
+import IResizeableTemplate from "../IResizeableTemplate"
+import LinearColorEntity from "../../entity/LinearColorEntity"
+
+/**
+ * @typedef {import("../../element/NodeElement").default} NodeElement
+ * @typedef {import("../../element/PinElement").default} PinElement
+ */
+
+export default class CommentNodeTemplate extends IResizeableTemplate {
+
+    #color = LinearColorEntity.getWhite()
+    #selectableAreaHeight = 0
+
+    /** @param {NodeElement} element */
+    constructed(element) {
+        if (element.entity.CommentColor) {
+            this.#color.setFromRGBANumber(element.entity.CommentColor.toNumber())
+            this.#color.setFromHSVA(this.#color.H.value, this.#color.S.value, Math.pow(this.#color.V.value, 0.45) * 0.67)
+        }
+        element.classList.add("ueb-node-style-comment", "ueb-node-resizeable")
+        element.sizeX ??= 25 * Configuration.gridSize
+        element.sizeY ??= 6 * Configuration.gridSize
+        super.constructed(element) // Keep it at the end because it calls this.getColor() where this.#color must be initialized
+    }
+
+    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() {
+        return html`
+            <div class="ueb-node-border">
+                <div class="ueb-node-wrapper">
+                    <div class="ueb-node-top">
+                        ${this.element.entity.NodeComment}
+                    </div>
+                </div>
+            </div>
+        `
+    }
+
+    /** @param {Map} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        const bounding = this.getDraggableElement().getBoundingClientRect()
+        this.#selectableAreaHeight = bounding.height
+    }
+
+    manageNodesBind() {
+        let nodes = this.element.blueprint.getNodes()
+        for (let node of nodes) {
+            if (
+                node.topBoundary() >= this.element.topBoundary()
+                && node.rightBoundary() <= this.element.rightBoundary()
+                && node.bottomBoundary() <= this.element.bottomBoundary()
+                && node.leftBoundary() >= this.element.leftBoundary()
+            ) {
+                node.bindToComment(this.element)
+            } else {
+                node.unbindFromComment(this.element)
+            }
+        }
+    }
+
+    /** @param {Number} value */
+    setSizeX(value) {
+        value = Math.round(value)
+        if (value >= Configuration.gridSet * Configuration.gridSize) {
+            this.element.setNodeWidth(value)
+            return true
+        }
+        return false
+    }
+
+    /** @param {Number} value */
+    setSizeY(value) {
+        value = Math.round(value)
+        if (value >= 3 * Configuration.gridSize) {
+            this.element.setNodeHeight(value)
+            return true
+        }
+        return false
+    }
+
+    endResize() {
+        this.manageNodesBind()
+    }
+
+    topBoundary(justSelectableArea = false) {
+        return this.element.locationY
+    }
+
+    rightBoundary(justSelectableArea = false) {
+        return this.element.locationX + this.element.sizeX
+    }
+
+    bottomBoundary(justSelectableArea = false) {
+        return justSelectableArea
+            ? this.element.locationY + this.#selectableAreaHeight
+            : super.bottomBoundary()
+    }
+
+    leftBoundary(justSelectableArea = false) {
+        return this.element.locationX
+    }
+}