wip

tp-flow-nodes.js

@@ -0,0 +1,82 @@
+/**
+@license
+Copyright (c) 2024 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+import { connections, connectionStyles } from './connections.js';
+import { panning } from './panning.js';
+
+class TpFlowNodes extends panning(connections(LitElement)) {
+  static get styles() {
+    return [
+      connectionStyles,
+      css`
+        :host {
+          display: block;
+          overflow: hidden;
+          position: relative;
+        }
+
+        .canvas {
+          width: 100%;
+          height: 100%;
+          user-select: none;
+          position: relative;
+          overflow: hidden;
+          transform: translate(0px, 0px);
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="canvas">
+        ${this.nodes.map(node => html`${node}`)}
+        ${this._renderConnections()}
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      nodes: { type: Array },
+      connections: { type: Array }
+    };
+  }
+
+  constructor() {
+    super();
+    this.nodes = [];
+    this.previewConnection = null;
+  }
+
+  // Export flow chart data
+  exportFlow() {
+    return {
+      nodes: this.nodes.map(node => node.exportData()),
+      connections: this.connections
+    };
+  }
+
+  // Import flow chart data
+  importFlow(flowData) {
+    // Clear existing
+    this.nodes = [];
+    this.connections = [];
+    
+    // Create nodes
+    flowData.nodes.forEach(nodeData => {
+      const node = this._createNode(nodeData.type);
+      node.importData(nodeData);
+      this.nodes.push(node);
+    });
+
+    // Restore connections
+    this.connections = flowData.connections;
+  }
+}
+
+window.customElements.define('tp-flow-nodes', TpFlowNodes);