Initialize events handler in class

js/template/PinTemplate.js

@@ -18,6 +18,12 @@ import Utility from "../Utility"
  */
 export default class PinTemplate extends ITemplate {
 
+    /** @param {PinElement<T>} element */
+    constructed(element) {
+        super.constructed(element)
+        this.element.dataset.id = this.element.GetPinIdValue()
+    }
+
     connectedCallback() {
         super.connectedCallback()
         this.element.nodeElement = this.element.closest("ueb-node")
@@ -26,7 +32,7 @@ export default class PinTemplate extends ITemplate {
     /** @returns {IInput[]} */
     createInputObjects() {
         return [
-            new MouseCreateLink(this.element.clickableElement, this.element.blueprint, {
+            new MouseCreateLink(this.getClickableElement(), this.element.blueprint, {
                 moveEverywhere: true,
             })
         ]
@@ -66,13 +72,6 @@ export default class PinTemplate extends ITemplate {
         return nothing
     }
 
-    /** @param {Map} changedProperties */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties)
-        this.element.dataset.id = this.element.GetPinIdValue()
-        this.element.clickableElement = this.element
-    }
-
     getLinkLocation() {
         const rect = this.element.querySelector(".ueb-pin-icon").getBoundingClientRect()
         const location = Utility.convertLocation(
@@ -81,4 +80,8 @@ export default class PinTemplate extends ITemplate {
         )
         return this.element.blueprint.compensateTranslation(location)
     }
+
+    getClickableElement() {
+        return this.element
+    }
 }