@operato/board 9.0.0-beta.5 → 9.0.0-beta.52

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

@@ -1,430 +0,0 @@
-/**
- * @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 { css, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
-import { AbstractProperty } from '../abstract-property.js';
-import { PropertySharedStyle } from '../property-shared-style.js';
-import { BoxPaddingEditorStyles } from './box-padding-editor-styles.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 `
-                <div class="checkbox-row">
-                  <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>
-                </div>
-              `
-            : 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}>
-                  <div data-value="left"></div>
-                  <div data-value="center"></div>
-                  <div data-value="right"></div>
-                  <div data-value="justify"></div>
-                </ox-buttons-radio>
-
-                <label> <ox-i18n msgid="label.vertical">vertical</ox-i18n> </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-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>
-                </div>
-
-                <div class="checkbox-row">
-                  <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>
-                </div>
-
-                ${!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 = [
-    PropertySharedStyle,
-    BoxPaddingEditorStyles,
-    css `
-      fieldset[collapsable] legend {
-        box-sizing: border-box;
-        width: 100%;
-      }
-
-      fieldset[collapsable] legend md-icon {
-        float: right;
-        font-size: medium;
-        margin: 0;
-        cursor: pointer;
-      }
-
-      fieldset[collapsable][collapsed] > :not(legend) {
-        display: none;
-      }
-    `,
-    css `
-      .icon-label label {
-        background: var(--url-icon-properties-label) 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: var(--url-icon-properties) 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);
-//# sourceMappingURL=shapes.js.map

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

@@ -1 +0,0 @@
-{"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/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'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles.js'\n\nexport class 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 md-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: var(--url-icon-properties-label) 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: var(--url-icon-properties) 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    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                <div class=\"checkbox-row\">\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                </div>\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                  <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> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </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\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                </div>\n\n                <div class=\"checkbox-row\">\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                </div>\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/modeller/property-sidebar/specifics/specific-properties-builder.d.ts

@@ -1,16 +0,0 @@
-/**
- * @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/modeller/property-sidebar/specifics/specific-properties-builder.js

@@ -1,138 +0,0 @@
-/**
- * @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/modeller/property-sidebar/specifics/specific-properties-builder.js.map

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