@operato/scene-legend 0.0.11

package/@types/global/index.d.ts

@@ -0,0 +1 @@
+declare module '*.png'

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### [0.0.11](https://github.com/things-scene/operato-scene/compare/v0.0.10...v0.0.11) (2021-12-06)
+
+
+### :rocket: New Features
+
+* add wheel-sorter, legend, timer and compass ([dc90f73](https://github.com/things-scene/operato-scene/commit/dc90f73054424c0867a1c4a28d51da6e7fab8b85))
+* add wheel-sorter, legend, timer and compass ([518950c](https://github.com/things-scene/operato-scene/commit/518950cb5476048504a415a1dd0a1fd2d4359a77))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Hearty, Oh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+범례 제공자의 범례 정보를 표현해주는 컴포넌트
+
+범례 제공자
+
+- 범례 리스트
+- 범례 : 컬러 또는 이미지, 레이블
+
+properties :
+
+- legend <= stockStatus
+
+범례 컴포넌트 특성
+
+- 행 또는 열
+- 행열수
+
+범례 컴포넌트는 범례 제공자의 범례 정보 변화이벤트에 리스너를 등록한다.
+
+## build
+
+`$ yarn build`
+
+| type | filename                  | for            | tested |
+| ---- | ------------------------- | -------------- | ------ |
+| UMD  | things-scene-legend.js    | modern browser | O      |
+| UMD  | things-scene-legend-ie.js | ie 11          | O      |
+| ESM  | things-scene-legend.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/dist/editors/editor-legend-status.d.ts

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

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

@@ -0,0 +1,313 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let EditorLegendStatus = class EditorLegendStatus extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._ranges = [];
+        this._changingNow = false;
+    }
+    render() {
+        return html `
+      <legend>
+        <i18n-msg msgid="label.status">Status</i18n-msg>
+      </legend>
+
+      <label class="stock-field">
+        <i18n-msg msgid="label.field">Field</i18n-msg>
+      </label>
+      <input
+        type="text"
+        .value=${this._statusField || ''}
+        @change=${(e) => {
+            this._statusField = e.target.value;
+        }}
+      />
+      <label class="default-color">
+        <i18n-msg msgid="label.default-color">Default Color</i18n-msg>
+      </label>
+      <things-editor-color
+        name="default-color"
+        .value=${this._defaultColor || ''}
+        placeholder="default color"
+        @change=${(e) => {
+            this._defaultColor = e.target.value;
+        }}
+      ></things-editor-color>
+
+      <table>
+        <tr>
+          <th>
+            Min &le; <br />Field<br />
+            &lt; Max
+          </th>
+          <th>color</th>
+          <th>disp. text</th>
+          <th></th>
+        </tr>
+        ${this._ranges.map(item => html `
+            <tr data-record>
+              <td>
+                <input type="text" data-min placeholder="min" .value="${item.min}" />
+                <span>~</span>
+                <input type="text" data-max placeholder="max" .value="${item.max}" />
+              </td>
+              <td>
+                <things-editor-color data-color .value="${item.color}" placeholder="color"></things-editor-color>
+              </td>
+              <td>
+                <input type="text" data-description .value="${item.description || ''}" placeholder="display text" />
+              </td>
+              <td>
+                <button class="record-action" @tap=${(e) => this._delete(e)} tabindex="-1">-</button>
+              </td>
+            </tr>
+          `)}
+
+        <tr data-record-new class="stock-new">
+          <td>
+            <input type="text" data-min placeholder="min" value="" />
+            <span>~</span>
+            <input type="text" data-max placeholder="max" value="" />
+          </td>
+          <td>
+            <things-editor-color data-color value="" placeholder="color"></things-editor-color>
+          </td>
+          <td>
+            <input type="text" data-description value="" placeholder="display text" />
+          </td>
+          <td>
+            <button class="record-action" @tap=${() => this._add()} tabindex="-1">+</button>
+          </td>
+        </tr>
+      </table>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.boundOnChange)
+            this.boundOnChange = this._onChange.bind(this);
+        this.renderRoot.addEventListener('change', this.boundOnChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.renderRoot.removeEventListener('change', this.boundOnChange);
+    }
+    _valueChanged(value) {
+        var val = value || this._getDefaultValue();
+        this._statusField = val.field;
+        this._defaultColor = val.defaultColor;
+        this._ranges = [...val.ranges];
+        this.requestUpdate();
+    }
+    _onChange(e) {
+        e.stopPropagation();
+        this._changingNow = true;
+        var input = e.target;
+        var value = input.value;
+        var tr = input.closest('tr');
+        if (tr) {
+            if (tr.hasAttribute('data-record'))
+                this._build(true);
+            else if (tr.hasAttribute('data-record-new') && input.hasAttribute('data-color'))
+                this._add();
+        }
+        this.value = {
+            field: this._statusField,
+            defaultColor: this._defaultColor,
+            ranges: this._ranges
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true
+        }));
+        this.requestUpdate();
+    }
+    _build(includeNewRecord) {
+        if (includeNewRecord)
+            var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]');
+        else
+            var records = this.renderRoot.querySelectorAll('[data-record]');
+        var newRanges = [];
+        for (var i = 0; i < records.length; i++) {
+            var record = records[i];
+            var min = record.querySelector('[data-min]').value;
+            var max = record.querySelector('[data-max]').value;
+            var description = record.querySelector('[data-description]').value;
+            var inputs = record.querySelectorAll('[data-color]:not([style*="display: none"])');
+            if (!inputs || inputs.length == 0)
+                continue;
+            var input = inputs[inputs.length - 1];
+            var color = input.value;
+            if (min != undefined && max != undefined && color)
+                newRanges.push({
+                    min: min.trim(),
+                    max: max.trim(),
+                    color: color.trim(),
+                    description: description.trim()
+                });
+        }
+        newRanges.sort(function (range1, range2) {
+            var min1 = Number(range1.min);
+            var min2 = Number(range2.min);
+            var result = min1 - min2;
+            if (Number.isNaN(result)) {
+                var strMin1 = String(min1);
+                var strMin2 = String(min2);
+                if (strMin1 > strMin2)
+                    result = 1;
+                else if (strMin1 == strMin2)
+                    result = 0;
+                else
+                    result = -1;
+            }
+            return result;
+        });
+        this._ranges = newRanges;
+        this.requestUpdate();
+    }
+    _add() {
+        this._build(true);
+        var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"]), [data-record-new] [data-color]:not([style*="display: none"])');
+        for (var i = 0; i < inputs.length; i++) {
+            let input = inputs[i];
+            input.value = '';
+        }
+    }
+    _delete(e) {
+        var record = e.target.closest('tr[data-record]');
+        record.querySelector('[data-min]').value = '';
+        record.querySelector('[data-max]').value = '';
+        record.querySelector('[data-color]').value = '';
+        this._build(false);
+        this.value = {
+            field: this._statusField,
+            defaultColor: this._defaultColor,
+            ranges: this._ranges
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    _getDefaultValue() {
+        return {
+            field: '',
+            defaultColor: '',
+            ranges: []
+        };
+    }
+    _onRepeaterChanged() {
+        var inputs = this.renderRoot.querySelectorAll('[data-record] input:not([style*="display: none"])[value=""], [data-record-new] input:not([style*="display: none"])[value=""]');
+        inputs[0].focus();
+    }
+    updated(changes) {
+        if (changes.has('value'))
+            this._valueChanged(this.value);
+    }
+};
+EditorLegendStatus.styles = [
+    css `
+      :host {
+        font-size: 0.8em;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 5px;
+      }
+
+      :host > * {
+        order: 2;
+        grid-column: 4 / -1;
+      }
+
+      :host > legend {
+        order: 1;
+        grid-column: 1 / -1;
+        font-size: 11px;
+        color: rgb(228, 108, 46);
+        font-weight: bold;
+        text-transform: capitalize;
+        padding: 5px 0px 0px 5px;
+      }
+
+      :host > label {
+        grid-column: 1 / 4;
+        text-align: right;
+        color: var(--primary-text-color);
+      }
+
+      div[data-record] input {
+        width: 20%;
+      }
+      :host > table {
+        grid-column: 1 / -1;
+      }
+      table input {
+        width: 25px;
+        margin: 3px 0 2px 0;
+        padding: 3px;
+        font-size: 12px;
+      }
+      table td span {
+        padding: 5px 0 0 0;
+      }
+      table td things-editor-color {
+        width: 81px;
+        height: 25px;
+      }
+      table td button {
+        margin-left: 0;
+      }
+      table th {
+        background-color: rgba(0, 0, 0, 0.1);
+        padding: 2px 0;
+        text-align: center;
+      }
+
+      table tr > th:first-child {
+        width: 40px;
+      }
+
+      table tr > th:nth-child(2) {
+        width: 85px;
+      }
+
+      table tr > th:nth-child(4) {
+        width: 30px;
+      }
+
+      table *.things-editor-legend-status {
+        float: none !important;
+      }
+      table td {
+        text-align: center;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      table tr.stock-new {
+        background-color: rgba(179, 145, 117, 0.3);
+      }
+      table td input[data-description] {
+        width: 100%;
+        box-sizing: border-box;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], EditorLegendStatus.prototype, "value", void 0);
+__decorate([
+    state()
+], EditorLegendStatus.prototype, "_statusField", void 0);
+__decorate([
+    state()
+], EditorLegendStatus.prototype, "_defaultColor", void 0);
+__decorate([
+    state()
+], EditorLegendStatus.prototype, "_ranges", void 0);
+EditorLegendStatus = __decorate([
+    customElement('editor-legend-status')
+], EditorLegendStatus);
+//# sourceMappingURL=editor-legend-status.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editor-legend-status.js","sourceRoot":"","sources":["../../src/editors/editor-legend-status.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('editor-legend-status')\nclass EditorLegendStatus extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-size: 0.8em;\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n      }\n\n      :host > * {\n        order: 2;\n        grid-column: 4 / -1;\n      }\n\n      :host > legend {\n        order: 1;\n        grid-column: 1 / -1;\n        font-size: 11px;\n        color: rgb(228, 108, 46);\n        font-weight: bold;\n        text-transform: capitalize;\n        padding: 5px 0px 0px 5px;\n      }\n\n      :host > label {\n        grid-column: 1 / 4;\n        text-align: right;\n        color: var(--primary-text-color);\n      }\n\n      div[data-record] input {\n        width: 20%;\n      }\n      :host > table {\n        grid-column: 1 / -1;\n      }\n      table input {\n        width: 25px;\n        margin: 3px 0 2px 0;\n        padding: 3px;\n        font-size: 12px;\n      }\n      table td span {\n        padding: 5px 0 0 0;\n      }\n      table td things-editor-color {\n        width: 81px;\n        height: 25px;\n      }\n      table td button {\n        margin-left: 0;\n      }\n      table th {\n        background-color: rgba(0, 0, 0, 0.1);\n        padding: 2px 0;\n        text-align: center;\n      }\n\n      table tr > th:first-child {\n        width: 40px;\n      }\n\n      table tr > th:nth-child(2) {\n        width: 85px;\n      }\n\n      table tr > th:nth-child(4) {\n        width: 30px;\n      }\n\n      table *.things-editor-legend-status {\n        float: none !important;\n      }\n      table td {\n        text-align: center;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n      }\n      table tr.stock-new {\n        background-color: rgba(179, 145, 117, 0.3);\n      }\n      table td input[data-description] {\n        width: 100%;\n        box-sizing: border-box;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n\n  @state() private _statusField?: string\n  @state() private _defaultColor?: string\n  @state() private _ranges: any[] = []\n\n  private boundOnChange?: any\n  private _changingNow: boolean = false\n\n  render() {\n    return html`\n      <legend>\n        <i18n-msg msgid=\"label.status\">Status</i18n-msg>\n      </legend>\n\n      <label class=\"stock-field\">\n        <i18n-msg msgid=\"label.field\">Field</i18n-msg>\n      </label>\n      <input\n        type=\"text\"\n        .value=${this._statusField || ''}\n        @change=${(e: Event) => {\n          this._statusField = (e.target as HTMLInputElement).value\n        }}\n      />\n      <label class=\"default-color\">\n        <i18n-msg msgid=\"label.default-color\">Default Color</i18n-msg>\n      </label>\n      <things-editor-color\n        name=\"default-color\"\n        .value=${this._defaultColor || ''}\n        placeholder=\"default color\"\n        @change=${(e: Event) => {\n          this._defaultColor = (e.target as HTMLInputElement).value\n        }}\n      ></things-editor-color>\n\n      <table>\n        <tr>\n          <th>\n            Min &le; <br />Field<br />\n            &lt; Max\n          </th>\n          <th>color</th>\n          <th>disp. text</th>\n          <th></th>\n        </tr>\n        ${this._ranges.map(\n          item => html`\n            <tr data-record>\n              <td>\n                <input type=\"text\" data-min placeholder=\"min\" .value=\"${item.min}\" />\n                <span>~</span>\n                <input type=\"text\" data-max placeholder=\"max\" .value=\"${item.max}\" />\n              </td>\n              <td>\n                <things-editor-color data-color .value=\"${item.color}\" placeholder=\"color\"></things-editor-color>\n              </td>\n              <td>\n                <input type=\"text\" data-description .value=\"${item.description || ''}\" placeholder=\"display text\" />\n              </td>\n              <td>\n                <button class=\"record-action\" @tap=${(e: TouchEvent) => this._delete(e)} tabindex=\"-1\">-</button>\n              </td>\n            </tr>\n          `\n        )}\n\n        <tr data-record-new class=\"stock-new\">\n          <td>\n            <input type=\"text\" data-min placeholder=\"min\" value=\"\" />\n            <span>~</span>\n            <input type=\"text\" data-max placeholder=\"max\" value=\"\" />\n          </td>\n          <td>\n            <things-editor-color data-color value=\"\" placeholder=\"color\"></things-editor-color>\n          </td>\n          <td>\n            <input type=\"text\" data-description value=\"\" placeholder=\"display text\" />\n          </td>\n          <td>\n            <button class=\"record-action\" @tap=${() => this._add()} tabindex=\"-1\">+</button>\n          </td>\n        </tr>\n      </table>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (!this.boundOnChange) this.boundOnChange = this._onChange.bind(this)\n\n    this.renderRoot.addEventListener('change', this.boundOnChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.renderRoot.removeEventListener('change', this.boundOnChange)\n  }\n\n  _valueChanged(value: any) {\n    var val = value || this._getDefaultValue()\n    this._statusField = val.field\n    this._defaultColor = val.defaultColor\n    this._ranges = [...val.ranges]\n\n    this.requestUpdate()\n  }\n\n  _onChange(e: Event) {\n    e.stopPropagation()\n    this._changingNow = true\n\n    var input = e.target as HTMLInputElement\n    var value = input.value\n\n    var tr = input.closest('tr')\n\n    if (tr) {\n      if (tr.hasAttribute('data-record')) this._build(true)\n      else if (tr.hasAttribute('data-record-new') && input.hasAttribute('data-color')) this._add()\n    }\n\n    this.value = {\n      field: this._statusField,\n      defaultColor: this._defaultColor,\n      ranges: this._ranges\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n    this.requestUpdate()\n  }\n\n  _build(includeNewRecord: boolean) {\n    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n    else var records = this.renderRoot.querySelectorAll('[data-record]')\n\n    var newRanges = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var min = (record.querySelector('[data-min]') as HTMLInputElement).value\n      var max = (record.querySelector('[data-max]') as HTMLInputElement).value\n      var description = (record.querySelector('[data-description]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-color]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1]\n      var color = input.value\n\n      if (min != undefined && max != undefined && color)\n        newRanges.push({\n          min: min.trim(),\n          max: max.trim(),\n          color: color.trim(),\n          description: description.trim()\n        })\n    }\n\n    newRanges.sort(function (range1, range2) {\n      var min1 = Number(range1.min)\n      var min2 = Number(range2.min)\n\n      var result = min1 - min2\n\n      if (Number.isNaN(result)) {\n        var strMin1 = String(min1)\n        var strMin2 = String(min2)\n\n        if (strMin1 > strMin2) result = 1\n        else if (strMin1 == strMin2) result = 0\n        else result = -1\n      }\n\n      return result\n    })\n\n    this._ranges = newRanges\n    this.requestUpdate()\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"]), [data-record-new] [data-color]:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n  }\n\n  _delete(e: Event) {\n    var record = (e.target as Element).closest('tr[data-record]')\n\n    ;(record!.querySelector('[data-min]') as HTMLInputElement).value = ''\n    ;(record!.querySelector('[data-max]') as HTMLInputElement).value = ''\n    ;(record!.querySelector('[data-color]') as HTMLInputElement).value = ''\n\n    this._build(false)\n\n    this.value = {\n      field: this._statusField,\n      defaultColor: this._defaultColor,\n      ranges: this._ranges\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  _getDefaultValue() {\n    return {\n      field: '',\n      defaultColor: '',\n      ranges: []\n    }\n  }\n\n  _onRepeaterChanged() {\n    var inputs = this.renderRoot.querySelectorAll(\n      '[data-record] input:not([style*=\"display: none\"])[value=\"\"], [data-record-new] input:not([style*=\"display: none\"])[value=\"\"]'\n    ) as NodeListOf<HTMLInputElement>\n\n    inputs[0].focus()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) this._valueChanged(this.value)\n  }\n}\n"]}

package/dist/editors/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    type: string;
+    element: string;
+}[];
+export default _default;

package/dist/editors/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { PropertyEditorLegendStatus } from './property-editor-legend-status';
+export default [
+    {
+        type: 'legend-status',
+        element: PropertyEditorLegendStatus.is
+    }
+];
+//# sourceMappingURL=index.js.map

package/dist/editors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editors/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAA;AAE5E,eAAe;IACb;QACE,IAAI,EAAE,eAAe;QACrB,OAAO,EAAE,0BAA0B,CAAC,EAAE;KACvC;CACF,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { PropertyEditorLegendStatus } from './property-editor-legend-status'\n\nexport default [\n  {\n    type: 'legend-status',\n    element: PropertyEditorLegendStatus.is\n  }\n]\n"]}

package/dist/editors/property-editor-legend-status.d.ts

@@ -0,0 +1,7 @@
+import './editor-legend-status';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { Properties } from '@hatiolab/things-scene';
+export declare class PropertyEditorLegendStatus extends OxPropertyEditor {
+    static get is(): string;
+    editorTemplate(props: Properties): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,13 @@
+import './editor-legend-status';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { html } from 'lit-element';
+export class PropertyEditorLegendStatus extends OxPropertyEditor {
+    static get is() {
+        return 'property-editor-legend-status';
+    }
+    editorTemplate(props) {
+        return html ` <editor-legend-status .value=${props.value} fullwidth></editor-legend-status> `;
+    }
+}
+customElements.define(PropertyEditorLegendStatus.is, PropertyEditorLegendStatus);
+//# sourceMappingURL=property-editor-legend-status.js.map

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

@@ -0,0 +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,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAElC,MAAM,OAAO,0BAA2B,SAAQ,gBAAgB;IAC9D,MAAM,KAAK,EAAE;QACX,OAAO,+BAA+B,CAAA;IACxC,CAAC;IAED,cAAc,CAAC,KAAiB;QAC9B,OAAO,IAAI,CAAA,iCAAiC,KAAK,CAAC,KAAK,qCAAqC,CAAA;IAC9F,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,0BAA0B,CAAC,EAAE,EAAE,0BAA0B,CAAC,CAAA","sourcesContent":["import './editor-legend-status'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { Properties } from '@hatiolab/things-scene'\nimport { html } from 'lit-element'\n\nexport class PropertyEditorLegendStatus extends OxPropertyEditor {\n  static get is() {\n    return 'property-editor-legend-status'\n  }\n\n  editorTemplate(props: Properties) {\n    return html` <editor-legend-status .value=${props.value} fullwidth></editor-legend-status> `\n  }\n}\n\ncustomElements.define(PropertyEditorLegendStatus.is, PropertyEditorLegendStatus)\n"]}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export { default as Legend } from './legend';
+export { default as LegendItem } from './legend-item';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/legend-item.d.ts

@@ -0,0 +1,15 @@
+import { Properties, Shape } from '@hatiolab/things-scene';
+declare const LegendItem_base: typeof Shape;
+export default class LegendItem extends LegendItem_base {
+    render(context: CanvasRenderingContext2D): void;
+    onchange(after: Properties): void;
+    get stuck(): boolean;
+    get capturable(): boolean;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: never[];
+    };
+}
+export {};

package/dist/legend-item.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+const NATURE = {
+    mutable: false,
+    resizable: false,
+    rotatable: false,
+    properties: []
+};
+export default class LegendItem extends RectPath(Shape) {
+    render(context) {
+        var { left, top, height, color } = this.model;
+        context.beginPath();
+        var c = height / 2;
+        var r = c / 2;
+        context.save();
+        context.fillStyle = color;
+        context.ellipse(left + c, top + c, r, r, 0, 0, Math.PI * 2, true);
+        context.shadowColor = 'rgba(0,0,0,0.15)';
+        context.shadowBlur = 2;
+        context.shadowOffsetX = 1;
+        context.shadowOffsetY = 2;
+        context.fill();
+        context.restore();
+    }
+    onchange(after) {
+        if (after.hasOwnProperty('height'))
+            this.set('paddingLeft', after.height);
+    }
+    get stuck() {
+        return true;
+    }
+    get capturable() {
+        return false;
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.register('legend-item', LegendItem);
+//# sourceMappingURL=legend-item.js.map

package/dist/legend-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../src/legend-item.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAqB,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEtF,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,EAAE;CACf,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACrD,MAAM,CAAC,OAAiC;QACtC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE7C,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,IAAI,CAAC,GAAG,MAAM,GAAG,CAAC,CAAA;QAClB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAEb,OAAO,CAAC,IAAI,EAAE,CAAA;QAEd,OAAO,CAAC,SAAS,GAAG,KAAK,CAAA;QACzB,OAAO,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,CAAA;QACjE,OAAO,CAAC,WAAW,GAAG,kBAAkB,CAAA;QACxC,OAAO,CAAC,UAAU,GAAG,CAAC,CAAA;QACtB,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QACzB,OAAO,CAAC,aAAa,GAAG,CAAC,CAAA;QACzB,OAAO,CAAC,IAAI,EAAE,CAAA;QAEd,OAAO,CAAC,OAAO,EAAE,CAAA;IACnB,CAAC;IAED,QAAQ,CAAC,KAAiB;QACxB,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;YAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC3E,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Model, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nconst NATURE = {\n  mutable: false,\n  resizable: false,\n  rotatable: false,\n  properties: []\n}\n\nexport default class LegendItem extends RectPath(Shape) {\n  render(context: CanvasRenderingContext2D) {\n    var { left, top, height, color } = this.model\n\n    context.beginPath()\n\n    var c = height / 2\n    var r = c / 2\n\n    context.save()\n\n    context.fillStyle = color\n    context.ellipse(left + c, top + c, r, r, 0, 0, Math.PI * 2, true)\n    context.shadowColor = 'rgba(0,0,0,0.15)'\n    context.shadowBlur = 2\n    context.shadowOffsetX = 1\n    context.shadowOffsetY = 2\n    context.fill()\n\n    context.restore()\n  }\n\n  onchange(after: Properties) {\n    if (after.hasOwnProperty('height')) this.set('paddingLeft', after.height)\n  }\n\n  get stuck() {\n    return true\n  }\n\n  get capturable() {\n    return false\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('legend-item', LegendItem)\n"]}

package/dist/legend.d.ts

@@ -0,0 +1,40 @@
+import { Component, Container, Properties } from '@hatiolab/things-scene';
+export default class Legend extends Container {
+    ready(): void;
+    get showMoveHandle(): boolean;
+    render(context: CanvasRenderingContext2D): void;
+    get controls(): {
+        x: any;
+        y: any;
+        handler: {
+            ondragmove: (point: import("@hatiolab/things-scene").DIMENSION, index: number, component: Component) => void;
+        };
+    }[];
+    get layout(): import("@hatiolab/things-scene").LAYOUT;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                options: {
+                    display: string;
+                    value: string;
+                }[];
+            };
+        })[];
+        help: string;
+    };
+    rebuildLegendItems(): void;
+    get hasTextProperty(): boolean;
+    get textHidden(): boolean;
+    onchange(after: Properties, before: Properties): void;
+}