Added cleanup concept to the template

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)