Resizeable comments

js/template/CommentNodeTemplate.js

@@ -1,13 +1,14 @@
 import { css, html } from "lit"
+import Configuration from "../Configuration"
+import IResizeableTemplate from "./IResizeableTemplate"
 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 {
+export default class CommentNodeTemplate extends IResizeableTemplate {
 
     #color = LinearColorEntity.getWhite()
 
@@ -19,12 +20,12 @@ export default class CommentNodeTemplate extends NodeTemplate {
         // 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,
+            this.#color.R.value,
+            this.#color.G.value,
+            this.#color.B.value,
         )
         element.classList.add("ueb-node-style-comment", "ueb-node-resizeable")
-        super.constructed(element) // Keep it at the end
+        super.constructed(element) // Keep it at the end because it calls this.getColor() where this.#color must be initialized
     }
 
     getColor() {
@@ -36,25 +37,32 @@ export default class CommentNodeTemplate extends NodeTemplate {
     }
 
     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>
         `
     }
 
+    /** @param {Number} value */
+    setSizeX(value) {
+        if (value >= Configuration.gridSet * Configuration.gridSize) {
+            this.element.sizeX = value
+            return true
+        }
+        return false
+    }
 
+    /** @param {Number} value */
+    setSizeY(value) {
+        if (value >= 3 * Configuration.gridSize) {
+            this.element.sizeY = Math.max(value, 3 * Configuration.gridSize)
+            return true
+        }
+        return false
+    }
 }

js/template/IResizeableTemplate.js

@@ -0,0 +1,142 @@
+import MouseClickDrag from "../input/mouse/MouseClickDrag"
+import NodeTemplate from "./NodeTemplate"
+
+/** @typedef {import("../element/NodeElement").default} NodeElement */
+
+export default class IResizeableTemplate extends NodeTemplate {
+
+    #THandler = document.createElement("div")
+    #RHandler = document.createElement("div")
+    #BHandler = document.createElement("div")
+    #LHandler = document.createElement("div")
+    #TRHandler = document.createElement("div")
+    #BRHandler = document.createElement("div")
+    #BLHandler = document.createElement("div")
+    #TLHandler = document.createElement("div")
+
+    /** @param {NodeElement} element */
+    constructed(element) {
+        super.constructed(element)
+        this.element.classList.add("ueb-resizeable")
+    }
+
+    /** @param {Map} changedProperties */
+    update(changedProperties) {
+        super.update(changedProperties)
+        if (this.element.sizeX >= 0 && changedProperties.has("sizeX")) {
+            this.element.style.width = `${this.element.sizeX}px`
+        }
+        if (this.element.sizeY >= 0 && changedProperties.has("sizeY")) {
+            this.element.style.height = `${this.element.sizeY}px`
+        }
+    }
+
+    /** @param {Map} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        this.#THandler.classList.add("ueb-resizeable-top")
+        this.#RHandler.classList.add("ueb-resizeable-right")
+        this.#BHandler.classList.add("ueb-resizeable-bottom")
+        this.#LHandler.classList.add("ueb-resizeable-left")
+        this.#TRHandler.classList.add("ueb-resizeable-top-right")
+        this.#BRHandler.classList.add("ueb-resizeable-bottom-right")
+        this.#BLHandler.classList.add("ueb-resizeable-bottom-left")
+        this.#TLHandler.classList.add("ueb-resizeable-top-left")
+        this.element.append(
+            this.#THandler,
+            this.#RHandler,
+            this.#BHandler,
+            this.#LHandler,
+            this.#TRHandler,
+            this.#BRHandler,
+            this.#BLHandler,
+            this.#TLHandler
+        )
+    }
+
+    createInputObjects() {
+        return [
+            ...super.createInputObjects(),
+            new MouseClickDrag(this.#THandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[1] = location[1] - this.element.topBoundary()
+                    if (this.setSizeY(this.element.sizeY - movement[1])) {
+                        this.element.addLocation([0, movement[1]])
+                    }
+                }
+            }),
+            new MouseClickDrag(this.#RHandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[0] = location[0] - this.element.rightBoundary()
+                    this.setSizeX(this.element.sizeX + movement[0])
+                }
+            }),
+            new MouseClickDrag(this.#BHandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[1] = location[1] - this.element.bottomBoundary()
+                    this.setSizeY(this.element.sizeY + movement[1])
+                }
+            }),
+            new MouseClickDrag(this.#LHandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[0] = location[0] - this.element.leftBoundary()
+                    if (this.setSizeX(this.element.sizeX - movement[0])) {
+                        this.element.addLocation([movement[0], 0])
+                    }
+                }
+            }),
+            new MouseClickDrag(this.#TRHandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[0] = location[0] - this.element.rightBoundary()
+                    movement[1] = location[1] - this.element.topBoundary()
+                    this.setSizeX(this.element.sizeX + movement[0])
+                    if (this.setSizeY(this.element.sizeY - movement[1])) {
+                        this.element.addLocation([0, movement[1]])
+                    }
+                }
+            }),
+            new MouseClickDrag(this.#BRHandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[0] = location[0] - this.element.rightBoundary()
+                    movement[1] = location[1] - this.element.bottomBoundary()
+                    this.setSizeX(this.element.sizeX + movement[0])
+                    this.setSizeY(this.element.sizeY + movement[1])
+                }
+            }),
+            new MouseClickDrag(this.#BLHandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[0] = location[0] - this.element.leftBoundary()
+                    movement[1] = location[1] - this.element.bottomBoundary()
+                    if (this.setSizeX(this.element.sizeX - movement[0])) {
+                        this.element.addLocation([movement[0], 0])
+                    }
+                    this.setSizeY(this.element.sizeY + movement[1])
+                }
+            }),
+            new MouseClickDrag(this.#TLHandler, this.element.blueprint, {
+                onDrag: (location, movement) => {
+                    movement[0] = location[0] - this.element.leftBoundary()
+                    movement[1] = location[1] - this.element.topBoundary()
+                    if (this.setSizeX(this.element.sizeX - movement[0])) {
+                        this.element.addLocation([movement[0], 0])
+                    }
+                    if (this.setSizeY(this.element.sizeY - movement[1])) {
+                        this.element.addLocation([0, movement[1]])
+                    }
+                }
+            }),
+        ]
+    }
+
+    /** @param {Number} value */
+    setSizeX(value) {
+        this.element.sizeX = value
+        return true
+    }
+
+    /** @param {Number} value */
+    setSizeY(value) {
+        this.element.sizeY = value
+        return true
+    }
+}