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

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

@@ -1,198 +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 { create, SCENE_MODE } from '@hatiolab/things-scene'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-process-template-viewer')
-export class ProcessTemplateViewer 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;
-      }
-
-      @media print {
-        md-fab,
-        md-icon {
-          display: none;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) processTemplate: any = {}
-
-  @state() _scene: any = null
-
-  @query('#target') _target!: HTMLElement
-
-  render() {
-    return html` <div id="target"></div> `
-  }
-
-  private resizeHandler = () => {
-    this._scene && this._scene.fit()
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    window.addEventListener('resize', this.resizeHandler)
-
-    window.addEventListener('orientationchange', this.resizeHandler)
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.resizeHandler)
-    window.removeEventListener('orientationchange', this.resizeHandler)
-
-    super.disconnectedCallback()
-
-    this.closeScene()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('processTemplate')) {
-      this.closeScene()
-
-      if (this.processTemplate && this.processTemplate.id) {
-        this.initScene()
-      }
-    }
-  }
-
-  initScene() {
-    if (!this.processTemplate || !this.processTemplate.id) return
-
-    this._scene = create({
-      model: {
-        ...this.processTemplate.model
-      },
-      mode: SCENE_MODE.VIEW
-    })
-
-    this.setupScene({ id: this.processTemplate.id, scene: this._scene })
-  }
-
-  closeScene() {
-    if (this._scene) {
-      this._scene.target = null
-      this._scene.release && this._scene.release()
-
-      this._scene = null
-    }
-  }
-
-  releaseScene() {
-    this.closeScene()
-  }
-
-  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._scene.fit(this._scene.fitMode)
-    this._scene.target = this._target
-  }
-
-  /* event handlers */
-  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)
-    }
-  }
-}