• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import{__decorate as e}from"../node_modules/tslib/tslib.es6.js";import{css as t,LitElement as i,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 i{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()}render(){const e=["red","orange","yellow","green","blue","indigo","purple"],t=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(((t,i)=>o`
5              ${!0===t.visible?o`
6                    <ns-device-dragzone
7                      .action=${"move"}
8                      style=${s({position:"absolute",left:100*t.position.x+"px",top:100*t.position.y+"px"})}
9                    >
10                      <ns-cube-sprite
11                        id=${t.name}
12                        .color=${e[i%e.length]}
13                        .size=${"30px"}
14                        .controls=${!0}
15                        yaw=${t.orientation.yaw}
16                        pitch=${t.orientation.pitch}
17                        roll=${t.orientation.roll}
18                        posZ=${100*t.position.z}
19                        role="widget"
20                        tabindex="1"
21                        aria-label="${t.name} on Device Map, Position: ${Math.round(100*t.position.x)}, ${Math.round(100*t.position.y)}, ${Math.round(100*t.position.z)}, Orientation: yaw: ${t.orientation.yaw}, pitch: ${t.orientation.pitch}, roll: ${t.orientation.roll}"
22                        aria-live="polite"
23                      ></ns-cube-sprite>
24                    </ns-device-dragzone>
25                  `:o``}
26            `))}
27        </div>
28        <style>
29          #dropzone {
30            transform: ${t};
31          }
32        </style>
33      </ns-device-dropzone>
34    `}};d.styles=t`
35    #dropzone {
36      margin-left: 200px;
37      margin-right: 200px;
38      transition: transform 2s, top 2s;
39      transform-style: preserve-3d;
40    }
41
42    .box {
43      position: relative;
44      width: 1000px; //40vw;
45      height: 1000px; //40vh;
46      border: solid 1px rgb(198, 210, 255);
47      margin: 2.5em auto;
48    }
49
50    .pattern0 {
51      background-image: url(./assets/grid-background.svg);
52    }
53
54    .pattern1 {
55      background-image: url(./assets/polar-background.svg);
56      background-size: 1150px 1150px;
57      background-position: center;
58    }
59
60    .pattern2 {
61      background-image: url(./assets/hexagonal-background.png);
62      background-size: 1175px 1175px;
63      background-position: center;
64    }
65
66    .container {
67      display: flex;
68      width: 100%;
69    }
70
71    .contentA {
72      flex: 2;
73    }
74
75    .contentB {
76      flex: 2;
77    }
78
79    ns-device-dragzone {
80      transform-style: inherit;
81    }
82  `,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};
83