wip

tp-flow-node.js

@@ -116,7 +116,6 @@ export class TpFlowNode extends LitElement {
 
   static get properties() {
     return {
-      flowNodeType: { type: String },
       inputs: { type: Array },
       outputs: { type: Array },
       x: { type: Number },
@@ -127,7 +126,6 @@ export class TpFlowNode extends LitElement {
 
   constructor() {
     super();
-    this.flowNodeType = 'BaseNode';
     this.inputs = [];
     this.outputs = [];
     this.x = 0;
@@ -169,7 +167,7 @@ export class TpFlowNode extends LitElement {
     
     return {
       id: this.id,
-      type: this.flowNodeType,
+      type: super.tagName.toLowerCase(),
       position: {
         x: matrix.m41,
         y: matrix.m42

tp-flow-nodes.js

@@ -94,7 +94,7 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
     
     // Create all nodes first
     const nodes = flowData.nodes.map(nodeData => {
-      const node = this._createNode(nodeData.type);
+      const node = this.createNode(nodeData.type);
       node.importData(nodeData);
       return node;
     });
@@ -126,29 +126,44 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
   }
 
   /**
-   * Register a node type
+   * Register a node class
-   * @param {string} type Node type identifier
    * @param {typeof TpFlowNode} nodeClass Node class to register
    */
-  static registerNode(type, nodeClass) {
+  static registerNode(nodeClass) {
-    TpFlowNodes.nodeTypes.set(type, nodeClass);
+    // Get the registered tag name for this class
+    const tagName = (new nodeClass()).tagName?.toLowerCase();
+    if (!tagName) {
+      throw new Error(`Node class ${nodeClass.name} must be registered as a custom element first`);
+    }
+
+    TpFlowNodes.nodeTypes.set(nodeClass, tagName);
+    TpFlowNodes.nodeTypes.set(tagName, nodeClass);
   }
 
   /**
    * Create a new node instance
-   * @param {string} type Node type identifier
+   * @param {typeof TpFlowNode|string} NodeClassOrTagName Node class or tag name to instantiate
    * @param {Object} initialData Initial data for the node
    * @param {number} x Initial x position
    * @param {number} y Initial y position
    * @returns {TpFlowNode} The created node instance
    */
-  createNode(type, initialData = {}, x = 0, y = 0) {
+  createNode(NodeClassOrTagName, initialData = {}, x = 0, y = 0) {
-    const nodeClass = TpFlowNodes.nodeTypes.get(type);
+    let NodeClass;
-    if (!nodeClass) {
+    
-      throw new Error(`Unknown node type: ${type}`);
+    if (typeof NodeClassOrTagName === 'string') {
+      NodeClass = TpFlowNodes.nodeTypes.get(NodeClassOrTagName.toLowerCase());
+      if (!NodeClass) {
+        throw new Error(`Unknown node type: ${NodeClassOrTagName}`);
+      }
+    } else {
+      NodeClass = NodeClassOrTagName;
+      if (!TpFlowNodes.nodeTypes.has(NodeClass)) {
+        throw new Error(`Node class not registered: ${NodeClass.name}`);
+      }
     }
   
-    const node = new nodeClass();
+    const node = new NodeClass();
     node.setAttribute('part', 'node');
     node.setAttribute('exportparts', 'node-content');
     node.importData({
@@ -161,7 +176,7 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
   
     this._dispatchChangeEvent({ 
       type: 'node-added',
-      data: { nodeId: node.id, nodeType: type }
+      data: { nodeId: node.id, nodeType: node.tagName.toLowerCase() }
     });
   
     return node;