1import {html, LitElement} from 'lit';
2import {customElement, property} from 'lit/decorators.js';
3
4import {simulationState} from './device-observer.js';
5
6@customElement('ns-device-dragzone')
7export class DeviceDragZone extends LitElement {
8  static dragged: EventTarget|null;
9
10  @property({type: String, attribute: 'action'}) action = 'move';
11
12  constructor() {
13    super();
14    this.addEventListener('dragstart', this.handleDragStart);
15    this.addEventListener('dragend', this.handleDragEnd);
16    this.addEventListener('click', this.handleSelect);
17  }
18
19  connectedCallback() {
20    this.draggable = true;
21  }
22
23  handleDragStart(ev: DragEvent) {
24    this.style.opacity = '0.4';
25    if (ev.dataTransfer && ev.target) {
26      DeviceDragZone.dragged = ev.target;
27      // eslint-disable-next-line no-param-reassign
28      ev.dataTransfer.effectAllowed = this.action === 'move' ? 'move' : 'copy';
29    }
30  }
31
32  handleDragEnd() {
33    this.style.opacity = '1';
34    DeviceDragZone.dragged = null;
35  }
36
37  // Allow the information panel to figure what has been selected.
38  handleSelect(ev: Event) {
39    this.style.opacity = '1';
40    if (ev.target) {
41      simulationState.patchSelected((ev.target as Element).id);
42      // We can add a feature for visually showing a selected object (i.e.
43      // bolded borders)
44    }
45  }
46
47  render() {
48    return html` <slot></slot> `;
49  }
50}
51