@operato/property-panel 9.0.0-beta.14

package/dist/src/property-panel/shapes/shapes.js

@@ -0,0 +1,312 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-angle.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/help/ox-title-with-help.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js';
+import { AbstractProperty } from '../abstract-property.js';
+export class PropertyShapes extends AbstractProperty {
+    constructor() {
+        super(...arguments);
+        this.bounds = null;
+        this.selected = [];
+        this._3dExpanded = false;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
+    }
+    render() {
+        const value = this.value || {};
+        const { width, height } = this.bounds || {};
+        return html `
+      <fieldset>
+        <div class="property-grid">
+          ${this._isIdentifiable(this.selected)
+            ? html `
+                <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
+                <input value-key="id" .value=${value.id || ''} />
+              `
+            : html ``}
+          ${this._isClassIdentifiable(this.selected)
+            ? html `
+                <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
+                <input value-key="class" .value=${value.class || ''} />
+              `
+            : html ``}
+          ${this._hasTextProperty(this.selected)
+            ? html `
+                <label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
+                <input value-key="text" .value=${value.text || ''} />
+                <label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </label>
+                <input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
+                <datalist id="format-list">
+                  <option value="#,###."></option>
+                  <option value="#,###.#"></option>
+                  <option value="#,###.0"></option>
+                  <option value="#,##0.#"></option>
+                  <option value="#,##0.0"></option>
+                  <option value="#,##0.0%"></option>
+                </datalist>
+              `
+            : html ``}
+          ${this._hasProperties(this.selected)
+            ? html `
+                <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
+                <label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
+
+                <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
+                <label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
+              `
+            : html ``}
+        </div>
+      </fieldset>
+
+      ${!this._isLine(this.selected)
+            ? keyed(this.selected, html `
+              <fieldset class="icon-label unit ratio">
+                <legend>
+                  <ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
+                </legend>
+
+                <div class="property-grid">
+                  <label class="width"> <ox-i18n msgid="label.width">width</ox-i18n> </label>
+                  <input type="number" value-key="bounds.width" .value=${String(width)} />
+                  <label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
+                  <input type="number" value-key="bounds.height" .value=${String(height)} />
+
+                  ${this.selected.length && this.selected[0].isRootModel()
+                ? html ``
+                : html `
+                        <label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
+                        <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
+                      `}
+                </div>
+              </fieldset>
+            `)
+            : html ``}
+      ${this._is3dish(this.selected)
+            ? html `
+            <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
+              <legend>
+                <ox-title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
+                <md-icon
+                  @click=${(e) => {
+                this._3dExpanded = !this._3dExpanded;
+            }}
+                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
+                <input type="number" value-key="zPos" .value=${value.zPos} />
+                <label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
+                <input type="number" value-key="depth" .value=${value.depth} />
+
+                <label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
+                <ox-input-angle value-key="rotationX" .value=${value.rotationX}> </ox-input-angle>
+
+                <label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
+                <ox-input-angle value-key="rotationY" .value=${value.rotationY}> </ox-input-angle>
+
+                <label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
+                <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
+              </div>
+            </fieldset>
+          `
+            : html ``}
+      ${this._hasTextProperty(this.selected)
+            ? html `
+            <fieldset>
+              <legend>
+                <ox-title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
+                  >text box</ox-title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label> <ox-i18n msgid="label.horizontal">horizontal</ox-i18n> </label>
+                <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
+                  <md-icon data-value="left">format_align_left</md-icon>
+                  <md-icon data-value="center">format_align_center</md-icon>
+                  <md-icon data-value="right">format_align_right</md-icon>
+                  <md-icon data-value="justify">format_align_justify</md-icon>
+                </ox-buttons-radio>
+
+                <label> <ox-i18n msgid="label.vertical">vertical</ox-i18n> </label>
+                <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
+                  <md-icon data-value="top">align_vertical_top</md-icon>
+                  <md-icon data-value="middle">align_vertical_center</md-icon>
+                  <md-icon data-value="bottom">align_vertical_bottom</md-icon>
+                </ox-buttons-radio>
+
+                <input
+                  id="checkbox-support-markdown"
+                  type="checkbox"
+                  value-key="supportMarkdown"
+                  .checked=${value.supportMarkdown}
+                />
+                <label for="checkbox-support-markdown">
+                  <ox-i18n msgid="label.support-markdown">Support Markdown</ox-i18n>
+                </label>
+
+                <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
+                <label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
+
+                ${!value.textWrap
+                ? html ` <label for="checkbox-textOverflow">
+                        <ox-i18n msgid="label.text-overflow">Text Overflow</ox-i18n>
+                      </label>
+                      <select value-key="textOverflow" .value=${value.textOverflow || ''}>
+                        <option value="" selected>none</option>
+                        <option value="ellipsis">ellipsis</option>
+                        <option value="clip">clip</option>
+                      </select>`
+                : ''}
+
+                <label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
+                <table class="box-padding">
+                  <tr>
+                    <td class="slide1"></td>
+                    <td class="slide2"></td>
+                    <td class="slide3"></td>
+                  </tr>
+                  <tr>
+                    <td class="slide4"></td>
+                    <td class="slide5">
+                      <input type="number" value-key="paddingTop" .value=${value.paddingTop || 0} />
+                      <input type="number" value-key="paddingLeft" .value=${value.paddingLeft || 0} />
+                      <input type="number" value-key="paddingRight" .value=${value.paddingRight || 0} />
+                      <input type="number" value-key="paddingBottom" .value=${value.paddingBottom || 0} />
+                    </td>
+                    <td class="slide6"></td>
+                  </tr>
+                  <tr>
+                    <td class="slide7"></td>
+                    <td class="slide8"></td>
+                    <td class="slide9"></td>
+                  </tr>
+                </table>
+              </div>
+            </fieldset>
+          `
+            : html ``}
+      ${this.selected.length && this.selected[0].isRootModel()
+            ? html `
+            <fieldset class="icon-label">
+              <legend>
+                <ox-title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
+                  >Viewer Option</ox-title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label><ox-i18n msgid="label.fit">Fit</ox-i18n></label>
+                <select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
+                  <option value="none">none</option>
+                  <option value="center">center</option>
+                  <option value="ratio" selected>ratio</option>
+                  <option value="both">both</option>
+                  <option value="width">width</option>
+                  <option value="height">height</option>
+                </select>
+              </div>
+            </fieldset>
+            <fieldset class="icon-label">
+              <legend>
+                <ox-title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
+                  >Print Option</ox-title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label class="rotate"><ox-i18n msgid="label.label-rotation">Label Rotation</ox-i18n></label>
+                <select value-key="labelRotation" .value=${value.labelRotation || 'N'}>
+                  <option value="N" selected>0°</option>
+                  <option value="B">90°</option>
+                  <option value="I">180°</option>
+                  <option value="R">270°</option>
+                </select>
+              </div>
+            </fieldset>
+          `
+            : html ``}
+    `;
+    }
+    onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        var value = this.getValueFromEventTarget(element);
+        if (key.indexOf('bounds.') == 0) {
+            if (isNaN(value))
+                return;
+            this.dispatchEvent(new CustomEvent('bounds-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    [key.substr(7)]: value
+                }
+            }));
+        }
+        else {
+            this.onAfterValueChange(key, value);
+        }
+    }
+    _hasTextProperty(selected) {
+        for (let i = 0; i < selected.length; i++) {
+            if (!selected[i].hasTextProperty)
+                return false;
+        }
+        return true;
+    }
+    _hasProperties(selected) {
+        if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer()))
+            return false;
+        return true;
+    }
+    _isIdentifiable(selected) {
+        if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))
+            return false;
+        return true;
+    }
+    _isClassIdentifiable(selected) {
+        if (!selected || (selected[0] && selected[0].isLayer()))
+            return false;
+        return true;
+    }
+    _isLine(selected) {
+        if (!selected || !(selected[0] && selected[0].isLine()))
+            return false;
+        return true;
+    }
+    _is3dish(selected) {
+        if (!selected || !(selected[0] && selected[0].is3dish()))
+            return false;
+        return true;
+    }
+}
+PropertyShapes.styles = [PropertyGridStyles, BoxPaddingEditorStyles];
+__decorate([
+    property({ type: Object })
+], PropertyShapes.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyShapes.prototype, "bounds", void 0);
+__decorate([
+    property({ type: Array })
+], PropertyShapes.prototype, "selected", void 0);
+__decorate([
+    state()
+], PropertyShapes.prototype, "_3dExpanded", void 0);
+//# sourceMappingURL=shapes.js.map

package/dist/src/property-panel/shapes/shapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../src/property-panel/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class PropertyShapes extends AbstractProperty {\n  static styles = [PropertyGridStyles, BoxPaddingEditorStyles]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) bounds: BOUNDS | null = null\n  @property({ type: Array }) selected: Component[] = []\n\n  @state() private _3dExpanded: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    const value = this.value || {}\n    const { width, height } = this.bounds || {}\n\n    return html`\n      <fieldset>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n                <input value-key=\"id\" .value=${value.id || ''} />\n              `\n            : html``}\n          ${this._isClassIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n                <input value-key=\"class\" .value=${value.class || ''} />\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n                <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n                <datalist id=\"format-list\">\n                  <option value=\"#,###.\"></option>\n                  <option value=\"#,###.#\"></option>\n                  <option value=\"#,###.0\"></option>\n                  <option value=\"#,##0.#\"></option>\n                  <option value=\"#,##0.0\"></option>\n                  <option value=\"#,##0.0%\"></option>\n                </datalist>\n              `\n            : html``}\n          ${this._hasProperties(this.selected)\n            ? html`\n                <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n                <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n                <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n                <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      ${!this._isLine(this.selected)\n        ? keyed(\n            this.selected,\n            html`\n              <fieldset class=\"icon-label unit ratio\">\n                <legend>\n                  <ox-title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-title-with-help>\n                </legend>\n\n                <div class=\"property-grid\">\n                  <label class=\"width\"> <ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n                  <input type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n                  <label class=\"height\"> <ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n                  <input type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n\n                  ${this.selected.length && this.selected[0].isRootModel()\n                    ? html``\n                    : html`\n                        <label class=\"rotate\"> <ox-i18n msgid=\"label.rotate\">rotate</ox-i18n> </label>\n                        <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n                      `}\n                </div>\n              </fieldset>\n            `\n          )\n        : html``}\n      ${this._is3dish(this.selected)\n        ? html`\n            <fieldset class=\"icon-label unit ratio\" collapsable ?collapsed=${!this._3dExpanded}>\n              <legend>\n                <ox-title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</ox-title-with-help>\n                <md-icon\n                  @click=${(e: Event) => {\n                    this._3dExpanded = !this._3dExpanded\n                  }}\n                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"zPos\"> <ox-i18n msgid=\"label.z-pos\">pos. Z</ox-i18n> </label>\n                <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n                <label class=\"depth\"> <ox-i18n msgid=\"label.depth\">depth</ox-i18n> </label>\n                <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n                <label class=\"rotationX\"> <ox-i18n msgid=\"label.rotation-x\">rot. X</ox-i18n> </label>\n                <ox-input-angle value-key=\"rotationX\" .value=${value.rotationX}> </ox-input-angle>\n\n                <label class=\"rotationY\"> <ox-i18n msgid=\"label.rotation-y\">rot. Y</ox-i18n> </label>\n                <ox-input-angle value-key=\"rotationY\" .value=${value.rotationY}> </ox-input-angle>\n\n                <label class=\"rotationZ\"> <ox-i18n msgid=\"label.rotation-z\">rot. Z</ox-i18n> </label>\n                <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this._hasTextProperty(this.selected)\n        ? html`\n            <fieldset>\n              <legend>\n                <ox-title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n                  >text box</ox-title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n                <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n                  <md-icon data-value=\"left\">format_align_left</md-icon>\n                  <md-icon data-value=\"center\">format_align_center</md-icon>\n                  <md-icon data-value=\"right\">format_align_right</md-icon>\n                  <md-icon data-value=\"justify\">format_align_justify</md-icon>\n                </ox-buttons-radio>\n\n                <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n                <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n                  <md-icon data-value=\"top\">align_vertical_top</md-icon>\n                  <md-icon data-value=\"middle\">align_vertical_center</md-icon>\n                  <md-icon data-value=\"bottom\">align_vertical_bottom</md-icon>\n                </ox-buttons-radio>\n\n                <input\n                  id=\"checkbox-support-markdown\"\n                  type=\"checkbox\"\n                  value-key=\"supportMarkdown\"\n                  .checked=${value.supportMarkdown}\n                />\n                <label for=\"checkbox-support-markdown\">\n                  <ox-i18n msgid=\"label.support-markdown\">Support Markdown</ox-i18n>\n                </label>\n\n                <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n                <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n\n                ${!value.textWrap\n                  ? html` <label for=\"checkbox-textOverflow\">\n                        <ox-i18n msgid=\"label.text-overflow\">Text Overflow</ox-i18n>\n                      </label>\n                      <select value-key=\"textOverflow\" .value=${value.textOverflow || ''}>\n                        <option value=\"\" selected>none</option>\n                        <option value=\"ellipsis\">ellipsis</option>\n                        <option value=\"clip\">clip</option>\n                      </select>`\n                  : ''}\n\n                <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n                <table class=\"box-padding\">\n                  <tr>\n                    <td class=\"slide1\"></td>\n                    <td class=\"slide2\"></td>\n                    <td class=\"slide3\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide4\"></td>\n                    <td class=\"slide5\">\n                      <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop || 0} />\n                      <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft || 0} />\n                      <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight || 0} />\n                      <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom || 0} />\n                    </td>\n                    <td class=\"slide6\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide7\"></td>\n                    <td class=\"slide8\"></td>\n                    <td class=\"slide9\"></td>\n                  </tr>\n                </table>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this.selected.length && this.selected[0].isRootModel()\n        ? html`\n            <fieldset class=\"icon-label\">\n              <legend>\n                <ox-title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n                  >Viewer Option</ox-title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n                <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n                  <option value=\"none\">none</option>\n                  <option value=\"center\">center</option>\n                  <option value=\"ratio\" selected>ratio</option>\n                  <option value=\"both\">both</option>\n                  <option value=\"width\">width</option>\n                  <option value=\"height\">height</option>\n                </select>\n              </div>\n            </fieldset>\n            <fieldset class=\"icon-label\">\n              <legend>\n                <ox-title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n                  >Print Option</ox-title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"rotate\"><ox-i18n msgid=\"label.label-rotation\">Label Rotation</ox-i18n></label>\n                <select value-key=\"labelRotation\" .value=${value.labelRotation || 'N'}>\n                  <option value=\"N\" selected>0°</option>\n                  <option value=\"B\">90°</option>\n                  <option value=\"I\">180°</option>\n                  <option value=\"R\">270°</option>\n                </select>\n              </div>\n            </fieldset>\n          `\n        : html``}\n    `\n  }\n\n  onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this.getValueFromEventTarget(element)\n\n    if (key.indexOf('bounds.') == 0) {\n      if (isNaN(value)) return\n      this.dispatchEvent(\n        new CustomEvent('bounds-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            [key.substr(7)]: value\n          }\n        })\n      )\n    } else {\n      this.onAfterValueChange(key, value)\n    }\n  }\n\n  _hasTextProperty(selected: Component[]) {\n    for (let i = 0; i < selected.length; i++) {\n      if (!selected[i].hasTextProperty) return false\n    }\n\n    return true\n  }\n\n  _hasProperties(selected: Component[]) {\n    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isIdentifiable(selected: Component[]) {\n    if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))\n      return false\n\n    return true\n  }\n\n  _isClassIdentifiable(selected: Component[]) {\n    if (!selected || (selected[0] && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isLine(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].isLine())) return false\n\n    return true\n  }\n\n  _is3dish(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n    return true\n  }\n}\n"]}

package/dist/src/property-panel/specifics/specific-properties-builder.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/app/property-editor.js';
+import { LitElement, PropertyValues } from 'lit';
+export declare class SpecificPropertiesBuilder extends LitElement {
+    value: any;
+    props: any[];
+    propertyEditor: any;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    _onPropsChanged(props: any[]): void;
+    _setValues(): void;
+    onValueChanged(e: Event): void;
+}

package/dist/src/property-panel/specifics/specific-properties-builder.js

@@ -0,0 +1,138 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/app/property-editor.js'; /* for registering property editors */
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+/**
+모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
+
+Example:
+
+    <specific-properties-builder value="{{value}}">
+      <label>Center X</label>
+      <input type="number" .value="${value.cx}">
+      <label>Width</label>
+      <input type="number" .value="${value.width}">
+    </specific-properties-builder>
+*/
+const DEFAULT_VALUE = {
+    legend: '',
+    // number: 0, // should be undefined
+    angle: 0,
+    string: '',
+    password: '',
+    textarea: '',
+    checkbox: false,
+    select: '',
+    color: '#000000',
+    'solidcolor-stops': null,
+    'gradientcolor-stops': null,
+    'gltf-selector': '',
+    'image-selector': '',
+    multiplecolor: null,
+    editortable: null,
+    imageselector: '',
+    options: null,
+    date: null
+};
+function convertValue(type, value) {
+    var converted = String(value).trim() == '' ? undefined : value;
+    switch (type) {
+        case 'number':
+        case 'angle':
+            converted = parseFloat(value);
+            converted = isNaN(converted) ? undefined : converted;
+            break;
+    }
+    return converted;
+}
+export class SpecificPropertiesBuilder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.props = [];
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    firstUpdated() {
+        this.addEventListener('change', this.onValueChanged.bind(this));
+    }
+    updated(changes) {
+        changes.has('props') && this._onPropsChanged(this.props);
+        changes.has('value') && this._setValues();
+    }
+    _onPropsChanged(props) {
+        this.textContent = '';
+        (props || []).forEach((spec) => {
+            const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled } = spec;
+            let elementType = OxPropertyEditor.getEditor(type);
+            if (!elementType) {
+                console.warn('Property Editor not defined', type);
+                return;
+            }
+            let element = document.createElement(elementType);
+            element.label = label;
+            element.type = type;
+            element.placeholder = placeholder;
+            element.name = name;
+            element.setAttribute('name', name);
+            if (observe) {
+                element.observeHandler = observe;
+            }
+            element.property = property;
+            element.editor = editor;
+            element.quantifier = quantifier;
+            element.defaultValue = defaultValue;
+            element.setAttribute('property-editor', 'true');
+            element.disabled = disabled;
+            this.appendChild(element);
+        });
+    }
+    _setValues() {
+        this.value &&
+            Array.from(this.querySelectorAll('[name]')).forEach((prop) => {
+                let name = prop.getAttribute('name');
+                if (!name) {
+                    return;
+                }
+                var convertedValue = convertValue(prop.type, this.value[name]);
+                if (convertedValue === undefined) {
+                    convertedValue = DEFAULT_VALUE[prop.type];
+                }
+                prop.value = convertedValue;
+                prop.observe.call(prop, prop.value);
+            });
+    }
+    onValueChanged(e) {
+        e.stopPropagation();
+        var target = e.target;
+        const prop = target.closest('[property-editor]');
+        var name = prop.getAttribute('name');
+        if (!name) {
+            return;
+        }
+        this.value[name] = prop.value;
+        prop.observe(prop.value);
+        this._setValues();
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                [name]: prop.value
+            }
+        }));
+    }
+}
+__decorate([
+    property({ type: Object })
+], SpecificPropertiesBuilder.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], SpecificPropertiesBuilder.prototype, "props", void 0);
+__decorate([
+    property({ type: Object })
+], SpecificPropertiesBuilder.prototype, "propertyEditor", void 0);
+//# sourceMappingURL=specific-properties-builder.js.map

package/dist/src/property-panel/specifics/specific-properties-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"specific-properties-builder.js","sourceRoot":"","sources":["../../../../src/property-panel/specifics/specific-properties-builder.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/app/property-editor.js' /* for registering property editors */\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n/**\n모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.\n\nExample:\n\n    <specific-properties-builder value=\"{{value}}\">\n      <label>Center X</label>\n      <input type=\"number\" .value=\"${value.cx}\">\n      <label>Width</label>\n      <input type=\"number\" .value=\"${value.width}\">\n    </specific-properties-builder>\n*/\n\nconst DEFAULT_VALUE = {\n  legend: '',\n  // number: 0, // should be undefined\n  angle: 0,\n  string: '',\n  password: '',\n  textarea: '',\n  checkbox: false,\n  select: '',\n  color: '#000000',\n  'solidcolor-stops': null,\n  'gradientcolor-stops': null,\n  'gltf-selector': '',\n  'image-selector': '',\n  multiplecolor: null,\n  editortable: null,\n  imageselector: '',\n  options: null,\n  date: null\n}\n\nfunction convertValue(type: string, value: any) {\n  var converted = String(value).trim() == '' ? undefined : value\n  switch (type) {\n    case 'number':\n    case 'angle':\n      converted = parseFloat(value)\n      converted = isNaN(converted) ? undefined : converted\n      break\n  }\n\n  return converted\n}\n\nexport class SpecificPropertiesBuilder extends LitElement {\n  @property({ type: Object }) value: any\n  @property({ type: Array }) props: any[] = []\n  @property({ type: Object }) propertyEditor: any\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  firstUpdated() {\n    this.addEventListener('change', this.onValueChanged.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('props') && this._onPropsChanged(this.props)\n    changes.has('value') && this._setValues()\n  }\n\n  _onPropsChanged(props: any[]) {\n    this.textContent = ''\n    ;(props || []).forEach((spec: PropertySpec) => {\n      const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled } = spec\n\n      let elementType = OxPropertyEditor.getEditor(type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', type)\n        return\n      }\n      let element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = label\n      element.type = type\n      element.placeholder = placeholder\n      element.name = name\n      element.setAttribute('name', name)\n\n      if (observe) {\n        element.observeHandler = observe\n      }\n      element.property = property\n      element.editor = editor\n      element.quantifier = quantifier\n      element.defaultValue = defaultValue\n      element.setAttribute('property-editor', 'true')\n      element.disabled = disabled\n\n      this.appendChild(element)\n    })\n  }\n\n  _setValues() {\n    this.value &&\n      Array.from(this.querySelectorAll('[name]')).forEach((prop: Properties) => {\n        let name = prop.getAttribute('name')\n        if (!name) {\n          return\n        }\n        var convertedValue = convertValue(prop.type, this.value[name])\n        if (convertedValue === undefined) {\n          convertedValue = (DEFAULT_VALUE as any)[prop.type]\n        }\n        prop.value = convertedValue\n        prop.observe.call(prop, prop.value)\n      })\n  }\n\n  onValueChanged(e: Event) {\n    e.stopPropagation()\n    var target = e.target as Element\n\n    const prop = target.closest('[property-editor]') as OxPropertyEditor\n\n    var name = prop.getAttribute('name')\n    if (!name) {\n      return\n    }\n\n    this.value[name] = prop.value\n\n    prop.observe(prop.value)\n    this._setValues()\n\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          [name]: prop.value\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/src/property-panel/specifics/specifics.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/help/ox-help-icon.js';
+import { LitElement } from 'lit';
+import { Component, Scene } from '@hatiolab/things-scene';
+import { SpecificPropertiesBuilder } from './specific-properties-builder.js';
+declare const PropertySpecific_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class PropertySpecific extends PropertySpecific_base {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    scene: Scene | null;
+    selected: Component[];
+    props: any[];
+    propertyEditor: any[];
+    private boundINeedSelected;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get scopedElements(): {
+        'specific-properties-builder': typeof SpecificPropertiesBuilder;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    private onINeedSelected;
+}
+export {};

package/dist/src/property-panel/specifics/specifics.js

@@ -0,0 +1,84 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/help/ox-help-icon.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { i18next } from '@operato/i18n';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { SpecificPropertiesBuilder } from './specific-properties-builder.js';
+export class PropertySpecific extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.scene = null;
+        this.selected = [];
+        this.props = [];
+        this.propertyEditor = [];
+        this.boundINeedSelected = this.onINeedSelected.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('i-need-selected', this.boundINeedSelected);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('i-need-selected', this.boundINeedSelected);
+    }
+    static get scopedElements() {
+        return {
+            'specific-properties-builder': SpecificPropertiesBuilder
+        };
+    }
+    render() {
+        var _a;
+        const selected = this.selected && this.selected[0];
+        const value = this.value || {};
+        return html `
+      <label
+        >${i18next.t(`component.${value.type}`)}<ox-help-icon .topic=${(_a = selected === null || selected === void 0 ? void 0 : selected.nature) === null || _a === void 0 ? void 0 : _a.help}></ox-help-icon
+      ></label>
+
+      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>
+      </specific-properties-builder>
+    `;
+    }
+    onINeedSelected(e) {
+        e.stopPropagation();
+        var { callback } = e.detail;
+        this.scene.undoableChange(() => {
+            callback.call(null, this.selected);
+        });
+    }
+}
+PropertySpecific.styles = [
+    PropertyGridStyles,
+    css `
+      label {
+        display: block;
+        margin: 10px;
+
+        text-align: right;
+        font: bold 14px var(--theme-font);
+        color: var(--md-sys-color-on-primary-container);
+        text-transform: capitalize;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertySpecific.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertySpecific.prototype, "scene", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySpecific.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySpecific.prototype, "props", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySpecific.prototype, "propertyEditor", void 0);
+//# sourceMappingURL=specifics.js.map

package/dist/src/property-panel/specifics/specifics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"specifics.js","sourceRoot":"","sources":["../../../../src/property-panel/specifics/specifics.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAA;AAE5E,MAAM,OAAO,gBAAiB,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAArE;;QAiB8B,UAAK,GAAiB,IAAI,CAAA;QAC3B,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;QACjB,mBAAc,GAAU,EAAE,CAAA;QAE7C,uBAAkB,GAAQ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAyCnE,CAAC;IAvCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACnE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACtE,CAAC;IACD,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,6BAA6B,EAAE,yBAAyB;SACzD,CAAA;IACH,CAAC;IACD,MAAM;;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QAClD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;WAEJ,OAAO,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,IAAI,EAAE,CAAC,wBAAwB,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CAAE,IAAI;;;4CAGjD,KAAK,WAAW,IAAI,CAAC,KAAK,oBAAoB,IAAI,CAAC,cAAc;;KAExG,CAAA;IACH,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QAE3B,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,GAAG,EAAE;YAC9B,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;IACJ,CAAC;;AA7DM,uBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;KAUF;CACF,AAbY,CAaZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2B;AAC3B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wDAA2B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/help/ox-help-icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { i18next } from '@operato/i18n'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { SpecificPropertiesBuilder } from './specific-properties-builder.js'\n\nexport class PropertySpecific extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      label {\n        display: block;\n        margin: 10px;\n\n        text-align: right;\n        font: bold 14px var(--theme-font);\n        color: var(--md-sys-color-on-primary-container);\n        text-transform: capitalize;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) props: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  private boundINeedSelected: any = this.onINeedSelected.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('i-need-selected', this.boundINeedSelected)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.removeEventListener('i-need-selected', this.boundINeedSelected)\n  }\n  static get scopedElements() {\n    return {\n      'specific-properties-builder': SpecificPropertiesBuilder\n    }\n  }\n  render() {\n    const selected = this.selected && this.selected[0]\n    const value = this.value || {}\n\n    return html`\n      <label\n        >${i18next.t(`component.${value.type}`)}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon\n      ></label>\n\n      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>\n      </specific-properties-builder>\n    `\n  }\n\n  private onINeedSelected(e: CustomEvent) {\n    e.stopPropagation()\n\n    var { callback } = e.detail\n\n    this.scene!.undoableChange(() => {\n      callback.call(null, this.selected)\n    })\n  }\n}\n"]}