KnotNode introduced

js/template/KnotNodeTemplate.js

@@ -0,0 +1,31 @@
+import { html } from "lit"
+import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
+import PinElement from "../element/PinElement"
+
+/** @typedef {import("../element/NodeElement").default} NodeElement */
+
+/** @extends {ISelectableDraggableTemplate<NodeElement>} */
+export default class KnotNodeTemplate extends ISelectableDraggableTemplate {
+
+    render() {
+        return html`
+            <div class="ueb-node-border"></div>
+        `
+    }
+
+    /** @param {Map} changedProperties */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties)
+        const content = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-border"))
+        Promise.all(this.element.getPinElements().map(n => n.updateComplete)).then(() => this.element.dispatchReflowEvent())
+        this.element.getPinElements().forEach(p => content.appendChild(p))
+    }
+
+    /**
+     * @param {NodeElement} node
+     * @returns {NodeListOf<PinElement>}
+     */
+    getPinElements(node) {
+        return node.querySelectorAll("ueb-pin")
+    }
+}