Various fixes, smaller refactoring

js/Configuration.js

@@ -45,6 +45,7 @@ export default class Configuration {
     static gridSize = 16 // px
     static hexColorRegex = /^\s*#(?<r>[0-9a-fA-F]{2})(?<g>[0-9a-fA-F]{2})(?<b>[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?<rs>[0-9a-fA-F])(?<gs>[0-9a-fA-F])(?<bs>[0-9a-fA-F])\s*$/
     static keysSeparator = "+"
+    static knotOffset = [-26, -16]
     static linkCurveHeight = 15 // px
     static linkCurveWidth = 80 // px
     static linkMinWidth = 100 // px

js/element/IDraggableElement.js

@@ -49,10 +49,9 @@ export default class IDraggableElement extends IElement {
     }
 
     computeSizes() {
-        const scaleCorrection = 1 / this.blueprint.getScale()
         const bounding = this.getBoundingClientRect()
-        this.sizeX = bounding.width * scaleCorrection
-        this.sizeY = bounding.height * scaleCorrection
+        this.sizeX = this.blueprint.scaleCorrect(bounding.width)
+        this.sizeY = this.blueprint.scaleCorrect(bounding.height)
     }
 
     /** @param {PropertyValues} changedProperties */

js/input/mouse/IMouseWheel.js

@@ -3,17 +3,15 @@ import IPointing from "./IPointing"
 
 export default class IMouseWheel extends IPointing {
 
-    #mouseWheelHandler =
-        /** @param {WheelEvent} e */
-        e => {
-            e.preventDefault()
-            const location = this.locationFromEvent(e)
-            this.wheel(Math.sign(e.deltaY * Configuration.mouseWheelFactor), location)
-        }
+    /** @param {WheelEvent} e */
+    #mouseWheelHandler = e => {
+        e.preventDefault()
+        const location = this.locationFromEvent(e)
+        this.wheel(Math.sign(e.deltaY * Configuration.mouseWheelFactor), location)
+    }
 
-    #mouseParentWheelHandler =
-        /** @param {WheelEvent} e */
-        e => e.preventDefault()
+    /** @param {WheelEvent} e */
+    #mouseParentWheelHandler = e => e.preventDefault()
 
     /**
      * @param {HTMLElement} target

js/input/mouse/MouseClick.js

@@ -8,45 +8,43 @@ import IPointing from "./IPointing"
  */
 export default class MouseClick extends IPointing {
 
-    #mouseDownHandler =
-        /** @param {MouseEvent} e */
-        e => {
-            this.blueprint.setFocused(true)
-            switch (e.button) {
-                case this.options.clickButton:
-                    // Either doesn't matter or consider the click only when clicking on the target, not descandants
-                    if (!this.options.strictTarget || e.target === e.currentTarget) {
-                        if (this.options.consumeEvent) {
-                            e.stopImmediatePropagation() // Captured, don't call anyone else
-                        }
-                        // Attach the listeners
-                        document.addEventListener("mouseup", this.#mouseUpHandler)
-                        this.clickedPosition = this.locationFromEvent(e)
-                        this.blueprint.mousePosition[0] = this.clickedPosition[0]
-                        this.blueprint.mousePosition[1] = this.clickedPosition[1]
-                        this.clicked(this.clickedPosition)
+    /** @param {MouseEvent} e */
+    #mouseDownHandler = e => {
+        this.blueprint.setFocused(true)
+        switch (e.button) {
+            case this.options.clickButton:
+                // Either doesn't matter or consider the click only when clicking on the target, not descandants
+                if (!this.options.strictTarget || e.target === e.currentTarget) {
+                    if (this.options.consumeEvent) {
+                        e.stopImmediatePropagation() // Captured, don't call anyone else
                     }
-                    break
-                default:
-                    if (!this.options.exitAnyButton) {
-                        this.#mouseUpHandler(e)
-                    }
-                    break
-            }
-        }
-
-    #mouseUpHandler =
-        /** @param {MouseEvent} e */
-        e => {
-            if (!this.options.exitAnyButton || e.button == this.options.clickButton) {
-                if (this.options.consumeEvent) {
-                    e.stopImmediatePropagation() // Captured, don't call anyone else
+                    // Attach the listeners
+                    document.addEventListener("mouseup", this.#mouseUpHandler)
+                    this.clickedPosition = this.locationFromEvent(e)
+                    this.blueprint.mousePosition[0] = this.clickedPosition[0]
+                    this.blueprint.mousePosition[1] = this.clickedPosition[1]
+                    this.clicked(this.clickedPosition)
                 }
-                // Remove the handlers of "mousemove" and "mouseup"
-                document.removeEventListener("mouseup", this.#mouseUpHandler)
-                this.unclicked()
-            }
+                break
+            default:
+                if (!this.options.exitAnyButton) {
+                    this.#mouseUpHandler(e)
+                }
+                break
         }
+    }
+
+    /** @param {MouseEvent} e */
+    #mouseUpHandler = e => {
+        if (!this.options.exitAnyButton || e.button == this.options.clickButton) {
+            if (this.options.consumeEvent) {
+                e.stopImmediatePropagation() // Captured, don't call anyone else
+            }
+            // Remove the handlers of "mousemove" and "mouseup"
+            document.removeEventListener("mouseup", this.#mouseUpHandler)
+            this.unclicked()
+        }
+    }
 
     clickedPosition = [0, 0]
 

js/input/mouse/MouseCreateLink.js

@@ -80,9 +80,8 @@ export default class MouseCreateLink extends IMouseClickDrag {
         this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin")
         this.#listenedPins.forEach(pin => {
             if (pin != this.target) {
-                const clickableElement = pin.template.getClickableElement()
-                clickableElement.addEventListener("mouseenter", this.#mouseenterHandler)
-                clickableElement.addEventListener("mouseleave", this.#mouseleaveHandler)
+                pin.addEventListener("mouseenter", this.#mouseenterHandler)
+                pin.addEventListener("mouseleave", this.#mouseleaveHandler)
             }
         })
         this.link.startDragging()

js/input/mouse/MouseDbClick.js

@@ -8,23 +8,21 @@ import IPointing from "./IPointing"
  */
 export default class MouseDbClick extends IPointing {
 
-    static ignoreDbClick =
-        /** @param {Number[]} location */
-        location => { }
+    /** @param {Number[]} location */
+    static ignoreDbClick = location => { }
 
-    #mouseDbClickHandler =
-        /** @param {MouseEvent} e */
-        e => {
-            if (!this.options.strictTarget || e.target === e.currentTarget) {
-                if (this.options.consumeEvent) {
-                    e.stopImmediatePropagation() // Captured, don't call anyone else
-                }
-                this.clickedPosition = this.locationFromEvent(e)
-                this.blueprint.mousePosition[0] = this.clickedPosition[0]
-                this.blueprint.mousePosition[1] = this.clickedPosition[1]
-                this.dbclicked(this.clickedPosition)
+    /** @param {MouseEvent} e */
+    #mouseDbClickHandler = e => {
+        if (!this.options.strictTarget || e.target === e.currentTarget) {
+            if (this.options.consumeEvent) {
+                e.stopImmediatePropagation() // Captured, don't call anyone else
             }
+            this.clickedPosition = this.locationFromEvent(e)
+            this.blueprint.mousePosition[0] = this.clickedPosition[0]
+            this.blueprint.mousePosition[1] = this.clickedPosition[1]
+            this.dbclicked(this.clickedPosition)
         }
+    }
 
     #onDbClick
     get onDbClick() {

js/input/mouse/MouseTracking.js

@@ -6,41 +6,33 @@ export default class MouseTracking extends IPointing {
     /** @type {IPointing} */
     #mouseTracker = null
 
-    /** @type {(e: MouseEvent) => void} */
-    #mousemoveHandler
+    /** @param {MouseEvent} e */
+    #mousemoveHandler= e => {
+        e.preventDefault()
+        this.blueprint.mousePosition = this.locationFromEvent(e)
+    }
 
-    /** @type {(e: CustomEvent) => void} */
-    #trackingMouseStolenHandler
+    /** @param {CustomEvent} e */
+    #trackingMouseStolenHandler = e => {
+        if (!this.#mouseTracker) {
+            e.preventDefault()
+            this.#mouseTracker = e.detail.tracker
+            this.unlistenMouseMove()
+        }
+    }
 
-    /** @type {(e: CustomEvent) => void} */
-    #trackingMouseGaveBackHandler
+    /** @param {CustomEvent} e */
+    #trackingMouseGaveBackHandler = e => {
+        if (this.#mouseTracker == e.detail.tracker) {
+            e.preventDefault()
+            this.#mouseTracker = null
+            this.listenMouseMove()
+        }
+    }
 
     constructor(target, blueprint, options = {}) {
         options.listenOnFocus = true
         super(target, blueprint, options)
-
-        let self = this
-
-        this.#mousemoveHandler = e => {
-            e.preventDefault()
-            self.blueprint.mousePosition = self.locationFromEvent(e)
-        }
-
-        this.#trackingMouseStolenHandler = e => {
-            if (!self.#mouseTracker) {
-                e.preventDefault()
-                this.#mouseTracker = e.detail.tracker
-                self.unlistenMouseMove()
-            }
-        }
-
-        this.#trackingMouseGaveBackHandler = e => {
-            if (self.#mouseTracker == e.detail.tracker) {
-                e.preventDefault()
-                self.#mouseTracker = null
-                self.listenMouseMove()
-            }
-        }
     }
 
     listenMouseMove() {

js/input/mouse/Unfocus.js

@@ -2,15 +2,13 @@ import IInput from "../IInput"
 
 export default class Unfocus extends IInput {
 
-    /** @type {(e: MouseEvent) => void} */
-    #clickHandler
+    /** @param {MouseEvent} e */
+    #clickHandler = e => this.clickedSomewhere(/** @type {HTMLElement} */(e.target))
 
     constructor(target, blueprint, options = {}) {
         options.listenOnFocus = true
         super(target, blueprint, options)
 
-        let self = this
-        this.#clickHandler = e => self.clickedSomewhere(/** @type {HTMLElement} */(e.target))
         if (this.blueprint.focus) {
             document.addEventListener("click", this.#clickHandler)
         }

js/input/mouse/Zoom.js

@@ -3,12 +3,10 @@ import IMouseWheel from "./IMouseWheel"
 export default class Zoom extends IMouseWheel {
 
     #enableZoonIn = false
-
     get enableZoonIn() {
         return this.#enableZoonIn
     }
     set enableZoonIn(value) {
-        value = Boolean(value)
         if (value == this.#enableZoonIn) {
             return
         }

js/template/LinkTemplate.js

@@ -90,7 +90,11 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
                 this.blueprint,
                 undefined,
                 /** @param {[Number, Number]} location */
-                location => this.#createKnot(location)
+                location => {
+                    location[0] += Configuration.knotOffset[0]
+                    location[1] += Configuration.knotOffset[1]
+                    this.#createKnot(location)
+                }
             )
         ]
     }

js/template/pin/IInputPinTemplate.js

@@ -41,7 +41,7 @@ export default class IInputPinTemplate extends PinTemplate {
 
     /** @param {HTMLElement}  inputElement*/
     #updateWrapClass(inputElement) {
-        const width = inputElement.getBoundingClientRect().width + this.nameWidth
+        const width = this.blueprint.scaleCorrect(inputElement.getBoundingClientRect().width) + this.nameWidth
         const inputWrapped = this.element.classList.contains("ueb-pin-input-wrap")
         if (!inputWrapped && width > Configuration.pinInputWrapWidth) {
             this.element.classList.add("ueb-pin-input-wrap")
@@ -55,7 +55,9 @@ export default class IInputPinTemplate extends PinTemplate {
         super.firstUpdated(changedProperties)
         this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll("ueb-input")])
         if (/** @type {typeof IInputPinTemplate} */(this.constructor).canWrapInput) {
-            this.nameWidth = this.element.querySelector(".ueb-pin-name").getBoundingClientRect().width
+            this.nameWidth = this.blueprint.scaleCorrect(
+                this.element.querySelector(".ueb-pin-name").getBoundingClientRect().width
+            )
             this.inputContentElements.forEach(inputElement => this.#updateWrapClass(inputElement))
         }
     }

js/template/pin/PinTemplate.js

@@ -29,6 +29,12 @@ export default class PinTemplate extends ITemplate {
         return this.#iconElement
     }
 
+    /** @type {HTMLElement} */
+    #wrapperElement
+    get wrapperElement() {
+        return this.#wrapperElement
+    }
+
     isNameRendered = true
 
     setup() {
@@ -47,8 +53,9 @@ export default class PinTemplate extends ITemplate {
     /** @returns {IInput[]} */
     createInputObjects() {
         return [
-            new MouseCreateLink(this.getClickableElement(), this.blueprint, {
+            new MouseCreateLink(this.element, this.blueprint, {
                 moveEverywhere: true,
+                draggableElement: this.#wrapperElement,
             })
         ]
     }
@@ -106,6 +113,7 @@ export default class PinTemplate extends ITemplate {
         super.firstUpdated(changedProperties)
         this.element.style.setProperty("--ueb-pin-color-rgb", this.element.entity.pinColor().cssText)
         this.#iconElement = this.element.querySelector(".ueb-pin-icon svg") ?? this.element
+        this.#wrapperElement = this.element.querySelector(".ueb-pin-wrapper")
     }
 
     getLinkLocation() {
@@ -116,6 +124,6 @@ export default class PinTemplate extends ITemplate {
     }
 
     getClickableElement() {
-        return this.element
+        return this.#wrapperElement ?? this.element
     }
 }