@operato/scene-visualizer 9.2.2 → 10.0.0-beta.2

package/dist/editors/property-editor-gltf-info.js

@@ -7,13 +7,44 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { OxPropertyEditor } from '@operato/property-editor';
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
-    constructor() {
-        super(...arguments);
-        this.width = 0;
-        this.height = 0;
-        this.depth = 0;
+const EXT_SPECGLOSS = 'KHR_materials_pbrSpecularGlossiness';
+class SpecGlossCompat {
+    name = EXT_SPECGLOSS;
+    extendMaterialParams() {
+        return Promise.resolve();
     }
+}
+function registerSpecGlossCompat(loader) {
+    loader.register(() => new SpecGlossCompat());
+}
+let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
+    static styles = [
+        ...OxPropertyEditor.styles,
+        css `
+      div[info] {
+        display: flex;
+        flex-direction: row;
+        font-size: 12px;
+      }
+
+      div[info] * {
+        align-self: center;
+      }
+
+      div[info] title {
+        font-weight: bold;
+      }
+
+      div[info] md-elevated-button {
+        margin-left: auto;
+        --md-icon-size: 24px;
+      }
+    `
+    ];
+    src;
+    width = 0;
+    height = 0;
+    depth = 0;
     editorTemplate(value, spec) {
         const valid = this.width && this.height && this.depth;
         var property = spec.property || {};
@@ -73,6 +104,7 @@ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
         try {
             const path = component.app.url(src);
             let gltfLoader = new GLTFLoader();
+            registerSpecGlossCompat(gltfLoader);
             gltfLoader.setCrossOrigin('use-credentials');
             return new Promise((resolve) => {
                 gltfLoader.load(path, gltf => {
@@ -91,29 +123,6 @@ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
         }
     }
 };
-GLTFInfoEditor.styles = [
-    ...OxPropertyEditor.styles,
-    css `
-      div[info] {
-        display: flex;
-        flex-direction: row;
-        font-size: 12px;
-      }
-
-      div[info] * {
-        align-self: center;
-      }
-
-      div[info] title {
-        font-weight: bold;
-      }
-
-      div[info] md-elevated-button {
-        margin-left: auto;
-        --md-icon-size: 24px;
-      }
-    `
-];
 __decorate([
     property({ type: String })
 ], GLTFInfoEditor.prototype, "src", void 0);

package/dist/editors/property-editor-gltf-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-editor-gltf-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Component } from '@hatiolab/things-scene'\n\nimport * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\n\n@customElement('property-editor-gltf-info')\nexport default class GLTFInfoEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      div[info] {\n        display: flex;\n        flex-direction: row;\n        font-size: 12px;\n      }\n\n      div[info] * {\n        align-self: center;\n      }\n\n      div[info] title {\n        font-weight: bold;\n      }\n\n      div[info] md-elevated-button {\n        margin-left: auto;\n        --md-icon-size: 24px;\n      }\n    `\n  ]\n\n  @property({ type: String }) src?: string\n\n  @state() width: number = 0\n  @state() height: number = 0\n  @state() depth: number = 0\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const valid = this.width && this.height && this.depth\n\n    var property = spec.property || {}\n    var { action } = property\n\n    return html`\n      <fieldset fullwidth>\n        <legend><ox-i18n msgid=\"label.gltf-info\">GLTF info.</ox-i18n></legend>\n\n        <div>\n          <div info>\n            <div label>[W x H x D] :</div>\n            ${valid\n              ? html` <div value>${this.width} x ${this.height} x ${this.depth}</div>\n                  <md-elevated-button\n                    @click=${(e: MouseEvent) => {\n                      this.dispatchEvent(\n                        new CustomEvent('i-need-selected', {\n                          bubbles: true,\n                          composed: true,\n                          detail: {\n                            callback: (selected: any[]) => {\n                              typeof action === 'function' &&\n                                action(selected[0], {\n                                  width: this.width,\n                                  height: this.height,\n                                  depth: this.depth\n                                })\n                            }\n                          }\n                        })\n                      )\n                    }}\n                  >\n                    <md-icon>autorenew</md-icon>\n                  </md-elevated-button>`\n              : html` <div></div> `}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('src')) {\n      this.dispatchEvent(\n        new CustomEvent('i-need-selected', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            callback: async (selected: any[]) => {\n              await this.fetchSourceInfo(selected[0], this.src!)\n            }\n          }\n        })\n      )\n    }\n  }\n\n  async fetchSourceInfo(component: Component, src: string) {\n    if (!src || !src.trim()) {\n      return\n    }\n\n    try {\n      const path = component.app.url(src)\n\n      let gltfLoader = new GLTFLoader()\n\n      gltfLoader.setCrossOrigin('use-credentials')\n\n      return new Promise((resolve: any) => {\n        gltfLoader.load(path, gltf => {\n          var box = new THREE.Box3().setFromObject(gltf.scene)\n          var { x, y, z } = box.getSize(new THREE.Vector3())\n\n          this.width = Math.floor(x)\n          this.depth = Math.floor(y)\n          this.height = Math.floor(z)\n\n          resolve()\n        })\n      })\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n}\n"]}
+{"version":3,"file":"property-editor-gltf-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Component } from '@hatiolab/things-scene'\n\nimport * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\n\nconst EXT_SPECGLOSS = 'KHR_materials_pbrSpecularGlossiness'\n\nclass SpecGlossCompat {\n  name = EXT_SPECGLOSS\n  extendMaterialParams() {\n    return Promise.resolve()\n  }\n}\n\nfunction registerSpecGlossCompat(loader: GLTFLoader) {\n  loader.register(() => new SpecGlossCompat())\n}\n\n@customElement('property-editor-gltf-info')\nexport default class GLTFInfoEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      div[info] {\n        display: flex;\n        flex-direction: row;\n        font-size: 12px;\n      }\n\n      div[info] * {\n        align-self: center;\n      }\n\n      div[info] title {\n        font-weight: bold;\n      }\n\n      div[info] md-elevated-button {\n        margin-left: auto;\n        --md-icon-size: 24px;\n      }\n    `\n  ]\n\n  @property({ type: String }) src?: string\n\n  @state() width: number = 0\n  @state() height: number = 0\n  @state() depth: number = 0\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const valid = this.width && this.height && this.depth\n\n    var property = spec.property || {}\n    var { action } = property\n\n    return html`\n      <fieldset fullwidth>\n        <legend><ox-i18n msgid=\"label.gltf-info\">GLTF info.</ox-i18n></legend>\n\n        <div>\n          <div info>\n            <div label>[W x H x D] :</div>\n            ${valid\n              ? html` <div value>${this.width} x ${this.height} x ${this.depth}</div>\n                  <md-elevated-button\n                    @click=${(e: MouseEvent) => {\n                      this.dispatchEvent(\n                        new CustomEvent('i-need-selected', {\n                          bubbles: true,\n                          composed: true,\n                          detail: {\n                            callback: (selected: any[]) => {\n                              typeof action === 'function' &&\n                                action(selected[0], {\n                                  width: this.width,\n                                  height: this.height,\n                                  depth: this.depth\n                                })\n                            }\n                          }\n                        })\n                      )\n                    }}\n                  >\n                    <md-icon>autorenew</md-icon>\n                  </md-elevated-button>`\n              : html` <div></div> `}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('src')) {\n      this.dispatchEvent(\n        new CustomEvent('i-need-selected', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            callback: async (selected: any[]) => {\n              await this.fetchSourceInfo(selected[0], this.src!)\n            }\n          }\n        })\n      )\n    }\n  }\n\n  async fetchSourceInfo(component: Component, src: string) {\n    if (!src || !src.trim()) {\n      return\n    }\n\n    try {\n      const path = component.app.url(src)\n\n      let gltfLoader = new GLTFLoader()\n      registerSpecGlossCompat(gltfLoader)\n\n      gltfLoader.setCrossOrigin('use-credentials')\n\n      return new Promise((resolve: any) => {\n        gltfLoader.load(path, gltf => {\n          var box = new THREE.Box3().setFromObject(gltf.scene)\n          var { x, y, z } = box.getSize(new THREE.Vector3())\n\n          this.width = Math.floor(x)\n          this.depth = Math.floor(y)\n          this.height = Math.floor(z)\n\n          resolve()\n        })\n      })\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n}\n"]}

package/dist/editors/property-editor-location-increase-pattern.js

@@ -4,100 +4,9 @@ import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxPropertyEditor } from '@operato/property-editor';
 let LocationIncreasePatternEditor = class LocationIncreasePatternEditor extends OxPropertyEditor {
-    constructor() {
-        super(...arguments);
-        this.startSection = 1;
-        this.startUnit = 1;
-        this.skipNumbering = true;
-        this._specificPropEl = null;
-    }
-    editorTemplate(value, spec) {
-        // TODO: background image change to use the url-loader
-        return html `
-      <fieldset fullwidth>
-        <legend><ox-i18n msgid="label.location-increase-pattern">Increase Pattern</ox-i18n></legend>
-
-        <div class="property-grid">
-          <label> <ox-i18n msgid="label.start-section">Start Section</ox-i18n> </label>
-          <input
-            type="number"
-            data-start-section
-            value="${this.startSection}"
-            @change=${(e) => (this.startSection = e.target.valueAsNumber)}
-          />
-
-          <label> <ox-i18n msgid="label.start-unit">Start Unit</ox-i18n> </label>
-          <input
-            type="number"
-            data-start-unit
-            value="${this.startUnit}"
-            @change=${(e) => (this.startUnit = e.target.valueAsNumber)}
-          />
-
-          <div class="checkbox-row" fullwidth>
-            <input id="skip-numbering" type="checkbox" data-skip-numbering ?checked="${this.skipNumbering}" />
-            <label for="skip-numbering">
-              <ox-i18n msgid="label.skip-numbering">Skip Numbering</ox-i18n>
-            </label>
-          </div>
-
-          <div
-            id="pattern-set"
-            class="property-grid location-increase-pattern-btn"
-            @click=${(e) => this._onTapType(e)}
-          >
-            <button data-value="cw" type="button"></button>
-            <button data-value="ccw" type="button"></button>
-            <button data-value="zigzag" type="button"></button>
-            <button data-value="zigzag-reverse" type="button"></button>
-          </div>
-        </div>
-      </fieldset>
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.property && this.property.event) {
-            Object.entries(this.property.event).forEach(entry => {
-                if (entry[0]) {
-                    document.addEventListener(entry[0], entry[1]);
-                }
-            });
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.property && this.property.event) {
-            Object.entries(this.property.event).forEach(entry => {
-                if (entry[0]) {
-                    document.removeEventListener(entry[0], entry[1]);
-                }
-            });
-        }
-    }
-    _onTapType(e) {
-        var _a;
-        var target = e.target;
-        const increasingDirection = (_a = target === null || target === void 0 ? void 0 : target.closest('[data-value]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-value');
-        if (!increasingDirection) {
-            return;
-        }
-        this.dispatchEvent(new CustomEvent('i-need-selected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                callback: (selected) => {
-                    const table = selected[0].parent;
-                    table.increaseLocation(increasingDirection, this.skipNumbering, this.startSection, this.startUnit);
-                }
-            }
-        }));
-        e.stopPropagation();
-    }
-};
-LocationIncreasePatternEditor.styles = [
-    ...OxPropertyEditor.styles,
-    css `
+    static styles = [
+        ...OxPropertyEditor.styles,
+        css `
       fieldset {
         border: none;
         border-bottom: 1px solid #cfd8dc;
@@ -250,7 +159,94 @@ LocationIncreasePatternEditor.styles = [
         text-align: left;
       }
     `
-];
+    ];
+    editorTemplate(value, spec) {
+        // TODO: background image change to use the url-loader
+        return html `
+      <fieldset fullwidth>
+        <legend><ox-i18n msgid="label.location-increase-pattern">Increase Pattern</ox-i18n></legend>
+
+        <div class="property-grid">
+          <label> <ox-i18n msgid="label.start-section">Start Section</ox-i18n> </label>
+          <input
+            type="number"
+            data-start-section
+            value="${this.startSection}"
+            @change=${(e) => (this.startSection = e.target.valueAsNumber)}
+          />
+
+          <label> <ox-i18n msgid="label.start-unit">Start Unit</ox-i18n> </label>
+          <input
+            type="number"
+            data-start-unit
+            value="${this.startUnit}"
+            @change=${(e) => (this.startUnit = e.target.valueAsNumber)}
+          />
+
+          <div class="checkbox-row" fullwidth>
+            <input id="skip-numbering" type="checkbox" data-skip-numbering ?checked="${this.skipNumbering}" />
+            <label for="skip-numbering">
+              <ox-i18n msgid="label.skip-numbering">Skip Numbering</ox-i18n>
+            </label>
+          </div>
+
+          <div
+            id="pattern-set"
+            class="property-grid location-increase-pattern-btn"
+            @click=${(e) => this._onTapType(e)}
+          >
+            <button data-value="cw" type="button"></button>
+            <button data-value="ccw" type="button"></button>
+            <button data-value="zigzag" type="button"></button>
+            <button data-value="zigzag-reverse" type="button"></button>
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    startSection = 1;
+    startUnit = 1;
+    skipNumbering = true;
+    _specificPropEl = null;
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.property && this.property.event) {
+            Object.entries(this.property.event).forEach(entry => {
+                if (entry[0]) {
+                    document.addEventListener(entry[0], entry[1]);
+                }
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.property && this.property.event) {
+            Object.entries(this.property.event).forEach(entry => {
+                if (entry[0]) {
+                    document.removeEventListener(entry[0], entry[1]);
+                }
+            });
+        }
+    }
+    _onTapType(e) {
+        var target = e.target;
+        const increasingDirection = target?.closest('[data-value]')?.getAttribute('data-value');
+        if (!increasingDirection) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    const table = selected[0].parent;
+                    table.increaseLocation(increasingDirection, this.skipNumbering, this.startSection, this.startUnit);
+                }
+            }
+        }));
+        e.stopPropagation();
+    }
+};
 __decorate([
     property({ type: Number })
 ], LocationIncreasePatternEditor.prototype, "startSection", void 0);

package/dist/editors/property-editor-location-increase-pattern.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-editor-location-increase-pattern.js","sourceRoot":"","sources":["../../src/editors/property-editor-location-increase-pattern.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('property-editor-location-increase-pattern')\nexport default class LocationIncreasePatternEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      fieldset {\n        border: none;\n        border-bottom: 1px solid #cfd8dc;\n        color: var(--md-sys-color-secondary);\n        font-size: 12px;\n        padding: 0 0 10px 0;\n        margin: 0 0 10px 0;\n      }\n\n      fieldset legend {\n        padding: 5px 0 0 5px;\n        font-size: 11px;\n        color: #e46c2e;\n        font-weight: bold;\n        text-transform: capitalize;\n      }\n\n      .property-grid {\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        margin: 10px 0 0 0;\n      }\n\n      .property-grid > * {\n        line-height: 1.5;\n      }\n\n      .property-grid > label {\n        grid-column: span 3;\n        text-align: right;\n        text-transform: capitalize;\n      }\n\n      .property-grid > input {\n        grid-column: span 7;\n        padding: 0;\n        margin: 0;\n      }\n\n      .property-grid > .checkbox-row {\n        grid-column: span 10;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        align-items: center;\n      }\n\n      .checkbox-row > input {\n        grid-column: span 4 / auto;\n        order: 1;\n        place-self: center end;\n      }\n\n      .checkbox-row > label {\n        grid-column: span 6;\n        text-align: left;\n      }\n\n      #pattern-set {\n        overflow: hidden;\n        grid-column: 1 / -1;\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 10px;\n      }\n\n      #pattern-set button {\n        background: url('data:image/png;base64,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')\n          no-repeat;\n        display: block;\n        width: 55px;\n        height: 40px;\n        min-width: inherit;\n        border: 1px solid transparent;\n        border-radius: 8px;\n        transition: all 0.2s;\n        padding: 0;\n        cursor: pointer;\n        margin: 0 auto;\n        justify-self: center;\n      }\n\n      #pattern-set button:hover {\n        border-color: var(--md-sys-color-primary);\n        box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);\n      }\n\n      #pattern-set button:active {\n        background-color: rgba(var(--md-sys-color-primary), 0.2);\n        transform: scale(0.98);\n      }\n\n      #pattern-set button[data-value='+u+s'] {\n        background-position: 50% 3px;\n      }\n      #pattern-set button[data-value='+u-s'] {\n        background-position: 50% -97px;\n      }\n      #pattern-set button[data-value='-u+s'] {\n        background-position: 50% -197px;\n      }\n      #pattern-set button[data-value='-u-s'] {\n        background-position: 50% -297px;\n      }\n      #pattern-set button[data-value='+s+u'] {\n        background-position: 50% -397px;\n      }\n      #pattern-set button[data-value='+s-u'] {\n        background-position: 50% -497px;\n      }\n      #pattern-set button[data-value='-s+u'] {\n        background-position: 50% -597px;\n      }\n      #pattern-set button[data-value='-s-u'] {\n        background-position: 50% -697px;\n      }\n      #pattern-set button[data-value='cw'] {\n        background-position: 50% -797px;\n      }\n      #pattern-set button[data-value='ccw'] {\n        background-position: 50% -897px;\n      }\n      #pattern-set button[data-value='zigzag'] {\n        background-position: 50% -997px;\n      }\n      #pattern-set button[data-value='zigzag-reverse'] {\n        background-position: 50% -1097px;\n      }\n\n      label {\n        order: initial;\n      }\n\n      input {\n        order: initial;\n      }\n\n      #skip-numbering {\n        order: initial;\n        grid-column: span 4;\n      }\n\n      label[for='skip-numbering'] {\n        order: 1;\n        grid-column: span 5;\n        text-align: left;\n      }\n    `\n  ]\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    // TODO: background image change to use the url-loader\n    return html`\n      <fieldset fullwidth>\n        <legend><ox-i18n msgid=\"label.location-increase-pattern\">Increase Pattern</ox-i18n></legend>\n\n        <div class=\"property-grid\">\n          <label> <ox-i18n msgid=\"label.start-section\">Start Section</ox-i18n> </label>\n          <input\n            type=\"number\"\n            data-start-section\n            value=\"${this.startSection}\"\n            @change=${(e: Event) => (this.startSection = (e.target! as HTMLInputElement).valueAsNumber)}\n          />\n\n          <label> <ox-i18n msgid=\"label.start-unit\">Start Unit</ox-i18n> </label>\n          <input\n            type=\"number\"\n            data-start-unit\n            value=\"${this.startUnit}\"\n            @change=${(e: Event) => (this.startUnit = (e.target! as HTMLInputElement).valueAsNumber)}\n          />\n\n          <div class=\"checkbox-row\" fullwidth>\n            <input id=\"skip-numbering\" type=\"checkbox\" data-skip-numbering ?checked=\"${this.skipNumbering}\" />\n            <label for=\"skip-numbering\">\n              <ox-i18n msgid=\"label.skip-numbering\">Skip Numbering</ox-i18n>\n            </label>\n          </div>\n\n          <div\n            id=\"pattern-set\"\n            class=\"property-grid location-increase-pattern-btn\"\n            @click=${(e: Event) => this._onTapType(e)}\n          >\n            <button data-value=\"cw\" type=\"button\"></button>\n            <button data-value=\"ccw\" type=\"button\"></button>\n            <button data-value=\"zigzag\" type=\"button\"></button>\n            <button data-value=\"zigzag-reverse\" type=\"button\"></button>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  @property({ type: Number }) startSection: number = 1\n  @property({ type: Number }) startUnit: number = 1\n  @property({ type: Boolean }) skipNumbering: boolean = true\n  @property({ type: Object }) _specificPropEl: HTMLElement | null = null\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.property && this.property.event) {\n      Object.entries(this.property.event).forEach(entry => {\n        if (entry[0]) {\n          document.addEventListener(entry[0] as any, entry[1] as any)\n        }\n      })\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    if (this.property && this.property.event) {\n      Object.entries(this.property.event).forEach(entry => {\n        if (entry[0]) {\n          document.removeEventListener(entry[0] as any, entry[1] as any)\n        }\n      })\n    }\n  }\n\n  _onTapType(e: Event) {\n    var target = e.target as HTMLElement\n\n    const increasingDirection = target?.closest('[data-value]')?.getAttribute('data-value')\n    if (!increasingDirection) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n            table.increaseLocation(increasingDirection, this.skipNumbering, this.startSection, this.startUnit)\n          }\n        }\n      })\n    )\n\n    e.stopPropagation()\n  }\n}\n"]}
+{"version":3,"file":"property-editor-location-increase-pattern.js","sourceRoot":"","sources":["../../src/editors/property-editor-location-increase-pattern.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('property-editor-location-increase-pattern')\nexport default class LocationIncreasePatternEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      fieldset {\n        border: none;\n        border-bottom: 1px solid #cfd8dc;\n        color: var(--md-sys-color-secondary);\n        font-size: 12px;\n        padding: 0 0 10px 0;\n        margin: 0 0 10px 0;\n      }\n\n      fieldset legend {\n        padding: 5px 0 0 5px;\n        font-size: 11px;\n        color: #e46c2e;\n        font-weight: bold;\n        text-transform: capitalize;\n      }\n\n      .property-grid {\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        margin: 10px 0 0 0;\n      }\n\n      .property-grid > * {\n        line-height: 1.5;\n      }\n\n      .property-grid > label {\n        grid-column: span 3;\n        text-align: right;\n        text-transform: capitalize;\n      }\n\n      .property-grid > input {\n        grid-column: span 7;\n        padding: 0;\n        margin: 0;\n      }\n\n      .property-grid > .checkbox-row {\n        grid-column: span 10;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        align-items: center;\n      }\n\n      .checkbox-row > input {\n        grid-column: span 4 / auto;\n        order: 1;\n        place-self: center end;\n      }\n\n      .checkbox-row > label {\n        grid-column: span 6;\n        text-align: left;\n      }\n\n      #pattern-set {\n        overflow: hidden;\n        grid-column: 1 / -1;\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 10px;\n      }\n\n      #pattern-set button {\n        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAASwCAMAAABo/yIHAAAAxlBMVEVHcEx8fHx8fHy8nIC7nIC8nIC8nID///+7nIC7nIG8nIC7nIDHrZd8fHy8nIDby7zu5t+8nIHbyr3ayrz////S0tK8nIGzs7N8fHzR0dFnZ2eysrK7nICdgWu9n4X9/PzOuKV/f3+7u7vm2tD49/a0tLSkpKSCgoLAo4qrq6vX1tbQ0NCWlpafn5/HrpmHh4fUwbHEqZLt5d6urq7czb+6oo+3qZ3z7unr6+vb2tqOjo7e3t62raf28O3g1MmLi4u9vb3Ozs62VZOkAAAAFHRSTlMAYLjOuhKBgGD3pOTc9T2wsK6wsCxSu/EAAAnrSURBVHja7Z2NWts2FIazQhtoWdd28XEyH5ykwRDaEAI4SaFAy/3f1CzJP7ItJ5ZKu1G+9ykgPH9IthL25NWJ6HR+E1h8OjxUH3u7+7t7LXNc5Pb2ucf7WtD3/SAIbm9Xq+UyDEPiEr5/eBgkH/6Skxzvarlebzg8urucxIuL+cW0muwdHvbER9gT7FvnRub+1g05kRH0JqHI7ZVyGV6lKWJZrjcZhaOVdtOCDbnqUb9j7G+wrVnKeZJB8vHRyxiUmwPVGui5YDgcuvTnmrs6OjpquC+1ZqDlTr98+dI2p/d3/PXrtcs4zx4eHlxys+PjY3GPk5v9cZDfcr3pDdKmp+durq6uXK7v29nZmcs4z2ezmcs8nNzcfHMZ5/j8/NxlnOOTkxOXcfbH47G8z8k8iOlQ91xvDvLnht5fPyH5Uf9ILK6vkvt8fHL8uc315Tl5xudxv9cff7bJyf6Ok2/6/eOt4+ynZDl1a0+2X18ak2j9tRun7/uqP/9MXt+Zfxr4kuTLqfgfiPpGn78kKD6rXKfzx4s/X/zRAQAAAAAAAAAAAPzuU/C7mUWx9GDCo3iep3xIe7+beRtLL6V5op/opYLGXGsv1Sm0lL2XKvqzuD7hFb1BNg/BbDzz2/hdG4/5GN7UxtPq82DjhR/DQ9t4b32c0rM7+F3N6/+SdQRt3eKnrZNU1mVcc07rObm99UtSd7vfBQAAAAAAAAAAni91fcs2uULfctucVLhK3y59nytQGIbL5Wp1exsEga/nNH0b9uqp6XQ+WsSTy7uj4bCeU/p2tCUX6LlC39Kk12vMrav9Ffp2kUvdNj6kaj5a5lC/i/pd1O9qOdTvon4X9bsAAAAAAAAAAJ4X8LvP1e/K8l3r+l1XL1XU/Vp5qapf+g3rd2UdtX39rvCRTt608J923rTwrb/E72o+2Wqcmr+2GudNknPxu7Pv3z+6XJ/resAj1P1ajfMH6n7d1oGC4Ar1uwAAAAAAAAAAwKNRKoiyyfU7zYVU8nX51enx2ezm2/nJeNwvIQq3AvH6XRVuaUG1X8KXrw/fr2azm1qyLABfWOeU8/qzlrt++JjkaiNVXqOhv97QLEHqAlC7vg37M/R7FaF61in39zvX7waO9bu3d3drFy91e3l56TLO1WQyccqNRiOX+t3lYrFwub5l0p/LOMP5fO4yD+HFxYXLOMPpdOoyTrFA5DJOJiIXv6t2a7G/vjSXrj/J9aBJm+sr5+T6UzixzmXrXdvGad7+Jtx+fcU2NqX+2o3TF2uAAn8lc6s2fpfT7YQEVtsJAQAAAAAAAAAAvzXwu0/B7+Z6yc6DMTN7nnd4qD4W83C+aOF3K96mrV8yb3c8svZSm/1S8MM+S8sV9dt2/qyo327n64RXdPC7Nh7zMbypjact+V0LL/wYHtrGe+vjFJ594OB3Na//S9YRtHWLn7ZO0rAug/13AQAAAAAAAACA/yd1fdu3yuX6tt82J1+ZZ/sq+v0K4/HJ+beb2dnx6VVw5Vf7y98vb0idz86uvj98/VLeL6Hy/vzNOd0X+KX35/fMuY8P1+b+svfnp1J3uw/R9a0qyW2XQ/0u6ndRv6vlUL+L+l3U7wIAAAAAAAAAeGbA7z5XvyvLd63rd139kqPvsfNLT7J+V9ZR2/tddqzf1fynnd8tfOuv8buFT7ar3y38tdU4l0l/Ln53Fcexy/W5rgc8Qt2vXR3ur99/F/W7AAAAAAAAAACAJX7k+5F6vSy/RPkL6awt90tQbbNX9La9fo+25rb7l8giVx3ncHi0vpzE89H8YhqGREyc/iu+Gv/eWTWnAiJCpFq0wbduGCc55ur9Ra38rqG/FvW7nqfc43afXH0IqPsZbLm+yYhGky33xTDvmXTV7wsb72c6ufmMC8mrzT0zk7E/IjnBcppJjanH6aH0n7G/8h/TE1KZaNTCz6suNlxfQ071NzDez01128yN864fbRin3TrCtj8yKJpUf74Hav4259LSWcP8MTFlU6Wer6qZzmH9cRaocXJ6LuV/SpGzb8j9+W4YZ7vcI67nZL/FIyFLI4NClWdEEbwpAAAAAAAAAADw5ChsbqZ5tSPp0f+D3/V/wO/2Ms9D+SdmpjCcXsxH83hyuT6SxWYGP5gFM8fDTFTKOfms5nE+Uq7l/gxEbfZn8FyvL9iSq/vdVtfX3n+Smu1c1gnfmjm7VPk1Pl44F4TKPpL+kxr8bnlEI6Zexe9ym5y4Pqr4a2rj+ep+t9Hre5v87sCjll5/YPT6Bj/PW9Yt2Oh31XH7dRI1u/k0y4nMn/hqGo1+t/gNkT0+9CUgzh4v9d9n8vjW50NUvy/k9Hxv6Xej8u/5IFK/xU99XermzSiti43gdwEAAAAAAAAAgCfGc6jf7am3Cosz7ouSQL3Z4HvUW5OTM46m+cmlZoN3O7pLz1hwrjQXnOcW1OCl1mt1xjozUKIZEhdHzfWm6i3bg96I4qykc8Qxac16f2Jib1fS99wyBcTXCZ8+xfE1k1BBydEwkHth1n3P3ivx+eUb2uswdbsfDsKL0bsuUXGUjQ+2VzL3inY6HeLuBxK+9e+uOvkVi6Nkzr0WP3if3srcgazDPegyyaP8ttPU3+v34hOLNHN3X23uoHLpUXN/73c7nbe8/1Ke0T0g1Z8Y3FuSR8nc325yCTssL5K5+7e4vvCDvL78qDG3s9PZ4zfiB3eIuu9GF/sHH7oit0fqaEOO+eUbVtuMMnXj+F1XwJQfrY9TzjvzipeqeJP5Pr6//iQmn3hFy0jWcRJX6zhTXx7SOjXHXDQT1k1+N/X6vMiNbNEsjqrHtaF+d3qUG+CiSWkzq8A21O/eF2bc0GQiNtfvDgvjXDRp2Mqzu3ran+Z3TX+3LPKjyr4HkVK/2PcAAAAAAAAAAAB4stTrd6NS/a589Z++7rd6n/4jeA3X+t2aT9Z8j1n9KJFrqP+sS6WSdbq7a6r/zM2VpraYsqYSubVxspRmXuHPvMpRJXIN/izONrMljilrUn50cmnyuxFxEPKt9D3E13H8SXo+To7SrSjtC1Yr4/u1mXIfyZz7SOL8qBK5HUNO859/EfWYSv6zISfNKqdmtXsgcqnfTX3r6+b+Oq9Jmdyu2nd2vyulp/K771+b+xNnKHOc9kfC7xZHd9+b+ytMNQt/La7vr8xfC6u9u7shJ62s8uX7wpdrR3d2m8fZkXedSLrdd3Gc5qQb3tmpRmSVJpNY1TkNlrwiFnP+6fo+vmf2Az869Ze0CpfyeV9/Pqjn+5rCbB1BrD8UR9Veu837TyzIuN7B0wuD3802TlGLKlQsqhTrK2pP4Gp/qb7VVm5UkypNQ/1udsawOLnU5Bb7h/wHftfbuq4WFWt3p8Wve7lVQ6SaonAXfhcAAAAAAAAAAFD8C/hmhdWH9xN7AAAAAElFTkSuQmCC')\n          no-repeat;\n        display: block;\n        width: 55px;\n        height: 40px;\n        min-width: inherit;\n        border: 1px solid transparent;\n        border-radius: 8px;\n        transition: all 0.2s;\n        padding: 0;\n        cursor: pointer;\n        margin: 0 auto;\n        justify-self: center;\n      }\n\n      #pattern-set button:hover {\n        border-color: var(--md-sys-color-primary);\n        box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);\n      }\n\n      #pattern-set button:active {\n        background-color: rgba(var(--md-sys-color-primary), 0.2);\n        transform: scale(0.98);\n      }\n\n      #pattern-set button[data-value='+u+s'] {\n        background-position: 50% 3px;\n      }\n      #pattern-set button[data-value='+u-s'] {\n        background-position: 50% -97px;\n      }\n      #pattern-set button[data-value='-u+s'] {\n        background-position: 50% -197px;\n      }\n      #pattern-set button[data-value='-u-s'] {\n        background-position: 50% -297px;\n      }\n      #pattern-set button[data-value='+s+u'] {\n        background-position: 50% -397px;\n      }\n      #pattern-set button[data-value='+s-u'] {\n        background-position: 50% -497px;\n      }\n      #pattern-set button[data-value='-s+u'] {\n        background-position: 50% -597px;\n      }\n      #pattern-set button[data-value='-s-u'] {\n        background-position: 50% -697px;\n      }\n      #pattern-set button[data-value='cw'] {\n        background-position: 50% -797px;\n      }\n      #pattern-set button[data-value='ccw'] {\n        background-position: 50% -897px;\n      }\n      #pattern-set button[data-value='zigzag'] {\n        background-position: 50% -997px;\n      }\n      #pattern-set button[data-value='zigzag-reverse'] {\n        background-position: 50% -1097px;\n      }\n\n      label {\n        order: initial;\n      }\n\n      input {\n        order: initial;\n      }\n\n      #skip-numbering {\n        order: initial;\n        grid-column: span 4;\n      }\n\n      label[for='skip-numbering'] {\n        order: 1;\n        grid-column: span 5;\n        text-align: left;\n      }\n    `\n  ]\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    // TODO: background image change to use the url-loader\n    return html`\n      <fieldset fullwidth>\n        <legend><ox-i18n msgid=\"label.location-increase-pattern\">Increase Pattern</ox-i18n></legend>\n\n        <div class=\"property-grid\">\n          <label> <ox-i18n msgid=\"label.start-section\">Start Section</ox-i18n> </label>\n          <input\n            type=\"number\"\n            data-start-section\n            value=\"${this.startSection}\"\n            @change=${(e: Event) => (this.startSection = (e.target! as HTMLInputElement).valueAsNumber)}\n          />\n\n          <label> <ox-i18n msgid=\"label.start-unit\">Start Unit</ox-i18n> </label>\n          <input\n            type=\"number\"\n            data-start-unit\n            value=\"${this.startUnit}\"\n            @change=${(e: Event) => (this.startUnit = (e.target! as HTMLInputElement).valueAsNumber)}\n          />\n\n          <div class=\"checkbox-row\" fullwidth>\n            <input id=\"skip-numbering\" type=\"checkbox\" data-skip-numbering ?checked=\"${this.skipNumbering}\" />\n            <label for=\"skip-numbering\">\n              <ox-i18n msgid=\"label.skip-numbering\">Skip Numbering</ox-i18n>\n            </label>\n          </div>\n\n          <div\n            id=\"pattern-set\"\n            class=\"property-grid location-increase-pattern-btn\"\n            @click=${(e: Event) => this._onTapType(e)}\n          >\n            <button data-value=\"cw\" type=\"button\"></button>\n            <button data-value=\"ccw\" type=\"button\"></button>\n            <button data-value=\"zigzag\" type=\"button\"></button>\n            <button data-value=\"zigzag-reverse\" type=\"button\"></button>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  @property({ type: Number }) startSection: number = 1\n  @property({ type: Number }) startUnit: number = 1\n  @property({ type: Boolean }) skipNumbering: boolean = true\n  @property({ type: Object }) _specificPropEl: HTMLElement | null = null\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.property && this.property.event) {\n      Object.entries(this.property.event).forEach(entry => {\n        if (entry[0]) {\n          document.addEventListener(entry[0] as any, entry[1] as any)\n        }\n      })\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    if (this.property && this.property.event) {\n      Object.entries(this.property.event).forEach(entry => {\n        if (entry[0]) {\n          document.removeEventListener(entry[0] as any, entry[1] as any)\n        }\n      })\n    }\n  }\n\n  _onTapType(e: Event) {\n    var target = e.target as HTMLElement\n\n    const increasingDirection = target?.closest('[data-value]')?.getAttribute('data-value')\n    if (!increasingDirection) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const table = selected[0].parent\n            table.increaseLocation(increasingDirection, this.skipNumbering, this.startSection, this.startUnit)\n          }\n        }\n      })\n    )\n\n    e.stopPropagation()\n  }\n}\n"]}

package/dist/effects/outline.js

@@ -30,7 +30,7 @@ function outlineMesh(mesh) {
     // } else {
     let outlineGeometry = mesh.geometry.clone();
     // }
-    BufferGeometryUtils.mergeBufferGeometries([mesh.geometry, outlineGeometry]); //.mergeVertices()
+    BufferGeometryUtils.mergeGeometries([mesh.geometry, outlineGeometry]); //.mergeVertices()
     outlineGeometry.computeVertexNormals();
     const newMesh = new THREE.Mesh(outlineGeometry, outlineMaterial.clone());
     mesh.add(newMesh);

package/dist/effects/outline.js.map

@@ -1 +1 @@
-{"version":3,"file":"outline.js","sourceRoot":"","sources":["../../src/effects/outline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,iDAAiD,CAAA;AAEtF,MAAM,YAAY,GAAG;;;;;CAKpB,CAAA;AAED,MAAM,cAAc,GAAG;;;;;;CAMtB,CAAA;AACD,MAAM,eAAe,GAAG,IAAI,KAAK,CAAC,cAAc,CAAC;IAC/C,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACzC,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;KACxB;IACD,YAAY;IACZ,cAAc;IACd,IAAI,EAAE,KAAK,CAAC,QAAQ;CACrB,CAAC,CAAA;AAEF,SAAS,WAAW,CAAC,IAAgB;IACnC,sBAAsB;IACtB,wCAAwC;IACxC,iFAAiF;IACjF,WAAW;IACX,IAAI,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;IAC3C,IAAI;IACJ,mBAAmB,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA,CAAC,kBAAkB;IAC9F,eAAe,CAAC,oBAAoB,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,CAAA;IACxE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACjB,OAAO,CAAC,IAAI,GAAG,SAAS,CAAA;IACxB,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,qCAAqC;AACrC,4BAA4B;AAC5B,4BAA4B;AAC5B,4BAA4B;AAC5B,8EAA8E;AAC9E,uDAAuD;AACvD,6DAA6D;AAC7D,uDAAuD;AACvD,mCAAmC;AACnC,0CAA0C;AAC1C,IAAI","sourcesContent":["import * as THREE from 'three'\nimport * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'\n\nconst vertexShader = `\nuniform float outline;\nvoid main() {\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position + normal * outline, 1.0);\n}\n`\n\nconst fragmentShader = `\nuniform vec3 color;\nuniform float opacity;\nvoid main() {\n  gl_FragColor = vec4(color, opacity);\n}\n`\nconst outlineMaterial = new THREE.ShaderMaterial({\n  uniforms: {\n    color: { value: new THREE.Color('#f00') },\n    opacity: { value: 1.0 },\n    outline: { value: 0.2 }\n  },\n  vertexShader,\n  fragmentShader,\n  side: THREE.BackSide\n})\n\nfunction outlineMesh(mesh: THREE.Mesh) {\n  // let outlineGeometry\n  // if (mesh.geometry.isBufferGeometry) {\n  // outlineGeometry = new THREE.BufferGeometry().fromBufferGeometry(mesh.geometry)\n  // } else {\n  let outlineGeometry = mesh.geometry.clone()\n  // }\n  BufferGeometryUtils.mergeBufferGeometries([mesh.geometry, outlineGeometry]) //.mergeVertices()\n  outlineGeometry.computeVertexNormals()\n  const newMesh = new THREE.Mesh(outlineGeometry, outlineMaterial.clone())\n  mesh.add(newMesh)\n  newMesh.name = 'outline'\n  return newMesh\n}\n\n// function outlineAnimate(mesh, t) {\n//   mesh.rotation.x += 0.01\n//   mesh.rotation.y += 0.02\n//   mesh.rotation.z += 0.01\n//   let color = mesh.getObjectByName('outline').material.uniforms.color.value\n//   color.r = Math.sin(t * 0.01 + Math.PI) * 0.5 + 0.5\n//   color.g = Math.sin(t * 0.01 + Math.PI * 0.5) * 0.5 + 0.5\n//   color.b = Math.sin(t * 0.01 + Math.PI) * 0.5 + 0.5\n//   renderer.render(scene, camera)\n//   window.requestAnimationFrame(animate)\n// }\n"]}
+{"version":3,"file":"outline.js","sourceRoot":"","sources":["../../src/effects/outline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,iDAAiD,CAAA;AAEtF,MAAM,YAAY,GAAG;;;;;CAKpB,CAAA;AAED,MAAM,cAAc,GAAG;;;;;;CAMtB,CAAA;AACD,MAAM,eAAe,GAAG,IAAI,KAAK,CAAC,cAAc,CAAC;IAC/C,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACzC,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;QACvB,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;KACxB;IACD,YAAY;IACZ,cAAc;IACd,IAAI,EAAE,KAAK,CAAC,QAAQ;CACrB,CAAC,CAAA;AAEF,SAAS,WAAW,CAAC,IAAgB;IACnC,sBAAsB;IACtB,wCAAwC;IACxC,iFAAiF;IACjF,WAAW;IACX,IAAI,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;IAC3C,IAAI;IACJ,mBAAmB,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA,CAAC,kBAAkB;IACxF,eAAe,CAAC,oBAAoB,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,CAAA;IACxE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACjB,OAAO,CAAC,IAAI,GAAG,SAAS,CAAA;IACxB,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,qCAAqC;AACrC,4BAA4B;AAC5B,4BAA4B;AAC5B,4BAA4B;AAC5B,8EAA8E;AAC9E,uDAAuD;AACvD,6DAA6D;AAC7D,uDAAuD;AACvD,mCAAmC;AACnC,0CAA0C;AAC1C,IAAI","sourcesContent":["import * as THREE from 'three'\nimport * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'\n\nconst vertexShader = `\nuniform float outline;\nvoid main() {\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position + normal * outline, 1.0);\n}\n`\n\nconst fragmentShader = `\nuniform vec3 color;\nuniform float opacity;\nvoid main() {\n  gl_FragColor = vec4(color, opacity);\n}\n`\nconst outlineMaterial = new THREE.ShaderMaterial({\n  uniforms: {\n    color: { value: new THREE.Color('#f00') },\n    opacity: { value: 1.0 },\n    outline: { value: 0.2 }\n  },\n  vertexShader,\n  fragmentShader,\n  side: THREE.BackSide\n})\n\nfunction outlineMesh(mesh: THREE.Mesh) {\n  // let outlineGeometry\n  // if (mesh.geometry.isBufferGeometry) {\n  // outlineGeometry = new THREE.BufferGeometry().fromBufferGeometry(mesh.geometry)\n  // } else {\n  let outlineGeometry = mesh.geometry.clone()\n  // }\n  BufferGeometryUtils.mergeGeometries([mesh.geometry, outlineGeometry]) //.mergeVertices()\n  outlineGeometry.computeVertexNormals()\n  const newMesh = new THREE.Mesh(outlineGeometry, outlineMaterial.clone())\n  mesh.add(newMesh)\n  newMesh.name = 'outline'\n  return newMesh\n}\n\n// function outlineAnimate(mesh, t) {\n//   mesh.rotation.x += 0.01\n//   mesh.rotation.y += 0.02\n//   mesh.rotation.z += 0.01\n//   let color = mesh.getObjectByName('outline').material.uniforms.color.value\n//   color.r = Math.sin(t * 0.01 + Math.PI) * 0.5 + 0.5\n//   color.g = Math.sin(t * 0.01 + Math.PI * 0.5) * 0.5 + 0.5\n//   color.b = Math.sin(t * 0.01 + Math.PI) * 0.5 + 0.5\n//   renderer.render(scene, camera)\n//   window.requestAnimationFrame(animate)\n// }\n"]}

package/dist/index.d.ts

@@ -1,22 +1,10 @@
-import './scene/component.js';
-import './text.js';
-import './html-overlay-element.js';
-export * from './threed/index.js';
-export * from './gltf-object.js';
-export * from './camera.js';
-export * from './banner.js';
-export * from './sprite.js';
-export * from './cube.js';
-export * from './cylinder.js';
 export * from './desk.js';
-export * from './ellipse.js';
-export * from './polygon.js';
 export * from './rack.js';
 export * from './rack-table.js';
 export * from './rack-table-cell.js';
-export * from './rect.js';
-export * from './sphere.js';
 export * from './visualizer.js';
-export * from './three-container.js';
-export * from './wall.js';
-export * from './light.js';
+export * from './stock.js';
+export * from './signal-tower.js';
+export * from './tank.js';
+export * from './vehicle.js';
+export * from './carrier.js';

package/dist/index.js

@@ -1,26 +1,16 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import './scene/component.js';
-import './text.js';
-import './html-overlay-element.js';
-export * from './threed/index.js';
-export * from './gltf-object.js';
-export * from './camera.js';
-export * from './banner.js';
-export * from './sprite.js';
-export * from './cube.js';
-export * from './cylinder.js';
+// threed 인프라 + 범용 3D 컴포넌트는 things-scene에서 제공
+// 여기서는 도메인 특화 컴포넌트만 export
 export * from './desk.js';
-export * from './ellipse.js';
-export * from './polygon.js';
 export * from './rack.js';
 export * from './rack-table.js';
 export * from './rack-table-cell.js';
-export * from './rect.js';
-export * from './sphere.js';
 export * from './visualizer.js';
-export * from './three-container.js';
-export * from './wall.js';
-export * from './light.js';
+export * from './stock.js';
+export * from './signal-tower.js';
+export * from './tank.js';
+export * from './vehicle.js';
+export * from './carrier.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,sBAAsB,CAAA;AAE7B,OAAO,WAAW,CAAA;AAClB,OAAO,2BAA2B,CAAA;AAElC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './scene/component.js'\n\nimport './text.js'\nimport './html-overlay-element.js'\n\nexport * from './threed/index.js'\n\nexport * from './gltf-object.js'\nexport * from './camera.js'\nexport * from './banner.js'\nexport * from './sprite.js'\nexport * from './cube.js'\nexport * from './cylinder.js'\nexport * from './desk.js'\nexport * from './ellipse.js'\nexport * from './polygon.js'\nexport * from './rack.js'\nexport * from './rack-table.js'\nexport * from './rack-table-cell.js'\nexport * from './rect.js'\nexport * from './sphere.js'\nexport * from './visualizer.js'\nexport * from './three-container.js'\nexport * from './wall.js'\nexport * from './light.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,6CAA6C;AAC7C,2BAA2B;AAE3B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\n// threed 인프라 + 범용 3D 컴포넌트는 things-scene에서 제공\n// 여기서는 도메인 특화 컴포넌트만 export\n\nexport * from './desk.js'\nexport * from './rack.js'\nexport * from './rack-table.js'\nexport * from './rack-table-cell.js'\nexport * from './visualizer.js'\nexport * from './stock.js'\nexport * from './signal-tower.js'\nexport * from './tank.js'\nexport * from './vehicle.js'\nexport * from './carrier.js'\n"]}

package/dist/rack-table-3d.d.ts

@@ -0,0 +1,16 @@
+import { RealObjectGroup } from '@hatiolab/things-scene';
+import { Rack } from './rack.js';
+export declare class RackTable3d extends RealObjectGroup {
+    private _frameMaterial?;
+    build(): void;
+    get position(): {
+        x: number;
+        y: any;
+        z: number;
+    };
+    private createFrameMaterial;
+    createRacks(): void;
+    mergeAndAddRackCommonObjects(racks: Rack[]): void;
+    dispose(): void;
+    updateAlpha(): void;
+}

package/dist/rack-table-3d.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import * as THREE from 'three';
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { RealObjectGroup } from '@hatiolab/things-scene';
+import { Rack } from './rack.js';
+const DEFAULT_FRAME_COLOR = 0x8a8a8a;
+export class RackTable3d extends RealObjectGroup {
+    _frameMaterial;
+    build() {
+        super.build();
+        this.createRacks();
+    }
+    get position() {
+        const { zPos = 0 } = this.component.state;
+        return {
+            x: this.cx || 0,
+            y: zPos,
+            z: this.cy || 0
+        };
+    }
+    createFrameMaterial() {
+        this._frameMaterial?.dispose();
+        const { strokeStyle } = this.component.state;
+        const color = strokeStyle && typeof strokeStyle === 'string' ? strokeStyle : DEFAULT_FRAME_COLOR;
+        this._frameMaterial = new THREE.MeshStandardMaterial({
+            color,
+            roughness: 0.35,
+            metalness: 0.85
+        });
+        return this._frameMaterial;
+    }
+    createRacks() {
+        const { rotation = 0, shelfLocations, shelves = 1 } = this.component.state;
+        this.object3d.rotation.y = -rotation;
+        const racks = this.component.components
+            .map((cell) => {
+            const { shelfLocations: shelfLoc = shelfLocations, isEmpty } = cell.state;
+            if (!isEmpty) {
+                cell.setState('shelfLocations', shelfLoc);
+                const rack = new Rack(cell);
+                rack.update();
+                this.object3d.add(rack.object3d);
+                return rack;
+            }
+            return;
+        })
+            .filter((rack) => !!rack);
+        this.mergeAndAddRackCommonObjects(racks);
+    }
+    mergeAndAddRackCommonObjects(racks) {
+        const framesGeometries = [];
+        const boardsGeometries = [];
+        if (racks.length > 0) {
+            racks.forEach(rack => {
+                const geometry = rack.frame;
+                if (!geometry) {
+                    return;
+                }
+                geometry.translate(rack.position.x, rack.position.y, rack.position.z);
+                geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z);
+                framesGeometries.push(geometry);
+            });
+            if (framesGeometries.length > 0) {
+                const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(framesGeometries), this.createFrameMaterial());
+                this.object3d.add(frameMesh);
+            }
+            racks.forEach(rack => {
+                const geometry = rack.board;
+                if (!geometry) {
+                    return;
+                }
+                geometry.translate(rack.position.x, rack.position.y, rack.position.z);
+                geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z);
+                boardsGeometries.push(geometry);
+            });
+            if (boardsGeometries.length > 0) {
+                const material = Rack.boardMaterial;
+                material.opacity = 0.5;
+                material.transparent = true;
+                const boardMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(boardsGeometries), material);
+                this.object3d.add(boardMesh);
+            }
+        }
+    }
+    dispose() {
+        this._frameMaterial?.dispose();
+        this._frameMaterial = undefined;
+        super.dispose();
+    }
+    updateAlpha() { }
+}
+//# sourceMappingURL=rack-table-3d.js.map

package/dist/rack-table-3d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rack-table-3d.js","sourceRoot":"","sources":["../src/rack-table-3d.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\nimport * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'\nimport { Component, RealObjectGroup } from '@hatiolab/things-scene'\n\nimport { Rack } from './rack.js'\nimport type { RackTable } from './rack-table.js'\n\nconst DEFAULT_FRAME_COLOR = 0x8a8a8a\n\nexport class RackTable3d extends RealObjectGroup {\n  private _frameMaterial?: THREE.MeshStandardMaterial\n\n  build() {\n    super.build()\n\n    this.createRacks()\n  }\n\n  get position() {\n    const { zPos = 0 } = this.component.state\n\n    return {\n      x: this.cx || 0,\n      y: zPos,\n      z: this.cy || 0\n    }\n  }\n\n  private createFrameMaterial(): THREE.MeshStandardMaterial {\n    this._frameMaterial?.dispose()\n\n    const { strokeStyle } = this.component.state\n    const color = strokeStyle && typeof strokeStyle === 'string' ? strokeStyle : DEFAULT_FRAME_COLOR\n\n    this._frameMaterial = new THREE.MeshStandardMaterial({\n      color,\n      roughness: 0.35,\n      metalness: 0.85\n    })\n\n    return this._frameMaterial\n  }\n\n  createRacks() {\n    const { rotation = 0, shelfLocations, shelves = 1 } = this.component.state\n\n    this.object3d.rotation.y = -rotation\n\n    const racks = (this.component as unknown as RackTable).components\n      .map((cell: Component) => {\n        const { shelfLocations: shelfLoc = shelfLocations, isEmpty } = cell.state\n\n        if (!isEmpty) {\n          cell.setState('shelfLocations', shelfLoc)\n\n          const rack = new Rack(cell)\n\n          rack.update()\n          this.object3d.add(rack.object3d)\n\n          return rack\n        }\n        return\n      })\n      .filter((rack): rack is Rack => !!rack)\n\n    this.mergeAndAddRackCommonObjects(racks)\n  }\n\n  mergeAndAddRackCommonObjects(racks: Rack[]) {\n    const framesGeometries: THREE.BufferGeometry[] = []\n    const boardsGeometries: THREE.BufferGeometry[] = []\n\n    if (racks.length > 0) {\n      racks.forEach(rack => {\n        const geometry = rack.frame\n\n        if (!geometry) {\n          return\n        }\n\n        geometry.translate(rack.position.x, rack.position.y, rack.position.z)\n        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)\n        framesGeometries.push(geometry)\n      })\n\n      if (framesGeometries.length > 0) {\n        const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(framesGeometries), this.createFrameMaterial())\n        this.object3d.add(frameMesh)\n      }\n\n      racks.forEach(rack => {\n        const geometry = rack.board\n\n        if (!geometry) {\n          return\n        }\n\n        geometry.translate(rack.position.x, rack.position.y, rack.position.z)\n        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)\n        boardsGeometries.push(geometry)\n      })\n\n      if (boardsGeometries.length > 0) {\n        const material = Rack.boardMaterial\n        material.opacity = 0.5\n        material.transparent = true\n\n        const boardMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(boardsGeometries), material)\n\n        this.object3d.add(boardMesh)\n      }\n    }\n  }\n\n  dispose() {\n    this._frameMaterial?.dispose()\n    this._frameMaterial = undefined\n\n    super.dispose()\n  }\n\n  updateAlpha() {}\n}\n"]}