Added cleanup concept to the template

js/Blueprint.js

@@ -29,7 +29,6 @@ import Zoom from "./input/mouse/Zoom"
  */
 export default class Blueprint extends IElement {
 
-    static tagName = "ueb-blueprint"
     /** @type {Number[]} */
     #additional
     get additional() {

js/element/IElement.js

@@ -13,8 +13,6 @@
  */
 export default class IElement extends HTMLElement {
 
-    static tagName = ""
-
     /** @type {Blueprint} */
     #blueprint
     get blueprint() {
@@ -62,15 +60,18 @@ export default class IElement extends HTMLElement {
 
     connectedCallback() {
         this.#blueprint = this.closest("ueb-blueprint")
-        this.template.apply(this)
+        this.template.setup(this)
         this.inputObjects = this.createInputObjects()
     }
 
     disconnectedCallback() {
         this.inputObjects.forEach(v => v.unlistenDOMElement())
+        this.template.cleanup(this)
     }
 
-    /** @param {IElement} element */
+    /**
+     * @param {IElement} element
+     */
     isSameGraph(element) {
         return this.#blueprint && this.#blueprint == element?.blueprint
     }

js/element/LinkElement.js

@@ -15,8 +15,6 @@ import LinkTemplate from "../template/LinkTemplate"
  */
 export default class LinkElement extends IElement {
 
-    static tagName = "ueb-link"
-
     /** @type {PinElement} */
     #source
     get sourcePin() {

js/element/LinkMessageElement.js

@@ -14,7 +14,6 @@ import LinkMessageTemplate from "../template/LinkMessageTemplate"
  */
 export default class LinkMessageElement extends IElement {
 
-    static tagName = "ueb-link-message"
     static convertType = _ => new LinkMessageElement(
         "ueb-icon-conver-type",
         /** @type {LinkRetrieval} */

js/element/NodeElement.js

@@ -13,8 +13,6 @@ import PinReferenceEntity from "../entity/PinReferenceEntity"
  */
 export default class NodeElement extends ISelectableDraggableElement {
 
-    static tagName = "ueb-node"
-
     /**
      * @param {ObjectEntity} entity
      */

js/element/PinElement.js

@@ -19,8 +19,6 @@ import StringPinTemplate from "../template/StringPinTemplate"
  */
 export default class PinElement extends IElement {
 
-    static tagName = "ueb-pin"
-
     static #typeTemplateMap = {
         "exec": ExecPinTemplate,
         "string": StringPinTemplate,

js/element/SelectorElement.js

@@ -9,16 +9,13 @@ import SelectorTemplate from "../template/SelectorTemplate"
  */
 export default class SelectorElement extends IElement {
 
-    static tagName = "ueb-selector"
-
     constructor() {
         super({}, new SelectorTemplate())
         this.selectionModel = null
     }
 
     /**
-     * Create a selection rectangle starting from the specified position
-     * @param {Number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element)
+     * @param {Number[]} initialPosition
      */
     startSelecting(initialPosition) {
         this.template.applyStartSelecting(this, initialPosition)
@@ -26,8 +23,7 @@ export default class SelectorElement extends IElement {
     }
 
     /**
-     * Move selection rectagle to the specified final position. The initial position was specified by startSelecting()
-     * @param {Number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element)
+     * @param {Number[]} finalPosition
      */
     doSelecting(finalPosition) {
         this.template.applyDoSelecting(this, finalPosition)

js/selection/SimpleSelectionModel.js

@@ -9,11 +9,11 @@ export default class SimpleSelectionModel {
      *      secondaryInf: number,
      *      secondarySup: number
      * }} BoundariesInfo
-     * @typedef {numeric} Rectangle
+     * @typedef {Number} Rectangle
      * @param {number[]} initialPosition Coordinates of the starting point of selection [primaryAxisValue, secondaryAxisValue].
      * @param {Rectangle[]} rectangles Rectangles that can be selected by this object.
      * @param {(rect: Rectangle) => BoundariesInfo} boundariesFunc A function that, given a rectangle, it provides the boundaries of such rectangle.
-     * @param {(rect: Rectangle, selected: bool) => void} selectToggleFunction A function that selects or deselects individual rectangles.
+     * @param {(rect: Rectangle, selected: Boolean) => void} selectToggleFunction A function that selects or deselects individual rectangles.
      */
     constructor(initialPosition, rectangles, boundariesFunc, selectToggleFunction) {
         this.initialPosition = initialPosition

js/template/BlueprintTemplate.js

@@ -11,6 +11,7 @@ import SelectorElement from "../element/SelectorElement"
  * @typedef {import("../element/PinElement").default} PinElement
  * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
  */
+
 export default class BlueprintTemplate extends ITemplate {
 
     /**
@@ -69,8 +70,8 @@ export default class BlueprintTemplate extends ITemplate {
      * Applies the style to the element.
      * @param {Blueprint} blueprint The blueprint element
      */
-    apply(blueprint) {
-        super.apply(blueprint)
+    setup(blueprint) {
+        super.setup(blueprint)
         blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
         Object.entries({
             "--ueb-font-size": sanitizeText(Configuration.fontSize),

js/template/ExecPinTemplate.js

@@ -6,6 +6,7 @@ import PinTemplate from "./PinTemplate"
 /**
  * @typedef {import("../element/PinElement").default} PinElement
  */
+
 export default class ExecPinTemplate extends PinTemplate {
 
     /**

js/template/ITemplate.js

@@ -3,20 +3,30 @@
 /**
  * @typedef {import("../element/IElement").default} IElement
  */
+
+/**
+ * @template {IElement} T
+ */
 export default class ITemplate {
 
     /**
-     * @param {IElement} entity
+     * @param {T} entity
      */
     render(entity) {
         return ""
     }
 
     /**
-     * @param {IElement} element
+     * @param {T} element
      */
-    apply(element) {
+    setup(element) {
         // TODO replace with the safer element.setHTML(...) when it will be availableBreack
         element.innerHTML = this.render(element)
     }
+
+    /**
+     * @param {T} element
+     */
+    cleanup(element) {
+    }
 }

js/template/LinkMessageTemplate.js

@@ -2,12 +2,12 @@
 
 import html from "./html"
 import ITemplate from "./ITemplate"
-import LinkElement from "../element/LinkElement"
 import sanitizeText from "./sanitizeText"
 
 /**
  * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
  */
+
 export default class LinkMessageTemplate extends ITemplate {
 
     /**
@@ -24,8 +24,8 @@ export default class LinkMessageTemplate extends ITemplate {
      * Applies the style to the element.
      * @param {LinkMessageElement} linkMessage
      */
-    apply(linkMessage) {
-        const a = super.apply(linkMessage)
+    setup(linkMessage) {
+        const a = super.setup(linkMessage)
         const linkMessageSetup = _ =>
             /** @type {HTMLElement} */(linkMessage.querySelector(".ueb-link-message")).innerText = linkMessage.message(
             linkMessage.linkElement.sourcePin,

js/template/LinkTemplate.js

@@ -9,6 +9,7 @@ import sanitizeText from "./sanitizeText"
  * @typedef {import("../element/LinkElement").default} LinkElement
  * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
  */
+
 export default class LinkTemplate extends ITemplate {
 
     /**
@@ -76,8 +77,8 @@ export default class LinkTemplate extends ITemplate {
     /**
      * @param {LinkElement} link
      */
-    apply(link) {
-        super.apply(link)
+    setup(link) {
+        super.setup(link)
         if (link.linkMessageElement) {
             link.appendChild(link.linkMessageElement)
         }

js/template/NodeTemplate.js

@@ -8,6 +8,7 @@ import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
 /**
  * @typedef {import("../element/NodeElement").default} NodeElement
  */
+
 export default class NodeTemplate extends SelectableDraggableTemplate {
 
     /**
@@ -43,8 +44,8 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
      * Applies the style to the element.
      * @param {NodeElement} node Element of the graph
      */
-    apply(node) {
-        super.apply(node)
+    setup(node) {
+        super.setup(node)
         const nodeName = node.entity.getFullName()
         node.dataset.name = sanitizeText(nodeName)
         if (node.selected) {

js/template/PinTemplate.js

@@ -9,6 +9,7 @@ import Utility from "../Utility"
  * @typedef {import("../element/NodeElement").default} NodeElement
  * @typedef {import("../element/PinElement").default} PinElement
  */
+
 export default class PinTemplate extends ITemplate {
 
     hasInput() {
@@ -56,8 +57,8 @@ export default class PinTemplate extends ITemplate {
     /**
      * @param {PinElement} pin
      */
-    apply(pin) {
-        super.apply(pin)
+    setup(pin) {
+        super.setup(pin)
         pin.classList.add(
             "ueb-node-" + (pin.isInput() ? "input" : pin.isOutput() ? "output" : "hidden"),
             "ueb-pin-" + sanitizeText(pin.getType())

js/template/SelectableDraggableTemplate.js

@@ -6,6 +6,7 @@ import sanitizeText from "./sanitizeText"
 /**
  * @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
  */
+
 export default class SelectableDraggableTemplate extends ITemplate {
 
     /**

js/template/SelectorTemplate.js

@@ -6,14 +6,15 @@ import sanitizeText from "./sanitizeText"
 /**
  * @typedef {import("../element/SelectorElement").default} SelectorElement
  */
+
 export default class SelectorTemplate extends ITemplate {
 
     /**
      * Applies the style to the element.
      * @param {SelectorElement} selector Selector element
      */
-    apply(selector) {
-        super.apply(selector)
+    setup(selector) {
+        super.setup(selector)
         this.applyFinishSelecting(selector)
     }
 

js/template/StringPinTemplate.js

@@ -6,6 +6,7 @@ import PinTemplate from "./PinTemplate"
 /**
  * @typedef {import("../element/PinElement").default} PinElement
  */
+
 export default class StringPinTemplate extends PinTemplate {
 
     hasInput() {
@@ -28,4 +29,30 @@ export default class StringPinTemplate extends PinTemplate {
             </div>
         `
     }
+
+    /**
+     * @param {PinElement} pin
+     */
+    setup(pin) {
+        super.setup(pin)
+        const input = pin.querySelector(".ueb-pin-input-content")
+        this.onFocusHandler = () => {
+            pin.blueprint.dispatchEditTextEvent(true)
+        }
+        this.onFocusOutHandler = () => {
+            pin.blueprint.dispatchEditTextEvent(false)
+            document.getSelection().removeAllRanges() // Deselect text inside the input
+        }
+        input.addEventListener("onfocus", this.onFocusHandler)
+        input.addEventListener("onfocusout", this.onFocusOutHandler)
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    cleanup(pin) {
+        super.cleanup(pin)
+        pin.blueprint.removeEventListener("onfocus", this.onFocusHandler)
+        pin.blueprint.removeEventListener("onfocusout", this.onFocusOutHandler)
+    }
 }