Link hover width fixed

js/element/LinkElement.js

@@ -175,6 +175,14 @@ export default class LinkElement extends IElement {
             this.linkMessageElement = null
         }
     }
+
+    startDragging() {
+        this.template.applyStartDragging(this)
+    }
+
+    finishDragging() {
+        this.template.applyFinishDragging(this)
+    }
 }
 
 customElements.define(LinkElement.tagName, LinkElement)

js/element/PinElement.js

@@ -6,14 +6,23 @@ export default class PinElement extends IElement {
 
     static tagName = "ueb-pin"
 
+    /** @type {HTMLElement} */
+    clickableElement
+
+    /** @type {String} */
+    #color
+
     constructor(entity) {
         super(entity, new PinTemplate())
         /** @type {import("../entity/PinEntity").default} */
         this.entity
         /** @type {PinTemplate} */
         this.template
-        /** @type {HTMLElement} */
-        this.clickableElement = null
+    }
+
+    connectedCallback() {
+        super.connectedCallback()
+        this.#color = window.getComputedStyle(this).getPropertyValue("--ueb-node-value-color")
     }
 
     createInputObjects() {
@@ -57,6 +66,10 @@ export default class PinElement extends IElement {
         return this.clickableElement
     }
 
+    getColor() {
+        return this.#color
+    }
+
     /**
      * Returns The exact location where the link originates from or arrives at.
      * @returns {Number[]} The location array

js/input/mouse/MouseCreateLink.js

@@ -42,7 +42,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
     startDrag() {
         this.link = new LinkElement(this.target, null)
         this.link.setLinkMessage(LinkMessageElement.placeNode())
-        this.blueprint.nodesContainerElement.insertBefore(this.link, this.blueprint.selectorElement.nextElementSibling)
+        this.blueprint.nodesContainerElement.prepend(this.link)
         this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName)
         this.#listenedPins.forEach(pin => {
             if (pin != this.target) {
@@ -50,6 +50,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
                 pin.getClickableElement().addEventListener("mouseleave", this.#mouseleaveHandler)
             }
         })
+        this.link.startDragging()
     }
 
     dragTo(location, movement) {
@@ -66,10 +67,12 @@ export default class MouseCreateLink extends IMouseClickDrag {
                 link.getSourcePin() == this.target && link.getDestinationPin() == this.enteredPin
                 || link.getSourcePin() == this.enteredPin && link.getDestinationPin() == this.target
         )) {
+            this.blueprint.addGraphElement(this.link)
             this.link.setDestinationPin(this.enteredPin)
             this.link.setLinkMessage(null)
-            this.blueprint.addGraphElement(this.link)
+            this.link.finishDragging()
         } else {
+            this.link.finishDragging()
             this.link.remove()
         }
         this.link = null

js/template/LinkMessageTemplate.js

@@ -1,6 +1,7 @@
 import html from "./html"
 import ITemplate from "./ITemplate"
 import LinkElement from "../element/LinkElement"
+import sanitizeText from "./sanitizeText"
 
 /**
  * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
@@ -14,7 +15,7 @@ export default class LinkMessageTemplate extends ITemplate {
      */
     render(linkMessage) {
         return html`
-            <span class="${linkMessage.icon}"></span>
+            <span class="${sanitizeText(linkMessage.icon)}"></span>
             <span class="ueb-link-message"></span>
         `
     }

js/template/LinkTemplate.js

@@ -23,9 +23,13 @@ export default class LinkTemplate extends ITemplate {
      * @returns The result html 
      */
     render(link) {
+        const uniqueId = crypto.randomUUID()
         return html`
             <svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                <path stroke="green" fill="none" vector-effect="non-scaling-stroke" />
+                <g>
+                    <path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" />
+                    <use href="#${uniqueId}" pointer-events="stroke" stroke-width="10" />
+                </g>
             </svg>
         `
     }
@@ -35,17 +39,39 @@ export default class LinkTemplate extends ITemplate {
      * @param {LinkElement} link Element of the graph
      */
     apply(link) {
-        super.apply(link)
-        link.classList.add("ueb-positioned")
-        link.pathElement = link.querySelector("path")
         if (link.linkMessageElement) {
             link.appendChild(link.linkMessageElement)
         }
+        super.apply(link)
+        link.classList.add("ueb-positioned")
+        link.pathElement = link.querySelector("path")
+    }
+
+    /**
+     * 
+     * @param {LinkElement} link element
+     */
+    applyStartDragging(link) {
+        link.blueprint.dataset.creatingLink = true
+        const referencePin = link.getSourcePin() ?? link.getDestinationPin()
+        if (referencePin) {
+            link.style.setProperty("--ueb-node-value-color", referencePin.getColor())
+        }
+        link.classList.add("ueb-link-dragging")
+    }
+
+    /**
+     * 
+     * @param {LinkElement} link element
+     */
+    applyFinishDragging(link) {
+        link.blueprint.dataset.creatingLink = false
+        link.classList.remove("ueb-link-dragging")
     }
 
     /**
      * Applies the style relative to the source pin location.
-     * @param {LinkElement} link Link element
+     * @param {LinkElement} link element
      */
     applySourceLocation(link) {
         link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "0" : "1")
@@ -88,8 +114,8 @@ export default class LinkTemplate extends ITemplate {
             const q = p[1] - a / p[0]
             return x => a / x + q
         }
-        const controlPoint = [500, 140]
-        c2 = Math.min(c2, getMaxC2(c2Decreasing, controlPoint)(width))
+        const controlPointC2 = [500, 140]
+        c2 = Math.min(c2, getMaxC2(c2Decreasing, controlPointC2)(width))
         const d = Configuration.linkRightSVGPath(start, c1, c2)
         // TODO move to CSS when Firefox will support property d
         link.pathElement.setAttribute("d", d)