@operato/board 1.4.67 → 1.4.68

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.4.68](https://github.com/hatiolab/operato/compare/v1.4.67...v1.4.68) (2023-09-14)
+
+
+### :bug: Bug Fix
+
+* board-play 도 데이타를 속성으로 받을 수 있도록 함 ([5a446e4](https://github.com/hatiolab/operato/commit/5a446e4d87dd32253e3729b0da8c6087e3caaff2))
+
+
+
 ### [1.4.67](https://github.com/hatiolab/operato/compare/v1.4.66...v1.4.67) (2023-09-13)
 
 

package/dist/src/ox-board-player.d.ts

@@ -13,6 +13,7 @@ export declare class BoardPlayer extends LitElement {
     started: boolean;
     playing: boolean;
     provider: any;
+    data: any;
     _controlAnimation?: Animation;
     _transferTimer?: any;
     _currentPlayer?: any;

package/dist/src/ox-board-player.js

@@ -28,7 +28,10 @@ let BoardPlayer = class BoardPlayer extends LitElement {
         ${this.started
             ? html `
               <ox-board-player-carousel axis="y" .rows=${this.rows} .columns=${this.columns} player>
-                ${this.boards.map(item => html ` <ox-board-wrapper page .sceneId=${item.id} .provider=${this.provider}> </ox-board-wrapper> `)}
+                ${this.boards.map(item => html `
+                      <ox-board-wrapper page .sceneId=${item.id} .data=${this.data} .provider=${this.provider}>
+                      </ox-board-wrapper>
+                    `)}
               </ox-board-player-carousel>
             `
             : html ``}
@@ -296,6 +299,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], BoardPlayer.prototype, "provider", void 0);
+__decorate([
+    property({ type: Object })
+], BoardPlayer.prototype, "data", void 0);
 __decorate([
     state()
 ], BoardPlayer.prototype, "_controlAnimation", void 0);

package/dist/src/ox-board-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-player.js","sourceRoot":"","sources":["../../src/ox-board-player.ts"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,2BAA2B,CAAA;AAClC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEhF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAE/C,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;AAGvC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAGuB,aAAQ,GAAW,gBAAgB,CAAA;QACpC,WAAM,GAAe,EAAE,CAAA;QACtB,aAAQ,GAAG,EAAE,CAAA;QACb,YAAO,GAAG,CAAC,CAAA;QACX,SAAI,GAAG,CAAC,CAAA;QACP,YAAO,GAAG,KAAK,CAAA;QACf,YAAO,GAAG,KAAK,CAAA;QAMnC,kBAAa,GAAG,KAAK,CAAA;QAItB,oBAAe,GAAoB,IAAI,eAAe,EAAE,CAAA;IAqSlE,CAAC;IAnSC,MAAM;QACJ,OAAO,IAAI,CAAA;yBACU,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,eAAe,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;UAC9E,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;yDACyC,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,OAAO;kBACzE,IAAI,CAAC,MAAM,CAAC,GAAG,CACf,IAAI,CAAC,EAAE,CACL,IAAI,CAAA,oCAAoC,IAAI,CAAC,EAAE,cAAc,IAAI,CAAC,QAAQ,wBAAwB,CACrG;;aAEJ;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;qCAGmB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;;qCAE/B,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;uCACjB,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;uCACrB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,IAAI,CAAC,OAAO;wCACxC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO;wCAC3C,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;uCACvB,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;;;;;;;;yBAQnC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;0BACpB,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YAC5D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAA;QACJ,CAAC;;;;;;;yBAOQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;0BAChB,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACxD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAA;QACJ,CAAC;;kBAEC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,YAAY,GAAG,YAAY,CAAC;;;;yBAIpD,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;0BACnB,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YAC3D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAA;QACJ,CAAC;;kBAEC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,YAAY,MAAM,YAAY,CAAC;;;;;;+CAMpC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,IAAI,CAAC,aAAa;;;oDAGrD,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,IAAI,CAAC,aAAa;;;0CAGrE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;KAI5D,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAE9D,IAAI,OAAO,EAAE;YACX,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;YAE9D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;YACxB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;YACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;SACjB;QAED,aAAa,CAAC,IAAI,CAAC,CAAA;QAEnB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC1C,IAAI,UAAU,GAAI,CAAS,CAAC,MAAM,CAAC,UAAU,CAAA;YAE7C,IAAI,UAAU,CAAC,IAAI,EAAE;gBACnB,IAAI,CAAC,SAAS,EAAE,CAAA;aACjB;iBAAM,IAAI,UAAU,CAAC,KAAK,EAAE;gBAC3B,IAAI,CAAC,QAAQ,EAAE,CAAA;aAChB;iBAAM,IAAI,UAAU,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,QAAQ,EAAE,CAAA;aAChB;iBAAM,IAAI,UAAU,CAAC,MAAM,EAAE;gBAC5B,IAAI,CAAC,MAAM,EAAE,CAAA;aACd;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACpD,QAAQ,CAAC,CAAC,GAAG,EAAE;gBACb,KAAK,OAAO,CAAC,CAAC,cAAc;gBAC5B,KAAK,YAAY;oBACf,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,SAAS,EAAE,CAAA;oBAChB,MAAK;gBAEP,KAAK,MAAM,CAAC,CAAC,cAAc;gBAC3B,KAAK,WAAW;oBACd,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,QAAQ,EAAE,CAAA;oBACf,MAAK;gBAEP,KAAK,IAAI,CAAC,CAAC,cAAc;gBACzB,KAAK,SAAS;oBACZ,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,MAAM,EAAE,CAAA;oBACb,MAAK;gBAEP,KAAK,MAAM,CAAC,CAAC,cAAc;gBAC3B,KAAK,WAAW;oBACd,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,QAAQ,EAAE,CAAA;oBACf,MAAK;aACR;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC1E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;SACrE;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YAClD,IAAI,CAAC,oBAAoB,EAAE,CAAA;SAC5B;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,IAAc;QAClC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAC5C;gBACE;oBACE,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE,SAAS;iBAClB;gBACD,EAAE,OAAO,EAAE,CAAC,EAAE;aACf,EACD,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAChC,CAAA;SACF;QAED,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAA;QAE5B,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAA;QAC/B,IAAI,IAAI;YAAE,OAAM;QAEhB,IAAI;YACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAA;YAC7B,MAAM,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAA;YACrC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAA;SAC5B;QAAC,OAAO,CAAC,EAAE;YACV,eAAe;SAChB;IACH,CAAC;IAED,oBAAoB;QAClB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAEjC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QAEnB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;gBACpC,IAAI,IAAI,CAAC,cAAc;oBAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;YACrD,CAAC,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;SACzB;IACH,CAAC;IAED,WAAW;QACT,IAAI,CAAC,eAAe,EAAE,CAAA;IACxB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;IAED,eAAe;QACb,gBAAgB,CACd,IAAI,EACJ,GAAG,EAAE;YACH,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YACzB,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,EACD,GAAG,EAAE;YACH,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;YAC1B,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CACF,CAAA;IACH,CAAC;IAED,WAAW;QACT,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;IAC1F,CAAC;IAED,IAAI;QACF,IAAI,CAAC,oBAAoB,EAAE,CAAA;IAC7B,CAAC;IAED,KAAK;QACH,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QACjC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACtB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAA;IAChC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;IAC5B,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,GAAG,CAAA;QAC9B,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAA;IAChC,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,cAAc,EAAE,CAAA;SACjB;QAED,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,OAAO;QACX,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;QACjB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;IACpB,CAAC;IAED,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC;YAAE,OAAM;QAEnD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QAEnB,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,wCAAwC,CAAC,CAAA;QAE7F,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAA;QAEtB,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,KAAK,CAAC,IAAI;QACR,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAEjC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;QACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QAEpB;;;WAGG;QACH,MAAM,IAAI,CAAC,cAAc,CAAA;IAC3B,CAAC;;AAtTM,kBAAM,GAAG,KAAK,AAAR,CAAQ;AAEO;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoC;AACpC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAwB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAS;AACP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAgB;AACf;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAgB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAEhC;IAAR,KAAK,EAAE;sDAA8B;AAC7B;IAAR,KAAK,EAAE;mDAAqB;AACpB;IAAR,KAAK,EAAE;mDAAqB;AACpB;IAAR,KAAK,EAAE;kDAAsB;AAEX;IAAlB,KAAK,CAAC,UAAU,CAAC;6CAAuB;AAjB9B,WAAW;IADvB,aAAa,CAAC,iBAAiB,CAAC;GACpB,WAAW,CAwTvB","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\nimport './player/ox-board-wrapper'\nimport './player/ox-board-player-carousel'\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { exitfullscreen, SwipeListener, togglefullscreen } from '@operato/utils'\n\nimport { PlaylistStorage } from './data-storage/data-storage.js'\nimport { style } from './ox-board-player-style'\n\nconst DEFAULT_PLAYLIST = String('__default__')\n\n@customElement('ox-board-player')\nexport class BoardPlayer extends LitElement {\n  static styles = style\n\n  @property({ type: String }) playlist: string = DEFAULT_PLAYLIST\n  @property({ type: Array }) boards: Array<any> = []\n  @property({ type: Number }) playtime = 30\n  @property({ type: Number }) columns = 1\n  @property({ type: Number }) rows = 1\n  @property({ type: Boolean }) started = false\n  @property({ type: Boolean }) playing = false\n  @property({ type: Object }) provider: any\n\n  @state() _controlAnimation?: Animation\n  @state() _transferTimer?: any\n  @state() _currentPlayer?: any\n  @state() _fullscreened = false\n\n  @query('#control') _control!: HTMLElement\n\n  private playlistStorage: PlaylistStorage = new PlaylistStorage()\n\n  render() {\n    return html`\n      <slot @mousemove=${() => this.onMousemove()} @transform=${() => this.onTransform()} tabindex=\"-1\">\n        ${this.started\n          ? html`\n              <ox-board-player-carousel axis=\"y\" .rows=${this.rows} .columns=${this.columns} player>\n                ${this.boards.map(\n                  item =>\n                    html` <ox-board-wrapper page .sceneId=${item.id} .provider=${this.provider}> </ox-board-wrapper> `\n                )}\n              </ox-board-player-carousel>\n            `\n          : html``}\n      </slot>\n\n      <div id=\"control\" @mouseover=${() => this.onMouseoverControl()} hidden>\n        <div id=\"joystick\">\n          <mwc-icon id=\"up\" @click=${() => this.moveUp()}>keyboard_arrow_up</mwc-icon>\n          <mwc-icon id=\"left\" @click=${() => this.moveLeft()}>keyboard_arrow_left</mwc-icon>\n          <mwc-icon id=\"play\" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</mwc-icon>\n          <mwc-icon id=\"pause\" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</mwc-icon>\n          <mwc-icon id=\"right\" @click=${() => this.moveRight()}>keyboard_arrow_right</mwc-icon>\n          <mwc-icon id=\"down\" @click=${() => this.moveDown()}>keyboard_arrow_down</mwc-icon>\n        </div>\n\n        <div id=\"setting-container\">\n          <div id=\"setting\">\n            <label id=\"schedule-container\">\n              <mwc-icon id=\"schedule\">schedule</mwc-icon>\n              <input\n                .value=${String(this.playtime)}\n                @change=${(e: Event) => {\n                  this.playtime = Number((e.target as HTMLInputElement).value)\n                  this.playlistStorage.save(this.playlist, {\n                    playtime: this.playtime,\n                    columns: this.columns,\n                    rows: this.rows\n                  })\n                }}\n              />\n              sec.\n            </label>\n            <div id=\"grid-setting-container\">\n              <mwc-icon id=\"view_module\">view_module</mwc-icon>\n              <select\n                .value=${String(this.rows)}\n                @change=${(e: Event) => {\n                  this.rows = Number((e.target as HTMLInputElement).value)\n                  this.playlistStorage.save(this.playlist, {\n                    playtime: this.playtime,\n                    columns: this.columns,\n                    rows: this.rows\n                  })\n                }}\n              >\n                ${[1, 2, 3, 4, 5].map(row => html` <option>${row}</option> `)}\n              </select>\n              x\n              <select\n                .value=${String(this.columns)}\n                @change=${(e: Event) => {\n                  this.columns = Number((e.target as HTMLInputElement).value)\n                  this.playlistStorage.save(this.playlist, {\n                    playtime: this.playtime,\n                    columns: this.columns,\n                    rows: this.rows\n                  })\n                }}\n              >\n                ${[1, 2, 3, 4, 5].map(column => html` <option>${column}</option> `)}\n              </select>\n            </div>\n          </div>\n\n          <div id=\"etc\">\n            <mwc-icon id=\"fullscreen\" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}\n              >fullscreen</mwc-icon\n            >\n            <mwc-icon id=\"fullscreen-exit\" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}\n              >fullscreen_exit</mwc-icon\n            >\n            <mwc-icon id=\"close\" @click=${() => this.onTapClose()}>close</mwc-icon>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    const setting = await this.playlistStorage.load(this.playlist)\n\n    if (setting) {\n      const { playtime = 30, columns = 1, rows = 1 } = setting || {}\n\n      this.playtime = playtime\n      this.columns = columns\n      this.rows = rows\n    }\n\n    SwipeListener(this)\n\n    this.addEventListener('swipe', (e: Event) => {\n      var directions = (e as any).detail.directions\n\n      if (directions.left) {\n        this.moveRight()\n      } else if (directions.right) {\n        this.moveLeft()\n      } else if (directions.top) {\n        this.moveDown()\n      } else if (directions.bottom) {\n        this.moveUp()\n      }\n    })\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Right': // for IE/Edge\n        case 'ArrowRight':\n          e.stopPropagation()\n          this.moveRight()\n          break\n\n        case 'Left': // for IE/Edge\n        case 'ArrowLeft':\n          e.stopPropagation()\n          this.moveLeft()\n          break\n\n        case 'Up': // for IE/Edge\n        case 'ArrowUp':\n          e.stopPropagation()\n          this.moveUp()\n          break\n\n        case 'Down': // for IE/Edge\n        case 'ArrowDown':\n          e.stopPropagation()\n          this.moveDown()\n          break\n      }\n    })\n\n    this.focus()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {\n      this.boards && this.boards.length > 0 ? this.restart() : this.stop()\n    } else if (changes.has('playtime') && this.playing) {\n      this._resetTransformTimer()\n    }\n  }\n\n  async _resetFadeTimer(stop?: boolean) {\n    if (!this._controlAnimation) {\n      this._controlAnimation = this._control.animate(\n        [\n          {\n            opacity: 1,\n            easing: 'ease-in'\n          },\n          { opacity: 0 }\n        ],\n        { delay: 1000, duration: 2000 }\n      )\n    }\n\n    this._control.hidden = false\n\n    this._controlAnimation.cancel()\n    if (stop) return\n\n    try {\n      this._controlAnimation.play()\n      await this._controlAnimation.finished\n      this._control.hidden = true\n    } catch (e) {\n      /* cancelled */\n    }\n  }\n\n  _resetTransformTimer() {\n    clearTimeout(this._transferTimer)\n\n    this.playing = true\n\n    if (this._currentPlayer) {\n      this._transferTimer = setTimeout(() => {\n        if (this._transferTimer) this._currentPlayer.next()\n      }, this.playtime * 1000)\n    }\n  }\n\n  onMousemove() {\n    this._resetFadeTimer()\n  }\n\n  onMouseoverControl() {\n    this._resetFadeTimer(true)\n  }\n\n  onTapFullscreen() {\n    togglefullscreen(\n      this,\n      () => {\n        this._fullscreened = true\n        this.focus()\n      },\n      () => {\n        this._fullscreened = false\n        this.focus()\n      }\n    )\n  }\n\n  onTransform() {\n    requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer())\n  }\n\n  play() {\n    this._resetTransformTimer()\n  }\n\n  pause() {\n    clearTimeout(this._transferTimer)\n    this.playing = false\n  }\n\n  moveLeft() {\n    this._currentPlayer.axis = 'y'\n    this._currentPlayer.previous()\n  }\n\n  moveRight() {\n    this._currentPlayer.axis = 'y'\n    this._currentPlayer.next()\n  }\n\n  moveUp() {\n    this._currentPlayer.axis = 'x'\n    this._currentPlayer.next()\n  }\n\n  moveDown() {\n    this._currentPlayer.axis = 'x'\n    this._currentPlayer.previous()\n  }\n\n  onTapClose() {\n    if (this._fullscreened) {\n      exitfullscreen()\n    }\n\n    window.history.back()\n  }\n\n  async restart() {\n    await this.stop()\n    await this.start()\n  }\n\n  async start() {\n    if (!this.boards || this.boards.length == 0) return\n\n    this.started = true\n    this.playing = true\n\n    await this.updateComplete\n\n    this._currentPlayer = this.renderRoot.querySelector(':not([style*=\"display: none\"])[player]')\n\n    this._resetTransformTimer()\n    this._resetFadeTimer()\n\n    this.focus()\n  }\n\n  async stop() {\n    clearTimeout(this._transferTimer)\n\n    this._currentPlayer && this._currentPlayer.stop()\n    this.started = false\n\n    /**\n     * this.started = false 로 인한 update를 강제하기 위함임.\n     * this.start() 가 바로 호출되어 this.started 의 변화가 render에 반영되지 않을 수 있으므로.\n     */\n    await this.updateComplete\n  }\n}\n"]}
+{"version":3,"file":"ox-board-player.js","sourceRoot":"","sources":["../../src/ox-board-player.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\nimport './player/ox-board-wrapper'\nimport './player/ox-board-player-carousel'\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { exitfullscreen, SwipeListener, togglefullscreen } from '@operato/utils'\n\nimport { PlaylistStorage } from './data-storage/data-storage.js'\nimport { style } from './ox-board-player-style'\n\nconst DEFAULT_PLAYLIST = String('__default__')\n\n@customElement('ox-board-player')\nexport class BoardPlayer extends LitElement {\n  static styles = style\n\n  @property({ type: String }) playlist: string = DEFAULT_PLAYLIST\n  @property({ type: Array }) boards: Array<any> = []\n  @property({ type: Number }) playtime = 30\n  @property({ type: Number }) columns = 1\n  @property({ type: Number }) rows = 1\n  @property({ type: Boolean }) started = false\n  @property({ type: Boolean }) playing = false\n  @property({ type: Object }) provider: any\n  @property({ type: Object }) data: any\n\n  @state() _controlAnimation?: Animation\n  @state() _transferTimer?: any\n  @state() _currentPlayer?: any\n  @state() _fullscreened = false\n\n  @query('#control') _control!: HTMLElement\n\n  private playlistStorage: PlaylistStorage = new PlaylistStorage()\n\n  render() {\n    return html`\n      <slot @mousemove=${() => this.onMousemove()} @transform=${() => this.onTransform()} tabindex=\"-1\">\n        ${this.started\n          ? html`\n              <ox-board-player-carousel axis=\"y\" .rows=${this.rows} .columns=${this.columns} player>\n                ${this.boards.map(\n                  item =>\n                    html`\n                      <ox-board-wrapper page .sceneId=${item.id} .data=${this.data} .provider=${this.provider}>\n                      </ox-board-wrapper>\n                    `\n                )}\n              </ox-board-player-carousel>\n            `\n          : html``}\n      </slot>\n\n      <div id=\"control\" @mouseover=${() => this.onMouseoverControl()} hidden>\n        <div id=\"joystick\">\n          <mwc-icon id=\"up\" @click=${() => this.moveUp()}>keyboard_arrow_up</mwc-icon>\n          <mwc-icon id=\"left\" @click=${() => this.moveLeft()}>keyboard_arrow_left</mwc-icon>\n          <mwc-icon id=\"play\" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</mwc-icon>\n          <mwc-icon id=\"pause\" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</mwc-icon>\n          <mwc-icon id=\"right\" @click=${() => this.moveRight()}>keyboard_arrow_right</mwc-icon>\n          <mwc-icon id=\"down\" @click=${() => this.moveDown()}>keyboard_arrow_down</mwc-icon>\n        </div>\n\n        <div id=\"setting-container\">\n          <div id=\"setting\">\n            <label id=\"schedule-container\">\n              <mwc-icon id=\"schedule\">schedule</mwc-icon>\n              <input\n                .value=${String(this.playtime)}\n                @change=${(e: Event) => {\n                  this.playtime = Number((e.target as HTMLInputElement).value)\n                  this.playlistStorage.save(this.playlist, {\n                    playtime: this.playtime,\n                    columns: this.columns,\n                    rows: this.rows\n                  })\n                }}\n              />\n              sec.\n            </label>\n            <div id=\"grid-setting-container\">\n              <mwc-icon id=\"view_module\">view_module</mwc-icon>\n              <select\n                .value=${String(this.rows)}\n                @change=${(e: Event) => {\n                  this.rows = Number((e.target as HTMLInputElement).value)\n                  this.playlistStorage.save(this.playlist, {\n                    playtime: this.playtime,\n                    columns: this.columns,\n                    rows: this.rows\n                  })\n                }}\n              >\n                ${[1, 2, 3, 4, 5].map(row => html` <option>${row}</option> `)}\n              </select>\n              x\n              <select\n                .value=${String(this.columns)}\n                @change=${(e: Event) => {\n                  this.columns = Number((e.target as HTMLInputElement).value)\n                  this.playlistStorage.save(this.playlist, {\n                    playtime: this.playtime,\n                    columns: this.columns,\n                    rows: this.rows\n                  })\n                }}\n              >\n                ${[1, 2, 3, 4, 5].map(column => html` <option>${column}</option> `)}\n              </select>\n            </div>\n          </div>\n\n          <div id=\"etc\">\n            <mwc-icon id=\"fullscreen\" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}\n              >fullscreen</mwc-icon\n            >\n            <mwc-icon id=\"fullscreen-exit\" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}\n              >fullscreen_exit</mwc-icon\n            >\n            <mwc-icon id=\"close\" @click=${() => this.onTapClose()}>close</mwc-icon>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    const setting = await this.playlistStorage.load(this.playlist)\n\n    if (setting) {\n      const { playtime = 30, columns = 1, rows = 1 } = setting || {}\n\n      this.playtime = playtime\n      this.columns = columns\n      this.rows = rows\n    }\n\n    SwipeListener(this)\n\n    this.addEventListener('swipe', (e: Event) => {\n      var directions = (e as any).detail.directions\n\n      if (directions.left) {\n        this.moveRight()\n      } else if (directions.right) {\n        this.moveLeft()\n      } else if (directions.top) {\n        this.moveDown()\n      } else if (directions.bottom) {\n        this.moveUp()\n      }\n    })\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Right': // for IE/Edge\n        case 'ArrowRight':\n          e.stopPropagation()\n          this.moveRight()\n          break\n\n        case 'Left': // for IE/Edge\n        case 'ArrowLeft':\n          e.stopPropagation()\n          this.moveLeft()\n          break\n\n        case 'Up': // for IE/Edge\n        case 'ArrowUp':\n          e.stopPropagation()\n          this.moveUp()\n          break\n\n        case 'Down': // for IE/Edge\n        case 'ArrowDown':\n          e.stopPropagation()\n          this.moveDown()\n          break\n      }\n    })\n\n    this.focus()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {\n      this.boards && this.boards.length > 0 ? this.restart() : this.stop()\n    } else if (changes.has('playtime') && this.playing) {\n      this._resetTransformTimer()\n    }\n  }\n\n  async _resetFadeTimer(stop?: boolean) {\n    if (!this._controlAnimation) {\n      this._controlAnimation = this._control.animate(\n        [\n          {\n            opacity: 1,\n            easing: 'ease-in'\n          },\n          { opacity: 0 }\n        ],\n        { delay: 1000, duration: 2000 }\n      )\n    }\n\n    this._control.hidden = false\n\n    this._controlAnimation.cancel()\n    if (stop) return\n\n    try {\n      this._controlAnimation.play()\n      await this._controlAnimation.finished\n      this._control.hidden = true\n    } catch (e) {\n      /* cancelled */\n    }\n  }\n\n  _resetTransformTimer() {\n    clearTimeout(this._transferTimer)\n\n    this.playing = true\n\n    if (this._currentPlayer) {\n      this._transferTimer = setTimeout(() => {\n        if (this._transferTimer) this._currentPlayer.next()\n      }, this.playtime * 1000)\n    }\n  }\n\n  onMousemove() {\n    this._resetFadeTimer()\n  }\n\n  onMouseoverControl() {\n    this._resetFadeTimer(true)\n  }\n\n  onTapFullscreen() {\n    togglefullscreen(\n      this,\n      () => {\n        this._fullscreened = true\n        this.focus()\n      },\n      () => {\n        this._fullscreened = false\n        this.focus()\n      }\n    )\n  }\n\n  onTransform() {\n    requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer())\n  }\n\n  play() {\n    this._resetTransformTimer()\n  }\n\n  pause() {\n    clearTimeout(this._transferTimer)\n    this.playing = false\n  }\n\n  moveLeft() {\n    this._currentPlayer.axis = 'y'\n    this._currentPlayer.previous()\n  }\n\n  moveRight() {\n    this._currentPlayer.axis = 'y'\n    this._currentPlayer.next()\n  }\n\n  moveUp() {\n    this._currentPlayer.axis = 'x'\n    this._currentPlayer.next()\n  }\n\n  moveDown() {\n    this._currentPlayer.axis = 'x'\n    this._currentPlayer.previous()\n  }\n\n  onTapClose() {\n    if (this._fullscreened) {\n      exitfullscreen()\n    }\n\n    window.history.back()\n  }\n\n  async restart() {\n    await this.stop()\n    await this.start()\n  }\n\n  async start() {\n    if (!this.boards || this.boards.length == 0) return\n\n    this.started = true\n    this.playing = true\n\n    await this.updateComplete\n\n    this._currentPlayer = this.renderRoot.querySelector(':not([style*=\"display: none\"])[player]')\n\n    this._resetTransformTimer()\n    this._resetFadeTimer()\n\n    this.focus()\n  }\n\n  async stop() {\n    clearTimeout(this._transferTimer)\n\n    this._currentPlayer && this._currentPlayer.stop()\n    this.started = false\n\n    /**\n     * this.started = false 로 인한 update를 강제하기 위함임.\n     * this.start() 가 바로 호출되어 this.started 의 변화가 render에 반영되지 않을 수 있으므로.\n     */\n    await this.updateComplete\n  }\n}\n"]}

package/dist/src/player/ox-board-wrapper.js

@@ -46,6 +46,9 @@ let BoardWrapper = class BoardWrapper extends LitElement {
         this.provider.get(this.sceneId, true).then((scene) => {
             this._scene = scene;
             this._scene.target = this._targetEl;
+            if (this.data) {
+                this._scene.data = this.data;
+            }
             /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
              * 이 때는 정상적으로 그려주고,
              * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
@@ -76,6 +79,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], BoardWrapper.prototype, "provider", void 0);
+__decorate([
+    property({ type: Object })
+], BoardWrapper.prototype, "data", void 0);
 __decorate([
     state()
 ], BoardWrapper.prototype, "_scene", void 0);

package/dist/src/player/ox-board-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-wrapper.js","sourceRoot":"","sources":["../../../src/player/ox-board-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE;;;;GAIG;AAEH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAuBnC,MAAM;QACJ,OAAO,IAAI,CAAA,2BAA2B,CAAA;IACxC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,IAAI,CAAC,MAAM,EAAE;oBACf,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;oBAEpB,IAAI,IAAI,CAAC,WAAW,EAAE;wBACpB,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;qBAClB;iBACF;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACpD,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAA;YACzB,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;YAC5C,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAA;QAElB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,CACxC,CAAC,KAAU,EAAE,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;YACnB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAA;YAEnC;;;eAGG;YACH,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;gBAClC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;aAClB;QACH,CAAC,EACD,CAAC,CAAM,EAAE,EAAE,GAAE,CAAC,CACf,CAAA;IACH,CAAC;;AAjFM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAbY,CAaZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AAEjC;IAAR,KAAK,EAAE;4CAAY;AAEF;IAAjB,KAAK,CAAC,SAAS,CAAC;+CAAwB;AArBrC,YAAY;IADjB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,YAAY,CAmFjB","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n/**\n * @class BoardWrapper\n *\n * @description scene provider로부터 제공받은 scene의 reference count control을 담당하며, resize 이벤트 발생시 scene의 사이즈를 fit 시키는 역할을 담당한다.\n */\n@customElement('ox-board-wrapper')\nclass BoardWrapper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n      }\n\n      #target {\n        display: block;\n        width: 100%;\n        height: 100%;\n        outline: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) sceneId!: string\n  @property({ type: Object }) provider!: any\n\n  @state() _scene: any\n\n  @query('#target') _targetEl!: HTMLElement\n\n  render() {\n    return html` <div id=\"target\"></div> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    window.addEventListener('resize', () => {\n      requestAnimationFrame(() => {\n        if (this._scene) {\n          this._scene.resize()\n\n          if (this.offsetWidth) {\n            this._scene.fit()\n          }\n        }\n      })\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._releaseRef()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('sceneId') && this._onSceneIdChanged()\n  }\n\n  _releaseRef() {\n    if (this._scene) {\n      this._scene.target = null\n      this._scene.release && this._scene.release()\n      delete this._scene\n    }\n  }\n\n  _onSceneIdChanged() {\n    if (!this.provider) return\n    this._releaseRef()\n\n    if (!this.sceneId) return\n\n    this.provider.get(this.sceneId, true).then(\n      (scene: any) => {\n        this._scene = scene\n        this._scene.target = this._targetEl\n\n        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.\n         * 이 때는 정상적으로 그려주고,\n         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.\n         */\n        if (this._scene.target.offsetWidth) {\n          this._scene.fit()\n        }\n      },\n      (e: any) => {}\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-board-wrapper.js","sourceRoot":"","sources":["../../../src/player/ox-board-wrapper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE;;;;GAIG;AAEH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAwBnC,MAAM;QACJ,OAAO,IAAI,CAAA,2BAA2B,CAAA;IACxC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,IAAI,CAAC,MAAM,EAAE;oBACf,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;oBAEpB,IAAI,IAAI,CAAC,WAAW,EAAE;wBACpB,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;qBAClB;iBACF;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACpD,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAA;YACzB,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;YAC5C,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAA;QAElB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,CACxC,CAAC,KAAU,EAAE,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;YACnB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAA;YACnC,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;aAC7B;YAED;;;eAGG;YACH,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;gBAClC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;aAClB;QACH,CAAC,EACD,CAAC,CAAM,EAAE,EAAE,GAAE,CAAC,CACf,CAAA;IACH,CAAC;;AArFM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAbY,CAaZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAU;AAE5B;IAAR,KAAK,EAAE;4CAAY;AAEF;IAAjB,KAAK,CAAC,SAAS,CAAC;+CAAwB;AAtBrC,YAAY;IADjB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,YAAY,CAuFjB","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n/**\n * @class BoardWrapper\n *\n * @description scene provider로부터 제공받은 scene의 reference count control을 담당하며, resize 이벤트 발생시 scene의 사이즈를 fit 시키는 역할을 담당한다.\n */\n@customElement('ox-board-wrapper')\nclass BoardWrapper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n      }\n\n      #target {\n        display: block;\n        width: 100%;\n        height: 100%;\n        outline: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) sceneId!: string\n  @property({ type: Object }) provider!: any\n  @property({ type: Object }) data: any\n\n  @state() _scene: any\n\n  @query('#target') _targetEl!: HTMLElement\n\n  render() {\n    return html` <div id=\"target\"></div> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    window.addEventListener('resize', () => {\n      requestAnimationFrame(() => {\n        if (this._scene) {\n          this._scene.resize()\n\n          if (this.offsetWidth) {\n            this._scene.fit()\n          }\n        }\n      })\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._releaseRef()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('sceneId') && this._onSceneIdChanged()\n  }\n\n  _releaseRef() {\n    if (this._scene) {\n      this._scene.target = null\n      this._scene.release && this._scene.release()\n      delete this._scene\n    }\n  }\n\n  _onSceneIdChanged() {\n    if (!this.provider) return\n    this._releaseRef()\n\n    if (!this.sceneId) return\n\n    this.provider.get(this.sceneId, true).then(\n      (scene: any) => {\n        this._scene = scene\n        this._scene.target = this._targetEl\n        if (this.data) {\n          this._scene.data = this.data\n        }\n\n        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.\n         * 이 때는 정상적으로 그려주고,\n         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.\n         */\n        if (this._scene.target.offsetWidth) {\n          this._scene.fit()\n        }\n      },\n      (e: any) => {}\n    )\n  }\n}\n"]}