diff --git a/tp-flow-node.js b/tp-flow-node.js index 45a449c..c7ac09c 100644 --- a/tp-flow-node.js +++ b/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 diff --git a/tp-flow-nodes.js b/tp-flow-nodes.js index 2298c68..eeff9e9 100644 --- a/tp-flow-nodes.js +++ b/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 - * @param {string} type Node type identifier + * Register a node class * @param {typeof TpFlowNode} nodeClass Node class to register */ - static registerNode(type, nodeClass) { - TpFlowNodes.nodeTypes.set(type, nodeClass); + static registerNode(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) { - const nodeClass = TpFlowNodes.nodeTypes.get(type); - if (!nodeClass) { - throw new Error(`Unknown node type: ${type}`); + createNode(NodeClassOrTagName, initialData = {}, x = 0, y = 0) { + let NodeClass; + + 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({ @@ -156,14 +171,14 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) { position: { x, y }, data: initialData }); - + this.nodes = [...this.nodes, node]; - + this._dispatchChangeEvent({ type: 'node-added', - data: { nodeId: node.id, nodeType: type } + data: { nodeId: node.id, nodeType: node.tagName.toLowerCase() } }); - + return node; }