@operato/board 10.0.0-beta.2 → 10.0.0-beta.21

package/dist/src/ox-playback-controls.js

@@ -0,0 +1,419 @@
+var PlaybackControls_1;
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+const ONE_HOUR = 3600000;
+/**
+ * 플레이백 컨트롤 오버레이 바 (2행 구조)
+ *
+ * 1행: 시작 시점 설정 (datetime + ±1h 버튼) + 배속 선택
+ * 2행: 재생 제어 (play/pause/stop) + 1시간 범위 시크바 + 닫기
+ *
+ * @fires playback-start - 플레이백 시작 요청 { fromTime, speed }
+ * @fires playback-pause - 일시정지 요청
+ * @fires playback-resume - 재개 요청
+ * @fires playback-stop - 중지 요청
+ * @fires playback-seek - 시크 요청 { toTime }
+ * @fires playback-speed - 배속 변경 요청 { speed }
+ */
+let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.playbackState = 'idle';
+        this.speed = 1;
+        this.currentTime = '';
+        /** 외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산) */
+        this.timeRange = {
+            from: new Date(Date.now() - ONE_HOUR),
+            to: new Date()
+        };
+        this._startTime = PlaybackControls_1._floorToHour(new Date(Date.now() - ONE_HOUR));
+        this._seekValue = 0;
+        this._speeds = [1, 2, 4, 8];
+    }
+    get _endTime() {
+        return new Date(this._startTime.getTime() + ONE_HOUR);
+    }
+    static _floorToHour(date) {
+        const d = new Date(date);
+        d.setMinutes(0, 0, 0);
+        return d;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._startTime = PlaybackControls_1._floorToHour(this.timeRange.from);
+    }
+    updated(changes) {
+        if (changes.has('timeRange') && this.timeRange) {
+            this._startTime = PlaybackControls_1._floorToHour(this.timeRange.from);
+        }
+        if (changes.has('currentTime') && this.currentTime) {
+            this._updateSeekPosition();
+        }
+    }
+    render() {
+        const isPlaying = this.playbackState === 'playing';
+        const isPaused = this.playbackState === 'paused';
+        const isActive = isPlaying || isPaused;
+        return html `
+      <div class="control-bar">
+        <!-- 1행: 시점 설정 + 배속 -->
+        <div class="row-time">
+          <md-icon-button @click=${this._shiftTime(-1)} title="-1h">
+            <md-icon>chevron_left</md-icon>
+          </md-icon-button>
+
+          <input
+            type="date"
+            class="date-input"
+            .value=${this._toDateString(this._startTime)}
+            @change=${this._onDateChange}
+          />
+
+          <select class="hour-select" .value=${String(this._startTime.getHours())} @change=${this._onHourChange}>
+            ${Array.from({ length: 24 }, (_, i) => html `
+              <option value=${i} ?selected=${this._startTime.getHours() === i}>
+                ${String(i).padStart(2, '0')}:00
+              </option>
+            `)}
+          </select>
+
+          <md-icon-button @click=${this._shiftTime(1)} title="+1h">
+            <md-icon>chevron_right</md-icon>
+          </md-icon-button>
+
+          <span class="time-label">~ ${String(this._endTime.getHours()).padStart(2, '0')}:00</span>
+
+          <span class="spacer"></span>
+
+          <div class="speed-group">
+            ${this._speeds.map(s => html `
+                <button class="speed-btn ${this.speed === s ? 'active' : ''}" @click=${() => this._onSpeedChange(s)}>
+                  ×${s}
+                </button>
+              `)}
+          </div>
+        </div>
+
+        <!-- 2행: 재생 제어 + 시크바 + 닫기 -->
+        <div class="row-seek">
+          ${isActive
+            ? html `
+                <md-icon-button class="primary" @click=${this._onTogglePlayPause}>
+                  <md-icon>${isPlaying ? 'pause' : 'play_arrow'}</md-icon>
+                </md-icon-button>
+                <md-icon-button @click=${this._onStop}>
+                  <md-icon>stop</md-icon>
+                </md-icon-button>
+              `
+            : html `
+                <md-icon-button class="primary" @click=${this._onStart}>
+                  <md-icon>play_arrow</md-icon>
+                </md-icon-button>
+              `}
+
+          <div class="timeline">
+            <input
+              type="range"
+              class="seek-bar"
+              min="0"
+              max="1000"
+              .value=${String(this._seekValue)}
+              @input=${this._onSeekInput}
+              @change=${this._onSeekChange}
+            />
+            <div class="seek-labels">
+              <span>${this._formatTime(this._startTime)}</span>
+              <span>${this._formatTime(this._endTime)}</span>
+            </div>
+          </div>
+
+          <span class="current-time">
+            ${this.currentTime ? this._formatTime(new Date(this.currentTime)) : '--:--:--'}
+          </span>
+
+          <md-icon-button @click=${this._onStop}>
+            <md-icon>close</md-icon>
+          </md-icon-button>
+        </div>
+      </div>
+    `;
+    }
+    _formatTime(date) {
+        return date.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+    }
+    _toDateString(date) {
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+    }
+    _updateSeekPosition() {
+        if (!this.currentTime)
+            return;
+        const current = new Date(this.currentTime).getTime();
+        const from = this._startTime.getTime();
+        const to = this._endTime.getTime();
+        const range = to - from;
+        if (range <= 0)
+            return;
+        this._seekValue = Math.max(0, Math.min(1000, Math.round(((current - from) / range) * 1000)));
+    }
+    _onDateChange(e) {
+        const value = e.target.value;
+        if (!value)
+            return;
+        const [year, month, day] = value.split('-').map(Number);
+        const t = new Date(this._startTime);
+        t.setFullYear(year, month - 1, day);
+        this._startTime = t;
+    }
+    _onHourChange(e) {
+        const hour = Number(e.target.value);
+        const t = new Date(this._startTime);
+        t.setHours(hour, 0, 0, 0);
+        this._startTime = t;
+    }
+    _shiftTime(hours) {
+        return () => {
+            this._startTime = new Date(this._startTime.getTime() + hours * ONE_HOUR);
+        };
+    }
+    _onStart() {
+        this.dispatchEvent(new CustomEvent('playback-start', {
+            detail: { fromTime: this._startTime, speed: this.speed },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    _onTogglePlayPause() {
+        if (this.playbackState === 'playing') {
+            this.dispatchEvent(new CustomEvent('playback-pause', { bubbles: true, composed: true }));
+        }
+        else {
+            this.dispatchEvent(new CustomEvent('playback-resume', { bubbles: true, composed: true }));
+        }
+    }
+    _onStop() {
+        this.dispatchEvent(new CustomEvent('playback-stop', { bubbles: true, composed: true }));
+    }
+    _onSeekInput(e) {
+        this._seekValue = Number(e.target.value);
+    }
+    _onSeekChange(e) {
+        const ratio = Number(e.target.value) / 1000;
+        const from = this._startTime.getTime();
+        const to = this._endTime.getTime();
+        const targetTime = new Date(from + (to - from) * ratio);
+        this.dispatchEvent(new CustomEvent('playback-seek', {
+            detail: { toTime: targetTime },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    _onSpeedChange(speed) {
+        this.dispatchEvent(new CustomEvent('playback-speed', {
+            detail: { speed },
+            bubbles: true,
+            composed: true
+        }));
+    }
+};
+PlaybackControls.styles = css `
+    :host {
+      display: flex;
+      justify-content: center;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1001;
+      pointer-events: none;
+    }
+
+    .control-bar {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 10px 16px;
+      margin: 12px;
+      max-width: 560px;
+      width: 100%;
+      background: rgba(0, 0, 0, 0.75);
+      backdrop-filter: blur(8px);
+      border-radius: 12px;
+      color: #fff;
+      pointer-events: auto;
+      font-size: 13px;
+      box-sizing: border-box;
+    }
+
+    /* 1행: 시점 설정 + 배속 */
+    .row-time {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .row-time md-icon-button {
+      --md-icon-button-icon-color: #fff;
+      --md-icon-button-state-layer-color: #fff;
+      --md-icon-button-icon-size: 18px;
+      --md-icon-button-container-width: 32px;
+      --md-icon-button-container-height: 32px;
+    }
+
+    .date-input {
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 13px;
+      padding: 4px 8px;
+      outline: none;
+      color-scheme: dark;
+      width: 130px;
+    }
+
+    .date-input:focus {
+      border-color: rgba(255, 255, 255, 0.6);
+    }
+
+    .hour-select {
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 13px;
+      padding: 4px 6px;
+      outline: none;
+      color-scheme: dark;
+      cursor: pointer;
+    }
+
+    .hour-select:focus {
+      border-color: rgba(255, 255, 255, 0.6);
+    }
+
+    .time-label {
+      font-size: 12px;
+      opacity: 0.7;
+      white-space: nowrap;
+    }
+
+    .spacer {
+      flex: 1;
+    }
+
+    .speed-group {
+      display: flex;
+      gap: 2px;
+    }
+
+    .speed-btn {
+      padding: 4px 8px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+      background: transparent;
+      color: #fff;
+      font-size: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .speed-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .speed-btn.active {
+      background: rgba(255, 255, 255, 0.3);
+      border-color: #fff;
+    }
+
+    /* 2행: 재생 제어 + 시크바 */
+    .row-seek {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .row-seek md-icon-button {
+      --md-icon-button-icon-color: #fff;
+      --md-icon-button-state-layer-color: #fff;
+      --md-icon-button-icon-size: 20px;
+      --md-icon-button-container-width: 36px;
+      --md-icon-button-container-height: 36px;
+    }
+
+    .row-seek md-icon-button.primary {
+      --md-icon-button-icon-size: 24px;
+      --md-icon-button-container-width: 40px;
+      --md-icon-button-container-height: 40px;
+    }
+
+    .timeline {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-width: 0;
+    }
+
+    .seek-bar {
+      width: 100%;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+    }
+
+    .seek-bar::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: #fff;
+      cursor: pointer;
+    }
+
+    .seek-labels {
+      display: flex;
+      justify-content: space-between;
+      font-size: 11px;
+      opacity: 0.8;
+    }
+
+    .current-time {
+      font-size: 12px;
+      opacity: 0.9;
+      white-space: nowrap;
+      min-width: 60px;
+      text-align: center;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], PlaybackControls.prototype, "playbackState", void 0);
+__decorate([
+    property({ type: Number })
+], PlaybackControls.prototype, "speed", void 0);
+__decorate([
+    property({ type: String })
+], PlaybackControls.prototype, "currentTime", void 0);
+__decorate([
+    property({ type: Object })
+], PlaybackControls.prototype, "timeRange", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_startTime", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_seekValue", void 0);
+PlaybackControls = PlaybackControls_1 = __decorate([
+    customElement('ox-playback-controls')
+], PlaybackControls);
+export { PlaybackControls };
+//# sourceMappingURL=ox-playback-controls.js.map

package/dist/src/ox-playback-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-playback-controls.js","sourceRoot":"","sources":["../../src/ox-playback-controls.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/iconbutton/icon-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport type { PlaybackState } from './graphql/playback-subscription.js'\n\nconst ONE_HOUR = 3600000\n\n/**\n * 플레이백 컨트롤 오버레이 바 (2행 구조)\n *\n * 1행: 시작 시점 설정 (datetime + ±1h 버튼) + 배속 선택\n * 2행: 재생 제어 (play/pause/stop) + 1시간 범위 시크바 + 닫기\n *\n * @fires playback-start - 플레이백 시작 요청 { fromTime, speed }\n * @fires playback-pause - 일시정지 요청\n * @fires playback-resume - 재개 요청\n * @fires playback-stop - 중지 요청\n * @fires playback-seek - 시크 요청 { toTime }\n * @fires playback-speed - 배속 변경 요청 { speed }\n */\n@customElement('ox-playback-controls')\nexport class PlaybackControls extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      justify-content: center;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      z-index: 1001;\n      pointer-events: none;\n    }\n\n    .control-bar {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 10px 16px;\n      margin: 12px;\n      max-width: 560px;\n      width: 100%;\n      background: rgba(0, 0, 0, 0.75);\n      backdrop-filter: blur(8px);\n      border-radius: 12px;\n      color: #fff;\n      pointer-events: auto;\n      font-size: 13px;\n      box-sizing: border-box;\n    }\n\n    /* 1행: 시점 설정 + 배속 */\n    .row-time {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .row-time md-icon-button {\n      --md-icon-button-icon-color: #fff;\n      --md-icon-button-state-layer-color: #fff;\n      --md-icon-button-icon-size: 18px;\n      --md-icon-button-container-width: 32px;\n      --md-icon-button-container-height: 32px;\n    }\n\n    .date-input {\n      background: rgba(255, 255, 255, 0.15);\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 6px;\n      color: #fff;\n      font-size: 13px;\n      padding: 4px 8px;\n      outline: none;\n      color-scheme: dark;\n      width: 130px;\n    }\n\n    .date-input:focus {\n      border-color: rgba(255, 255, 255, 0.6);\n    }\n\n    .hour-select {\n      background: rgba(255, 255, 255, 0.15);\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 6px;\n      color: #fff;\n      font-size: 13px;\n      padding: 4px 6px;\n      outline: none;\n      color-scheme: dark;\n      cursor: pointer;\n    }\n\n    .hour-select:focus {\n      border-color: rgba(255, 255, 255, 0.6);\n    }\n\n    .time-label {\n      font-size: 12px;\n      opacity: 0.7;\n      white-space: nowrap;\n    }\n\n    .spacer {\n      flex: 1;\n    }\n\n    .speed-group {\n      display: flex;\n      gap: 2px;\n    }\n\n    .speed-btn {\n      padding: 4px 8px;\n      border: 1px solid rgba(255, 255, 255, 0.3);\n      border-radius: 4px;\n      background: transparent;\n      color: #fff;\n      font-size: 12px;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    .speed-btn:hover {\n      background: rgba(255, 255, 255, 0.15);\n    }\n\n    .speed-btn.active {\n      background: rgba(255, 255, 255, 0.3);\n      border-color: #fff;\n    }\n\n    /* 2행: 재생 제어 + 시크바 */\n    .row-seek {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .row-seek md-icon-button {\n      --md-icon-button-icon-color: #fff;\n      --md-icon-button-state-layer-color: #fff;\n      --md-icon-button-icon-size: 20px;\n      --md-icon-button-container-width: 36px;\n      --md-icon-button-container-height: 36px;\n    }\n\n    .row-seek md-icon-button.primary {\n      --md-icon-button-icon-size: 24px;\n      --md-icon-button-container-width: 40px;\n      --md-icon-button-container-height: 40px;\n    }\n\n    .timeline {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-width: 0;\n    }\n\n    .seek-bar {\n      width: 100%;\n      height: 4px;\n      -webkit-appearance: none;\n      appearance: none;\n      background: rgba(255, 255, 255, 0.3);\n      border-radius: 2px;\n      outline: none;\n      cursor: pointer;\n    }\n\n    .seek-bar::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: #fff;\n      cursor: pointer;\n    }\n\n    .seek-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 11px;\n      opacity: 0.8;\n    }\n\n    .current-time {\n      font-size: 12px;\n      opacity: 0.9;\n      white-space: nowrap;\n      min-width: 60px;\n      text-align: center;\n    }\n  `\n\n  @property({ type: String }) playbackState: PlaybackState = 'idle'\n  @property({ type: Number }) speed: number = 1\n  @property({ type: String }) currentTime: string = ''\n\n  /** 외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산) */\n  @property({ type: Object }) timeRange: { from: Date; to: Date } = {\n    from: new Date(Date.now() - ONE_HOUR),\n    to: new Date()\n  }\n\n  @state() private _startTime: Date = PlaybackControls._floorToHour(new Date(Date.now() - ONE_HOUR))\n  @state() private _seekValue: number = 0\n\n  private _speeds = [1, 2, 4, 8]\n\n  private get _endTime(): Date {\n    return new Date(this._startTime.getTime() + ONE_HOUR)\n  }\n\n  private static _floorToHour(date: Date): Date {\n    const d = new Date(date)\n    d.setMinutes(0, 0, 0)\n    return d\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this._startTime = PlaybackControls._floorToHour(this.timeRange.from)\n  }\n\n  updated(changes: Map<string, any>) {\n    if (changes.has('timeRange') && this.timeRange) {\n      this._startTime = PlaybackControls._floorToHour(this.timeRange.from)\n    }\n    if (changes.has('currentTime') && this.currentTime) {\n      this._updateSeekPosition()\n    }\n  }\n\n  render() {\n    const isPlaying = this.playbackState === 'playing'\n    const isPaused = this.playbackState === 'paused'\n    const isActive = isPlaying || isPaused\n\n    return html`\n      <div class=\"control-bar\">\n        <!-- 1행: 시점 설정 + 배속 -->\n        <div class=\"row-time\">\n          <md-icon-button @click=${this._shiftTime(-1)} title=\"-1h\">\n            <md-icon>chevron_left</md-icon>\n          </md-icon-button>\n\n          <input\n            type=\"date\"\n            class=\"date-input\"\n            .value=${this._toDateString(this._startTime)}\n            @change=${this._onDateChange}\n          />\n\n          <select class=\"hour-select\" .value=${String(this._startTime.getHours())} @change=${this._onHourChange}>\n            ${Array.from({ length: 24 }, (_, i) => html`\n              <option value=${i} ?selected=${this._startTime.getHours() === i}>\n                ${String(i).padStart(2, '0')}:00\n              </option>\n            `)}\n          </select>\n\n          <md-icon-button @click=${this._shiftTime(1)} title=\"+1h\">\n            <md-icon>chevron_right</md-icon>\n          </md-icon-button>\n\n          <span class=\"time-label\">~ ${String(this._endTime.getHours()).padStart(2, '0')}:00</span>\n\n          <span class=\"spacer\"></span>\n\n          <div class=\"speed-group\">\n            ${this._speeds.map(\n              s => html`\n                <button class=\"speed-btn ${this.speed === s ? 'active' : ''}\" @click=${() => this._onSpeedChange(s)}>\n                  ×${s}\n                </button>\n              `\n            )}\n          </div>\n        </div>\n\n        <!-- 2행: 재생 제어 + 시크바 + 닫기 -->\n        <div class=\"row-seek\">\n          ${isActive\n            ? html`\n                <md-icon-button class=\"primary\" @click=${this._onTogglePlayPause}>\n                  <md-icon>${isPlaying ? 'pause' : 'play_arrow'}</md-icon>\n                </md-icon-button>\n                <md-icon-button @click=${this._onStop}>\n                  <md-icon>stop</md-icon>\n                </md-icon-button>\n              `\n            : html`\n                <md-icon-button class=\"primary\" @click=${this._onStart}>\n                  <md-icon>play_arrow</md-icon>\n                </md-icon-button>\n              `}\n\n          <div class=\"timeline\">\n            <input\n              type=\"range\"\n              class=\"seek-bar\"\n              min=\"0\"\n              max=\"1000\"\n              .value=${String(this._seekValue)}\n              @input=${this._onSeekInput}\n              @change=${this._onSeekChange}\n            />\n            <div class=\"seek-labels\">\n              <span>${this._formatTime(this._startTime)}</span>\n              <span>${this._formatTime(this._endTime)}</span>\n            </div>\n          </div>\n\n          <span class=\"current-time\">\n            ${this.currentTime ? this._formatTime(new Date(this.currentTime)) : '--:--:--'}\n          </span>\n\n          <md-icon-button @click=${this._onStop}>\n            <md-icon>close</md-icon>\n          </md-icon-button>\n        </div>\n      </div>\n    `\n  }\n\n  private _formatTime(date: Date): string {\n    return date.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })\n  }\n\n  private _toDateString(date: Date): string {\n    const pad = (n: number) => String(n).padStart(2, '0')\n    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`\n  }\n\n  private _updateSeekPosition() {\n    if (!this.currentTime) return\n    const current = new Date(this.currentTime).getTime()\n    const from = this._startTime.getTime()\n    const to = this._endTime.getTime()\n    const range = to - from\n    if (range <= 0) return\n    this._seekValue = Math.max(0, Math.min(1000, Math.round(((current - from) / range) * 1000)))\n  }\n\n  private _onDateChange(e: Event) {\n    const value = (e.target as HTMLInputElement).value\n    if (!value) return\n    const [year, month, day] = value.split('-').map(Number)\n    const t = new Date(this._startTime)\n    t.setFullYear(year, month - 1, day)\n    this._startTime = t\n  }\n\n  private _onHourChange(e: Event) {\n    const hour = Number((e.target as HTMLSelectElement).value)\n    const t = new Date(this._startTime)\n    t.setHours(hour, 0, 0, 0)\n    this._startTime = t\n  }\n\n  private _shiftTime(hours: number) {\n    return () => {\n      this._startTime = new Date(this._startTime.getTime() + hours * ONE_HOUR)\n    }\n  }\n\n  private _onStart() {\n    this.dispatchEvent(\n      new CustomEvent('playback-start', {\n        detail: { fromTime: this._startTime, speed: this.speed },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onTogglePlayPause() {\n    if (this.playbackState === 'playing') {\n      this.dispatchEvent(new CustomEvent('playback-pause', { bubbles: true, composed: true }))\n    } else {\n      this.dispatchEvent(new CustomEvent('playback-resume', { bubbles: true, composed: true }))\n    }\n  }\n\n  private _onStop() {\n    this.dispatchEvent(new CustomEvent('playback-stop', { bubbles: true, composed: true }))\n  }\n\n  private _onSeekInput(e: Event) {\n    this._seekValue = Number((e.target as HTMLInputElement).value)\n  }\n\n  private _onSeekChange(e: Event) {\n    const ratio = Number((e.target as HTMLInputElement).value) / 1000\n    const from = this._startTime.getTime()\n    const to = this._endTime.getTime()\n    const targetTime = new Date(from + (to - from) * ratio)\n\n    this.dispatchEvent(\n      new CustomEvent('playback-seek', {\n        detail: { toTime: targetTime },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onSpeedChange(speed: number) {\n    this.dispatchEvent(\n      new CustomEvent('playback-speed', {\n        detail: { speed },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

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

@@ -78,7 +78,10 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
         }
 
         .card[selected] {
-          border: red solid;
+          border: 3px solid var(--md-sys-color-primary, #6750a4);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 30%, transparent), 0 4px 12px rgba(0, 0, 0, 0.25);
+          transform: scale(1.02);
+          transition: all 0.2s ease;
         }
 
         .card.create {
@@ -250,6 +253,13 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
         if (changed.has('type') || changed.has('group') || changed.has('inherited') || changed.has('search')) {
             this.refreshBoards();
         }
+        if (changed.has('boards') || changed.has('value')) {
+            await this.updateComplete;
+            const selected = this.renderRoot.querySelector('.card[selected]');
+            if (selected) {
+                selected.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }
     }
     onClickSelect(board) {
         this.dispatchEvent(new CustomEvent('board-selected', {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-board-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-board-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\nimport './ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\nimport { InheritedValueType } from '@operato/shell'\nimport { adjustFilters } from '@operato/utils'\n\nconst FETCH_BOARD_LIST_GQL = gql`\n  query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {\n    boards(filters: $filters, pagination: $pagination, sortings: $sortings, inherited: $inherited) {\n      items {\n        id\n        name\n        description\n        thumbnail\n      }\n      total\n    }\n  }\n`\n\nconst FETCH_BOARD_GROUP_LIST_GQL = gql`\n  {\n    groups {\n      items {\n        id\n        name\n        description\n      }\n      total\n    }\n  }\n`\n\nconst CREATE_BOARD_GQL = gql`\n  mutation CreateBoard($board: NewBoard!) {\n    createBoard(board: $board) {\n      id\n      name\n      description\n      model\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-board-selector')\nexport class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          color: var(--md-sys-color-on-surface);\n          background-color: var(--md-sys-color-surface);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          color: var(--md-sys-color-on-secondary);\n          background-color: var(--md-sys-color-secondary);\n          opacity: 0.9;\n          margin-top: -35px;\n          width: 100%;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          color: var(--md-sys-color-on-secondary);\n          background-color: var(--md-sys-color-secondary);\n          width: 100%;\n          min-height: 16px;\n          font-size: 0.6rem;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          display: flex;\n          align-items: center;\n          padding: var(--popup-content-padding);\n          color: var(--md-sys-color-on-surface-variant);\n          background-color: var(--md-sys-color-surface-variant);\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter > ox-input-search {\n          margin-right: auto;\n          border: var(--md-sys-color-primary) 1px solid;\n          padding: var(--spacing-small) var(--spacing-small);\n          border-radius: 999px;\n          color: var(--md-sys-color-primary);\n        }\n\n        #filter > div {\n          float: right;\n          margin-left: 10px;\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) boards: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: String }) type?: '' | 'main' | 'sub' | 'popup'\n  @property({ type: String }) search?: string\n  @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 50\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <ox-input-search\n          @change=${(e: Event) => {\n            this.search = (e.currentTarget as any)?.value\n          }}\n        ></ox-input-search>\n        <div>\n          <label for=\"type\">Type</label>\n          <select\n            id=\"type\"\n            @change=${(e: Event) => {\n              this.type = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"\">${i18next.t('label.all')}</option>\n            ${['main', 'sub', 'popup'].map(type => html` <option value=${type}>${type}</option> `)}\n          </select>\n        </div>\n\n        <div>\n          <label for=\"group\">Group</label>\n          <select\n            id=\"group\"\n            @change=${(e: Event) => {\n              this.group = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"\">${i18next.t('label.all')}</option>\n            ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n          </select>\n        </div>\n\n        <div>\n          <label for=\"inherited\">Inherited</label>\n          <select\n            id=\"inherited\"\n            @change=${(e: Event) => {\n              this.inherited = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"Include\">Include</option>\n            <option value=\"Only\">Only</option>\n            <option value=\"None\">None</option>\n          </select>\n        </div>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-board-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}\n              ></ox-board-creation-card>\n            `\n          : html``}\n        ${this.boards.map(\n          board => html`\n            <div class=\"card\" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>\n              <img src=${board.thumbnail} />\n              <div class=\"name\">${board.name}</div>\n              <div class=\"description\">${board.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendBoards()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('type') || changed.has('group') || changed.has('inherited') || changed.has('search')) {\n      this.refreshBoards()\n    }\n  }\n\n  onClickSelect(board: any) {\n    this.dispatchEvent(\n      new CustomEvent('board-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          board\n        }\n      })\n    )\n  }\n\n  async onCreateBoard(e: CustomEvent) {\n    var { name, description, type, groupId, model, thumbnail } = e.detail\n\n    await this.createBoard(name, description, type, groupId, model, thumbnail)\n    this.refreshBoards()\n  }\n\n  async refreshGroups() {\n    var groupListResponse = await client.query({\n      query: FETCH_BOARD_GROUP_LIST_GQL,\n      context: gqlContext()\n    })\n\n    if (!groupListResponse || !groupListResponse.data) return\n\n    var groups = groupListResponse.data.groups.items\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshBoards() {\n    var boards = await this.getBoards()\n    this.boards = [...boards]\n\n    var creationCard = this.renderRoot.querySelector('ox-board-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendBoards() {\n    var boards = await this.getBoards({ page: this._page + 1 })\n    this.boards = [...this.boards, ...boards]\n  }\n\n  async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group) {\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n    }\n\n    if (this.search) {\n      const value = `%${this.search.trim()}%`\n\n      filters.push({\n        name: 'name',\n        operator: 'search',\n        value: this.search\n      })\n\n      filters.push({\n        name: 'description',\n        operator: 'search',\n        value: this.search\n      })\n    }\n\n    if (this.type) {\n      filters.push({\n        name: 'type',\n        operator: 'eq',\n        value: this.type\n      })\n    }\n\n    var variables = {\n      filters,\n      sortings,\n      pagination,\n      inherited: this.inherited || InheritedValueType.Include\n    }\n\n    var boardListResponse = await client.query({\n      query: FETCH_BOARD_LIST_GQL,\n      variables\n    })\n\n    if (!boardListResponse || !boardListResponse.data) return []\n    this._total = boardListResponse.data.boards.total\n    this._page = page\n\n    return boardListResponse.data.boards.items\n  }\n\n  async createBoard(\n    name: string,\n    description: string,\n    type: string,\n    groupId: string,\n    modelTemplate: any,\n    thumbnail: string\n  ) {\n    var model = JSON.stringify(\n      modelTemplate || {\n        width: 1200,\n        height: 800,\n        fillStyle: 'white'\n      }\n    )\n\n    const response = await client.mutate({\n      mutation: CREATE_BOARD_GQL,\n      variables: {\n        board: {\n          name,\n          description,\n          type,\n          groupId,\n          model,\n          thumbnail\n        }\n      },\n      context: gqlContext()\n    })\n\n    return response.data\n  }\n}\n"]}
+{"version":3,"file":"ox-board-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-board-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\nimport './ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\nimport { InheritedValueType } from '@operato/shell'\nimport { adjustFilters } from '@operato/utils'\n\nconst FETCH_BOARD_LIST_GQL = gql`\n  query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {\n    boards(filters: $filters, pagination: $pagination, sortings: $sortings, inherited: $inherited) {\n      items {\n        id\n        name\n        description\n        thumbnail\n      }\n      total\n    }\n  }\n`\n\nconst FETCH_BOARD_GROUP_LIST_GQL = gql`\n  {\n    groups {\n      items {\n        id\n        name\n        description\n      }\n      total\n    }\n  }\n`\n\nconst CREATE_BOARD_GQL = gql`\n  mutation CreateBoard($board: NewBoard!) {\n    createBoard(board: $board) {\n      id\n      name\n      description\n      model\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-board-selector')\nexport class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          color: var(--md-sys-color-on-surface);\n          background-color: var(--md-sys-color-surface);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: 3px solid var(--md-sys-color-primary, #6750a4);\n          box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 30%, transparent), 0 4px 12px rgba(0, 0, 0, 0.25);\n          transform: scale(1.02);\n          transition: all 0.2s ease;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          color: var(--md-sys-color-on-secondary);\n          background-color: var(--md-sys-color-secondary);\n          opacity: 0.9;\n          margin-top: -35px;\n          width: 100%;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          color: var(--md-sys-color-on-secondary);\n          background-color: var(--md-sys-color-secondary);\n          width: 100%;\n          min-height: 16px;\n          font-size: 0.6rem;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          display: flex;\n          align-items: center;\n          padding: var(--popup-content-padding);\n          color: var(--md-sys-color-on-surface-variant);\n          background-color: var(--md-sys-color-surface-variant);\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter > ox-input-search {\n          margin-right: auto;\n          border: var(--md-sys-color-primary) 1px solid;\n          padding: var(--spacing-small) var(--spacing-small);\n          border-radius: 999px;\n          color: var(--md-sys-color-primary);\n        }\n\n        #filter > div {\n          float: right;\n          margin-left: 10px;\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) boards: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: String }) type?: '' | 'main' | 'sub' | 'popup'\n  @property({ type: String }) search?: string\n  @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 50\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <ox-input-search\n          @change=${(e: Event) => {\n            this.search = (e.currentTarget as any)?.value\n          }}\n        ></ox-input-search>\n        <div>\n          <label for=\"type\">Type</label>\n          <select\n            id=\"type\"\n            @change=${(e: Event) => {\n              this.type = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"\">${i18next.t('label.all')}</option>\n            ${['main', 'sub', 'popup'].map(type => html` <option value=${type}>${type}</option> `)}\n          </select>\n        </div>\n\n        <div>\n          <label for=\"group\">Group</label>\n          <select\n            id=\"group\"\n            @change=${(e: Event) => {\n              this.group = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"\">${i18next.t('label.all')}</option>\n            ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n          </select>\n        </div>\n\n        <div>\n          <label for=\"inherited\">Inherited</label>\n          <select\n            id=\"inherited\"\n            @change=${(e: Event) => {\n              this.inherited = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"Include\">Include</option>\n            <option value=\"Only\">Only</option>\n            <option value=\"None\">None</option>\n          </select>\n        </div>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-board-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}\n              ></ox-board-creation-card>\n            `\n          : html``}\n        ${this.boards.map(\n          board => html`\n            <div class=\"card\" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>\n              <img src=${board.thumbnail} />\n              <div class=\"name\">${board.name}</div>\n              <div class=\"description\">${board.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendBoards()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('type') || changed.has('group') || changed.has('inherited') || changed.has('search')) {\n      this.refreshBoards()\n    }\n\n    if (changed.has('boards') || changed.has('value')) {\n      await this.updateComplete\n      const selected = this.renderRoot.querySelector('.card[selected]') as HTMLElement\n      if (selected) {\n        selected.scrollIntoView({ behavior: 'smooth', block: 'center' })\n      }\n    }\n  }\n\n  onClickSelect(board: any) {\n    this.dispatchEvent(\n      new CustomEvent('board-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          board\n        }\n      })\n    )\n  }\n\n  async onCreateBoard(e: CustomEvent) {\n    var { name, description, type, groupId, model, thumbnail } = e.detail\n\n    await this.createBoard(name, description, type, groupId, model, thumbnail)\n    this.refreshBoards()\n  }\n\n  async refreshGroups() {\n    var groupListResponse = await client.query({\n      query: FETCH_BOARD_GROUP_LIST_GQL,\n      context: gqlContext()\n    })\n\n    if (!groupListResponse || !groupListResponse.data) return\n\n    var groups = groupListResponse.data.groups.items\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshBoards() {\n    var boards = await this.getBoards()\n    this.boards = [...boards]\n\n    var creationCard = this.renderRoot.querySelector('ox-board-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendBoards() {\n    var boards = await this.getBoards({ page: this._page + 1 })\n    this.boards = [...this.boards, ...boards]\n  }\n\n  async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group) {\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n    }\n\n    if (this.search) {\n      const value = `%${this.search.trim()}%`\n\n      filters.push({\n        name: 'name',\n        operator: 'search',\n        value: this.search\n      })\n\n      filters.push({\n        name: 'description',\n        operator: 'search',\n        value: this.search\n      })\n    }\n\n    if (this.type) {\n      filters.push({\n        name: 'type',\n        operator: 'eq',\n        value: this.type\n      })\n    }\n\n    var variables = {\n      filters,\n      sortings,\n      pagination,\n      inherited: this.inherited || InheritedValueType.Include\n    }\n\n    var boardListResponse = await client.query({\n      query: FETCH_BOARD_LIST_GQL,\n      variables\n    })\n\n    if (!boardListResponse || !boardListResponse.data) return []\n    this._total = boardListResponse.data.boards.total\n    this._page = page\n\n    return boardListResponse.data.boards.items\n  }\n\n  async createBoard(\n    name: string,\n    description: string,\n    type: string,\n    groupId: string,\n    modelTemplate: any,\n    thumbnail: string\n  ) {\n    var model = JSON.stringify(\n      modelTemplate || {\n        width: 1200,\n        height: 800,\n        fillStyle: 'white'\n      }\n    )\n\n    const response = await client.mutate({\n      mutation: CREATE_BOARD_GQL,\n      variables: {\n        board: {\n          name,\n          description,\n          type,\n          groupId,\n          model,\n          thumbnail\n        }\n      },\n      context: gqlContext()\n    })\n\n    return response.data\n  }\n}\n"]}