@operato/process 1.1.1

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

@@ -0,0 +1,427 @@
+import { __decorate } from "tslib";
+import '@operato/popup/ox-popup.js';
+import '@operato/data-grist';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+import { createProcess, fetchProcessList } from './graphql/process';
+import { fetchFavoriteProcessList } from './graphql/favorite-process';
+import { fetchProcessGroupList } from './graphql/process-group';
+let ProcessList = class ProcessList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.creatable = false;
+        this.mode = 'CARD';
+        this.groups = [];
+        this.favorites = [];
+        this._showSpinner = false;
+    }
+    render() {
+        const mode = this.mode || 'CARD';
+        return html `
+      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <mwc-icon>search</mwc-icon>
+            <input type="text" />
+
+            <select
+              @change=${(e) => {
+            this.groupId = e.currentTarget.value;
+            this.requestUpdate();
+        }}
+            >
+              <option value="">*</option>
+              ${this.groups.map(group => html ` <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option> `)}
+            </select>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+
+          ${this.creatable
+            ? html `
+                <div id="add">
+                  <button><mwc-icon @click=${() => this.onCreateProcess()}>add</mwc-icon></button>
+                </div>
+              `
+            : undefined}
+        </div>
+      </ox-grist>
+
+      <oops-spinner ?show=${this._showSpinner}></oops-spinner>
+    `;
+    }
+    async fetchHandler({ page, limit, sorters = [] }) {
+        this._showSpinner = true;
+        const { items: records, total } = await this.getProcesses({ page, limit, sorters });
+        this._showSpinner = false;
+        return {
+            total,
+            records
+        };
+    }
+    get gristConfig() {
+        return {
+            list: {
+                thumbnail: function (record, rowIndex) {
+                    return html ` <img src=${record.thumbnail} style="width: 100%; height: 100%;" /> `;
+                },
+                fields: ['name', 'description'],
+                details: ['updatedAt']
+            },
+            columns: [
+                {
+                    type: 'gutter',
+                    gutterName: 'dirty'
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'sequence'
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'star_border',
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => { }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'drive_file_rename_outline',
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => { }
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'id',
+                    hidden: true
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: 'name',
+                    record: {
+                        editable: true,
+                        align: 'left'
+                    },
+                    width: 200,
+                    sortable: true
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: 'description',
+                    record: {
+                        editable: true,
+                        align: 'left'
+                    },
+                    width: 200,
+                    handlers: {
+                        dblclick: (columns, data, column, record, rowIndex) => {
+                            alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`);
+                        }
+                    }
+                },
+                {
+                    type: 'boolean',
+                    name: 'active',
+                    header: 'active',
+                    record: {
+                        editable: true
+                    },
+                    sortable: true,
+                    width: 60
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: 'updated at',
+                    record: {
+                        editable: true
+                    },
+                    sortable: true,
+                    width: 180
+                },
+                {
+                    type: 'datetime',
+                    name: 'createdAt',
+                    header: 'created at',
+                    record: {
+                        editable: true
+                    },
+                    sortable: true,
+                    width: 180
+                }
+            ],
+            rows: {
+                selectable: {
+                    multiple: true
+                },
+                handlers: {},
+                classifier: function (record, rowIndex) { }
+            },
+            sorters: [
+                {
+                    name: 'name',
+                    desc: false
+                }
+            ],
+            pagination: {
+                pages: [20, 30, 50, 100, 200]
+            }
+        };
+    }
+    async refresh() {
+        this.groups = (await fetchProcessGroupList()).processGroups.items;
+        if (this.groups) {
+            await this.refreshProcesses();
+        }
+    }
+    async getProcesses({ page = 1, limit = 30, sorters = [] } = {}) {
+        if (this.groupId && this.groupId == 'favor')
+            return await this.getFavoriteProcesses({
+                page,
+                limit
+            });
+        var listParam = {
+            filters: this.groupId
+                ? [
+                    {
+                        name: 'groupId',
+                        operator: 'eq',
+                        value: this.groupId
+                    }
+                ]
+                : [],
+            sortings: sorters,
+            pagination: {
+                page,
+                limit
+            }
+        };
+        return (await fetchProcessList(listParam)).processes;
+    }
+    async getFavoriteProcesses({ page = 1, limit = 30 } = {}) {
+        var listParam = {
+            pagination: {
+                page,
+                limit
+            }
+        };
+        return (await fetchFavoriteProcessList(listParam)).favoriteProcesses;
+    }
+    async refreshProcesses() {
+        if (!this.groups) {
+            await this.refresh();
+            return;
+        }
+        this.grist.fetch();
+    }
+    async onCreateProcess() {
+        /*
+         * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var template = html `
+      <process-creation-popup
+        .defaultGroup=${this.groupId}
+        .groups=${this.groups}
+        @create-process=${async (e) => {
+            try {
+                var { name, description, groupId } = e.detail;
+                var process = {
+                    name,
+                    description,
+                    groupId,
+                    model: {
+                        width: 1200,
+                        height: 800
+                    }
+                };
+                const { createProcess: created } = await createProcess(process);
+                // this.popup && this.popup.close()
+                // await sleep(100)
+                this.notify('info', 'new process created');
+            }
+            catch (ex) {
+                console.error(ex);
+                this.notify('error', ex, ex);
+            }
+        }}
+      ></process-creation-popup>
+    `;
+        OxPopup.open({
+            template,
+            parent: this.renderRoot
+        });
+        requestAnimationFrame(() => {
+            dispatchEvent(new Event('resize'));
+        });
+    }
+    notify(level, message, ex) {
+        document.dispatchEvent(new CustomEvent('notify', {
+            detail: {
+                level,
+                message,
+                ex
+            }
+        }));
+    }
+};
+ProcessList.styles = css `
+    :host {
+      display: flex;
+
+      width: 100%;
+
+      --grid-record-emphasized-background-color: red;
+      --grid-record-emphasized-color: yellow;
+    }
+
+    ox-grist {
+      flex: 1;
+      overflow-y: auto;
+
+      --grid-record-emphasized-background-color: red;
+      --grid-record-emphasized-color: yellow;
+    }
+
+    #headroom {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      border-top: 2px solid rgba(0, 0, 0, 0.2);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+    }
+
+    #filters {
+      flex: 1;
+      --mdc-icon-size: 20px;
+    }
+    #mode {
+      width: 100px;
+    }
+    #add {
+      width: 50px;
+      text-align: right;
+    }
+
+    #modes > * {
+      padding: var(--padding-narrow);
+      font-size: 1em;
+      opacity: 0.5;
+      color: var(--primary-text-color);
+      cursor: pointer;
+    }
+
+    #modes > mwc-icon[active] {
+      border-radius: 9px;
+      background-color: rgba(var(--primary-color-rgb), 0.05);
+      opacity: 1;
+      color: var(--secondary-text-color);
+      cursor: default;
+    }
+    #modes > mwc-icon:hover {
+      opacity: 1;
+      color: var(--secondary-text-color);
+    }
+
+    #add button {
+      background-color: var(--primary-color);
+      border: 0;
+      border-radius: 50%;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+      cursor: pointer;
+    }
+    #add button:hover {
+      background-color: var(--focus-background-color);
+      box-shadow: var(--box-shadow);
+    }
+    #add button mwc-icon {
+      font-size: 2em;
+      color: var(--theme-white-color);
+    }
+
+    #filters {
+      position: relative;
+    }
+    #filters [type='text'] {
+      background-color: transparent;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
+      font-size: var(--fontsize-large);
+    }
+    #filters [type='text']:focus {
+      outline: none;
+    }
+    #filters mwc-icon {
+      position: absolute;
+      top: 3px;
+      color: var(--secondary-color);
+    }
+    #filters * {
+      margin-right: var(--margin-default);
+    }
+
+    oops-spinner {
+      display: none;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    oops-spinner[show] {
+      display: block;
+    }
+
+    @media only screen and (max-width: 460px) {
+      #modes {
+        display: none;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Boolean })
+], ProcessList.prototype, "creatable", void 0);
+__decorate([
+    property({ type: Object })
+], ProcessList.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], ProcessList.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], ProcessList.prototype, "mode", void 0);
+__decorate([
+    property({ type: String })
+], ProcessList.prototype, "groupId", void 0);
+__decorate([
+    property({ type: Array })
+], ProcessList.prototype, "groups", void 0);
+__decorate([
+    property({ type: Array })
+], ProcessList.prototype, "favorites", void 0);
+__decorate([
+    state()
+], ProcessList.prototype, "_showSpinner", void 0);
+__decorate([
+    query('ox-grist')
+], ProcessList.prototype, "grist", void 0);
+ProcessList = __decorate([
+    customElement('ox-process-list')
+], ProcessList);
+//# sourceMappingURL=ox-process-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-process-list.js","sourceRoot":"","sources":["../../src/ox-process-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@operato/data-grist'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ColumnConfig, DataGrist, GristData, GristRecord, SortersConfig } from '@operato/data-grist'\nimport { OxPopup } from '@operato/popup'\n\nimport { createProcess, fetchProcessList } from './graphql/process'\nimport { fetchFavoriteProcessList } from './graphql/favorite-process'\nimport { fetchProcessGroupList } from './graphql/process-group'\nimport { Process } from './types'\n\n@customElement('ox-process-list')\nclass ProcessList extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n\n      width: 100%;\n\n      --grid-record-emphasized-background-color: red;\n      --grid-record-emphasized-color: yellow;\n    }\n\n    ox-grist {\n      flex: 1;\n      overflow-y: auto;\n\n      --grid-record-emphasized-background-color: red;\n      --grid-record-emphasized-color: yellow;\n    }\n\n    #headroom {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--padding-default) var(--padding-wide);\n      border-top: 2px solid rgba(0, 0, 0, 0.2);\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n    }\n\n    #filters {\n      flex: 1;\n      --mdc-icon-size: 20px;\n    }\n    #mode {\n      width: 100px;\n    }\n    #add {\n      width: 50px;\n      text-align: right;\n    }\n\n    #modes > * {\n      padding: var(--padding-narrow);\n      font-size: 1em;\n      opacity: 0.5;\n      color: var(--primary-text-color);\n      cursor: pointer;\n    }\n\n    #modes > mwc-icon[active] {\n      border-radius: 9px;\n      background-color: rgba(var(--primary-color-rgb), 0.05);\n      opacity: 1;\n      color: var(--secondary-text-color);\n      cursor: default;\n    }\n    #modes > mwc-icon:hover {\n      opacity: 1;\n      color: var(--secondary-text-color);\n    }\n\n    #add button {\n      background-color: var(--primary-color);\n      border: 0;\n      border-radius: 50%;\n      padding: 5px;\n      width: 36px;\n      height: 36px;\n      cursor: pointer;\n    }\n    #add button:hover {\n      background-color: var(--focus-background-color);\n      box-shadow: var(--box-shadow);\n    }\n    #add button mwc-icon {\n      font-size: 2em;\n      color: var(--theme-white-color);\n    }\n\n    #filters {\n      position: relative;\n    }\n    #filters [type='text'] {\n      background-color: transparent;\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;\n      font-size: var(--fontsize-large);\n    }\n    #filters [type='text']:focus {\n      outline: none;\n    }\n    #filters mwc-icon {\n      position: absolute;\n      top: 3px;\n      color: var(--secondary-color);\n    }\n    #filters * {\n      margin-right: var(--margin-default);\n    }\n\n    oops-spinner {\n      display: none;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    oops-spinner[show] {\n      display: block;\n    }\n\n    @media only screen and (max-width: 460px) {\n      #modes {\n        display: none;\n      }\n    }\n  `\n\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: any\n  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'\n  @property({ type: String }) groupId?: string\n  @property({ type: Array }) groups: any[] = []\n  @property({ type: Array }) favorites: any[] = []\n\n  @state() _showSpinner: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    const mode = this.mode || 'CARD'\n\n    return html`\n      <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <mwc-icon>search</mwc-icon>\n            <input type=\"text\" />\n\n            <select\n              @change=${(e: Event) => {\n                this.groupId = (e.currentTarget as HTMLInputElement).value\n                this.requestUpdate()\n              }}\n            >\n              <option value=\"\">*</option>\n              ${this.groups.map(\n                group =>\n                  html` <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option> `\n              )}\n            </select>\n          </div>\n\n          <div id=\"modes\">\n            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>\n          </div>\n\n          ${this.creatable\n            ? html`\n                <div id=\"add\">\n                  <button><mwc-icon @click=${() => this.onCreateProcess()}>add</mwc-icon></button>\n                </div>\n              `\n            : undefined}\n        </div>\n      </ox-grist>\n\n      <oops-spinner ?show=${this._showSpinner}></oops-spinner>\n    `\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {\n    this._showSpinner = true\n\n    const { items: records, total } = await this.getProcesses({ page, limit, sorters })\n\n    this._showSpinner = false\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: function (record: GristRecord, rowIndex: number) {\n          return html` <img src=${record.thumbnail} style=\"width: 100%; height: 100%;\" /> `\n        },\n        fields: ['name', 'description'],\n        details: ['updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'star_border',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {}\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'drive_file_rename_outline',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {}\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          handlers: {\n            dblclick: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {\n              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)\n            }\n          }\n        },\n        {\n          type: 'boolean',\n          name: 'active',\n          header: 'active',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 60\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: 'updated at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: 'created at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        },\n        handlers: {},\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async refresh() {\n    this.groups = (await fetchProcessGroupList()).processGroups.items\n\n    if (this.groups) {\n      await this.refreshProcesses()\n    }\n  }\n\n  async getProcesses({\n    page = 1,\n    limit = 30,\n    sorters = []\n  }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {\n    if (this.groupId && this.groupId == 'favor')\n      return await this.getFavoriteProcesses({\n        page,\n        limit\n      })\n\n    var listParam = {\n      filters: this.groupId\n        ? [\n            {\n              name: 'groupId',\n              operator: 'eq',\n              value: this.groupId\n            }\n          ]\n        : [],\n      sortings: sorters,\n      pagination: {\n        page,\n        limit\n      }\n    }\n\n    return (await fetchProcessList(listParam)).processes\n  }\n\n  async getFavoriteProcesses({ page = 1, limit = 30 } = {}) {\n    var listParam = {\n      pagination: {\n        page,\n        limit\n      }\n    }\n\n    return (await fetchFavoriteProcessList(listParam)).favoriteProcesses\n  }\n\n  async refreshProcesses() {\n    if (!this.groups) {\n      await this.refresh()\n      return\n    }\n\n    this.grist.fetch()\n  }\n\n  async onCreateProcess() {\n    /*\n     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var template = html`\n      <process-creation-popup\n        .defaultGroup=${this.groupId}\n        .groups=${this.groups}\n        @create-process=${async (e: CustomEvent) => {\n          try {\n            var { name, description, groupId } = e.detail\n            var process: Process = {\n              name,\n              description,\n              groupId,\n              model: {\n                width: 1200,\n                height: 800\n              }\n            }\n\n            const { createProcess: created } = await createProcess(process)\n\n            // this.popup && this.popup.close()\n\n            // await sleep(100)\n\n            this.notify('info', 'new process created')\n          } catch (ex: Error | any) {\n            console.error(ex)\n            this.notify('error', ex, ex)\n          }\n        }}\n      ></process-creation-popup>\n    `\n\n    OxPopup.open({\n      template,\n      parent: this.renderRoot as Element\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  notify(level: 'warn' | 'error' | 'info', message: any, ex?: Error) {\n    document.dispatchEvent(\n      new CustomEvent('notify', {\n        detail: {\n          level,\n          message,\n          ex\n        }\n      })\n    )\n  }\n}\n"]}

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

@@ -0,0 +1,58 @@
+import '@material/mwc-fab';
+import '@hatiolab/things-scene';
+import './ox-process-viewer';
+import { LitElement, PropertyValues } from 'lit';
+import { Scene, SCENE_MODE } from '@hatiolab/things-scene';
+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';
+declare const OxProcessModeller_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class OxProcessModeller extends OxProcessModeller_base {
+    static styles: import("lit").CSSResult[];
+    static registerGroup(group: ComponentGroup): void;
+    static registerTemplate(templates: ComponentTemplate[]): void;
+    static get groups(): ComponentGroup[];
+    static getGroup(name: string): ComponentGroup | undefined;
+    processName: string;
+    model: any;
+    baseUrl: string;
+    selected: any[];
+    mode: SCENE_MODE;
+    provider: any;
+    hideProperty: boolean;
+    overlay: string;
+    scene?: Scene;
+    componentGroupList: any[];
+    fonts: any[];
+    propertyEditor: any[];
+    private editToolbar;
+    private group;
+    private shortcutHandler?;
+    constructor();
+    static get scopedElements(): {
+        'process-edit-toolbar': typeof EditToolbar;
+        'process-property-sidebar': typeof PropertySidebar;
+        'process-component-toolbar': typeof ComponentToolbar;
+        'scene-viewer': typeof SceneViewer;
+        'scene-layer': typeof SceneLayer;
+        'scene-property': typeof SceneProperty;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    close(): void;
+    onShortcut(e: KeyboardEvent): void;
+    preview(): void;
+    downloadModel(): void;
+    renderBrandingZone(): import("lit-html").TemplateResult<1>;
+    onTapSave(): void;
+    bindShortcutEvent(): void;
+    unbindShortcutEvent(): void;
+    onContextMenu(): void;
+}
+export {};