tp-logic-canvas/tp-logic-canvas.js

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

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

class TpLogicCanvas extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          position: relative;
          overflow: auto;
        }

        :host([isDragging]) {
          user-select: none;
        }

        .block {
          background-color: violet;
        }

        .block2 {
          background-color: orange;
        }
      `
    ];
  }

  render() {
    const { } = this;

    return html`
      <tp-lc-line></tp-lc-line>
      <slot></slot>
    `;
  }

  static get properties() {
    return {
      blocks: { type: Array },
      isDragging: { type: Boolean, reflect: true },
      connections: { type: Array },
    };
  }

  constructor() {
    super();
    this.onDragStart = this.onDragStart.bind(this);
    this.onMove = this.onMove.bind(this);
  }

  firstUpdated() {
    this.addEventListener('start-drag', this.onDragStart);
    this.addEventListener('mousemove', this.onMove);
  }

  shouldUpdate(changes) {
    if (changes.has('connections')) {

    }

    return true;
  }

  onDragStart(e) {
    this.isDragging = true;

    window.addEventListener('mouseup', () => {
      this.isDragging = false;
    }, { once: true });

    this.startCoords = this.getOffset(e.detail.target);
  }

  onMove(e) {
    if (!this.isDragging) return;

    this.shadowRoot.querySelector('tp-lc-line').coords(this.startCoords.left, this.startCoords.top, e.pageX, e.pageY);
  }

  getOffset(el) {
    var rect = el.getBoundingClientRect();

    return {
      left: (rect.left - 5 - (el.offsetWidth / 2)) + window.pageXOffset,
      top: (rect.top - 5 - (el.offsetHeight / 2)) + window.pageYOffset,
    };
  }
}

window.customElements.define('tp-logic-canvas', TpLogicCanvas);