Node links cleaned wen added to the graph

dist/ueblueprint.js

@@ -1508,6 +1508,9 @@ class ObjectEntity extends IEntity {
         return this.Name
     }
 
+    /**
+     * @returns {[String, Number]}
+     */
     getNameAndCounter() {
         const result = this.getFullName().match(ObjectEntity.nameRegex);
         if (result && result.length == 3) {
@@ -1516,11 +1519,11 @@ class ObjectEntity extends IEntity {
     }
 
     getDisplayName() {
-        return /** @type {String} */ (this.getNameAndCounter()[0])
+        return this.getNameAndCounter()[0]
     }
 
     getCounter() {
-        return /** @type {Number} */ (this.getNameAndCounter()[1])
+        return this.getNameAndCounter()[1]
     }
 }
 
@@ -3026,7 +3029,7 @@ class LinkMessageTemplate extends ITemplate {
         if (linkMessage.linkElement) {
             linkMessageSetup();
         } else {
-            window.customElements.whenDefined("ueb-link-message").then(linkMessage);
+            window.customElements.whenDefined("ueb-link-message").then(linkMessageSetup);
         }
     }
 
@@ -3216,9 +3219,7 @@ class PinTemplate extends ITemplate {
     }
 
     /**
-     * Computes the html content of the pin.
+     * @param {PinElement} pin
-     * @param {PinElement} pin html element
-     * @returns The result html
      */
     render(pin) {
         if (pin.isInput()) {
@@ -3256,8 +3257,7 @@ class PinTemplate extends ITemplate {
     }
 
     /**
-     * Applies the style to the element.
+     * @param {PinElement} pin
-     * @param {PinElement} pin element of the graph
      */
     apply(pin) {
         super.apply(pin);
@@ -3283,7 +3283,6 @@ class PinTemplate extends ITemplate {
     }
 
     /**
-     * Applies the connection style to the element.
      * @param {PinElement} pin
      */
     applyConnected(pin) {
@@ -3468,6 +3467,12 @@ class PinElement extends IElement {
         return this.entity.LinkedTo ?? []
     }
 
+    cleanLinks() {
+        this.entity.LinkedTo = this.getLinks().filter(
+            pinReference => this.blueprint.getPin(pinReference)
+        );
+    }
+
     /**
      * @param {PinElement} targetPinElement
      */
@@ -3624,6 +3629,11 @@ class NodeElement extends ISelectableDraggableElement {
         return new NodeElement(entity)
     }
 
+    connectedCallback() {
+        this.getAttribute("type")?.trim();
+        super.connectedCallback();
+    }
+
     disconnectedCallback() {
         super.disconnectedCallback();
         this.dispatchDeleteEvent();
@@ -3633,6 +3643,10 @@ class NodeElement extends ISelectableDraggableElement {
         return this.entity.getFullName()
     }
 
+    cleanLinks() {
+        this.getPinElements().forEach(pin => pin.cleanLinks());
+    }
+
     /**
      * @param {String} name
      */
@@ -3640,13 +3654,14 @@ class NodeElement extends ISelectableDraggableElement {
         if (this.entity.Name == name) {
             return false
         }
-        this.getPinElements().forEach(sourcePinElement =>
+        for (let sourcePinElement of this.getPinElements()) {
-            sourcePinElement.getLinks().forEach(targetPinReference =>
+            for (let targetPinReference of sourcePinElement.getLinks()) {
                 this.blueprint.getPin(targetPinReference).redirectLink(sourcePinElement, new PinReferenceEntity({
                     objectName: name,
                     pinGuid: sourcePinElement.entity.PinId,
-                }))
+                }));
-            ));
+            }
+        }
         this.entity.Name = name;
     }
 
@@ -3661,11 +3676,6 @@ class NodeElement extends ISelectableDraggableElement {
         return this.entity.CustomProperties.filter(v => v instanceof PinEntity)
     }
 
-    connectedCallback() {
-        this.getAttribute("type")?.trim();
-        super.connectedCallback();
-    }
-
     setLocation(value = [0, 0]) {
         let nodeType = this.entity.NodePosX.constructor;
         // @ts-expect-error
@@ -4189,24 +4199,33 @@ class Blueprint extends IElement {
      * @param  {...IElement} graphElements
      */
     addGraphElement(...graphElements) {
-        graphElements.forEach(element => {
+        let nodeElements = [];
+        for (let element of graphElements) {
             if (element instanceof NodeElement && !this.nodes.includes(element)) {
-                const [nodeName, nodeCount] = element.entity.getNameAndCounter();
+                const nodeName = element.entity.getFullName();
-                // Node with the same name and number exists already
+                const homonymNode = this.nodes.find(node => node.entity.getFullName() == nodeName);
-                const homonymNode = this.nodes.find(node => {
-                    const [currentName, currentCount] = node.entity.getNameAndCounter();
-                    return currentName == nodeName && currentCount == nodeName
-                });
                 if (homonymNode) {
-                    this.#nodeNameCounter[nodeName] = (this.#nodeNameCounter[nodeName] ?? -1) + 1;
+                    // Inserting node keeps tha name and the homonym nodes is renamed
-                    homonymNode.dataset.name = Configuration.nodeName(nodeName, this.#nodeNameCounter[nodeName]);
+                    let [name, counter] = homonymNode.entity.getNameAndCounter();
+                    this.#nodeNameCounter[name] = this.#nodeNameCounter[name] ?? -1;
+                    do {
+                        ++this.#nodeNameCounter[name];
+                    } while (this.nodes.find(node =>
+                        node.entity.getFullName() == Configuration.nodeName(name, this.#nodeNameCounter[name])
+                    ))
+                    homonymNode.rename(Configuration.nodeName(name, this.#nodeNameCounter[name]));
                 }
                 this.nodes.push(element);
+                nodeElements.push(element);
             } else if (element instanceof LinkElement && !this.links.includes(element)) {
                 this.links.push(element);
             }
-            this.nodesContainerElement?.appendChild(element);
+        }
-        });
+        // Keep separated for linking purpose
+        if (this.nodesContainerElement) {
+            graphElements.forEach(element => this.nodesContainerElement.appendChild(element));
+            nodeElements.forEach(node => node.cleanLinks());
+        }
     }
 
     /**

js/Blueprint.js

@@ -398,24 +398,33 @@ export default class Blueprint extends IElement {
      * @param  {...IElement} graphElements
      */
     addGraphElement(...graphElements) {
-        graphElements.forEach(element => {
+        let nodeElements = []
+        for (let element of graphElements) {
             if (element instanceof NodeElement && !this.nodes.includes(element)) {
-                const [nodeName, nodeCount] = element.entity.getNameAndCounter()
+                const nodeName = element.entity.getFullName()
-                // Node with the same name and number exists already
+                const homonymNode = this.nodes.find(node => node.entity.getFullName() == nodeName)
-                const homonymNode = this.nodes.find(node => {
-                    const [currentName, currentCount] = node.entity.getNameAndCounter()
-                    return currentName == nodeName && currentCount == nodeName
-                })
                 if (homonymNode) {
-                    this.#nodeNameCounter[nodeName] = (this.#nodeNameCounter[nodeName] ?? -1) + 1
+                    // Inserting node keeps tha name and the homonym nodes is renamed
-                    homonymNode.dataset.name = Configuration.nodeName(nodeName, this.#nodeNameCounter[nodeName])
+                    let [name, counter] = homonymNode.entity.getNameAndCounter()
+                    this.#nodeNameCounter[name] = this.#nodeNameCounter[name] ?? -1
+                    do {
+                        ++this.#nodeNameCounter[name]
+                    } while (this.nodes.find(node =>
+                        node.entity.getFullName() == Configuration.nodeName(name, this.#nodeNameCounter[name])
+                    ))
+                    homonymNode.rename(Configuration.nodeName(name, this.#nodeNameCounter[name]))
                 }
                 this.nodes.push(element)
+                nodeElements.push(element)
             } else if (element instanceof LinkElement && !this.links.includes(element)) {
                 this.links.push(element)
             }
-            this.nodesContainerElement?.appendChild(element)
+        }
-        })
+        // Keep separated for linking purpose
+        if (this.nodesContainerElement) {
+            graphElements.forEach(element => this.nodesContainerElement.appendChild(element))
+            nodeElements.forEach(node => node.cleanLinks())
+        }
     }
 
     /**

js/element/NodeElement.js

@@ -29,6 +29,11 @@ export default class NodeElement extends ISelectableDraggableElement {
         return new NodeElement(entity)
     }
 
+    connectedCallback() {
+        const type = this.getAttribute("type")?.trim()
+        super.connectedCallback()
+    }
+
     disconnectedCallback() {
         super.disconnectedCallback()
         this.dispatchDeleteEvent()
@@ -38,6 +43,10 @@ export default class NodeElement extends ISelectableDraggableElement {
         return this.entity.getFullName()
     }
 
+    cleanLinks() {
+        this.getPinElements().forEach(pin => pin.cleanLinks())
+    }
+
     /**
      * @param {String} name
      */
@@ -45,13 +54,14 @@ export default class NodeElement extends ISelectableDraggableElement {
         if (this.entity.Name == name) {
             return false
         }
-        this.getPinElements().forEach(sourcePinElement =>
+        for (let sourcePinElement of this.getPinElements()) {
-            sourcePinElement.getLinks().forEach(targetPinReference =>
+            for (let targetPinReference of sourcePinElement.getLinks()) {
                 this.blueprint.getPin(targetPinReference).redirectLink(sourcePinElement, new PinReferenceEntity({
                     objectName: name,
                     pinGuid: sourcePinElement.entity.PinId,
                 }))
-            ))
+            }
+        }
         this.entity.Name = name
     }
 
@@ -66,11 +76,6 @@ export default class NodeElement extends ISelectableDraggableElement {
         return this.entity.CustomProperties.filter(v => v instanceof PinEntity)
     }
 
-    connectedCallback() {
-        const type = this.getAttribute("type")?.trim()
-        super.connectedCallback()
-    }
-
     setLocation(value = [0, 0]) {
         let nodeType = this.entity.NodePosX.constructor
         // @ts-expect-error

js/element/PinElement.js

@@ -119,6 +119,12 @@ export default class PinElement extends IElement {
         return this.entity.LinkedTo ?? []
     }
 
+    cleanLinks() {
+        this.entity.LinkedTo = this.getLinks().filter(
+            pinReference => this.blueprint.getPin(pinReference)
+        )
+    }
+
     /**
      * @param {PinElement} targetPinElement
      */

js/entity/ObjectEntity.js

@@ -53,6 +53,9 @@ export default class ObjectEntity extends IEntity {
         return this.Name
     }
 
+    /**
+     * @returns {[String, Number]}
+     */
     getNameAndCounter() {
         const result = this.getFullName().match(ObjectEntity.nameRegex)
         if (result && result.length == 3) {
@@ -61,10 +64,10 @@ export default class ObjectEntity extends IEntity {
     }
 
     getDisplayName() {
-        return /** @type {String} */ (this.getNameAndCounter()[0])
+        return this.getNameAndCounter()[0]
     }
 
     getCounter() {
-        return /** @type {Number} */ (this.getNameAndCounter()[1])
+        return this.getNameAndCounter()[1]
     }
 }

js/template/LinkMessageTemplate.js

@@ -35,7 +35,7 @@ export default class LinkMessageTemplate extends ITemplate {
         if (linkMessage.linkElement) {
             linkMessageSetup()
         } else {
-            window.customElements.whenDefined("ueb-link-message").then(linkMessage)
+            window.customElements.whenDefined("ueb-link-message").then(linkMessageSetup)
         }
     }