@operato/process 1.1.1

package/src/modeller/scene-viewer/scene-viewer.ts

@@ -0,0 +1,249 @@
+import './scene-layer'
+import './scene-handler'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { Component, create as createScene, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene'
+
+import SceneLayer from './scene-layer'
+
+export default class SceneViewer extends LitElement {
+  static styles = css`
+    :host {
+      outline: none;
+    }
+  `
+
+  @property({ type: Object }) scene: Scene | null = null
+  @property({ type: Object }) model?: Model
+  /* Scene Mode - mode 0 : view mode, mode 1 : edit mode, mode 2 : shift mode */
+  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW
+  @property({ type: Number }) screenSize: number = 13.3
+  @property({ type: Object }) variables: Properties = {}
+  @property({ type: Object }) data: any
+  /*
+   * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.
+   *
+   * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.
+   * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.
+   * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+   * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+   * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.
+   * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.
+   */
+  @property({ type: String }) fit: FITMODE = 'none'
+  @property({ type: Array }) selected: Component[] = []
+  @property({ type: Boolean }) disposeWhenDetached: boolean = false
+  @property({ type: String }) baseUrl: string = ''
+  @property({ type: Object }) provider: any
+  @property({ type: String }) name: string = 'noname'
+  @property({ type: Boolean }) enableInspector: boolean = true
+  @property({ type: Boolean }) showInspector: boolean = false
+
+  private lastOffsetWidth?: number
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    if (this.scene && this.disposeWhenDetached) {
+      this._disposeScene()
+    }
+  }
+
+  render() {
+    return html` <slot></slot> `
+  }
+
+  updated(change: PropertyValues<this>) {
+    change.has('model') && this._onModelChanged(this.model)
+    change.has('mode') && this._onModeChanged(this.mode)
+    change.has('screenSize') && this._onDisplayChanged(this.screenSize)
+    change.has('data') && this._onDataChanged(this.data)
+    change.has('baseUrl') && this._onBaseUrlChanged(this.baseUrl)
+  }
+
+  _setScene(scene: Scene | null) {
+    this.scene = scene
+    this.dispatchEvent(
+      new CustomEvent('scene-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: scene }
+      })
+    )
+  }
+
+  _setMode(mode: SCENE_MODE) {
+    this.mode = mode
+    this.dispatchEvent(
+      new CustomEvent('mode-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: mode }
+      })
+    )
+  }
+
+  _setVariables(variables: Properties) {
+    this.variables = variables
+    this.dispatchEvent(
+      new CustomEvent('variables-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: variables }
+      })
+    )
+  }
+
+  _setSelected(selected: Component[]) {
+    this.selected = selected
+    this.dispatchEvent(
+      new CustomEvent('selected-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { value: selected }
+      })
+    )
+  }
+
+  _disposeScene() {
+    if (this.scene) {
+      this.scene.off('selected', this._onSelectedChanged, this)
+      this.scene.off('mode', this._onSceneModeChanged, this)
+
+      if (this.provider) {
+        this.scene.release && this.scene.release()
+      } else {
+        this.scene.dispose()
+      }
+
+      this._setScene(null)
+      this._setSelected([])
+    }
+  }
+
+  resize(force: boolean) {
+    if (typeof this.scene == 'object') {
+      if (force || this.fit === 'both' || Math.abs(this.offsetWidth - (this.lastOffsetWidth || 0)) >= 1) {
+        requestAnimationFrame(() => {
+          if (this.scene) {
+            this.scene.resize()
+            this.scene.fit(this.fit)
+          }
+        })
+      }
+
+      this.lastOffsetWidth = this.offsetWidth
+    }
+  }
+
+  _onModelChanged(model?: Model) {
+    this._disposeScene()
+
+    if (!model) {
+      return
+    }
+
+    const layers = Array.from(this.querySelectorAll('scene-layer')).map(layer => (layer as SceneLayer).getModel())
+
+    const handlers = Array.from(this.querySelectorAll('scene-handler')).map(handler => handler.getAttribute('type'))
+
+    this._setScene(
+      createScene({
+        target: this,
+        model: JSON.parse(JSON.stringify(model)),
+        layers,
+        handlers,
+        mode: this.mode,
+        refProvider: this.provider
+      })
+    )
+
+    if (this.provider) {
+      this.provider.add(this.name, this.scene)
+    }
+
+    this.scene!.screen = this.screenSize
+
+    /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
+     * 이 때는 정상적으로 그려주고,
+     * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
+     */
+    this.resize(true)
+
+    this._setVariables(model.variables || this.scene!.variables)
+
+    this.scene!.on('selected', this._onSelectedChanged, this)
+    this.scene!.on('mode', this._onSceneModeChanged, this)
+
+    this._onModeChanged(this.mode)
+    this._onDisplayChanged(this.screenSize)
+    this._onBaseUrlChanged(this.baseUrl)
+  }
+
+  _onDisplayChanged(screenSize: string | number) {
+    if (!this.scene) {
+      return
+    }
+
+    if (screenSize) {
+      this.scene.screen = parseFloat(String(screenSize))
+    }
+  }
+
+  _onModeChanged(mode: SCENE_MODE) {
+    if (!this.scene) {
+      return
+    }
+    this.scene.mode = Number(mode)
+  }
+
+  _onDataChanged(data: any) {
+    if (!this.scene || !data) {
+      return
+    }
+
+    this.scene.data = data
+  }
+
+  _onSelectedChanged(after: Component[]) {
+    /*
+     scene 컴포넌트의 속성을 속성 에디터(input box등)에서 변경하다가,
+     scene의 다른 컴포넌트를 클릭해서 포커스(선택) 컴포넌트를 변경하게되면,
+     속성 에디터(input box등)의 value change 이벤트의 처리와 충돌(레이스)하게된다.
+     
+     기대하는 순서는 먼저 속성 에디터의 value change 이벤트를 처리한 후에,
+     selected 이벤트를 처리할 수 있도록 requestAnimationFrame으로 한 프레임을 지연하도록 하였다.
+     */
+    requestAnimationFrame(() => {
+      this._setSelected(after)
+    })
+  }
+
+  _onSceneModeChanged(after: SCENE_MODE) {
+    if (!this.scene) {
+      return
+    }
+
+    if (this.mode !== after) {
+      this._setMode(after)
+    }
+
+    if (after === 2) {
+      this.style.cursor = 'all-scroll'
+    } else if (after === 3) {
+      this.style.cursor = 'crosshair'
+    } else {
+      this.style.cursor = 'default'
+    }
+  }
+
+  _onBaseUrlChanged(after: string) {
+    if (!this.scene) {
+      return
+    }
+
+    this.scene.baseUrl = after
+  }
+}

package/src/ox-process-list.ts

@@ -0,0 +1,459 @@
+import '@operato/popup/ox-popup.js'
+import '@operato/data-grist'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { ColumnConfig, DataGrist, GristData, GristRecord, SortersConfig } from '@operato/data-grist'
+import { OxPopup } from '@operato/popup'
+
+import { createProcess, fetchProcessList } from './graphql/process'
+import { fetchFavoriteProcessList } from './graphql/favorite-process'
+import { fetchProcessGroupList } from './graphql/process-group'
+import { Process } from './types'
+
+@customElement('ox-process-list')
+class ProcessList extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+
+      width: 100%;
+
+      --grid-record-emphasized-background-color: red;
+      --grid-record-emphasized-color: yellow;
+    }
+
+    ox-grist {
+      flex: 1;
+      overflow-y: auto;
+
+      --grid-record-emphasized-background-color: red;
+      --grid-record-emphasized-color: yellow;
+    }
+
+    #headroom {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      border-top: 2px solid rgba(0, 0, 0, 0.2);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+    }
+
+    #filters {
+      flex: 1;
+      --mdc-icon-size: 20px;
+    }
+    #mode {
+      width: 100px;
+    }
+    #add {
+      width: 50px;
+      text-align: right;
+    }
+
+    #modes > * {
+      padding: var(--padding-narrow);
+      font-size: 1em;
+      opacity: 0.5;
+      color: var(--primary-text-color);
+      cursor: pointer;
+    }
+
+    #modes > mwc-icon[active] {
+      border-radius: 9px;
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      opacity: 1;
+      color: var(--secondary-text-color);
+      cursor: default;
+    }
+    #modes > mwc-icon:hover {
+      opacity: 1;
+      color: var(--secondary-text-color);
+    }
+
+    #add button {
+      background-color: var(--primary-color);
+      border: 0;
+      border-radius: 50%;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+    #add button:hover {
+      background-color: var(--focus-background-color);
+      box-shadow: var(--box-shadow);
+    }
+    #add button mwc-icon {
+      font-size: 2em;
+      color: var(--theme-white-color);
+    }
+
+    #filters {
+      position: relative;
+    }
+    #filters [type='text'] {
+      background-color: transparent;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
+      font-size: var(--fontsize-large);
+    }
+    #filters [type='text']:focus {
+      outline: none;
+    }
+    #filters mwc-icon {
+      position: absolute;
+      top: 3px;
+      color: var(--secondary-color);
+    }
+    #filters * {
+      margin-right: var(--margin-default);
+    }
+
+    oops-spinner {
+      display: none;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    oops-spinner[show] {
+      display: block;
+    }
+
+    @media only screen and (max-width: 460px) {
+      #modes {
+        display: none;
+      }
+    }
+  `
+
+  @property({ type: Boolean }) creatable: boolean = false
+  @property({ type: Object }) config: any
+  @property({ type: Object }) data: any
+  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'
+  @property({ type: String }) groupId?: string
+  @property({ type: Array }) groups: any[] = []
+  @property({ type: Array }) favorites: any[] = []
+
+  @state() _showSpinner: boolean = false
+
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    const mode = this.mode || 'CARD'
+
+    return html`
+      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <mwc-icon>search</mwc-icon>
+            <input type="text" />
+
+            <select
+              @change=${(e: Event) => {
+                this.groupId = (e.currentTarget as HTMLInputElement).value
+                this.requestUpdate()
+              }}
+            >
+              <option value="">*</option>
+              ${this.groups.map(
+                group =>
+                  html` <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option> `
+              )}
+            </select>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+
+          ${this.creatable
+            ? html`
+                <div id="add">
+                  <button><mwc-icon @click=${() => this.onCreateProcess()}>add</mwc-icon></button>
+                </div>
+              `
+            : undefined}
+        </div>
+      </ox-grist>
+
+      <oops-spinner ?show=${this._showSpinner}></oops-spinner>
+    `
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {
+    this._showSpinner = true
+
+    const { items: records, total } = await this.getProcesses({ page, limit, sorters })
+
+    this._showSpinner = false
+
+    return {
+      total,
+      records
+    }
+  }
+
+  get gristConfig() {
+    return {
+      list: {
+        thumbnail: function (record: GristRecord, rowIndex: number) {
+          return html` <img src=${record.thumbnail} style="width: 100%; height: 100%;" /> `
+        },
+        fields: ['name', 'description'],
+        details: ['updatedAt']
+      },
+      columns: [
+        {
+          type: 'gutter',
+          gutterName: 'dirty'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'sequence'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'star_border',
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {}
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'drive_file_rename_outline',
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {}
+          }
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: 'name',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          sortable: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: 'description',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          handlers: {
+            dblclick: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {
+              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
+            }
+          }
+        },
+        {
+          type: 'boolean',
+          name: 'active',
+          header: 'active',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: 'updated at',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: 'created at',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        },
+        handlers: {},
+        classifier: function (
+          record: GristRecord,
+          rowIndex: number
+        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}
+      },
+      sorters: [
+        {
+          name: 'name',
+          desc: false
+        }
+      ],
+      pagination: {
+        pages: [20, 30, 50, 100, 200]
+      }
+    }
+  }
+
+  async refresh() {
+    this.groups = (await fetchProcessGroupList()).processGroups.items
+
+    if (this.groups) {
+      await this.refreshProcesses()
+    }
+  }
+
+  async getProcesses({
+    page = 1,
+    limit = 30,
+    sorters = []
+  }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {
+    if (this.groupId && this.groupId == 'favor')
+      return await this.getFavoriteProcesses({
+        page,
+        limit
+      })
+
+    var listParam = {
+      filters: this.groupId
+        ? [
+            {
+              name: 'groupId',
+              operator: 'eq',
+              value: this.groupId
+            }
+          ]
+        : [],
+      sortings: sorters,
+      pagination: {
+        page,
+        limit
+      }
+    }
+
+    return (await fetchProcessList(listParam)).processes
+  }
+
+  async getFavoriteProcesses({ page = 1, limit = 30 } = {}) {
+    var listParam = {
+      pagination: {
+        page,
+        limit
+      }
+    }
+
+    return (await fetchFavoriteProcessList(listParam)).favoriteProcesses
+  }
+
+  async refreshProcesses() {
+    if (!this.groups) {
+      await this.refresh()
+      return
+    }
+
+    this.grist.fetch()
+  }
+
+  async onCreateProcess() {
+    /*
+     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var template = html`
+      <process-creation-popup
+        .defaultGroup=${this.groupId}
+        .groups=${this.groups}
+        @create-process=${async (e: CustomEvent) => {
+          try {
+            var { name, description, groupId } = e.detail
+            var process: Process = {
+              name,
+              description,
+              groupId,
+              model: {
+                width: 1200,
+                height: 800
+              }
+            }
+
+            const { createProcess: created } = await createProcess(process)
+
+            // this.popup && this.popup.close()
+
+            // await sleep(100)
+
+            this.notify('info', 'new process created')
+          } catch (ex: Error | any) {
+            console.error(ex)
+            this.notify('error', ex, ex)
+          }
+        }}
+      ></process-creation-popup>
+    `
+
+    OxPopup.open({
+      template,
+      parent: this.renderRoot as Element
+    })
+
+    requestAnimationFrame(() => {
+      dispatchEvent(new Event('resize'))
+    })
+  }
+
+  notify(level: 'warn' | 'error' | 'info', message: any, ex?: Error) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          level,
+          message,
+          ex
+        }
+      })
+    )
+  }
+}