@operato/process 8.0.0-beta.0 → 8.0.0-beta.2

package/src/ox-process-modeller.ts

@@ -1,432 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/fab/fab.js'
-
-import '@operato/board/ox-scene-handler.js'
-import '@operato/board/ox-scene-layer.js'
-import '@operato/board/ox-scene-property.js'
-import '@operato/board/ox-scene-viewer.js'
-import '@hatiolab/things-scene'
-import './ox-process-viewer'
-
-import { saveAs } from 'file-saver'
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { OxPopup } from '@operato/popup'
-import { isMacOS, togglefullscreen } from '@operato/utils'
-
-import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'
-import { EditToolbar } from './modeller/edit-toolbar'
-import { PropertySidebar } from './modeller/property-sidebar/property-sidebar'
-import { ComponentGroup, ComponentTemplate } from './types'
-
-const MACOS = isMacOS()
-
-const ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href
-const ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href
-const ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href
-const ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href
-const ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href
-
-const ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href
-const ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href
-const ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href
-const ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href
-
-const ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href
-
-var Registry: ComponentGroup[] = []
-
-@customElement('ox-process-modeller')
-export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        height: 100%;
-        overflow: hidden;
-      }
-
-      process-edit-toolbar {
-        flex: 45px;
-        max-height: 45px;
-      }
-
-      div[content] {
-        flex: 1;
-        max-height: calc(100% - 45px);
-
-        display: flex;
-        flex-direction: row;
-      }
-
-      process-component-toolbar {
-        max-height: 100%;
-      }
-
-      process-property-sidebar {
-        overflow: hidden;
-      }
-
-      #scene-wrap {
-        position: relative;
-
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-      }
-
-      ox-scene-viewer {
-        flex: 1;
-        width: 100%;
-        height: 100%;
-      }
-
-      md-fab {
-        position: absolute;
-        right: 15px;
-        bottom: 15px;
-      }
-
-      ox-popup {
-        width: 90%;
-        height: 90%;
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-        background: var(--md-sys-color-on-secondary-container, black);
-
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-      }
-
-      ox-process-viewer {
-        width: 98%;
-        height: 98%;
-        margin: auto;
-        padding: 0;
-      }
-    `
-  ]
-
-  static registerGroup(group: ComponentGroup) {
-    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)
-
-    if (found) {
-      found = {
-        ...found,
-        ...group
-      }
-    } else {
-      Registry.push(group)
-    }
-  }
-
-  static registerTemplate(templates: ComponentTemplate[]): void {
-    templates &&
-      templates.forEach(template => {
-        var groups: string[] = typeof template.group == 'string' ? [template.group] : template.group
-
-        Registry.filter(group => groups.includes(group.name)).forEach(group => {
-          if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {
-            group.templates.push(template)
-          }
-        })
-      })
-  }
-
-  static get groups(): ComponentGroup[] {
-    return Registry
-  }
-
-  static getGroup(name: string) {
-    return Registry.find(group => group.name === name)
-  }
-
-  @property({ type: String }) processName: string = ''
-  @property({ type: Object }) model: any = null
-  @property({ type: String }) baseUrl: string = ''
-  @property({ type: Array }) selected: any[] = []
-  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT
-  @property({ type: Object }) provider: any = null
-  @property({ type: Boolean }) hideProperty: boolean = false
-  @property({ type: String }) overlay: string = ''
-  @property({ type: Object }) scene?: Scene
-  @property({ type: Array }) componentGroupList: any[] = []
-  @property({ type: Array }) fonts: any[] = []
-  @property({ type: Array }) propertyEditor: any[] = []
-
-  @property({ type: Boolean, attribute: 'hide-data-binding' }) hideDataBinding: boolean = false
-  @property({ type: Boolean, attribute: 'hide-effect' }) hideEffect: boolean = false
-  @property({ type: Boolean, attribute: 'hide-inspector' }) hideInspector: boolean = false
-  @property({ type: Boolean, attribute: 'hide-shape' }) hideShape: boolean = false
-  @property({ type: Boolean, attribute: 'hide-style' }) hideStyle: boolean = false
-  @property({ type: Boolean, attribute: 'hide-specific' }) hideSpecific: boolean = false
-
-  @query('process-edit-toolbar') private editToolbar!: EditToolbar
-
-  private group: string = ''
-  private shortcutHandler?: (e: KeyboardEvent) => void
-
-  constructor() {
-    super()
-
-    document.addEventListener('get-all-scene-component-ids', (e: Event) => {
-      var { component, callback } = (e as CustomEvent).detail
-
-      if (!this.scene) return
-
-      var ids
-      if (component) {
-        ids = this.scene.findAll(component).map(c => c.model.id)
-      } else {
-        // @ts-ignore
-        ids = this.scene.ids.map(({ key }) => key)
-      }
-
-      ids = ids.filter(Boolean).sort()
-      callback(ids)
-    })
-
-    this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`)
-    this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`)
-    this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`)
-    this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)
-    this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)
-
-    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)
-    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)
-    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)
-    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)
-
-    this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)
-  }
-
-  static get scopedElements() {
-    return {
-      'process-edit-toolbar': EditToolbar,
-      'process-property-sidebar': PropertySidebar,
-      'process-component-toolbar': ComponentToolbar
-    }
-  }
-
-  render() {
-    return html`
-      <process-edit-toolbar
-        .scene=${this.scene}
-        .selected=${this.selected}
-        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}
-        @open-preview=${() => this.preview()}
-        @download-model=${() => this.downloadModel()}
-        @modeller-fullscreen=${() => togglefullscreen(this)}
-      >
-        ${this.renderBrandingZone()}
-      </process-edit-toolbar>
-
-      <div content>
-        <process-component-toolbar
-          .scene=${this.scene}
-          .mode=${this.mode}
-          @mode-changed=${(e: CustomEvent) => {
-            this.mode = e.detail.value
-          }}
-          .componentGroupList=${this.componentGroupList}
-          .group=${this.group}
-        >
-        </process-component-toolbar>
-
-        <div id="scene-wrap">
-          <ox-scene-viewer
-            id="scene"
-            .scene=${this.scene}
-            @scene-changed=${(e: CustomEvent) => {
-              this.scene = e.detail.value
-            }}
-            .model=${this.model}
-            .selected=${this.selected}
-            @selected-changed=${(e: CustomEvent) => {
-              this.selected = e.detail.value
-            }}
-            .mode=${this.mode}
-            @mode-changed=${(e: CustomEvent) => {
-              this.mode = e.detail.value
-            }}
-            fit="ratio"
-            .baseUrl=${this.baseUrl}
-            @contextmenu=${() => this.onContextMenu()}
-            .provider=${this.provider}
-            name="modeller"
-          >
-            <ox-scene-layer type="selection-layer"></ox-scene-layer>
-            <ox-scene-layer type="modeling-layer"></ox-scene-layer>
-            <ox-scene-layer type="add-layer"> </ox-scene-layer>
-            <ox-scene-layer type="guide-layer">
-              <ox-scene-property name="ruler" value="disabled"></ox-scene-property>
-            </ox-scene-layer>
-            <ox-scene-layer type="shift-layer">
-              <ox-scene-property name="text" value="${this.overlay}"></ox-scene-property>
-              <ox-scene-property name="alpha" value="0.3"></ox-scene-property>
-              <ox-scene-property name="fontFamily" value="arial"></ox-scene-property>
-              <ox-scene-property name="fontSize" value="30" type="number"></ox-scene-property>
-              <ox-scene-property name="fontColor" value="navy"></ox-scene-property>
-              <ox-scene-property name="textBaseline" value="top"></ox-scene-property>
-              <ox-scene-property name="textAlign" value="left"></ox-scene-property>
-              <ox-scene-property name="paddingTop" value="50" type="number"></ox-scene-property>
-              <ox-scene-property name="paddingLeft" value="50" type="number"></ox-scene-property>
-            </ox-scene-layer>
-            <ox-scene-layer type="decotag-layer"></ox-scene-layer>
-            <ox-scene-handler type="text-editor"></ox-scene-handler>
-            <ox-scene-handler type="move-handler"></ox-scene-handler>
-          </ox-scene-viewer>
-
-          <md-fab @click=${() => this.onTapSave()} title="save">
-            <md-icon slot="icon">save</md-icon>
-          </md-fab>
-        </div>
-
-        <process-property-sidebar
-          .scene=${this.scene}
-          .selected=${this.selected}
-          .collapsed=${this.hideProperty}
-          .fonts=${this.fonts}
-          .propertyEditor=${this.propertyEditor}
-          ?hide-data-binding=${this.hideDataBinding}
-          ?hide-effect=${this.hideEffect}
-          ?hide-inspector=${this.hideInspector}
-          ?hide-shape=${this.hideShape}
-          ?hide-style=${this.hideStyle}
-          ?hide-specific=${this.hideSpecific}
-        >
-        </process-property-sidebar>
-      </div>
-    `
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.bindShortcutEvent()
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.unbindShortcutEvent()
-  }
-
-  updated(changes: PropertyValues<this>): void {
-    if (changes.has('scene')) {
-      if (this.scene) {
-        this.scene.anchorStarterTemplate = {
-          type: 'streamline',
-          lineWidth: 2,
-          strokeStyle: 'black',
-          begin: 'oval',
-          beginSize: 'size9',
-          end: 'arrow',
-          endSize: 'size9',
-          round: 10
-        }
-      }
-    }
-  }
-
-  close() {
-    this.model = null
-    this.requestUpdate()
-  }
-
-  onShortcut(e: KeyboardEvent) {
-    if (MACOS) var ctrlKey = e.metaKey
-    else var ctrlKey = e.ctrlKey
-
-    switch (e.code) {
-      case 'KeyS':
-        if (ctrlKey) {
-          this.onTapSave()
-          e.preventDefault()
-        }
-        break
-    }
-  }
-
-  preview() {
-    const process = {
-      id: 'preview',
-      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null
-    }
-
-    OxPopup.open({
-      template: html`
-        <ox-process-viewer style="flex: 1;" .provider=${this.provider} .process=${process}></ox-process-viewer>
-      `,
-      style: 'width: 80vw; height: 80vh;',
-      backdrop: true
-    })
-
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-    })
-  }
-
-  downloadModel() {
-    if (!this.scene) return
-
-    var model = JSON.stringify(this.model, null, 2)
-    var filename = (this.processName || 'NONAME') + '-' + Date.now() + '.json'
-    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)
-  }
-
-  renderBrandingZone() {
-    return html``
-  }
-
-  onTapSave() {
-    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))
-  }
-
-  bindShortcutEvent() {
-    // TODO: Global Hotkey에 대한 정의를 process-edit-toolbar에서 가져올 수 있도록 수정해야 함.
-    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']
-
-    this.shortcutHandler = (e: KeyboardEvent) => {
-      const target = e.composedPath()[0] as HTMLElement
-      var tagName = target.tagName
-      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'
-      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)
-
-      if (!isGlobalHotkey && isInput) return
-      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)
-    }
-
-    document.addEventListener('keydown', this.shortcutHandler)
-  }
-
-  unbindShortcutEvent() {
-    if (this.shortcutHandler) {
-      document.removeEventListener('keydown', this.shortcutHandler)
-      delete this.shortcutHandler
-    }
-  }
-
-  undoable(): boolean {
-    return !!this.scene?.undoable()
-  }
-
-  redoable(): boolean {
-    return !!this.scene?.redoable()
-  }
-
-  preserve(): void {
-    this.scene?.preserve()
-  }
-
-  hasUnpreservedChanges(): boolean {
-    return !!this.scene?.hasUnpreservedChanges()
-  }
-
-  onContextMenu() {}
-}

package/src/ox-process-template-list.ts

@@ -1,272 +0,0 @@
-import '@operato/data-grist'
-import '@operato/input/ox-input-file.js'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { DataGrist, FetchOption, FilterValue, PaginationConfig, SortersConfig } from '@operato/data-grist'
-import { buildArgs, client } from '@operato/graphql'
-import { ScrollbarStyles } from '@operato/styles'
-import { i18next } from '@operato/i18n'
-
-const FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam: any) => {
-  return gql`
-  {
-    processTemplates(${buildArgs(listParam)}) {
-      items {
-        id
-        name
-        description
-        visibility
-        thumbnail
-      }
-      total
-    }
-  }
-`
-}
-
-const FETCH_PROCESS_TEMPLATE_GQL = (id: string) => {
-  return gql`
-  {
-    processTemplate(id: "${id}") {
-      id
-      name
-      description
-      visibility
-      model
-      thumbnail
-    }
-  }
-`
-}
-
-@customElement('ox-process-template-list')
-export class OxProcessTemplateList extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    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 {
-        align-items: center;
-        padding: var(--padding-default) var(--spacing-large);
-        border-top: 2px solid rgba(0, 0, 0, 0.2);
-        background-color: var(--md-sys-color-surface);
-        box-shadow: var(--box-shadow);
-      }
-
-      #filters {
-        display: flex;
-        flex-direction: row;
-        place-content: space-between;
-        margin: var(--margin-default) 0;
-      }
-
-      select {
-        border: 0;
-        outline: none;
-        text-align: right;
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false
-
-  @query('ox-grist') grist!: DataGrist
-
-  render() {
-    return html`
-      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom" id="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>
-          </div>
-        </div>
-      </ox-grist>
-    `
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    const { items: records, total } = await this.getProcessTemplates({ page, limit, filters, sortings })
-
-    return {
-      total,
-      records
-    }
-  }
-
-  get gristConfig() {
-    const PRIVATE = i18next.t('label.visibility-private')
-    const DOMAIN = i18next.t('label.visibility-domain')
-    const PUBLIC = i18next.t('label.visibility-public')
-
-    const visibilities = window.location.pathname.startsWith('/domain/')
-      ? [
-          { display: PRIVATE, value: 'private' },
-          { display: DOMAIN, value: 'domain' },
-          { display: PUBLIC, value: 'public' }
-        ]
-      : [
-          { display: PRIVATE, value: 'private' },
-          { display: PUBLIC, value: 'public' }
-        ]
-
-    return {
-      list: {
-        thumbnail: 'thumbnail',
-        fields: ['name'],
-        details: ['description']
-      },
-      columns: [
-        {
-          type: 'string',
-          name: 'id',
-          hidden: true
-        },
-        {
-          type: 'string',
-          name: 'name',
-          header: 'name',
-          record: {
-            editable: true,
-            align: 'left'
-          },
-          width: 200,
-          filter: 'search',
-          sortable: true
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: 'description',
-          record: {
-            editable: true,
-            align: 'left'
-          },
-          width: 200,
-          filter: 'search'
-        },
-        {
-          type: 'select-buttons',
-          name: 'visibility',
-          header: 'visibility',
-          record: {
-            editable: false
-          },
-          hidden: true,
-          filter: {
-            operator: 'in',
-            options: visibilities,
-            label: ''
-          }
-        },
-        {
-          type: 'image',
-          name: 'thumbnail',
-          hidden: true,
-          record: {
-            editable: false
-          },
-          width: 120
-        }
-      ],
-      rows: {
-        appendable: false,
-        selectable: {
-          multiple: false
-        },
-        handlers: {
-          click: 'select-row-toggle'
-        }
-      },
-      sorters: [
-        {
-          name: 'name',
-          desc: false
-        }
-      ],
-      pagination: {
-        pages: [20, 30, 50, 100, 200]
-      }
-    }
-  }
-
-  async firstUpdated() {
-    this.refreshProcessTemplates()
-  }
-
-  async getSelected() {
-    const selected = this.grist.selected
-    const templateId = selected && selected[0]?.id
-
-    if (!templateId) {
-      return
-    }
-
-    var processTemplateResponse = await client.query({
-      query: FETCH_PROCESS_TEMPLATE_GQL(templateId)
-    })
-
-    var template = processTemplateResponse.data?.processTemplate
-
-    if (template) {
-      template = {
-        ...template,
-        model: JSON.parse(template.model)
-      }
-    }
-
-    return template
-  }
-
-  async refreshProcessTemplates() {
-    this.grist.fetch()
-  }
-
-  async getProcessTemplates({
-    page = 1,
-    limit = 30,
-    filters = [],
-    sortings = []
-  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {
-    var pagination: PaginationConfig = {
-      limit,
-      page
-    }
-
-    var params = {
-      filters,
-      sortings,
-      pagination
-    }
-
-    var processTemplateListResponse = await client.query({
-      query: FETCH_PROCESS_TEMPLATE_LIST_GQL(params)
-    })
-
-    return processTemplateListResponse?.data?.processTemplates || {}
-  }
-}