@things-factory/board-ui 6.1.23 → 6.1.27

package/dist-client/data-grist/board-editor.js

@@ -0,0 +1,108 @@
+import { __decorate, __metadata } from "tslib";
+import '@operato/board/ox-board-selector.js';
+import './board-renderer';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxGristEditor } from '@operato/data-grist';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+let BoardEditor = class BoardEditor extends OxGristEditor {
+    render() {
+        var { boardViewerPage } = this.column.record.options || {};
+        return html ` <board-renderer .value=${this.value} .boardViewerPage=${boardViewerPage}></board-renderer> `;
+    }
+    async firstUpdated() {
+        this.value = this.record[this.column.name];
+        await this.updateComplete;
+        this.renderRoot.addEventListener('click', e => {
+            e.stopPropagation();
+            this.openSelector();
+        });
+        this.openSelector();
+    }
+    openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var value = this.value || {};
+        var template = html `
+      <ox-board-selector
+        .creatable=${true}
+        .value=${this.value}
+        @board-selected=${async (e) => {
+            var board = e.detail.board;
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: this.column.type == 'board' ? board : board.id || '',
+                    record: this.record,
+                    column: this.column,
+                    row: this.row
+                }
+            }));
+            this.popup && this.popup.close();
+        }}
+      ></ox-board-selector>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.select board')
+        });
+    }
+};
+BoardEditor.styles = css `
+    :host {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+
+      box-sizing: border-box;
+
+      width: 100%;
+      height: 100%;
+
+      border: 0;
+      background-color: transparent;
+
+      font: var(--grist-object-editor-font);
+      color: var(--grist-object-editor-color);
+
+      justify-content: inherit;
+    }
+
+    board-renderer {
+      display: flex;
+      flex: auto;
+
+      justify-content: inherit;
+    }
+  `;
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardEditor.prototype, "column", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardEditor.prototype, "record", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], BoardEditor.prototype, "row", void 0);
+BoardEditor = __decorate([
+    customElement('board-editor')
+], BoardEditor);
+export { BoardEditor };
+//# sourceMappingURL=board-editor.js.map

package/dist-client/data-grist/board-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-editor.js","sourceRoot":"","sources":["../../client/data-grist/board-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-selector.js'\nimport './board-renderer'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('board-editor')\nexport class BoardEditor extends OxGristEditor {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row nowrap;\n      align-items: center;\n\n      box-sizing: border-box;\n\n      width: 100%;\n      height: 100%;\n\n      border: 0;\n      background-color: transparent;\n\n      font: var(--grist-object-editor-font);\n      color: var(--grist-object-editor-color);\n\n      justify-content: inherit;\n    }\n\n    board-renderer {\n      display: flex;\n      flex: auto;\n\n      justify-content: inherit;\n    }\n  `\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) column: any\n  @property({ type: Object }) record: any\n  @property({ type: Number }) row?: number\n\n  popup\n\n  render() {\n    var { boardViewerPage } = this.column.record.options || {}\n    return html` <board-renderer .value=${this.value} .boardViewerPage=${boardViewerPage}></board-renderer> `\n  }\n\n  async firstUpdated() {\n    this.value = this.record[this.column.name]\n\n    await this.updateComplete\n\n    this.renderRoot.addEventListener('click', e => {\n      e.stopPropagation()\n\n      this.openSelector()\n    })\n\n    this.openSelector()\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var value = this.value || {}\n\n    var template = html`\n      <ox-board-selector\n        .creatable=${true}\n        .value=${this.value}\n        @board-selected=${async e => {\n          var board = e.detail.board\n\n          this.dispatchEvent(\n            new CustomEvent('field-change', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                before: this.value,\n                after: this.column.type == 'board' ? board : board.id || '',\n                record: this.record,\n                column: this.column,\n                row: this.row\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></ox-board-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select board')\n    })\n  }\n}\n"]}

package/dist-client/data-grist/board-renderer.d.ts

@@ -0,0 +1,2 @@
+import '@material/mwc-icon';
+export declare const BoardRenderer: (value: any, column: any, record: any) => import("lit-html").TemplateResult<1>;

package/dist-client/data-grist/board-renderer.js

@@ -0,0 +1,133 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { navigate } from '@operato/shell';
+import { client, gqlContext } from '@operato/graphql';
+const FETCH_BOARD_GQL = id => {
+    return gql `
+  {
+    board(id:"${id}") {
+      id
+      name
+      description
+      thumbnail
+    }
+  }
+`;
+};
+let BoardRendererElement = class BoardRendererElement extends LitElement {
+    async updated(changes) {
+        if (changes.has('value')) {
+            if (typeof this.value == 'string' && this.value) {
+                /* fetchBoard..., */
+                try {
+                    var response = await client.query({
+                        query: FETCH_BOARD_GQL(this.value),
+                        context: gqlContext()
+                    });
+                    this._value = (response && response.data && response.data.board) || {};
+                }
+                catch (e) {
+                    console.error(e);
+                }
+            }
+            else {
+                this._value = this.value || {};
+            }
+        }
+    }
+    render() {
+        var { id, name = '', thumbnail = 'image/gif' } = this._value || {};
+        return id
+            ? html `
+          <span>${name}</span>
+          <img src=${thumbnail} alt="no thumbnail!" />
+          <mwc-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</mwc-icon>
+          <mwc-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</mwc-icon>
+        `
+            : html ` choose board.. `;
+    }
+    onClickViewer(e, id) {
+        e.preventDefault();
+        e.stopPropagation();
+        var boardViewerPage = this.boardViewerPage || 'board-viewer';
+        navigate(`${boardViewerPage}/${id}${window.location.search}`);
+    }
+    onClickModeler(e, id) {
+        e.preventDefault();
+        e.stopPropagation();
+        navigate(`board-modeller/${id}${window.location.search}`);
+    }
+};
+BoardRendererElement.styles = [
+    css `
+      :host {
+        display: block;
+        position: relative;
+
+        max-width: var(--board-renderer-max-width);
+        border: var(--board-renderer-border);
+
+        width: 100%;
+      }
+      span {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        text-indent: 5px;
+        color: #fff;
+
+        font: var(--board-renderer-name-font);
+        background-color: var(--board-renderer-name-background-color);
+      }
+      img {
+        object-fit: contain;
+        max-width: 100%;
+        max-height: 100%;
+      }
+      mwc-icon {
+        position: absolute;
+        top: 0;
+        text-align: center;
+        color: #fff;
+
+        width: var(--board-renderer-icon-size);
+        height: var(--board-renderer-icon-size);
+        font: var(--board-renderer-font);
+      }
+      mwc-icon[edit] {
+        right: 0;
+
+        border-bottom-left-radius: var(--board-renderer-icon-border-radius);
+        background-color: var(--board-renderer-icon-edit-background-color);
+      }
+      mwc-icon[view] {
+        left: 0;
+
+        border-bottom-right-radius: var(--board-renderer-icon-border-radius);
+        background-color: var(--board-renderer-icon-view-background-color);
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardRendererElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardRendererElement.prototype, "boardViewerPage", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardRendererElement.prototype, "_value", void 0);
+BoardRendererElement = __decorate([
+    customElement('board-renderer')
+], BoardRendererElement);
+export const BoardRenderer = (value, column, record) => {
+    var { boardViewerPage = '' } = column.record.options || {};
+    return html ` <board-renderer .value=${value} .boardViewerPage=${boardViewerPage}></board-renderer> `;
+};
+//# sourceMappingURL=board-renderer.js.map

package/dist-client/data-grist/board-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-renderer.js","sourceRoot":"","sources":["../../client/data-grist/board-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client, gqlContext } from '@operato/graphql'\n\nconst FETCH_BOARD_GQL = id => {\n  return gql`\n  {\n    board(id:\"${id}\") {\n      id\n      name\n      description\n      thumbnail\n    }\n  }\n`\n}\n\n@customElement('board-renderer')\nclass BoardRendererElement extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n\n        max-width: var(--board-renderer-max-width);\n        border: var(--board-renderer-border);\n\n        width: 100%;\n      }\n      span {\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        text-indent: 5px;\n        color: #fff;\n\n        font: var(--board-renderer-name-font);\n        background-color: var(--board-renderer-name-background-color);\n      }\n      img {\n        object-fit: contain;\n        max-width: 100%;\n        max-height: 100%;\n      }\n      mwc-icon {\n        position: absolute;\n        top: 0;\n        text-align: center;\n        color: #fff;\n\n        width: var(--board-renderer-icon-size);\n        height: var(--board-renderer-icon-size);\n        font: var(--board-renderer-font);\n      }\n      mwc-icon[edit] {\n        right: 0;\n\n        border-bottom-left-radius: var(--board-renderer-icon-border-radius);\n        background-color: var(--board-renderer-icon-edit-background-color);\n      }\n      mwc-icon[view] {\n        left: 0;\n\n        border-bottom-right-radius: var(--board-renderer-icon-border-radius);\n        background-color: var(--board-renderer-icon-view-background-color);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) boardViewerPage?: string\n  @property({ type: Object }) _value: any\n\n  async updated(changes) {\n    if (changes.has('value')) {\n      if (typeof this.value == 'string' && this.value) {\n        /* fetchBoard..., */\n        try {\n          var response = await client.query({\n            query: FETCH_BOARD_GQL(this.value),\n            context: gqlContext()\n          })\n\n          this._value = (response && response.data && response.data.board) || {}\n        } catch (e) {\n          console.error(e)\n        }\n      } else {\n        this._value = this.value || {}\n      }\n    }\n  }\n\n  render() {\n    var { id, name = '', thumbnail = 'image/gif' } = this._value || {}\n\n    return id\n      ? html`\n          <span>${name}</span>\n          <img src=${thumbnail} alt=\"no thumbnail!\" />\n          <mwc-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</mwc-icon>\n          <mwc-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</mwc-icon>\n        `\n      : html` choose board.. `\n  }\n\n  onClickViewer(e, id) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    var boardViewerPage = this.boardViewerPage || 'board-viewer'\n\n    navigate(`${boardViewerPage}/${id}${window.location.search}`)\n  }\n\n  onClickModeler(e, id) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    navigate(`board-modeller/${id}${window.location.search}`)\n  }\n}\n\nexport const BoardRenderer = (value, column, record) => {\n  var { boardViewerPage = '' } = column.record.options || {}\n\n  return html` <board-renderer .value=${value} .boardViewerPage=${boardViewerPage}></board-renderer> `\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1,5 @@
+export * from './board-provider';
+export * from './pages/board-viewer-page';
+export * from './pages/board-player-page';
+export * from './pages/board-modeller-page';
+export * from './setting-let/board-view-setting-let';

package/dist-client/index.js

@@ -0,0 +1,6 @@
+export * from './board-provider';
+export * from './pages/board-viewer-page';
+export * from './pages/board-player-page';
+export * from './pages/board-modeller-page';
+export * from './setting-let/board-view-setting-let';
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAEhC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAE3C,cAAc,sCAAsC,CAAA","sourcesContent":["export * from './board-provider'\n\nexport * from './pages/board-viewer-page'\nexport * from './pages/board-player-page'\nexport * from './pages/board-modeller-page'\n\nexport * from './setting-let/board-view-setting-let'\n"]}

package/dist-client/pages/board-modeller-page.d.ts

@@ -0,0 +1,48 @@
+import './things-scene-components.import';
+import '@operato/board/ox-board-modeller.js';
+import { BoardModeller } from '@operato/board/ox-board-modeller.js';
+import { PageView } from '@operato/shell';
+declare const BoardModellerPage_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof PageView;
+export declare class BoardModellerPage extends BoardModellerPage_base {
+    constructor();
+    static styles: import("lit").CSSResult[];
+    boardId?: string | null;
+    boardName?: string;
+    model: any;
+    baseUrl?: string;
+    selected: any;
+    mode?: number;
+    hideProperty?: boolean;
+    overlay?: string | null;
+    scene: any;
+    componentGroupList?: any;
+    fonts: any;
+    propertyEditor: any;
+    preparing?: boolean;
+    board: any;
+    modeller?: BoardModeller;
+    get context(): {
+        title: string | undefined;
+        help: string;
+        widebleed: boolean;
+    };
+    get oopsNote(): {
+        icon: string;
+        title: string;
+        description: string;
+    };
+    refresh(): Promise<void>;
+    updated(changes: any): void;
+    pageUpdated(changes: any, lifecycle: any): void;
+    stateChanged(state: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updateBoard(): Promise<void>;
+    saveBoard(): Promise<void>;
+}
+export {};

package/dist-client/pages/board-modeller-page.js

@@ -0,0 +1,284 @@
+import { __decorate, __metadata } from "tslib";
+import './things-scene-components.import';
+import '@operato/board/ox-board-modeller.js';
+import gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { BoardModeller } from '@operato/board/ox-board-modeller.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { PageView, store } from '@operato/shell';
+import { client, gqlContext } from '@operato/graphql';
+import { provider } from '../board-provider';
+import components from './things-scene-components-with-tools.import';
+const NOOP = () => { };
+let BoardModellerPage = class BoardModellerPage extends connect(store)(PageView) {
+    constructor() {
+        super();
+        components.forEach(({ templates = [], groups = [] }) => {
+            groups.forEach(group => BoardModeller.registerGroup(group));
+            BoardModeller.registerTemplate(templates);
+        });
+        /* 컴포넌트에서 정의된 에디터들을 MODELLER_EDITORS에 등록 */
+        var addedEditors = {};
+        for (let component in components) {
+            let { editors } = components[component];
+            editors &&
+                editors.forEach(editor => {
+                    let { type, element } = editor;
+                    addedEditors[type] = element;
+                });
+        }
+        OxPropertyEditor.register(addedEditors);
+        this.boardName = '';
+        this.model = null;
+        this.baseUrl = '';
+        this.selected = [];
+        this.mode = 1;
+        this.hideProperty = false;
+        this.overlay = null;
+        this.scene = null;
+        this.fonts = [];
+        this.board = null;
+        this.componentGroupList = BoardModeller.groups;
+    }
+    get context() {
+        return {
+            title: this.board ? this.boardName : this.preparing ? 'Fetching board...' : 'Board Not Found',
+            help: 'board-modeller/modeller',
+            widebleed: true
+        };
+    }
+    get oopsNote() {
+        return {
+            icon: 'color_lens',
+            title: 'EMPTY BOARD',
+            description: 'There are no board to be designed'
+        };
+    }
+    async refresh() {
+        if (!this.boardId) {
+            this.board = null;
+            this.model = null;
+            return;
+        }
+        try {
+            this.preparing = true;
+            this.updateContext();
+            var response = await client.query({
+                query: gql `
+          query FetchBoardById($id: String!) {
+            board(id: $id) {
+              id
+              name
+              model
+            }
+          }
+        `,
+                variables: { id: this.boardId },
+                context: gqlContext()
+            });
+            var board = response.data.board;
+            if (!board) {
+                this.board = null;
+                throw 'board not found';
+            }
+            this.board = Object.assign(Object.assign({}, board), { model: JSON.parse(board.model) });
+            this.boardName = this.board.name;
+            this.model = Object.assign({}, this.board.model);
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: ex,
+                    ex
+                }
+            }));
+        }
+        finally {
+            this.preparing = false;
+            this.updateContext();
+        }
+    }
+    updated(changes) {
+        if (changes.has('boardId')) {
+            this.refresh();
+        }
+    }
+    pageUpdated(changes, lifecycle) {
+        var _a;
+        if (this.active) {
+            this.boardId = lifecycle.resourceId;
+        }
+        else {
+            this.boardId = null;
+            this.model = null;
+            (_a = this.modeller) === null || _a === void 0 ? void 0 : _a.close();
+        }
+    }
+    stateChanged(state) {
+        this.baseUrl = state.route.rootPath;
+        this.fonts = state.font;
+    }
+    render() {
+        var oops = !this.preparing && !this.model && this.oopsNote;
+        return oops
+            ? html ` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
+            : html `
+          <ox-board-modeller
+            .mode=${this.mode}
+            @mode-changed=${e => {
+                this.mode = e.detail.value;
+            }}
+            .model=${this.model}
+            @model-changed=${e => {
+                this.model = e.detail.value;
+            }}
+            .scene=${this.scene}
+            @scene-changed=${e => {
+                this.scene = e.detail.value;
+            }}
+            .selected=${this.selected}
+            @selected-changed=${e => {
+                this.selected = e.detail.value;
+            }}
+            .baseUrl=${this.baseUrl}
+            .provider=${provider}
+            @save-model=${e => this.saveBoard()}
+            .componentGroupList=${this.componentGroupList}
+            .fonts=${this.fonts}
+            .hideProperty=${this.hideProperty}
+          >
+          </ox-board-modeller>
+        `;
+    }
+    async updateBoard() {
+        try {
+            this.preparing = true;
+            var { id, name, description, groupId } = this.board;
+            var model = JSON.stringify(this.scene.model);
+            await client.mutate({
+                mutation: gql `
+          mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
+            updateBoard(id: $id, patch: $patch) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    id,
+                    patch: { name, description, model, groupId }
+                },
+                context: gqlContext()
+            });
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'info',
+                    message: 'saved'
+                }
+            }));
+        }
+        catch (ex) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: ex,
+                    ex: ex
+                }
+            }));
+        }
+        finally {
+            this.preparing = false;
+        }
+        this.updateContext();
+    }
+    async saveBoard() {
+        await this.updateBoard();
+    }
+};
+BoardModellerPage.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+        position: relative;
+      }
+
+      board-modeller {
+        flex: 1;
+      }
+
+      oops-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "boardId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardModellerPage.prototype, "boardName", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "model", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardModellerPage.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "selected", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], BoardModellerPage.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardModellerPage.prototype, "hideProperty", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "scene", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "componentGroupList", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "propertyEditor", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], BoardModellerPage.prototype, "preparing", void 0);
+__decorate([
+    query('ox-board-modeller'),
+    __metadata("design:type", BoardModeller)
+], BoardModellerPage.prototype, "modeller", void 0);
+BoardModellerPage = __decorate([
+    customElement('board-modeller-page'),
+    __metadata("design:paramtypes", [])
+], BoardModellerPage);
+export { BoardModellerPage };
+//# sourceMappingURL=board-modeller-page.js.map

package/dist-client/pages/board-modeller-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-modeller-page.js","sourceRoot":"","sources":["../../client/pages/board-modeller-page.ts"],"names":[],"mappings":"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","sourcesContent":["import './things-scene-components.import'\nimport '@operato/board/ox-board-modeller.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { BoardModeller } from '@operato/board/ox-board-modeller.js'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { PageView, store } from '@operato/shell'\nimport { client, gqlContext } from '@operato/graphql'\n\nimport { provider } from '../board-provider'\nimport components from './things-scene-components-with-tools.import'\n\nconst NOOP = () => {}\n\n@customElement('board-modeller-page')\nexport class BoardModellerPage extends connect(store)(PageView) {\n  constructor() {\n    super()\n\n    components.forEach(({ templates = [], groups = [] }) => {\n      groups.forEach(group => BoardModeller.registerGroup(group))\n      BoardModeller.registerTemplate(templates)\n    })\n\n    /* 컴포넌트에서 정의된 에디터들을 MODELLER_EDITORS에 등록 */\n    var addedEditors = {}\n    for (let component in components) {\n      let { editors } = components[component]\n\n      editors &&\n        editors.forEach(editor => {\n          let { type, element } = editor\n\n          addedEditors[type] = element\n        })\n    }\n\n    OxPropertyEditor.register(addedEditors)\n\n    this.boardName = ''\n    this.model = null\n    this.baseUrl = ''\n    this.selected = []\n    this.mode = 1\n    this.hideProperty = false\n    this.overlay = null\n    this.scene = null\n    this.fonts = []\n    this.board = null\n    this.componentGroupList = BoardModeller.groups\n  }\n\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n        position: relative;\n      }\n\n      board-modeller {\n        flex: 1;\n      }\n\n      oops-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n    `\n  ]\n\n  @property({ type: String }) boardId?: string | null\n  @property({ type: String }) boardName?: string\n  @property({ type: Object }) model: any\n  @property({ type: String }) baseUrl?: string\n  @property({ type: Array }) selected: any\n  @property({ type: Number }) mode?: number\n  @property({ type: Boolean }) hideProperty?: boolean\n  @property({ type: String }) overlay?: string | null\n  @property({ type: Object }) scene: any\n  @property({ type: Array }) componentGroupList?: any\n  @property({ type: Array }) fonts: any\n  @property({ type: Array }) propertyEditor: any\n  @property({ type: Boolean }) preparing?: boolean\n\n  board: any\n  @query('ox-board-modeller') modeller?: BoardModeller\n\n  get context() {\n    return {\n      title: this.board ? this.boardName : this.preparing ? 'Fetching board...' : 'Board Not Found',\n      help: 'board-modeller/modeller',\n      widebleed: true\n    }\n  }\n\n  get oopsNote() {\n    return {\n      icon: 'color_lens',\n      title: 'EMPTY BOARD',\n      description: 'There are no board to be designed'\n    }\n  }\n\n  async refresh() {\n    if (!this.boardId) {\n      this.board = null\n      this.model = null\n\n      return\n    }\n    try {\n      this.preparing = true\n      this.updateContext()\n\n      var response = await client.query({\n        query: gql`\n          query FetchBoardById($id: String!) {\n            board(id: $id) {\n              id\n              name\n              model\n            }\n          }\n        `,\n        variables: { id: this.boardId },\n        context: gqlContext()\n      })\n\n      var board = response.data.board\n\n      if (!board) {\n        this.board = null\n        throw 'board not found'\n      }\n\n      this.board = {\n        ...board,\n        model: JSON.parse(board.model)\n      }\n\n      this.boardName = this.board.name\n      this.model = {\n        ...this.board.model\n      }\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex\n          }\n        })\n      )\n    } finally {\n      this.preparing = false\n      this.updateContext()\n    }\n  }\n\n  updated(changes) {\n    if (changes.has('boardId')) {\n      this.refresh()\n    }\n  }\n\n  pageUpdated(changes, lifecycle) {\n    if (this.active) {\n      this.boardId = lifecycle.resourceId\n    } else {\n      this.boardId = null\n      this.model = null\n      this.modeller?.close()\n    }\n  }\n\n  stateChanged(state) {\n    this.baseUrl = state.route.rootPath\n    this.fonts = state.font\n  }\n\n  render() {\n    var oops = !this.preparing && !this.model && this.oopsNote\n\n    return oops\n      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `\n      : html`\n          <ox-board-modeller\n            .mode=${this.mode}\n            @mode-changed=${e => {\n              this.mode = e.detail.value\n            }}\n            .model=${this.model}\n            @model-changed=${e => {\n              this.model = e.detail.value\n            }}\n            .scene=${this.scene}\n            @scene-changed=${e => {\n              this.scene = e.detail.value\n            }}\n            .selected=${this.selected}\n            @selected-changed=${e => {\n              this.selected = e.detail.value\n            }}\n            .baseUrl=${this.baseUrl}\n            .provider=${provider}\n            @save-model=${e => this.saveBoard()}\n            .componentGroupList=${this.componentGroupList}\n            .fonts=${this.fonts}\n            .hideProperty=${this.hideProperty}\n          >\n          </ox-board-modeller>\n        `\n  }\n\n  async updateBoard() {\n    try {\n      this.preparing = true\n\n      var { id, name, description, groupId } = this.board\n      var model = JSON.stringify(this.scene.model)\n\n      await client.mutate({\n        mutation: gql`\n          mutation UpdateBoard($id: String!, $patch: BoardPatch!) {\n            updateBoard(id: $id, patch: $patch) {\n              id\n            }\n          }\n        `,\n        variables: {\n          id,\n          patch: { name, description, model, groupId }\n        },\n        context: gqlContext()\n      })\n\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'info',\n            message: 'saved'\n          }\n        })\n      )\n    } catch (ex) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: ex,\n            ex: ex\n          }\n        })\n      )\n    } finally {\n      this.preparing = false\n    }\n\n    this.updateContext()\n  }\n\n  async saveBoard() {\n    await this.updateBoard()\n  }\n}\n"]}