@operato/board 9.2.8 → 10.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +70 -4
- package/dist/src/graphql/playback-subscription.d.ts +74 -0
- package/dist/src/graphql/playback-subscription.js +191 -0
- package/dist/src/graphql/playback-subscription.js.map +1 -0
- package/dist/src/modeller/component-toolbar/component-toolbar.d.ts +3 -3
- package/dist/src/modeller/component-toolbar/component-toolbar.js.map +1 -1
- package/dist/src/modeller/edit-toolbar-style.js +38 -1
- package/dist/src/modeller/edit-toolbar-style.js.map +1 -1
- package/dist/src/modeller/edit-toolbar.d.ts +5 -0
- package/dist/src/modeller/edit-toolbar.js +168 -47
- package/dist/src/modeller/edit-toolbar.js.map +1 -1
- package/dist/src/modeller/property-sidebar.d.ts +2 -44
- package/dist/src/modeller/property-sidebar.js +5 -337
- package/dist/src/modeller/property-sidebar.js.map +1 -1
- package/dist/src/modeller/scene-viewer/ox-scene-viewer.d.ts +5 -5
- package/dist/src/modeller/scene-viewer/ox-scene-viewer.js +1 -10
- package/dist/src/modeller/scene-viewer/ox-scene-viewer.js.map +1 -1
- package/dist/src/ox-board-modeller.d.ts +2 -2
- package/dist/src/ox-board-modeller.js +1 -1
- package/dist/src/ox-board-modeller.js.map +1 -1
- package/dist/src/ox-board-viewer.d.ts +44 -3
- package/dist/src/ox-board-viewer.js +204 -47
- package/dist/src/ox-board-viewer.js.map +1 -1
- package/dist/src/ox-playback-controls.d.ts +48 -0
- package/dist/src/ox-playback-controls.js +419 -0
- package/dist/src/ox-playback-controls.js.map +1 -0
- package/dist/src/types.d.ts +1 -1
- package/dist/src/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +17 -17
|
@@ -1 +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 } 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: SCENE_MODE = 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 => 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"]}
|
|
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"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import '@material/web/fab/fab.js';
|
|
3
|
-
import './ox-board-component-info.js';
|
|
4
3
|
import { LitElement, PropertyValues } from 'lit';
|
|
5
4
|
import { Component, ReferenceProvider } from '@hatiolab/things-scene';
|
|
5
|
+
import './ox-playback-controls.js';
|
|
6
6
|
export declare class BoardViewer extends LitElement {
|
|
7
7
|
static styles: import("lit").CSSResult[];
|
|
8
8
|
baseUrl: string;
|
|
@@ -13,6 +13,17 @@ export declare class BoardViewer extends LitElement {
|
|
|
13
13
|
history: boolean;
|
|
14
14
|
hideFullscreen: boolean;
|
|
15
15
|
hideNavigation: boolean;
|
|
16
|
+
playbackEnabled: boolean;
|
|
17
|
+
playbackTimeRange?: {
|
|
18
|
+
from: Date;
|
|
19
|
+
to: Date;
|
|
20
|
+
};
|
|
21
|
+
private _playbackState;
|
|
22
|
+
private _playbackActive;
|
|
23
|
+
private _playbackSpeed;
|
|
24
|
+
private _playbackCurrentTime;
|
|
25
|
+
private _playbackProvider;
|
|
26
|
+
private _savedRealProvider;
|
|
16
27
|
_scene: any;
|
|
17
28
|
_forward: {
|
|
18
29
|
id: string;
|
|
@@ -30,6 +41,7 @@ export declare class BoardViewer extends LitElement {
|
|
|
30
41
|
_prev: HTMLElement;
|
|
31
42
|
_next: HTMLElement;
|
|
32
43
|
_fullscreen: HTMLElement;
|
|
44
|
+
_fabGroup: HTMLElement;
|
|
33
45
|
render(): import("lit-html").TemplateResult<1>;
|
|
34
46
|
private resizeHandler;
|
|
35
47
|
connectedCallback(): void;
|
|
@@ -52,8 +64,8 @@ export declare class BoardViewer extends LitElement {
|
|
|
52
64
|
onTapPrev(): void;
|
|
53
65
|
onTapFullscreen(): void;
|
|
54
66
|
onRunBoard(): void;
|
|
55
|
-
onLinkGoto(targetBoardId: string, options: any, fromComponent:
|
|
56
|
-
onLinkGotoPlaylist(targetPlayGroupName: string, options: any, fromComponent:
|
|
67
|
+
onLinkGoto(targetBoardId: string, options: any, fromComponent: Component): void;
|
|
68
|
+
onLinkGotoPlaylist(targetPlayGroupName: string, options: any, fromComponent: Component): void;
|
|
57
69
|
onLinkOpen(url: string, value: any, fromComponent: Component): void;
|
|
58
70
|
onLinkMove(url: string, value: any, fromComponent: Component): void;
|
|
59
71
|
onRoutePage(page: string): void;
|
|
@@ -62,6 +74,35 @@ export declare class BoardViewer extends LitElement {
|
|
|
62
74
|
onExportData(filename: string, value: string | number | object, component: Component): Promise<void>;
|
|
63
75
|
onImportData(_: string, value: string | number | object, component: Component): Promise<void>;
|
|
64
76
|
onClickEvent(e: MouseEvent, hint: any): void;
|
|
77
|
+
/**
|
|
78
|
+
* 외부에서 플레이백을 활성화한다.
|
|
79
|
+
* playback-enabled 속성을 설정하면 컨트롤바가 나타나고,
|
|
80
|
+
* 이 메서드로 시간 범위 등 상세 설정을 할 수 있다.
|
|
81
|
+
*/
|
|
82
|
+
enablePlayback(config?: {
|
|
83
|
+
timeRange?: {
|
|
84
|
+
from: Date;
|
|
85
|
+
to: Date;
|
|
86
|
+
};
|
|
87
|
+
}): void;
|
|
88
|
+
disablePlayback(): void;
|
|
89
|
+
private _onTogglePlaybackPanel;
|
|
90
|
+
private _onPlaybackStart;
|
|
91
|
+
private _onPlaybackPause;
|
|
92
|
+
private _onPlaybackResume;
|
|
93
|
+
private _onPlaybackStop;
|
|
94
|
+
private _onPlaybackSeek;
|
|
95
|
+
private _onPlaybackSpeed;
|
|
96
|
+
private _startPlayback;
|
|
97
|
+
private _stopPlayback;
|
|
98
|
+
/**
|
|
99
|
+
* 모든 tag 컴포넌트의 기존 구독을 해제한다.
|
|
100
|
+
*/
|
|
101
|
+
private _unsubscribeAll;
|
|
102
|
+
/**
|
|
103
|
+
* 모든 tag 컴포넌트를 현재 provider로 재구독한다.
|
|
104
|
+
*/
|
|
105
|
+
private _resubscribeAll;
|
|
65
106
|
hidePopup(): void;
|
|
66
107
|
getSceneData(): any;
|
|
67
108
|
getSceneValues(): any;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@material/web/icon/icon.js';
|
|
3
3
|
import '@material/web/fab/fab.js';
|
|
4
|
-
import './ox-board-component-info.js';
|
|
5
4
|
import { css, html, LitElement } from 'lit';
|
|
6
5
|
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
7
6
|
import * as XLSX from 'xlsx';
|
|
@@ -10,6 +9,8 @@ import { isIOS, togglefullscreen } from '@operato/utils';
|
|
|
10
9
|
import { ScrollbarStyles } from '@operato/styles';
|
|
11
10
|
import { BoardDataStorage } from './data-storage/data-storage.js';
|
|
12
11
|
import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js';
|
|
12
|
+
import { PlaybackProvider } from './graphql/playback-subscription.js';
|
|
13
|
+
import './ox-playback-controls.js';
|
|
13
14
|
import { runScenario, startScenario } from './graphql/scenario.js';
|
|
14
15
|
import { fetchPlayGroupByName } from './graphql/play-group.js';
|
|
15
16
|
function objectToQueryString(obj) {
|
|
@@ -37,6 +38,13 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
37
38
|
this.history = false;
|
|
38
39
|
this.hideFullscreen = false;
|
|
39
40
|
this.hideNavigation = false;
|
|
41
|
+
this.playbackEnabled = false;
|
|
42
|
+
this._playbackState = 'idle';
|
|
43
|
+
this._playbackActive = false;
|
|
44
|
+
this._playbackSpeed = 1;
|
|
45
|
+
this._playbackCurrentTime = '';
|
|
46
|
+
this._playbackProvider = null;
|
|
47
|
+
this._savedRealProvider = null;
|
|
40
48
|
this._scene = null;
|
|
41
49
|
this._forward = [];
|
|
42
50
|
this._backward = [];
|
|
@@ -46,19 +54,6 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
46
54
|
};
|
|
47
55
|
}
|
|
48
56
|
render() {
|
|
49
|
-
var fullscreen = !isIOS() && !this.hideFullscreen
|
|
50
|
-
? html `
|
|
51
|
-
<md-fab
|
|
52
|
-
id="fullscreen"
|
|
53
|
-
@click=${(e) => this.onTapFullscreen()}
|
|
54
|
-
@mouseover=${(e) => this.transientShowButtons(true)}
|
|
55
|
-
@mouseout=${(e) => this.transientShowButtons()}
|
|
56
|
-
title="fullscreen"
|
|
57
|
-
>
|
|
58
|
-
<md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
|
|
59
|
-
</md-fab>
|
|
60
|
-
`
|
|
61
|
-
: html ``;
|
|
62
57
|
var prev = !this.hideNavigation
|
|
63
58
|
? html `
|
|
64
59
|
<md-icon
|
|
@@ -93,7 +88,49 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
93
88
|
></div>
|
|
94
89
|
|
|
95
90
|
<slot></slot>
|
|
96
|
-
${next}
|
|
91
|
+
${next}
|
|
92
|
+
|
|
93
|
+
<div
|
|
94
|
+
class="fab-group"
|
|
95
|
+
@mouseover=${(e) => this.transientShowButtons(true)}
|
|
96
|
+
@mouseout=${(e) => this.transientShowButtons()}
|
|
97
|
+
>
|
|
98
|
+
${!isIOS() && !this.hideFullscreen
|
|
99
|
+
? html `
|
|
100
|
+
<md-fab id="fullscreen" @click=${() => this.onTapFullscreen()} title="fullscreen">
|
|
101
|
+
<md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
|
|
102
|
+
</md-fab>
|
|
103
|
+
`
|
|
104
|
+
: html ``}
|
|
105
|
+
${this.playbackEnabled
|
|
106
|
+
? html `
|
|
107
|
+
<md-fab
|
|
108
|
+
id="playback"
|
|
109
|
+
@click=${() => this._onTogglePlaybackPanel()}
|
|
110
|
+
title="playback"
|
|
111
|
+
>
|
|
112
|
+
<md-icon slot="icon">${this._playbackActive ? 'stop' : 'history'}</md-icon>
|
|
113
|
+
</md-fab>
|
|
114
|
+
`
|
|
115
|
+
: html ``}
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
${this._playbackActive
|
|
119
|
+
? html `
|
|
120
|
+
<ox-playback-controls
|
|
121
|
+
.playbackState=${this._playbackState}
|
|
122
|
+
.speed=${this._playbackSpeed}
|
|
123
|
+
.currentTime=${this._playbackCurrentTime}
|
|
124
|
+
.timeRange=${this.playbackTimeRange || { from: new Date(Date.now() - 3600000), to: new Date() }}
|
|
125
|
+
@playback-start=${this._onPlaybackStart}
|
|
126
|
+
@playback-pause=${this._onPlaybackPause}
|
|
127
|
+
@playback-resume=${this._onPlaybackResume}
|
|
128
|
+
@playback-stop=${this._onPlaybackStop}
|
|
129
|
+
@playback-seek=${this._onPlaybackSeek}
|
|
130
|
+
@playback-speed=${this._onPlaybackSpeed}
|
|
131
|
+
></ox-playback-controls>
|
|
132
|
+
`
|
|
133
|
+
: html ``}
|
|
97
134
|
`;
|
|
98
135
|
}
|
|
99
136
|
connectedCallback() {
|
|
@@ -157,6 +194,13 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
157
194
|
this.setupScene({ id: this.board.id, scene: this._scene });
|
|
158
195
|
}
|
|
159
196
|
closeScene() {
|
|
197
|
+
// 플레이백 중이면 정리
|
|
198
|
+
if (this._playbackProvider) {
|
|
199
|
+
this._playbackProvider.dispose();
|
|
200
|
+
this._playbackProvider = null;
|
|
201
|
+
this._savedRealProvider = null;
|
|
202
|
+
this._playbackState = 'idle';
|
|
203
|
+
}
|
|
160
204
|
if (this._scene) {
|
|
161
205
|
this.unbindSceneEvents(this._scene);
|
|
162
206
|
this._scene.target = null;
|
|
@@ -174,10 +218,12 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
174
218
|
this.transientShowButtons();
|
|
175
219
|
}
|
|
176
220
|
setupScene({ id, scene }, history) {
|
|
177
|
-
var _a;
|
|
221
|
+
var _a, _b;
|
|
178
222
|
this._scene = scene;
|
|
223
|
+
// 2D 모드: model-layer의 fillStyle을 호스트 배경색으로 설정하여 경계를 자연스럽게 함
|
|
224
|
+
// 3D 모드: 3D 공간에서 여백 개념이 없으므로 배경색 설정 불필요
|
|
179
225
|
const backgroundColor = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.state.fillStyle;
|
|
180
|
-
if (typeof backgroundColor === 'string') {
|
|
226
|
+
if (!((_b = this._scene) === null || _b === void 0 ? void 0 : _b.root.state.threed) && typeof backgroundColor === 'string') {
|
|
181
227
|
this.style.backgroundColor = backgroundColor;
|
|
182
228
|
}
|
|
183
229
|
else {
|
|
@@ -284,7 +330,8 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
284
330
|
transientShowButtons(stop) {
|
|
285
331
|
var buttons = [];
|
|
286
332
|
!this.hideNavigation && buttons.push(this._next, this._prev);
|
|
287
|
-
|
|
333
|
+
if (this._fabGroup)
|
|
334
|
+
buttons.push(this._fabGroup);
|
|
288
335
|
if (buttons.length == 0) {
|
|
289
336
|
return;
|
|
290
337
|
}
|
|
@@ -307,7 +354,7 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
307
354
|
}
|
|
308
355
|
this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden');
|
|
309
356
|
this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden');
|
|
310
|
-
this.
|
|
357
|
+
this._fabGroup && this._fabGroup.removeAttribute('hidden');
|
|
311
358
|
this._fade_animations.forEach(animation => {
|
|
312
359
|
animation.cancel();
|
|
313
360
|
if (stop)
|
|
@@ -447,19 +494,126 @@ let BoardViewer = class BoardViewer extends LitElement {
|
|
|
447
494
|
}
|
|
448
495
|
onClickEvent(e, hint) {
|
|
449
496
|
const component = hint.origin;
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
497
|
+
// monitor-extension Inspector 탭에서 컴포넌트 정보를 표시하므로
|
|
498
|
+
// clickComponent 이벤트만 발생시킨다.
|
|
499
|
+
window.dispatchEvent(new CustomEvent('clickComponent', { detail: component }));
|
|
500
|
+
}
|
|
501
|
+
/* playback */
|
|
502
|
+
/**
|
|
503
|
+
* 외부에서 플레이백을 활성화한다.
|
|
504
|
+
* playback-enabled 속성을 설정하면 컨트롤바가 나타나고,
|
|
505
|
+
* 이 메서드로 시간 범위 등 상세 설정을 할 수 있다.
|
|
506
|
+
*/
|
|
507
|
+
enablePlayback(config) {
|
|
508
|
+
this.playbackEnabled = true;
|
|
509
|
+
if (config === null || config === void 0 ? void 0 : config.timeRange) {
|
|
510
|
+
this.playbackTimeRange = config.timeRange;
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
disablePlayback() {
|
|
514
|
+
this._stopPlayback();
|
|
515
|
+
this._playbackActive = false;
|
|
516
|
+
this.playbackEnabled = false;
|
|
517
|
+
}
|
|
518
|
+
_onTogglePlaybackPanel() {
|
|
519
|
+
if (this._playbackActive) {
|
|
520
|
+
// 패널 닫기 — 재생 중이면 중지
|
|
521
|
+
this._stopPlayback();
|
|
522
|
+
this._playbackActive = false;
|
|
458
523
|
}
|
|
459
|
-
|
|
460
|
-
this.
|
|
524
|
+
else {
|
|
525
|
+
this._playbackActive = true;
|
|
461
526
|
}
|
|
462
527
|
}
|
|
528
|
+
async _onPlaybackStart(e) {
|
|
529
|
+
const { fromTime, speed } = e.detail;
|
|
530
|
+
await this._startPlayback(fromTime, speed);
|
|
531
|
+
}
|
|
532
|
+
async _onPlaybackPause() {
|
|
533
|
+
var _a;
|
|
534
|
+
await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.pause());
|
|
535
|
+
}
|
|
536
|
+
async _onPlaybackResume() {
|
|
537
|
+
var _a;
|
|
538
|
+
await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.resume());
|
|
539
|
+
}
|
|
540
|
+
_onPlaybackStop() {
|
|
541
|
+
this._stopPlayback();
|
|
542
|
+
this._playbackActive = false;
|
|
543
|
+
}
|
|
544
|
+
async _onPlaybackSeek(e) {
|
|
545
|
+
var _a;
|
|
546
|
+
await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.seek(e.detail.toTime));
|
|
547
|
+
}
|
|
548
|
+
async _onPlaybackSpeed(e) {
|
|
549
|
+
var _a;
|
|
550
|
+
await ((_a = this._playbackProvider) === null || _a === void 0 ? void 0 : _a.setSpeed(e.detail.speed));
|
|
551
|
+
}
|
|
552
|
+
async _startPlayback(fromTime, speed) {
|
|
553
|
+
if (!this._scene)
|
|
554
|
+
return;
|
|
555
|
+
const rootContainer = this._scene.rootContainer;
|
|
556
|
+
// 실시간 provider 보관 및 구독 해제
|
|
557
|
+
if (!this._savedRealProvider) {
|
|
558
|
+
this._savedRealProvider = rootContainer.app.dataSubscriptionProvider;
|
|
559
|
+
await this._unsubscribeAll(rootContainer);
|
|
560
|
+
}
|
|
561
|
+
// PlaybackProvider 생성
|
|
562
|
+
this._playbackProvider = new PlaybackProvider((status) => {
|
|
563
|
+
this._playbackState = status.state;
|
|
564
|
+
this._playbackSpeed = status.speed;
|
|
565
|
+
this._playbackCurrentTime = status.currentTime;
|
|
566
|
+
});
|
|
567
|
+
// provider 교체 및 재구독
|
|
568
|
+
rootContainer.app.dataSubscriptionProvider = this._playbackProvider;
|
|
569
|
+
await this._resubscribeAll(rootContainer);
|
|
570
|
+
// 플레이백 시작
|
|
571
|
+
await this._playbackProvider.start(fromTime, speed);
|
|
572
|
+
}
|
|
573
|
+
async _stopPlayback() {
|
|
574
|
+
if (!this._scene || !this._playbackProvider)
|
|
575
|
+
return;
|
|
576
|
+
const rootContainer = this._scene.rootContainer;
|
|
577
|
+
// 플레이백 구독 해제
|
|
578
|
+
this._playbackProvider.dispose();
|
|
579
|
+
await this._unsubscribeAll(rootContainer);
|
|
580
|
+
// 실시간 provider 복귀
|
|
581
|
+
if (this._savedRealProvider) {
|
|
582
|
+
rootContainer.app.dataSubscriptionProvider = this._savedRealProvider;
|
|
583
|
+
await this._resubscribeAll(rootContainer);
|
|
584
|
+
this._savedRealProvider = null;
|
|
585
|
+
}
|
|
586
|
+
this._playbackProvider = null;
|
|
587
|
+
this._playbackState = 'idle';
|
|
588
|
+
this._playbackCurrentTime = '';
|
|
589
|
+
this._playbackSpeed = 1;
|
|
590
|
+
}
|
|
591
|
+
/**
|
|
592
|
+
* 모든 tag 컴포넌트의 기존 구독을 해제한다.
|
|
593
|
+
*/
|
|
594
|
+
async _unsubscribeAll(rootContainer) {
|
|
595
|
+
const promises = [];
|
|
596
|
+
rootContainer.model_layer.traverse((component) => {
|
|
597
|
+
var _a;
|
|
598
|
+
if ((_a = component.model) === null || _a === void 0 ? void 0 : _a.tag) {
|
|
599
|
+
promises.push(rootContainer.unsubscribe(component.model.tag, component));
|
|
600
|
+
}
|
|
601
|
+
});
|
|
602
|
+
await Promise.all(promises);
|
|
603
|
+
}
|
|
604
|
+
/**
|
|
605
|
+
* 모든 tag 컴포넌트를 현재 provider로 재구독한다.
|
|
606
|
+
*/
|
|
607
|
+
async _resubscribeAll(rootContainer) {
|
|
608
|
+
const promises = [];
|
|
609
|
+
rootContainer.model_layer.traverse((component) => {
|
|
610
|
+
var _a;
|
|
611
|
+
if ((_a = component.model) === null || _a === void 0 ? void 0 : _a.tag) {
|
|
612
|
+
promises.push(rootContainer.subscribe(component.model.tag, component));
|
|
613
|
+
}
|
|
614
|
+
});
|
|
615
|
+
await Promise.all(promises);
|
|
616
|
+
}
|
|
463
617
|
hidePopup() {
|
|
464
618
|
if (this.popup) {
|
|
465
619
|
this.removeChild(this.popup);
|
|
@@ -556,17 +710,6 @@ BoardViewer.styles = [
|
|
|
556
710
|
outline: 0;
|
|
557
711
|
}
|
|
558
712
|
|
|
559
|
-
::slotted(ox-board-component-info) {
|
|
560
|
-
position: absolute;
|
|
561
|
-
right: 10px;
|
|
562
|
-
top: 10px;
|
|
563
|
-
width: 240px;
|
|
564
|
-
opacity: 0.9;
|
|
565
|
-
box-shadow: 2px 2px 4px gray;
|
|
566
|
-
max-height: 600px;
|
|
567
|
-
overflow: auto;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
713
|
/* navigation buttons */
|
|
571
714
|
#prev,
|
|
572
715
|
#next {
|
|
@@ -603,11 +746,19 @@ BoardViewer.styles = [
|
|
|
603
746
|
z-index: 1000;
|
|
604
747
|
}
|
|
605
748
|
|
|
606
|
-
|
|
749
|
+
.fab-group {
|
|
607
750
|
position: absolute;
|
|
608
751
|
bottom: 15px;
|
|
609
752
|
right: 16px;
|
|
610
753
|
z-index: 1000;
|
|
754
|
+
display: flex;
|
|
755
|
+
flex-direction: column-reverse;
|
|
756
|
+
gap: 8px;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
.fab-group md-fab {
|
|
760
|
+
--md-fab-container-width: 48px;
|
|
761
|
+
--md-fab-container-height: 48px;
|
|
611
762
|
}
|
|
612
763
|
|
|
613
764
|
[hidden] {
|
|
@@ -647,20 +798,23 @@ __decorate([
|
|
|
647
798
|
property({ type: Boolean, reflect: true, attribute: 'hide-navigation' })
|
|
648
799
|
], BoardViewer.prototype, "hideNavigation", void 0);
|
|
649
800
|
__decorate([
|
|
650
|
-
|
|
651
|
-
], BoardViewer.prototype, "
|
|
801
|
+
property({ type: Boolean, reflect: true, attribute: 'playback-enabled' })
|
|
802
|
+
], BoardViewer.prototype, "playbackEnabled", void 0);
|
|
803
|
+
__decorate([
|
|
804
|
+
property({ type: Object, attribute: 'playback-time-range' })
|
|
805
|
+
], BoardViewer.prototype, "playbackTimeRange", void 0);
|
|
652
806
|
__decorate([
|
|
653
807
|
state()
|
|
654
|
-
], BoardViewer.prototype, "
|
|
808
|
+
], BoardViewer.prototype, "_playbackState", void 0);
|
|
655
809
|
__decorate([
|
|
656
810
|
state()
|
|
657
|
-
], BoardViewer.prototype, "
|
|
811
|
+
], BoardViewer.prototype, "_playbackActive", void 0);
|
|
658
812
|
__decorate([
|
|
659
813
|
state()
|
|
660
|
-
], BoardViewer.prototype, "
|
|
814
|
+
], BoardViewer.prototype, "_playbackSpeed", void 0);
|
|
661
815
|
__decorate([
|
|
662
816
|
state()
|
|
663
|
-
], BoardViewer.prototype, "
|
|
817
|
+
], BoardViewer.prototype, "_playbackCurrentTime", void 0);
|
|
664
818
|
__decorate([
|
|
665
819
|
query('#target')
|
|
666
820
|
], BoardViewer.prototype, "_target", void 0);
|
|
@@ -673,6 +827,9 @@ __decorate([
|
|
|
673
827
|
__decorate([
|
|
674
828
|
query('#fullscreen')
|
|
675
829
|
], BoardViewer.prototype, "_fullscreen", void 0);
|
|
830
|
+
__decorate([
|
|
831
|
+
query('.fab-group')
|
|
832
|
+
], BoardViewer.prototype, "_fabGroup", void 0);
|
|
676
833
|
BoardViewer = __decorate([
|
|
677
834
|
customElement('ox-board-viewer')
|
|
678
835
|
], BoardViewer);
|