@things-factory/board-ui 8.0.5 → 9.0.0-beta.10

package/client/board-list/board-tile-list.ts

@@ -1,272 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/board/ox-board-creation-card.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement, PropertyValues, nothing } from 'lit'
-import { customElement, property, state, query } from 'lit/decorators.js'
-import { keyed } from 'lit/directives/keyed.js'
-
-import { client } from '@operato/graphql'
-
-import { privileged } from '@things-factory/auth-base/dist-client'
-
-@customElement('board-tile-list')
-export class BoardTileList extends LitElement {
-  static styles = [
-    css`
-      :host {
-        overflow: auto;
-        padding: var(--popup-content-padding);
-        display: grid;
-        background-color: var(--md-sys-color-background);
-
-        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-        grid-auto-rows: var(--card-list-rows-height);
-        grid-gap: 20px;
-      }
-
-      [card] {
-        position: relative;
-        align-items: center;
-        overflow: hidden;
-      }
-
-      [card][create] {
-        overflow: visible;
-        background-color: initial;
-      }
-
-      [card] > a {
-        display: flex;
-        clip-path: border-box;
-      }
-
-      [card]:hover {
-        cursor: pointer;
-      }
-
-      [name] {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        margin-top: var(--spacing-small);
-        width: calc(100% - 45px);
-        color: var(--md-sys-color-on-background);
-        font-weight: bolder;
-        font-size: var(--fontsize-small);
-      }
-
-      img {
-        flex: 1;
-        object-fit: contain;
-      }
-
-      md-icon[iconBtn] {
-        float: right;
-        margin-top: -20px;
-        margin-left: 2px;
-        color: var(--board-list-star-color);
-        font-size: 1.4em;
-      }
-      md-icon[info] {
-        color: var(--md-sys-color-primary);
-      }
-
-      md-icon[iconBtn][favored],
-      md-icon[info]:hover {
-        color: var(--board-list-star-active-color);
-      }
-
-      a {
-        display: block;
-        border-radius: var(--card-list-border-radius);
-        border: var(--border-dim-color);
-        box-sizing: border-box;
-        color: var(--card-list-color);
-        background-color: var(--card-list-background-color);
-        margin: 0px;
-        height: calc(100% - 25px);
-      }
-
-      :host > *:hover [info] {
-        opacity: 1;
-        -webkit-transition: opacity 0.8s;
-        -moz-transition: opacity 0.8s;
-        -o-transition: opacity 0.8s;
-        transition: opacity 0.8s;
-      }
-
-      [draggable='true'] {
-        cursor: grab;
-      }
-
-      @media screen and (max-width: 800px), screen and (max-height: 600px) {
-        ox-board-creation-card {
-          display: none;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Array }) boards: any[] = []
-  @property({ type: Array }) favorites: any[] = []
-  @property({ type: Array }) groups: any[] = []
-  @property({ type: String }) group?: string
-  @property({ type: Boolean }) creatable?: boolean = false
-  @property({ type: String, attribute: 'search-text' }) searchText?: string
-  @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false
-
-  private draggedItem
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    if (this.reorderable) {
-      this.renderRoot.addEventListener('dragstart', (e: Event) => {
-        const target = e.target! as HTMLElement
-        this.draggedItem = target.closest('[card]')
-        ;(e as DragEvent).dataTransfer?.setData('text/plain', target.innerHTML)
-      })
-
-      this.renderRoot.addEventListener('dragover', (e: Event) => {
-        e.preventDefault()
-
-        const target = e.target! as HTMLElement
-        const targetItem = target.closest('[card]')
-        if (targetItem && targetItem !== this.draggedItem) {
-          const targetRect = targetItem.getBoundingClientRect()
-          const mousePos = (e as DragEvent).clientX - targetRect.left
-
-          if (mousePos < targetRect.width / 2) {
-            // 마우스 위치가 아이템 좌측 반절에 있을 때
-            this.renderRoot.insertBefore(this.draggedItem, targetItem)
-          } else {
-            // 마우스 위치가 아이템 우측 반절에 있을 때
-            this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)
-          }
-        }
-      })
-
-      this.renderRoot.addEventListener('drop', (e: Event) => {
-        e.preventDefault()
-
-        const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))
-          .map(board => board.getAttribute('id'))
-          .filter(Boolean)
-
-        this.dispatchEvent(
-          new CustomEvent('reordered', {
-            detail: {
-              groupId: this.group,
-              boardIds
-            }
-          })
-        )
-      })
-    }
-  }
-
-  render() {
-    var boards = this.boards || []
-
-    return html`
-      ${this.creatable
-        ? privileged(
-            { privilege: 'mutation', category: 'board' },
-            html`
-              <ox-board-creation-card
-                .groups=${this.groups}
-                .defaultGroup=${this.group}
-                @create-board=${e => this.onCreateBoard(e)}
-                card
-                create
-              ></ox-board-creation-card>
-            `
-          )
-        : nothing}
-      ${keyed(
-        Date.now(),
-        boards.map(
-          board => html`
-            <div card draggable="true" id=${board.id}>
-              <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
-
-              <div name>${board.name}</div>
-              <!-- <div description>${board.description}</div> -->
-
-              <md-icon
-                iconBtn
-                info
-                @click=${e => {
-                  this.infoBoard(board)
-                  e.preventDefault()
-                }}
-                >info</md-icon
-              >
-
-              ${(this.favorites || []).includes(board.id)
-                ? html` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `
-                : html` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}
-            </div>
-          `
-        )
-      )}
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    var creationCard = this.renderRoot.querySelector('ox-board-creation-card') as any
-    if (creationCard) {
-      creationCard.reset()
-    }
-  }
-
-  onCreateBoard(e) {
-    this.dispatchEvent(
-      new CustomEvent('create-board', {
-        detail: e.detail
-      })
-    )
-  }
-
-  infoBoard(board) {
-    this.dispatchEvent(
-      new CustomEvent('info-board', {
-        detail: board
-      })
-    )
-  }
-
-  async removeFavorite(boardId) {
-    await client.query({
-      query: gql`
-        mutation {
-          deleteFavorite(routing: "${boardId}")
-        }
-      `
-    })
-
-    this.refreshFavorites()
-  }
-
-  async addFavorite(boardId) {
-    await client.query({
-      query: gql`
-        mutation {
-          createFavorite(favorite: {
-            routing: "${boardId}"
-          }) {
-            id
-            routing
-          }
-        }
-      `
-    })
-
-    this.refreshFavorites()
-  }
-
-  async refreshFavorites() {
-    this.dispatchEvent(new CustomEvent('refresh-favorites'))
-  }
-}

package/client/board-list/group-bar-styles.ts

@@ -1,63 +0,0 @@
-import { css } from 'lit'
-
-export const GroupBarStyles = css`
-  :host {
-    background-color: var(--group-bar-background-color);
-
-    overflow-x: hidden;
-  }
-
-  ul {
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    white-space: nowrap;
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-
-    box-sizing: border-box;
-    border-bottom: var(--group-bar-line);
-    align-self: auto;
-    min-height: 43px;
-    padding: 4px 8px;
-
-    * {
-      vertical-align: middle;
-    }
-
-    a {
-      display: block;
-      text-decoration: none;
-      font: var(--group-bar-textbutton);
-      color: var(--md-sys-color-on-secondary-container);
-      opacity: 0.8;
-    }
-
-    a md-icon {
-      font-variation-settings: 'FILL' 1;
-    }
-
-    &[active] {
-      border-color: var(--group-bar-active-line-color);
-
-      a {
-        font: var(--group-bar-textbutton-active);
-        opacity: 1;
-      }
-    }
-
-    &[padding] {
-      flex: 1;
-    }
-
-    &[add] * {
-      color: var(--md-sys-color-on-secondary-container);
-    }
-  }
-`

package/client/board-list/group-bar.ts

@@ -1,99 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import ScrollBooster from 'scrollbooster'
-
-import { longpressable } from '@operato/utils'
-import { privileged } from '@things-factory/auth-base/dist-client'
-import { GroupBarStyles } from './group-bar-styles'
-
-@customElement('group-bar')
-export default class GroupBar extends LitElement {
-  static styles = [GroupBarStyles]
-
-  @property({ type: Array }) groups?: any[]
-  @property({ type: String }) groupId?: string
-  @property({ type: String }) targetPage?: string
-
-  private __sb?: ScrollBooster
-
-  render() {
-    return html`
-      <ul>
-        <li ?active=${!this.groupId}>
-          <a href=${this.targetPage || ''}><md-icon>dashboard</md-icon></a>
-        </li>
-
-        <li ?active=${this.groupId === 'favor'}>
-          <a href="${this.targetPage}/favor"><md-icon>star</md-icon></a>
-        </li>
-
-        ${privileged(
-          { privilege: 'mutation', category: 'board' },
-          html`<li ?active=${this.groupId === 'mywork'}>
-            <a href="${this.targetPage}/mywork"><md-icon>engineering</md-icon></a>
-          </li>`
-        )}
-        ${(this.groups || []).map(
-          group => html`
-            <li ?active=${this.groupId === group.id} @long-press=${e => this.infoGroup(group.id)}>
-              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
-            </li>
-          `
-        )}
-
-        <li padding></li>
-
-        <li add>
-          <md-icon @click=${e => this.infoGroup()}>add</md-icon>
-        </li>
-      </ul>
-    `
-  }
-
-  infoGroup(groupId?: string) {
-    this.dispatchEvent(
-      new CustomEvent('info-group', {
-        detail: groupId
-      })
-    )
-  }
-
-  onWheelEvent(e) {
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    this.scrollLeft -= delta * 40
-
-    e.preventDefault()
-  }
-
-  updated(change) {
-    if (change.has('groups')) {
-      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
-      this.__sb && this.__sb.updateMetrics()
-    }
-
-    if (change.has('groupId')) {
-      var active = this.renderRoot.querySelector('li[active]')
-      active && active.scrollIntoView()
-    }
-  }
-
-  firstUpdated() {
-    var scrollTarget = this.renderRoot.querySelector('ul')
-
-    /* long-press */
-    longpressable(scrollTarget!)
-
-    scrollTarget!.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-
-    this.__sb = new ScrollBooster({
-      viewport: this,
-      content: scrollTarget,
-      mode: 'x',
-      onUpdate: data => {
-        this.scrollLeft = data.position.x
-      }
-    })
-  }
-}

package/client/board-list/play-group-bar.ts

@@ -1,88 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import ScrollBooster from 'scrollbooster'
-
-import { longpressable } from '@operato/utils'
-import { GroupBarStyles } from './group-bar-styles'
-
-@customElement('play-group-bar')
-export default class PlayGroupBar extends LitElement {
-  static styles = [GroupBarStyles]
-
-  @property({ type: Array }) groups: { id: string; name: string }[] = []
-  @property({ type: String }) groupId: string = ''
-  @property({ type: String, attribute: 'target-page' }) targetPage: string = ''
-
-  private __sb?: ScrollBooster
-
-  render() {
-    return html`
-      <ul>
-        ${(this.groups || []).map(
-          group => html`
-            <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group)}>
-              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>
-            </li>
-          `
-        )}
-
-        <li padding>&nbsp;</li>
-
-        <li add>
-          <md-icon @click=${e => this._infoGroup()}>add</md-icon>
-        </li>
-      </ul>
-    `
-  }
-
-  _infoGroup(group?: { id: string; name: string }) {
-    this.dispatchEvent(
-      new CustomEvent('info-play-group', {
-        detail: group
-      })
-    )
-  }
-
-  _onWheelEvent(e) {
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    this.scrollLeft -= delta * 40
-
-    e.preventDefault()
-  }
-
-  _onClickAdd(e) {
-    // TODO Implements
-  }
-
-  updated(change) {
-    if (change.has('groups')) {
-      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */
-      this.__sb && this.__sb.updateMetrics()
-    }
-
-    if (change.has('groupId')) {
-      var active = this.renderRoot.querySelector('li[active]')
-      active && active.scrollIntoView()
-    }
-  }
-
-  firstUpdated() {
-    var scrollTarget = this.renderRoot.querySelector('ul')
-
-    /* long-press */
-    longpressable(scrollTarget!)
-
-    scrollTarget!.addEventListener('mousewheel', this._onWheelEvent.bind(this), false)
-
-    this.__sb = new ScrollBooster({
-      viewport: this,
-      content: scrollTarget,
-      mode: 'x',
-      onUpdate: data => {
-        this.scrollLeft = data.position.x
-      }
-    })
-  }
-}

package/client/board-provider.ts

@@ -1,92 +0,0 @@
-import gql from 'graphql-tag'
-
-import { create, error, ReferenceMap, Scene } from '@hatiolab/things-scene'
-import { BoardDataStorage } from '@operato/board'
-import { client, gqlContext, subscribe } from '@operato/graphql'
-
-export function createBoardProvider() {
-  var _provider = new ReferenceMap<Scene>(
-    async (boardId, resolve, reject): Promise<any> => {
-      try {
-        const response = await client.query({
-          query: gql`
-            query FetchBoardById($id: String!) {
-              board(id: $id) {
-                model
-              }
-            }
-          `,
-          variables: { id: boardId },
-          context: gqlContext()
-        })
-
-        const board = response.data?.board
-
-        if (!board) {
-          reject(new Error('Failed to get the requested board.'))
-          return
-        }
-
-        var model = JSON.parse(board.model)
-
-        var scene: Scene
-
-        try {
-          scene = await provider.get(boardId)
-          console.warn('Board fetched more than twice.', boardId)
-        } catch (e) {
-          scene = create({
-            model,
-            mode: 0,
-            refProvider: provider as any,
-            dataStorage: new BoardDataStorage(boardId),
-            dataSubscriptionProvider: {
-              subscribe: async (tag, component) => {
-                return await subscribe(
-                  {
-                    query: gql`
-                              subscription {
-                                data(tag: "${tag}") {
-                                  tag
-                                  data
-                                }
-                              }
-                            `
-                  },
-                  {
-                    next: async ({ data }) => {
-                      if (data) {
-                        component.data = data.data.data
-                      }
-                    }
-                  }
-                )
-              },
-
-              dispose() {}
-            }
-          })
-
-          // s.app.baseUrl = undefined;
-        }
-
-        resolve(scene)
-
-        // resolve(scene, {
-        //   ...board,
-        //   model
-        // })
-      } catch (e) {
-        error(e)
-        reject(e)
-      }
-    },
-    async (id, ref) => {
-      ref.dispose()
-    }
-  )
-
-  return _provider
-}
-
-export const provider = createBoardProvider()

package/client/bootstrap.ts

@@ -1,39 +0,0 @@
-import '@operato/board/ox-property-editor-board-selector.js'
-
-import { OxPropertyEditor } from '@operato/property-editor'
-import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
-import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
-import { OxGristEditorHashtags } from '@operato/grist-editor/ox-grist-editor-hashtags.js'
-import { OxGristRendererHashtags } from '@operato/grist-editor/ox-grist-renderer-hashtags.js'
-
-import { BoardEditor } from './data-grist/board-editor'
-import { BoardRenderer } from './data-grist/board-renderer'
-import { ColorMapEditor } from './data-grist/color-map-editor'
-import { ColorRangesEditor } from './data-grist/color-ranges-editor'
-
-export default function bootstrap() {
-  registerRenderer('board', BoardRenderer)
-  registerRenderer('color-map', OxGristRendererJson5)
-  registerRenderer('color-ranges', OxGristRendererJson5)
-  registerRenderer('hashtags', OxGristRendererHashtags)
-
-  registerEditor('board', BoardEditor)
-  registerEditor('color-map', ColorMapEditor)
-  registerEditor('color-ranges', ColorRangesEditor)
-  registerEditor('hashtags', OxGristEditorHashtags)
-
-  OxPropertyEditor.register({
-    'board-selector': 'ox-property-editor-board-selector'
-  })
-
-  /* append viewpart anchor to asidebar */
-  appendViewpart({
-    name: 'viewpart-info',
-    viewpart: {
-      show: false,
-      hovering: 'edge',
-      backdrop: true
-    },
-    position: VIEWPART_POSITION.ASIDEBAR
-  })
-}