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

package/src/ox-process-viewer.ts

@@ -1,575 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/fab/fab.js'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { Component, create, ReferenceProvider, SCENE_MODE } from '@hatiolab/things-scene'
-import { isIOS, togglefullscreen } from '@operato/utils'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { DataStorage } from './data-storage/data-storage.js'
-import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js'
-import { runScenario, startScenario } from './graphql/scenario.js'
-
-@customElement('ox-process-viewer')
-export class OxProcessViewer extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        position: relative;
-
-        width: 100%; /* 전체화면보기를 위해서 필요함. */
-        overflow: hidden;
-      }
-
-      #target {
-        flex: 1;
-
-        width: 100%; /* 전체화면보기를 위해서 필요함. */
-        height: 100%;
-
-        outline: 0;
-      }
-
-      /* navigation buttons */
-      #prev,
-      #next {
-        z-index: 10;
-        position: absolute;
-        top: 45%;
-        min-width: 50px;
-        width: 50px;
-        height: 50px;
-        margin: 0;
-        padding: 0;
-        color: #fff;
-        user-select: none;
-
-        --md-icon-size: 3em;
-      }
-
-      md-icon[hidden] {
-        display: none;
-      }
-
-      md-icon:hover {
-        background-color: rgba(0, 0, 0, 0.2);
-        border-radius: 50%;
-      }
-
-      #prev {
-        left: 5px;
-      }
-
-      #next {
-        right: 5px;
-      }
-
-      #fullscreen {
-        position: absolute;
-        bottom: 15px;
-        right: 16px;
-      }
-
-      [hidden] {
-        display: none;
-      }
-
-      @media print {
-        md-fab,
-        md-icon {
-          display: none;
-        }
-      }
-    `
-  ]
-
-  @property({ type: String }) baseUrl: string = ''
-  @property({ type: Object }) process: any = {}
-  @property({ type: Object }) provider: ReferenceProvider | null = null
-  @property({ type: Object }) data: any
-  @property({ type: Object }) values: any
-
-  @property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = false
-  @property({ type: Boolean, reflect: true, attribute: 'hide-navigation' }) hideNavigation = false
-
-  @state() _scene: any = null
-  @state() _forward: { id: string; scene: any }[] = []
-  @state() _backward: { id: string; scene: any }[] = []
-
-  @state() _oldtarget?: HTMLElement
-  @state() _fade_animations?: Array<Animation>
-
-  public currentProcessId?: string = this.process?.id
-
-  @query('#target') _target!: HTMLElement
-  @query('#prev') _prev!: HTMLElement
-  @query('#next') _next!: HTMLElement
-  @query('#fullscreen') _fullscreen!: HTMLElement
-
-  render() {
-    var fullscreen =
-      !isIOS() && !this.hideFullscreen
-        ? html`
-            <md-fab
-              id="fullscreen"
-              @click=${(e: Event) => this.onTapFullscreen()}
-              @mouseover=${(e: Event) => this.transientShowButtons(true)}
-              @mouseout=${(e: Event) => this.transientShowButtons()}
-              title="fullscreen"
-            >
-              <md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
-            </md-fab>
-          `
-        : html``
-
-    var prev = !this.hideNavigation
-      ? html`
-          <md-icon
-            id="prev"
-            @click=${(e: Event) => this.onTapPrev()}
-            @mouseover=${(e: Event) => this.transientShowButtons(true)}
-            @mouseout=${(e: Event) => this.transientShowButtons()}
-            hidden
-            >keyboard_arrow_left</md-icon
-          >
-        `
-      : html``
-
-    var next = !this.hideNavigation
-      ? html`
-          <md-icon
-            id="next"
-            @click=${(e: Event) => this.onTapNext()}
-            @mouseover=${(e: Event) => this.transientShowButtons(true)}
-            @mouseout=${(e: Event) => this.transientShowButtons()}
-            hidden
-            >keyboard_arrow_right</md-icon
-          >
-        `
-      : html``
-
-    return html`
-      ${prev}
-
-      <div
-        id="target"
-        @touchstart=${(e: Event) => this.transientShowButtons()}
-        @mousemove=${(e: Event) => this.transientShowButtons()}
-      ></div>
-
-      ${next} ${fullscreen}
-    `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    window.addEventListener('resize', () => {
-      this._scene && this._scene.fit()
-    })
-
-    this.renderRoot.addEventListener(
-      'close-scene',
-      e => {
-        e.preventDefault()
-        this.onTapPrev()
-      },
-      false
-    )
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this.closeScene()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('process')) {
-      this.closeScene()
-
-      if (this.process && this.process.id) {
-        if (this.process.model) {
-          this.initScene()
-        } else {
-          this.initSceneAsync()
-        }
-      }
-    }
-
-    if (changes.has('data') && this._scene && this.data) {
-      this._scene.data = this.data
-    }
-
-    if (changes.has('values') && this._scene && this.values) {
-      this._scene.values = this.values
-    }
-  }
-
-  async initSceneAsync() {
-    if (!this.process || !this.process.id) return
-
-    this._scene = await this.provider!.get(this.process.id, true)
-    this.setupScene({ id: this.process.id, scene: this._scene })
-  }
-
-  initScene() {
-    if (!this.process || !this.process.id) return
-
-    this._scene = create({
-      model: {
-        ...this.process.model
-      },
-      mode: SCENE_MODE.VIEW,
-      refProvider: this.provider!,
-      dataStorage: this.process.id !== 'preview' ? new DataStorage(this.process.id) : undefined,
-      dataSubscriptionProvider: new DataSubscriptionProviderImpl()
-    })
-
-    if (this.baseUrl) {
-      this._scene.baseUrl = this.baseUrl
-    }
-
-    this.provider!.add(this.process.id, this._scene)
-
-    this.setupScene({ id: this.process.id, scene: this._scene })
-  }
-
-  closeScene() {
-    if (this._scene) {
-      this.unbindSceneEvents(this._scene)
-
-      this._scene.target = null
-      this._scene.release && this._scene.release()
-
-      this._scene = null
-    }
-
-    // delete queued scenes
-    this._forward.forEach(({ scene }) => scene.release && scene.release())
-    this._forward = []
-
-    this._backward.forEach(({ scene }) => scene.release && scene.release())
-    this._backward = []
-  }
-
-  releaseScene() {
-    this.closeScene()
-    this.transientShowButtons()
-  }
-
-  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'
-    }
-
-    /* scene의 기존 target을 보관한다. */
-    this._oldtarget = this._scene.target
-
-    this._scene.fit(this._scene.fitMode)
-    this._scene.target = this._target
-
-    if (this.data) {
-      this._scene.data = this.data
-    }
-    if (this.values) {
-      this._scene.values = this.values
-    }
-
-    this.currentProcessId = id
-
-    this.bindSceneEvents()
-
-    this.transientShowButtons()
-  }
-
-  async showScene(processId: string, bindingData?: any) {
-    if (!processId) return
-
-    try {
-      var scene = await this.provider!.get(processId, true)
-
-      if (scene === this._scene) {
-        scene.release && scene.release()
-        return
-      }
-
-      if (this._scene) {
-        /* old scene을 _backward에 보관한다. */
-        this.unbindSceneEvents(this._scene)
-        /* 원래의 target에 되돌린다. */
-        this._scene.target = this._oldtarget
-        this._backward.push({ id: this.currentProcessId!, scene: this._scene })
-      }
-
-      this._scene = scene
-
-      this._forward.forEach(({ scene }) => scene.release && scene.release())
-
-      /* forward를 비운다. */
-      this._forward = []
-
-      this.setupScene({ id: processId, scene })
-
-      if (bindingData) {
-        scene.data = bindingData
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  bindSceneEvents() {
-    this._scene.on('run', this.onRunProcess, this)
-    this._scene.on('goto', this.onLinkGoto, this)
-    this._scene.on('link-open', this.onLinkOpen, this)
-    this._scene.on('link-move', this.onLinkMove, this)
-    this._scene.on('route-page', this.onRoutePage, this)
-    this._scene.on('start-scenario', this.onStartScenario, this)
-    this._scene.on('run-scenario', this.onRunScenario, this)
-  }
-
-  unbindSceneEvents(scene: any) {
-    scene.off('run', this.onRunProcess, this)
-    scene.off('goto', this.onLinkGoto, this)
-    scene.off('link-open', this.onLinkOpen, this)
-    scene.off('link-move', this.onLinkMove, this)
-    scene.off('route-page', this.onRoutePage, this)
-    scene.off('start-scenario', this.onStartScenario, this)
-    scene.off('run-scenario', this.onRunScenario, this)
-  }
-
-  transientShowButtons(stop?: boolean) {
-    var buttons = []
-    !this.hideNavigation && buttons.push(this._next, this._prev)
-    !this.hideFullscreen && buttons.push(this._fullscreen)
-
-    if (buttons.length == 0) {
-      return
-    }
-
-    if (!this._fade_animations) {
-      this._fade_animations = buttons
-        .filter(button => button)
-        .map(button => {
-          let animation = button.animate(
-            [
-              {
-                opacity: 1,
-                easing: 'ease-in'
-              },
-              { opacity: 0 }
-            ],
-            { delay: 1000, duration: 2000 }
-          )
-
-          animation.onfinish = () => {
-            button.setAttribute('hidden', '')
-          }
-
-          return animation
-        })
-    }
-
-    this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden')
-    this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden')
-    this._fullscreen && this._fullscreen.removeAttribute('hidden')
-
-    this._fade_animations.forEach(animation => {
-      animation.cancel()
-      if (stop) return
-
-      animation.play()
-    })
-  }
-
-  /* event handlers */
-
-  onTapNext() {
-    var { id, scene } = this._forward.pop() || {}
-    if (!scene) return
-
-    if (this._scene) {
-      this._scene.target = null
-      /* 원래의 target에 되돌린다. */
-      this._scene.target = this._oldtarget
-      this.unbindSceneEvents(this._scene)
-      this._backward.push({ id: id!, scene: this._scene })
-    }
-
-    this.setupScene({ id: id!, scene })
-  }
-
-  onTapPrev() {
-    var { id, scene } = this._backward.pop() || {}
-    if (!scene) return
-
-    if (this._scene) {
-      this._scene.target = null
-      /* 원래의 target에 되돌린다. */
-      this._scene.target = this._oldtarget
-      this.unbindSceneEvents(this._scene)
-      this._forward.push({ id: id!, scene: this._scene })
-    }
-
-    this.setupScene({ id: id!, scene })
-  }
-
-  onTapFullscreen() {
-    togglefullscreen(
-      this,
-      () => this.requestUpdate(),
-      () => this.requestUpdate()
-    )
-  }
-
-  onRunProcess() {
-    this.dispatchEvent(new CustomEvent('run-process', { bubbles: true, composed: true, detail: this.process.id }))
-  }
-
-  onLinkGoto(targetProcessId: string, options: any, fromComponent: any) {
-    const { input, output } = options || { input: '(self)' }
-    const data = input && fromComponent.root.findFirst(input, fromComponent)?.data
-    this.showScene(targetProcessId, data)
-  }
-
-  onLinkOpen(url: string, value: any, fromComponent: Component) {
-    if (!url) return
-
-    try {
-      window.open(url)
-    } catch (ex) {
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            level: 'error',
-            message: ex,
-            ex
-          }
-        })
-      )
-    }
-  }
-
-  onLinkMove(url: string, value: any, fromComponent: Component) {
-    if (!url) return
-
-    location.href = url
-  }
-
-  onRoutePage(page: string) {
-    if (!page) {
-      return
-    }
-
-    history.pushState({}, '', page)
-    window.dispatchEvent(new Event('popstate'))
-  }
-
-  async onStartScenario(scenario: string, value: string | number | object, component: Component) {
-    try {
-      await startScenario(scenario, scenario, value)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  async onRunScenario(scenario: string, value: string | number | object, component: Component) {
-    try {
-      component.data = await runScenario(scenario, value)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  getSceneData() {
-    return this._scene?.data
-  }
-
-  getSceneValues() {
-    return this._scene?.values
-  }
-
-  async getSceneImageData(base64 = false) {
-    if (!this._scene) {
-      return
-    }
-
-    var { width, height } = this._scene.model
-    var pixelRatio = window.devicePixelRatio
-
-    // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.
-    var canvas = document.createElement('canvas')
-    canvas.width = Number(width)
-    canvas.height = Number(height)
-
-    var root = this._scene.root
-    // 2. 모델레이어의 원래 위치와 스케일을 저장한다.
-    var translate = root.get('translate')
-    var scale = root.get('scale')
-
-    // 3. 위치와 스케일 기본 설정.
-    root.set('translate', { x: 0, y: 0 })
-    root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio })
-
-    // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.
-    var context = canvas.getContext('2d')
-
-    root.draw(context)
-
-    root.set('translate', translate)
-    root.set('scale', scale)
-
-    var data = base64 ? canvas.toDataURL() : context!.getImageData(0, 0, width, height).data
-
-    return {
-      width,
-      height,
-      data
-    }
-  }
-
-  async printTrick(image: string) {
-    var viewTarget: HTMLElement | null = null
-    var printTarget: HTMLImageElement | null = null
-
-    if (!image) {
-      image = (await this.getSceneImageData(true))?.data as string
-    }
-
-    printTarget = document.createElement('img')
-    printTarget.id = 'target'
-    printTarget.src = image
-    printTarget.style.width = '100%'
-    printTarget.style.height = '100%'
-
-    const x = (mql: MediaQueryListEvent) => {
-      if (mql.matches) {
-        if (!viewTarget) {
-          viewTarget = (this.renderRoot as ShadowRoot)!.getElementById('target')
-          this.renderRoot.replaceChild(printTarget!, viewTarget!)
-        }
-      } else {
-        this.renderRoot.replaceChild(viewTarget!, printTarget!)
-        printTarget!.remove()
-        mediaQueryList.removeEventListener('change', x)
-      }
-    }
-
-    if (window.matchMedia) {
-      var mediaQueryList = window.matchMedia('print')
-      mediaQueryList.addEventListener('change', x)
-    }
-  }
-}

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

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

package/src/selector/ox-process-creation-card.ts

@@ -1,95 +0,0 @@
-import '@material/web/icon/icon.js'
-import './process-creation-popup'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-process-creation-card')
-export class ProcessCreationCard extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          border: var(--card-list-create-border);
-          border-radius: var(--card-list-create-border-radius);
-
-          background-color: var(--md-sys-color-surface);
-
-          align-content: center;
-          justify-content: center;
-        }
-
-        div {
-          text-align: center;
-          font-size: 0.8em;
-          color: var(--card-list-create-color);
-          text-transform: capitalize;
-        }
-
-        md-icon {
-          --md-icon-size: 42px;
-          display: block;
-          font-size: 3.5em;
-          color: var(--card-list-create-icon-color);
-        }
-      `
-    ]
-  }
-
-  /* default group id */
-  @property({ type: String }) defaultGroup?: string
-  @property({ type: Array }) groups: any
-
-  private popup: any
-
-  render() {
-    return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create process</div> `
-  }
-
-  onClick() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    /*
-     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-     * 주의. value는 object일 수도 있고, string일 수도 있다.
-     * string인 경우에는 해당 보드의 id로 해석한다.
-     */
-    var template = html`
-      <process-creation-popup
-        .defaultGroup=${this.defaultGroup}
-        .groups=${this.groups}
-        @create-process=${async (e: CustomEvent) => {
-          var { name, description, groupId, model, thumbnail } = e.detail
-
-          this.dispatchEvent(
-            new CustomEvent('create-process', {
-              detail: {
-                name,
-                description,
-                groupId,
-                model,
-                thumbnail
-              }
-            })
-          )
-
-          this.popup && this.popup.close()
-        }}
-      ></process-creation-popup>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.create-process')
-    })
-  }
-
-  reset() {}
-}