@fmsim/board 2.0.0-beta.7 → 2.0.0-beta.75

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

@@ -4,10 +4,12 @@ import '@material/web/icon/icon.js';
 import './layers/movement-layer.js';
 import './ox-board-component-info.js';
 import './layers/mcs-mouse-event-handler.js';
-import { css, html, LitElement } from 'lit';
+import './ox-playback-controls.js';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { create, SCENE_MODE } from '@hatiolab/things-scene';
-import { isIOS, togglefullscreen } from '@operato/utils';
+import { PlaybackEngine } from './playback/playback-engine.js';
+import { create, LoadTracker, LoadingOverlay, SCENE_MODE } from '@hatiolab/things-scene';
+import { isIOS, fullscreen, exitfullscreen, togglefullscreen } from '@operato/utils';
 import { ScrollbarStyles } from '@operato/styles';
 import { DataStorage } from './data-storage/data-storage.js';
 import { runScenario, startScenario, DataSubscriptionProviderImpl, isRestfulAvailable } from '@fmsim/api';
@@ -24,6 +26,8 @@ let BoardViewer = class BoardViewer extends LitElement {
         this._forward = [];
         this._backward = [];
         this._oldtarget = null;
+        this._fabExpanded = false;
+        this._playbackActive = false;
         this.currentBoardId = (_a = this.board) === null || _a === void 0 ? void 0 : _a.id;
         this.popup = null;
         this.lastComponent = null;
@@ -33,7 +37,6 @@ let BoardViewer = class BoardViewer extends LitElement {
             const id = e.detail.value;
             const components = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAll(`#${id}`);
             if (!components || components.length == 0) {
-                console.log('No equipment was found.');
                 return;
             }
             window.dispatchEvent(new CustomEvent('clickComponent', { detail: components[0] }));
@@ -173,22 +176,189 @@ let BoardViewer = class BoardViewer extends LitElement {
             var _a;
             (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.trigger('deco-reset');
         };
+        this._pointerMoveHandler = () => this.transientShowButtons();
+        /**
+         * playback 모드는 전체화면 모드와 한 몸 — 어떤 경로로든 전체화면이 해제되면
+         * playback 도 함께 종료. (단독 전체화면 토글은 기존처럼 동작하도록 `_playbackActive` 가드.)
+         */
+        this._fullscreenChangeHandler = () => {
+            if (!document.fullscreenElement && this._playbackActive) {
+                this._onPlaybackStop();
+            }
+        };
         this.resizeHandler = () => {
             this._scene && this._scene.fit();
         };
+        // ── Data Subscription ──
+        this._dataSubscriptionProvider = isRestfulAvailable() ? undefined : new DataSubscriptionProviderImpl();
+    }
+    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()}
+        var _a, _b;
+        var fabGroup = this.hideFullscreen
+            ? html ``
+            : html `
+            <div
+              fab-group
+              ?expanded=${this._fabExpanded}
               @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 ``;
+            >
+              <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.onTapPlayback(); }}
+                title=${this._playbackActive ? 'stop playback' : 'start playback'}
+              >${this._playbackActive
+                ? html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
+                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
+                      <g transform="translate(-5, 0)">
+                        <path
+                          d="M 52,22 A 28,28 0 1,1 30,40"
+                          fill="none"
+                          stroke="#F87171"
+                          stroke-width="5"
+                          stroke-linecap="round"
+                        />
+                        <path d="M 52,12 L 37,24 L 55,33 Z" fill="#F87171" />
+                      </g>
+                      <rect
+                        x="36"
+                        y="36"
+                        width="28"
+                        height="28"
+                        rx="3"
+                        fill="#F87171"
+                        stroke="#F87171"
+                        stroke-width="3"
+                        stroke-linejoin="round"
+                      />
+                      <text
+                        x="50"
+                        y="53.5"
+                        font-family="Verdana, sans-serif"
+                        font-size="9"
+                        font-weight="900"
+                        fill="#ffffff"
+                        text-anchor="middle"
+                      >OFF</text>
+                    </svg>`
+                : html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
+                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
+                      <g transform="translate(-5, 0)">
+                        <path
+                          d="M 52,22 A 28,28 0 1,1 30,40"
+                          fill="none"
+                          stroke="#F87171"
+                          stroke-width="5"
+                          stroke-linecap="round"
+                        />
+                        <path d="M 52,12 L 37,24 L 55,33 Z" fill="#F87171" />
+                      </g>
+                      <path
+                        d="M 42,35 L 65,50 L 42,65 Z"
+                        fill="#F87171"
+                        stroke="#F87171"
+                        stroke-width="3"
+                        stroke-linejoin="round"
+                      />
+                      <text
+                        x="49.5"
+                        y="53"
+                        font-family="Verdana, sans-serif"
+                        font-size="9"
+                        font-weight="900"
+                        fill="#ffffff"
+                        text-anchor="middle"
+                      >RE:</text>
+                    </svg>`}</md-fab>
+
+              <md-fab
+                class="sub-fab"
+                @click=${() => { this._fabExpanded = false; this.onTapToggle3D(); }}
+                title=${this._is3dMode ? '2D mode' : '3D mode'}
+              >${this._is3dMode
+                ? html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
+                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
+                      <g transform="rotate(55, 50, 50)">
+                        <path
+                          d="M 72,32 A 30,30 0 0,0 38,28"
+                          fill="none"
+                          stroke="#F87171"
+                          stroke-width="5"
+                          stroke-linecap="round"
+                        />
+                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
+                      </g>
+                      <g transform="rotate(235, 50, 50)">
+                        <path
+                          d="M 72,32 A 30,30 0 0,0 38,28"
+                          fill="none"
+                          stroke="#F87171"
+                          stroke-width="5"
+                          stroke-linecap="round"
+                        />
+                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
+                      </g>
+                      <text
+                        x="50"
+                        y="57.5"
+                        font-family="Verdana, sans-serif"
+                        font-size="20"
+                        font-weight="900"
+                        fill="#F87171"
+                        text-anchor="middle"
+                      >2D</text>
+                    </svg>`
+                : html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
+                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
+                      <g transform="rotate(55, 50, 50)">
+                        <path
+                          d="M 72,32 A 30,30 0 0,0 38,28"
+                          fill="none"
+                          stroke="#F87171"
+                          stroke-width="5"
+                          stroke-linecap="round"
+                        />
+                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
+                      </g>
+                      <g transform="rotate(235, 50, 50)">
+                        <path
+                          d="M 72,32 A 30,30 0 0,0 38,28"
+                          fill="none"
+                          stroke="#F87171"
+                          stroke-width="5"
+                          stroke-linecap="round"
+                        />
+                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
+                      </g>
+                      <text
+                        x="50"
+                        y="57.5"
+                        font-family="Verdana, sans-serif"
+                        font-size="20"
+                        font-weight="900"
+                        fill="#F87171"
+                        text-anchor="middle"
+                      >3D</text>
+                    </svg>`}</md-fab>
+            </div>
+          `;
         var prev = !this.hideNavigation
             ? html `
           <md-icon
@@ -216,74 +386,94 @@ let BoardViewer = class BoardViewer extends LitElement {
         return html `
       ${prev}
 
-      <div
-        id="target"
-        @touchstart=${(e) => this.transientShowButtons()}
-        @mousemove=${(e) => this.transientShowButtons()}
-      ></div>
+      <div id="target"></div>
 
       <slot></slot>
-      ${next} ${fullscreen}
+      ${next} ${fabGroup}
+
+      ${this._playbackActive
+            ? html `<ox-playback-controls
+            .playbackState=${((_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.state) === 'playing' ? 'playing' : ((_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.state) === 'paused' ? 'paused' : 'idle'}
+            @playback-start=${this._onPlaybackStart}
+            @playback-pause=${this._onPlaybackPause}
+            @playback-resume=${this._onPlaybackResume}
+            @playback-stop=${this._onPlaybackStop}
+            @playback-seek=${this._onPlaybackSeek}
+            @playback-seek-start=${this._onPlaybackSeekStart}
+            @playback-seek-preview=${this._onPlaybackSeekPreview}
+            @playback-speed=${this._onPlaybackSpeed}
+          ></ox-playback-controls>`
+            : nothing}
     `;
     }
+    /** connect/disconnect 시 일괄 등록/해제할 window 이벤트 목록 (모니터링 연동) */
+    get _monitoringEvents() {
+        return [
+            ['fetchIFactsData', this.fetchIFactsDataHandler], // 장비 아이디 object를 캔버스 가운데로
+            ['fmbShowMovement', this.fmbShowMovementHandler], // Movement Data 표시
+            ['fmbMonitoringInit', this.fmbMonitoringInitHandler], // 보드 상태 정사이즈 복원
+            ['clickComponent', this.clickComponentHandler], // BoardComponentInfo popup
+            ['fmbStartAnimation', this.fmbStartAnimation], // AnimatedIcon 추가/제거
+            ['fmbStopAnimation', this.fmbStopAnimation],
+            ['fmbResetAnimation', this.fmbResetAnimation],
+            ['fmbShowLegend', this.fmbShowLegendHandler], // 범례 표시
+            ['fmbHideLegend', this.fmbHideLegendHandler],
+            ['fmbShowPopup', this.fmbShowPopupHandler], // 팝업 표시
+            ['fmbHidePopup', this.fmbHidePopupHandler],
+            ['fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler], // FloatingContainer
+            ['fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler]
+        ];
+    }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('resize', this.resizeHandler);
+        // 3D 모드에서도 마우스 움직임 감지 (document 레벨, capture phase)
+        document.addEventListener('pointermove', this._pointerMoveHandler, true);
+        document.addEventListener('fullscreenchange', this._fullscreenChangeHandler);
+        document.addEventListener('webkitfullscreenchange', this._fullscreenChangeHandler);
         this.renderRoot.addEventListener('close-scene', e => {
             e.preventDefault();
             this.onTapPrev();
         }, false);
-        // 모니터링에서 장비 아이디에 해당하는 object를 찾아 캔버스 가운데 위치하도록 조정한다.
-        window.addEventListener('fetchIFactsData', this.fetchIFactsDataHandler);
-        // 모니터링에서 Movement Data를 보여준다.
-        window.addEventListener('fmbShowMovement', this.fmbShowMovementHandler);
-        // 모니터링에서 보드 상태를 원래상태 (정사이즈)로 돌려놓는다.
-        window.addEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
-        // BoardComponentInfo popup을 보여준다.
-        window.addEventListener('clickComponent', this.clickComponentHandler);
-        // AnimatedIcon 을 추가하거나 제거한다.
-        window.addEventListener('fmbStartAnimation', this.fmbStartAnimation);
-        window.addEventListener('fmbStopAnimation', this.fmbStopAnimation);
-        window.addEventListener('fmbResetAnimation', this.fmbResetAnimation);
-        // 모니터링에서 범례를 보여준다.
-        window.addEventListener('fmbShowLegend', this.fmbShowLegendHandler);
-        window.addEventListener('fmbHideLegend', this.fmbHideLegendHandler);
-        // 모니터링에서 범례를 보여준다.
-        window.addEventListener('fmbShowPopup', this.fmbShowPopupHandler);
-        window.addEventListener('fmbHidePopup', this.fmbHidePopupHandler);
-        // 모니터링에서 FloatingContainer를 보여준다.
-        window.addEventListener('fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler);
-        window.addEventListener('fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler);
+        for (const [type, handler] of this._monitoringEvents) {
+            window.addEventListener(type, handler);
+        }
     }
     disconnectedCallback() {
+        var _a, _b, _c;
         super.disconnectedCallback();
         window.removeEventListener('resize', this.resizeHandler);
-        // 모니터링에서 장비 아이디에 해당하는 object를 찾아 캔버스 가운데 위치하도록 조정한다.
-        window.removeEventListener('fetchIFactsData', this.fetchIFactsDataHandler);
-        // 모니터링에서 Movement Data를 보여준다.
-        window.removeEventListener('fmbShowMovement', this.fmbShowMovementHandler);
-        // 모니터링에서 보드 상태를 원래상태 (정사이즈)로 돌려놓는다.
-        window.removeEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
-        // BoardComponentInfo popup을 보여준다.
-        window.removeEventListener('clickComponent', this.clickComponentHandler);
-        // AnimatedIcon을 추가하거나 제거한다.
-        window.removeEventListener('fmbStartAnimation', this.fmbStartAnimation);
-        window.removeEventListener('fmbStopAnimation', this.fmbStopAnimation);
-        window.removeEventListener('fmbResetAnimation', this.fmbResetAnimation);
-        // 모니터링에서 범례를 보여준다.
-        window.removeEventListener('fmbShowLegend', this.fmbShowLegendHandler);
-        window.removeEventListener('fmbHideLegend', this.fmbHideLegendHandler);
-        // 모니터링에서 범례를 보여준다.
-        window.removeEventListener('fmbShowPopup', this.fmbShowPopupHandler);
-        window.removeEventListener('fmbHidePopup', this.fmbHidePopupHandler);
-        // 모니터링에서 FloatingContainer를 보여준다.
-        window.removeEventListener('fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler);
-        window.removeEventListener('fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler);
+        document.removeEventListener('pointermove', this._pointerMoveHandler, true);
+        document.removeEventListener('fullscreenchange', this._fullscreenChangeHandler);
+        document.removeEventListener('webkitfullscreenchange', this._fullscreenChangeHandler);
+        for (const [type, handler] of this._monitoringEvents) {
+            window.removeEventListener(type, handler);
+        }
         this.lastComponent = null;
+        // 플레이백이 활성 상태면 명시적 stop (provider resume 포함)
+        if (this._playbackActive) {
+            (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.stop();
+            (_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.detachScene();
+            (_c = this._dataSubscriptionProvider) === null || _c === void 0 ? void 0 : _c.resume();
+            this._playbackActive = false;
+        }
+        if (this._playbackEngine) {
+            this._playbackEngine.dispose();
+            this._playbackEngine = undefined;
+        }
         this.closeScene();
     }
     updated(changes) {
+        // loadTracker가 외부에서 전달되면 즉시 overlay 연결 (fetch 중에도 표시)
+        if (changes.has('loadTracker') && this.loadTracker) {
+            this._ensureOverlay(this.loadTracker);
+        }
         if (changes.has('board')) {
+            // tracker: 외부에서 안 왔으면 여기서 생성
+            if (!this.loadTracker) {
+                this.loadTracker = new LoadTracker();
+                this._ensureOverlay(this.loadTracker);
+            }
             this.hidePopup();
             this.closeScene();
             if (this.board && this.board.id) {
@@ -303,32 +493,42 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
     }
     async initSceneAsync() {
-        if (!this.board || !this.board.id)
+        if (!this.board || !this.board.id || !this.provider)
             return;
-        this._scene = await this.provider.create(this.board.id);
-        this.setupScene({ id: this.board.id, scene: this._scene });
+        try {
+            this._scene = await this.provider.create(this.board.id);
+            this.setupScene({ id: this.board.id, scene: this._scene });
+        }
+        catch (e) {
+            console.error('Failed to load scene:', this.board.id, e);
+        }
     }
     initScene() {
-        if (!this.board || !this.board.id) {
+        if (!this.board || !this.board.id || !this.board.model) {
             return;
         }
         this._scene = create({
-            model: {
-                ...this.board.model
-            },
+            model: JSON.parse(JSON.stringify(this.board.model)),
             style: this.board.style,
             mode: SCENE_MODE.VIEW,
             handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'waypoint-handler'],
             layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }],
             refProvider: this.provider,
             dataStorage: this.board.id !== 'preview' ? new DataStorage(this.board.id) : undefined,
-            dataSubscriptionProvider: isRestfulAvailable() ? undefined : new DataSubscriptionProviderImpl()
+            dataSubscriptionProvider: this._dataSubscriptionProvider,
+            loading: this.loadTracker ? { tracker: this.loadTracker } : undefined
         });
         if (this.baseUrl) {
             this._scene.baseUrl = this.baseUrl;
         }
         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._scene) {
             this.unbindSceneEvents(this._scene);
@@ -348,6 +548,10 @@ let BoardViewer = class BoardViewer extends LitElement {
     }
     setupScene({ id, scene }) {
         var _a;
+        // 플레이백 리셋
+        if (this._playbackActive) {
+            this._onPlaybackStop();
+        }
         this._scene = scene;
         const backgroundColor = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.state.fillStyle;
         if (typeof backgroundColor === 'string') {
@@ -371,7 +575,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         this.transientShowButtons();
     }
     async showScene(boardId, bindingData) {
-        if (!boardId)
+        if (!boardId || !this.provider)
             return;
         try {
             var scene = await this.provider.get(boardId, true);
@@ -424,7 +628,7 @@ let BoardViewer = class BoardViewer extends LitElement {
     transientShowButtons(stop) {
         var buttons = [];
         !this.hideNavigation && buttons.push(this._next, this._prev);
-        !this.hideFullscreen && buttons.push(this._fullscreen);
+        !this.hideFullscreen && buttons.push(this._fabGroup);
         if (buttons.length == 0) {
             return;
         }
@@ -447,7 +651,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)
@@ -485,6 +689,242 @@ let BoardViewer = class BoardViewer extends LitElement {
     onTapFullscreen() {
         togglefullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
     }
+    onTapToggle3D() {
+        var _a, _b, _c;
+        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;
+        const entering3D = !modelLayer.is3dMode;
+        modelLayer.toggleThreeD();
+        this.requestUpdate();
+        // fmsim: 3D 진입 시 자동 회전
+        if (entering3D && ((_c = modelLayer._threeCapability) === null || _c === void 0 ? void 0 : _c.isInitialized)) {
+            modelLayer._threeCapability.controlsManager.reset();
+            modelLayer._threeCapability.controlsManager.setAutoRotate(true);
+        }
+    }
+    onTapPlayback() {
+        var _a;
+        if (this._playbackActive) {
+            this._onPlaybackStop();
+        }
+        else {
+            // 플레이백 시작 시 팝업 닫기
+            this.hidePopup();
+            // 1) 라이브 데이터 구독 실제 종료
+            (_a = this._dataSubscriptionProvider) === null || _a === void 0 ? void 0 : _a.pause();
+            this._unsubscribeSceneData();
+            // 2) 라이브 데이터 초기화 (깨끗한 상태에서 playback 시작)
+            this._resetSceneData();
+            this._playbackActive = true;
+            if (!this._playbackEngine) {
+                this._playbackEngine = new PlaybackEngine();
+                this._playbackEngine.on('frame', ({ time }) => {
+                    const controls = this.renderRoot.querySelector('ox-playback-controls');
+                    if (controls)
+                        controls.currentTime = time;
+                });
+                this._playbackEngine.on('state-change', (state) => {
+                    if (state === 'stopped') {
+                        const controls = this.renderRoot.querySelector('ox-playback-controls');
+                        if (controls)
+                            controls.playbackState = 'stopped';
+                    }
+                    this.requestUpdate();
+                });
+                this._playbackEngine.on('buffer-update', ({ bufferedRanges }) => {
+                    const controls = this.renderRoot.querySelector('ox-playback-controls');
+                    if (controls)
+                        controls.bufferedRanges = bufferedRanges;
+                });
+                if (this._fetchPlaybackData) {
+                    this._playbackEngine.setFetchFunction(this._fetchPlaybackData);
+                }
+            }
+            if (this._scene) {
+                this._playbackEngine.attachScene(this._scene);
+            }
+            this.dispatchEvent(new CustomEvent('playback-toggle', {
+                bubbles: true,
+                composed: true,
+                detail: { active: true }
+            }));
+            // playback 은 전체화면에서만 동작 — 이미 전체화면이면 그대로 유지
+            if (!document.fullscreenElement && !isIOS()) {
+                fullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
+            }
+        }
+    }
+    async _onPlaybackStart(e) {
+        const { fromTime, toTime, speed } = e.detail;
+        if (!this._playbackEngine)
+            return;
+        // toTime is the user-selected window END (= controls' _appliedTo).
+        // The previous hardcoded `fromTime + 1h` ignored the controls'
+        // range selection, so 10m / 30m / Range modes silently played past
+        // the requested window. Falling back to `+1h` only if toTime was
+        // omitted (legacy callers).
+        const endTime = toTime instanceof Date ? toTime : new Date(fromTime.getTime() + 3600000);
+        if (this._scene)
+            this._scene.playbackMode = true;
+        try {
+            await this._playbackEngine.startChunked(fromTime, endTime, speed);
+        }
+        catch (ex) {
+            console.error('[Playback] load failed:', ex);
+        }
+    }
+    _onPlaybackPause() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+    _onPlaybackResume() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.resume();
+    }
+    async _onPlaybackStop() {
+        var _a, _b, _c;
+        const scene = this._scene; // 비동기 구간 scene 교체 감지용 캡처
+        // 1) 즉시: 엔진 정지 + 애니메이션 억제 ON (in-flight 애니메이션 즉시 종료)
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.detachScene();
+        (_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.stop();
+        this._playbackActive = false;
+        if (scene) {
+            scene.suppressAnimations = true;
+            scene.playbackMode = false;
+        }
+        // UI 신호 + fullscreen 해제
+        this.dispatchEvent(new CustomEvent('playback-toggle', {
+            bubbles: true,
+            composed: true,
+            detail: { active: false }
+        }));
+        if (document.fullscreenElement) {
+            exitfullscreen();
+        }
+        // 2) 1초 후: 보드 리셋 + live 구독 재개
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        if (this._playbackActive || this._scene !== scene)
+            return;
+        if (!scene)
+            return;
+        this._resetSceneData();
+        this._resubscribeSceneData();
+        (_c = this._dataSubscriptionProvider) === null || _c === void 0 ? void 0 : _c.resume();
+        // 3) 2초 후 (추가 1초): 억제 해제 — 첫 live batch 가 instant 배치된 뒤 정상 애니메이션 복원
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        if (this._scene === scene) {
+            scene.suppressAnimations = false;
+        }
+    }
+    /**
+     * 플레이백 시작 시: RESTful data-subscription 컴포넌트의 WebSocket 을 실제 disconnect.
+     * GraphQL 경로는 _dataSubscriptionProvider.pause() 에서 일괄 처리.
+     */
+    _unsubscribeSceneData() {
+        var _a;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // RESTful data-subscription 컴포넌트 — 자체 WebSocket disconnect
+            if (c.subscription) {
+                try {
+                    c.subscription.unsubscribe();
+                }
+                catch (_a) { }
+                c.subscription = null;
+            }
+            if (c.client) {
+                try {
+                    c.client.unsubscribeAll();
+                    c.client.close(true);
+                }
+                catch (_b) { }
+                c.client = null;
+            }
+        });
+    }
+    /**
+     * 플레이백 종료 시: RESTful data-subscription 컴포넌트의 WebSocket 을 재연결.
+     * GraphQL 경로는 _dataSubscriptionProvider.resume() 에서 일괄 처리.
+     */
+    _resubscribeSceneData() {
+        var _a;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // RESTful data-subscription 컴포넌트 — WebSocket 재연결
+            if (typeof c.requestData === 'function' && !c.client) {
+                c.requestData();
+            }
+        });
+    }
+    _resetSceneData() {
+        var _a, _b, _c, _d;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // null 대신 {} 로 리셋 — typeof null === 'object' 함정 회피 + destructuring 안전 +
+            // statusColor 등 data?.X 형태 getter 가 자연스럽게 default 로 폴백
+            try {
+                if ('data' in c)
+                    c.data = {};
+            }
+            catch (_a) { }
+            // 차량 등의 위치 캐시 초기화 — 없으면 이전 waypoint 경로로 스냅백되는 잔상 발생
+            if ('lastWaypoint' in c)
+                c.lastWaypoint = undefined;
+        });
+        // vehicle 의 waypoint 이동 애니메이션 전체 중단
+        // (Animation.stepAnimation 의 suppress 체크만으로는 WaypointHandler 의 animatorMap 이
+        //  완전히 비워지지 않을 수 있어 명시적 reset)
+        if ((_b = root.waypointHandler) === null || _b === void 0 ? void 0 : _b.reset)
+            root.waypointHandler.reset();
+        // 모든 decorator 제거 — bouncing-arrow/border-highlighting 같은 SVG 애니메이션 decorator 는
+        // decorator-registry 가 붙잡고 있어 data=null 만으로는 제거되지 않음. 명시적 reset 필요.
+        try {
+            root.trigger('deco-reset');
+        }
+        catch (_e) { }
+        if ((_c = root.carrierManager) === null || _c === void 0 ? void 0 : _c.dispose)
+            root.carrierManager.dispose();
+        if ((_d = root.transitionEffect) === null || _d === void 0 ? void 0 : _d.dispose)
+            root.transitionEffect.dispose();
+    }
+    _onPlaybackSeek(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.seekTo(e.detail.toTime);
+    }
+    /**
+     * 드래그 시작 신호 — 엔진의 재생 타이머 정지해서 스크러빙 동안
+     * scene 이 엔진 시간으로 독립 갱신되지 않도록 함. _state 는 유지되므로
+     * 드래그 종료 시 seekTo 가 원래 재생/일시정지 상태로 복원.
+     */
+    _onPlaybackSeekStart() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.pauseForSeek();
+    }
+    /**
+     * 드래그 중 디바운스된 seek preview. 해당 시간의 snapshot 만 scene 에 적용.
+     * 보드 리셋 없음, 애니메이션 억제.
+     */
+    _onPlaybackSeekPreview(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.seekPreview(e.detail.toTime);
+    }
+    _onPlaybackSpeed(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.setSpeed(e.detail.speed);
+    }
     onRunBoard() {
         this.dispatchEvent(new CustomEvent('run-board', { bubbles: true, composed: true, detail: this.board.id }));
     }
@@ -578,6 +1018,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
         if (this.popup) {
             this.popup.component = component;
+            this.popup.playbackMode = this._playbackActive;
         }
     }
     hidePopup() {
@@ -643,10 +1084,58 @@ BoardViewer.styles = [
         right: 5px;
       }
 
-      #fullscreen {
+      [fab-group] {
         position: absolute;
         bottom: 15px;
         right: 16px;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        gap: 12px;
+        z-index: 1000;
+      }
+
+      [fab-group] md-fab {
+        transition: transform 0.2s ease, opacity 0.2s ease;
+      }
+
+      [fab-group] md-fab.main-fab md-icon {
+        transition: transform 0.3s ease;
+      }
+
+      [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;
+        --md-icon-size: 20px;
+        transform: scale(0);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      /* SVG icon 은 fab 전체 크기로 — 자체 원이 fab 표면을 대체. */
+      [fab-group] md-fab.sub-fab svg[slot="icon"] {
+        width: 40px;
+        height: 40px;
+        display: block;
+      }
+
+      [fab-group][expanded] md-fab.sub-fab {
+        transform: scale(1);
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      [fab-group] md-fab.sub-fab[disabled] {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+
+      ox-playback-controls {
+        transition: opacity 0.3s ease;
       }
 
       [hidden] {
@@ -693,6 +1182,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], BoardViewer.prototype, "values", 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);
@@ -701,19 +1193,10 @@ __decorate([
 ], BoardViewer.prototype, "hideNavigation", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_scene", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_forward", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_backward", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_oldtarget", void 0);
+], BoardViewer.prototype, "_fabExpanded", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_fade_animations", void 0);
+], BoardViewer.prototype, "_playbackActive", void 0);
 __decorate([
     query('#target')
 ], BoardViewer.prototype, "_target", void 0);
@@ -724,8 +1207,11 @@ __decorate([
     query('#next')
 ], BoardViewer.prototype, "_next", void 0);
 __decorate([
-    query('#fullscreen')
-], BoardViewer.prototype, "_fullscreen", void 0);
+    query('[fab-group]')
+], BoardViewer.prototype, "_fabGroup", void 0);
+__decorate([
+    property({ attribute: false })
+], BoardViewer.prototype, "_fetchPlaybackData", void 0);
 BoardViewer = __decorate([
     customElement('ox-board-viewer')
 ], BoardViewer);