Link implementation wip

js/input/mouse/MouseClickDrag.js

@@ -29,7 +29,7 @@ export default class MouseClickDrag extends Pointing {
                         // Attach the listeners
                         movementListenedElement.addEventListener("mousemove", self.mouseStartedMovingHandler)
                         document.addEventListener("mouseup", self.mouseUpHandler)
-                        self.clickedPosition = self.getLocation(e)
+                        self.clickedPosition = self.locationFromEvent(e)
                         self.clicked(self.clickedPosition)
                         return true
                     }
@@ -59,7 +59,7 @@ export default class MouseClickDrag extends Pointing {
         this.mouseMoveHandler = e => {
             e.preventDefault()
             e.stopPropagation()
-            const location = self.getLocation(e)
+            const location = self.locationFromEvent(e)
             const movement = [e.movementX, e.movementY]
             self.dragTo(location, movement)
         }

js/input/mouse/MouseCreateLink.js

@@ -1,29 +1,61 @@
+import GraphLink from "../../graph/GraphLink"
 import MouseClickDrag from "./MouseClickDrag"
 
 export default class MouseCreateLink extends MouseClickDrag {
 
+    /** @type {(e: MouseEvent) => void} */
+    #mouseenterHandler
+
+    /** @type {(e: MouseEvent) => void} */
+    #mouseleaveHandler
+
     constructor(target, blueprint, options) {
         super(target, blueprint, options)
         /** @type {import("../../graph/GraphPin").default} */
         this.target
         /** @type {import("../../graph/GraphLink").default} */
         this.link
+        /** @type {import("../../entity/PinEntity").default} */
+        this.enteredPin
+
+        let self = this
+        this.#mouseenterHandler = e => {
+            if (!self.enteredPin) {
+                self.enteredPin = e.target
+            }
+        }
+        this.#mouseleaveHandler = e => {
+            if (self.enteredPin == e.target) {
+                self.enteredPin = null
+            }
+        }
     }
 
     startDrag() {
-        let link = this.target.dragLink()
-
+        this.link = new GraphLink(this.target, null)
+        this.blueprint.nodesContainerElement.insertBefore(this.link, this.blueprint.selectorElement.nextElementSibling)
+        this.blueprint.querySelectorAll("ueb-pin." + this.target.isInput() ? "output" : "input")
+            .forEach(pin => {
+                pin.addEventListener("mouseenter", this.#mouseenterHandler)
+                pin.addEventListener("mouseleave", this.#mouseleaveHandler)
+            })
     }
 
     dragTo(location, movement) {
-        //this.selectorElement.doSelecting(location)
+        this.link.setDestinationLocation(location)
     }
 
     endDrag() {
-        if (this.started) {
-            //this.selectorElement.finishSelecting()
+        this.blueprint.querySelectorAll("ueb-pin." + this.target.isInput() ? "output" : "input")
+            .forEach(pin => {
+                pin.removeEventListener("mouseenter", this.#mouseenterHandler)
+                pin.removeEventListener("mouseleave", this.#mouseleaveHandler)
+            })
+        if (this.enteredPin) {
+            this.link.setDestinationPin(this.link)
         } else {
-            // this.blueprint.unselectAll()
+            // this.link.remove()
         }
+        this.link = null
     }
 }

js/input/mouse/MouseTracking.js

@@ -8,7 +8,7 @@ export default class MouseTracking extends Pointing {
 
         let self = this
         this.mousemoveHandler = e => {
-            self.blueprint.entity.mousePosition = self.getLocation(e)
+            self.blueprint.entity.mousePosition = self.locationFromEvent(e)
             return true
         }
     }

js/input/mouse/MouseWheel.js

@@ -16,7 +16,7 @@ export default class MouseWheel extends Pointing {
 
         this.mouseWheelHandler = e => {
             e.preventDefault()
-            const location = self.getLocation(e)
+            const location = self.locationFromEvent(e)
             self.wheel(Math.sign(e.deltaY), location)
             return true
         }

js/input/mouse/Pointing.js

@@ -13,13 +13,7 @@ export default class Pointing extends Context {
      * @param {MouseEvent} mouseEvent 
      * @returns 
      */
-    getLocation(mouseEvent) {
-        const scaleCorrection = 1 / Utility.getScale(this.target)
-        const targetOffset = this.movementSpace.getBoundingClientRect()
-        let location = [
-            Math.round((mouseEvent.clientX - targetOffset.x) * scaleCorrection),
-            Math.round((mouseEvent.clientY - targetOffset.y) * scaleCorrection)
-        ]
-        return location
+    locationFromEvent(mouseEvent) {
+        return Utility.convertLocation([mouseEvent.clientX, mouseEvent.clientY], this.movementSpace)
     }
 }