@operato/board 0.2.44 → 0.2.48

package/dist/src/modeller/property-sidebar/shapes/shapes.js

@@ -0,0 +1,406 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/dist/src/ox-input-angle';
+import '@operato/input/dist/src/ox-buttons-radio';
+import '@material/mwc-icon';
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import { AbstractProperty } from '../abstract-property';
+import { PropertySharedStyle } from '../property-shared-style';
+import { BoxPaddingEditorStyles } from './box-padding-editor-styles';
+let PropertyShapes = 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() {
+        var _a, _b;
+        const value = this.value || {};
+        return html `
+      <fieldset>
+        <div class="property-grid">
+          ${this._isIdentifiable(this.selected)
+            ? html `
+                <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
+                <input value-key="id" .value=${value.id || ''} />
+              `
+            : html ``}
+          ${this._isClassIdentifiable(this.selected)
+            ? html `
+                <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
+                <input value-key="class" .value=${value.class || ''} />
+              `
+            : html ``}
+          ${this._hasTextProperty(this.selected)
+            ? html `
+                <label> <i18n-msg msgid="label.text">Text</i18n-msg> </label>
+                <input value-key="text" .value=${value.text || ''} />
+                <label> <i18n-msg msgid="label.text-format">Text Format</i18n-msg> </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 `
+                <div class="checkbox-row">
+                  <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
+                  <label for="checkbox-hidden"> <i18n-msg msgid="label.item-hidden">Item Hidden</i18n-msg> </label>
+
+                  <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
+                  <label for="checkbox-locked"> <i18n-msg msgid="label.locked">Locked</i18n-msg> </label>
+                </div>
+              `
+            : html ``}
+        </div>
+      </fieldset>
+
+      ${!this._isLine(this.selected)
+            ? html `
+            <fieldset class="icon-label unit ratio">
+              <legend>
+                <title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</title-with-help>
+              </legend>
+
+              <div class="property-grid">
+                <label class="width"> <i18n-msg msgid="label.width">width</i18n-msg> </label>
+                <input type="number" value-key="bounds.width" .value=${(_a = this.bounds) === null || _a === void 0 ? void 0 : _a.width} />
+                <label class="height"> <i18n-msg msgid="label.height">height</i18n-msg> </label>
+                <input type="number" value-key="bounds.height" .value=${(_b = this.bounds) === null || _b === void 0 ? void 0 : _b.height} />
+
+                ${this.selected.length && this.selected[0].isRootModel()
+                ? html ``
+                : html `
+                      <label class="rotate"> <i18n-msg msgid="label.rotate">rotate</i18n-msg> </label>
+                      <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+                    `}
+              </div>
+            </fieldset>
+          `
+            : html ``}
+      ${this._is3dish(this.selected)
+            ? html `
+            <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
+              <legend>
+                <title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</title-with-help>
+                <mwc-icon
+                  @click=${(e) => {
+                this._3dExpanded = !this._3dExpanded;
+            }}
+                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label class="zPos"> <i18n-msg msgid="label.z-pos">pos. Z</i18n-msg> </label>
+                <input type="number" value-key="zPos" .value=${value.zPos} />
+                <label class="depth"> <i18n-msg msgid="label.depth">depth</i18n-msg> </label>
+                <input type="number" value-key="depth" .value=${value.depth} />
+
+                <label class="rotationX"> <i18n-msg msgid="label.rotation-x">rot. X</i18n-msg> </label>
+                <ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
+
+                <label class="rotationY"> <i18n-msg msgid="label.rotation-y">rot. Y</i18n-msg> </label>
+                <ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
+
+                <label class="rotationZ"> <i18n-msg msgid="label.rotation-z">rot. Z</i18n-msg> </label>
+                <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+              </div>
+            </fieldset>
+          `
+            : html ``}
+      ${this._hasTextProperty(this.selected)
+            ? html `
+            <fieldset>
+              <legend>
+                <title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
+                  >text box</title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label> <i18n-msg msgid="label.horizontal">horizontal</i18n-msg> </label>
+                <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
+                  <div data-value="left"></div>
+                  <div data-value="center"></div>
+                  <div data-value="right"></div>
+                  <div data-value="justify"></div>
+                </ox-buttons-radio>
+
+                <label> <i18n-msg msgid="label.vertical">vertical</i18n-msg> </label>
+                <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
+                  <div data-value="top"></div>
+                  <div data-value="middle"></div>
+                  <div data-value="bottom"></div>
+                </ox-buttons-radio>
+
+                <div class="checkbox-row">
+                  <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
+                  <label for="checkbox-textwrap"> <i18n-msg msgid="label.text-wrap">Text Wrap</i18n-msg> </label>
+                </div>
+
+                <label> <i18n-msg msgid="label.padding">padding</i18n-msg> </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} />
+                      <input type="number" value-key="paddingLeft" .value=${value.paddingLeft} />
+                      <input type="number" value-key="paddingRight" .value=${value.paddingRight} />
+                      <input type="number" value-key="paddingBottom" .value=${value.paddingBottom} />
+                    </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>
+                <title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
+                  >Viewer Option</title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label><i18n-msg msgid="label.fit">Fit</i18n-msg></label>
+                <select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
+                  <option value="none">none</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>
+                <title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
+                  >Print Option</title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label class="rotate"><i18n-msg msgid="label.label-rotation">Label Rotation</i18n-msg></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 = [
+    PropertySharedStyle,
+    BoxPaddingEditorStyles,
+    css `
+      fieldset[collapsable] legend {
+        box-sizing: border-box;
+        width: 100%;
+      }
+
+      fieldset[collapsable] legend mwc-icon {
+        float: right;
+        font-size: medium;
+        margin: 0;
+        cursor: pointer;
+      }
+
+      fieldset[collapsable][collapsed] > :not(legend) {
+        display: none;
+      }
+    `,
+    css `
+      .icon-label label {
+        background: url(/assets/images/icon-properties-label.png) 7px -900px no-repeat;
+      }
+
+      .icon-label label.width {
+        background-position: 7px -96px;
+      }
+
+      .icon-label label.height {
+        background-position: 7px 4px;
+      }
+
+      .icon-label label.rotate {
+        background-position: 7px -198px;
+      }
+
+      .icon-label label.twidth {
+        background-position: 7px -296px;
+      }
+
+      .icon-label label.theight {
+        background-position: 7px -396px;
+      }
+
+      .icon-label label.zPos {
+        background-position: 5px -1098px;
+      }
+
+      .icon-label label.depth {
+        background-position: 5px -1198px;
+      }
+
+      .icon-label label.rotationX {
+        background-position: 5px -1296px;
+      }
+
+      .icon-label label.rotationY {
+        background-position: 5px -1396px;
+      }
+
+      .icon-label label.rotationZ {
+        background-position: 5px -1496px;
+      }
+
+      ox-buttons-radio > * {
+        width: 30px;
+        height: 25px;
+        min-width: initial;
+        margin: 0 4px 0 0;
+        padding: 0;
+        border-radius: 0;
+        display: inline-block;
+        border-bottom: 2px solid #fff;
+      }
+
+      ox-buttons-radio div {
+        background: url(/assets/images/icon-properties.png) no-repeat;
+      }
+
+      ox-buttons-radio div[data-value='left'] {
+        background-position: 50% 3px;
+      }
+
+      ox-buttons-radio div[data-value='center'] {
+        background-position: 50% -47px;
+      }
+
+      ox-buttons-radio div[data-value='right'] {
+        background-position: 50% -97px;
+      }
+
+      ox-buttons-radio div[data-value='justify'] {
+        background-position: 50% -147px;
+      }
+
+      ox-buttons-radio div[data-value='top'] {
+        background-position: 50% -197px;
+      }
+
+      ox-buttons-radio div[data-value='middle'] {
+        background-position: 50% -193px;
+      }
+
+      ox-buttons-radio div[data-value='bottom'] {
+        background-position: 50% -188px;
+      }
+
+      ox-buttons-radio div[active] {
+        border-color: #f2471c;
+      }
+    `
+];
+__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);
+PropertyShapes = __decorate([
+    customElement('property-shape')
+], PropertyShapes);
+//# sourceMappingURL=shapes.js.map

package/dist/src/modeller/property-sidebar/shapes/shapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/dist/src/ox-input-angle'\nimport '@operato/input/dist/src/ox-buttons-radio'\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles'\n\n@customElement('property-shape')\nclass PropertyShapes extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    BoxPaddingEditorStyles,\n    css`\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend mwc-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n    `,\n    css`\n      .icon-label label {\n        background: url(/assets/images/icon-properties-label.png) 7px -900px no-repeat;\n      }\n\n      .icon-label label.width {\n        background-position: 7px -96px;\n      }\n\n      .icon-label label.height {\n        background-position: 7px 4px;\n      }\n\n      .icon-label label.rotate {\n        background-position: 7px -198px;\n      }\n\n      .icon-label label.twidth {\n        background-position: 7px -296px;\n      }\n\n      .icon-label label.theight {\n        background-position: 7px -396px;\n      }\n\n      .icon-label label.zPos {\n        background-position: 5px -1098px;\n      }\n\n      .icon-label label.depth {\n        background-position: 5px -1198px;\n      }\n\n      .icon-label label.rotationX {\n        background-position: 5px -1296px;\n      }\n\n      .icon-label label.rotationY {\n        background-position: 5px -1396px;\n      }\n\n      .icon-label label.rotationZ {\n        background-position: 5px -1496px;\n      }\n\n      ox-buttons-radio > * {\n        width: 30px;\n        height: 25px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n      }\n\n      ox-buttons-radio div {\n        background: url(/assets/images/icon-properties.png) no-repeat;\n      }\n\n      ox-buttons-radio div[data-value='left'] {\n        background-position: 50% 3px;\n      }\n\n      ox-buttons-radio div[data-value='center'] {\n        background-position: 50% -47px;\n      }\n\n      ox-buttons-radio div[data-value='right'] {\n        background-position: 50% -97px;\n      }\n\n      ox-buttons-radio div[data-value='justify'] {\n        background-position: 50% -147px;\n      }\n\n      ox-buttons-radio div[data-value='top'] {\n        background-position: 50% -197px;\n      }\n\n      ox-buttons-radio div[data-value='middle'] {\n        background-position: 50% -193px;\n      }\n\n      ox-buttons-radio div[data-value='bottom'] {\n        background-position: 50% -188px;\n      }\n\n      ox-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n    `\n  ]\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\n    return html`\n      <fieldset>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.id\">ID</i18n-msg> </label>\n                <input value-key=\"id\" .value=${value.id || ''} />\n              `\n            : html``}\n          ${this._isClassIdentifiable(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.class\">Class</i18n-msg> </label>\n                <input value-key=\"class\" .value=${value.class || ''} />\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.text\">Text</i18n-msg> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <i18n-msg msgid=\"label.text-format\">Text Format</i18n-msg> </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                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n                  <label for=\"checkbox-hidden\"> <i18n-msg msgid=\"label.item-hidden\">Item Hidden</i18n-msg> </label>\n\n                  <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n                  <label for=\"checkbox-locked\"> <i18n-msg msgid=\"label.locked\">Locked</i18n-msg> </label>\n                </div>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      ${!this._isLine(this.selected)\n        ? html`\n            <fieldset class=\"icon-label unit ratio\">\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</title-with-help>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"width\"> <i18n-msg msgid=\"label.width\">width</i18n-msg> </label>\n                <input type=\"number\" value-key=\"bounds.width\" .value=${this.bounds?.width} />\n                <label class=\"height\"> <i18n-msg msgid=\"label.height\">height</i18n-msg> </label>\n                <input type=\"number\" value-key=\"bounds.height\" .value=${this.bounds?.height} />\n\n                ${this.selected.length && this.selected[0].isRootModel()\n                  ? html``\n                  : html`\n                      <label class=\"rotate\"> <i18n-msg msgid=\"label.rotate\">rotate</i18n-msg> </label>\n                      <ox-input-angle value-key=\"rotation\" .radian=${value.rotation}> </ox-input-angle>\n                    `}\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this._is3dish(this.selected)\n        ? html`\n            <fieldset class=\"icon-label unit ratio\" collapsable ?collapsed=${!this._3dExpanded}>\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</title-with-help>\n                <mwc-icon\n                  @click=${(e: Event) => {\n                    this._3dExpanded = !this._3dExpanded\n                  }}\n                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"zPos\"> <i18n-msg msgid=\"label.z-pos\">pos. Z</i18n-msg> </label>\n                <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n                <label class=\"depth\"> <i18n-msg msgid=\"label.depth\">depth</i18n-msg> </label>\n                <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n                <label class=\"rotationX\"> <i18n-msg msgid=\"label.rotation-x\">rot. X</i18n-msg> </label>\n                <ox-input-angle value-key=\"rotationX\" .radian=${value.rotationX}> </ox-input-angle>\n\n                <label class=\"rotationY\"> <i18n-msg msgid=\"label.rotation-y\">rot. Y</i18n-msg> </label>\n                <ox-input-angle value-key=\"rotationY\" .radian=${value.rotationY}> </ox-input-angle>\n\n                <label class=\"rotationZ\"> <i18n-msg msgid=\"label.rotation-z\">rot. Z</i18n-msg> </label>\n                <ox-input-angle value-key=\"rotation\" .radian=${value.rotation}> </ox-input-angle>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this._hasTextProperty(this.selected)\n        ? html`\n            <fieldset>\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n                  >text box</title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label> <i18n-msg msgid=\"label.horizontal\">horizontal</i18n-msg> </label>\n                <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n                  <div data-value=\"left\"></div>\n                  <div data-value=\"center\"></div>\n                  <div data-value=\"right\"></div>\n                  <div data-value=\"justify\"></div>\n                </ox-buttons-radio>\n\n                <label> <i18n-msg msgid=\"label.vertical\">vertical</i18n-msg> </label>\n                <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n                  <div data-value=\"top\"></div>\n                  <div data-value=\"middle\"></div>\n                  <div data-value=\"bottom\"></div>\n                </ox-buttons-radio>\n\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n                  <label for=\"checkbox-textwrap\"> <i18n-msg msgid=\"label.text-wrap\">Text Wrap</i18n-msg> </label>\n                </div>\n\n                <label> <i18n-msg msgid=\"label.padding\">padding</i18n-msg> </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} />\n                      <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft} />\n                      <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight} />\n                      <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom} />\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                <title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n                  >Viewer Option</title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label><i18n-msg msgid=\"label.fit\">Fit</i18n-msg></label>\n                <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n                  <option value=\"none\">none</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                <title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n                  >Print Option</title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"rotate\"><i18n-msg msgid=\"label.label-rotation\">Label Rotation</i18n-msg></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/modeller/property-sidebar/specifics/specific-properties-builder.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/modeller-ui/client/editors/things-editor-property';

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

@@ -0,0 +1,127 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/modeller-ui/client/editors/things-editor-property';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators';
+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,
+    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 = converted == NaN ? undefined : converted;
+            break;
+    }
+    return converted;
+}
+let SpecificPropertiesBuilder = class SpecificPropertiesBuilder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.props = [];
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChanged.bind(this));
+    }
+    updated(changes) {
+        changes.has('props') && this._onPropsChanged(this.props);
+        changes.has('value') && this._setValues();
+    }
+    _onPropsChanged(props) {
+        this.renderRoot.textContent = '';
+        (props || []).forEach(prop => {
+            let elementType = OxPropertyEditor.getEditor(prop.type);
+            if (!elementType) {
+                console.warn('Property Editor not defined', prop.type);
+                return;
+            }
+            let element = document.createElement(elementType);
+            element.label = prop.label;
+            element.type = prop.type;
+            element.placeholder = prop.placeholder;
+            element.setAttribute('name', prop.name);
+            if (prop.observe) {
+                element.observe = prop.observe;
+            }
+            element.property = prop.property;
+            element.setAttribute('property-editor', 'true');
+            this.renderRoot.appendChild(element);
+        });
+    }
+    _setValues() {
+        this.value &&
+            Array.from(this.renderRoot.querySelectorAll('[name]')).forEach((prop) => {
+                let name = prop.getAttribute('name');
+                var convertedValue = convertValue(prop.type, this.value[name]);
+                if (convertedValue == undefined)
+                    convertedValue = DEFAULT_VALUE[prop.type];
+                prop.value = convertedValue;
+                prop.observe && 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;
+        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);
+SpecificPropertiesBuilder = __decorate([
+    customElement('specific-properties-builder')
+], SpecificPropertiesBuilder);
+//# sourceMappingURL=specific-properties-builder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"specific-properties-builder.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/specifics/specific-properties-builder.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/modeller-ui/client/editors/things-editor-property'\n\nimport { LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { Properties } from '@hatiolab/things-scene'\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,\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 = converted == NaN ? undefined : converted\n      break\n  }\n\n  return converted\n}\n\n@customElement('specific-properties-builder')\nclass SpecificPropertiesBuilder extends LitElement {\n  @property({ type: Object }) value: any\n  @property({ type: Array }) props: any[] = []\n  @property({ type: Object }) propertyEditor: any\n\n  firstUpdated() {\n    this.renderRoot.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.renderRoot.textContent = ''\n    ;(props || []).forEach(prop => {\n      let elementType = OxPropertyEditor.getEditor(prop.type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', prop.type)\n        return\n      }\n      let element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = prop.label\n      element.type = prop.type\n      element.placeholder = prop.placeholder\n      element.setAttribute('name', prop.name)\n\n      if (prop.observe) {\n        element.observe = prop.observe\n      }\n      element.property = prop.property\n      element.setAttribute('property-editor', 'true')\n\n      this.renderRoot.appendChild(element)\n    })\n  }\n\n  _setValues() {\n    this.value &&\n      Array.from(this.renderRoot.querySelectorAll('[name]')).forEach((prop: Properties) => {\n        let name = prop.getAttribute('name')\n        var convertedValue = convertValue(prop.type, this.value[name])\n        if (convertedValue == undefined) convertedValue = (DEFAULT_VALUE as any)[prop.type]\n        prop.value = convertedValue\n        prop.observe && 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    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/modeller/property-sidebar/specifics/specifics.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/help';
+import './specific-properties-builder';