wip

tp-flow-node.js

@@ -20,13 +20,6 @@ export class TpFlowNode extends LitElement {
           min-width: 150px;
         }
 
-        .node-header {
-          padding: 8px;
-          background: #3b3b3b;
-          border-bottom: 1px solid #4b4b4b;
-          border-radius: 4px 4px 0 0;
-        }
-
         .node-body {
           display: grid;
           grid-template-columns: 20px 1fr 20px;
@@ -64,16 +57,29 @@ export class TpFlowNode extends LitElement {
         .port:hover {
           background: #888;
         }
+
+        .delete-btn {
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          width: 16px;
+          height: 16px;
+          cursor: pointer;
+          opacity: 0.7;
+          transition: opacity 0.2s;
+        }
+
+        .delete-btn:hover {
+          opacity: 1;
+        }
       `
     ];
   }
 
   render() {
     return html`
-      <div class="node-header">
-        <slot name="title">${this.flowNodeType}</slot>
-      </div>
       <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" 
@@ -85,7 +91,7 @@ export class TpFlowNode extends LitElement {
           `)}
         </div>
 
-        <div class="node-content">
+        <div class="node-content" part="node-content">
           ${this.renderNodeContent()}
         </div>
 
@@ -147,22 +153,38 @@ export class TpFlowNode extends LitElement {
     }));
   }
 
-  // Method to export node data
+  _handleDelete(e) {
+    e.stopPropagation(); // Prevent event from triggering other handlers
+    this.dispatchEvent(new CustomEvent('node-delete-requested', {
+      detail: { nodeId: this.id },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   exportData() {
+    // Get current transform
+    const transform = window.getComputedStyle(this).transform;
+    const matrix = new DOMMatrix(transform);
+    
     return {
       id: this.id,
       type: this.flowNodeType,
-      x: this.x,
-      y: this.y,
+      position: {
+        x: matrix.m41,
+        y: matrix.m42
+      },
       data: this.data
     };
   }
-
-  // Method to import node data
+  
   importData(data) {
     this.id = data.id;
-    this.x = data.x;
-    this.y = data.y;
     this.data = data.data;
+    
+    // Apply position
+    if (data.position) {
+      this.style.transform = `translate(${data.position.x}px, ${data.position.y}px)`;
+    }
   }
 }