tp-elements/tp-flow-nodes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
trading_peter 2024-12-20 10:57:37 +01:00
parent 5e449e23b8
commit 48fd8fef73
2 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tp-flow-node.js
View File

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

39
tp-flow-nodes.js
View File

@ -94,7 +94,7 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
// Create all nodes first // Create all nodes first
const nodes = flowData.nodes.map(nodeData => { const nodes = flowData.nodes.map(nodeData => {
const node = this._createNode(nodeData.type); const node = this.createNode(nodeData.type);
node.importData(nodeData); node.importData(nodeData);
return node; 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 * @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 * 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 {Object} initialData Initial data for the node
* @param {number} x Initial x position * @param {number} x Initial x position
* @param {number} y Initial y position * @param {number} y Initial y position
* @returns {TpFlowNode} The created node instance * @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('part', 'node');
node.setAttribute('exportparts', 'node-content'); node.setAttribute('exportparts', 'node-content');
node.importData({ node.importData({
@ -161,7 +176,7 @@ export class TpFlowNodes extends zoom(panning(connections(LitElement))) {
this._dispatchChangeEvent({ this._dispatchChangeEvent({
type: 'node-added', type: 'node-added',
data: { nodeId: node.id, nodeType: type } data: { nodeId: node.id, nodeType: node.tagName.toLowerCase() }
}); });
return node; return node;