@fmsim/board 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -3,8 +3,9 @@ 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 './ox-playback-controls.js';
 import { LitElement, PropertyValues } from 'lit';
-import { Component, ReferenceProvider } from '@hatiolab/things-scene';
+import { Component, LoadTracker, ReferenceProvider } from '@hatiolab/things-scene';
 export declare class BoardViewer extends LitElement {
     static styles: import("lit").CSSResult[];
     baseUrl: string;
@@ -12,6 +13,8 @@ export declare class BoardViewer extends LitElement {
     provider: ReferenceProvider | null;
     data: any;
     values: any;
+    /** 앱에서 미리 생성한 LoadTracker — fetch 시작 전 생성하면 네트워크 시간도 추적 */
+    loadTracker?: LoadTracker;
     hideFullscreen: boolean;
     hideNavigation: boolean;
     _scene: any;
@@ -23,13 +26,17 @@ export declare class BoardViewer extends LitElement {
         id: string;
         scene: any;
     }[];
+    private _loadingOverlay?;
     _oldtarget: HTMLElement | null;
     _fade_animations?: Array<Animation>;
+    _fabExpanded: boolean;
+    _playbackActive: boolean;
+    get _is3dMode(): boolean;
     currentBoardId?: string;
     _target: HTMLElement;
     _prev: HTMLElement;
     _next: HTMLElement;
-    _fullscreen: HTMLElement;
+    _fabGroup: HTMLElement;
     private popup;
     private lastComponent;
     render(): import("lit-html").TemplateResult<1>;
@@ -46,11 +53,13 @@ export declare class BoardViewer extends LitElement {
     fmbStartAnimation: (e: Event) => void;
     fmbStopAnimation: (e: Event) => void;
     fmbResetAnimation: () => void;
+    private _pointerMoveHandler;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changes: PropertyValues<this>): void;
     initSceneAsync(): Promise<void>;
     initScene(): void;
+    private _ensureOverlay;
     closeScene(): void;
     releaseScene(): void;
     setupScene({ id, scene }: {
@@ -65,6 +74,17 @@ export declare class BoardViewer extends LitElement {
     onTapNext(): void;
     onTapPrev(): void;
     onTapFullscreen(): void;
+    onTapToggle3D(): void;
+    private _playbackEngine?;
+    onTapPlayback(): void;
+    private _onPlaybackStart;
+    private _onPlaybackPause;
+    private _onPlaybackResume;
+    private _onPlaybackStop;
+    private _onPlaybackSeek;
+    private _onPlaybackSpeed;
+    /** 페이지에서 주입하는 playback 데이터 fetch 함수 */
+    _fetchPlaybackData?: (startTime: string, endTime: string) => Promise<any>;
     onRunBoard(): void;
     onLinkGoto(targetBoardId: string, options: any, fromComponent: any): void;
     onLinkOpen(url: string, value: any, fromComponent: Component): void;

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

@@ -4,9 +4,11 @@ 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 { PlaybackEngine } from './playback/playback-engine.js';
+import { create, LoadTracker, LoadingOverlay, SCENE_MODE } from '@hatiolab/things-scene';
 import { isIOS, togglefullscreen } from '@operato/utils';
 import { ScrollbarStyles } from '@operato/styles';
 import { DataStorage } from './data-storage/data-storage.js';
@@ -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,20 +176,50 @@ 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();
         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.state) === null || _c === void 0 ? void 0 : _c.threed);
+    }
     render() {
-        var fullscreen = !isIOS() && !this.hideFullscreen
+        var _a, _b;
+        var fabGroup = !isIOS() && !this.hideFullscreen
             ? html `
-            <md-fab
-              id="fullscreen"
-              @click=${(e) => this.onTapFullscreen()}
+            <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>
+            >
+              <md-fab
+                class="main-fab"
+                ?expanded=${this._fabExpanded}
+                @click=${() => { this._fabExpanded = !this._fabExpanded; }}
+                title="menu"
+              ><md-icon slot="icon">add</md-icon></md-fab>
+
+              <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'}
+              ><md-icon slot="icon">${this._playbackActive ? 'stop' : 'replay'}</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>
+            </div>
           `
             : html ``;
         var prev = !this.hideNavigation
@@ -216,19 +249,29 @@ 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-speed=${this._onPlaybackSpeed}
+          ></ox-playback-controls>`
+            : nothing}
     `;
     }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('resize', this.resizeHandler);
+        // 3D 모드에서도 마우스 움직임 감지 (document 레벨, capture phase)
+        document.addEventListener('pointermove', this._pointerMoveHandler, true);
         this.renderRoot.addEventListener('close-scene', e => {
             e.preventDefault();
             this.onTapPrev();
@@ -258,6 +301,7 @@ let BoardViewer = class BoardViewer extends LitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener('resize', this.resizeHandler);
+        document.removeEventListener('pointermove', this._pointerMoveHandler, true);
         // 모니터링에서 장비 아이디에 해당하는 object를 찾아 캔버스 가운데 위치하도록 조정한다.
         window.removeEventListener('fetchIFactsData', this.fetchIFactsDataHandler);
         // 모니터링에서 Movement Data를 보여준다.
@@ -280,10 +324,25 @@ let BoardViewer = class BoardViewer extends LitElement {
         window.removeEventListener('fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler);
         window.removeEventListener('fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler);
         this.lastComponent = null;
+        // 플레이백 정리
+        if (this._playbackEngine) {
+            this._playbackEngine.dispose();
+            this._playbackEngine = undefined;
+        }
+        this._playbackActive = false;
         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) {
@@ -322,13 +381,20 @@ let BoardViewer = class BoardViewer extends LitElement {
             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: isRestfulAvailable() ? undefined : new DataSubscriptionProviderImpl(),
+            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 +414,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') {
@@ -424,7 +494,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 +517,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 +555,109 @@ let BoardViewer = class BoardViewer extends LitElement {
     onTapFullscreen() {
         togglefullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
     }
+    onTapToggle3D() {
+        var _a;
+        if (!this._scene)
+            return;
+        const root = this._scene.root;
+        if (!root)
+            return;
+        const entering3D = !this._is3dMode;
+        root.set('threed', entering3D);
+        this.requestUpdate();
+        if (entering3D) {
+            const capability = (_a = root.rootModel) === null || _a === void 0 ? void 0 : _a._threeCapability;
+            if (capability === null || capability === void 0 ? void 0 : capability.isInitialized) {
+                capability.controlsManager.reset();
+                capability.controlsManager.setAutoRotate(true);
+            }
+        }
+    }
+    onTapPlayback() {
+        if (this._playbackActive) {
+            this._onPlaybackStop();
+        }
+        else {
+            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();
+                });
+            }
+            if (this._scene) {
+                this._playbackEngine.attachScene(this._scene);
+            }
+            this.dispatchEvent(new CustomEvent('playback-toggle', {
+                bubbles: true,
+                composed: true,
+                detail: { active: true }
+            }));
+        }
+    }
+    async _onPlaybackStart(e) {
+        var _a;
+        const { fromTime, speed } = e.detail;
+        if (!this._playbackEngine)
+            return;
+        const endTime = new Date(fromTime.getTime() + 3600000);
+        const fmt = (d) => {
+            const pad = (n) => String(n).padStart(2, '0');
+            return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+        };
+        // 라이브 데이터 구독 일시 중단
+        this.dispatchEvent(new CustomEvent('playback-live-pause', { bubbles: true, composed: true }));
+        try {
+            // fetchPlayback은 페이지에서 주입 (api 패키지 의존 방지)
+            const result = await ((_a = this._fetchPlaybackData) === null || _a === void 0 ? void 0 : _a.call(this, fmt(fromTime), fmt(endTime)));
+            if ((result === null || result === void 0 ? void 0 : result.status) && result.playback) {
+                this._playbackEngine.loadData(result.playback.scenarios);
+                this._playbackEngine.play(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();
+    }
+    _onPlaybackStop() {
+        var _a, _b;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.stop();
+        (_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.detachScene();
+        this._playbackActive = false;
+        // 라이브 데이터 구독 재개
+        this.dispatchEvent(new CustomEvent('playback-live-resume', { bubbles: true, composed: true }));
+        this.dispatchEvent(new CustomEvent('playback-toggle', {
+            bubbles: true,
+            composed: true,
+            detail: { active: false }
+        }));
+    }
+    _onPlaybackSeek(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.seekTo(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 }));
     }
@@ -643,10 +816,51 @@ 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;
+      }
+
+      [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 +907,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);
@@ -714,6 +931,12 @@ __decorate([
 __decorate([
     state()
 ], BoardViewer.prototype, "_fade_animations", void 0);
+__decorate([
+    state()
+], BoardViewer.prototype, "_fabExpanded", void 0);
+__decorate([
+    state()
+], BoardViewer.prototype, "_playbackActive", void 0);
 __decorate([
     query('#target')
 ], BoardViewer.prototype, "_target", void 0);
@@ -724,8 +947,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);