@operato/board 8.0.0-beta.0 → 8.0.0-beta.10

package/src/ox-editor-board-selector.ts

@@ -1,91 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-import './selector/ox-board-selector'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-editor-board-selector')
-export class BoardSelector extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-          display: inline-block;
-        }
-
-        input[type='text'] {
-          box-sizing: border-box;
-          width: 100%;
-          height: 100%;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-
-        md-icon {
-          position: absolute;
-          top: 0;
-          right: 0;
-        }
-      `
-    ]
-  }
-
-  @property({ type: String }) value?: string
-  @property({ type: Object }) properties?: any
-
-  private popup: any
-
-  render() {
-    return html`
-      <input id="text" type="text" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />
-
-      <md-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</md-icon>
-    `
-  }
-
-  _onInputChanged(e: Event) {
-    this.value = (e.target as any)?.value
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    /*
-     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-     * 주의. value는 object일 수도 있고, string일 수도 있다.
-     * string인 경우에는 해당 보드의 id로 해석한다.
-     */
-    var value = this.value || {}
-
-    var template = html`
-      <ox-board-selector
-        .creatable=${true}
-        .value=${value}
-        @board-selected=${async (e: CustomEvent) => {
-          var board = e.detail.board
-          this.value = board.id
-
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-          this.popup && this.popup.close()
-        }}
-      ></ox-board-selector>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select board')
-    })
-  }
-}

package/src/ox-property-editor-board-selector.ts

@@ -1,23 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import './ox-editor-board-selector'
-
-import { html, TemplateResult } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('ox-property-editor-board-selector')
-class PropertyEditorBoardSelector extends OxPropertyEditor {
-  static get styles() {
-    return [...OxPropertyEditor.styles]
-  }
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html`
-      <ox-editor-board-selector id="editor" .value=${value} .properties=${spec.property}></ox-editor-board-selector>
-    `
-  }
-}

package/src/player/ox-board-player-carousel.ts

@@ -1,197 +0,0 @@
-import './ox-board-player-grid'
-
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-@customElement('ox-board-player-carousel')
-class BoardPlayerCarousel extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        margin: 0 auto 0px;
-        -webkit-perspective: 1200px;
-        -moz-perspective: 1200px;
-        -o-perspective: 1200px;
-        perspective: 1200px;
-      }
-
-      #carousel {
-        width: 100%;
-        height: 100%;
-        margin: 0px auto 0px;
-
-        position: absolute;
-        -webkit-transform-style: preserve-3d;
-        -moz-transform-style: preserve-3d;
-        -o-transform-style: preserve-3d;
-        transform-style: preserve-3d;
-        -webkit-transition: -webkit-transform 1.5s;
-        -moz-transition: -moz-transform 1.5s;
-        -o-transition: -o-transform 1.5s;
-        transition: transform 1.5s;
-      }
-
-      #carousel > * {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        font-weight: bold;
-        -webkit-transition: opacity 1.5s, -webkit-transform 1.5s;
-        -moz-transition: opacity 1.5s, -moz-transform 1.5s;
-        -o-transition: opacity 1.5s, -o-transform 1.5s;
-        transition: opacity 1.5s, transform 1.5s;
-
-        -webkit-backface-visibility: hidden;
-        -moz-backface-visibility: hidden;
-        -o-backface-visibility: hidden;
-        backface-visibility: hidden;
-      }
-    `
-  ]
-
-  @property({ type: String }) axis: string = 'y'
-  @property({ type: Number }) rows: number = 1
-  @property({ type: Number }) columns: number = 1
-
-  @state() _slotObserver?: MutationObserver
-  @state() _boundResize?: () => void
-  @state() _rotation: number = 0
-  @state() _theta: number = 0
-  @state() _radius: number = 0
-  @state() _rotateFn?: string
-
-  @state() _panelCount: number = 0
-  @state() _panelSize: number = 0
-  @state() _isHorizontal: boolean = true
-
-  @query('#slot') _slot!: HTMLSlotElement
-  @query('#carousel') _carousel!: HTMLElement
-
-  render() {
-    return html`
-      <slot id="slot" select="[page]"></slot>
-
-      <div id="carousel"></div>
-    `
-  }
-
-  async connectedCallback() {
-    await super.connectedCallback()
-
-    this._boundResize = this.build.bind(this)
-    window.addEventListener('resize', this._boundResize)
-
-    this._slotObserver = new MutationObserver(mutations => {
-      this.build()
-    })
-
-    await this.updateComplete
-
-    this._slotObserver?.observe(this._slot, { childList: true })
-    this.build()
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this._slotObserver?.disconnect()
-    delete this._slotObserver
-
-    if (this._boundResize) {
-      window.removeEventListener('resize', this._boundResize)
-      delete this._boundResize
-    }
-  }
-
-  firstUpdated() {
-    this._rotation = 0
-  }
-
-  updated(changes: PropertyValues<this>) {
-    changes.has('axis') && this._onAxisChanged()
-  }
-
-  build() {
-    var pages = Array.from(this.querySelectorAll('[page]'))
-    var panel = Array.from(this._carousel.querySelectorAll('ox-board-player-grid')).pop()
-
-    var rows = this.rows || 1
-    var columns = this.columns || 1
-
-    var i = panel ? panel.querySelectorAll('[page]').length : 0
-    var page = pages.shift()
-
-    while (page) {
-      if (!(i++ % (rows * columns))) {
-        panel = document.createElement('ox-board-player-grid')
-        ;(panel as any).rows = rows
-        ;(panel as any).columns = columns
-
-        this._carousel.appendChild(panel)
-      }
-      panel?.appendChild(page)
-
-      page = pages.shift()
-    }
-
-    this.start()
-  }
-
-  start() {
-    var panels = this._carousel.querySelectorAll('ox-board-player-grid')
-
-    this._isHorizontal = this.axis === 'y'
-
-    this._panelCount = panels.length
-
-    this._panelSize = this._carousel[this._isHorizontal ? 'offsetWidth' : 'offsetHeight'] || 640
-    this._rotateFn = this._isHorizontal ? 'rotateY' : 'rotateX'
-    this._theta = 360 / (this._panelCount || 1)
-
-    // do some trig to figure out how big the carousel is in 3D space
-    this._radius = Math.round(this._panelSize / 2 / Math.tan(Math.PI / (this._panelCount < 2 ? 2 : this._panelCount)))
-
-    for (let i = 0; i < this._panelCount; i++) {
-      let panel = panels[i] as HTMLElement
-      let angle = this._theta * i
-      panel.style.opacity = '1'
-
-      panel.style.backgroundColor = 'white'
-
-      panel.style.transform = this._rotateFn + '(' + angle + 'deg) translateZ(' + this._radius + 'px)'
-    }
-
-    // adjust rotation so panels are always flat
-    this._rotation = Math.round(this._rotation / this._theta) * this._theta
-    this._transform()
-  }
-
-  stop() {
-    this._carousel.innerHTML = ''
-  }
-
-  _onAxisChanged() {
-    this.start()
-  }
-
-  _transform() {
-    // push the carousel back in 3D space, and rotate it
-    this._carousel.style.transform =
-      'translateZ(-' + this._radius + 'px) ' + this._rotateFn + '(' + this._rotation + 'deg)'
-    this.dispatchEvent(new CustomEvent('transform', { bubbles: true, composed: true }))
-  }
-
-  previous() {
-    this._rotation += this._theta
-    this._transform()
-  }
-
-  next() {
-    this._rotation -= this._theta
-    this._transform()
-  }
-}

package/src/player/ox-board-player-grid.ts

@@ -1,78 +0,0 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-/**
- * 자식 컴포넌트들을 그리드형태로 화면에 배치하여 한꺼번에 디스플레이해주는 컴포넌트.
- * Example:
-    <ox-board-player-grid rows="3" columns="3" tabindex="0" focus>
-      <div page>A</div>
-      <div page>B</div>
-      <div page>C</div>
-      <div page>D</div>
-    </ox-board-player-grid>
- */
-
-@customElement('ox-board-player-grid')
-class BoardPlayerGrid extends LitElement {
-  static styles = [
-    css`
-      :host {
-        width: 100%;
-        height: 100%;
-        position: relative;
-
-        display: grid;
-        grid-gap: 0px;
-        grid-auto-flow: dense;
-      }
-    `
-  ]
-
-  @property({ type: Number }) rows: number = 1
-  @property({ type: Number }) columns: number = 1
-
-  @state() _slotObserver?: MutationObserver
-
-  @query('#slot') _slot!: HTMLSlotElement
-
-  render() {
-    return html` <slot id="slot" select="[page]"></slot> `
-  }
-
-  async connectedCallback() {
-    await super.connectedCallback()
-
-    this._slotObserver = new MutationObserver(mutations => {
-      var columns = this.columns || 1
-      var rows = this.rows || 1
-
-      ;(this.style as any)['grid-template-columns'] = `repeat(${columns}, 1fr)`
-      ;(this.style as any)['grid-template-rows'] = `repeat(${rows}, 1fr)`
-    })
-
-    await this.updateComplete
-
-    var columns = this.columns || 1
-    var rows = this.rows || 1
-
-    ;(this.style as any)['grid-template-columns'] = `repeat(${columns}, 1fr)`
-    ;(this.style as any)['grid-template-rows'] = `repeat(${rows}, 1fr)`
-
-    this._slotObserver?.observe(this._slot, { childList: true })
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this._slotObserver?.disconnect()
-    delete this._slotObserver
-  }
-
-  start() {}
-
-  stop() {}
-
-  next() {}
-
-  previous() {}
-}

package/src/player/ox-board-wrapper.ts

@@ -1,152 +0,0 @@
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { BoardDataStorage } from '../data-storage/data-storage.js'
-import { DataSubscriptionProviderImpl } from '../graphql/data-subscription.js'
-
-import { create, SCENE_MODE } from '@hatiolab/things-scene'
-
-/**
- * @class BoardWrapper
- *
- * @description scene provider로부터 제공받은 scene의 reference count control을 담당하며, resize 이벤트 발생시 scene의 사이즈를 fit 시키는 역할을 담당한다.
- */
-@customElement('ox-board-wrapper')
-class BoardWrapper extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-      }
-
-      #target {
-        flex: 1;
-
-        width: 100%;
-        height: 100%;
-        outline: 0;
-      }
-    `
-  ]
-
-  @property({ type: Object }) provider!: any
-  @property({ type: Object }) data: any
-  @property({ type: Object }) board?: any
-  @property({ type: String }) baseUrl?: string
-
-  private _scene: any
-  private connected: boolean = false
-
-  @query('#target') _targetEl!: HTMLElement
-
-  render() {
-    return html` <div id="target"></div> `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.connected = true
-
-    window.addEventListener('resize', () => {
-      requestAnimationFrame(() => {
-        if (this._scene) {
-          this._scene.resize()
-
-          if (this.offsetWidth) {
-            this._scene.fit()
-          }
-        }
-      })
-    })
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.connected = false
-
-    /* ox-board-player-carousel에 의해서 mutation 되면서, 잠깐 disconnected되므로,
-    최종적으로 disconnected 여부를 확인하여야 한다. */
-    requestAnimationFrame(() => {
-      if (!this.connected) {
-        this.closeScene()
-      }
-    })
-  }
-
-  updated(changes: PropertyValues<this>) {
-    changes.has('board') && this._onBoardChanged()
-  }
-
-  _onBoardChanged() {
-    this.closeScene()
-
-    this.initScene()
-  }
-
-  initScene() {
-    if (!this.board || !this.board.id) {
-      return
-    }
-
-    var { model } = this.board
-
-    try {
-      if (typeof model == 'string') {
-        model = JSON.parse(model)
-      } else {
-        model = JSON.parse(JSON.stringify(model))
-      }
-    } catch (err) {
-      console.error(err)
-    }
-
-    this._scene = create({
-      model,
-      mode: SCENE_MODE.VIEW,
-      refProvider: this.provider!,
-      dataStorage: new BoardDataStorage(this.board.id),
-      dataSubscriptionProvider: new DataSubscriptionProviderImpl()
-    })
-
-    if (this.baseUrl) {
-      this._scene.baseUrl = this.baseUrl
-    }
-
-    this.setupScene({ id: this.board.id, scene: this._scene })
-  }
-
-  closeScene() {
-    if (this._scene) {
-      this._scene.target = null
-      this._scene.release && this._scene.release()
-
-      this._scene = null
-    }
-  }
-
-  setupScene({ id, scene }: { id: string; scene: any }) {
-    this._scene = scene
-
-    const backgroundColor = this._scene?.root.state.fillStyle
-    if (typeof backgroundColor === 'string') {
-      this.style.backgroundColor = backgroundColor
-    } else {
-      this.style.backgroundColor = 'initial'
-    }
-
-    this._scene.target = this._targetEl
-
-    requestAnimationFrame(() => {
-      if (this._scene?.target.offsetWidth) {
-        this._scene.fit()
-      }
-    })
-
-    if (this.data) {
-      this._scene.data = this.data
-    }
-  }
-}

package/src/selector/board-creation-popup.ts

@@ -1,151 +0,0 @@
-import '@material/web/textfield/filled-text-field.js'
-import '@material/web/button/text-button.js'
-import '@material/web/select/filled-select.js'
-import '@material/web/select/select-option.js'
-import '../ox-board-template-list'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { OxBoardTemplateList } from '../ox-board-template-list'
-
-@customElement('board-creation-popup')
-export class BoardCreationPopup extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-          padding: 10px;
-
-          background-color: var(--md-sys-color-surface);
-        }
-
-        [body] {
-          flex: 1;
-
-          display: flex;
-          flex-direction: row;
-          gap: 10px;
-
-          overflow: hidden;
-        }
-
-        [content] {
-          flex: 1;
-
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-
-          overflow: auto;
-        }
-
-        [content] > md-filled-text-field[type='textarea'] {
-          flex: 1;
-          resize: none;
-        }
-
-        [templates] {
-          flex: 2;
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
-
-        [templates] > ox-board-template-list {
-          flex: 1;
-          overflow: hidden;
-        }
-
-        md-text-button {
-          --_container-color: var(--md-sys-color-primary);
-          --_label-text-color: var(--md-sys-color-on-primary);
-        }
-      `
-    ]
-  }
-
-  @property({ type: String }) defaultGroup?: string
-  @property({ type: Array }) groups?: { id: string; name: string }[]
-
-  @query('ox-board-template-list') boardTemplateList!: OxBoardTemplateList
-
-  render() {
-    var groups = this.groups || []
-
-    return html`
-      <div body>
-        <div content>
-          <md-filled-text-field
-            label=${String(i18next.t('label.name'))}
-            name="name"
-            required
-            field-name
-          ></md-filled-text-field>
-          <md-filled-text-field
-            type="textarea"
-            label=${String(i18next.t('label.description'))}
-            name="description"
-            field-description
-          ></md-filled-text-field>
-          <md-filled-select
-            label=${String(i18next.t('label.group'))}
-            field-group
-            helper="If there is no group to choose, you can leave it empty."
-          >
-            ${groups.map(
-              group => html`
-                <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}
-                  >${group.name}</md-select-option
-                >
-              `
-            )}
-          </md-filled-select>
-        </div>
-
-        <div templates>
-          <div>${i18next.t('label.board-template')}</div>
-          <ox-board-template-list></ox-board-template-list>
-        </div>
-      </div>
-
-      <md-text-button @click=${(e: MouseEvent) => this.onClickSubmit()}
-        >${String(i18next.t('button.create'))}</md-text-button
-      >
-    `
-  }
-
-  firstUpdated() {
-    setTimeout(() => {
-      ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()
-    }, 100)
-  }
-
-  async onClickSubmit() {
-    var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
-      return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value
-    })
-
-    if (!name) {
-      return
-    }
-
-    const template = await this.boardTemplateList.getSelected()
-
-    this.dispatchEvent(
-      new CustomEvent('create-board', {
-        detail: {
-          name,
-          description,
-          groupId,
-          model: template?.model,
-          thumbnail: template?.thumbnail
-        }
-      })
-    )
-  }
-}