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 simulationState.patchSelected((ev.target as Element).id); 27 DeviceDragZone.dragged = ev.target; 28 // eslint-disable-next-line no-param-reassign 29 ev.dataTransfer.effectAllowed = this.action === 'move' ? 'move' : 'copy'; 30 } 31 } 32 33 handleDragEnd() { 34 this.style.opacity = '1'; 35 DeviceDragZone.dragged = null; 36 } 37 38 // Allow the information panel to figure what has been selected. 39 handleSelect(ev: Event) { 40 this.style.opacity = '1'; 41 if (ev.target) { 42 simulationState.patchSelected((ev.target as Element).id); 43 // We can add a feature for visually showing a selected object (i.e. 44 // bolded borders) 45 } 46 } 47 48 render() { 49 return html` <slot></slot> `; 50 } 51} 52