@operato/process 1.1.1

package/dist/src/ox-process-modeller.js

@@ -0,0 +1,396 @@
+import { __decorate } from "tslib";
+import '@material/mwc-fab';
+import '@hatiolab/things-scene';
+import './ox-process-viewer';
+import { saveAs } from 'file-saver';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { 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 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 = [];
+let OxProcessModeller = class OxProcessModeller extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super();
+        this.processName = '';
+        this.model = null;
+        this.baseUrl = '';
+        this.selected = [];
+        this.mode = SCENE_MODE.EDIT;
+        this.provider = null;
+        this.hideProperty = false;
+        this.overlay = '';
+        this.componentGroupList = [];
+        this.fonts = [];
+        this.propertyEditor = [];
+        this.group = '';
+        document.addEventListener('get-all-scene-component-ids', (e) => {
+            var { component, callback } = e.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 registerGroup(group) {
+        var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name);
+        if (found) {
+            found = {
+                ...found,
+                ...group
+            };
+        }
+        else {
+            Registry.push(group);
+        }
+    }
+    static registerTemplate(templates) {
+        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() {
+        return Registry;
+    }
+    static getGroup(name) {
+        return Registry.find(group => group.name === name);
+    }
+    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) => (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) => {
+            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) => {
+            this.scene = e.detail.value;
+        }}
+          .model=${this.model}
+          .selected=${this.selected}
+          @selected-changed=${(e) => {
+            this.selected = e.detail.value;
+        }}
+          .mode=${this.mode}
+          @mode-changed=${(e) => {
+            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() {
+        super.connectedCallback();
+        this.bindShortcutEvent();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unbindShortcutEvent();
+    }
+    updated(changes) {
+        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) {
+        if (MACOS)
+            var ctrlKey = e.metaKey;
+        else
+            var ctrlKey = e.ctrlKey;
+        switch (e.code) {
+            case 'KeyS':
+                if (ctrlKey) {
+                    this.onTapSave();
+                    e.preventDefault();
+                }
+                break;
+        }
+    }
+    preview() {
+        var _a;
+        const process = {
+            id: 'preview',
+            model: ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.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
+        });
+        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) => {
+            const target = e.composedPath()[0];
+            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() { }
+};
+OxProcessModeller.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;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxProcessModeller.prototype, "processName", void 0);
+__decorate([
+    property({ type: Object })
+], OxProcessModeller.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], OxProcessModeller.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: Array })
+], OxProcessModeller.prototype, "selected", void 0);
+__decorate([
+    property({ type: Number })
+], OxProcessModeller.prototype, "mode", void 0);
+__decorate([
+    property({ type: Object })
+], OxProcessModeller.prototype, "provider", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxProcessModeller.prototype, "hideProperty", void 0);
+__decorate([
+    property({ type: String })
+], OxProcessModeller.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Object })
+], OxProcessModeller.prototype, "scene", void 0);
+__decorate([
+    property({ type: Array })
+], OxProcessModeller.prototype, "componentGroupList", void 0);
+__decorate([
+    property({ type: Array })
+], OxProcessModeller.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Array })
+], OxProcessModeller.prototype, "propertyEditor", void 0);
+__decorate([
+    query('process-edit-toolbar')
+], OxProcessModeller.prototype, "editToolbar", void 0);
+OxProcessModeller = __decorate([
+    customElement('ox-process-modeller')
+], OxProcessModeller);
+export { OxProcessModeller };
+//# sourceMappingURL=ox-process-modeller.js.map

package/dist/src/ox-process-modeller.js.map

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

package/dist/src/ox-process-viewer.d.ts

@@ -0,0 +1,51 @@
+import '@material/mwc-fab';
+import '@material/mwc-icon';
+import { LitElement, PropertyValues } from 'lit';
+import { Component, ReferenceProvider } from '@hatiolab/things-scene';
+export declare class OxProcessViewer extends LitElement {
+    static styles: import("lit").CSSResult;
+    baseUrl: string;
+    process: any;
+    provider: ReferenceProvider | null;
+    data: any;
+    hideFullscreen: boolean;
+    hideNavigation: boolean;
+    _scene: any;
+    _forward: Array<any>;
+    _backward: Array<any>;
+    _oldtarget?: HTMLElement;
+    _fade_animations?: Array<Animation>;
+    _target: HTMLElement;
+    _prev: HTMLElement;
+    _next: HTMLElement;
+    _fullscreen: HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    initSceneAsync(): Promise<void>;
+    initScene(): void;
+    closeScene(): void;
+    releaseScene(): void;
+    setupScene(scene: any): void;
+    showScene(processId: string, bindingData?: any): Promise<void>;
+    bindSceneEvents(): void;
+    unbindSceneEvents(scene: any): void;
+    transientShowButtons(stop?: boolean): void;
+    onTapNext(): void;
+    onTapPrev(): void;
+    onTapFullscreen(): void;
+    onLinkGoto(targetProcessId: string, options: any, fromComponent: any): void;
+    onLinkOpen(url: string, value: any, fromComponent: Component): void;
+    onLinkMove(url: string, value: any, fromComponent: Component): void;
+    onRoutePage(page: string): void;
+    onStartScenario(scenario: string, value: string | number | object, component: Component): Promise<void>;
+    onRunScenario(scenario: string, value: string | number | object, component: Component): Promise<void>;
+    getSceneData(): any;
+    getSceneImageData(base64?: boolean): Promise<{
+        width: any;
+        height: any;
+        data: string | Uint8ClampedArray;
+    } | undefined>;
+    printTrick(image: string): Promise<void>;
+}