@operato/scene-legend 9.2.2 → 10.0.0-beta.1

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

@@ -3,12 +3,99 @@ import '@operato/i18n/ox-i18n.js';
 import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 let EditorLegendStatus = class EditorLegendStatus extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._aggregation = 'sum';
-        this._ranges = [];
-        this._changingNow = false;
-    }
+    static 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 ox-input-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 *.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;
+      }
+    `
+    ];
+    value;
+    _statusField;
+    _aggregation = 'sum';
+    _defaultColor;
+    _ranges = [];
+    boundOnChange;
+    _changingNow = false;
     render() {
         return html `
       <legend>
@@ -226,92 +313,6 @@ let EditorLegendStatus = class EditorLegendStatus extends LitElement {
             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 ox-input-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 *.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);

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

@@ -1 +1 @@
-{"version":3,"file":"editor-legend-status.js","sourceRoot":"","sources":["../../src/editors/editor-legend-status.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\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 ox-input-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 *.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 _aggregation: string = 'sum'\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        <ox-i18n msgid=\"label.status\">Status</ox-i18n>\n      </legend>\n\n      <label class=\"stock-field\">\n        <ox-i18n msgid=\"label.field\">Field</ox-i18n>\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=\"stock-aggregation\">\n        <ox-i18n msgid=\"label.aggregation-function\">aggregation function</ox-i18n>\n      </label>\n      <select\n        .value=${this._aggregation}\n        @change=${(e: Event) => {\n          this._aggregation = (e.target as HTMLSelectElement).value\n        }}\n      >\n        <option value=\"sum\">sum</option>\n        <option value=\"avg\">avg</option>\n        <option value=\"min\">min</option>\n        <option value=\"max\">max</option>\n      </select>\n      <label class=\"default-color\">\n        <ox-i18n msgid=\"label.default-color\">Default Color</ox-i18n>\n      </label>\n      <ox-input-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      ></ox-input-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                <ox-input-color data-color .value=\"${item.color}\" placeholder=\"color\"></ox-input-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\" @click=${(e: MouseEvent) => 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            <ox-input-color data-color value=\"\" placeholder=\"color\"></ox-input-color>\n          </td>\n          <td>\n            <input type=\"text\" data-description value=\"\" placeholder=\"display text\" />\n          </td>\n          <td>\n            <button class=\"record-action\" @click=${() => 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._aggregation = val.aggregation || 'sum'\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      aggregation: this._aggregation,\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      aggregation: this._aggregation,\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      aggregation: 'sum',\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"]}
+{"version":3,"file":"editor-legend-status.js","sourceRoot":"","sources":["../../src/editors/editor-legend-status.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\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 ox-input-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 *.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 _aggregation: string = 'sum'\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        <ox-i18n msgid=\"label.status\">Status</ox-i18n>\n      </legend>\n\n      <label class=\"stock-field\">\n        <ox-i18n msgid=\"label.field\">Field</ox-i18n>\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=\"stock-aggregation\">\n        <ox-i18n msgid=\"label.aggregation-function\">aggregation function</ox-i18n>\n      </label>\n      <select\n        .value=${this._aggregation}\n        @change=${(e: Event) => {\n          this._aggregation = (e.target as HTMLSelectElement).value\n        }}\n      >\n        <option value=\"sum\">sum</option>\n        <option value=\"avg\">avg</option>\n        <option value=\"min\">min</option>\n        <option value=\"max\">max</option>\n      </select>\n      <label class=\"default-color\">\n        <ox-i18n msgid=\"label.default-color\">Default Color</ox-i18n>\n      </label>\n      <ox-input-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      ></ox-input-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                <ox-input-color data-color .value=\"${item.color}\" placeholder=\"color\"></ox-input-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\" @click=${(e: MouseEvent) => 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            <ox-input-color data-color value=\"\" placeholder=\"color\"></ox-input-color>\n          </td>\n          <td>\n            <input type=\"text\" data-description value=\"\" placeholder=\"display text\" />\n          </td>\n          <td>\n            <button class=\"record-action\" @click=${() => 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._aggregation = val.aggregation || 'sum'\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      aggregation: this._aggregation,\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      aggregation: this._aggregation,\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      aggregation: 'sum',\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/property-editor-svg-info.js

@@ -4,11 +4,18 @@ 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 = [];
-    }
+    static styles = [
+        ...OxPropertyEditor.styles,
+        css `
+      ul[info] {
+        margin: 0;
+        font-size: 1em;
+      }
+    `
+    ];
+    src;
+    ids = [];
+    fillStyleSaved = [];
     editorTemplate(value, spec) {
         return html `
       <fieldset fullwidth>
@@ -49,15 +56,6 @@ let SVGInfoEditor = class SVGInfoEditor extends OxPropertyEditor {
         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);

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

@@ -1 +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;AAI1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,gBAAgB;IAA5C;;QAaJ,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,CAAC;YACvB,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;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,SAAoB,EAAE,GAAW;QACrD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC;YACxB,OAAM;QACR,CAAC;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"]}
+{"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;AAI1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,gBAAgB;IACzD,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,gBAAgB,CAAC,MAAM;QAC1B,GAAG,CAAA;;;;;KAKF;KACF,CAAA;IAE2B,GAAG,CAAS;IAE/B,GAAG,GAAqB,EAAE,CAAA;IAE3B,cAAc,GAAU,EAAE,CAAA;IAElC,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,CAAC;YACvB,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;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,SAAoB,EAAE,GAAW;QACrD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC;YACxB,OAAM;QACR,CAAC;QAED,MAAM,OAAO,GAAI,SAA6C,CAAC,OAAyB,CAAA;QAExF,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;;AAvD2B;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 unknown 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/legend-item.d.ts

@@ -1,5 +1,241 @@
-import { ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
-declare const LegendItem_base: typeof Shape;
+import { Component, ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
+declare const LegendItem_base: (new (...args: any[]) => {
+    contains(x: number, y: number): boolean;
+    get path(): {
+        x: any;
+        y: any;
+    }[];
+    set path(path: {
+        x: any;
+        y: any;
+    }[]): any;
+    get anchors(): {
+        name: string;
+        position: {
+            x: any;
+            y: any;
+        };
+    }[];
+    get bounds(): any;
+    set bounds(bounds: any): any;
+    render(ctx: CanvasRenderingContext2D): void;
+    _app: any;
+    _model: any;
+    _state: any;
+    _delta: any;
+    _animation: any;
+    _animate: any;
+    _parent: any;
+    _disposed: any;
+    _textHidden: any;
+    _text_substitutor: any;
+    _value_substitutor: any;
+    _mappings: any;
+    _realObject: import("@hatiolab/things-scene").IRealObject | undefined;
+    _cachedState: any;
+    updatedAt: any;
+    fontSize: any;
+    __cache__: any;
+    created(): void;
+    added(parent: any): void;
+    removed(parent: any): void;
+    ready(): Promise<void>;
+    touch(): void;
+    clearCache(...attrs: any[]): void;
+    removeSelf(completely: any): void;
+    resetAnimation(): void;
+    dispose(): void;
+    get nature(): import("@hatiolab/things-scene").ComponentNature;
+    get disposed(): boolean;
+    isLayer(): boolean;
+    isGroup(): boolean;
+    isContainer(): this is import("@hatiolab/things-scene/dist-types/types/component").Container;
+    isLine(): boolean;
+    isRoot(): boolean;
+    isRootModel(): boolean;
+    is3dish(): boolean;
+    get is3dMode(): boolean;
+    isIn3DSpace(): boolean;
+    isTemplate(): boolean;
+    isHTMLElement(): boolean;
+    isConnectable(): boolean;
+    isIdentifiable(): boolean;
+    isPositionable(): boolean;
+    replaceRefids(replaceMap: any): void;
+    get(property: any): any;
+    set(props: any, propval?: any): any;
+    getState(property: any): any;
+    setState(props: any, propval?: any): any;
+    get model(): any;
+    get state(): any;
+    get hierarchy(): any;
+    get volatile(): never[];
+    _applyProps(target: any, props: any, options: any): any;
+    move(offset: {
+        x: number;
+        y: number;
+    }, ...args: boolean[]): void;
+    symmetryX(x?: number): void;
+    symmetryY(y: number): void;
+    adjustResize(bounds: import("@hatiolab/things-scene").BOUNDS, origin_bounds: import("@hatiolab/things-scene").BOUNDS, diagonal: boolean): {
+        left: any;
+        top: any;
+        width: any;
+        height: any;
+    };
+    adjustRotation(rotation: number, step: boolean): number;
+    outline(progress: number): any;
+    get center(): import("@hatiolab/things-scene").POINT;
+    set center(p: import("@hatiolab/things-scene").POINT): any;
+    get location(): import("@hatiolab/things-scene").POINT;
+    set location(l: import("@hatiolab/things-scene").POINT): any;
+    get rotate(): import("@hatiolab/things-scene").POINT;
+    set rotate(r: import("@hatiolab/things-scene").POINT): any;
+    get dimension(): import("@hatiolab/things-scene").DIMENSION;
+    set dimension(d: import("@hatiolab/things-scene").DIMENSION): any;
+    get drawPath(): import("@hatiolab/things-scene").POINT[];
+    get rotatePoint(): import("@hatiolab/things-scene").POINT;
+    get mutable(): boolean;
+    get resizable(): boolean;
+    get rotatable(): boolean;
+    buildRealObject(): import("@hatiolab/things-scene").IRealObject | undefined;
+    get realObject(): import("@hatiolab/things-scene").IRealObject | undefined;
+    draw(context?: import("@hatiolab/things-scene").SceneRenderContext): void;
+    prerender(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    postrender(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    prepare(resolve: (component: Component) => void, reject: (reason: any) => void): void;
+    prepareIf(condition: boolean): void;
+    drawText(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    drawStroke(context: import("@hatiolab/things-scene").SceneRenderContext, override?: Record<string, unknown>): void;
+    drawFill(context: import("@hatiolab/things-scene").SceneRenderContext, override?: Record<string, unknown>): void;
+    get strokeStyle(): any;
+    set strokeStyle(v: any): any;
+    get fillStyle(): any;
+    set fillStyle(v: any): any;
+    get fontColor(): string;
+    set fontColor(v: string): any;
+    get rotation(): number;
+    set rotation(v: number): any;
+    get decorators(): string[];
+    get decotag(): string;
+    get hidden(): boolean;
+    set hidden(v: boolean): any;
+    get tag(): string;
+    set tag(v: string): any;
+    get appendum(): any;
+    set appendum(v: any): any;
+    defaultTextSubstitutor(): string;
+    textLines(context?: import("@hatiolab/things-scene").SceneRenderContext): any[][];
+    get font(): string;
+    get lineHeight(): number;
+    get textSubstitutor(): () => string;
+    get text(): string;
+    set text(v: string): any;
+    get textBounds(): import("@hatiolab/things-scene").BOUNDS;
+    get textRotation(): number;
+    get textHidden(): boolean;
+    set textHidden(v: boolean): any;
+    get hasTextProperty(): boolean;
+    animate(opts: import("@hatiolab/things-scene").AnimationConfig): any;
+    effect(context: import("@hatiolab/things-scene").SceneRenderContext, model: any): void;
+    serialize(...others: any[]): string;
+    trim(): void;
+    closeScene(data: any): void;
+    delta(attr?: string | object, value?: any): any;
+    invalidate(): void;
+    get value(): any;
+    set value(v: any): any;
+    get data(): any;
+    set data(v: any): any;
+    set tap(v: any): any;
+    get mappings(): any[];
+    get retention(): number;
+    get animation(): import("@hatiolab/things-scene").AnimationController | undefined;
+    get started(): boolean;
+    set started(v: boolean): any;
+    get controls(): import("@hatiolab/things-scene").Control[] | undefined;
+    findFirst(finder: string | ((c: Component) => boolean), ...others: any[]): Component | undefined;
+    findAll(s: string | ((c: Component) => boolean), ...others: any[]): any[] | undefined;
+    capture(x: number, y: number, except?: (c: Component) => boolean): any;
+    findAnchor(name: string): any;
+    isDescendible(container: Component): boolean;
+    getContext(component?: unknown): any;
+    get root(): Component;
+    get rootModel(): Component;
+    get parent(): Component;
+    set parent(v: Component): any;
+    get scalable(): boolean;
+    get stuck(): boolean;
+    get capturable(): boolean;
+    get position(): string;
+    get origin(): string;
+    get offset(): import("@hatiolab/things-scene").POINT;
+    get app(): import("@hatiolab/things-scene").ApplicationContext;
+    drawEffect(context: import("@hatiolab/things-scene").SceneRenderContext): void;
+    prepareFill(resolve: Function, reject: Function): void;
+    prepareFillIf(condition: boolean): void;
+    onchangeFill(after: Record<string, any>, before: Record<string, any>): void;
+    drawImage(context: import("@hatiolab/things-scene").SceneRenderContext, image: HTMLImageElement, left: number, top: number, width: number, height: number): void;
+    mutateBounds(logic: ((bounds: import("@hatiolab/things-scene").BOUNDS) => import("@hatiolab/things-scene").BOUNDS | void) | null, context?: any): void;
+    mutatePath(beforeLogic: ((path: import("@hatiolab/things-scene").POINT[]) => import("@hatiolab/things-scene").POINT[] | void) | null, afterLogic: ((path: import("@hatiolab/things-scene").POINT[]) => import("@hatiolab/things-scene").POINT[] | void) | null, context?: any): void;
+    access(accessor: string): any;
+    substitute(template: string, data: any): string | undefined;
+    onchangeMappings(after: Record<string, any>, before: Record<string, any>): void;
+    onchangeData(after: Record<string, any>, before: Record<string, any>): void;
+    buildMappings(): void;
+    executeMappings(force?: boolean): void;
+    disposeMappings(): void;
+    ondropfile(transfered: FileList, files: string[]): void;
+    transcoordS2P(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    transcoordP2S(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    transcoordS2T(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordT2P(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordT2S(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordS2TR(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordS2O(x: number, y: number, target: Component): import("@hatiolab/things-scene").POINT;
+    transcoordC2S(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    transcoordS2C(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toParent(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    fromParent(x: number, y: number, rp?: import("@hatiolab/things-scene").POINT): import("@hatiolab/things-scene").POINT;
+    toScene(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    fromScene(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toLocal(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toGlobal(x: number, y: number, top?: Component): import("@hatiolab/things-scene").POINT;
+    toOther(x: number, y: number, target: Component): import("@hatiolab/things-scene").POINT;
+    on(name: string | object, callback: Function, context?: any): any;
+    off(name?: string | object, callback?: Function, context?: any): any;
+    once(name: string | object, callback: Function, context?: any): any;
+    trigger(name: string, ...args: any[]): any;
+    delegate_on(delegator: any): any;
+    delegate_off(delegator: any): any;
+    onchange(after: Record<string, any>, before: Record<string, any>): void;
+    calculateBounds?(): void;
+    oncreate_element?(element: HTMLElement): void;
+    removeComponent(component: Component, ghost?: boolean): void;
+    addComponent(component: Component, ghost?: boolean): void;
+    insertComponentAt(component: Component, index: number, ghost?: boolean): void;
+    getOverlay(component: Component): HTMLElement | undefined;
+    findById(id: string): Component | undefined;
+    findByRefid(ref: string | number): Component | undefined;
+    findAllById(id: string): Component[];
+    resize(): void;
+    fit(type?: string): void;
+    get components(): Component[] | undefined;
+    get layout(): any;
+    get auxOverlay(): HTMLElement | undefined;
+    get isReady(): boolean;
+    get unitScale(): number;
+    get selected(): Component[];
+    set selected(_v: Component[]): any;
+    get focused(): Component | null;
+    set focused(_v: Component | null): any;
+    get hasSameParentForAllSelected(): boolean;
+    set hasSameParentForAllSelected(_v: boolean): any;
+    get fitMode(): string | undefined;
+    set fitMode(_v: string | undefined): any;
+    get element(): HTMLElement | null;
+    set element(_v: HTMLElement | null): any;
+}) & typeof Shape;
 export default class LegendItem extends LegendItem_base {
     render(context: CanvasRenderingContext2D): void;
     onchange(after: Properties): void;

package/dist/legend.d.ts

@@ -1,6 +1,6 @@
 import { Component, ComponentNature, Container, POSITION, Properties } from '@hatiolab/things-scene';
 export default class Legend extends Container {
-    ready(): void;
+    ready(): Promise<void>;
     get showMoveHandle(): boolean;
     render(context: CanvasRenderingContext2D): void;
     get controls(): {
@@ -10,7 +10,14 @@ export default class Legend extends Container {
             ondragmove: (point: POSITION, index: number, component: Component) => void;
         };
     }[];
-    get layout(): import("@hatiolab/things-scene").LAYOUT;
+    get layout(): {
+        reflow(container: import("@hatiolab/things-scene/dist-types/types/component").Container): void;
+        capturables(container: import("@hatiolab/things-scene/dist-types/types/component").Container): import("@hatiolab/things-scene").ComponentInterface[];
+        drawables(container: import("@hatiolab/things-scene/dist-types/types/component").Container): import("@hatiolab/things-scene").ComponentInterface[];
+        isStuck(component: import("@hatiolab/things-scene").ComponentInterface): boolean;
+        keyNavigate(container: import("@hatiolab/things-scene/dist-types/types/component").Container, component: import("@hatiolab/things-scene").ComponentInterface, e: KeyboardEvent): import("@hatiolab/things-scene").ComponentInterface | undefined;
+        joinType: boolean;
+    };
     get nature(): ComponentNature;
     rebuildLegendItems(): void;
     get hasTextProperty(): boolean;

package/dist/legend.js

@@ -72,7 +72,8 @@ function roundSet(round, width, height) {
     return round;
 }
 let Legend = class Legend extends Container {
-    ready() {
+    async ready() {
+        await super.ready();
         this.rebuildLegendItems();
     }
     get showMoveHandle() {
@@ -127,7 +128,7 @@ let Legend = class Legend extends Container {
     }
     rebuildLegendItems() {
         if (this.components.length) {
-            this.components.slice().forEach(m => m.dispose());
+            this.components.slice().forEach((m) => m.dispose());
         }
         var { left, top, width, height, fillStyle, strokeStyle, fontColor, fontFamily, fontSize, lineHeight, textAlign = 'left', round = 0, italic, bold, lineWidth = 0, rows, columns, status = {} } = this.state;
         let statusRanges = status.ranges || [];
@@ -145,7 +146,7 @@ let Legend = class Legend extends Container {
             italic,
             bold,
             textAlign
-        })));
+        }, this.app)));
         var rows, columns;
         if (!columns && !rows) {
             rows = count;

package/dist/legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"legend.js","sourceRoot":"","sources":["../src/legend.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n  Component,\n  ComponentNature,\n  Container,\n  Model,\n  POSITION,\n  Properties,\n  TableLayout,\n  sceneComponent\n} from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'rows',\n      name: 'rows'\n    },\n    {\n      type: 'number',\n      label: 'columns',\n      name: 'columns'\n    },\n    {\n      type: 'select',\n      label: 'direction',\n      name: 'direction',\n      property: {\n        options: [\n          {\n            display: 'Horizontal',\n            value: 'horizontal'\n          },\n          {\n            display: 'Vertical',\n            value: 'vertical'\n          }\n        ]\n      }\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round'\n    },\n    {\n      type: 'legend-status',\n      label: '',\n      name: 'status'\n    }\n  ],\n  help: 'scene/component/legend'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n    /*\n     * point의 좌표는 부모 레이어 기준의 x, y 값이다.\n     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.\n     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,\n     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).\n     */\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = roundSet(round, width, height)\n\n    component.set({ round })\n  }\n}\n\nfunction roundSet(round: number, width: number, height: number) {\n  var max = width > height ? (height / width) * 100 : 100\n\n  if (round >= max) round = max\n  else if (round <= 0) round = 0\n\n  return round\n}\n\n@sceneComponent('legend')\nexport default class Legend extends Container {\n  ready() {\n    this.rebuildLegendItems()\n  }\n\n  get showMoveHandle() {\n    return false\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { round = 0 } = this.state\n\n    var { left, top, width, height } = this.bounds\n\n    // 박스 그리기\n    context.beginPath()\n\n    round = roundSet(round, width, height)\n\n    if (round > 0) {\n      var radius = (round / 100) * (width / 2)\n\n      context.moveTo(left + radius, top)\n      context.lineTo(left + width - radius, top)\n      context.quadraticCurveTo(left + width, top, left + width, top + radius)\n      context.lineTo(left + width, top + height - radius)\n      context.quadraticCurveTo(left + width, top + height, left + width - radius, top + height)\n      context.lineTo(left + radius, top + height)\n      context.quadraticCurveTo(left, top + height, left, top + height - radius)\n      context.lineTo(left, top + radius)\n      context.quadraticCurveTo(left, top, left + radius, top)\n\n      this.model.padding = {\n        top: round / 2,\n        left: round / 2,\n        right: round / 2,\n        bottom: round / 2\n      }\n    } else {\n      context.rect(left, top, width, height)\n    }\n\n    this.drawFill(context)\n    this.drawStroke(context)\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : roundSet(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get layout() {\n    return TableLayout\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  rebuildLegendItems() {\n    if (this.components.length) {\n      this.components.slice().forEach(m => m.dispose())\n    }\n\n    var {\n      left,\n      top,\n      width,\n      height,\n      fillStyle,\n      strokeStyle,\n      fontColor,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      textAlign = 'left',\n      round = 0,\n      italic,\n      bold,\n      lineWidth = 0,\n      rows,\n      columns,\n      status = {}\n    } = this.state\n\n    let statusRanges: {\n      min: string\n      max: string\n      description: string\n      color: string\n    }[] = status.ranges || []\n\n    var count = statusRanges.length\n\n    this.add(\n      statusRanges.map(range =>\n        Model.compile({\n          type: 'legend-item',\n          text: range.description || `${range.min || ''} ~ ${range.max || ''}`,\n          width: 1,\n          height: 1,\n          color: range.color,\n          fontColor,\n          fontFamily,\n          fontSize,\n          lineHeight,\n          italic,\n          bold,\n          textAlign\n        })\n      )\n    )\n\n    var rows, columns\n\n    if (!columns && !rows) {\n      rows = count\n      columns = 1\n    } else if (columns && !rows) {\n      rows = Math.ceil(count / Number(columns))\n    } else if (rows && !columns) {\n      columns = Math.ceil(count / Number(rows))\n    }\n\n    this.set({\n      layoutConfig: {\n        rows,\n        columns\n      }\n    })\n  }\n\n  get hasTextProperty() {\n    return true\n  }\n\n  get textHidden() {\n    return true\n  }\n\n  onchange(after: Properties, before: Properties) {\n    this.rebuildLegendItems()\n  }\n}\n"]}
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../src/legend.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAGL,SAAS,EACT,KAAK,EAGL,WAAW,EACX,cAAc,EACf,MAAM,wBAAwB,CAAA;AAE/B,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,MAAM;SACb;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE;gBACR,OAAO,EAAE;oBACP;wBACE,OAAO,EAAE,YAAY;wBACrB,KAAK,EAAE,YAAY;qBACpB;oBACD;wBACE,OAAO,EAAE,UAAU;wBACnB,KAAK,EAAE,UAAU;qBAClB;iBACF;aACF;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;SACd;QACD;YACE,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,QAAQ;SACf;KACF;IACD,IAAI,EAAE,wBAAwB;CAC/B,CAAA;AAED,IAAI,cAAc,GAAG;IACnB,UAAU,EAAE,UAAU,KAAe,EAAE,KAAa,EAAE,SAAoB;QACxE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,KAAK,CAAA;QAClD;;;;;WAKG;QACH,IAAI,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;QAC5D,IAAI,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;QAEzD,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEtC,SAAS,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAC1B,CAAC;CACF,CAAA;AAED,SAAS,QAAQ,CAAC,KAAa,EAAE,KAAa,EAAE,MAAc;IAC5D,IAAI,GAAG,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAA;IAEvD,IAAI,KAAK,IAAI,GAAG;QAAE,KAAK,GAAG,GAAG,CAAA;SACxB,IAAI,KAAK,IAAI,CAAC;QAAE,KAAK,GAAG,CAAC,CAAA;IAE9B,OAAO,KAAK,CAAA;AACd,CAAC;AAGc,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAC3C,KAAK,CAAC,KAAK;QACT,MAAM,KAAK,CAAC,KAAK,EAAE,CAAA;QAEnB,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAA;IACd,CAAC;IAED,MAAM,CAAC,OAAiC;QACtC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE9B,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,SAAS;QACT,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEtC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,IAAI,MAAM,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;YAExC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,EAAE,GAAG,CAAC,CAAA;YAClC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,MAAM,EAAE,GAAG,CAAC,CAAA;YAC1C,OAAO,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,EAAE,GAAG,EAAE,IAAI,GAAG,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;YACvE,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,EAAE,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;YACnD,OAAO,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,EAAE,GAAG,GAAG,MAAM,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;YACzF,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;YAC3C,OAAO,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,GAAG,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;YACzE,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,GAAG,MAAM,CAAC,CAAA;YAClC,OAAO,CAAC,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,CAAC,CAAA;YAEvD,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG;gBACnB,GAAG,EAAE,KAAK,GAAG,CAAC;gBACd,IAAI,EAAE,KAAK,GAAG,CAAC;gBACf,KAAK,EAAE,KAAK,GAAG,CAAC;gBAChB,MAAM,EAAE,KAAK,GAAG,CAAC;aAClB,CAAA;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QACxC,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;IAC1B,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACpD,KAAK,GAAG,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAE/D,OAAO;YACL;gBACE,CAAC,EAAE,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC;gBACrC,CAAC,EAAE,GAAG;gBACN,OAAO,EAAE,cAAc;aACxB;SACF,CAAA;IACH,CAAC;IAED,IAAI,MAAM;QACR,OAAO,WAAW,CAAA;IACpB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAA;QAC1D,CAAC;QAED,IAAI,EACF,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,MAAM,EAClB,KAAK,GAAG,CAAC,EACT,MAAM,EACN,IAAI,EACJ,SAAS,GAAG,CAAC,EACb,IAAI,EACJ,OAAO,EACP,MAAM,GAAG,EAAE,EACZ,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,IAAI,YAAY,GAKV,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QAEzB,IAAI,KAAK,GAAG,YAAY,CAAC,MAAM,CAAA;QAE/B,IAAI,CAAC,GAAG,CACN,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACvB,KAAK,CAAC,OAAO,CAAC;YACZ,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE,KAAK,CAAC,WAAW,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,EAAE,MAAM,KAAK,CAAC,GAAG,IAAI,EAAE,EAAE;YACpE,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,SAAS;YACT,UAAU;YACV,QAAQ;YACR,UAAU;YACV,MAAM;YACN,IAAI;YACJ,SAAS;SACH,EAAE,IAAI,CAAC,GAAG,CAAC,CACpB,CACF,CAAA;QAED,IAAI,IAAI,EAAE,OAAO,CAAA;QAEjB,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,GAAG,KAAK,CAAA;YACZ,OAAO,GAAG,CAAC,CAAA;QACb,CAAC;aAAM,IAAI,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5B,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAA;QAC3C,CAAC;aAAM,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC5B,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;QAC3C,CAAC;QAED,IAAI,CAAC,GAAG,CAAC;YACP,YAAY,EAAE;gBACZ,IAAI;gBACJ,OAAO;aACR;SACF,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAA;IACb,CAAC;IAED,QAAQ,CAAC,KAAiB,EAAE,MAAkB;QAC5C,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;CACF,CAAA;AAzJoB,MAAM;IAD1B,cAAc,CAAC,QAAQ,CAAC;GACJ,MAAM,CAyJ1B;eAzJoB,MAAM","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n  Component,\n  ComponentNature,\n  Container,\n  Model,\n  POSITION,\n  Properties,\n  TableLayout,\n  sceneComponent\n} from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'rows',\n      name: 'rows'\n    },\n    {\n      type: 'number',\n      label: 'columns',\n      name: 'columns'\n    },\n    {\n      type: 'select',\n      label: 'direction',\n      name: 'direction',\n      property: {\n        options: [\n          {\n            display: 'Horizontal',\n            value: 'horizontal'\n          },\n          {\n            display: 'Vertical',\n            value: 'vertical'\n          }\n        ]\n      }\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round'\n    },\n    {\n      type: 'legend-status',\n      label: '',\n      name: 'status'\n    }\n  ],\n  help: 'scene/component/legend'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n    /*\n     * point의 좌표는 부모 레이어 기준의 x, y 값이다.\n     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.\n     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,\n     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).\n     */\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = roundSet(round, width, height)\n\n    component.set({ round })\n  }\n}\n\nfunction roundSet(round: number, width: number, height: number) {\n  var max = width > height ? (height / width) * 100 : 100\n\n  if (round >= max) round = max\n  else if (round <= 0) round = 0\n\n  return round\n}\n\n@sceneComponent('legend')\nexport default class Legend extends Container {\n  async ready() {\n    await super.ready()\n\n    this.rebuildLegendItems()\n  }\n\n  get showMoveHandle() {\n    return false\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { round = 0 } = this.state\n\n    var { left, top, width, height } = this.bounds\n\n    // 박스 그리기\n    context.beginPath()\n\n    round = roundSet(round, width, height)\n\n    if (round > 0) {\n      var radius = (round / 100) * (width / 2)\n\n      context.moveTo(left + radius, top)\n      context.lineTo(left + width - radius, top)\n      context.quadraticCurveTo(left + width, top, left + width, top + radius)\n      context.lineTo(left + width, top + height - radius)\n      context.quadraticCurveTo(left + width, top + height, left + width - radius, top + height)\n      context.lineTo(left + radius, top + height)\n      context.quadraticCurveTo(left, top + height, left, top + height - radius)\n      context.lineTo(left, top + radius)\n      context.quadraticCurveTo(left, top, left + radius, top)\n\n      this.model.padding = {\n        top: round / 2,\n        left: round / 2,\n        right: round / 2,\n        bottom: round / 2\n      }\n    } else {\n      context.rect(left, top, width, height)\n    }\n\n    this.drawFill(context)\n    this.drawStroke(context)\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : roundSet(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get layout() {\n    return TableLayout\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  rebuildLegendItems() {\n    if (this.components.length) {\n      this.components.slice().forEach((m: any) => m.dispose())\n    }\n\n    var {\n      left,\n      top,\n      width,\n      height,\n      fillStyle,\n      strokeStyle,\n      fontColor,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      textAlign = 'left',\n      round = 0,\n      italic,\n      bold,\n      lineWidth = 0,\n      rows,\n      columns,\n      status = {}\n    } = this.state\n\n    let statusRanges: {\n      min: string\n      max: string\n      description: string\n      color: string\n    }[] = status.ranges || []\n\n    var count = statusRanges.length\n\n    this.add(\n      statusRanges.map(range =>\n        Model.compile({\n          type: 'legend-item',\n          text: range.description || `${range.min || ''} ~ ${range.max || ''}`,\n          width: 1,\n          height: 1,\n          color: range.color,\n          fontColor,\n          fontFamily,\n          fontSize,\n          lineHeight,\n          italic,\n          bold,\n          textAlign\n        } as any, this.app)\n      )\n    )\n\n    var rows, columns\n\n    if (!columns && !rows) {\n      rows = count\n      columns = 1\n    } else if (columns && !rows) {\n      rows = Math.ceil(count / Number(columns))\n    } else if (rows && !columns) {\n      columns = Math.ceil(count / Number(rows))\n    }\n\n    this.set({\n      layoutConfig: {\n        rows,\n        columns\n      }\n    })\n  }\n\n  get hasTextProperty() {\n    return true\n  }\n\n  get textHidden() {\n    return true\n  }\n\n  onchange(after: Properties, before: Properties) {\n    this.rebuildLegendItems()\n  }\n}\n"]}

package/dist/svg.js

@@ -69,10 +69,12 @@ let Svg = class Svg extends HTMLOverlayElement {
     async oncreate_element(div) {
         await this.loadSVG(div);
     }
+    _value;
+    _legendTarget;
     get legendTarget() {
         var { legendTarget } = this.state;
         if (!this._legendTarget && legendTarget) {
-            this._legendTarget = this.root.findById(legendTarget);
+            this._legendTarget = this.root.findById?.(legendTarget);
             this._legendTarget && this._legendTarget.on('change', this.onchangeData, this);
         }
         return this._legendTarget;
@@ -141,7 +143,7 @@ let Svg = class Svg extends HTMLOverlayElement {
             });
             const paths = this.element.querySelectorAll(`path[id="${String(id)}"]`);
             paths.forEach(path => {
-                path.style.fill = (range === null || range === void 0 ? void 0 : range.color) || defaultColor || 'transparent';
+                path.style.fill = range?.color || defaultColor || 'transparent';
             });
         });
     }

package/dist/svg.js.map

@@ -1 +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: ComponentNature = {\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, ComponentNature, HTMLOverlayElement, Properties, sceneComponent } from '@hatiolab/things-scene'\nimport Legend from './legend.js'\n\n@sceneComponent('svg')\nexport default class Svg extends HTMLOverlayElement {\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.getState('src')\n  }\n\n  set src(src) {\n    this.setState('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.getState('status') as {\n      field: string\n      defaultColor: string\n      ranges: { min?: string | number; max?: string | 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: minValue, max: maxValue } = range\n\n        var min: number | undefined =\n          minValue !== undefined && minValue !== null && minValue !== '' ? Number(minValue) : undefined\n        var max: number | undefined =\n          maxValue !== undefined && maxValue !== null && maxValue !== '' ? Number(maxValue) : undefined\n\n        // If max is not set, treat it as infinity\n        var maxCheck = max === undefined ? true : max > status\n        var minCheck = min === undefined ? true : min <= status\n\n        return maxCheck && minCheck\n      })\n\n      const paths = this.element.querySelectorAll(`path[id=\"${String(id)}\"]`) as NodeListOf<SVGPathElement>\n      paths.forEach(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"]}
+{"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: ComponentNature = {\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, ComponentNature, HTMLOverlayElement, Properties, sceneComponent } from '@hatiolab/things-scene'\nimport Legend from './legend.js'\n\n@sceneComponent('svg')\nexport default class Svg extends HTMLOverlayElement {\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.getState('src')\n  }\n\n  set src(src) {\n    this.setState('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.getState('status') as {\n      field: string\n      defaultColor: string\n      ranges: { min?: string | number; max?: string | 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: minValue, max: maxValue } = range\n\n        var min: number | undefined =\n          minValue !== undefined && minValue !== null && minValue !== '' ? Number(minValue) : undefined\n        var max: number | undefined =\n          maxValue !== undefined && maxValue !== null && maxValue !== '' ? Number(maxValue) : undefined\n\n        // If max is not set, treat it as infinity\n        var maxCheck = max === undefined ? true : max > status\n        var minCheck = min === undefined ? true : min <= status\n\n        return maxCheck && minCheck\n      })\n\n      const paths = this.element!.querySelectorAll(`path[id=\"${String(id)}\"]`) as NodeListOf<SVGPathElement>\n      paths.forEach(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"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/scene-legend",
   "description": "Legend component for things-scene.",
   "author": "heartyoh",
-  "version": "9.2.2",
+  "version": "10.0.0-beta.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,7 +10,7 @@
   "things-scene": true,
   "publishConfig": {
     "access": "public",
-    "@oprato:registry": "https://registry.npmjs.org"
+    "@operato:registry": "https://registry.npmjs.org"
   },
   "repository": {
     "type": "git",
@@ -22,29 +22,29 @@
     "serve:dev": "npm run serve",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc",
-    "prepublish": "tsc",
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "prepublishOnly": "tsc",
+    "lint": "eslint src/ && prettier \"src/**/*.ts\" --check",
+    "format": "eslint src/ --fix && prettier \"src/**/*.ts\" --write",
     "migration": "things-factory-migration"
   },
   "dependencies": {
-    "@hatiolab/things-scene": "^9.0.0",
-    "@operato/i18n": "^9.0.0",
+    "@hatiolab/things-scene": "^10.0.0-beta.1",
+    "@operato/i18n": "^10.0.0-beta.1",
     "lit": "^3.1.2"
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
-    "@things-factory/builder": "^9.0.0",
-    "@things-factory/operato-board": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@things-factory/builder": "^10.0.0-beta.1",
+    "@things-factory/operato-board": "^10.0.0-beta.1",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@web/dev-server": "^0.1.28",
     "concurrently": "^8.0.1",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -60,5 +60,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ec08ba2c7c2cfa6c72cc2dc368e5e5927dec4750"
+  "gitHead": "bb127dd516b9e962fb2d0a24bc2d8c5e108f06fb"
 }