56 lines
1.2 KiB
JavaScript
56 lines
1.2 KiB
JavaScript
|
/**
|
||
|
|
@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);
|