@operato/process 1.1.1

package/src/ox-process-modeller.ts

@@ -0,0 +1,396 @@
+import '@material/mwc-fab'
+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 { ComponentGroup, ComponentTemplate } from './types'
+
+import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'
+import { EditToolbar } from './modeller/edit-toolbar'
+import { PropertySidebar } from './modeller/property-sidebar/property-sidebar'
+import SceneViewer from './modeller/scene-viewer/scene-viewer'
+import SceneLayer from './modeller/scene-viewer/scene-layer'
+import SceneProperty from './modeller/scene-viewer/scene-property'
+
+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: grid;
+
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas: 'toolbar toolbar toolbar' 'palletbar scene propertybar';
+        grid-gap: 0;
+
+        height: 100%;
+        overflow: hidden;
+      }
+
+      process-edit-toolbar {
+        grid-area: toolbar;
+      }
+
+      process-component-toolbar {
+        grid-area: palletbar;
+      }
+
+      process-property-sidebar {
+        grid-area: propertybar;
+        overflow: hidden;
+      }
+
+      #scene-wrap {
+        grid-area: scene;
+        position: relative;
+
+        display: flex;
+        flex-direction: row;
+      }
+
+      scene-viewer {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+      }
+
+      mwc-fab {
+        position: absolute;
+        right: 15px;
+        bottom: 15px;
+      }
+
+      ox-popup {
+        width: 90%;
+        height: 90%;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        background: var(--secondary-color, 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 group = Registry.find(group => group.name == template.group)
+
+        if (!group) {
+          console.warn('Invalid group', group, template)
+          return
+        }
+
+        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[] = []
+
+  @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(id => !!id).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,
+      'scene-viewer': SceneViewer,
+      'scene-layer': SceneLayer,
+      'scene-property': SceneProperty
+    }
+  }
+
+  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>
+
+      <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">
+        <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"
+        >
+          <scene-layer type="selection-layer"></scene-layer>
+          <scene-layer type="modeling-layer"></scene-layer>
+          <scene-layer type="add-layer"> </scene-layer>
+          <scene-layer type="guide-layer">
+            <scene-property name="ruler" value="disabled"></scene-property>
+          </scene-layer>
+          <scene-layer type="shift-layer">
+            <scene-property name="text" value="${this.overlay}"></scene-property>
+            <scene-property name="alpha" value="0.3"></scene-property>
+            <scene-property name="fontFamily" value="arial"></scene-property>
+            <scene-property name="fontSize" value="30" type="number"></scene-property>
+            <scene-property name="fontColor" value="navy"></scene-property>
+            <scene-property name="textBaseline" value="top"></scene-property>
+            <scene-property name="textAlign" value="left"></scene-property>
+            <scene-property name="paddingTop" value="50" type="number"></scene-property>
+            <scene-property name="paddingLeft" value="50" type="number"></scene-property>
+          </scene-layer>
+          <scene-layer type="decotag-layer"></scene-layer>
+          <scene-handler type="text-editor"></scene-handler>
+          <scene-handler type="move-handler"></scene-handler>
+        </scene-viewer>
+
+        <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
+      </div>
+
+      <process-property-sidebar
+        .scene=${this.scene}
+        .selected=${this.selected}
+        .collapsed=${this.hideProperty}
+        .fonts=${this.fonts}
+        .propertyEditor=${this.propertyEditor}
+      >
+      </process-property-sidebar>
+    `
+  }
+
+  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 .provider=${this.provider} .process=${process}></ox-process-viewer> `,
+      parent: this.renderRoot as Element
+    })
+
+    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
+    }
+  }
+
+  onContextMenu() {}
+}