Fixes and improvements

tp-flow-node.js

@@ -4,6 +4,7 @@ Copyright (c) 2024 trading_peter
 This program is available under Apache License Version 2.0
 */
 
+import './tp-flow-node-port.js';
 import { LitElement, html, css } from 'lit';
 
 // tp-flow-node.js
@@ -46,24 +47,14 @@ export class TpFlowNode extends LitElement {
           align-items: flex-end;
         }
 
-        .port {
-          width: 12px;
-          height: 12px;
-          background: #666;
-          border-radius: 50%;
-          cursor: pointer;
-        }
-
-        .port:hover {
-          background: #888;
+        header {
+          display: flex;
+          align-items: center;
+          column-gap: 10px;
+          padding: 2px 5px;
         }
 
         .delete-btn {
-          position: absolute;
-          top: 5px;
-          right: 5px;
-          width: 16px;
-          height: 16px;
           cursor: pointer;
           opacity: 0.7;
           transition: opacity 0.2s;
@@ -78,16 +69,17 @@ export class TpFlowNode extends LitElement {
 
   render() {
     return html`
+      ${this.renderNodeHeader()}
       <div class="node-body">
-        <div class="delete-btn" @click="${this._handleDelete}">✕</div>
         <div class="input-ports">
           ${this.inputs.map((input, idx) => html`
-            <div class="port" 
-                 data-port-type="input"
-                 data-port-id="${idx}"
-                 data-port-name="${input.name}"
-                 @mousedown="${this._handlePortClick}">
-            </div>
+            <tp-flow-node-port class="port" exportparts="connectionPoint" 
+              portType="input"
+              .portId=${idx}
+              .portName=${input.name}
+              .tagContent=${input.tagContent}
+              @mousedown="${this._handlePortClick}">
+            </tp-flow-node-port>
           `)}
         </div>
 
@@ -97,18 +89,28 @@ export class TpFlowNode extends LitElement {
 
         <div class="output-ports">
           ${this.outputs.map((output, idx) => html`
-            <div class="port"
-                 data-port-type="output"
-                 data-port-id="${idx}"
-                 data-port-name="${output.name}"
-                 @mousedown="${this._handlePortClick}">
-            </div>
+            <tp-flow-node-port class="port" exportparts="connectionPoint"
+              portType="output"
+              .portId=${idx}
+              .portName=${output.name}
+              .tagContent=${output.tagContent}
+              @mousedown="${this._handlePortClick}">
+            </tp-flow-node-port>
           `)}
         </div>
       </div>
     `;
   }
 
+  renderNodeHeader() {
+    return html`
+      <header drag-node>
+        A Node
+        <div class="delete-btn" @click="${this._handleDelete}">✕</div>
+      </header>
+    `;
+  }
+
   renderNodeContent() {
     console.warn('Your node should override the renderNodeContent method.');
     return null;
@@ -133,19 +135,17 @@ export class TpFlowNode extends LitElement {
     this.data = {};
   }
 
+  updated(changes) {
+    super.updated(changes);
+
+    this.dispatchEvent(new CustomEvent('update-layout', { detail: this, bubbles: true, composed: true }));
+  }
+
   _handlePortClick(e) {
     e.stopPropagation();  // Prevents the event from getting caught by the panning action.
 
-    const portEl = e.target;
-    const detail = {
-      nodeId: this.id,
-      portType: portEl.dataset.portType,
-      portId: portEl.dataset.portId,
-      portName: portEl.dataset.portName
-    };
-    
     this.dispatchEvent(new CustomEvent('port-click', {
-      detail,
+      detail: { node: this, port: e.target },
       bubbles: true,
       composed: true
     }));