@operato/board 10.0.0-beta.5 → 10.0.0-beta.51

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

@@ -1,14 +1,16 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import '@material/web/fab/fab.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import * as XLSX from 'xlsx';
-import { create, SCENE_MODE } from '@hatiolab/things-scene';
+import { create, LoadTracker, LoadingOverlay, SCENE_MODE } from '@hatiolab/things-scene';
 import { isIOS, togglefullscreen } from '@operato/utils';
 import { ScrollbarStyles } from '@operato/styles';
 import { BoardDataStorage } from './data-storage/data-storage.js';
 import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js';
+import { PlaybackProvider } from './graphql/playback-subscription.js';
+import './ox-playback-controls.js';
 import { runScenario, startScenario } from './graphql/scenario.js';
 import { fetchPlayGroupByName } from './graphql/play-group.js';
 function objectToQueryString(obj) {
@@ -36,28 +38,27 @@ let BoardViewer = class BoardViewer extends LitElement {
         this.history = false;
         this.hideFullscreen = false;
         this.hideNavigation = false;
+        this.playbackEnabled = false;
+        this._playbackState = 'idle';
+        this._playbackActive = false;
+        this._playbackSpeed = 1;
+        this._playbackCurrentTime = '';
+        this._playbackProvider = null;
+        this._savedRealProvider = null;
         this._scene = null;
         this._forward = [];
         this._backward = [];
         this.currentBoardId = (_a = this.board) === null || _a === void 0 ? void 0 : _a.id;
+        this._fabExpanded = false;
         this.resizeHandler = () => {
             this._scene && this._scene.fit();
         };
     }
+    get _is3dMode() {
+        var _a, _b, _c;
+        return !!((_c = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.rootModel) === null || _c === void 0 ? void 0 : _c.is3dMode);
+    }
     render() {
-        var fullscreen = !isIOS() && !this.hideFullscreen
-            ? html `
-            <md-fab
-              id="fullscreen"
-              @click=${(e) => this.onTapFullscreen()}
-              @mouseover=${(e) => this.transientShowButtons(true)}
-              @mouseout=${(e) => this.transientShowButtons()}
-              title="fullscreen"
-            >
-              <md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
-            </md-fab>
-          `
-            : html ``;
         var prev = !this.hideNavigation
             ? html `
           <md-icon
@@ -92,7 +93,60 @@ let BoardViewer = class BoardViewer extends LitElement {
       ></div>
 
       <slot></slot>
-      ${next} ${fullscreen}
+      ${next}
+
+      ${!this.hideFullscreen ? html `
+        <div
+          fab-group
+          ?expanded=${this._fabExpanded}
+          @mouseover=${(e) => this.transientShowButtons(true)}
+          @mouseout=${(e) => this.transientShowButtons()}
+        >
+          <md-fab
+            class="main-fab"
+            ?expanded=${this._fabExpanded}
+            @click=${() => { this._fabExpanded = !this._fabExpanded; }}
+            title="menu"
+          ><md-icon slot="icon">add</md-icon></md-fab>
+
+          ${isIOS() ? nothing : html `<md-fab
+            class="sub-fab"
+            @click=${() => { this._fabExpanded = false; this.onTapFullscreen(); }}
+            title="fullscreen"
+          ><md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon></md-fab>`}
+
+          <md-fab
+            class="sub-fab"
+            @click=${() => { this._fabExpanded = false; this.onTapToggle3D(); }}
+            title=${this._is3dMode ? '2D mode' : '3D mode'}
+          ><md-icon slot="icon">${this._is3dMode ? 'view_in_ar' : '3d_rotation'}</md-icon></md-fab>
+
+          ${this.playbackEnabled ? html `
+            <md-fab
+              class="sub-fab"
+              @click=${() => { this._fabExpanded = false; this._onTogglePlaybackPanel(); }}
+              title="playback"
+            ><md-icon slot="icon">${this._playbackActive ? 'stop' : 'history'}</md-icon></md-fab>
+          ` : html ``}
+        </div>
+      ` : html ``}
+
+      ${this._playbackActive
+            ? html `
+            <ox-playback-controls
+              .playbackState=${this._playbackState}
+              .speed=${this._playbackSpeed}
+              .currentTime=${this._playbackCurrentTime}
+              .timeRange=${this.playbackTimeRange || { from: new Date(Date.now() - 3600000), to: new Date() }}
+              @playback-start=${this._onPlaybackStart}
+              @playback-pause=${this._onPlaybackPause}
+              @playback-resume=${this._onPlaybackResume}
+              @playback-stop=${this._onPlaybackStop}
+              @playback-seek=${this._onPlaybackSeek}
+              @playback-speed=${this._onPlaybackSpeed}
+            ></ox-playback-controls>
+          `
+            : html ``}
     `;
     }
     connectedCallback() {
@@ -111,7 +165,16 @@ let BoardViewer = class BoardViewer extends LitElement {
         this.closeScene();
     }
     updated(changes) {
+        // loadTracker가 외부에서 전달되면 즉시 overlay 연결 (fetch 중에도 표시)
+        if (changes.has('loadTracker') && this.loadTracker) {
+            this._ensureOverlay(this.loadTracker);
+        }
         if (changes.has('board')) {
+            // tracker: 외부에서 안 왔으면 여기서 생성 (reset 하지 않음 — 연속성 유지)
+            if (!this.loadTracker) {
+                this.loadTracker = new LoadTracker();
+                this._ensureOverlay(this.loadTracker);
+            }
             this.hidePopup();
             this.closeScene();
             if (this.board && this.board.id) {
@@ -147,7 +210,8 @@ let BoardViewer = class BoardViewer extends LitElement {
             refProvider: this.provider,
             dataStorage: this.board.id !== 'preview' ? new BoardDataStorage(this.board.id) : undefined,
             dataSubscriptionProvider: new DataSubscriptionProviderImpl(),
-            handlers: ['waypoint-handler']
+            handlers: ['waypoint-handler'],
+            loading: { tracker: this.loadTracker }
         });
         if (this.baseUrl) {
             this._scene.baseUrl = this.baseUrl;
@@ -155,7 +219,20 @@ let BoardViewer = class BoardViewer extends LitElement {
         // this.provider!.add(this.board.id, this._scene)
         this.setupScene({ id: this.board.id, scene: this._scene });
     }
+    _ensureOverlay(tracker) {
+        if (!this._loadingOverlay) {
+            this._loadingOverlay = new LoadingOverlay();
+        }
+        this._loadingOverlay.attach(this.renderRoot, tracker);
+    }
     closeScene() {
+        // 플레이백 중이면 정리
+        if (this._playbackProvider) {
+            this._playbackProvider.dispose();
+            this._playbackProvider = null;
+            this._savedRealProvider = null;
+            this._playbackState = 'idle';
+        }
         if (this._scene) {
             this.unbindSceneEvents(this._scene);
             this._scene.target = null;
@@ -173,12 +250,12 @@ let BoardViewer = class BoardViewer extends LitElement {
         this.transientShowButtons();
     }
     setupScene({ id, scene }, history) {
-        var _a, _b;
+        var _a;
         this._scene = scene;
         // 2D 모드: model-layer의 fillStyle을 호스트 배경색으로 설정하여 경계를 자연스럽게 함
         // 3D 모드: 3D 공간에서 여백 개념이 없으므로 배경색 설정 불필요
         const backgroundColor = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.state.fillStyle;
-        if (!((_b = this._scene) === null || _b === void 0 ? void 0 : _b.root.state.threed) && typeof backgroundColor === 'string') {
+        if (!this._is3dMode && typeof backgroundColor === 'string') {
             this.style.backgroundColor = backgroundColor;
         }
         else {
@@ -285,7 +362,8 @@ let BoardViewer = class BoardViewer extends LitElement {
     transientShowButtons(stop) {
         var buttons = [];
         !this.hideNavigation && buttons.push(this._next, this._prev);
-        !this.hideFullscreen && buttons.push(this._fullscreen);
+        if (this._fabGroup)
+            buttons.push(this._fabGroup);
         if (buttons.length == 0) {
             return;
         }
@@ -308,7 +386,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
         this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden');
         this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden');
-        this._fullscreen && this._fullscreen.removeAttribute('hidden');
+        this._fabGroup && this._fabGroup.removeAttribute('hidden');
         this._fade_animations.forEach(animation => {
             animation.cancel();
             if (stop)
@@ -346,6 +424,14 @@ let BoardViewer = class BoardViewer extends LitElement {
     onTapFullscreen() {
         togglefullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
     }
+    onTapToggle3D() {
+        var _a, _b;
+        const modelLayer = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.rootModel;
+        if (!(modelLayer === null || modelLayer === void 0 ? void 0 : modelLayer.toggleThreeD))
+            return;
+        modelLayer.toggleThreeD();
+        this.requestUpdate();
+    }
     onRunBoard() {
         this.dispatchEvent(new CustomEvent('run-board', { bubbles: true, composed: true, detail: this.board.id }));
     }
@@ -452,6 +538,122 @@ let BoardViewer = class BoardViewer extends LitElement {
         // clickComponent 이벤트만 발생시킨다.
         window.dispatchEvent(new CustomEvent('clickComponent', { detail: component }));
     }
+    /* playback */
+    /**
+     * 외부에서 플레이백을 활성화한다.
+     * playback-enabled 속성을 설정하면 컨트롤바가 나타나고,
+     * 이 메서드로 시간 범위 등 상세 설정을 할 수 있다.
+     */
+    enablePlayback(config) {
+        this.playbackEnabled = true;
+        if (config === null || config === void 0 ? void 0 : config.timeRange) {
+            this.playbackTimeRange = config.timeRange;
+        }
+    }
+    disablePlayback() {
+        this._stopPlayback();
+        this._playbackActive = false;
+        this.playbackEnabled = false;
+    }
+    _onTogglePlaybackPanel() {
+        if (this._playbackActive) {
+            // 패널 닫기 — 재생 중이면 중지
+            this._stopPlayback();
+            this._playbackActive = false;
+        }
+        else {
+            this._playbackActive = true;
+        }
+    }
+    async _onPlaybackStart(e) {
+        const { fromTime, speed } = e.detail;
+        await this._startPlayback(fromTime, speed);
+    }
+    async _onPlaybackPause() {
+        var _a;
+        await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.pause());
+    }
+    async _onPlaybackResume() {
+        var _a;
+        await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.resume());
+    }
+    _onPlaybackStop() {
+        this._stopPlayback();
+        this._playbackActive = false;
+    }
+    async _onPlaybackSeek(e) {
+        var _a;
+        await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.seek(e.detail.toTime));
+    }
+    async _onPlaybackSpeed(e) {
+        var _a;
+        await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.setSpeed(e.detail.speed));
+    }
+    async _startPlayback(fromTime, speed) {
+        if (!this._scene)
+            return;
+        const rootContainer = this._scene.rootContainer;
+        // 실시간 provider 보관 및 구독 해제
+        if (!this._savedRealProvider) {
+            this._savedRealProvider = rootContainer.app.dataSubscriptionProvider;
+            await this._unsubscribeAll(rootContainer);
+        }
+        // PlaybackProvider 생성
+        this._playbackProvider = new PlaybackProvider((status) => {
+            this._playbackState = status.state;
+            this._playbackSpeed = status.speed;
+            this._playbackCurrentTime = status.currentTime;
+        });
+        // provider 교체 및 재구독
+        rootContainer.app.dataSubscriptionProvider = this._playbackProvider;
+        await this._resubscribeAll(rootContainer);
+        // 플레이백 시작
+        await this._playbackProvider.start(fromTime, speed);
+    }
+    async _stopPlayback() {
+        if (!this._scene || !this._playbackProvider)
+            return;
+        const rootContainer = this._scene.rootContainer;
+        // 플레이백 구독 해제
+        this._playbackProvider.dispose();
+        await this._unsubscribeAll(rootContainer);
+        // 실시간 provider 복귀
+        if (this._savedRealProvider) {
+            rootContainer.app.dataSubscriptionProvider = this._savedRealProvider;
+            await this._resubscribeAll(rootContainer);
+            this._savedRealProvider = null;
+        }
+        this._playbackProvider = null;
+        this._playbackState = 'idle';
+        this._playbackCurrentTime = '';
+        this._playbackSpeed = 1;
+    }
+    /**
+     * 모든 tag 컴포넌트의 기존 구독을 해제한다.
+     */
+    async _unsubscribeAll(rootContainer) {
+        const promises = [];
+        rootContainer.model_layer.traverse((component) => {
+            var _a;
+            if ((_a = component.model) === null || _a === void 0 ? void 0 : _a.tag) {
+                promises.push(rootContainer.unsubscribe(component.model.tag, component));
+            }
+        });
+        await Promise.all(promises);
+    }
+    /**
+     * 모든 tag 컴포넌트를 현재 provider로 재구독한다.
+     */
+    async _resubscribeAll(rootContainer) {
+        const promises = [];
+        rootContainer.model_layer.traverse((component) => {
+            var _a;
+            if ((_a = component.model) === null || _a === void 0 ? void 0 : _a.tag) {
+                promises.push(rootContainer.subscribe(component.model.tag, component));
+            }
+        });
+        await Promise.all(promises);
+    }
     hidePopup() {
         if (this.popup) {
             this.removeChild(this.popup);
@@ -584,11 +786,40 @@ BoardViewer.styles = [
         z-index: 1000;
       }
 
-      #fullscreen {
+      [fab-group] {
         position: absolute;
         bottom: 15px;
         right: 16px;
         z-index: 1000;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 8px;
+      }
+
+      [fab-group] md-fab {
+        --md-fab-container-width: 48px;
+        --md-fab-container-height: 48px;
+      }
+
+      [fab-group] md-fab.main-fab md-icon {
+        transition: transform 0.3s;
+      }
+
+      [fab-group] md-fab.main-fab[expanded] md-icon {
+        transform: rotate(45deg);
+      }
+
+      [fab-group] md-fab.sub-fab {
+        --md-fab-container-width: 40px;
+        --md-fab-container-height: 40px;
+        transform: scale(0);
+        opacity: 0;
+        transition: transform 0.2s, opacity 0.2s;
+      }
+
+      [fab-group][expanded] md-fab.sub-fab {
+        transform: scale(1);
+        opacity: 1;
       }
 
       [hidden] {
@@ -621,6 +852,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], BoardViewer.prototype, "history", void 0);
+__decorate([
+    property({ type: Object })
+], BoardViewer.prototype, "loadTracker", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' })
 ], BoardViewer.prototype, "hideFullscreen", void 0);
@@ -628,20 +862,23 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-navigation' })
 ], BoardViewer.prototype, "hideNavigation", void 0);
 __decorate([
-    state()
-], BoardViewer.prototype, "_scene", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'playback-enabled' })
+], BoardViewer.prototype, "playbackEnabled", void 0);
+__decorate([
+    property({ type: Object, attribute: 'playback-time-range' })
+], BoardViewer.prototype, "playbackTimeRange", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_forward", void 0);
+], BoardViewer.prototype, "_playbackState", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_backward", void 0);
+], BoardViewer.prototype, "_playbackActive", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_oldtarget", void 0);
+], BoardViewer.prototype, "_playbackSpeed", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_fade_animations", void 0);
+], BoardViewer.prototype, "_playbackCurrentTime", void 0);
 __decorate([
     query('#target')
 ], BoardViewer.prototype, "_target", void 0);
@@ -651,9 +888,15 @@ __decorate([
 __decorate([
     query('#next')
 ], BoardViewer.prototype, "_next", void 0);
+__decorate([
+    state()
+], BoardViewer.prototype, "_fabExpanded", void 0);
 __decorate([
     query('#fullscreen')
 ], BoardViewer.prototype, "_fullscreen", void 0);
+__decorate([
+    query('[fab-group]')
+], BoardViewer.prototype, "_fabGroup", void 0);
 BoardViewer = __decorate([
     customElement('ox-board-viewer')
 ], BoardViewer);