tp-flow-nodes/tp-flow-nodes.js

/**
@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);