@operato/process 1.1.1

package/src/ox-process-viewer.ts

@@ -0,0 +1,555 @@
+import '@material/mwc-fab'
+import '@material/mwc-icon'
+
+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 { 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 = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+
+      position: relative;
+
+      width: 100%; /* 전체화면보기를 위해서 필요함. */
+      overflow: hidden;
+    }
+
+    #target {
+      flex: 1;
+
+      width: 100%; /* 전체화면보기를 위해서 필요함. */
+      height: 100%;
+
+      outline: 0;
+    }
+
+    /* navigation buttons */
+    mwc-icon {
+      z-index: 10;
+      position: absolute;
+      top: 45%;
+      min-width: 50px;
+      width: 50px;
+      height: 50px;
+      margin: 0;
+      padding: 0;
+      color: #fff;
+      user-select: none;
+
+      --mdc-icon-size: 3em;
+    }
+
+    mwc-icon[hidden] {
+      display: none;
+    }
+
+    mwc-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;
+    }
+
+    /* for scroller */
+    ::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #aa866a;
+    }
+
+    [hidden] {
+      display: none;
+    }
+
+    @media print {
+      mwc-fab,
+      mwc-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: Boolean, reflect: true, attribute: 'hide-fullscreen' }) hideFullscreen = false
+  @property({ type: Boolean, reflect: true, attribute: 'hide-navigation' }) hideNavigation = false
+
+  @state() _scene: any = null
+  @state() _forward: Array<any> = []
+  @state() _backward: Array<any> = []
+
+  @state() _oldtarget?: HTMLElement
+  @state() _fade_animations?: Array<Animation>
+
+  @query('#target') _target!: HTMLElement
+  @query('#prev') _prev!: HTMLElement
+  @query('#next') _next!: HTMLElement
+  @query('#fullscreen') _fullscreen!: HTMLElement
+
+  render() {
+    var fullscreen =
+      !isIOS() && !this.hideFullscreen
+        ? html`
+            <mwc-fab
+              id="fullscreen"
+              .icon=${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}
+              @click=${(e: Event) => this.onTapFullscreen()}
+              @mouseover=${(e: Event) => this.transientShowButtons(true)}
+              @mouseout=${(e: Event) => this.transientShowButtons()}
+              title="fullscreen"
+            ></mwc-fab>
+          `
+        : html``
+
+    var prev = !this.hideNavigation
+      ? html`
+          <mwc-icon
+            id="prev"
+            @click=${(e: Event) => this.onTapPrev()}
+            @mouseover=${(e: Event) => this.transientShowButtons(true)}
+            @mouseout=${(e: Event) => this.transientShowButtons()}
+            hidden
+            >keyboard_arrow_left</mwc-icon
+          >
+        `
+      : html``
+
+    var next = !this.hideNavigation
+      ? html`
+          <mwc-icon
+            id="next"
+            @click=${(e: Event) => this.onTapNext()}
+            @mouseover=${(e: Event) => this.transientShowButtons(true)}
+            @mouseout=${(e: Event) => this.transientShowButtons()}
+            hidden
+            >keyboard_arrow_right</mwc-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
+    }
+  }
+
+  async initSceneAsync() {
+    if (!this.process || !this.process.id) return
+
+    this._scene = await this.provider!.get(this.process.id, true)
+    this.setupScene(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(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(scene: any) {
+    this._scene = scene
+
+    /* 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
+    }
+
+    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(this._scene)
+      }
+
+      this._scene = scene
+
+      this._forward.forEach(scene => scene.release && scene.release())
+
+      /* forward를 비운다. */
+      this._forward = []
+
+      this.setupScene(scene)
+
+      if (bindingData) {
+        scene.data = bindingData
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  bindSceneEvents() {
+    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('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 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(this._scene)
+    }
+
+    this.setupScene(scene)
+  }
+
+  onTapPrev() {
+    var 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(this._scene)
+    }
+
+    this.setupScene(scene)
+  }
+
+  onTapFullscreen() {
+    togglefullscreen(
+      this,
+      () => this.requestUpdate(),
+      () => this.requestUpdate()
+    )
+  }
+
+  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
+  }
+
+  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/types.ts

@@ -0,0 +1,68 @@
+import { Model } from '@hatiolab/things-scene'
+
+export interface PalletItem {
+  type: string
+  description: string
+  icon: HTMLImageElement
+  group:
+    | 'line'
+    | 'shape'
+    | 'textAndMedio'
+    | 'chartAndGauge'
+    | 'table'
+    | 'container'
+    | 'IoT'
+    | '3D'
+    | 'warehouse'
+    | 'form'
+    | 'etc'
+    | string
+  model: Model
+}
+
+export interface Pallet {
+  name: string
+  templates: PalletItem[]
+}
+
+export type ComponentTemplate = {
+  type: string
+  description: string
+  group:
+    | 'line'
+    | 'shape'
+    | 'textAndMedia'
+    | 'chartAndGauge'
+    | 'table'
+    | 'container'
+    | 'dataSource'
+    | 'IoT'
+    | '3D'
+    | 'warehouse'
+    | 'form'
+    | 'etc'
+    | string
+  icon: any
+  model: Model
+}
+
+export type ComponentGroup = {
+  name: string
+  description: string
+  icon: string
+  templates: ComponentTemplate[]
+}
+
+export type Process = {
+  id?: string
+  name?: string
+  description?: string
+  model?: any
+  groupId?: string
+}
+
+export type ProcessGroup = {
+  id?: string
+  name?: string
+  description?: string
+}

package/stories/index.stories.ts

@@ -0,0 +1,52 @@
+import '../index.js.js'
+
+import { TemplateResult, html } from 'lit'
+
+export default {
+  title: 'ProcessViewer',
+  component: 'process-viewer',
+  argTypes: {
+    title: { control: 'text' },
+    counter: { control: 'number' },
+    textColor: { control: 'color' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  title?: string
+  counter?: number
+  textColor?: string
+  slot?: TemplateResult
+}
+
+const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
+  <ox-process-viewer style="--process-viewer-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
+    ${slot}
+  </ox-process-viewer>
+`
+
+export const Regular = Template.bind({})
+
+export const CustomTitle = Template.bind({})
+CustomTitle.args = {
+  title: 'My title'
+}
+
+export const CustomCounter = Template.bind({})
+CustomCounter.args = {
+  counter: 123456
+}
+
+export const SlottedContent = Template.bind({})
+SlottedContent.args = {
+  slot: html`<p>Slotted content</p>`
+}
+SlottedContent.argTypes = {
+  slot: { table: { disable: true } }
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}