Create knot on link double click

js/template/BlueprintTemplate.js

@@ -9,7 +9,6 @@ import MouseScrollGraph from "../input/mouse/MouseScrollGraph"
 import MouseTracking from "../input/mouse/MouseTracking"
 import Paste from "../input/common/Paste"
 import Select from "../input/mouse/Select"
-import SelectorElement from "../element/SelectorElement"
 import Unfocus from "../input/mouse/Unfocus"
 import Utility from "../Utility"
 import Zoom from "../input/mouse/Zoom"
@@ -17,6 +16,7 @@ import Zoom from "../input/mouse/Zoom"
 /**
  * @typedef {import("../Blueprint").default} Blueprint
  * @typedef {import("../element/PinElement").default} PinElement
+ * @typedef {import("../element/SelectorElement").default} SelectorElement
  * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
  */
 
@@ -78,6 +78,7 @@ export default class BlueprintTemplate extends ITemplate {
                     <div class="ueb-grid-content">
                         <div data-links></div>
                         <div data-nodes></div>
+                        <ueb-selector></ueb-selector>
                     </div>
                 </div>
             </div>
@@ -90,8 +91,7 @@ export default class BlueprintTemplate extends ITemplate {
         this.element.headerElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-header'))
         this.element.overlayElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-overlay'))
         this.element.viewportElement = /** @type {HTMLElement} */(this.element.querySelector('.ueb-viewport-body'))
-        this.element.selectorElement = new SelectorElement()
-        this.element.querySelector(".ueb-grid-content")?.append(this.element.selectorElement)
+        this.element.selectorElement = /** @type {SelectorElement} */(this.element.querySelector('ueb-selector'))
         this.element.gridElement = /** @type {HTMLElement} */(this.element.viewportElement.querySelector(".ueb-grid"))
         this.element.linksContainerElement = /** @type {HTMLElement} */(this.element.querySelector("[data-links]"))
         this.element.linksContainerElement.append(...this.element.getLinks())

js/template/KnotNodeTemplate.js

@@ -1,9 +1,12 @@
 import { html } from "lit"
+import ElementFactory from "../element/ElementFactory"
 import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
 import KnotPinTemplate from "./KnotPinTemplate"
-import PinElement from "../element/PinElement"
 
-/** @typedef {import("../element/NodeElement").default} NodeElement */
+/**
+ * @typedef {import("../element/NodeElement").default} NodeElement
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
 
 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
@@ -46,9 +49,18 @@ export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
         const entities = this.element.getPinEntities().filter(v => !v.isHidden())
         const inputEntity = entities[entities[0].isInput() ? 0 : 1]
         const outputEntity = entities[entities[0].isOutput() ? 0 : 1]
+        const pinElementConstructor = ElementFactory.getConstructor("ueb-pin")
         return [
-            this.#inputPin = new PinElement(inputEntity, new KnotPinTemplate(), this.element),
-            this.#outputPin = new PinElement(outputEntity, new KnotPinTemplate(), this.element),
+            this.#inputPin = /** @type {PinElement} */(new pinElementConstructor(
+                inputEntity,
+                new KnotPinTemplate(),
+                this.element
+            )),
+            this.#outputPin = /** @type {PinElement} */(new pinElementConstructor(
+                outputEntity,
+                new KnotPinTemplate(),
+                this.element
+            )),
         ]
     }
 }

js/template/LinearColorPinTemplate.js

@@ -1,11 +1,12 @@
 import { html } from "lit"
 import ColorPickerWindowTemplate from "./ColorPickerWindowTemplate"
 import Configuration from "../Configuration"
+import ElementFactory from "../element/ElementFactory"
 import PinTemplate from "./PinTemplate"
-import WindowElement from "../element/WindowElement"
 
 /**
  * @typedef {import("../element/PinElement").default} PinElement
+ * @typedef {import("../element/WindowElement").default} WindowElement
  * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity
  */
 
@@ -22,15 +23,17 @@ export default class LinearColorPinTemplate extends PinTemplate {
         /** @param {MouseEvent} e */
         e => {
             //e.preventDefault()
-            this.#window = new WindowElement({
-                type: ColorPickerWindowTemplate,
-                windowOptions: {
-                    // The created window will use the following functions to get and set the color
-                    getPinColor: () => this.element.defaultValue,
-                    /** @param {LinearColorEntity} color */
-                    setPinColor: color => this.element.setDefaultValue(color),
-                },
-            })
+            this.#window = /** @type {WindowElement} */ (
+                new (ElementFactory.getConstructor("ueb-window"))({
+                    type: ColorPickerWindowTemplate,
+                    windowOptions: {
+                        // The created window will use the following functions to get and set the color
+                        getPinColor: () => this.element.defaultValue,
+                        /** @param {LinearColorEntity} color */
+                        setPinColor: color => this.element.setDefaultValue(color),
+                    },
+                })
+            )
             this.element.blueprint.append(this.#window)
             const windowApplyHandler = () => {
                 this.element.setDefaultValue(

js/template/LinkTemplate.js

@@ -1,10 +1,14 @@
 import { html, nothing } from "lit"
 import Configuration from "../Configuration"
-import Utility from "../Utility"
+import ElementFactory from "../element/ElementFactory"
 import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
+import KnotEntity from "../entity/objects/KnotEntity"
+import MouseDbClick from "../input/mouse/MouseDbClick"
+import Utility from "../Utility"
 
 /**
  * @typedef {import("../element/LinkElement").default} LinkElement
+ * @typedef {import("../element/NodeElement").default} NodeElement
  * @typedef {import("../template/KnotNodeTemplate").default} KnotNodeTemplate
  */
 
@@ -13,7 +17,7 @@ import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
 export default class LinkTemplate extends IFromToPositionedTemplate {
 
     /**
-     * Returns a function performing the inverse multiplication y = a / x + q. The value of a and q are calculated using
+     * Returns a function providing the inverse multiplication y = a / x + q. The value of a and q are calculated using
      * the derivative of that function y' = -a / x^2 at the point p (x = p[0] and y = p[1]). This means
      * y'(p[0]) = m => -a / p[0]^2 = m => a = -m * p[0]^2. Now, in order to determine q we can use the starting
      * function: p[1] = a / p[0] + q => q = p[1] - a / p[0]
@@ -28,11 +32,9 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
     }
 
     /**
-     * Returns a function performing a clamped line passing through two points. It is clamped after and before the
-     * points. It is easier explained with an example.
-     *            b ______
-     *             /
-     *            /
+     * Returns a function providing a clamped line passing through two points. It is clamped after and before the
+     * points. It is easier explained with the following ascii draw.
+     *          b ______
      *           /
      *          /
      *         /
@@ -59,6 +61,31 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
 
     static c2Clamped = LinkTemplate.clampedLine([0, 100], [200, 30])
 
+    #createKnot =
+        /** @param {Number[]} location */
+        location => {
+            const knot = /** @type {NodeElement} */(new (ElementFactory.getConstructor("ueb-node"))(new KnotEntity()))
+            knot.setLocation(this.element.blueprint.snapToGrid(location))
+            const link = new (ElementFactory.getConstructor("ueb-link"))(
+                /** @type {KnotNodeTemplate} */(knot.template).outputPin,
+                this.element.destinationPin
+            )
+            this.element.destinationPin = /** @type {KnotNodeTemplate} */(knot.template).inputPin
+            this.element.blueprint.addGraphElement(knot, link)
+        }
+
+    createInputObjects() {
+        return [
+            ...super.createInputObjects(),
+            new MouseDbClick(
+                this.element.querySelector(".ueb-link-area"),
+                this.element.blueprint,
+                undefined,
+                (location) => this.#createKnot(location)
+            )
+        ]
+    }
+
     /**
      * @param {Map} changedProperties
      */
@@ -112,9 +139,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
         this.element.svgPathD = Configuration.linkRightSVGPath(this.element.startPercentage, c1, c2)
     }
 
-    /**
-     * @param {Map} changedProperties
-     */
+    /** @param {Map} changedProperties */
     update(changedProperties) {
         super.update(changedProperties)
         if (changedProperties.has("originatesFromInput")) {
@@ -130,19 +155,19 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
     }
 
     render() {
-        const uniqueId = "ueb-id-" + Math.floor(Math.random() * 1E12)
+        const uniqueId = `ueb-id-${Math.floor(Math.random() * 1E12)}`
         return html`
             <svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                <g>
+                <g class="ueb-link-area">
                     <path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" d="${this.element.svgPathD}" />
-                    <use href="#${uniqueId}" pointer-events="stroke" stroke-width="15" />
+                    <use href="#${uniqueId}" pointer-events="stroke" stroke-width="20" />
                 </g>
             </svg>
             ${this.element.linkMessageIcon != "" || this.element.linkMessageText != "" ? html`
-            <div class="ueb-link-message">
-                <span class="${this.element.linkMessageIcon}"></span>
-                <span class="ueb-link-message-text">${this.element.linkMessageText}</span>
-            </div>
+                <div class="ueb-link-message">
+                    <span class="${this.element.linkMessageIcon}"></span>
+                    <span class="ueb-link-message-text">${this.element.linkMessageText}</span>
+                </div>
             ` : nothing}
         `
     }

js/template/NodeTemplate.js

@@ -1,8 +1,11 @@
 import { html, nothing } from "lit"
+import ElementFactory from "../element/ElementFactory"
 import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
-import PinElement from "../element/PinElement"
 
-/** @typedef {import("../element/NodeElement").default} NodeElement */
+/**
+ * @typedef {import("../element/NodeElement").default} NodeElement
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
 
 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class NodeTemplate extends ISelectableDraggableTemplate {
@@ -80,6 +83,8 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
     createPinElements() {
         return this.element.getPinEntities()
             .filter(v => !v.isHidden())
-            .map(v => new PinElement(v, undefined, this.element))
+            .map(v => /** @type {PinElement} */(
+                new (ElementFactory.getConstructor("ueb-pin"))(v, undefined, this.element)
+            ))
     }
 }

js/template/PinTemplate.js

@@ -25,7 +25,7 @@ export default class PinTemplate extends ITemplate {
     /** @param {PinElement<T>} element */
     constructed(element) {
         super.constructed(element)
-        this.element.dataset.id = this.element.GetPinIdValue()
+        this.element.dataset.id = this.element.getPinId().toString()
     }
 
     connectedCallback() {