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

import { LitElement, html, css } from 'lit';

class TpLcLine extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          padding: 0;
          margin: 0;
          height: 4px;
          background: blue;
          position: absolute;
          line-height: 1px;
          border-radius: 10px;
          z-index: 99;
        }
      `
    ];
  }

  static get properties() {
    return {
      thickness: { type: Number },
    };
  }

  constructor() {
    super();
    this.thickness = 4;
  }

  coords(x1, y1, x2, y2) {
    // distance
    const length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
    // center
    const cx = ((x1 + x2) / 2) - (length / 2);
    const cy = ((y1 + y2) / 2) - (this.thickness / 2);
    // angle
    const angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    // make hr
    this.style.left = `${cx}px`
    this.style.top = `${cy}px`;
    this.style.width = `${length}px`;
    this.style.transform = `rotate(${angle}deg)`;
  }
}

window.customElements.define('tp-lc-line', TpLcLine);