@operato/scene-legend 1.2.27 → 1.2.32

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

@@ -0,0 +1,130 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import { css, html } from 'lit';
+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';
+let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
+    constructor() {
+        super(...arguments);
+        this.width = 0;
+        this.height = 0;
+        this.depth = 0;
+    }
+    editorTemplate(value, spec) {
+        const valid = this.width && this.height && this.depth;
+        var property = spec.property || {};
+        var { action } = property;
+        return html `
+      <fieldset fullwidth>
+        <legend><ox-i18n msgid="label.gltf-info">GLTF info.</ox-i18n></legend>
+
+        <div>
+          <div info>
+            <div label>[W x H x D] :</div>
+            ${valid
+            ? html ` <div value>${this.width} x ${this.height} x ${this.depth}</div>
+                  <mwc-icon-button
+                    icon="autorenew"
+                    @click=${(e) => {
+                this.dispatchEvent(new CustomEvent('i-need-selected', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        callback: (selected) => {
+                            typeof action === 'function' &&
+                                action(selected[0], {
+                                    width: this.width,
+                                    height: this.height,
+                                    depth: this.depth
+                                });
+                        }
+                    }
+                }));
+            }}
+                  ></mwc-icon-button>`
+            : html ` <div></div> `}
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('src')) {
+            this.dispatchEvent(new CustomEvent('i-need-selected', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    callback: async (selected) => {
+                        await this.fetchSourceInfo(selected[0], this.src);
+                    }
+                }
+            }));
+        }
+    }
+    async fetchSourceInfo(component, src) {
+        if (!src || !src.trim()) {
+            return;
+        }
+        try {
+            const path = component.app.url(src);
+            let gltfLoader = new GLTFLoader();
+            gltfLoader.setCrossOrigin('use-credentials');
+            return new Promise((resolve) => {
+                gltfLoader.load(path, gltf => {
+                    var box = new THREE.Box3().setFromObject(gltf.scene);
+                    var { x, y, z } = box.getSize(new THREE.Vector3());
+                    this.width = Math.floor(x);
+                    this.depth = Math.floor(y);
+                    this.height = Math.floor(z);
+                    resolve();
+                });
+            });
+        }
+        catch (e) {
+            console.error(e);
+            return;
+        }
+    }
+};
+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] mwc-icon-button {
+        margin-left: auto;
+        --mdc-icon-button-size: 24px;
+      }
+    `
+];
+__decorate([
+    property({ type: Number })
+], GLTFInfoEditor.prototype, "src", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "width", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "height", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "depth", void 0);
+GLTFInfoEditor = __decorate([
+    customElement('property-editor-gltf-info')
+], GLTFInfoEditor);
+export default GLTFInfoEditor;
+//# sourceMappingURL=property-editor-gltf-info.js.map

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

@@ -0,0 +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 '@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'\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] mwc-icon-button {\n        margin-left: auto;\n        --mdc-icon-button-size: 24px;\n      }\n    `\n  ]\n\n  @property({ type: Number }) 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                  <mwc-icon-button\n                    icon=\"autorenew\"\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                  ></mwc-icon-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"]}

package/dist/editors/property-editor-legend-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-editor-legend-status.js","sourceRoot":"","sources":["../../src/editors/property-editor-legend-status.ts"],"names":[],"mappings":";AAAA,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,gBAAgB;IAC9D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,iCAAiC,KAAK,qCAAqC,CAAA;IACxF,CAAC;CACF,CAAA;AAJY,0BAA0B;IADtC,aAAa,CAAC,+BAA+B,CAAC;GAClC,0BAA0B,CAItC;SAJY,0BAA0B","sourcesContent":["import './editor-legend-status'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('property-editor-legend-status')\nexport class PropertyEditorLegendStatus extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html` <editor-legend-status .value=${value} fullwidth></editor-legend-status> `\n  }\n}\n"]}
+{"version":3,"file":"property-editor-legend-status.js","sourceRoot":"","sources":["../../src/editors/property-editor-legend-status.ts"],"names":[],"mappings":";AAAA,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGzE,IAAa,0BAA0B,GAAvC,MAAa,0BAA2B,SAAQ,gBAAgB;IAC9D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,iCAAiC,KAAK,qCAAqC,CAAA;IACxF,CAAC;CACF,CAAA;AAJY,0BAA0B;IADtC,aAAa,CAAC,+BAA+B,CAAC;GAClC,0BAA0B,CAItC;SAJY,0BAA0B","sourcesContent":["import './editor-legend-status'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('property-editor-legend-status')\nexport class PropertyEditorLegendStatus extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html` <editor-legend-status .value=${value} fullwidth></editor-legend-status> `\n  }\n}\n"]}

package/dist/editors/property-editor-svg-info.d.ts

@@ -0,0 +1,15 @@
+import '@operato/i18n/ox-i18n.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+import { Component } from '@hatiolab/things-scene';
+export default class SVGInfoEditor extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    src?: string;
+    ids: SVGPathElement[];
+    private fillStyleSaved;
+    editorTemplate(value: any, spec: PropertySpec): TemplateResult;
+    onEnterEvent(path: SVGPathElement): void;
+    onOutEvent(path: SVGPathElement): void;
+    updated(changes: PropertyValues<this>): void;
+    fetchSourceInfo(component: Component, src: string): Promise<void>;
+}

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

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+let SVGInfoEditor = class SVGInfoEditor extends OxPropertyEditor {
+    constructor() {
+        super(...arguments);
+        this.ids = [];
+        this.fillStyleSaved = [];
+    }
+    editorTemplate(value, spec) {
+        return html `
+      <fieldset fullwidth>
+        <ul info>
+          ${this.ids.map(path => html `<li @mouseenter=${() => this.onEnterEvent(path)} @mouseout=${() => this.onOutEvent(path)}>
+                <div style="fillStyle:${path.style.fill}">${path.id}</div>
+              </li>`)}
+        </ul>
+      </fieldset>
+    `;
+    }
+    onEnterEvent(path) {
+        this.fillStyleSaved.push(path.style.fill);
+        path.style.fill = 'red';
+    }
+    onOutEvent(path) {
+        path.style.fill = this.fillStyleSaved.pop();
+    }
+    updated(changes) {
+        if (changes.has('src')) {
+            this.dispatchEvent(new CustomEvent('i-need-selected', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    callback: (selected) => {
+                        this.fetchSourceInfo(selected[0], this.src);
+                    }
+                }
+            }));
+        }
+    }
+    async fetchSourceInfo(component, src) {
+        if (!src || !src.trim()) {
+            return;
+        }
+        const element = component.element;
+        const elements = element.querySelectorAll('path[id]');
+        this.ids = Array.from(elements).map(path => path);
+    }
+};
+SVGInfoEditor.styles = [
+    ...OxPropertyEditor.styles,
+    css `
+      ul[info] {
+        margin: 0;
+        font-size: 1em;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], SVGInfoEditor.prototype, "src", void 0);
+__decorate([
+    state()
+], SVGInfoEditor.prototype, "ids", void 0);
+SVGInfoEditor = __decorate([
+    customElement('property-editor-svg-info')
+], SVGInfoEditor);
+export default SVGInfoEditor;
+//# sourceMappingURL=property-editor-svg-info.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-svg-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-svg-info.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAIzE,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,gBAAgB;IAA3D;;QAaW,QAAG,GAAqB,EAAE,CAAA;QAE3B,mBAAc,GAAU,EAAE,CAAA;IAoDpC,CAAC;IAlDC,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,GAAG,CAAC,GAAG,CACZ,IAAI,CAAC,EAAE,CACL,IAAI,CAAA,mBAAmB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;wCACnE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;oBAC/C,CACT;;;KAGN,CAAA;IACH,CAAC;IAED,YAAY,CAAC,IAAoB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QACzC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAA;IACzB,CAAC;IAED,UAAU,CAAC,IAAoB;QAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAA;IAC7C,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACjC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;wBAC5B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAI,CAAC,CAAA;oBAC9C,CAAC;iBACF;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,SAAoB,EAAE,GAAW;QACrD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE;YACvB,OAAM;SACP;QAED,MAAM,OAAO,GAAI,SAAkC,CAAC,OAAyB,CAAA;QAE7E,MAAM,QAAQ,GAAG,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;QACrD,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAQ,CAAA;IAC1D,CAAC;;AAjEM,oBAAM,GAAG;IACd,GAAG,gBAAgB,CAAC,MAAM;IAC1B,GAAG,CAAA;;;;;KAKF;CACF,AARY,CAQZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAa;AAE/B;IAAR,KAAK,EAAE;0CAA2B;AAbhB,aAAa;IADjC,aAAa,CAAC,0BAA0B,CAAC;GACrB,aAAa,CAmEjC;eAnEoB,aAAa","sourcesContent":["import '@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, HTMLOverlayContainer } from '@hatiolab/things-scene'\n\n@customElement('property-editor-svg-info')\nexport default class SVGInfoEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      ul[info] {\n        margin: 0;\n        font-size: 1em;\n      }\n    `\n  ]\n\n  @property({ type: String }) src?: string\n\n  @state() ids: SVGPathElement[] = []\n\n  private fillStyleSaved: any[] = []\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html`\n      <fieldset fullwidth>\n        <ul info>\n          ${this.ids.map(\n            path =>\n              html`<li @mouseenter=${() => this.onEnterEvent(path)} @mouseout=${() => this.onOutEvent(path)}>\n                <div style=\"fillStyle:${path.style.fill}\">${path.id}</div>\n              </li>`\n          )}\n        </ul>\n      </fieldset>\n    `\n  }\n\n  onEnterEvent(path: SVGPathElement) {\n    this.fillStyleSaved.push(path.style.fill)\n    path.style.fill = 'red'\n  }\n\n  onOutEvent(path: SVGPathElement) {\n    path.style.fill = this.fillStyleSaved.pop()\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: (selected: any[]) => {\n              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    const element = (component as HTMLOverlayContainer).element as HTMLDivElement\n\n    const elements = element.querySelectorAll('path[id]')\n    this.ids = Array.from(elements).map(path => path) as any\n  }\n}\n"]}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Legend } from './legend';
 export { default as LegendItem } from './legend-item';
+export { default as Svg } from './svg';

package/dist/index.js

@@ -3,4 +3,5 @@
  */
 export { default as Legend } from './legend';
 export { default as LegendItem } from './legend-item';
+export { default as Svg } from './svg';
 //# 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,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as Legend } from './legend'\nexport { default as LegendItem } from './legend-item'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AAErD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as Legend } from './legend'\nexport { default as LegendItem } from './legend-item'\n\nexport { default as Svg } from './svg'\n"]}

package/dist/svg.d.ts

@@ -0,0 +1,141 @@
+import { Component, HTMLOverlayContainer, Properties } from '@hatiolab/things-scene';
+export default class Svg extends HTMLOverlayContainer {
+    static get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                displayField: string;
+                displayFullUrl: boolean;
+                baseUrlAlias: string;
+                defaultStorage: string;
+                storageFilters: {
+                    type: ArrayConstructor;
+                    value: {
+                        name: string;
+                        value: string;
+                    }[];
+                };
+                useUpload: boolean;
+                component?: undefined;
+            };
+            observe: (this: HTMLElement, src: string) => void;
+            readonly?: undefined;
+            editor?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            readonly: boolean;
+            editor: {
+                fullwidth: boolean;
+            };
+            property?: undefined;
+            observe?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                component: string;
+                displayField?: undefined;
+                displayFullUrl?: undefined;
+                baseUrlAlias?: undefined;
+                defaultStorage?: undefined;
+                storageFilters?: undefined;
+                useUpload?: undefined;
+            };
+            observe?: undefined;
+            readonly?: undefined;
+            editor?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+            observe?: undefined;
+            readonly?: undefined;
+            editor?: undefined;
+        })[];
+    };
+    oncreate_element(div: HTMLDivElement): Promise<void>;
+    private _value?;
+    private _legendTarget?;
+    get legendTarget(): Component | undefined;
+    loadSVG(div: HTMLElement): Promise<void>;
+    setElementProperties(div: HTMLDivElement): Promise<void>;
+    get src(): any;
+    set src(src: any);
+    onchange(after: Properties, before: Properties): void;
+    onchangeSrc(src: string): void;
+    onchangeValue(value: any): void;
+    get tagName(): string;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                displayField: string;
+                displayFullUrl: boolean;
+                baseUrlAlias: string;
+                defaultStorage: string;
+                storageFilters: {
+                    type: ArrayConstructor;
+                    value: {
+                        name: string;
+                        value: string;
+                    }[];
+                };
+                useUpload: boolean;
+                component?: undefined;
+            };
+            observe: (this: HTMLElement, src: string) => void;
+            readonly?: undefined;
+            editor?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            readonly: boolean;
+            editor: {
+                fullwidth: boolean;
+            };
+            property?: undefined;
+            observe?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                component: string;
+                displayField?: undefined;
+                displayFullUrl?: undefined;
+                baseUrlAlias?: undefined;
+                defaultStorage?: undefined;
+                storageFilters?: undefined;
+                useUpload?: undefined;
+            };
+            observe?: undefined;
+            readonly?: undefined;
+            editor?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+            observe?: undefined;
+            readonly?: undefined;
+            editor?: undefined;
+        })[];
+    };
+    get value(): any;
+    set value(value: any);
+}

package/dist/svg.js

@@ -0,0 +1,159 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'image-selector',
+            label: 'image-src',
+            name: 'src',
+            property: {
+                displayField: 'id',
+                displayFullUrl: true,
+                baseUrlAlias: '$base_url',
+                defaultStorage: 'scene-image',
+                storageFilters: {
+                    type: Array,
+                    value: [
+                        {
+                            name: 'category',
+                            value: 'image'
+                        }
+                    ]
+                },
+                useUpload: true
+            },
+            observe: function (src) {
+                const info = this.parentNode.querySelector('[name=svgInfo]');
+                info.src = src;
+            }
+        },
+        {
+            type: 'svg-info',
+            label: 'svg-info',
+            name: 'svgInfo',
+            readonly: true,
+            editor: {
+                fullwidth: true
+            }
+        },
+        {
+            type: 'id-input',
+            label: 'legend-target',
+            name: 'legendTarget',
+            property: {
+                component: 'legend'
+            }
+        },
+        {
+            type: 'string',
+            label: 'id-field',
+            name: 'idField'
+        },
+        {
+            type: 'string',
+            label: 'value-field',
+            name: 'valueField'
+        }
+    ]
+};
+import { Component, HTMLOverlayContainer } from '@hatiolab/things-scene';
+export default class Svg extends HTMLOverlayContainer {
+    static get nature() {
+        return NATURE;
+    }
+    async oncreate_element(div) {
+        await this.loadSVG(div);
+    }
+    get legendTarget() {
+        var { legendTarget } = this.state;
+        if (!this._legendTarget && legendTarget) {
+            this._legendTarget = this.root.findById(legendTarget);
+            this._legendTarget && this._legendTarget.on('change', this.onchangeData, this);
+        }
+        return this._legendTarget;
+    }
+    async loadSVG(div) {
+        try {
+            const parser = new DOMParser();
+            const response = await fetch(this.src);
+            div.innerHTML = '';
+            if (response.ok) {
+                const text = await response.text();
+                const doc = await parser.parseFromString(text, 'image/svg+xml');
+                const element = doc.querySelector('svg');
+                element && div.appendChild(element);
+            }
+            else {
+                const error = await response.text();
+                console.error('load SVG error', error);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    async setElementProperties(div) { }
+    get src() {
+        return this.get('src');
+    }
+    set src(src) {
+        this.set('src', src);
+    }
+    onchange(after, before) {
+        'src' in after && this.onchangeSrc(after.src);
+        'value' in after && this.onchangeValue(after.value);
+    }
+    onchangeSrc(src) {
+        this.loadSVG(this.element);
+    }
+    onchangeValue(value) {
+        if (typeof this.value !== 'object' || !Array.isArray(this.value)) {
+            return;
+        }
+        const { idField, valueField } = this.state;
+        const legendTarget = this.legendTarget;
+        if (!legendTarget) {
+            return;
+        }
+        const { field: statusField, defaultColor, ranges } = legendTarget.get('status');
+        if (!(statusField && ranges)) {
+            return;
+        }
+        this.value.forEach(item => {
+            if (!(idField in item) || !(valueField in item)) {
+                return;
+            }
+            var id = item[idField];
+            var status = Number(item[valueField]);
+            var range = ranges.find((range, index) => {
+                let { min, max } = range;
+                min = Number(min) || min;
+                max = Number(max) || max;
+                return max > status && (min === undefined || min <= status);
+            });
+            const path = this.element.querySelector(`path[id="${String(id)}"]`);
+            if (path) {
+                path.style.fill = (range === null || range === void 0 ? void 0 : range.color) || defaultColor || 'transparent';
+            }
+        });
+    }
+    get tagName() {
+        return 'div';
+    }
+    get nature() {
+        return NATURE;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.onchangeValue(value);
+    }
+}
+Component.register('svg', Svg);
+//# sourceMappingURL=svg.js.map

package/dist/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../src/svg.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'image-selector',\n      label: 'image-src',\n      name: 'src',\n      property: {\n        displayField: 'id',\n        displayFullUrl: true,\n        baseUrlAlias: '$base_url',\n        defaultStorage: 'scene-image',\n        storageFilters: {\n          type: Array,\n          value: [\n            {\n              name: 'category',\n              value: 'image'\n            }\n          ]\n        },\n        useUpload: true\n      },\n      observe: function (this: HTMLElement, src: string) {\n        const info: any = this.parentNode!.querySelector('[name=svgInfo]')\n        info.src = src\n      }\n    },\n    {\n      type: 'svg-info',\n      label: 'svg-info',\n      name: 'svgInfo',\n      readonly: true,\n      editor: {\n        fullwidth: true\n      }\n    },\n    {\n      type: 'id-input',\n      label: 'legend-target',\n      name: 'legendTarget',\n      property: {\n        component: 'legend'\n      }\n    },\n    {\n      type: 'string',\n      label: 'id-field',\n      name: 'idField'\n    },\n    {\n      type: 'string',\n      label: 'value-field',\n      name: 'valueField'\n    }\n  ]\n}\n\nimport { Component, HTMLOverlayContainer, Properties } from '@hatiolab/things-scene'\nimport Legend from './legend'\n\nexport default class Svg extends HTMLOverlayContainer {\n  static get nature() {\n    return NATURE\n  }\n\n  async oncreate_element(div: HTMLDivElement) {\n    await this.loadSVG(div)\n  }\n\n  private _value?: any\n  private _legendTarget?: Component\n\n  get legendTarget() {\n    var { legendTarget } = this.state\n\n    if (!this._legendTarget && legendTarget) {\n      this._legendTarget = this.root.findById(legendTarget)\n      this._legendTarget && this._legendTarget.on('change', this.onchangeData, this)\n    }\n\n    return this._legendTarget\n  }\n\n  async loadSVG(div: HTMLElement) {\n    try {\n      const parser = new DOMParser()\n\n      const response = await fetch(this.src)\n\n      div.innerHTML = ''\n\n      if (response.ok) {\n        const text = await response.text()\n        const doc = await parser.parseFromString(text, 'image/svg+xml')\n        const element = doc.querySelector('svg')\n\n        element && div.appendChild(element)\n      } else {\n        const error = await response.text()\n        console.error('load SVG error', error)\n      }\n    } catch (error) {\n      console.error(error)\n    }\n  }\n\n  async setElementProperties(div: HTMLDivElement) {}\n\n  get src() {\n    return this.get('src')\n  }\n\n  set src(src) {\n    this.set('src', src)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    'src' in after && this.onchangeSrc(after.src)\n    'value' in after && this.onchangeValue(after.value)\n  }\n\n  onchangeSrc(src: string) {\n    this.loadSVG(this.element)\n  }\n\n  onchangeValue(value: any): void {\n    if (typeof this.value !== 'object' || !Array.isArray(this.value)) {\n      return\n    }\n\n    const { idField, valueField } = this.state\n    const legendTarget = this.legendTarget\n\n    if (!legendTarget) {\n      return\n    }\n\n    const {\n      field: statusField,\n      defaultColor,\n      ranges\n    } = legendTarget.get('status') as {\n      field: string\n      defaultColor: string\n      ranges: { min: number; max: number; color: string }[]\n    }\n\n    if (!(statusField && ranges)) {\n      return\n    }\n\n    this.value.forEach(item => {\n      if (!(idField in item) || !(valueField in item)) {\n        return\n      }\n\n      var id = item[idField]\n      var status = Number(item[valueField])\n\n      var range = ranges.find((range, index) => {\n        let { min, max } = range\n\n        min = Number(min) || min\n        max = Number(max) || max\n\n        return max > status && (min === undefined || min <= status)\n      })\n\n      const path = this.element.querySelector(`path[id=\"${String(id)}\"]`) as SVGPathElement\n      if (path) {\n        path.style.fill = range?.color || defaultColor || 'transparent'\n      }\n    })\n  }\n\n  get tagName() {\n    return 'div'\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get value() {\n    return this._value\n  }\n\n  set value(value) {\n    this._value = value\n    this.onchangeValue(value)\n  }\n}\n\nComponent.register('svg', Svg)\n"]}

package/dist/templates/index.js

@@ -1,3 +1,4 @@
 import legend from './legend';
-export default [legend];
+import svg from './svg';
+export default [legend, svg];
 //# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,eAAe,CAAC,MAAM,CAAC,CAAA","sourcesContent":["import legend from './legend'\n\nexport default [legend]\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,GAAG,MAAM,OAAO,CAAA;AAEvB,eAAe,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA","sourcesContent":["import legend from './legend'\nimport svg from './svg'\n\nexport default [legend, svg]\n"]}

package/dist/templates/legend copy.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fillStyle: string;
+        direction: string;
+        strokeStyle: string;
+        lineWidth: number;
+    };
+};
+export default _default;

package/dist/templates/legend copy.js

@@ -0,0 +1,19 @@
+const icon = new URL('../../icons/legend.png', import.meta.url).href;
+export default {
+    type: 'legend',
+    description: 'legend for visualizer',
+    group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+    icon,
+    model: {
+        type: 'legend',
+        left: 100,
+        top: 100,
+        width: 200,
+        height: 150,
+        fillStyle: '#efefef',
+        direction: 'vertical',
+        strokeStyle: 'rgba(0, 0, 0, 0.3)',
+        lineWidth: 1
+    }
+};
+//# sourceMappingURL=legend%20copy.js.map

package/dist/templates/legend copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend copy.js","sourceRoot":"","sources":["../../src/templates/legend copy.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEpE,eAAe;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,uBAAuB;IACpC,KAAK,EAAE,WAAW,CAAC,gGAAgG;IACnH,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,WAAW,EAAE,oBAAoB;QACjC,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/legend.png', import.meta.url).href\n\nexport default {\n  type: 'legend',\n  description: 'legend for visualizer',\n  group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'legend',\n    left: 100,\n    top: 100,\n    width: 200,\n    height: 150,\n    fillStyle: '#efefef',\n    direction: 'vertical',\n    strokeStyle: 'rgba(0, 0, 0, 0.3)',\n    lineWidth: 1\n  }\n}\n"]}

package/dist/templates/svg.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fillStyle: string;
+        direction: string;
+        strokeStyle: string;
+        lineWidth: number;
+    };
+};
+export default _default;