Refactoring

js/input/IContext.js

@@ -3,9 +3,13 @@
 /**
  * @typedef {import("../Blueprint").default} Blueprint
  */
+
+/**
+ * @template {HTMLElement} T
+ */
 export default class IContext {
 
-    /** @type {HTMLElement} */
+    /** @type {T} */
     #target
     get target() {
         return this.#target
@@ -21,7 +25,7 @@ export default class IContext {
     options
 
     /**
-     * @param {HTMLElement} target
+     * @param {T} target
      * @param {Blueprint} blueprint
      * @param {Object} options
      */
@@ -30,7 +34,7 @@ export default class IContext {
         this.#blueprint = blueprint
         this.options = options
         this.options.listenOnFocus = this.options?.listenOnFocus ?? false
-        this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? false
+        this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? true
         let self = this
         this.listenHandler = _ => self.listenEvents()
         this.unlistenHandler = _ => self.unlistenEvents()

js/input/common/Copy.js

@@ -10,7 +10,6 @@ export default class Copy extends IContext {
 
     constructor(target, blueprint, options = {}) {
         options.listenOnFocus = true
-        options.unlistenOnTextEdit = true
         super(target, blueprint, options)
         this.serializer = new ObjectSerializer()
         let self = this

js/input/common/Paste.js

@@ -11,7 +11,6 @@ export default class Paste extends IContext {
 
     constructor(target, blueprint, options = {}) {
         options.listenOnFocus = true
-        options.unlistenOnTextEdit = true
         super(target, blueprint, options)
         this.serializer = new ObjectSerializer()
         let self = this

js/input/mouse/IMouseClickDrag.js

@@ -2,8 +2,14 @@
 
 import IPointing from "./IPointing"
 
+/**
+ * @typedef {import("../../Blueprint").default} Blueprint
+ */
+
 /**
  * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
+ * @template {HTMLElement} T
+ * @extends {IPointing<T>}
  */
 export default class IMouseClickDrag extends IPointing {
 

js/input/mouse/IPointing.js

@@ -3,6 +3,14 @@
 import IContext from "../IContext"
 import Utility from "../../Utility"
 
+/**
+ * @typedef {import("../../Blueprint").default} Blueprint
+ */
+
+/**
+ * @template {HTMLElement} T
+ * @extends {IContext<T>}
+ */
 export default class IPointing extends IContext {
 
     constructor(target, blueprint, options) {
@@ -17,6 +25,8 @@ export default class IPointing extends IContext {
         return this.blueprint.compensateTranslation(
             Utility.convertLocation(
                 [mouseEvent.clientX, mouseEvent.clientY],
-                this.movementSpace))
+                this.movementSpace
+            )
+        )
     }
 }

js/input/mouse/MouseCreateLink.js

@@ -5,9 +5,12 @@ import LinkElement from "../../element/LinkElement"
 import LinkMessageElement from "../../element/LinkMessageElement"
 
 /**
- * @typedef {import("../../element/LinkElement").default} LinkElement
  * @typedef {import("../../element/PinElement").default} PinElement
  */
+
+/**
+ * @extends IMouseClickDrag<PinElement>
+ */
 export default class MouseCreateLink extends IMouseClickDrag {
 
     /** @type {NodeListOf<PinElement>} */
@@ -29,14 +32,12 @@ export default class MouseCreateLink extends IMouseClickDrag {
 
     constructor(target, blueprint, options) {
         super(target, blueprint, options)
-        /** @type {PinElement} */
-        this.target
 
         let self = this
         this.#mouseenterHandler = e => {
             if (!self.enteredPin) {
                 self.linkValid = false
-                self.enteredPin = e.target
+                self.enteredPin = /** @type {PinElement} */ (e.target)
                 const a = self.enteredPin, b = self.target
                 if (a.getNodeElement() == b.getNodeElement()) {
                     this.setLinkMessage(LinkMessageElement.sameNode())
@@ -66,7 +67,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
         this.link = new LinkElement(this.target, null)
         this.blueprint.nodesContainerElement.prepend(this.link)
         this.setLinkMessage(LinkMessageElement.placeNode())
-        this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName)
+        this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin")
         this.#listenedPins.forEach(pin => {
             if (pin != this.target) {
                 pin.getClickableElement().addEventListener("mouseenter", this.#mouseenterHandler)

js/input/mouse/MouseMoveNodes.js

@@ -4,21 +4,19 @@ import IMouseClickDrag from "./IMouseClickDrag"
 import Utility from "../../Utility"
 
 /**
+ * @typedef {import("../../Blueprint").default} Blueprint
  * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
  */
+
+/**
+ * @extends {IMouseClickDrag<ISelectableDraggableElement>}
+ */
 export default class MouseMoveNodes extends IMouseClickDrag {
 
-    /**
-     * @param {ISelectableDraggableElement} target
-     * @param {*} blueprint
-     * @param {*} options
-     */
     constructor(target, blueprint, options) {
         super(target, blueprint, options)
         this.stepSize = parseInt(options?.stepSize ?? this.blueprint.gridSize)
         this.mouseLocation = [0, 0]
-        /** @type {ISelectableDraggableElement} */
-        this.target
     }
 
     startDrag() {

js/template/PinTemplate.js

@@ -24,20 +24,20 @@ export default class PinTemplate extends ITemplate {
     render(pin) {
         if (pin.isInput()) {
             return html`
-                <span class="ueb-pin-icon">
+                <div class="ueb-pin-icon">
                     ${this.renderIcon(pin)}
-                </span>
-                <span class="ueb-pin-content">
+                </div>
+                <div class="ueb-pin-content">
                     <span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
                     ${this.renderInput(pin)}
-                </span>
+                </div>
             `
         } else {
             return html`
-                <span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
-                <span class="ueb-pin-icon">
+                <div class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</div>
+                <div class="ueb-pin-icon">
                     ${this.renderIcon(pin)}
-                </span>
+                </div>
             `
         }
     }
@@ -71,7 +71,7 @@ export default class PinTemplate extends ITemplate {
             pin.dataset.advancedView = "true"
         }
         pin.clickableElement = pin
-        window.customElements.whenDefined("ueb-node").then(pin.nodeElement = pin.closest("ueb-node"))
+        window.customElements.whenDefined("ueb-node").then(_ => pin.nodeElement = pin.closest("ueb-node"))
         pin.getLinks().forEach(pinReference => {
             const targetPin = pin.blueprint.getPin(pinReference)
             if (targetPin) {

js/template/StringPinTemplate.js

@@ -16,14 +16,16 @@ export default class StringPinTemplate extends PinTemplate {
      * @param {PinElement} pin
      */
     renderInput(pin) {
-        const stopEventPropagation = "e => stopPropagation()"
         return html`
-            <span class="ueb-pin-input">
-                <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
+            <div class="ueb-pin-input">
+                <div class="ueb-pin-input-content" role="textbox" contenteditable="true"
                     onfocus="this.closest('ueb-blueprint')?.dispatchEditTextEvent(true)"
-                    onfocusout="this.closest('ueb-blueprint')?.dispatchEditTextEvent(false)"
-                ></span>
-            </span>
+                    onfocusout="
+                        this.closest('ueb-blueprint')?.dispatchEditTextEvent(false)
+                        document.getSelection().removeAllRanges()
+                    "
+                ></div>
+            </div>
         `
     }
 }