tp-logic-canvas/tp-lc-block.js

/**
@license
Copyright (c) 2022 trading_peter
This program is available under Apache License Version 2.0
*/

import './tp-lc-in.js';
import './tp-lc-out.js';
import { LitElement, html, css } from 'lit';

export class TpLcBlock extends LitElement {
  static get blockStyles() {
    return [
      css`
        :host {
          display: block;
          position: absolute;
          padding: 10px;
        }

        .wrap {
          display: flex;
        }

        .inputs, .outputs {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }

        .inputs {
          margin-right: 20px;
        }

        .outputs {
          margin-left: 20px;
        }

        tp-lc-in + tp-lc-in,
        tp-lc-out + tp-lc-out {
          margin-top: 10px;
        }
      `
    ];
  }

  render() {
    const { } = this;
    const inputs = this.inputs || [];
    const outputs = this.outputs || [];

    return html`
      <div class="wrap">
        ${inputs.length > 0 ? html`
          <div class="inputs">
            ${inputs.map(input => html`
              <tp-lc-in .name=${input.name}></tp-lc-in>
              `)}
          </div>
          ` : null}

          <div class="inner">
            ${this.renderContent()}
          </div>

          <div class="outputs">
            ${outputs.length > 0 ? html`
              ${outputs.map(input => html`
              <tp-lc-out .name=${input.name}></tp-lc-out>
            `)}
          </div>
        ` : null}
      </div>
    `;
  }

  static get properties() {
    return {
      left: { type: Number },
      top: { type: Number },
      inputs: { type: Array },
      output: { type: Array },
    };
  }

  constructor() {
    super();
    this.inputs = [];
    this.outputs = [];
  }

  shouldUpdate(changes) {
    super.shouldUpdate(changes);

    if (changes.has('left') || changes.has('top')) {
      this.style.left = `${this.left || 0}px`;
      this.style.top = `${this.top || 0}px`;
    }

    return true;
  }
}

window.customElements.define('tp-lc-block', TpLcBlock);