1import{__decorate as e}from"../node_modules/tslib/tslib.es6.js";import{css as i,LitElement as t,html as o}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{property as n,customElement as r}from"https://cdn.skypack.dev/pin/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";import{styleMap as s}from"https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js";import{simulationState as a}from"./device-observer.js";let d=class extends t{constructor(){super(...arguments),this.deviceData=[],this.imageIdx=0,this.numImages=3,this.isometric=!1,this.onChangeMap=()=>{this.imageIdx=(this.imageIdx+1)%this.numImages},this.handleIsometricView=()=>{this.isometric=!this.isometric}}connectedCallback(){super.connectedCallback(),a.registerObserver(this),window.addEventListener("map-button-clicked",this.onChangeMap),window.addEventListener("isometric-button-clicked",this.handleIsometricView)}disconnectedCallback(){window.removeEventListener("isometric-button-clicked",this.handleIsometricView),window.removeEventListener("map-button-clicked",this.onChangeMap),a.removeObserver(this),super.disconnectedCallback()}onNotify(e){this.deviceData=e.devices,this.requestUpdate()}checkBle(e){var i;return void 0!==(null===(i=e.chips.at(0))||void 0===i?void 0:i.bleBeacon)}render(){const e=["red","orange","yellow","green","blue","indigo","purple"],i=this.isometric?"perspective(200rem) rotateX(60deg) rotateY(0deg) rotateZ(0deg) scale3d(0.8,0.8,0.8); top: 250px":"none; top: 0px;";return o`
2      <ns-device-dropzone role="widget" tabindex="0" aria-label="Device map">
3        <div id="dropzone" class="box pattern${this.imageIdx}">
4          ${this.deviceData.map(((i,t)=>o`
5              ${this.checkBle(i)?o`
6                    <ns-device-dragzone
7                      .action=${"move"}
8                      style=${s({position:"absolute",left:100*i.position.x+"px",top:100*i.position.y+"px"})}
9                    >
10                      <ns-pyramid-sprite
11                        id=${i.name}
12                        .color=${e[t%e.length]}
13                        .size=${"30px"}
14                        .controls=${!0}
15                        yaw=${i.orientation.yaw}
16                        pitch=${i.orientation.pitch}
17                        roll=${i.orientation.roll}
18                        posZ=${100*i.position.z}
19                        role="widget"
20                        tabindex="1"
21                        aria-label="${i.name} on Device Map, Position: ${Math.round(100*i.position.x)}, ${Math.round(100*i.position.y)}, ${Math.round(100*i.position.z)}, Orientation: yaw: ${i.orientation.yaw}, pitch: ${i.orientation.pitch}, roll: ${i.orientation.roll}"
22                        aria-live="polite"
23                      ></ns-pyramid-sprite>
24                    </ns-device-dragzone>
25                  `:o`
26                  <ns-device-dragzone
27                    .action=${"move"}
28                    style=${s({position:"absolute",left:100*i.position.x+"px",top:100*i.position.y+"px"})}
29                  >
30                    <ns-cube-sprite
31                      id=${i.name}
32                      .color=${e[t%e.length]}
33                      .size=${"30px"}
34                      .controls=${!0}
35                      yaw=${i.orientation.yaw}
36                      pitch=${i.orientation.pitch}
37                      roll=${i.orientation.roll}
38                      posZ=${100*i.position.z}
39                      role="widget"
40                      tabindex="1"
41                      aria-label="${i.name} on Device Map, Position: ${Math.round(100*i.position.x)}, ${Math.round(100*i.position.y)}, ${Math.round(100*i.position.z)}, Orientation: yaw: ${i.orientation.yaw}, pitch: ${i.orientation.pitch}, roll: ${i.orientation.roll}"
42                      aria-live="polite"
43                    ></ns-cube-sprite>
44                  </ns-device-dragzone>
45                `}
46            `))}
47        </div>
48        <style>
49          #dropzone {
50            transform: ${i};
51          }
52        </style>
53      </ns-device-dropzone>
54    `}};d.styles=i`
55    #dropzone {
56      margin-left: 200px;
57      margin-right: 200px;
58      transition: transform 2s, top 2s;
59      transform-style: preserve-3d;
60    }
61
62    .box {
63      position: relative;
64      width: 1000px; //40vw;
65      height: 1000px; //40vh;
66      border: solid 1px rgb(198, 210, 255);
67      margin: 2.5em auto;
68    }
69
70    .pattern0 {
71      background-image: url(./assets/grid-background.svg);
72    }
73
74    .pattern1 {
75      background-image: url(./assets/polar-background.svg);
76      background-size: 1150px 1150px;
77      background-position: center;
78    }
79
80    .pattern2 {
81      background-image: url(./assets/hexagonal-background.png);
82      background-size: 1175px 1175px;
83      background-position: center;
84    }
85
86    .container {
87      display: flex;
88      width: 100%;
89    }
90
91    .contentA {
92      flex: 2;
93    }
94
95    .contentB {
96      flex: 2;
97    }
98
99    ns-device-dragzone {
100      transform-style: inherit;
101    }
102  `,e([n()],d.prototype,"deviceData",void 0),e([n()],d.prototype,"imageIdx",void 0),e([n()],d.prototype,"numImages",void 0),e([n({type:Boolean,reflect:!0})],d.prototype,"isometric",void 0),d=e([r("ns-device-map")],d);export{d as DeviceMap};
103