Types refactoring

js/element/IElement.js

@@ -7,27 +7,52 @@
  * @typedef {import("../template/ITemplate").default} ITemplate
  */
 
+/**
+ * @template {IEntity} T
+ * @template {ITemplate} U
+ */
 export default class IElement extends HTMLElement {
 
     static tagName = ""
 
     /** @type {Blueprint} */
-    blueprint
+    #blueprint
+    get blueprint() {
+        return this.#blueprint
+    }
+    set blueprint(blueprint) {
+        this.#blueprint = blueprint
+    }
 
-    /** @type {IEntity} */
-    entity
+    /** @type {T} */
+    #entity
+    get entity() {
+        return this.#entity
+    }
+    set entity(entity) {
+        this.#entity = entity
+    }
 
-    /** @type {ITemplate} */
-    template
+    /** @type {U} */
+    #template
+    get template() {
+        return this.#template
+    }
+    set template(template) {
+        this.#template = template
+    }
 
     /** @type {IContext[]} */
     inputObjects = []
 
+    /**
+     * @param {T} entity
+     * @param {U} template
+     */
     constructor(entity, template) {
         super()
-        this.blueprint = null
-        this.entity = entity
-        this.template = template
+        this.#entity = entity
+        this.#template = template
         this.inputObjects = []
     }
 
@@ -36,7 +61,7 @@ export default class IElement extends HTMLElement {
     }
 
     connectedCallback() {
-        this.blueprint = this.closest("ueb-blueprint")
+        this.#blueprint = this.closest("ueb-blueprint")
         this.template.apply(this)
         this.inputObjects = this.createInputObjects()
     }
@@ -47,16 +72,16 @@ export default class IElement extends HTMLElement {
 
     /** @param {IElement} element */
     isSameGraph(element) {
-        return this.blueprint && this.blueprint == element?.blueprint
+        return this.#blueprint && this.#blueprint == element?.blueprint
     }
 
     /**
-     * @template {IContext} T
-     * @param {new (...args: any[]) => T} type
-     * @returns {T}
+     * @template {IContext} V
+     * @param {new (...args: any[]) => V} type
+     * @returns {V}
      */
     getInputObject(type) {
-        return /** @type {T} */ (this.inputObjects.find(object => object.constructor == type))
+        return /** @type {V} */ (this.inputObjects.find(object => object.constructor == type))
     }
 
     // Subclasses will want to override

js/element/ISelectableDraggableElement.js

@@ -6,17 +6,22 @@ import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 
 /**
  * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
- * @typedef {import("../entity/IntegerEntity").default} IntegerEntity
+ * @typedef {import("../entity/IEntity").default} IEntity  
+ */
+
+/**
+ * @template {IEntity} T
+ * @template {SelectableDraggableTemplate} U
+ * @extends {IElement<T, U>}
  */
 export default class ISelectableDraggableElement extends IElement {
 
     constructor(...args) {
+        // @ts-expect-error
         super(...args)
         this.dragObject = null
         this.location = [0, 0]
         this.selected = false
-        /** @type {SelectableDraggableTemplate} */
-        this.template
 
         let self = this
         this.dragHandler = (e) => {

js/element/LinkElement.js

@@ -7,6 +7,11 @@ import LinkTemplate from "../template/LinkTemplate"
 /**
  * @typedef {import("./PinElement").default} PinElement
  * @typedef {import("./LinkMessageElement").default} LinkMessageElement
+ * @typedef {import("../entity/IEntity").default} IEntity
+ */
+
+/**
+ * @extends {IElement<Object, LinkTemplate>}
  */
 export default class LinkElement extends IElement {
 
@@ -82,8 +87,6 @@ export default class LinkElement extends IElement {
      */
     constructor(source, destination) {
         super({}, new LinkTemplate())
-        /** @type {import("../template/LinkTemplate").default} */
-        this.template
         const self = this
         this.#nodeDeleteHandler = _ => self.remove()
         this.#nodeDragSourceHandler = e => self.addSourceLocation(e.detail.value)
@@ -196,4 +199,4 @@ export default class LinkElement extends IElement {
     }
 }
 
-customElements.define(LinkElement.tagName, LinkElement)
+customElements.define("ueb-link", LinkElement)

js/element/LinkMessageElement.js

@@ -8,6 +8,10 @@ import LinkMessageTemplate from "../template/LinkMessageTemplate"
  * @typedef {import("./LinkElement").default} LinkElement
  * @typedef {(sourcePin: PinElement, destinationPin: PinElement) => String} LinkRetrieval
  */
+
+/**
+ * @extends {IElement<Object, LinkMessageTemplate>}
+ */
 export default class LinkMessageElement extends IElement {
 
     static tagName = "ueb-link-message"
@@ -49,7 +53,7 @@ export default class LinkMessageElement extends IElement {
 
     /** @type {String} */
     icon
-    /** @type {String} */
+    /** @type {LinkRetrieval} */
     message
     /** @type {LinkElement} */
     linkElement
@@ -62,4 +66,4 @@ export default class LinkMessageElement extends IElement {
 
 }
 
-customElements.define(LinkMessageElement.tagName, LinkMessageElement)
+customElements.define("ueb-link-message", LinkMessageElement)

js/element/NodeElement.js

@@ -6,7 +6,11 @@ import NodeTemplate from "../template/NodeTemplate"
 import ObjectEntity from "../entity/ObjectEntity"
 import PinEntity from "../entity/PinEntity"
 import SerializerFactory from "../serialization/SerializerFactory"
+import PinReferenceEntity from "../entity/PinReferenceEntity"
 
+/**
+ * @extends {ISelectableDraggableElement<ObjectEntity, NodeTemplate>}
+ */
 export default class NodeElement extends ISelectableDraggableElement {
 
     static tagName = "ueb-node"
@@ -16,10 +20,6 @@ export default class NodeElement extends ISelectableDraggableElement {
      */
     constructor(entity) {
         super(entity, new NodeTemplate())
-        /** @type {ObjectEntity} */
-        this.entity
-        /** @type {NodeTemplate} */
-        this.template
         this.dragLinkObjects = []
         super.setLocation([this.entity.NodePosX.value, this.entity.NodePosY.value])
     }
@@ -38,6 +38,23 @@ export default class NodeElement extends ISelectableDraggableElement {
         return this.entity.getFullName()
     }
 
+    /**
+     * @param {String} name
+     */
+    rename(name) {
+        if (this.entity.Name == name) {
+            return false
+        }
+        this.getPinElements().forEach(sourcePinElement =>
+            sourcePinElement.getLinks().forEach(targetPinReference =>
+                this.blueprint.getPin(targetPinReference).redirectLink(sourcePinElement, new PinReferenceEntity({
+                    objectName: name,
+                    pinGuid: sourcePinElement.entity.PinId,
+                }))
+            ))
+        this.entity.Name = name
+    }
+
     getPinElements() {
         return this.template.getPinElements(this)
     }
@@ -72,4 +89,4 @@ export default class NodeElement extends ISelectableDraggableElement {
     }
 }
 
-customElements.define(NodeElement.tagName, NodeElement)
+customElements.define("ueb-node", NodeElement)

js/element/PinElement.js

@@ -9,8 +9,13 @@ import StringPinTemplate from "../template/StringPinTemplate"
 /**
  * @typedef {import("../entity/GuidEntity").default} GuidEntity
  * @typedef {import("../entity/PinEntity").default} PinEntity
+ * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
  * @typedef {import("./NodeElement").default} NodeElement
  */
+
+/**
+ * @extends {IElement<PinEntity, PinTemplate>}
+ */
 export default class PinElement extends IElement {
 
     static tagName = "ueb-pin"
@@ -35,12 +40,6 @@ export default class PinElement extends IElement {
             entity,
             new (PinElement.#typeTemplateMap[entity.getType()] ?? PinTemplate)()
         )
-
-        /** @type {PinEntity} */
-        this.entity
-
-        /** @type {PinTemplate} */
-        this.template
     }
 
     connectedCallback() {
@@ -105,10 +104,6 @@ export default class PinElement extends IElement {
         return this.#color
     }
 
-    /**
-     * Returns The exact location where the link originates from or arrives at.
-     * @returns {Number[]} The location array
-     */
     getLinkLocation() {
         return this.template.getLinkLocation(this)
     }
@@ -121,9 +116,7 @@ export default class PinElement extends IElement {
     }
 
     getLinks() {
-        return this.entity.LinkedTo?.map(pinReference =>
-            pinReference
-        ) ?? []
+        return this.entity.LinkedTo ?? []
     }
 
     /**
@@ -141,6 +134,23 @@ export default class PinElement extends IElement {
         this.entity.unlinkFrom(targetPinElement.nodeElement.getNodeName(), targetPinElement.entity)
         this.template.applyConnected(this)
     }
+
+    /**
+     * 
+     * @param {PinElement} originalPinElement
+     * @param {PinReferenceEntity} newReference
+     */
+    redirectLink(originalPinElement, newReference) {
+        const index = this.entity.LinkedTo.findIndex(pinReference =>
+            pinReference.objectName.toString() == originalPinElement.getPinName()
+            && pinReference.pinGuid == originalPinElement.entity.PinId
+        )
+        if (index >= 0) {
+            this.entity.LinkedTo[index] = newReference
+            return true
+        }
+        return false
+    }
 }
 
-customElements.define(PinElement.tagName, PinElement)
+customElements.define("ueb-pin", PinElement)

js/element/SelectorElement.js

@@ -4,6 +4,9 @@ import FastSelectionModel from "../selection/FastSelectionModel"
 import IElement from "./IElement"
 import SelectorTemplate from "../template/SelectorTemplate"
 
+/**
+ * @extends {IElement<Object, SelectorTemplate>}
+ */
 export default class SelectorElement extends IElement {
 
     static tagName = "ueb-selector"
@@ -11,8 +14,6 @@ export default class SelectorElement extends IElement {
     constructor() {
         super({}, new SelectorTemplate())
         this.selectionModel = null
-        /** @type {SelectorTemplate} */
-        this.template
     }
 
     /**
@@ -39,4 +40,4 @@ export default class SelectorElement extends IElement {
     }
 }
 
-customElements.define(SelectorElement.tagName, SelectorElement)
+customElements.define("ueb-selector", SelectorElement)