@operato/board 0.2.45 → 0.2.46

package/dist/src/index.d.ts

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

package/dist/src/index.js

@@ -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

@@ -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"]}
+{"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

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

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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

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

package/dist/src/modeller/edit-toolbar-style.js

@@ -0,0 +1,227 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { css } from 'lit';
+export const style = css `
+  :host {
+    background-color: var(--edit-toolbar-background-color, #394e64);
+
+    overflow-x: hidden;
+  }
+
+  [tools] {
+    display: flex;
+    align-items: center;
+    overflow: none;
+    padding: 0px 10px;
+  }
+
+  [tools] > * {
+    padding: 0px;
+  }
+
+  [tools] > span[button] {
+    min-width: 30px;
+  }
+
+  [tools] > span[padding] {
+    flex: 1;
+  }
+
+  [tools] > .vline {
+    display: block;
+    flex: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    border-right: 1px solid rgba(0, 0, 0, 0.15);
+    width: 0px;
+    height: 18px;
+    margin: 0 3px;
+  }
+
+  span[button] {
+    min-height: 35px;
+
+    background: url('/assets/images/icon-htoolbar.png') no-repeat;
+    background-position-x: 50%;
+    opacity: 0.8;
+  }
+  span[button]:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+  }
+
+  #fullscreen,
+  #toggle-property {
+    flex: none;
+  }
+
+  #align-left {
+    background-position-y: 8px;
+  }
+
+  #align-center {
+    background-position-y: -42px;
+  }
+
+  #align-right {
+    background-position-y: -92px;
+  }
+
+  #align-top {
+    background-position-y: -142px;
+  }
+
+  #align-middle {
+    background-position-y: -192px;
+  }
+
+  #align-bottom {
+    background-position-y: -242px;
+  }
+
+  #undo {
+    background-position-y: -592px;
+  }
+
+  #redo {
+    background-position-y: -642px;
+  }
+
+  #front {
+    background-position-y: -292px;
+  }
+
+  #back {
+    background-position-y: -342px;
+  }
+
+  #forward {
+    background-position-y: -392px;
+  }
+
+  #backward {
+    background-position-y: -442px;
+  }
+
+  #symmetry-x {
+    background-position-y: -492px;
+  }
+
+  #symmetry-y {
+    background-position-y: -542px;
+  }
+
+  #group {
+    background-position-y: -492px;
+  }
+
+  #ungroup {
+    background-position-y: -542px;
+  }
+
+  #fullscreen {
+    background-position-y: -692px;
+  }
+
+  #toggle-property {
+    background-position-y: -692px;
+    float: right;
+  }
+
+  #zoomin {
+    background-position-y: -742px;
+  }
+
+  #zoomout {
+    background-position-y: -792px;
+  }
+
+  #fit-scene {
+    background-position-y: -1492px;
+  }
+
+  #cut {
+    background-position-y: -842px;
+  }
+
+  #copy {
+    background-position-y: -892px;
+  }
+
+  #paste {
+    background-position-y: -942px;
+  }
+
+  #delete {
+    background-position-y: -992px;
+  }
+
+  #font-increase {
+    background-position-y: -1042px;
+  }
+
+  #font-decrease {
+    background-position-y: -1092px;
+  }
+
+  #style-copy {
+    background-position-y: -1142px;
+  }
+
+  #context-menu {
+    background-position-y: -692px;
+  }
+
+  #symmetry-x {
+    background-position-y: -1192px;
+  }
+
+  #symmetry-y {
+    background-position-y: -1242px;
+  }
+
+  #rotate-cw {
+    background-position-y: -1292px;
+  }
+
+  #rotate-ccw {
+    background-position-y: -1342px;
+  }
+
+  #distribute-horizontal {
+    background-position-y: -1542px;
+  }
+
+  #distribute-vertical {
+    background-position-y: -1593px;
+  }
+
+  #toggle-property {
+    background-position-y: -1392px;
+  }
+
+  #preview {
+    background-position-y: -1640px;
+  }
+
+  /* bigger buttons */
+  #fullscreen {
+    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property {
+    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property[active] {
+    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;
+  }
+`;
+//# sourceMappingURL=edit-toolbar-style.js.map

package/dist/src/modeller/edit-toolbar-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-toolbar-style.js","sourceRoot":"","sources":["../../../src/modeller/edit-toolbar-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6NvB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const style = css`\n  :host {\n    background-color: var(--edit-toolbar-background-color, #394e64);\n\n    overflow-x: hidden;\n  }\n\n  [tools] {\n    display: flex;\n    align-items: center;\n    overflow: none;\n    padding: 0px 10px;\n  }\n\n  [tools] > * {\n    padding: 0px;\n  }\n\n  [tools] > span[button] {\n    min-width: 30px;\n  }\n\n  [tools] > span[padding] {\n    flex: 1;\n  }\n\n  [tools] > .vline {\n    display: block;\n    flex: none;\n    border-left: 1px solid rgba(255, 255, 255, 0.2);\n    border-right: 1px solid rgba(0, 0, 0, 0.15);\n    width: 0px;\n    height: 18px;\n    margin: 0 3px;\n  }\n\n  span[button] {\n    min-height: 35px;\n\n    background: url('/assets/images/icon-htoolbar.png') no-repeat;\n    background-position-x: 50%;\n    opacity: 0.8;\n  }\n  span[button]:hover {\n    opacity: 1;\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n\n  #fullscreen,\n  #toggle-property {\n    flex: none;\n  }\n\n  #align-left {\n    background-position-y: 8px;\n  }\n\n  #align-center {\n    background-position-y: -42px;\n  }\n\n  #align-right {\n    background-position-y: -92px;\n  }\n\n  #align-top {\n    background-position-y: -142px;\n  }\n\n  #align-middle {\n    background-position-y: -192px;\n  }\n\n  #align-bottom {\n    background-position-y: -242px;\n  }\n\n  #undo {\n    background-position-y: -592px;\n  }\n\n  #redo {\n    background-position-y: -642px;\n  }\n\n  #front {\n    background-position-y: -292px;\n  }\n\n  #back {\n    background-position-y: -342px;\n  }\n\n  #forward {\n    background-position-y: -392px;\n  }\n\n  #backward {\n    background-position-y: -442px;\n  }\n\n  #symmetry-x {\n    background-position-y: -492px;\n  }\n\n  #symmetry-y {\n    background-position-y: -542px;\n  }\n\n  #group {\n    background-position-y: -492px;\n  }\n\n  #ungroup {\n    background-position-y: -542px;\n  }\n\n  #fullscreen {\n    background-position-y: -692px;\n  }\n\n  #toggle-property {\n    background-position-y: -692px;\n    float: right;\n  }\n\n  #zoomin {\n    background-position-y: -742px;\n  }\n\n  #zoomout {\n    background-position-y: -792px;\n  }\n\n  #fit-scene {\n    background-position-y: -1492px;\n  }\n\n  #cut {\n    background-position-y: -842px;\n  }\n\n  #copy {\n    background-position-y: -892px;\n  }\n\n  #paste {\n    background-position-y: -942px;\n  }\n\n  #delete {\n    background-position-y: -992px;\n  }\n\n  #font-increase {\n    background-position-y: -1042px;\n  }\n\n  #font-decrease {\n    background-position-y: -1092px;\n  }\n\n  #style-copy {\n    background-position-y: -1142px;\n  }\n\n  #context-menu {\n    background-position-y: -692px;\n  }\n\n  #symmetry-x {\n    background-position-y: -1192px;\n  }\n\n  #symmetry-y {\n    background-position-y: -1242px;\n  }\n\n  #rotate-cw {\n    background-position-y: -1292px;\n  }\n\n  #rotate-ccw {\n    background-position-y: -1342px;\n  }\n\n  #distribute-horizontal {\n    background-position-y: -1542px;\n  }\n\n  #distribute-vertical {\n    background-position-y: -1593px;\n  }\n\n  #toggle-property {\n    background-position-y: -1392px;\n  }\n\n  #preview {\n    background-position-y: -1640px;\n  }\n\n  /* bigger buttons */\n  #fullscreen {\n    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property {\n    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property[active] {\n    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;\n  }\n`\n"]}

package/dist/src/modeller/edit-toolbar.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Scene } from '@hatiolab/things-scene';
+import { LitElement, PropertyValues } from 'lit';
+export declare class EditToolbar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    scene?: Scene;
+    selected: any[];
+    hideProperty: boolean;
+    private cliped?;
+    private redo;
+    private undo;
+    private fullscreen;
+    private cut;
+    private copy;
+    private paste;
+    private delete;
+    private forward;
+    private backward;
+    private front;
+    private back;
+    private aligners;
+    private zorders;
+    private distributes;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    onWheelEvent(e: Event): void;
+    getSymbol(key: string): string;
+    private getShortcutString;
+    onShortcut(e: KeyboardEvent): boolean;
+    onExecute(command: string, undoable: boolean, redoable: boolean): void;
+    onUndo(undoable: boolean, redoable: boolean): void;
+    onRedo(undoable: boolean, redoable: boolean): void;
+    onSceneChanged(after?: Scene, before?: Scene): void;
+    onSelectedChanged(after: Component[], before: Component[]): void;
+    onTapUndo(): void;
+    onTapRedo(): void;
+    onTapCut(): void;
+    onTapCopy(): void;
+    onTapPaste(): void;
+    onTapDelete(): void;
+    onTapSelectAll(): void;
+    onTapFontIncrease(e: TouchEvent): void;
+    onTapFontDecrease(e: TouchEvent): void;
+    onTapAlign(e: TouchEvent | string): void;
+    onTapZorder(e: TouchEvent | string): void;
+    onTapSymmetryX(): void;
+    onTapSymmetryY(): void;
+    onTapRotateCW(): void;
+    onTapRotateCCW(): void;
+    onTapGroup(): void;
+    onTapUngroup(): void;
+    onTapFullscreen(): void;
+    onTapToggle(): void;
+    onTapFitScene(): void;
+    onTapPreview(): void;
+    onTapDownloadModel(): void;
+    onTapDistribute(e: TouchEvent | string): void;
+}