• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import{__decorate as t}from"../node_modules/tslib/tslib.es6.js";import{css as e,LitElement as o,html as i}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{property as r,customElement as s}from"https://cdn.skypack.dev/pin/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";import{simulationState as a}from"./device-observer.js";let d=class extends o{constructor(){super(...arguments),this.yaw=-15,this.pitch=-15,this.roll=0,this.posZ=0,this.color=e`red`,this.size=e`30px`,this.controls=!1,this.highlighted=!1,this.handleOrientationEvent=t=>{const{detail:e}=t;e.name===this.id&&this.controls&&("yaw"===e.type?this.yaw=e.value:"pitch"===e.type?this.pitch=e.value:this.roll=e.value)}}connectedCallback(){super.connectedCallback(),a.registerObserver(this),window.addEventListener("orientationEvent",this.handleOrientationEvent)}disconnectedCallback(){window.removeEventListener("orientationEvent",this.handleOrientationEvent),a.removeObserver(this),super.disconnectedCallback()}onNotify(t){this.highlighted=t.selectedId===this.id;for(const e of t.devices)if(e.name===this.id)return void(this.posZ=100*e.position.z)}render(){return i`
2      <style>
3        :host {
4          font-size: ${this.size};
5          --color: ${this.color};
6          --yaw: ${this.yaw};
7          --pitch: ${this.pitch};
8          --roll: ${this.roll};
9          --posZ: ${this.controls?this.posZ:0};
10        }
11        .pyramid > div {
12          outline: ${this.highlighted&&this.controls?e`dashed`:e``};
13        }
14      </style>
15      <div class="pyramid">
16        <div class="face"></div>
17        <div class="face"></div>
18        <div class="face"></div>
19        <div class="face"></div>
20      </div>
21      ${this.controls?i`
22            <div class="line"></div>
23            <div class="base"></div>
24          `:i``}
25    `}};d.styles=e`
26    :host {
27      /** all sizes are relative to font-size **/
28      display: block;
29      min-height: 1.5em;
30      min-width: 1.5em;
31      width: 1em;
32      /*  overflow: hidden; */
33      transform-origin: center;
34      // TODO(b/294574192): Uncommenting below causes significant render lag
35      // transform-style: preserve-3d;
36      transform: translateZ(calc(var(--posZ) * 1px));
37      cursor: move;
38    }
39    .pyramid {
40      transform-style: preserve-3d;
41      transform: rotateX(calc(var(--yaw) * 1deg))
42        rotateY(calc(var(--pitch) * 1deg)) rotateZ(calc(var(--roll) * 1deg));
43      position: absolute;
44      left: 0.25em;
45      bottom: 0.25em;
46      width: 1em;
47      height: 1em;
48    }
49    .pyramid > div {
50      background-color: var(--color);
51      position: absolute;
52      width: 100%;
53      height: 100%;
54      clip-path: polygon(50% 0, 100% 100%, 0 100%);
55      box-shadow: 0 0 0.25em #000 inset;
56      opacity: 0.7;
57    }
58    .pyramid > div:nth-child(1) {
59      transform: rotateX(30deg);
60    }
61    .pyramid > div:nth-child(2) {
62      transform: translate3d(0.25em, 0, -0.25em) rotateY(90deg) rotateX(30deg);
63    }
64    .pyramid > div:nth-child(3) {
65      transform: translate3d(0, 0, -0.5em) rotateY(180deg) rotateX(30deg);
66    }
67    .pyramid > div:nth-child(4) {
68      transform: translate3d(-0.25em, 0, -0.25em) rotateY(270deg) rotateX(30deg);
69    }
70
71    .line {
72      position: absolute;
73      border-bottom: 5px dashed;
74      width: calc(var(--posZ) * 1px);
75      top: 50%;
76      left: 50%;
77      transform: rotateY(90deg) rotateX(90deg);
78      transform-origin: left;
79    }
80
81    .base {
82      position: absolute;
83      border: 5px solid;
84      border-radius: 50%;
85      background-color: black;
86      height: 5px;
87      width: 5px;
88      top: 50%;
89      left: 50%;
90      transform: translate3d(-50%, -50%, calc(var(--posZ) * -1px));
91    }
92  `,t([r({type:Number})],d.prototype,"yaw",void 0),t([r({type:Number})],d.prototype,"pitch",void 0),t([r({type:Number})],d.prototype,"roll",void 0),t([r({type:Number})],d.prototype,"posZ",void 0),t([r({type:e,attribute:"color"})],d.prototype,"color",void 0),t([r({type:e,attribute:"size"})],d.prototype,"size",void 0),t([r({type:Boolean})],d.prototype,"controls",void 0),t([r({type:Boolean})],d.prototype,"highlighted",void 0),d=t([s("ns-pyramid-sprite")],d);export{d as PyramidSprite};
93