npm - @operato/board - Versions diffs - 0.2.45 → 0.2.49 - Mend

@operato/board 0.2.45 → 0.2.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/demo/index-modeller.html ADDED Viewed

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      ox-board-modeller {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="demo"></div>
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-board-modeller.js'
+      import { ReferenceMap, create, error } from '@hatiolab/things-scene'
+      const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
+      const boards = colors.map((color, idx) => {
+        var to = colors[(idx + 1) % colors.length]
+        return {
+          id: color,
+          model: {
+            width: 400,
+            height: 300,
+            fillStyle: color,
+            components: [
+              {
+                type: 'text',
+                left: 100,
+                top: 100,
+                width: 200,
+                height: 30,
+                text: `Click to move to ${to}`,
+                event: {
+                  tap: {
+                    action: 'goto',
+                    target: to
+                  }
+                }
+              }
+            ]
+          }
+        }
+      })
+      var provider = new ReferenceMap(
+        async (boardId, resolve, reject) => {
+          try {
+            const board = boards.find(board => {
+              return board.id === boardId
+            })
+            if (!board) {
+              throw `no board named as ${boardId}`
+            }
+            var scene
+            try {
+              scene = await provider.get(boardId)
+              console.warn('Board fetched more than twice.', boardId)
+            } catch (e) {
+              scene = create({
+                model: JSON.parse(JSON.stringify(board.model)),
+                mode: 0,
+                refProvider: provider
+              })
+            }
+            resolve(scene, board)
+          } catch (e) {
+            error(e)
+            reject(e)
+          }
+        },
+        async (id, ref) => {
+          ref.dispose()
+        }
+      )
+      render(
+        html` <ox-board-modeller .board=${boards[0]} .provider=${provider}> </ox-board-modeller> `,
+        document.querySelector('#demo')
+      )
+    </script>
+  </body>
+</html>

package/demo/index.html CHANGED Viewed

@@ -15,7 +15,7 @@
         -webkit-font-smoothing: antialiased;
       }
-      ox-board-viewer {
+      ox-board-modeller {
         width: 100vw;
         height: 100vh;
       }
@@ -27,7 +27,7 @@
     <div id="demo"></div>
     <script type="module">
       import { html, render } from 'lit'
-      import '../dist/src/ox-board-viewer.js'
+      import '../dist/src/ox-board-modeller.js'
       import { ReferenceMap, create, error } from '@hatiolab/things-scene'
       const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
@@ -93,7 +93,7 @@
       )
       render(
-        html` <ox-board-viewer .board=${boards[0]} .provider=${provider}></ox-board-viewer> `,
+        html` <ox-board-modeller .board=${boards[0]} .provider=${provider}> </ox-board-modeller> `,
         document.querySelector('#demo')
       )
     </script>

package/dist/src/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from './ox-board-viewer';
 export * from './ox-board-player';
+export * from './ox-board-modeller';

package/dist/src/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ox-board-viewer';
 export * from './ox-board-player';
+export * from './ox-board-modeller';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA","sourcesContent":["export * from './ox-board-viewer'\nexport * from './ox-board-player'\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA","sourcesContent":["export * from './ox-board-viewer'\nexport * from './ox-board-player'\nexport * from './ox-board-modeller'\n"]}

package/dist/src/modeller/component-toolbar/component-detail.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/markdown';

package/dist/src/modeller/component-toolbar/component-detail.js ADDED Viewed

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/markdown';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+let ComponentDetail = class ComponentDetail extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.template = null;
+    }
+    render() {
+        const { about } = this.template || {};
+        return html ` <ox-markdown .src=${about}></ox-markdown> `;
+    }
+};
+ComponentDetail.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+        background-color: var(--component-detail-background-color, white);
+        margin: 0px;
+        padding: 10px;
+        width: 360px;
+        height: 100%;
+        overflow: hidden;
+        border: 2px solid var(--component-detail-border-color);
+        box-sizing: border-box;
+        position: absolute;
+        top: 0px;
+        z-index: 1;
+      }
+      ox-markdown {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ComponentDetail.prototype, "template", void 0);
+ComponentDetail = __decorate([
+    customElement('component-detail')
+], ComponentDetail);
+//# sourceMappingURL=component-detail.js.map

package/dist/src/modeller/component-toolbar/component-detail.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-detail.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAiC8B,aAAQ,GAA6B,IAAI,CAAA;IAOvE,CAAC;IALC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAErC,OAAO,IAAI,CAAA,sBAAsB,KAAK,kBAAkB,CAAA;IAC1D,CAAC;CACF,CAAA;AAvCQ,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0C;AAjCjE,eAAe;IADpB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CAwCpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/markdown'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('component-detail')\nclass ComponentDetail extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n\n background-color: var(--component-detail-background-color, white);\n margin: 0px;\n padding: 10px;\n\n width: 360px;\n height: 100%;\n\n overflow: hidden;\n\n border: 2px solid var(--component-detail-border-color);\n box-sizing: border-box;\n\n position: absolute;\n top: 0px;\n\n z-index: 1;\n }\n\n ox-markdown {\n flex: 1;\n }\n `\n ]\n\n @property({ type: Object }) template: { about: string } | null = null\n\n render() {\n const { about } = this.template || {}\n\n return html` <ox-markdown .src=${about}></ox-markdown> `\n }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-menu.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './component-detail';

package/dist/src/modeller/component-toolbar/component-menu.js ADDED Viewed

@@ -0,0 +1,193 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './component-detail';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import noImage from '../../../../assets/images/components/no-image.png';
+let ComponentMenu = class ComponentMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+        this.scene = null;
+        this.group = '';
+        this.templates = [];
+    }
+    render() {
+        return this.group
+            ? html `
+          <h2 onclick=${(e) => e.stopPropagation()}>${this.group} list</h2>
+          <div
+            templates
+            @mouseover=${(e) => this.onHoverComponent(e)}
+            @mouseout=${(e) => (this.template = null)}
+          >
+            ${(this.templates || []).map(template => html `
+                <div @click=${this.onClickTemplate} data-type=${template.type} template>
+                  <img src=${this.templateIcon(template)} />${template.type}
+                </div>
+              `)}
+          </div>
+          <component-detail
+            tabindex="-1"
+            @focusout=${() => {
+                this.template = null;
+            }}
+            .template=${this.template}
+            hidden
+          >
+          </component-detail>
+        `
+            : html ``;
+    }
+    updated(changes) {
+        var _a;
+        if (changes.has('group')) {
+            if (!this.group) {
+                this.templates = [];
+                this.setAttribute('hidden', '');
+            }
+            else {
+                this.templates = ((_a = this.groups.find((g) => g.name === this.group)) === null || _a === void 0 ? void 0 : _a.templates) || [];
+                this.removeAttribute('active');
+            }
+        }
+        if (changes.has('template')) {
+            this.template && this.template.about
+                ? this.detail.removeAttribute('hidden')
+                : this.detail.setAttribute('hidden', '');
+        }
+    }
+    findTemplate(type) {
+        this.template = type && this.templates.find(template => template.type == type);
+    }
+    onHoverComponent(e) {
+        var _a;
+        const button = e.target;
+        this.findTemplate((_a = button.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type'));
+    }
+    onClickTemplate(e) {
+        var _a;
+        var item = e.target;
+        var type = (_a = item.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type');
+        if (!type) {
+            return;
+        }
+        if (this.scene) {
+            this.template = this.templates.find(template => template.type == type);
+            this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 });
+        }
+        this.group = null;
+    }
+    templateIcon(template) {
+        return template.icon || noImage;
+    }
+};
+ComponentMenu.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+        background-color: var(--component-menu-background-color);
+        margin: 0px;
+        padding: 0px;
+        width: 180px;
+        height: 100%;
+        overflow: visible;
+        border: 2px solid var(--component-menu-border-color);
+        box-sizing: border-box;
+        position: absolute;
+        top: 0px;
+        z-index: 1;
+      }
+      h2 {
+        background-color: var(--component-menu-border-color);
+        padding: 1px 5px;
+        margin: 0;
+        font: var(--component-menu-title);
+        color: #fff;
+        text-transform: capitalize;
+      }
+      [templates] {
+        flex: 1;
+        display: block;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        background-color: var(--component-menu-background-color);
+      }
+      [template] {
+        display: flex;
+        align-items: center;
+        min-height: var(--component-menu-item-icon-size);
+        padding: 0 5px 0 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        font-size: 11px;
+        color: var(--component-menu-item-color);
+      }
+      [template]:hover,
+      [template]:focus {
+        color: var(--component-menu-item-hover-color);
+        font-weight: bold;
+        cursor: pointer;
+      }
+      [template] img {
+        margin: 5px;
+        width: var(--component-menu-item-icon-size);
+        height: var(--component-menu-item-icon-size);
+      }
+      component-detail {
+        position: absolute;
+        top: 0;
+        left: 180px;
+        height: 100%;
+        outline: none;
+      }
+      component-detail[hidden] {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ComponentMenu.prototype, "groups", void 0);
+__decorate([
+    property({ type: Object })
+], ComponentMenu.prototype, "scene", void 0);
+__decorate([
+    property({ type: String })
+], ComponentMenu.prototype, "group", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "templates", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "template", void 0);
+__decorate([
+    query('component-detail')
+], ComponentMenu.prototype, "detail", void 0);
+ComponentMenu = __decorate([
+    customElement('component-menu')
+], ComponentMenu);
+//# sourceMappingURL=component-menu.js.map

package/dist/src/modeller/component-toolbar/component-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-detail'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { Pallet, PalletItem } from '../../types'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\nimport noImage from '../../../../assets/images/components/no-image.png'\n\n@customElement('component-menu')\nclass ComponentMenu extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n\n background-color: var(--component-menu-background-color);\n margin: 0px;\n padding: 0px;\n\n width: 180px;\n height: 100%;\n\n overflow: visible;\n\n border: 2px solid var(--component-menu-border-color);\n box-sizing: border-box;\n\n position: absolute;\n top: 0px;\n\n z-index: 1;\n }\n\n h2 {\n background-color: var(--component-menu-border-color);\n padding: 1px 5px;\n margin: 0;\n font: var(--component-menu-title);\n color: #fff;\n text-transform: capitalize;\n }\n\n [templates] {\n flex: 1;\n\n display: block;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n\n background-color: var(--component-menu-background-color);\n }\n\n [template] {\n display: flex;\n align-items: center;\n min-height: var(--component-menu-item-icon-size);\n padding: 0 5px 0 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n font-size: 11px;\n color: var(--component-menu-item-color);\n }\n\n [template]:hover,\n [template]:focus {\n color: var(--component-menu-item-hover-color);\n font-weight: bold;\n cursor: pointer;\n }\n\n [template] img {\n margin: 5px;\n width: var(--component-menu-item-icon-size);\n height: var(--component-menu-item-icon-size);\n }\n\n component-detail {\n position: absolute;\n top: 0;\n left: 180px;\n height: 100%;\n outline: none;\n }\n\n component-detail[hidden] {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) groups: Pallet[] = []\n @property({ type: Object }) scene: Scene | null = null\n @property({ type: String }) group: string | null = ''\n\n @state() templates: PalletItem[] = []\n @state() template: PalletItem | any\n\n @query('component-detail') detail!: HTMLElement\n\n render() {\n return this.group\n ? html`\n <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n <div\n templates\n @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}\n @mouseout=${(e: MouseEvent) => (this.template = null)}\n >\n ${(this.templates || []).map(\n template => html`\n <div @click=${this.onClickTemplate} data-type=${template.type} template>\n <img src=${this.templateIcon(template)} />${template.type}\n </div>\n `\n )}\n </div>\n\n <component-detail\n tabindex=\"-1\"\n @focusout=${() => {\n this.template = null\n }}\n .template=${this.template}\n hidden\n >\n </component-detail>\n `\n : html``\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('group')) {\n if (!this.group) {\n this.templates = []\n this.setAttribute('hidden', '')\n } else {\n this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n this.removeAttribute('active')\n }\n }\n\n if (changes.has('template')) {\n this.template && this.template.about\n ? this.detail.removeAttribute('hidden')\n : this.detail.setAttribute('hidden', '')\n }\n }\n\n findTemplate(type: string | null | undefined) {\n this.template = type && this.templates.find(template => template.type == type)\n }\n\n onHoverComponent(e: MouseEvent) {\n const button = e.target as HTMLElement\n this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))\n }\n\n onClickTemplate(e: MouseEvent) {\n var item = e.target as HTMLElement\n var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n if (!type) {\n return\n }\n\n if (this.scene) {\n this.template = this.templates.find(template => template.type == type)\n this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })\n }\n\n this.group = null\n }\n\n templateIcon(template: PalletItem) {\n return template.icon || noImage\n }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-toolbar.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './component-menu';

package/dist/src/modeller/component-toolbar/component-toolbar.js ADDED Viewed

@@ -0,0 +1,170 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './component-menu';
+import { LitElement, css, html } from 'lit';
+import { SCENE_MODE } from '@hatiolab/things-scene';
+import { customElement, property, query, queryAll } from 'lit/decorators.js';
+let ComponentToolbar = class ComponentToolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.componentGroupList = [];
+        this.mode = SCENE_MODE.VIEW;
+    }
+    updated(changes) {
+        if (changes.has('group')) {
+            this.groups.forEach(group => {
+                group.getAttribute('data-group') === this.group
+                    ? group.setAttribute('active', '')
+                    : group.removeAttribute('active');
+            });
+            this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '');
+        }
+    }
+    render() {
+        return html `
+      ${this.componentGroupList
+            .filter(group => { var _a; return ((_a = group.templates) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+            .map(item => html ` <span data-group=${item.name} @click=${(e) => this._onClickGroup(e)}> </span> `)}
+      <component-menu
+        tabindex="-1"
+        @focusout=${() => {
+            this.group = null;
+        }}
+        .scene=${this.scene}
+        .group=${this.group}
+        .groups=${this.componentGroupList}
+        hidden
+      >
+      </component-menu>
+    `;
+    }
+    async _onClickGroup(e) {
+        var _a, _b;
+        var button = e.target;
+        this.group = (_a = button.closest('[data-group]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-group');
+        if (!this.group)
+            return;
+        await this.updateComplete;
+        (_b = this.menu) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+};
+ComponentToolbar.styles = [
+    css `
+      :host {
+        left: 0;
+        display: block;
+        position: relative;
+        width: var(--component-toolbar-icon-size);
+        background-color: var(--component-toolbar-background-color);
+      }
+      span {
+        display: flex;
+        flex-direction: row;
+        width: var(--component-toolbar-icon-size);
+        height: var(--component-toolbar-icon-size);
+        min-width: 50%;
+        border-bottom: var(--component-toolbar-border);
+        margin: 0;
+        background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;
+      }
+      span[data-group='line'] {
+        background-position: 50% -186px;
+      }
+      span[data-group='shape'] {
+        background-position: 0px -284px;
+      }
+      span[data-group='textAndMedia'] {
+        background-position: 50% -385px;
+      }
+      span[data-group='chartAndGauge'] {
+        background-position: 50% -488px;
+      }
+      span[data-group='table'] {
+        background-position: 50% -585px;
+      }
+      span[data-group='container'] {
+        background-position: 50% -685px;
+      }
+      span[data-group='dataSource'] {
+        background-position: 50% -888px;
+      }
+      span[data-group='IoT'] {
+        background-position: -3px -788px;
+      }
+      span[data-group='3D'] {
+        background-position: 50% -992px;
+      }
+      span[data-group='warehouse'] {
+        background-position: -2px -1089px;
+      }
+      span[data-group='form'] {
+        background-position: -2px -1287px;
+      }
+      span[data-group='etc'] {
+        background-position: -1px -1189px;
+      }
+      .pressed {
+        background-position: 0 15px;
+      }
+      .pressed[pressed],
+      .pressed[active] {
+        background-position: -3px -88px;
+        background-color: #beb9b3;
+      }
+      component-menu {
+        position: absolute;
+        top: 0;
+        left: var(--component-toolbar-icon-size);
+        height: 100%;
+        outline: none;
+      }
+      component-menu[hidden] {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], ComponentToolbar.prototype, "componentGroupList", void 0);
+__decorate([
+    property({ type: String })
+], ComponentToolbar.prototype, "group", void 0);
+__decorate([
+    property({ type: Object })
+], ComponentToolbar.prototype, "scene", void 0);
+__decorate([
+    property({ type: Number })
+], ComponentToolbar.prototype, "mode", void 0);
+__decorate([
+    query('component-menu')
+], ComponentToolbar.prototype, "menu", void 0);
+__decorate([
+    queryAll('[data-group]')
+], ComponentToolbar.prototype, "groups", void 0);
+ComponentToolbar = __decorate([
+    customElement('component-toolbar')
+], ComponentToolbar);
+//# sourceMappingURL=component-toolbar.js.map

package/dist/src/modeller/component-toolbar/component-toolbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-menu'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { SCENE_MODE, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\n@customElement('component-toolbar')\nclass ComponentToolbar extends LitElement {\n static styles = [\n css`\n :host {\n left: 0;\n display: block;\n position: relative;\n\n width: var(--component-toolbar-icon-size);\n background-color: var(--component-toolbar-background-color);\n }\n\n span {\n display: flex;\n flex-direction: row;\n\n width: var(--component-toolbar-icon-size);\n height: var(--component-toolbar-icon-size);\n min-width: 50%;\n\n border-bottom: var(--component-toolbar-border);\n margin: 0;\n background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;\n }\n\n span[data-group='line'] {\n background-position: 50% -186px;\n }\n\n span[data-group='shape'] {\n background-position: 0px -284px;\n }\n\n span[data-group='textAndMedia'] {\n background-position: 50% -385px;\n }\n\n span[data-group='chartAndGauge'] {\n background-position: 50% -488px;\n }\n\n span[data-group='table'] {\n background-position: 50% -585px;\n }\n\n span[data-group='container'] {\n background-position: 50% -685px;\n }\n\n span[data-group='dataSource'] {\n background-position: 50% -888px;\n }\n\n span[data-group='IoT'] {\n background-position: -3px -788px;\n }\n\n span[data-group='3D'] {\n background-position: 50% -992px;\n }\n\n span[data-group='warehouse'] {\n background-position: -2px -1089px;\n }\n\n span[data-group='form'] {\n background-position: -2px -1287px;\n }\n\n span[data-group='etc'] {\n background-position: -1px -1189px;\n }\n\n .pressed {\n background-position: 0 15px;\n }\n\n .pressed[pressed],\n .pressed[active] {\n background-position: -3px -88px;\n background-color: #beb9b3;\n }\n\n component-menu {\n position: absolute;\n top: 0;\n left: var(--component-toolbar-icon-size);\n height: 100%;\n outline: none;\n }\n\n component-menu[hidden] {\n display: none;\n }\n `\n ]\n\n @property({ type: Array }) componentGroupList: any[] = []\n @property({ type: String }) group?: string | null\n @property({ type: Object }) scene!: Scene\n @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW\n\n @query('component-menu') private menu!: HTMLElement\n @queryAll('[data-group]') groups!: NodeListOf<HTMLElement>\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('group')) {\n this.groups.forEach(group => {\n group.getAttribute('data-group') === this.group\n ? group.setAttribute('active', '')\n : group.removeAttribute('active')\n })\n\n this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n }\n }\n\n render() {\n return html`\n ${this.componentGroupList\n .filter(group => group.templates?.length > 0)\n .map(item => html` <span data-group=${item.name} @click=${(e: MouseEvent) => this._onClickGroup(e)}> </span> `)}\n\n <component-menu\n tabindex=\"-1\"\n @focusout=${() => {\n this.group = null\n }}\n .scene=${this.scene}\n .group=${this.group}\n .groups=${this.componentGroupList}\n hidden\n >\n </component-menu>\n `\n }\n\n async _onClickGroup(e: MouseEvent) {\n var button = e.target as HTMLElement\n\n this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n if (!this.group) return\n\n await this.updateComplete\n\n this.menu?.focus()\n }\n}\n"]}

package/dist/src/modeller/edit-toolbar-style.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+export declare const style: import("lit").CSSResult;