npm - @fmsim/board - Versions diffs - 2.0.0-beta.9 → 2.0.0-beta.92 - Mend

@fmsim/board 2.0.0-beta.9 → 2.0.0-beta.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/dist/src/playback/playback-engine.js ADDED Viewed

@@ -0,0 +1,395 @@
+/**
+ * PlaybackEngine — YouTube 스트리밍 방식의 청크 기반 플레이백
+ *
+ * - 10분 단위로 데이터를 fetch하여 버퍼에 적재
+ * - 남은 데이터 1분 이하 시 다음 10분 prefetch
+ * - seek 시 기존 버퍼 폐기 후 fresh fetch (보드 리셋 없음 — snapshot 이 모든 data 덮어씀)
+ * - seekPreview: count=1 snapshot 만 요청해 scene 에 적용 (드래그 스크러빙)
+ * - pauseForSeek / seekTo 가 scene.suppressAnimations 를 ON/OFF 토글
+ * - setInterval 기반 프레임 진행 (배속 반영)
+ */
+const CHUNK_DURATION = 10 * 60 * 1000; // 10분
+const PREFETCH_THRESHOLD = 1 * 60 * 1000; // 1분
+export class PlaybackEngine {
+    constructor() {
+        this._state = 'idle';
+        this._frames = [];
+        this._currentIndex = 0;
+        this._speed = 1;
+        this._scene = null;
+        this._scenarioNames = [];
+        this._listeners = new Map();
+        this._prefetching = false;
+        this._bufferedEnd = 0;
+    }
+    // ── 공개 API ──
+    get state() { return this._state; }
+    get currentIndex() { return this._currentIndex; }
+    get totalFrames() { return this._frames.length; }
+    get currentTime() { var _a, _b; return (_b = (_a = this._frames[this._currentIndex]) === null || _a === void 0 ? void 0 : _a.time) !== null && _b !== void 0 ? _b : null; }
+    get scenarioNames() { return this._scenarioNames; }
+    /**
+     * fetch 함수 주입 (페이지에서 제공)
+     * - 2-arg 호출: 청크 프리페치 (includeSnapshot 기본 true)
+     * - 4-arg 호출: 프리뷰용 snapshot-only (count=1)
+     */
+    setFetchFunction(fn) {
+        this._fetchFn = fn;
+    }
+    /**
+     * 청크 기반 시작: fromTime에서 10분 분량을 가져와 재생 시작
+     */
+    async startChunked(fromTime, endTime, speed = 1) {
+        this._stopTimer();
+        this._frames = [];
+        this._currentIndex = 0;
+        this._speed = speed;
+        this._totalRange = { from: fromTime.getTime(), to: endTime.getTime() };
+        this._bufferedEnd = 0;
+        this._prefetching = false;
+        this._setState('loading');
+        const chunkEnd = Math.min(fromTime.getTime() + CHUNK_DURATION, endTime.getTime());
+        await this._fetchAndAppend(fromTime.getTime(), chunkEnd);
+        if (this._frames.length === 0) {
+            this._setState('stopped');
+            return;
+        }
+        // 첫 프레임 즉시 적용
+        this._applyCurrentFrame();
+        this._setState('playing');
+        this._startTimer();
+    }
+    /**
+     * 이전 방식 호환: 전체 데이터를 한번에 로드
+     */
+    loadData(scenarios) {
+        this._setState('loading');
+        this._mergeScenarios(scenarios);
+        this._currentIndex = 0;
+        this._setState('stopped');
+        this._emit('load-complete', {
+            totalFrames: this._frames.length,
+            scenarios: this._scenarioNames
+        });
+    }
+    attachScene(scene) {
+        this._scene = scene;
+    }
+    detachScene() {
+        this._scene = null;
+    }
+    play(speed) {
+        if (this._frames.length === 0)
+            return;
+        if (speed != null)
+            this._speed = speed;
+        this._applyCurrentFrame();
+        this._setState('playing');
+        this._startTimer();
+    }
+    pause() {
+        this._stopTimer();
+        this._setState('paused');
+    }
+    resume() {
+        if (this._state !== 'paused')
+            return;
+        this._setState('playing');
+        this._startTimer();
+    }
+    stop() {
+        this._stopTimer();
+        this._currentIndex = 0;
+        this._frames = [];
+        this._bufferedEnd = 0;
+        this._prefetching = false;
+        this._speed = 1; // 다음 세션이 기본 1x 로 시작하도록 리셋
+        this._setState('stopped');
+    }
+    setSpeed(speed) {
+        this._speed = speed;
+        if (this._state === 'playing') {
+            this._stopTimer();
+            this._startTimer();
+        }
+    }
+    /**
+     * seek — 기존 버퍼 폐기 + 새 위치에서 snapshot+delta fresh fetch.
+     * 보드 상태 리셋 없음 — snapshot 이 모든 컴포넌트 data 를 덮어쓰므로 불필요.
+     * (드래그로 들어온 경우 pauseForSeek 에서 이미 suppressAnimations = true)
+     */
+    async seekTo(time) {
+        const wasPlaying = this._state === 'playing';
+        this._stopTimer();
+        // 버퍼 전체 폐기
+        this._frames = [];
+        this._currentIndex = 0;
+        this._bufferedEnd = 0;
+        this._prefetching = false;
+        if (this._fetchFn && this._totalRange) {
+            this._setState('loading');
+            const chunkEnd = Math.min(time.getTime() + CHUNK_DURATION, this._totalRange.to);
+            await this._fetchAndAppend(time.getTime(), chunkEnd);
+            // 첫 프레임 적용
+            if (this._frames.length > 0) {
+                this._applyCurrentFrame();
+                this._emitFrame();
+            }
+        }
+        else {
+            // 이전 방식: 메모리 내 탐색 (fallback, 사용되지 않음)
+            const target = this._formatTime(time);
+            for (let i = 0; i < this._frames.length; i++) {
+                if (this._frames[i].time <= target) {
+                    this._currentIndex = i;
+                }
+                else {
+                    break;
+                }
+            }
+            this._applyCurrentFrame();
+        }
+        if (wasPlaying && this._frames.length > 0) {
+            this._setState('playing');
+            this._startTimer();
+        }
+        else if (this._frames.length > 0) {
+            this._setState('paused');
+        }
+        // 드래그 종료 — 애니메이션 억제 OFF
+        if (this._scene)
+            this._scene.suppressAnimations = false;
+    }
+    /**
+     * 드래그 시작: 재생 타이머 정지 + 애니메이션 억제 ON.
+     * 논리 상태(_state)는 유지 — seekTo 가 상태 기반으로 타이머 복원.
+     */
+    pauseForSeek() {
+        this._stopTimer();
+        if (this._scene)
+            this._scene.suppressAnimations = true;
+    }
+    /**
+     * seekPreview — 드래그 중 호출. 해당 시간의 snapshot 1프레임만 요청해서
+     * 현재 보드에 적용. 버퍼/상태 변경 없음.
+     * (pauseForSeek 에서 이미 suppressAnimations = true 가 걸려 있음)
+     */
+    async seekPreview(time) {
+        var _a, _b, _c;
+        if (!this._fetchFn || !this._scene)
+            return;
+        try {
+            // count=1 로 해당 시점의 snapshot 한 프레임만 요청
+            const result = await this._fetchFn(this._formatTime(time), undefined, true, // includeSnapshot
+            1 // count
+            );
+            // await 동안 scene 이 detach 된 경우 무시 (stop/dispose)
+            if (!this._scene)
+                return;
+            if (!(result === null || result === void 0 ? void 0 : result.status) || !result.playback)
+                return;
+            const scenarios = result.playback.scenarios;
+            if (!(scenarios === null || scenarios === void 0 ? void 0 : scenarios.length))
+                return;
+            for (const scenario of scenarios) {
+                const frame = (_a = scenario.snapshots) === null || _a === void 0 ? void 0 : _a[0];
+                if (!(frame === null || frame === void 0 ? void 0 : frame.data))
+                    continue;
+                for (const record of frame.data) {
+                    if (!(record === null || record === void 0 ? void 0 : record.NAME))
+                        continue;
+                    const components = ((_c = (_b = this._scene) === null || _b === void 0 ? void 0 : _b.findAllById) === null || _c === void 0 ? void 0 : _c.call(_b, record.NAME)) || [];
+                    for (const component of components) {
+                        component.data = record;
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error('[PlaybackEngine] seekPreview error:', e);
+        }
+    }
+    on(event, listener) {
+        if (!this._listeners.has(event))
+            this._listeners.set(event, new Set());
+        this._listeners.get(event).add(listener);
+    }
+    off(event, listener) {
+        var _a;
+        (_a = this._listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(listener);
+    }
+    dispose() {
+        this._stopTimer();
+        if (this._scene)
+            this._scene.suppressAnimations = false;
+        this._scene = null;
+        this._frames = [];
+        this._listeners.clear();
+    }
+    // ── 내부: 청크 관리 ──
+    async _fetchAndAppend(fromMs, toMs) {
+        if (!this._fetchFn)
+            return;
+        try {
+            const result = await this._fetchFn(this._formatTime(new Date(fromMs)), this._formatTime(new Date(toMs)));
+            // stop 후 응답이 돌아온 경우 무시 (잔여 diff 프레임 방지)
+            if (this._state === 'stopped')
+                return;
+            if ((result === null || result === void 0 ? void 0 : result.status) && result.playback) {
+                this._appendScenarios(result.playback.scenarios);
+                this._bufferedEnd = Math.max(this._bufferedEnd, toMs);
+                this._emitBufferUpdate();
+            }
+        }
+        catch (e) {
+            console.error('[PlaybackEngine] chunk fetch error:', e);
+            this._emit('error', String(e));
+        }
+    }
+    _appendScenarios(scenarios) {
+        if (!this._scenarioNames.length) {
+            this._scenarioNames = scenarios.map(s => s.scenarioName);
+        }
+        const existingTimes = new Set(this._frames.map(f => f.time));
+        for (const scenario of scenarios) {
+            for (const frame of scenario.snapshots) {
+                if (existingTimes.has(frame.time)) {
+                    // 기존 프레임에 시나리오 데이터 추가
+                    const existing = this._frames.find(f => f.time === frame.time);
+                    if (existing) {
+                        existing.data.set(scenario.scenarioName, frame.data);
+                    }
+                }
+                else {
+                    const data = new Map();
+                    data.set(scenario.scenarioName, frame.data);
+                    this._frames.push({
+                        time: frame.time,
+                        timeMs: new Date(frame.time.replace(' ', 'T')).getTime() || new Date(frame.time).getTime(),
+                        data
+                    });
+                    existingTimes.add(frame.time);
+                }
+            }
+        }
+        // 시간순 재정렬
+        this._frames.sort((a, b) => a.time.localeCompare(b.time));
+    }
+    _mergeScenarios(scenarios) {
+        this._scenarioNames = scenarios.map(s => s.scenarioName);
+        this._frames = [];
+        this._appendScenarios(scenarios);
+    }
+    async _checkPrefetch() {
+        if (this._prefetching || !this._fetchFn || !this._totalRange)
+            return;
+        const currentFrame = this._frames[this._currentIndex];
+        if (!currentFrame)
+            return;
+        const remaining = this._bufferedEnd - currentFrame.timeMs;
+        if (remaining <= PREFETCH_THRESHOLD && this._bufferedEnd < this._totalRange.to) {
+            this._prefetching = true;
+            try {
+                const chunkEnd = Math.min(this._bufferedEnd + CHUNK_DURATION, this._totalRange.to);
+                await this._fetchAndAppend(this._bufferedEnd, chunkEnd);
+            }
+            finally {
+                this._prefetching = false;
+            }
+        }
+    }
+    // ── 내부: 타이머 ──
+    _startTimer() {
+        this._stopTimer();
+        const intervalMs = 1000 / this._speed;
+        this._timer = window.setInterval(() => {
+            this._currentIndex++;
+            if (this._currentIndex >= this._frames.length) {
+                // 버퍼 끝 도달
+                if (this._totalRange && this._bufferedEnd < this._totalRange.to) {
+                    // 아직 더 가져올 데이터 있음 — 대기
+                    this._currentIndex = this._frames.length - 1;
+                    this._checkPrefetch();
+                    return;
+                }
+                // 전체 재생 완료
+                this._currentIndex = this._frames.length - 1;
+                this._stopTimer();
+                this._setState('stopped');
+                return;
+            }
+            this._applyCurrentFrame();
+            this._emitFrame();
+            // prefetch 체크 (비동기)
+            this._checkPrefetch();
+        }, intervalMs);
+    }
+    _stopTimer() {
+        if (this._timer != null) {
+            clearInterval(this._timer);
+            this._timer = undefined;
+        }
+    }
+    // ── 내부: 프레임 적용 ──
+    _applyCurrentFrame() {
+        this._applyFrame(this._currentIndex);
+        this._emitFrame();
+    }
+    _applyFrame(index) {
+        var _a, _b;
+        // detach 후(=stop 경로) scene 이 null 이면 no-op
+        const frame = this._frames[index];
+        if (!frame || !this._scene)
+            return;
+        for (const [_scenarioName, records] of frame.data) {
+            for (const record of records) {
+                if (!record.NAME)
+                    continue;
+                const components = ((_b = (_a = this._scene).findAllById) === null || _b === void 0 ? void 0 : _b.call(_a, record.NAME)) || [];
+                for (const component of components) {
+                    component.data = record;
+                }
+            }
+        }
+    }
+    _emitFrame() {
+        const frame = this._frames[this._currentIndex];
+        if (frame) {
+            this._emit('frame', {
+                time: frame.time,
+                index: this._currentIndex,
+                total: this._frames.length
+            });
+        }
+    }
+    _emitBufferUpdate() {
+        if (!this._totalRange)
+            return;
+        const ranges = [];
+        if (this._frames.length > 0) {
+            ranges.push({
+                from: this._frames[0].timeMs,
+                to: this._bufferedEnd
+            });
+        }
+        this._emit('buffer-update', { bufferedRanges: ranges });
+    }
+    // ── 유틸 ──
+    _setState(state) {
+        this._state = state;
+        this._emit('state-change', state);
+    }
+    _emit(event, detail) {
+        const listeners = this._listeners.get(event);
+        if (listeners) {
+            for (const fn of listeners) {
+                fn(detail);
+            }
+        }
+    }
+    _formatTime(date) {
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+    }
+}
+//# sourceMappingURL=playback-engine.js.map

package/dist/src/playback/playback-engine.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"playback-engine.js","sourceRoot":"","sources":["../../../src/playback/playback-engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAwBH,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA,CAAC,MAAM;AAC5C,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,CAAA,CAAC,KAAK;AAE9C,MAAM,OAAO,cAAc;IAA3B;QACU,WAAM,GAAkB,MAAM,CAAA;QAC9B,YAAO,GAAkB,EAAE,CAAA;QAC3B,kBAAa,GAAG,CAAC,CAAA;QAEjB,WAAM,GAAG,CAAC,CAAA;QACV,WAAM,GAAQ,IAAI,CAAA;QAClB,mBAAc,GAAa,EAAE,CAAA;QAC7B,eAAU,GAAG,IAAI,GAAG,EAAyB,CAAA;QAW7C,iBAAY,GAAG,KAAK,CAAA;QACpB,iBAAY,GAAG,CAAC,CAAA;IA2Z1B,CAAC;IAzZC,eAAe;IAEf,IAAI,KAAK,KAAoB,OAAO,IAAI,CAAC,MAAM,CAAA,CAAC,CAAC;IACjD,IAAI,YAAY,KAAa,OAAO,IAAI,CAAC,aAAa,CAAA,CAAC,CAAC;IACxD,IAAI,WAAW,KAAa,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA,CAAC,CAAC;IACxD,IAAI,WAAW,iBAAoB,OAAO,MAAA,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,0CAAE,IAAI,mCAAI,IAAI,CAAA,CAAC,CAAC;IAC1F,IAAI,aAAa,KAAe,OAAO,IAAI,CAAC,cAAc,CAAA,CAAC,CAAC;IAE5D;;;;OAIG;IACH,gBAAgB,CACd,EAKiB;QAEjB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;IACpB,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,YAAY,CAAC,QAAc,EAAE,OAAa,EAAE,QAAgB,CAAC;QACjE,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;QACtB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,WAAW,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,CAAA;QACtE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAA;QACrB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;QAEzB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QAEzB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,cAAc,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,CAAA;QACjF,MAAM,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,CAAA;QAExD,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACzB,OAAM;QACR,CAAC;QAED,cAAc;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACzB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACzB,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED;;OAEG;IACH,QAAQ,CAAC,SAA6B;QACpC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACzB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;QAC/B,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;QACtB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACzB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE;YAC1B,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAChC,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC,CAAA;IACJ,CAAC;IAED,WAAW,CAAC,KAAU;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;IACrB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACpB,CAAC;IAED,IAAI,CAAC,KAAc;QACjB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QACrC,IAAI,KAAK,IAAI,IAAI;YAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACtC,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACzB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACzB,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAM;QACpC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACzB,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,IAAI;QACF,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;QACtB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAA;QACrB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA,CAAE,0BAA0B;QAC3C,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;IAC3B,CAAC;IAED,QAAQ,CAAC,KAAa;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAA;YACjB,IAAI,CAAC,WAAW,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,MAAM,CAAC,IAAU;QACrB,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,CAAA;QAC5C,IAAI,CAAC,UAAU,EAAE,CAAA;QAEjB,WAAW;QACX,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;QACtB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAA;QACrB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;QAEzB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;YAC/E,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,CAAA;YAEpD,WAAW;YACX,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAA;gBACzB,IAAI,CAAC,UAAU,EAAE,CAAA;YACnB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;YACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC7C,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,MAAM,EAAE,CAAC;oBACnC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;gBACxB,CAAC;qBAAM,CAAC;oBACN,MAAK;gBACP,CAAC;YACH,CAAC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAA;QAC3B,CAAC;QAED,IAAI,UAAU,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACzB,IAAI,CAAC,WAAW,EAAE,CAAA;QACpB,CAAC;aAAM,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC1B,CAAC;QAED,wBAAwB;QACxB,IAAI,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,GAAG,KAAK,CAAA;IACzD,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,IAAI,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,GAAG,IAAI,CAAA;IACxD,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,WAAW,CAAC,IAAU;;QAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QAE1C,IAAI,CAAC;YACH,sCAAsC;YACtC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EACtB,SAAS,EACT,IAAI,EAAE,kBAAkB;YACxB,CAAC,CAAK,QAAQ;aACf,CAAA;YACD,iDAAiD;YACjD,IAAI,CAAC,IAAI,CAAC,MAAM;gBAAE,OAAM;YACxB,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAA,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAAE,OAAM;YAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,SAA+B,CAAA;YACjE,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAA;gBAAE,OAAM;YAE9B,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;gBACjC,MAAM,KAAK,GAAG,MAAA,QAAQ,CAAC,SAAS,0CAAG,CAAC,CAAC,CAAA;gBACrC,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA;oBAAE,SAAQ;gBAC1B,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,IAAa,EAAE,CAAC;oBACzC,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA;wBAAE,SAAQ;oBAC3B,MAAM,UAAU,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,mDAAG,MAAM,CAAC,IAAI,CAAC,KAAI,EAAE,CAAA;oBAChE,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;wBACnC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAA;oBACzB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,CAAC,CAAC,CAAA;QACzD,CAAC;IACH,CAAC;IAED,EAAE,CAAmC,KAAQ,EAAE,QAA6B;QAC1E,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,GAAG,EAAE,CAAC,CAAA;QACtE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC3C,CAAC;IAED,GAAG,CAAmC,KAAQ,EAAE,QAA6B;;QAC3E,MAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,0CAAE,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC9C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,IAAI,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,GAAG,KAAK,CAAA;QACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QAClB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;IACzB,CAAC;IAED,kBAAkB;IAEV,KAAK,CAAC,eAAe,CAAC,MAAc,EAAE,IAAY;QACxD,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAE1B,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YACxG,wCAAwC;YACxC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;gBAAE,OAAM;YACrC,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACtC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBAChD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;gBACrD,IAAI,CAAC,iBAAiB,EAAE,CAAA;YAC1B,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,CAAC,CAAC,CAAA;YACvD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,SAA6B;QACpD,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;YAChC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;QAC1D,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;QAE5D,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;YACjC,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAC;gBACvC,IAAI,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;oBAClC,sBAAsB;oBACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA;oBAC9D,IAAI,QAAQ,EAAE,CAAC;wBACb,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;oBACtD,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,GAAG,IAAI,GAAG,EAAiB,CAAA;oBACrC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;oBAC3C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;wBAChB,IAAI,EAAE,KAAK,CAAC,IAAI;wBAChB,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE;wBAC1F,IAAI;qBACL,CAAC,CAAA;oBACF,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;gBAC/B,CAAC;YACH,CAAC;QACH,CAAC;QAED,UAAU;QACV,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3D,CAAC;IAEO,eAAe,CAAC,SAA6B;QACnD,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;QACxD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAA;IAClC,CAAC;IAEO,KAAK,CAAC,cAAc;QAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAM;QAEpE,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACrD,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,MAAM,CAAA;QACzD,IAAI,SAAS,IAAI,kBAAkB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC;YAC/E,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;YACxB,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;gBAClF,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;YACzD,CAAC;oBAAS,CAAC;gBACT,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;IAER,WAAW;QACjB,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,CAAA;QAErC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;YACpC,IAAI,CAAC,aAAa,EAAE,CAAA;YAEpB,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;gBAC9C,UAAU;gBACV,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC;oBAChE,uBAAuB;oBACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;oBAC5C,IAAI,CAAC,cAAc,EAAE,CAAA;oBACrB,OAAM;gBACR,CAAC;gBAED,WAAW;gBACX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;gBAC5C,IAAI,CAAC,UAAU,EAAE,CAAA;gBACjB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;gBACzB,OAAM;YACR,CAAC;YAED,IAAI,CAAC,kBAAkB,EAAE,CAAA;YACzB,IAAI,CAAC,UAAU,EAAE,CAAA;YAEjB,oBAAoB;YACpB,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC,EAAE,UAAU,CAAC,CAAA;IAChB,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;YACxB,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC1B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QACzB,CAAC;IACH,CAAC;IAED,mBAAmB;IAEX,kBAAkB;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACpC,IAAI,CAAC,UAAU,EAAE,CAAA;IACnB,CAAC;IAEO,WAAW,CAAC,KAAa;;QAC/B,2CAA2C;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QACjC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QAElC,KAAK,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YAClD,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;gBAC7B,IAAI,CAAC,MAAM,CAAC,IAAI;oBAAE,SAAQ;gBAC1B,MAAM,UAAU,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,WAAW,mDAAG,MAAM,CAAC,IAAI,CAAC,KAAI,EAAE,CAAA;gBAC/D,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;oBACnC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAA;gBACzB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAC9C,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBAClB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,KAAK,EAAE,IAAI,CAAC,aAAa;gBACzB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;aAC3B,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAM;QAE7B,MAAM,MAAM,GAAmC,EAAE,CAAA;QACjD,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,MAAM,CAAC,IAAI,CAAC;gBACV,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM;gBAC5B,EAAE,EAAE,IAAI,CAAC,YAAY;aACtB,CAAC,CAAA;QACJ,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAA;IACzD,CAAC;IAED,WAAW;IAEH,SAAS,CAAC,KAAoB;QACpC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,CAAA;IACnC,CAAC;IAEO,KAAK,CAAmC,KAAQ,EAAE,MAA2B;QACnF,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAC5C,IAAI,SAAS,EAAE,CAAC;YACd,KAAK,MAAM,EAAE,IAAI,SAAS,EAAE,CAAC;gBAC1B,EAA0B,CAAC,MAAM,CAAC,CAAA;YACrC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,IAAU;QAC5B,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QACrD,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,CAAA;IAC/J,CAAC;CACF","sourcesContent":["/**\n * PlaybackEngine — YouTube 스트리밍 방식의 청크 기반 플레이백\n *\n * - 10분 단위로 데이터를 fetch하여 버퍼에 적재\n * - 남은 데이터 1분 이하 시 다음 10분 prefetch\n * - seek 시 기존 버퍼 폐기 후 fresh fetch (보드 리셋 없음 — snapshot 이 모든 data 덮어씀)\n * - seekPreview: count=1 snapshot 만 요청해 scene 에 적용 (드래그 스크러빙)\n * - pauseForSeek / seekTo 가 scene.suppressAnimations 를 ON/OFF 토글\n * - setInterval 기반 프레임 진행 (배속 반영)\n */\n\nimport type { PlaybackScenario } from '@fmsim/api'\n\nexport type PlaybackState = 'idle' | 'loading' | 'playing' | 'paused' | 'stopped'\n\nexport interface PlaybackEventMap {\n 'state-change': PlaybackState\n 'frame': { time: string; index: number; total: number }\n 'error': string\n 'load-complete': { totalFrames: number; scenarios: string[] }\n 'buffer-update': { bufferedRanges: { from: number; to: number }[] }\n}\n\ntype PlaybackListener<K extends keyof PlaybackEventMap> = (detail: PlaybackEventMap[K]) => void\n\n/** 시간순 정렬된 통합 프레임 */\ninterface MergedFrame {\n time: string\n timeMs: number\n /** scenario → records */\n data: Map<string, any[]>\n}\n\nconst CHUNK_DURATION = 10 * 60 * 1000 // 10분\nconst PREFETCH_THRESHOLD = 1 * 60 * 1000 // 1분\n\nexport class PlaybackEngine {\n private _state: PlaybackState = 'idle'\n private _frames: MergedFrame[] = []\n private _currentIndex = 0\n private _timer?: number\n private _speed = 1\n private _scene: any = null\n private _scenarioNames: string[] = []\n private _listeners = new Map<string, Set<Function>>()\n\n // 청크 버퍼링\n // includeSnapshot / count 는 preview 용 (count=1 로 스냅샷 한 프레임만 요청)\n private _fetchFn?: (\n startTime: string,\n endTime?: string,\n includeSnapshot?: boolean,\n count?: number\n ) => Promise<any>\n private _totalRange?: { from: number; to: number }\n private _prefetching = false\n private _bufferedEnd = 0\n\n // ── 공개 API ──\n\n get state(): PlaybackState { return this._state }\n get currentIndex(): number { return this._currentIndex }\n get totalFrames(): number { return this._frames.length }\n get currentTime(): string | null { return this._frames[this._currentIndex]?.time ?? null }\n get scenarioNames(): string[] { return this._scenarioNames }\n\n /**\n * fetch 함수 주입 (페이지에서 제공)\n * - 2-arg 호출: 청크 프리페치 (includeSnapshot 기본 true)\n * - 4-arg 호출: 프리뷰용 snapshot-only (count=1)\n */\n setFetchFunction(\n fn: (\n startTime: string,\n endTime?: string,\n includeSnapshot?: boolean,\n count?: number\n ) => Promise<any>\n ): void {\n this._fetchFn = fn\n }\n\n /**\n * 청크 기반 시작: fromTime에서 10분 분량을 가져와 재생 시작\n */\n async startChunked(fromTime: Date, endTime: Date, speed: number = 1): Promise<void> {\n this._stopTimer()\n this._frames = []\n this._currentIndex = 0\n this._speed = speed\n this._totalRange = { from: fromTime.getTime(), to: endTime.getTime() }\n this._bufferedEnd = 0\n this._prefetching = false\n\n this._setState('loading')\n\n const chunkEnd = Math.min(fromTime.getTime() + CHUNK_DURATION, endTime.getTime())\n await this._fetchAndAppend(fromTime.getTime(), chunkEnd)\n\n if (this._frames.length === 0) {\n this._setState('stopped')\n return\n }\n\n // 첫 프레임 즉시 적용\n this._applyCurrentFrame()\n this._setState('playing')\n this._startTimer()\n }\n\n /**\n * 이전 방식 호환: 전체 데이터를 한번에 로드\n */\n loadData(scenarios: PlaybackScenario[]): void {\n this._setState('loading')\n this._mergeScenarios(scenarios)\n this._currentIndex = 0\n this._setState('stopped')\n this._emit('load-complete', {\n totalFrames: this._frames.length,\n scenarios: this._scenarioNames\n })\n }\n\n attachScene(scene: any): void {\n this._scene = scene\n }\n\n detachScene(): void {\n this._scene = null\n }\n\n play(speed?: number): void {\n if (this._frames.length === 0) return\n if (speed != null) this._speed = speed\n this._applyCurrentFrame()\n this._setState('playing')\n this._startTimer()\n }\n\n pause(): void {\n this._stopTimer()\n this._setState('paused')\n }\n\n resume(): void {\n if (this._state !== 'paused') return\n this._setState('playing')\n this._startTimer()\n }\n\n stop(): void {\n this._stopTimer()\n this._currentIndex = 0\n this._frames = []\n this._bufferedEnd = 0\n this._prefetching = false\n this._speed = 1 // 다음 세션이 기본 1x 로 시작하도록 리셋\n this._setState('stopped')\n }\n\n setSpeed(speed: number): void {\n this._speed = speed\n if (this._state === 'playing') {\n this._stopTimer()\n this._startTimer()\n }\n }\n\n /**\n * seek — 기존 버퍼 폐기 + 새 위치에서 snapshot+delta fresh fetch.\n * 보드 상태 리셋 없음 — snapshot 이 모든 컴포넌트 data 를 덮어쓰므로 불필요.\n * (드래그로 들어온 경우 pauseForSeek 에서 이미 suppressAnimations = true)\n */\n async seekTo(time: Date): Promise<void> {\n const wasPlaying = this._state === 'playing'\n this._stopTimer()\n\n // 버퍼 전체 폐기\n this._frames = []\n this._currentIndex = 0\n this._bufferedEnd = 0\n this._prefetching = false\n\n if (this._fetchFn && this._totalRange) {\n this._setState('loading')\n const chunkEnd = Math.min(time.getTime() + CHUNK_DURATION, this._totalRange.to)\n await this._fetchAndAppend(time.getTime(), chunkEnd)\n\n // 첫 프레임 적용\n if (this._frames.length > 0) {\n this._applyCurrentFrame()\n this._emitFrame()\n }\n } else {\n // 이전 방식: 메모리 내 탐색 (fallback, 사용되지 않음)\n const target = this._formatTime(time)\n for (let i = 0; i < this._frames.length; i++) {\n if (this._frames[i].time <= target) {\n this._currentIndex = i\n } else {\n break\n }\n }\n this._applyCurrentFrame()\n }\n\n if (wasPlaying && this._frames.length > 0) {\n this._setState('playing')\n this._startTimer()\n } else if (this._frames.length > 0) {\n this._setState('paused')\n }\n\n // 드래그 종료 — 애니메이션 억제 OFF\n if (this._scene) this._scene.suppressAnimations = false\n }\n\n /**\n * 드래그 시작: 재생 타이머 정지 + 애니메이션 억제 ON.\n * 논리 상태(_state)는 유지 — seekTo 가 상태 기반으로 타이머 복원.\n */\n pauseForSeek(): void {\n this._stopTimer()\n if (this._scene) this._scene.suppressAnimations = true\n }\n\n /**\n * seekPreview — 드래그 중 호출. 해당 시간의 snapshot 1프레임만 요청해서\n * 현재 보드에 적용. 버퍼/상태 변경 없음.\n * (pauseForSeek 에서 이미 suppressAnimations = true 가 걸려 있음)\n */\n async seekPreview(time: Date): Promise<void> {\n if (!this._fetchFn || !this._scene) return\n\n try {\n // count=1 로 해당 시점의 snapshot 한 프레임만 요청\n const result = await this._fetchFn(\n this._formatTime(time),\n undefined,\n true, // includeSnapshot\n 1 // count\n )\n // await 동안 scene 이 detach 된 경우 무시 (stop/dispose)\n if (!this._scene) return\n if (!result?.status || !result.playback) return\n\n const scenarios = result.playback.scenarios as PlaybackScenario[]\n if (!scenarios?.length) return\n\n for (const scenario of scenarios) {\n const frame = scenario.snapshots?.[0]\n if (!frame?.data) continue\n for (const record of frame.data as any[]) {\n if (!record?.NAME) continue\n const components = this._scene?.findAllById?.(record.NAME) || []\n for (const component of components) {\n component.data = record\n }\n }\n }\n } catch (e) {\n console.error('[PlaybackEngine] seekPreview error:', e)\n }\n }\n\n on<K extends keyof PlaybackEventMap>(event: K, listener: PlaybackListener<K>): void {\n if (!this._listeners.has(event)) this._listeners.set(event, new Set())\n this._listeners.get(event)!.add(listener)\n }\n\n off<K extends keyof PlaybackEventMap>(event: K, listener: PlaybackListener<K>): void {\n this._listeners.get(event)?.delete(listener)\n }\n\n dispose(): void {\n this._stopTimer()\n if (this._scene) this._scene.suppressAnimations = false\n this._scene = null\n this._frames = []\n this._listeners.clear()\n }\n\n // ── 내부: 청크 관리 ──\n\n private async _fetchAndAppend(fromMs: number, toMs: number): Promise<void> {\n if (!this._fetchFn) return\n\n try {\n const result = await this._fetchFn(this._formatTime(new Date(fromMs)), this._formatTime(new Date(toMs)))\n // stop 후 응답이 돌아온 경우 무시 (잔여 diff 프레임 방지)\n if (this._state === 'stopped') return\n if (result?.status && result.playback) {\n this._appendScenarios(result.playback.scenarios)\n this._bufferedEnd = Math.max(this._bufferedEnd, toMs)\n this._emitBufferUpdate()\n }\n } catch (e) {\n console.error('[PlaybackEngine] chunk fetch error:', e)\n this._emit('error', String(e))\n }\n }\n\n private _appendScenarios(scenarios: PlaybackScenario[]): void {\n if (!this._scenarioNames.length) {\n this._scenarioNames = scenarios.map(s => s.scenarioName)\n }\n\n const existingTimes = new Set(this._frames.map(f => f.time))\n\n for (const scenario of scenarios) {\n for (const frame of scenario.snapshots) {\n if (existingTimes.has(frame.time)) {\n // 기존 프레임에 시나리오 데이터 추가\n const existing = this._frames.find(f => f.time === frame.time)\n if (existing) {\n existing.data.set(scenario.scenarioName, frame.data)\n }\n } else {\n const data = new Map<string, any[]>()\n data.set(scenario.scenarioName, frame.data)\n this._frames.push({\n time: frame.time,\n timeMs: new Date(frame.time.replace(' ', 'T')).getTime() || new Date(frame.time).getTime(),\n data\n })\n existingTimes.add(frame.time)\n }\n }\n }\n\n // 시간순 재정렬\n this._frames.sort((a, b) => a.time.localeCompare(b.time))\n }\n\n private _mergeScenarios(scenarios: PlaybackScenario[]): void {\n this._scenarioNames = scenarios.map(s => s.scenarioName)\n this._frames = []\n this._appendScenarios(scenarios)\n }\n\n private async _checkPrefetch(): Promise<void> {\n if (this._prefetching || !this._fetchFn || !this._totalRange) return\n\n const currentFrame = this._frames[this._currentIndex]\n if (!currentFrame) return\n\n const remaining = this._bufferedEnd - currentFrame.timeMs\n if (remaining <= PREFETCH_THRESHOLD && this._bufferedEnd < this._totalRange.to) {\n this._prefetching = true\n try {\n const chunkEnd = Math.min(this._bufferedEnd + CHUNK_DURATION, this._totalRange.to)\n await this._fetchAndAppend(this._bufferedEnd, chunkEnd)\n } finally {\n this._prefetching = false\n }\n }\n }\n\n // ── 내부: 타이머 ──\n\n private _startTimer(): void {\n this._stopTimer()\n const intervalMs = 1000 / this._speed\n\n this._timer = window.setInterval(() => {\n this._currentIndex++\n\n if (this._currentIndex >= this._frames.length) {\n // 버퍼 끝 도달\n if (this._totalRange && this._bufferedEnd < this._totalRange.to) {\n // 아직 더 가져올 데이터 있음 — 대기\n this._currentIndex = this._frames.length - 1\n this._checkPrefetch()\n return\n }\n\n // 전체 재생 완료\n this._currentIndex = this._frames.length - 1\n this._stopTimer()\n this._setState('stopped')\n return\n }\n\n this._applyCurrentFrame()\n this._emitFrame()\n\n // prefetch 체크 (비동기)\n this._checkPrefetch()\n }, intervalMs)\n }\n\n private _stopTimer(): void {\n if (this._timer != null) {\n clearInterval(this._timer)\n this._timer = undefined\n }\n }\n\n // ── 내부: 프레임 적용 ──\n\n private _applyCurrentFrame(): void {\n this._applyFrame(this._currentIndex)\n this._emitFrame()\n }\n\n private _applyFrame(index: number): void {\n // detach 후(=stop 경로) scene 이 null 이면 no-op\n const frame = this._frames[index]\n if (!frame || !this._scene) return\n\n for (const [_scenarioName, records] of frame.data) {\n for (const record of records) {\n if (!record.NAME) continue\n const components = this._scene.findAllById?.(record.NAME) || []\n for (const component of components) {\n component.data = record\n }\n }\n }\n }\n\n private _emitFrame(): void {\n const frame = this._frames[this._currentIndex]\n if (frame) {\n this._emit('frame', {\n time: frame.time,\n index: this._currentIndex,\n total: this._frames.length\n })\n }\n }\n\n private _emitBufferUpdate(): void {\n if (!this._totalRange) return\n\n const ranges: { from: number; to: number }[] = []\n if (this._frames.length > 0) {\n ranges.push({\n from: this._frames[0].timeMs,\n to: this._bufferedEnd\n })\n }\n\n this._emit('buffer-update', { bufferedRanges: ranges })\n }\n\n // ── 유틸 ──\n\n private _setState(state: PlaybackState): void {\n this._state = state\n this._emit('state-change', state)\n }\n\n private _emit<K extends keyof PlaybackEventMap>(event: K, detail: PlaybackEventMap[K]): void {\n const listeners = this._listeners.get(event)\n if (listeners) {\n for (const fn of listeners) {\n (fn as PlaybackListener<K>)(detail)\n }\n }\n }\n\n private _formatTime(date: Date): string {\n const pad = (n: number) => String(n).padStart(2, '0')\n return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`\n }\n}\n"]}

package/dist/src/selector/board-creation-popup.js CHANGED Viewed

@@ -36,7 +36,7 @@ let BoardCreationPopup = class BoardCreationPopup extends localize(i18next)(LitE
         ];
     }
     render() {
-        var groups = this.groups || [];
+        const groups = this.groups || [];
         return html `
       <div content>
         <md-filled-text-field label=${String(i18next.t('label.name'))} name="name" required field-name></md-filled-text-field>
@@ -69,7 +69,7 @@ let BoardCreationPopup = class BoardCreationPopup extends localize(i18next)(LitE
         }, 100);
     }
     onClickSubmit() {
-        var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
+        const [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
             var _a;
             return (_a = this.renderRoot.querySelector(`[field-${attr}]`)) === null || _a === void 0 ? void 0 : _a.value;
         });

package/dist/src/selector/board-creation-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"board-creation-popup.js","sourceRoot":"","sources":["../../../src/selector/board-creation-popup.ts"],"names":[],"mappings":";AAAA,OAAO,8CAA8C,CAAA;AACrD,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAG1C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IACnE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;OAuBF;SACF,CAAA;IACH,CAAC;IAKD,MAAM;QACJ,~~IAAI~~,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;~~QAE9B~~,OAAO,IAAI,CAAA;;sCAEuB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;;;kBAGnD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;;;;;kBAKtC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;;YAGtC,MAAM,CAAC,GAAG,CACV,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;wCACe,KAAK,CAAC,EAAE,cAAc,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,EAAE,yBAAyB,KAAK,CAAC,IAAI;aACjH,CACF;;;;;iBAKM,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;SAC/C,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;KAC9B,CAAA;IACH,CAAC;IAED,YAAY;QACV,UAAU,CAAC,GAAG,EAAE;;YACd,CAAC;YAAA,MAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAS,0CAAE,KAAK,EAAE,CAAA;QAC1E,CAAC,EAAE,GAAG,CAAC,CAAA;IACT,CAAC;IAED,aAAa;QACX,~~IAAI~~,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;~~YAC7E~~,OAAO,MAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,IAAI,GAAG,CAAS,0CAAE,KAAK,CAAA;QACzE,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI;gBACJ,WAAW;gBACX,OAAO;aACR;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AA1D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAwC;AA/BvD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAwF9B","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@material/web/select/filled-select.js'\nimport '@material/web/select/select-option.js'\nimport '@material/web/button/filled-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('board-creation-popup')\nexport class BoardCreationPopup extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n padding: 10px;\n background-color: white;\n }\n\n :host > * {\n margin: 10px;\n }\n\n [content] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n }\n\n [content] > * {\n margin: 10px 0;\n }\n `\n ]\n }\n\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups?: { id: string; name: string }[]\n\n render() {\n ~~var~~ groups = this.groups \|\| []\n\n return html`\n <div content>\n <md-filled-text-field label=${String(i18next.t('label.name'))} name=\"name\" required field-name></md-filled-text-field>\n <md-filled-text-field\n type=\"textarea\"\n label=${String(i18next.t('label.description'))}\n name=\"description\"\n field-description\n ></md-filled-text-field>\n <md-filled-select\n label=${String(i18next.t('label.group'))}\n field-group\n >\n ${groups.map(\n group => html`\n <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}><div slot=\"headline\">${group.name}</div></md-select-option>\n `\n )}\n </md-filled-select>\n </div>\n\n <md-filled-button\n @click=${(e: MouseEvent) => this.onClickSubmit()}\n >${i18next.t('button.create')}</md-filled-button>\n `\n }\n\n firstUpdated() {\n setTimeout(() => {\n ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()\n }, 100)\n }\n\n onClickSubmit() {\n ~~var~~ [name, description, groupId] = ['name', 'description', 'group'].map(attr => {\n return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value\n })\n\n if (!name) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n groupId\n }\n })\n )\n }\n}\n"]}
1	+ {"version":3,"file":"board-creation-popup.js","sourceRoot":"","sources":["../../../src/selector/board-creation-popup.ts"],"names":[],"mappings":";AAAA,OAAO,8CAA8C,CAAA;AACrD,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAG1C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IACnE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;OAuBF;SACF,CAAA;IACH,CAAC;IAKD,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;sCAEuB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;;;kBAGnD,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;;;;;kBAKtC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;;;YAGtC,MAAM,CAAC,GAAG,CACV,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;wCACe,KAAK,CAAC,EAAE,cAAc,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,EAAE,yBAAyB,KAAK,CAAC,IAAI;aACjH,CACF;;;;;iBAKM,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;SAC/C,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;KAC9B,CAAA;IACH,CAAC;IAED,YAAY;QACV,UAAU,CAAC,GAAG,EAAE;;YACd,CAAC;YAAA,MAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAS,0CAAE,KAAK,EAAE,CAAA;QAC1E,CAAC,EAAE,GAAG,CAAC,CAAA;IACT,CAAC;IAED,aAAa;QACX,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;YAC/E,OAAO,MAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,IAAI,GAAG,CAAS,0CAAE,KAAK,CAAA;QACzE,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI;gBACJ,WAAW;gBACX,OAAO;aACR;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AA1D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAwC;AA/BvD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAwF9B","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@material/web/select/filled-select.js'\nimport '@material/web/select/select-option.js'\nimport '@material/web/button/filled-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('board-creation-popup')\nexport class BoardCreationPopup extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n padding: 10px;\n background-color: white;\n }\n\n :host > * {\n margin: 10px;\n }\n\n [content] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n }\n\n [content] > * {\n margin: 10px 0;\n }\n `\n ]\n }\n\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups?: { id: string; name: string }[]\n\n render() {\n const groups = this.groups \|\| []\n\n return html`\n <div content>\n <md-filled-text-field label=${String(i18next.t('label.name'))} name=\"name\" required field-name></md-filled-text-field>\n <md-filled-text-field\n type=\"textarea\"\n label=${String(i18next.t('label.description'))}\n name=\"description\"\n field-description\n ></md-filled-text-field>\n <md-filled-select\n label=${String(i18next.t('label.group'))}\n field-group\n >\n ${groups.map(\n group => html`\n <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}><div slot=\"headline\">${group.name}</div></md-select-option>\n `\n )}\n </md-filled-select>\n </div>\n\n <md-filled-button\n @click=${(e: MouseEvent) => this.onClickSubmit()}\n >${i18next.t('button.create')}</md-filled-button>\n `\n }\n\n firstUpdated() {\n setTimeout(() => {\n ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()\n }, 100)\n }\n\n onClickSubmit() {\n const [name, description, groupId] = ['name', 'description', 'group'].map(attr => {\n return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value\n })\n\n if (!name) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n groupId\n }\n })\n )\n }\n}\n"]}

package/dist/src/selector/board-thumbnail-card.js CHANGED Viewed

@@ -101,7 +101,7 @@ let BoardThumbnailCard = class BoardThumbnailCard extends localize(i18next)(LitE
         ];
     }
     render() {
-        var groups = this.groups || [];
+        const groups = this.groups || [];
         return html `
       <div @click=${(e) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create board</div>
@@ -135,10 +135,10 @@ let BoardThumbnailCard = class BoardThumbnailCard extends localize(i18next)(LitE
     onClickSubmit(e) {
         e.preventDefault();
         e.stopPropagation();
-        var form = e.target;
-        var name = form.elements['name'].value;
-        var description = form.elements['description'].value;
-        var groupId = form.elements['groupId'].value;
+        const form = e.target;
+        const name = form.elements['name'].value;
+        const description = form.elements['description'].value;
+        const groupId = form.elements['groupId'].value;
         this.dispatchEvent(new CustomEvent('create-board', {
             detail: {
                 name,
@@ -149,7 +149,7 @@ let BoardThumbnailCard = class BoardThumbnailCard extends localize(i18next)(LitE
     }
     reset() {
         var _a;
-        var form = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('form');
+        const form = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('form');
         if (form) {
             form.reset();
         }

package/dist/src/selector/board-thumbnail-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"board-thumbnail-card.js","sourceRoot":"","sources":["../../../src/selector/board-thumbnail-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAG1C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IACnE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4FF;SACF,CAAA;IACH,CAAC;IAKD,MAAM;QACJ,~~IAAI~~,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;~~QAE9B~~,OAAO,IAAI,CAAA;oBACK,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;;oBAEjC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;wBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;mBACxC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;;;mBAGvB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;mBAG9B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;2BAChB,IAAI,CAAC,YAAY,IAAI,EAAE;cACpC,MAAM,CAAC,GAAG,CACV,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;gCACK,KAAK,CAAC,EAAE,cAAc,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI;eAClF,CACF;;;uCAG0B,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;;;KAGpE,CAAA;IACH,CAAC;IAED,WAAW,CAAC,CAAQ;;QAClB,IAAI,CAAA,MAAC,CAAC,CAAC,aAAqB,0CAAE,YAAY,CAAC,OAAO,CAAC,MAAI,MAAC,CAAC,CAAC,MAAc,0CAAE,YAAY,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;YAC/F,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAClC,CAAC;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,~~IAAI~~,IAAI,GAAG,CAAC,CAAC,MAAa,CAAA;~~QAE1B~~,~~IAAI~~,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,CAAA;~~QACtC~~,~~IAAI~~,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,KAAK,CAAA;~~QACpD~~,~~IAAI~~,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,CAAA;~~QAE5C~~,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI;gBACJ,WAAW;gBACX,OAAO;aACR;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,KAAK;;QACH,~~IAAI~~,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAA;~~QACjD~~,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;IAClC,CAAC;CACF,CAAA;AArE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAwC;AApGvD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAwK9B","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('board-thumbnail-card')\nexport class BoardThumbnailCard extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n position: relative;\n\n padding: 0;\n margin: 0;\n height: 100%;\n\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: all 0.5s ease-in-out;\n transition: all 0.5s ease-in-out;\n }\n\n :host(.flipped) {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [front],\n [back] {\n position: absolute;\n\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: #fff;\n\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n\n [front] {\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n [front] md-icon {\n margin-top: 15%;\n display: block;\n font-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n\n [back] {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [back] form {\n padding: var(--card-list-create-form-padding);\n display: flex;\n flex-flow: row wrap;\n }\n\n [back] form label {\n flex: 1 1 25%;\n font: var(--card-list-create-label-font);\n color: var(--card-list-create-label-color);\n }\n\n [back] form input,\n [back] form select {\n flex: 1 1 60%;\n width: 10px;\n background-color: #fff;\n border: var(--card-list-create-input-border);\n border-radius: var(--card-list-create-input-border-radius);\n padding: var(--card-list-create-input-padding);\n font: var(--card-list-create-input-font);\n color: var(--card-list-create-input-color);\n }\n\n form * {\n margin: var(--card-list-create-margin);\n }\n\n input[type='submit'] {\n background-color: var(--button-background-color) !important;\n margin: var(--button-margin);\n font: var(--button-font);\n color: var(--button-color) !important;\n border-radius: var(--button-radius);\n border: var(--button-border);\n }\n `\n ]\n }\n\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups?: { id: string; name: string }[]\n\n render() {\n ~~var~~ groups = this.groups \|\| []\n\n return html`\n <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create board</div>\n\n <div @click=${(e: Event) => this.onClickFlip(e)} back>\n <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n <label>${i18next.t('label.name')}</label>\n <input type=\"text\" name=\"name\" />\n\n <label>${i18next.t('label.description')}</label>\n <input type=\"text\" name=\"description\" />\n\n <label>${i18next.t('label.group')}</label>\n <select .value=${this.defaultGroup \|\| ''} name=\"groupId\">\n ${groups.map(\n group => html`\n <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>\n `\n )}\n </select>\n\n <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n </form>\n </div>\n `\n }\n\n onClickFlip(e: Event) {\n if ((e.currentTarget as any)?.hasAttribute('front') \|\| (e.target as any)?.hasAttribute('back')) {\n this.classList.toggle('flipped')\n }\n\n e.stopPropagation()\n }\n\n onClickSubmit(e: Event) {\n e.preventDefault()\n e.stopPropagation()\n\n ~~var~~ form = e.target as any\n\n ~~var~~ name = form.elements['name'].value\n ~~var~~ description = form.elements['description'].value\n ~~var~~ groupId = form.elements['groupId'].value\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n groupId\n }\n })\n )\n }\n\n reset() {\n ~~var~~ form = this.shadowRoot?.querySelector('form')\n if (form) {\n form.reset()\n }\n\n this.classList.remove('flipped')\n }\n}\n"]}
1	+ {"version":3,"file":"board-thumbnail-card.js","sourceRoot":"","sources":["../../../src/selector/board-thumbnail-card.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('board-thumbnail-card')\nexport class BoardThumbnailCard extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n position: relative;\n\n padding: 0;\n margin: 0;\n height: 100%;\n\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: all 0.5s ease-in-out;\n transition: all 0.5s ease-in-out;\n }\n\n :host(.flipped) {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [front],\n [back] {\n position: absolute;\n\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: #fff;\n\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n\n [front] {\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n [front] md-icon {\n margin-top: 15%;\n display: block;\n font-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n\n [back] {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [back] form {\n padding: var(--card-list-create-form-padding);\n display: flex;\n flex-flow: row wrap;\n }\n\n [back] form label {\n flex: 1 1 25%;\n font: var(--card-list-create-label-font);\n color: var(--card-list-create-label-color);\n }\n\n [back] form input,\n [back] form select {\n flex: 1 1 60%;\n width: 10px;\n background-color: #fff;\n border: var(--card-list-create-input-border);\n border-radius: var(--card-list-create-input-border-radius);\n padding: var(--card-list-create-input-padding);\n font: var(--card-list-create-input-font);\n color: var(--card-list-create-input-color);\n }\n\n form * {\n margin: var(--card-list-create-margin);\n }\n\n input[type='submit'] {\n background-color: var(--button-background-color) !important;\n margin: var(--button-margin);\n font: var(--button-font);\n color: var(--button-color) !important;\n border-radius: var(--button-radius);\n border: var(--button-border);\n }\n `\n ]\n }\n\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups?: { id: string; name: string }[]\n\n render() {\n const groups = this.groups \|\| []\n\n return html`\n <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create board</div>\n\n <div @click=${(e: Event) => this.onClickFlip(e)} back>\n <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n <label>${i18next.t('label.name')}</label>\n <input type=\"text\" name=\"name\" />\n\n <label>${i18next.t('label.description')}</label>\n <input type=\"text\" name=\"description\" />\n\n <label>${i18next.t('label.group')}</label>\n <select .value=${this.defaultGroup \|\| ''} name=\"groupId\">\n ${groups.map(\n group => html`\n <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>\n `\n )}\n </select>\n\n <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n </form>\n </div>\n `\n }\n\n onClickFlip(e: Event) {\n if ((e.currentTarget as any)?.hasAttribute('front') \|\| (e.target as any)?.hasAttribute('back')) {\n this.classList.toggle('flipped')\n }\n\n e.stopPropagation()\n }\n\n onClickSubmit(e: Event) {\n e.preventDefault()\n e.stopPropagation()\n\n const form = e.target as any\n\n const name = form.elements['name'].value\n const description = form.elements['description'].value\n const groupId = form.elements['groupId'].value\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n groupId\n }\n })\n )\n }\n\n reset() {\n const form = this.shadowRoot?.querySelector('form')\n if (form) {\n form.reset()\n }\n\n this.classList.remove('flipped')\n }\n}\n"]}

package/dist/src/selector/ox-board-creation-card.js CHANGED Viewed

@@ -47,12 +47,12 @@ let BoardCreationCard = class BoardCreationCard extends localize(i18next)(LitEle
          * 주의. value는 object일 수도 있고, string일 수도 있다.
          * string인 경우에는 해당 보드의 id로 해석한다.
          */
-        var template = html `
+        const template = html `
       <board-creation-popup
         .defaultGroup=${this.defaultGroup}
         .groups=${this.groups}
         @create-board=${async (e) => {
-            var { name, description, groupId } = e.detail;
+            const { name, description, groupId } = e.detail;
             this.dispatchEvent(new CustomEvent('create-board', {
                 detail: {
                     name,

package/dist/src/selector/ox-board-creation-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-board-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-board-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAClE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;OAwBF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,2DAA2D,CAAA;IACnH,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED;;;;WAIG;QACH,~~IAAI~~,QAAQ,GAAG,IAAI,CAAA;;~~wBAEC~~,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;wBACL,KAAK,EAAE,CAAc,EAAE,EAAE;YACvC,~~IAAI~~,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;~~YAE7C~~,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;iBACR;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AAjD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAAY;AAjC3B,iBAAiB;IAD7B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,iBAAiB,CAiF7B","sourcesContent":["import '@material/web/icon/icon.js'\nimport './board-creation-popup'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-board-creation-card')\nexport class BoardCreationCard extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: #fff;\n\n align-items: center;\n justify-content: center;\n }\n\n div {\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n md-icon {\n display: block;\n --md-icon-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n `\n ]\n }\n\n /* default group id /\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups: any\n\n private popup: any\n\n render() {\n return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create board</div> `\n }\n\n onClick() {\n if (this.popup) {\n delete this.popup\n }\n\n /\n * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n * 주의. value는 object일 수도 있고, string일 수도 있다.\n * string인 경우에는 해당 보드의 id로 해석한다.\n */\n ~~var~~ template = html`\n <board-creation-popup\n .defaultGroup=${this.defaultGroup}\n .groups=${this.groups}\n @create-board=${async (e: CustomEvent) => {\n ~~var~~ { name, description, groupId } = e.detail\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n groupId\n }\n })\n )\n\n this.popup && this.popup.close()\n }}\n ></board-creation-popup>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.create-board')\n })\n }\n\n reset() {}\n}\n"]}
1	+ {"version":3,"file":"ox-board-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-board-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAClE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;OAwBF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,2DAA2D,CAAA;IACnH,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED;;;;WAIG;QACH,MAAM,QAAQ,GAAG,IAAI,CAAA;;wBAED,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;wBACL,KAAK,EAAE,CAAc,EAAE,EAAE;YACvC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAE/C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;iBACR;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AAjD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAAY;AAjC3B,iBAAiB;IAD7B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,iBAAiB,CAiF7B","sourcesContent":["import '@material/web/icon/icon.js'\nimport './board-creation-popup'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-board-creation-card')\nexport class BoardCreationCard extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: #fff;\n\n align-items: center;\n justify-content: center;\n }\n\n div {\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n md-icon {\n display: block;\n --md-icon-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n `\n ]\n }\n\n /* default group id /\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups: any\n\n private popup: any\n\n render() {\n return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create board</div> `\n }\n\n onClick() {\n if (this.popup) {\n delete this.popup\n }\n\n /\n * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n * 주의. value는 object일 수도 있고, string일 수도 있다.\n * string인 경우에는 해당 보드의 id로 해석한다.\n */\n const template = html`\n <board-creation-popup\n .defaultGroup=${this.defaultGroup}\n .groups=${this.groups}\n @create-board=${async (e: CustomEvent) => {\n const { name, description, groupId } = e.detail\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n groupId\n }\n })\n )\n\n this.popup && this.popup.close()\n }}\n ></board-creation-popup>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.create-board')\n })\n }\n\n reset() {}\n}\n"]}