Added cleanup concept to the template

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)
+    }
 }