npm - @operato/board - Versions diffs - 0.2.43 → 0.2.47 - Mend

@operato/board 0.2.43 → 0.2.47

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 (140) 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-menu.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+export {};

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

@@ -0,0 +1,148 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } 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>
+            ${(this.templates || []).map(template => html `
+                <div @click=${this.onClickTemplate} data-type=${template.type} template>
+                  <img src=${this.templateIcon(template)} />${template.type}
+                </div>
+              `)}
+          </div>
+        `
+            : html ``;
+    }
+    updated(changes) {
+        var _a;
+        if (changes.has('group')) {
+            if (!this.group) {
+                this.style.display = 'none';
+                this.templates = [];
+            }
+            else {
+                this.style.display = 'flex';
+                this.templates = ((_a = this.groups.find((g) => g.name === this.group)) === null || _a === void 0 ? void 0 : _a.templates) || [];
+            }
+        }
+    }
+    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;
+        }
+        var group = this.groups.find(g => g.name == this.group);
+        if (this.scene && group) {
+            var template = group.templates.find(template => template.type == type);
+            template && this.scene.add(JSON.parse(JSON.stringify(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: hidden;
+        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);
+      }
+    `
+];
+__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([
+    property({ type: Array })
+], ComponentMenu.prototype, "templates", 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 { LitElement, PropertyValues, css, html } from 'lit'\nimport { Pallet, PalletItem } from '../../types'\nimport { customElement, property, query } 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: hidden;\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 ]\n\n @property({ type: Object }) groups: Pallet[] = []\n @property({ type: Object }) scene: Scene | null = null\n @property({ type: String }) group: string | null = ''\n @property({ type: Array }) templates: PalletItem[] = []\n\n render() {\n return this.group\n ? html`\n <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n <div templates>\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 : html``\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('group')) {\n if (!this.group) {\n this.style.display = 'none'\n this.templates = []\n } else {\n this.style.display = 'flex'\n this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n }\n }\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 var group = this.groups.find(g => g.name == this.group)\n\n if (this.scene && group) {\n var template = group.templates.find(template => template.type == type)\n template && this.scene.add(JSON.parse(JSON.stringify(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,176 @@
+/**
+ * @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 } from 'lit/decorators.js';
+let ComponentToolbar = class ComponentToolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.componentGroupList = [];
+        this.mode = SCENE_MODE.VIEW;
+    }
+    render() {
+        return html `
+      <span id="shift" class="pressed" @click=${() => this._onClickShift()}> </span>
+      ${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;
+        }}
+        id="menu"
+        .scene=${this.scene}
+        .group=${this.group}
+        .groups=${this.componentGroupList}
+        class="shadow"
+      >
+      </component-menu>
+    `;
+    }
+    _setMode(mode) {
+        this.mode = mode;
+        this.dispatchEvent(new CustomEvent('mode-changed', {
+            bubbles: true,
+            composed: true,
+            detail: { value: mode }
+        }));
+    }
+    _onClickShift() {
+        var shift = this.renderRoot.querySelector('#shift');
+        if (shift === null || shift === void 0 ? void 0 : shift.hasAttribute('active')) {
+            shift.removeAttribute('active');
+            this._setMode(SCENE_MODE.EDIT);
+        }
+        else {
+            shift.setAttribute('active', '');
+            this._setMode(SCENE_MODE.SHIFT);
+        }
+    }
+    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 {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: var(--component-toolbar-icon-size);
+        height: 100%;
+        outline: 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('#menu')
+], ComponentToolbar.prototype, "menu", 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, css, html } from 'lit'\nimport { SCENE_MODE, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query } 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 display: none;\n position: absolute;\n top: 0;\n left: var(--component-toolbar-icon-size);\n height: 100%;\n outline: 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('#menu') private menu!: HTMLElement\n\n render() {\n return html`\n <span id=\"shift\" class=\"pressed\" @click=${() => this._onClickShift()}> </span>\n\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 id=\"menu\"\n .scene=${this.scene}\n .group=${this.group}\n .groups=${this.componentGroupList}\n class=\"shadow\"\n >\n </component-menu>\n `\n }\n\n _setMode(mode: SCENE_MODE) {\n this.mode = mode\n this.dispatchEvent(\n new CustomEvent('mode-changed', {\n bubbles: true,\n composed: true,\n detail: { value: mode }\n })\n )\n }\n\n _onClickShift() {\n var shift = this.renderRoot.querySelector('#shift')\n if (shift?.hasAttribute('active')) {\n shift.removeAttribute('active')\n this._setMode(SCENE_MODE.EDIT)\n } else {\n shift!.setAttribute('active', '')\n this._setMode(SCENE_MODE.SHIFT)\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;