@operato/board 10.0.0-beta.4 → 10.0.0-beta.41

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

@@ -1 +1 @@
-{"version":3,"file":"ox-board-modeller.js","sourceRoot":"","sources":["../../src/ox-board-modeller.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\nimport '@hatiolab/things-scene'\nimport './modeller/scene-viewer/ox-scene-handler.js'\nimport './modeller/scene-viewer/ox-scene-layer.js'\nimport './modeller/scene-viewer/ox-scene-property.js'\nimport './modeller/scene-viewer/ox-scene-viewer.js'\nimport './ox-board-viewer.js'\n\nimport { saveAs } from 'file-saver'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { MODE_EDIT, Scene, SCENE_MODE, SceneMode } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { OxPopup } from '@operato/popup'\nimport { isMacOS, togglefullscreen } from '@operato/utils'\n\nimport { ComponentToolbar } from './modeller/component-toolbar/component-toolbar.js'\nimport { EditToolbar } from './modeller/edit-toolbar.js'\nimport { PropertySidebar } from './modeller/property-sidebar.js'\nimport { ComponentGroup, ComponentTemplate } from './types.js'\nimport OxSceneViewer from './modeller/scene-viewer/ox-scene-viewer.js'\n\nconst MACOS = isMacOS()\n\nconst ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href\nconst ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href\nconst ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href\nconst ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href\n\nvar Registry: ComponentGroup[] = []\n\n@customElement('ox-board-modeller')\nexport class BoardModeller extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      edit-toolbar {\n        flex: 45px;\n        max-height: 45px;\n      }\n\n      div[content] {\n        flex: 1;\n        max-height: calc(100% - 45px);\n\n        display: flex;\n        flex-direction: row;\n      }\n\n      component-toolbar {\n        max-height: 100%;\n      }\n\n      property-sidebar {\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        position: relative;\n\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n      }\n\n      ox-scene-viewer {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n      }\n\n      md-fab {\n        position: absolute;\n        right: 15px;\n        bottom: 15px;\n        z-index: 1000;\n      }\n\n      ox-popup {\n        width: 90%;\n        height: 90%;\n        left: 50%;\n        top: 50%;\n        transform: translateX(-50%) translateY(-50%);\n        background: var(--md-sys-color-on-secondary-container, black);\n\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      ox-board-viewer {\n        width: 98%;\n        height: 98%;\n        margin: auto;\n        padding: 0;\n      }\n    `\n  ]\n\n  static registerGroup(group: ComponentGroup) {\n    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)\n\n    if (found) {\n      found = {\n        ...found,\n        ...group\n      }\n    } else {\n      Registry.push(group)\n    }\n  }\n\n  static registerTemplate(templates: ComponentTemplate[]): void {\n    templates &&\n      templates.forEach(template => {\n        var groups: string[] = typeof template.group == 'string' ? [template.group] : template.group\n\n        Registry.filter(group => groups.includes(group.name)).forEach(group => {\n          if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n            group.templates.push(template)\n          }\n        })\n      })\n  }\n\n  static get groups(): ComponentGroup[] {\n    return Registry\n  }\n\n  static getGroup(name: string) {\n    return Registry.find(group => group.name === name)\n  }\n\n  @property({ type: String }) boardName: string = ''\n  @property({ type: Object }) model: any = null\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Array }) selected: any[] = []\n  @property({ type: Number }) mode: SceneMode = SCENE_MODE.EDIT\n  @property({ type: Object }) provider: any = null\n  @property({ type: Boolean }) hideProperty: boolean = false\n  @property({ type: String }) overlay: string = ''\n  @property({ type: Object }) scene?: Scene\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  @query('edit-toolbar') private editToolbar!: EditToolbar\n  @query('ox-scene-viewer') private viewer!: OxSceneViewer\n\n  private group: string = ''\n  private shortcutHandler?: (e: KeyboardEvent) => void\n\n  constructor() {\n    super()\n\n    document.addEventListener('get-all-scene-component-ids', (e: Event) => {\n      var { component, callback } = (e as CustomEvent).detail\n\n      if (!this.scene) return\n\n      var ids\n      if (component) {\n        ids = this.scene.findAll(component).map((c: any) => c.model.id)\n      } else {\n        // @ts-ignore\n        ids = this.scene.ids.map(({ key }) => key)\n      }\n\n      ids = ids.filter(Boolean).sort()\n      callback(ids)\n    })\n\n    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)\n    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)\n    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)\n    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)\n  }\n\n  static get scopedElements() {\n    return {\n      'edit-toolbar': EditToolbar,\n      'property-sidebar': PropertySidebar,\n      'component-toolbar': ComponentToolbar\n    }\n  }\n\n  render() {\n    return html`\n      <edit-toolbar\n        .scene=${this.scene}\n        .selected=${this.selected}\n        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}\n        @open-preview=${() => this.preview()}\n        @download-model=${() => this.downloadModel()}\n        @modeller-fullscreen=${() => togglefullscreen(this)}\n      >\n        ${this.renderBrandingZone()}\n      </edit-toolbar>\n\n      <div content>\n        <component-toolbar\n          .scene=${this.scene}\n          .mode=${this.mode}\n          @mode-changed=${(e: CustomEvent) => {\n            this.mode = e.detail.value\n          }}\n          .componentGroupList=${this.componentGroupList}\n          .group=${this.group}\n        >\n        </component-toolbar>\n\n        <div id=\"scene-wrap\">\n          <ox-scene-viewer\n            id=\"scene\"\n            .scene=${this.scene}\n            @scene-changed=${(e: CustomEvent) => {\n              this.scene = e.detail.value\n            }}\n            .model=${this.model}\n            .selected=${this.selected}\n            @selected-changed=${(e: CustomEvent) => {\n              this.selected = e.detail.value\n            }}\n            .mode=${this.mode}\n            @mode-changed=${(e: CustomEvent) => {\n              this.mode = e.detail.value\n            }}\n            fit=\"ratio\"\n            .baseUrl=${this.baseUrl}\n            @contextmenu=${() => this.onContextMenu()}\n            .provider=${this.provider}\n            name=\"modeller\"\n          >\n            <ox-scene-layer type=\"selection-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"modeling-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"add-layer\"> </ox-scene-layer>\n            <ox-scene-layer type=\"guide-layer\">\n              <ox-scene-property name=\"ruler\" value=\"disabled\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-layer type=\"shift-layer\">\n              <ox-scene-property name=\"text\" value=\"${this.overlay}\"></ox-scene-property>\n              <ox-scene-property name=\"alpha\" value=\"0.3\"></ox-scene-property>\n              <ox-scene-property name=\"fontFamily\" value=\"arial\"></ox-scene-property>\n              <ox-scene-property name=\"fontSize\" value=\"30\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"fontColor\" value=\"navy\"></ox-scene-property>\n              <ox-scene-property name=\"textBaseline\" value=\"top\"></ox-scene-property>\n              <ox-scene-property name=\"textAlign\" value=\"left\"></ox-scene-property>\n              <ox-scene-property name=\"paddingTop\" value=\"50\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"paddingLeft\" value=\"50\" type=\"number\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-handler type=\"text-editor\"></ox-scene-handler>\n            <ox-scene-handler type=\"move-handler\"></ox-scene-handler>\n            <ox-scene-handler type=\"paste-handler\"></ox-scene-handler>\n          </ox-scene-viewer>\n\n          <md-fab @click=${() => this.onTapSave()} title=\"save\">\n            <md-icon slot=\"icon\">save</md-icon>\n          </md-fab>\n        </div>\n\n        <property-sidebar\n          .scene=${this.scene}\n          .selected=${this.selected}\n          .collapsed=${this.hideProperty}\n          .fonts=${this.fonts}\n          .propertyEditor=${this.propertyEditor}\n        >\n        </property-sidebar>\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.bindShortcutEvent()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.unbindShortcutEvent()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('scene') && this.scene) {\n      this.scene.mode = MODE_EDIT\n    }\n  }\n\n  close() {\n    this.model = null\n    this.requestUpdate()\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    if (MACOS) var ctrlKey = e.metaKey\n    else var ctrlKey = e.ctrlKey\n\n    switch (e.code) {\n      case 'KeyS':\n        if (ctrlKey) {\n          this.onTapSave()\n          e.preventDefault()\n        }\n        break\n    }\n  }\n\n  preview() {\n    const board = {\n      id: 'preview',\n      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null\n    }\n\n    OxPopup.open({\n      template: html` <ox-board-viewer style=\"flex: 1;\" .provider=${this.provider} .board=${board}></ox-board-viewer> `,\n      style: 'width: 80vw; height: 80vh;',\n      backdrop: true\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  downloadModel() {\n    if (!this.scene) return\n\n    var model = JSON.stringify(this.model, null, 2)\n    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'\n    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)\n  }\n\n  renderBrandingZone() {\n    return html``\n  }\n\n  onTapSave() {\n    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))\n  }\n\n  bindShortcutEvent() {\n    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.\n    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']\n\n    this.shortcutHandler = (e: KeyboardEvent) => {\n      const target = e.composedPath()[0] as HTMLElement\n      var tagName = target.tagName\n      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'\n      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)\n\n      if (!isGlobalHotkey && isInput) return\n      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)\n    }\n\n    document.addEventListener('keydown', this.shortcutHandler)\n  }\n\n  unbindShortcutEvent() {\n    if (this.shortcutHandler) {\n      document.removeEventListener('keydown', this.shortcutHandler)\n      delete this.shortcutHandler\n    }\n  }\n\n  undoable(): boolean {\n    return !!this.scene?.undoable()\n  }\n\n  redoable(): boolean {\n    return !!this.scene?.redoable()\n  }\n\n  preserve(): void {\n    this.scene?.preserve()\n  }\n\n  hasUnpreservedChanges(): boolean {\n    return !!this.scene?.hasUnpreservedChanges()\n  }\n\n  onContextMenu() {}\n}\n"]}
+{"version":3,"file":"ox-board-modeller.js","sourceRoot":"","sources":["../../src/ox-board-modeller.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\nimport '@hatiolab/things-scene'\nimport './modeller/scene-viewer/ox-scene-handler.js'\nimport './modeller/scene-viewer/ox-scene-layer.js'\nimport './modeller/scene-viewer/ox-scene-property.js'\nimport './modeller/scene-viewer/ox-scene-viewer.js'\nimport './ox-board-viewer.js'\nimport '@operato/input/ox-input-code.js'\n\nimport { saveAs } from 'file-saver'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { LoadTracker, LoadingOverlay, MODE_EDIT, Scene, SCENE_MODE, SceneMode } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { OxPopup } from '@operato/popup'\nimport { openPopup } from '@operato/layout'\nimport { i18next } from '@operato/i18n'\nimport { isMacOS, togglefullscreen } from '@operato/utils'\n\nimport { ComponentToolbar } from './modeller/component-toolbar/component-toolbar.js'\nimport { EditToolbar } from './modeller/edit-toolbar.js'\nimport { PropertySidebar } from './modeller/property-sidebar.js'\nimport { ComponentGroup, ComponentTemplate } from './types.js'\nimport OxSceneViewer from './modeller/scene-viewer/ox-scene-viewer.js'\n\nconst MACOS = isMacOS()\n\nconst ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href\nconst ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href\nconst ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href\nconst ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href\n\nvar Registry: ComponentGroup[] = []\n\n@customElement('ox-board-modeller')\nexport class BoardModeller extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      edit-toolbar {\n        flex: 45px;\n        max-height: 45px;\n      }\n\n      div[content] {\n        flex: 1;\n        max-height: calc(100% - 45px);\n\n        display: flex;\n        flex-direction: row;\n      }\n\n      component-toolbar {\n        max-height: 100%;\n      }\n\n      property-sidebar {\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        position: relative;\n\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n      }\n\n      ox-scene-viewer {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n      }\n\n      md-fab {\n        position: absolute;\n        right: 15px;\n        bottom: 15px;\n        z-index: 1000;\n      }\n\n      ox-popup {\n        width: 90%;\n        height: 90%;\n        left: 50%;\n        top: 50%;\n        transform: translateX(-50%) translateY(-50%);\n        background: var(--md-sys-color-on-secondary-container, black);\n\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      ox-board-viewer {\n        width: 98%;\n        height: 98%;\n        margin: auto;\n        padding: 0;\n      }\n    `\n  ]\n\n  static registerGroup(group: ComponentGroup) {\n    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)\n\n    if (found) {\n      found = {\n        ...found,\n        ...group\n      }\n    } else {\n      Registry.push(group)\n    }\n  }\n\n  static registerTemplate(templates: ComponentTemplate[]): void {\n    templates &&\n      templates.forEach(template => {\n        var groups: string[] = typeof template.group == 'string' ? [template.group] : template.group\n\n        Registry.filter(group => groups.includes(group.name)).forEach(group => {\n          if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n            group.templates.push(template)\n          }\n        })\n      })\n  }\n\n  static get groups(): ComponentGroup[] {\n    return Registry\n  }\n\n  static getGroup(name: string) {\n    return Registry.find(group => group.name === name)\n  }\n\n  @property({ type: String }) boardName: string = ''\n  @property({ type: Object }) model: any = null\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Array }) selected: any[] = []\n  @property({ type: Number }) mode: SceneMode = SCENE_MODE.EDIT\n  @property({ type: Object }) provider: any = null\n  @property({ type: Boolean }) hideProperty: boolean = false\n  @property({ type: String }) overlay: string = ''\n  @property({ type: Object }) scene?: Scene\n  @property({ type: Object }) loadTracker?: LoadTracker\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  @query('edit-toolbar') private editToolbar!: EditToolbar\n  @query('ox-scene-viewer') private viewer!: OxSceneViewer\n\n  private group: string = ''\n  private shortcutHandler?: (e: KeyboardEvent) => void\n  private _loadingOverlay?: LoadingOverlay\n\n  constructor() {\n    super()\n\n    document.addEventListener('get-all-scene-component-ids', (e: Event) => {\n      var { component, callback } = (e as CustomEvent).detail\n\n      if (!this.scene) return\n\n      var ids\n      if (component) {\n        ids = this.scene.findAll(component).map((c: any) => c.model.id)\n      } else {\n        // @ts-ignore\n        ids = this.scene.ids.map(({ key }) => key)\n      }\n\n      ids = ids.filter(Boolean).sort()\n      callback(ids)\n    })\n\n    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)\n    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)\n    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)\n    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)\n  }\n\n  static get scopedElements() {\n    return {\n      'edit-toolbar': EditToolbar,\n      'property-sidebar': PropertySidebar,\n      'component-toolbar': ComponentToolbar\n    }\n  }\n\n  render() {\n    return html`\n      <edit-toolbar\n        .scene=${this.scene}\n        .selected=${this.selected}\n        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}\n        @open-preview=${() => this.preview()}\n        @open-data-binding=${() => this.openDataBinding()}\n        @download-model=${() => this.downloadModel()}\n        @edit-model=${() => this.editModel()}\n        @modeller-fullscreen=${() => togglefullscreen(this)}\n      >\n        ${this.renderBrandingZone()}\n      </edit-toolbar>\n\n      <div content>\n        <component-toolbar\n          .scene=${this.scene}\n          .mode=${this.mode}\n          @mode-changed=${(e: CustomEvent) => {\n            this.mode = e.detail.value\n          }}\n          .componentGroupList=${this.componentGroupList}\n          .group=${this.group}\n        >\n        </component-toolbar>\n\n        <div id=\"scene-wrap\">\n          <ox-scene-viewer\n            id=\"scene\"\n            .scene=${this.scene}\n            .loadTracker=${this.loadTracker}\n            @scene-changed=${(e: CustomEvent) => {\n              this.scene = e.detail.value\n            }}\n            .model=${this.model}\n            .selected=${this.selected}\n            @selected-changed=${(e: CustomEvent) => {\n              this.selected = e.detail.value\n            }}\n            .mode=${this.mode}\n            @mode-changed=${(e: CustomEvent) => {\n              this.mode = e.detail.value\n            }}\n            fit=\"ratio\"\n            .baseUrl=${this.baseUrl}\n            @contextmenu=${() => this.onContextMenu()}\n            .provider=${this.provider}\n            name=\"modeller\"\n          >\n            <ox-scene-layer type=\"snap-guide-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"selection-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"modeling-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"add-layer\"> </ox-scene-layer>\n            <ox-scene-layer type=\"shift-layer\">\n              <ox-scene-property name=\"text\" value=\"${this.overlay}\"></ox-scene-property>\n              <ox-scene-property name=\"alpha\" value=\"0.3\"></ox-scene-property>\n              <ox-scene-property name=\"fontFamily\" value=\"arial\"></ox-scene-property>\n              <ox-scene-property name=\"fontSize\" value=\"30\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"fontColor\" value=\"navy\"></ox-scene-property>\n              <ox-scene-property name=\"textBaseline\" value=\"top\"></ox-scene-property>\n              <ox-scene-property name=\"textAlign\" value=\"left\"></ox-scene-property>\n              <ox-scene-property name=\"paddingTop\" value=\"50\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"paddingLeft\" value=\"50\" type=\"number\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-handler type=\"text-editor\"></ox-scene-handler>\n            <ox-scene-handler type=\"move-handler\"></ox-scene-handler>\n            <ox-scene-handler type=\"paste-handler\"></ox-scene-handler>\n          </ox-scene-viewer>\n\n          <md-fab @click=${() => this.onTapSave()} title=\"save\">\n            <md-icon slot=\"icon\">save</md-icon>\n          </md-fab>\n        </div>\n\n        <property-sidebar\n          .scene=${this.scene}\n          .selected=${this.selected}\n          .collapsed=${this.hideProperty}\n          .fonts=${this.fonts}\n          .propertyEditor=${this.propertyEditor}\n        >\n        </property-sidebar>\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.bindShortcutEvent()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.unbindShortcutEvent()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('loadTracker') && this.loadTracker) {\n      if (!this._loadingOverlay) {\n        this._loadingOverlay = new LoadingOverlay()\n      }\n      this._loadingOverlay.attach(this.renderRoot as HTMLElement, this.loadTracker)\n    }\n\n    if (changes.has('scene') && this.scene) {\n      this.scene.mode = MODE_EDIT\n      ;(this.scene as any).onDataBindingToggle = () => this.openDataBinding()\n    }\n  }\n\n  close() {\n    this.model = null\n    this.requestUpdate()\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    if (MACOS) var ctrlKey = e.metaKey\n    else var ctrlKey = e.ctrlKey\n\n    switch (e.code) {\n      case 'KeyS':\n        if (ctrlKey) {\n          this.onTapSave()\n          e.preventDefault()\n        }\n        break\n    }\n  }\n\n  preview() {\n    const board = {\n      id: 'preview',\n      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null\n    }\n\n    OxPopup.open({\n      template: html` <ox-board-viewer style=\"flex: 1;\" .provider=${this.provider} .board=${board}></ox-board-viewer> `,\n      style: 'width: 80vw; height: 80vh;',\n      backdrop: true,\n      preventCloseOnBlur: true\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  private _dataBindingPopup?: any\n\n  openDataBinding() {\n    // 토글: 이미 열려있으면 닫기\n    if (this._dataBindingPopup) {\n      this._dataBindingPopup.close()\n      this._dataBindingPopup = null\n      return\n    }\n\n    if (!this.scene) return\n\n    const selected = this.scene.selected?.[0]\n    if (!selected) return\n\n    import('@operato/property-panel/data-binding-popup.js')\n\n    const PROPS = [\n      '',\n      'text',\n      'fillStyle',\n      'strokeStyle',\n      'fontColor',\n      'value',\n      'data',\n      'source',\n      'hidden',\n      'started',\n      'play',\n      'ref',\n      'action',\n      'options',\n      'rotate',\n      'dimension',\n      'location',\n      'accessor',\n      'appendum',\n      'tag',\n      'tap',\n      '(action)'\n    ].map(p => ({ name: p, label: p }))\n\n    const template = html`\n      <data-binding-popup\n        .mappings=${[...(selected.model.mappings || [])]}\n        .properties=${PROPS}\n        .selected=${selected}\n      ></data-binding-popup>\n    `\n\n    // document 레벨에서 mappings-change 이벤트 수신 (openPopup 컨텍스트에서 Lit 이벤트 바인딩 불가)\n    const onMappingsChange = (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      if (detail?.mappings) {\n        selected.set('mappings', detail.mappings)\n      }\n    }\n    document.addEventListener('mappings-change', onMappingsChange)\n\n    this._dataBindingPopup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: `${i18next.t('label.data-spread')} — ${selected.get('id') || selected.get('type')}`\n    })\n\n    // 팝업이 외부에서 닫힐 때 참조 정리\n    this._dataBindingPopup?.addEventListener?.('closed', () => {\n      document.removeEventListener('mappings-change', onMappingsChange)\n      this._dataBindingPopup = null\n    })\n  }\n\n  downloadModel() {\n    if (!this.scene) return\n\n    var model = JSON.stringify(this.model, null, 2)\n    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'\n    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)\n  }\n\n  private _modelEditorHandle?: any\n\n  editModel() {\n    if (this._modelEditorHandle && !this._modelEditorHandle.closed) {\n      this._modelEditorHandle.close()\n      this._modelEditorHandle = undefined\n      return\n    }\n\n    if (!this.scene) return\n\n    const modelJson = JSON.stringify(this.scene.model, null, 2)\n    let currentValue = modelJson\n\n    const handle = this._modelEditorHandle = openPopup(html`\n      <div style=\"display:flex;flex-direction:column;height:100%;\">\n        <ox-input-code\n          .value=${modelJson}\n          language=\"json\"\n          show-line-numbers\n          style=\"flex:1;overflow:auto;\"\n          @change=${(e: CustomEvent) => { currentValue = e.detail }}\n        ></ox-input-code>\n        <div style=\"display:flex;justify-content:flex-end;gap:8px;padding:8px;background:var(--md-sys-color-surface-container, #f0f0f0);\">\n          <button @click=${() => {\n            try {\n              const model = JSON.parse(currentValue)\n              this.scene!.model = model\n              this.requestUpdate()\n              handle.close()\n            } catch (err) {\n              alert('Invalid JSON: ' + (err as Error).message)\n            }\n          }} style=\"padding:4px 16px;cursor:pointer;\">Apply</button>\n        </div>\n      </div>\n    `, {\n      backdrop: true,\n      title: 'Edit Board Model',\n      size: 'large'\n    })\n    handle.onclosed = () => { this._modelEditorHandle = undefined }\n  }\n\n  renderBrandingZone() {\n    return html``\n  }\n\n  onTapSave() {\n    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))\n  }\n\n  bindShortcutEvent() {\n    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.\n    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F10', 'F11', 'KeyD', 'KeyP', 'KeyS']\n\n    this.shortcutHandler = (e: KeyboardEvent) => {\n      const target = e.composedPath()[0] as HTMLElement\n      var tagName = target.tagName\n      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'\n      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)\n\n      if (!isGlobalHotkey && isInput) return\n      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)\n    }\n\n    document.addEventListener('keydown', this.shortcutHandler)\n  }\n\n  unbindShortcutEvent() {\n    if (this.shortcutHandler) {\n      document.removeEventListener('keydown', this.shortcutHandler)\n      delete this.shortcutHandler\n    }\n  }\n\n  undoable(): boolean {\n    return !!this.scene?.undoable()\n  }\n\n  redoable(): boolean {\n    return !!this.scene?.redoable()\n  }\n\n  preserve(): void {\n    this.scene?.preserve()\n  }\n\n  hasUnpreservedChanges(): boolean {\n    return !!this.scene?.hasUnpreservedChanges()\n  }\n\n  onContextMenu() {}\n}\n"]}

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

@@ -1,7 +1,8 @@
 import '@material/web/icon/icon.js';
 import '@material/web/fab/fab.js';
 import { LitElement, PropertyValues } from 'lit';
-import { Component, ReferenceProvider } from '@hatiolab/things-scene';
+import { Component, LoadTracker, ReferenceProvider } from '@hatiolab/things-scene';
+import './ox-playback-controls.js';
 export declare class BoardViewer extends LitElement {
     static styles: import("lit").CSSResult[];
     baseUrl: string;
@@ -10,8 +11,21 @@ export declare class BoardViewer extends LitElement {
     data: any;
     values: any;
     history: boolean;
+    /** 앱에서 미리 생성한 LoadTracker. fetch 시작 전에 생성하면 네트워크 시간도 추적. */
+    loadTracker?: LoadTracker;
     hideFullscreen: boolean;
     hideNavigation: boolean;
+    playbackEnabled: boolean;
+    playbackTimeRange?: {
+        from: Date;
+        to: Date;
+    };
+    private _playbackState;
+    private _playbackActive;
+    private _playbackSpeed;
+    private _playbackCurrentTime;
+    private _playbackProvider;
+    private _savedRealProvider;
     _scene: any;
     _forward: {
         id: string;
@@ -21,6 +35,7 @@ export declare class BoardViewer extends LitElement {
         id: string;
         scene: any;
     }[];
+    private _loadingOverlay?;
     _oldtarget?: HTMLElement;
     _fade_animations?: Array<Animation>;
     currentBoardId?: string;
@@ -28,7 +43,10 @@ export declare class BoardViewer extends LitElement {
     _target: HTMLElement;
     _prev: HTMLElement;
     _next: HTMLElement;
+    _fabExpanded: boolean;
+    get _is3dMode(): boolean;
     _fullscreen: HTMLElement;
+    _fabGroup: HTMLElement;
     render(): import("lit-html").TemplateResult<1>;
     private resizeHandler;
     connectedCallback(): void;
@@ -36,6 +54,7 @@ export declare class BoardViewer extends LitElement {
     updated(changes: PropertyValues<this>): void;
     initSceneAsync(): Promise<void>;
     initScene(): void;
+    private _ensureOverlay;
     closeScene(): void;
     releaseScene(): void;
     setupScene({ id, scene }: {
@@ -50,6 +69,7 @@ export declare class BoardViewer extends LitElement {
     onTapNext(): void;
     onTapPrev(): void;
     onTapFullscreen(): void;
+    onTapToggle3D(): void;
     onRunBoard(): void;
     onLinkGoto(targetBoardId: string, options: any, fromComponent: Component): void;
     onLinkGotoPlaylist(targetPlayGroupName: string, options: any, fromComponent: Component): void;
@@ -61,6 +81,35 @@ export declare class BoardViewer extends LitElement {
     onExportData(filename: string, value: string | number | object, component: Component): Promise<void>;
     onImportData(_: string, value: string | number | object, component: Component): Promise<void>;
     onClickEvent(e: MouseEvent, hint: any): void;
+    /**
+     * 외부에서 플레이백을 활성화한다.
+     * playback-enabled 속성을 설정하면 컨트롤바가 나타나고,
+     * 이 메서드로 시간 범위 등 상세 설정을 할 수 있다.
+     */
+    enablePlayback(config?: {
+        timeRange?: {
+            from: Date;
+            to: Date;
+        };
+    }): void;
+    disablePlayback(): void;
+    private _onTogglePlaybackPanel;
+    private _onPlaybackStart;
+    private _onPlaybackPause;
+    private _onPlaybackResume;
+    private _onPlaybackStop;
+    private _onPlaybackSeek;
+    private _onPlaybackSpeed;
+    private _startPlayback;
+    private _stopPlayback;
+    /**
+     * 모든 tag 컴포넌트의 기존 구독을 해제한다.
+     */
+    private _unsubscribeAll;
+    /**
+     * 모든 tag 컴포넌트를 현재 provider로 재구독한다.
+     */
+    private _resubscribeAll;
     hidePopup(): void;
     getSceneData(): any;
     getSceneValues(): any;

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

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