@operato/board 0.3.1 → 0.3.8

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

@@ -1 +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/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\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"]}
+{"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/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\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: 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\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.js

@@ -3,7 +3,7 @@
  */
 import { __decorate } from "tslib";
 import '@things-factory/modeller-ui/client/editors/things-editor-property';
-import { LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { OxPropertyEditor } from '@operato/property-editor';
 /**
@@ -54,15 +54,18 @@ let SpecificPropertiesBuilder = class SpecificPropertiesBuilder extends LitEleme
         super(...arguments);
         this.props = [];
     }
+    render() {
+        return html `<slot></slot>`;
+    }
     firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onValueChanged.bind(this));
+        this.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 = '';
+        this.textContent = '';
         (props || []).forEach(prop => {
             let elementType = OxPropertyEditor.getEditor(prop.type);
             if (!elementType) {
@@ -79,15 +82,15 @@ let SpecificPropertiesBuilder = class SpecificPropertiesBuilder extends LitEleme
             }
             element.property = prop.property;
             element.setAttribute('property-editor', 'true');
-            this.renderRoot.appendChild(element);
+            this.appendChild(element);
         });
     }
     _setValues() {
         this.value &&
-            Array.from(this.renderRoot.querySelectorAll('[name]')).forEach((prop) => {
+            Array.from(this.querySelectorAll('[name]')).forEach((prop) => {
                 let name = prop.getAttribute('name');
                 var convertedValue = convertValue(prop.type, this.value[name]);
-                if (convertedValue == undefined)
+                if (convertedValue === undefined)
                     convertedValue = DEFAULT_VALUE[prop.type];
                 prop.value = convertedValue;
                 prop.observe && prop.observe.call(prop, prop.value);

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

@@ -1 +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.js'\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"]}
+{"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 { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { OxPropertyEditor } 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,\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  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(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.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        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/styles/styles.js

@@ -262,7 +262,7 @@ PropertyStyles.styles = [
         display: inline-block;
         border-bottom: 2px solid #fff;
 
-        background: url(/assets/images/icon-properties.png) no-repeat;
+        background: var(--url-icon-properties) no-repeat;
         background-size: 70%;
       }
 
@@ -291,7 +291,7 @@ PropertyStyles.styles = [
         max-width: 100px;
       }
       .line-type paper-item {
-        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat;
+        background: var(--url-icon-properties-line-type) 50% 0 no-repeat;
         min-height: 25px;
         padding: 3px 9px;
         width: 80px;
@@ -323,7 +323,7 @@ PropertyStyles.styles = [
       }
 
       .line-type .paper-input-container input {
-        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat !important;
+        background: var(--url-icon-properties-line-type) 50% 0 no-repeat !important;
       }
       .line-type.solid .paper-input-container input {
         background-position: 50% 5px !important;
@@ -355,7 +355,7 @@ PropertyStyles.styles = [
         max-width: 140px;
       }
       .arrow-type paper-item {
-        background: url(/assets/images/icon-properties-arrow-type.png) 50% 0 no-repeat;
+        background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;
         min-height: 30px;
         padding: 3px 7px;
         width: 30px;
@@ -453,7 +453,7 @@ PropertyStyles.styles = [
       }
 
       .arrow-type .paper-input-container input {
-        background: url(/assets/images/icon-properties-arrow-type.png) 110% 0 no-repeat !important;
+        background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;
       }
       .arrow-type.begin-no .paper-input-container input {
         background-position: 110% 5px !important;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@things-factory/help'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color-style'\nimport '@things-factory/modeller-ui/client/editors/things-editor-font-selector'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-style')\nclass PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      paper-slider {\n        width: 100%;\n      }\n\n      .btn-group {\n        height: 24px;\n      }\n\n      .btn-group paper-button {\n        width: 30px;\n        height: 24px;\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        background: url(/assets/images/icon-properties.png) no-repeat;\n        background-size: 70%;\n      }\n\n      .btn-group paper-button.tbold {\n        background-position: 50% -170px;\n      }\n\n      .btn-group paper-button.titalic {\n        background-position: 50% -205px;\n      }\n\n      .btn-group paper-button.tunderline {\n        background-position: 50% -240px;\n      }\n\n      .btn-group paper-button.tstrikethrough {\n        background-position: 50% -415px;\n      }\n\n      .btn-group paper-button[active] {\n        border-color: #f2471c;\n      }\n\n      .line-type paper-listbox {\n        overflow: hidden;\n        max-width: 100px;\n      }\n      .line-type paper-item {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat;\n        min-height: 25px;\n        padding: 3px 9px;\n        width: 80px;\n      }\n\n      .line-type paper-item.solid {\n        background-position: 50% 10px;\n      }\n      .line-type paper-item.round-dot {\n        background-position: 50% -40px;\n      }\n      .line-type paper-item.square-dot {\n        background-position: 50% -90px;\n      }\n      .line-type paper-item.dash {\n        background-position: 50% -140px;\n      }\n      .line-type paper-item.dash-dot {\n        background-position: 50% -190px;\n      }\n      .line-type paper-item.long-dash {\n        background-position: 50% -240px;\n      }\n      .line-type paper-item.long-dash-dot {\n        background-position: 50% -290px;\n      }\n      .line-type paper-item.long-dash-dot-dot {\n        background-position: 50% -340px;\n      }\n\n      .line-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat !important;\n      }\n      .line-type.solid .paper-input-container input {\n        background-position: 50% 5px !important;\n      }\n      .line-type.round-dot .paper-input-container input {\n        background-position: 50% -45px !important;\n      }\n      .line-type.square-dot .paper-input-container input {\n        background-position: 50% -85px !important;\n      }\n      .line-type.dash .paper-input-container input {\n        background-position: 50% -145px !important;\n      }\n      .line-type.dash-dot .paper-input-container input {\n        background-position: 50% -185px !important;\n      }\n      .line-type.long-dash .paper-input-container input {\n        background-position: 50% -245px !important;\n      }\n      .line-type.long-dash-dot .paper-input-container input {\n        background-position: 50% -285px !important;\n      }\n      .line-type.long-dash-dot-dot .paper-input-container input {\n        background-position: 50% -345px !important;\n      }\n\n      .arrow-type paper-menu {\n        overflow: hidden;\n        max-width: 140px;\n      }\n      .arrow-type paper-item {\n        background: url(/assets/images/icon-properties-arrow-type.png) 50% 0 no-repeat;\n        min-height: 30px;\n        padding: 3px 7px;\n        width: 30px;\n        float: left;\n      }\n      .arrow-type paper-item.begin-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.begin-arrow {\n        background-position: 50% -39px;\n      }\n      .arrow-type paper-item.begin-open-arrow {\n        background-position: 50% -89px;\n      }\n      .arrow-type paper-item.begin-stealth-arrow {\n        background-position: 50% -139px;\n      }\n      .arrow-type paper-item.begin-diamond-arrow {\n        background-position: 50% -190px;\n      }\n      .arrow-type paper-item.begin-oval-arrow {\n        background-position: 50% -238px;\n      }\n      .arrow-type paper-item.begin-size1 {\n        background-position: 50% -286px;\n      }\n      .arrow-type paper-item.begin-size2 {\n        background-position: 50% -336px;\n      }\n      .arrow-type paper-item.begin-size3 {\n        background-position: 50% -386px;\n      }\n      .arrow-type paper-item.begin-size4 {\n        background-position: 50% -436px;\n      }\n      .arrow-type paper-item.begin-size5 {\n        background-position: 50% -486px;\n      }\n      .arrow-type paper-item.begin-size6 {\n        background-position: 50% -536px;\n      }\n      .arrow-type paper-item.begin-size7 {\n        background-position: 50% -589px;\n      }\n      .arrow-type paper-item.begin-size8 {\n        background-position: 50% -639px;\n      }\n      .arrow-type paper-item.begin-size9 {\n        background-position: 50% -689px;\n      }\n      .arrow-type paper-item.end-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.end-arrow {\n        background-position: 50% -739px;\n      }\n      .arrow-type paper-item.end-open-arrow {\n        background-position: 50% -789px;\n      }\n      .arrow-type paper-item.end-stealth-arrow {\n        background-position: 50% -839px;\n      }\n      .arrow-type paper-item.end-diamond-arrow {\n        background-position: 50% -890px;\n      }\n      .arrow-type paper-item.end-oval-arrow {\n        background-position: 50% -938px;\n      }\n      .arrow-type paper-item.end-size1 {\n        background-position: 50% -986px;\n      }\n      .arrow-type paper-item.end-size2 {\n        background-position: 50% -1036px;\n      }\n      .arrow-type paper-item.end-size3 {\n        background-position: 50% -1086px;\n      }\n      .arrow-type paper-item.end-size4 {\n        background-position: 50% -1136px;\n      }\n      .arrow-type paper-item.end-size5 {\n        background-position: 50% -1186px;\n      }\n      .arrow-type paper-item.end-size6 {\n        background-position: 50% -1236px;\n      }\n      .arrow-type paper-item.end-size7 {\n        background-position: 50% -1289px;\n      }\n      .arrow-type paper-item.end-size8 {\n        background-position: 50% -1339px;\n      }\n      .arrow-type paper-item.end-size9 {\n        background-position: 50% -1389px;\n      }\n\n      .arrow-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-arrow-type.png) 110% 0 no-repeat !important;\n      }\n      .arrow-type.begin-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.begin-arrow .paper-input-container input {\n        background-position: 110% -50px !important;\n      }\n      .arrow-type.begin-open-arrow .paper-input-container input {\n        background-position: 110% -100px !important;\n      }\n      .arrow-type.begin-stealth-arrow .paper-input-container input {\n        background-position: 110% -150px !important;\n      }\n      .arrow-type.begin-diamond-arrow .paper-input-container input {\n        background-position: 110% -200px !important;\n      }\n      .arrow-type.begin-oval-arrow .paper-input-container input {\n        background-position: 110% -250px !important;\n      }\n      .arrow-type.begin-size1 .paper-input-container input {\n        background-position: 110% -298px !important;\n      }\n      .arrow-type.begin-size2 .paper-input-container input {\n        background-position: 110% -348px !important;\n      }\n      .arrow-type.begin-size3 .paper-input-container input {\n        background-position: 110% -398px !important;\n      }\n      .arrow-type.begin-size4 .paper-input-container input {\n        background-position: 110% -448px !important;\n      }\n      .arrow-type.begin-size5 .paper-input-container input {\n        background-position: 110% -498px !important;\n      }\n      .arrow-type.begin-size6 .paper-input-container input {\n        background-position: 110% -548px !important;\n      }\n      .arrow-type.begin-size7 .paper-input-container input {\n        background-position: 110% -600px !important;\n      }\n      .arrow-type.begin-size8 .paper-input-container input {\n        background-position: 110% -650px !important;\n      }\n      .arrow-type.begin-size9 .paper-input-container input {\n        background-position: 110% -700px !important;\n      }\n      .arrow-type.end-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.end-arrow .paper-input-container input {\n        background-position: 110% -750px !important;\n      }\n      .arrow-type.end-open-arrow .paper-input-container input {\n        background-position: 110% -800px !important;\n      }\n      .arrow-type.end-stealth-arrow .paper-input-container input {\n        background-position: 110% -850px !important;\n      }\n      .arrow-type.end-diamond-arrow .paper-input-container input {\n        background-position: 110% -900px !important;\n      }\n      .arrow-type.end-oval-arrow .paper-input-container input {\n        background-position: 110% -950px !important;\n      }\n      .arrow-type.end-size1 .paper-input-container input {\n        background-position: 110% -998px !important;\n      }\n      .arrow-type.end-size2 .paper-input-container input {\n        background-position: 110% -1048px !important;\n      }\n      .arrow-type.end-size3 .paper-input-container input {\n        background-position: 110% -1098px !important;\n      }\n      .arrow-type.end-size4 .paper-input-container input {\n        background-position: 110% -1148px !important;\n      }\n      .arrow-type.end-size5 .paper-input-container input {\n        background-position: 110% -1198px !important;\n      }\n      .arrow-type.end-size6 .paper-input-container input {\n        background-position: 110% -1248px !important;\n      }\n      .arrow-type.end-size7 .paper-input-container input {\n        background-position: 110% -1300px !important;\n      }\n      .arrow-type.end-size8 .paper-input-container input {\n        background-position: 110% -1350px !important;\n      }\n      .arrow-type.end-size9 .paper-input-container input {\n        background-position: 110% -1400px !important;\n      }\n    `\n  ]\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var {\n      alpha,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      fontColor,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash,\n      lineCap,\n      lineJoin,\n      begin,\n      beginSize,\n      end,\n      endSize\n    } = this.value\n\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</title-with-help>\n        </legend>\n        <paper-slider min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha || 1} editable> </paper-slider>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n            >text style</title-with-help\n          >\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.font-family\">Font Family</i18n-msg>\n          </label>\n\n          <things-editor-font-selector\n            value-key=\"fontFamily\"\n            .value=${fontFamily}\n            class=\"property-full-input\"\n            custom-editor\n          ></things-editor-font-selector>\n\n          <label class=\"property-half-label icon-only-label font-size\"></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label lineHeight\"></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-half-label\"></label>\n          <div class=\"property-half-input btn-group\">\n            <paper-button toggles value-key=\"bold\" ?active=${bold} class=\"tbold\"> </paper-button>\n            <paper-button toggles value-key=\"italic\" ?active=${italic} class=\"titalic\"> </paper-button>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n            >fill style</title-with-help\n          >\n        </legend>\n\n        <things-editor-color-style value-key=\"fillStyle\" .value=${fillStyle}> </things-editor-color-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label linewidth\"></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.line-type\">line type</i18n-msg>\n          </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              value-key=\"lineDash\"\n              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n              slot=\"dropdown-content\"\n              .selected=${lineDash}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.cap-type\">cap type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><i18n-msg msgid=\"label.square\">square</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n          </select>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.join-type\">join type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><i18n-msg msgid=\"label.miter\">miter</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n            <option value=\"bevel\"><i18n-msg msgid=\"label.bevel\">bevel</i18n-msg></option>\n          </select>\n\n          ${this._isLine(this.selected)\n            ? html`\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-type\">begin type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-no\">\n                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"begin\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${begin}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"begin-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"begin-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"begin-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"begin-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"begin-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-size\">begin size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-size1\">\n                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"beginSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${beginSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"begin-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"begin-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"begin-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"begin-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"begin-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"begin-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"begin-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"begin-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-type\">end type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-no\">\n                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"end\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${end}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"end-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"end-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"end-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"end-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"end-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-size\">end size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-size1\">\n                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"endSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${endSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"end-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"end-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"end-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"end-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"end-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"end-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"end-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"end-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n\n  _isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kDAAkD,CAAA;AACzD,OAAO,sBAAsB,CAAA;AAC7B,OAAO,gEAAgE,CAAA;AACvE,OAAO,sEAAsE,CAAA;AAC7E,OAAO,wEAAwE,CAAA;AAE/E,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAG9D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,gBAAgB;IAA7C;;QAmT8B,UAAK,GAAQ,EAAE,CAAA;QAChB,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;IAyP9C,CAAC;IAvPC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,IAAI,EACF,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,EACH,OAAO,EACR,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,OAAO,IAAI,CAAA;;;;;4EAK6D,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;qBAiBjE,UAAU;;;;;;6DAM8B,QAAQ;;;+DAGN,UAAU;;;8DAGX,SAAS;;;;;6DAKV,IAAI;+DACF,MAAM;;;;;;;;;;;;kEAYH,SAAS;;;;;;;;;;8DAUb,SAAS;;;gEAGP,WAAW;;;;;;;;;;kCAUzC,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;0BAElD,QAAQ;;;;;;;;;;;;;;;;;0FAiBwD,OAAO;;;;;;;;2FAQN,QAAQ;;;;;;YAMvF,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;;;;;wCAQsB,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;gCAElD,KAAK;;;;;;;;;;;;;;;;;;;wCAmBG,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;gCAElD,SAAS;;;;;;;;;;;;;;;;;;;;;;wCAsBD,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;gCAElD,GAAG;;;;;;;;;;;;;;;;;;;wCAmBK,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;gCAElD,OAAO;;;;;;;;;;;;;;eAcxB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;KAGf,CAAA;IACH,CAAC;IAED,OAAO,CAAC,QAAqB;QAC3B,IAAI,MAAM,GAAG,KAAK,CAAA;QAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;YAEtB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;gBAClC,MAAM,GAAG,KAAK,CAAA;gBACd,OAAO,MAAM,CAAA;aACd;YAED,MAAM,GAAG,IAAI,CAAA;SACd;QAED,OAAO,MAAM,CAAA;IACf,CAAC;CACF,CAAA;AA7iBQ,qBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8SF;CACF,CAAA;AAC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAkB;AArTxC,cAAc;IADnB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,cAAc,CA8iBnB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@things-factory/help'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color-style'\nimport '@things-factory/modeller-ui/client/editors/things-editor-font-selector'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-style')\nclass PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      paper-slider {\n        width: 100%;\n      }\n\n      .btn-group {\n        height: 24px;\n      }\n\n      .btn-group paper-button {\n        width: 30px;\n        height: 24px;\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        background: var(--url-icon-properties) no-repeat;\n        background-size: 70%;\n      }\n\n      .btn-group paper-button.tbold {\n        background-position: 50% -170px;\n      }\n\n      .btn-group paper-button.titalic {\n        background-position: 50% -205px;\n      }\n\n      .btn-group paper-button.tunderline {\n        background-position: 50% -240px;\n      }\n\n      .btn-group paper-button.tstrikethrough {\n        background-position: 50% -415px;\n      }\n\n      .btn-group paper-button[active] {\n        border-color: #f2471c;\n      }\n\n      .line-type paper-listbox {\n        overflow: hidden;\n        max-width: 100px;\n      }\n      .line-type paper-item {\n        background: var(--url-icon-properties-line-type) 50% 0 no-repeat;\n        min-height: 25px;\n        padding: 3px 9px;\n        width: 80px;\n      }\n\n      .line-type paper-item.solid {\n        background-position: 50% 10px;\n      }\n      .line-type paper-item.round-dot {\n        background-position: 50% -40px;\n      }\n      .line-type paper-item.square-dot {\n        background-position: 50% -90px;\n      }\n      .line-type paper-item.dash {\n        background-position: 50% -140px;\n      }\n      .line-type paper-item.dash-dot {\n        background-position: 50% -190px;\n      }\n      .line-type paper-item.long-dash {\n        background-position: 50% -240px;\n      }\n      .line-type paper-item.long-dash-dot {\n        background-position: 50% -290px;\n      }\n      .line-type paper-item.long-dash-dot-dot {\n        background-position: 50% -340px;\n      }\n\n      .line-type .paper-input-container input {\n        background: var(--url-icon-properties-line-type) 50% 0 no-repeat !important;\n      }\n      .line-type.solid .paper-input-container input {\n        background-position: 50% 5px !important;\n      }\n      .line-type.round-dot .paper-input-container input {\n        background-position: 50% -45px !important;\n      }\n      .line-type.square-dot .paper-input-container input {\n        background-position: 50% -85px !important;\n      }\n      .line-type.dash .paper-input-container input {\n        background-position: 50% -145px !important;\n      }\n      .line-type.dash-dot .paper-input-container input {\n        background-position: 50% -185px !important;\n      }\n      .line-type.long-dash .paper-input-container input {\n        background-position: 50% -245px !important;\n      }\n      .line-type.long-dash-dot .paper-input-container input {\n        background-position: 50% -285px !important;\n      }\n      .line-type.long-dash-dot-dot .paper-input-container input {\n        background-position: 50% -345px !important;\n      }\n\n      .arrow-type paper-menu {\n        overflow: hidden;\n        max-width: 140px;\n      }\n      .arrow-type paper-item {\n        background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;\n        min-height: 30px;\n        padding: 3px 7px;\n        width: 30px;\n        float: left;\n      }\n      .arrow-type paper-item.begin-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.begin-arrow {\n        background-position: 50% -39px;\n      }\n      .arrow-type paper-item.begin-open-arrow {\n        background-position: 50% -89px;\n      }\n      .arrow-type paper-item.begin-stealth-arrow {\n        background-position: 50% -139px;\n      }\n      .arrow-type paper-item.begin-diamond-arrow {\n        background-position: 50% -190px;\n      }\n      .arrow-type paper-item.begin-oval-arrow {\n        background-position: 50% -238px;\n      }\n      .arrow-type paper-item.begin-size1 {\n        background-position: 50% -286px;\n      }\n      .arrow-type paper-item.begin-size2 {\n        background-position: 50% -336px;\n      }\n      .arrow-type paper-item.begin-size3 {\n        background-position: 50% -386px;\n      }\n      .arrow-type paper-item.begin-size4 {\n        background-position: 50% -436px;\n      }\n      .arrow-type paper-item.begin-size5 {\n        background-position: 50% -486px;\n      }\n      .arrow-type paper-item.begin-size6 {\n        background-position: 50% -536px;\n      }\n      .arrow-type paper-item.begin-size7 {\n        background-position: 50% -589px;\n      }\n      .arrow-type paper-item.begin-size8 {\n        background-position: 50% -639px;\n      }\n      .arrow-type paper-item.begin-size9 {\n        background-position: 50% -689px;\n      }\n      .arrow-type paper-item.end-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.end-arrow {\n        background-position: 50% -739px;\n      }\n      .arrow-type paper-item.end-open-arrow {\n        background-position: 50% -789px;\n      }\n      .arrow-type paper-item.end-stealth-arrow {\n        background-position: 50% -839px;\n      }\n      .arrow-type paper-item.end-diamond-arrow {\n        background-position: 50% -890px;\n      }\n      .arrow-type paper-item.end-oval-arrow {\n        background-position: 50% -938px;\n      }\n      .arrow-type paper-item.end-size1 {\n        background-position: 50% -986px;\n      }\n      .arrow-type paper-item.end-size2 {\n        background-position: 50% -1036px;\n      }\n      .arrow-type paper-item.end-size3 {\n        background-position: 50% -1086px;\n      }\n      .arrow-type paper-item.end-size4 {\n        background-position: 50% -1136px;\n      }\n      .arrow-type paper-item.end-size5 {\n        background-position: 50% -1186px;\n      }\n      .arrow-type paper-item.end-size6 {\n        background-position: 50% -1236px;\n      }\n      .arrow-type paper-item.end-size7 {\n        background-position: 50% -1289px;\n      }\n      .arrow-type paper-item.end-size8 {\n        background-position: 50% -1339px;\n      }\n      .arrow-type paper-item.end-size9 {\n        background-position: 50% -1389px;\n      }\n\n      .arrow-type .paper-input-container input {\n        background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;\n      }\n      .arrow-type.begin-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.begin-arrow .paper-input-container input {\n        background-position: 110% -50px !important;\n      }\n      .arrow-type.begin-open-arrow .paper-input-container input {\n        background-position: 110% -100px !important;\n      }\n      .arrow-type.begin-stealth-arrow .paper-input-container input {\n        background-position: 110% -150px !important;\n      }\n      .arrow-type.begin-diamond-arrow .paper-input-container input {\n        background-position: 110% -200px !important;\n      }\n      .arrow-type.begin-oval-arrow .paper-input-container input {\n        background-position: 110% -250px !important;\n      }\n      .arrow-type.begin-size1 .paper-input-container input {\n        background-position: 110% -298px !important;\n      }\n      .arrow-type.begin-size2 .paper-input-container input {\n        background-position: 110% -348px !important;\n      }\n      .arrow-type.begin-size3 .paper-input-container input {\n        background-position: 110% -398px !important;\n      }\n      .arrow-type.begin-size4 .paper-input-container input {\n        background-position: 110% -448px !important;\n      }\n      .arrow-type.begin-size5 .paper-input-container input {\n        background-position: 110% -498px !important;\n      }\n      .arrow-type.begin-size6 .paper-input-container input {\n        background-position: 110% -548px !important;\n      }\n      .arrow-type.begin-size7 .paper-input-container input {\n        background-position: 110% -600px !important;\n      }\n      .arrow-type.begin-size8 .paper-input-container input {\n        background-position: 110% -650px !important;\n      }\n      .arrow-type.begin-size9 .paper-input-container input {\n        background-position: 110% -700px !important;\n      }\n      .arrow-type.end-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.end-arrow .paper-input-container input {\n        background-position: 110% -750px !important;\n      }\n      .arrow-type.end-open-arrow .paper-input-container input {\n        background-position: 110% -800px !important;\n      }\n      .arrow-type.end-stealth-arrow .paper-input-container input {\n        background-position: 110% -850px !important;\n      }\n      .arrow-type.end-diamond-arrow .paper-input-container input {\n        background-position: 110% -900px !important;\n      }\n      .arrow-type.end-oval-arrow .paper-input-container input {\n        background-position: 110% -950px !important;\n      }\n      .arrow-type.end-size1 .paper-input-container input {\n        background-position: 110% -998px !important;\n      }\n      .arrow-type.end-size2 .paper-input-container input {\n        background-position: 110% -1048px !important;\n      }\n      .arrow-type.end-size3 .paper-input-container input {\n        background-position: 110% -1098px !important;\n      }\n      .arrow-type.end-size4 .paper-input-container input {\n        background-position: 110% -1148px !important;\n      }\n      .arrow-type.end-size5 .paper-input-container input {\n        background-position: 110% -1198px !important;\n      }\n      .arrow-type.end-size6 .paper-input-container input {\n        background-position: 110% -1248px !important;\n      }\n      .arrow-type.end-size7 .paper-input-container input {\n        background-position: 110% -1300px !important;\n      }\n      .arrow-type.end-size8 .paper-input-container input {\n        background-position: 110% -1350px !important;\n      }\n      .arrow-type.end-size9 .paper-input-container input {\n        background-position: 110% -1400px !important;\n      }\n    `\n  ]\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var {\n      alpha,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      fontColor,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash,\n      lineCap,\n      lineJoin,\n      begin,\n      beginSize,\n      end,\n      endSize\n    } = this.value\n\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</title-with-help>\n        </legend>\n        <paper-slider min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha || 1} editable> </paper-slider>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n            >text style</title-with-help\n          >\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.font-family\">Font Family</i18n-msg>\n          </label>\n\n          <things-editor-font-selector\n            value-key=\"fontFamily\"\n            .value=${fontFamily}\n            class=\"property-full-input\"\n            custom-editor\n          ></things-editor-font-selector>\n\n          <label class=\"property-half-label icon-only-label font-size\"></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label lineHeight\"></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-half-label\"></label>\n          <div class=\"property-half-input btn-group\">\n            <paper-button toggles value-key=\"bold\" ?active=${bold} class=\"tbold\"> </paper-button>\n            <paper-button toggles value-key=\"italic\" ?active=${italic} class=\"titalic\"> </paper-button>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n            >fill style</title-with-help\n          >\n        </legend>\n\n        <things-editor-color-style value-key=\"fillStyle\" .value=${fillStyle}> </things-editor-color-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label linewidth\"></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.line-type\">line type</i18n-msg>\n          </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              value-key=\"lineDash\"\n              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n              slot=\"dropdown-content\"\n              .selected=${lineDash}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.cap-type\">cap type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><i18n-msg msgid=\"label.square\">square</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n          </select>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.join-type\">join type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><i18n-msg msgid=\"label.miter\">miter</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n            <option value=\"bevel\"><i18n-msg msgid=\"label.bevel\">bevel</i18n-msg></option>\n          </select>\n\n          ${this._isLine(this.selected)\n            ? html`\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-type\">begin type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-no\">\n                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"begin\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${begin}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"begin-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"begin-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"begin-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"begin-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"begin-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-size\">begin size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-size1\">\n                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"beginSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${beginSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"begin-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"begin-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"begin-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"begin-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"begin-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"begin-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"begin-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"begin-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-type\">end type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-no\">\n                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"end\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${end}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"end-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"end-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"end-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"end-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"end-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-size\">end size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-size1\">\n                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"endSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${endSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"end-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"end-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"end-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"end-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"end-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"end-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"end-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"end-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n\n  _isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}

package/dist/src/ox-board-modeller.js

@@ -13,6 +13,16 @@ import { SCENE_MODE } from '@hatiolab/things-scene';
 import { OxPopup } from '@operato/popup';
 import { togglefullscreen } from './utils/fullscreen';
 const isMacOS = navigator.userAgent.indexOf('Mac') != -1;
+const ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href;
+const ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href;
+const ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href;
+const ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href;
+const ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href;
+const ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href;
+const ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href;
+const ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href;
+const ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href;
+const ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href;
 var Registry = [];
 let BoardModeller = class BoardModeller extends LitElement {
     constructor() {
@@ -44,6 +54,16 @@ let BoardModeller = class BoardModeller extends LitElement {
             ids = ids.filter(id => !!id).sort();
             callback(ids);
         });
+        this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`);
+        this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`);
+        this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`);
+        this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`);
+        this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`);
+        this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`);
+        this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`);
+        this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`);
+        this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`);
+        this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`);
     }
     static registerGroup(group) {
         var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name);

package/dist/src/ox-board-modeller.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-modeller.js","sourceRoot":"","sources":["../../src/ox-board-modeller.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport './modeller/scene-viewer/ox-scene-viewer'\nimport './modeller/component-toolbar/component-toolbar'\nimport './modeller/property-sidebar/property-sidebar'\nimport './modeller/edit-toolbar'\nimport '@hatiolab/things-scene'\nimport './ox-board-viewer'\n\nimport { saveAs } from 'file-saver'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\nimport { OxPopup } from '@operato/popup'\n\nimport { EditToolbar } from './modeller/edit-toolbar'\nimport { ComponentGroup, ComponentTemplate } from './types'\nimport { togglefullscreen } from './utils/fullscreen'\n\nconst isMacOS = navigator.userAgent.indexOf('Mac') != -1\n\nvar Registry: ComponentGroup[] = []\n\n@customElement('ox-board-modeller')\nexport class BoardModeller extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n\n        grid-template-rows: auto 1fr;\n        grid-template-columns: auto 1fr auto;\n        grid-template-areas: 'toolbar toolbar toolbar' 'palletbar scene propertybar';\n        grid-gap: 0;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      #toolbar {\n        grid-area: toolbar;\n      }\n\n      edit-toolbar {\n        grid-area: toolbar;\n      }\n\n      component-toolbar {\n        grid-area: palletbar;\n      }\n\n      property-sidebar {\n        grid-area: propertybar;\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        grid-area: scene;\n        position: relative;\n\n        display: flex;\n        flex-direction: row;\n      }\n\n      ox-scene-viewer {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n      }\n\n      mwc-fab {\n        position: absolute;\n        right: 15px;\n        bottom: 15px;\n      }\n\n      ox-popup {\n        width: 90%;\n        height: 90%;\n        left: 50%;\n        top: 50%;\n        transform: translateX(-50%) translateY(-50%);\n        background: var(--secondary-color, black);\n\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      ox-board-viewer {\n        width: 98%;\n        height: 98%;\n        margin: auto;\n        padding: 0;\n      }\n    `\n  ]\n\n  static registerGroup(group: ComponentGroup) {\n    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)\n\n    if (found) {\n      found = {\n        ...found,\n        ...group\n      }\n    } else {\n      Registry.push(group)\n    }\n  }\n\n  static registerTemplate(templates: ComponentTemplate[]): void {\n    templates &&\n      templates.forEach(template => {\n        var group = Registry.find(group => group.name == template.group)\n\n        if (!group) {\n          console.warn('Invalid group', group, template)\n          return\n        }\n\n        if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n          group.templates.push(template)\n        }\n      })\n  }\n\n  static get groups(): ComponentGroup[] {\n    return Registry\n  }\n\n  static getGroup(name: string) {\n    return Registry.find(group => group.name === name)\n  }\n\n  @property({ type: String }) boardName: string = ''\n  @property({ type: Object }) model: any = null\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Array }) selected: any[] = []\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT\n  @property({ type: Object }) provider: any = null\n  @property({ type: Boolean }) hideProperty: boolean = false\n  @property({ type: String }) overlay: string = ''\n  @property({ type: Object }) scene?: Scene\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  @query('edit-toolbar') private editToolbar!: EditToolbar\n\n  private group: string = ''\n  private shortcutHandler?: (e: KeyboardEvent) => void\n\n  constructor() {\n    super()\n\n    document.addEventListener('get-all-scene-component-ids', (e: Event) => {\n      var { component, callback } = (e as CustomEvent).detail\n\n      if (!this.scene) return\n\n      var ids\n      if (component) {\n        ids = this.scene.findAll(component).map(c => c.model.id)\n      } else {\n        // @ts-ignore\n        ids = this.scene.ids.map(({ key }) => key)\n      }\n\n      ids = ids.filter(id => !!id).sort()\n      callback(ids)\n    })\n  }\n\n  render() {\n    return html`\n      <edit-toolbar\n        id=\"edittoolbar\"\n        .scene=${this.scene}\n        .selected=${this.selected}\n        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}\n        @open-preview=${() => this.preview()}\n        @download-model=${() => this.downloadModel()}\n        @modeller-fullscreen=${() => togglefullscreen(this)}\n      >\n        ${this.renderBrandingZone()}\n      </edit-toolbar>\n\n      <component-toolbar\n        .scene=${this.scene}\n        .mode=${this.mode}\n        @mode-changed=${(e: CustomEvent) => {\n          this.mode = e.detail.value\n        }}\n        .componentGroupList=${this.componentGroupList}\n        .group=${this.group}\n      >\n      </component-toolbar>\n\n      <div id=\"scene-wrap\">\n        <ox-scene-viewer\n          id=\"scene\"\n          .scene=${this.scene}\n          @scene-changed=${(e: CustomEvent) => {\n            this.scene = e.detail.value\n          }}\n          .model=${this.model}\n          .selected=${this.selected}\n          @selected-changed=${(e: CustomEvent) => {\n            this.selected = e.detail.value\n          }}\n          .mode=${this.mode}\n          @mode-changed=${(e: CustomEvent) => {\n            this.mode = e.detail.value\n          }}\n          fit=\"ratio\"\n          .baseUrl=${this.baseUrl}\n          @contextmenu=${() => this.onContextMenu()}\n          .provider=${this.provider}\n          name=\"modeller\"\n        >\n          <ox-scene-layer type=\"selection-layer\"></ox-scene-layer>\n          <ox-scene-layer type=\"modeling-layer\"></ox-scene-layer>\n          <ox-scene-layer type=\"guide-layer\">\n            <ox-scene-property name=\"ruler\" value=\"disabled\"></ox-scene-property>\n          </ox-scene-layer>\n          <ox-scene-layer type=\"shift-layer\">\n            <ox-scene-property name=\"text\" value=\"${this.overlay}\"></ox-scene-property>\n            <ox-scene-property name=\"alpha\" value=\"0.3\"></ox-scene-property>\n            <ox-scene-property name=\"fontFamily\" value=\"arial\"></ox-scene-property>\n            <ox-scene-property name=\"fontSize\" value=\"30\" type=\"number\"></ox-scene-property>\n            <ox-scene-property name=\"fontColor\" value=\"navy\"></ox-scene-property>\n            <ox-scene-property name=\"textBaseline\" value=\"top\"></ox-scene-property>\n            <ox-scene-property name=\"textAlign\" value=\"left\"></ox-scene-property>\n            <ox-scene-property name=\"paddingTop\" value=\"50\" type=\"number\"></ox-scene-property>\n            <ox-scene-property name=\"paddingLeft\" value=\"50\" type=\"number\"></ox-scene-property>\n          </ox-scene-layer>\n          <ox-scene-layer type=\"tag-layer\"></ox-scene-layer>\n          <ox-scene-handler type=\"text-editor\"></ox-scene-handler>\n          <ox-scene-handler type=\"move-handler\"></ox-scene-handler>\n        </ox-scene-viewer>\n\n        <mwc-fab icon=\"save\" @click=${() => this.onTapSave()} title=\"save\"> </mwc-fab>\n      </div>\n\n      <property-sidebar\n        .scene=${this.scene}\n        .selected=${this.selected}\n        .collapsed=${this.hideProperty}\n        .fonts=${this.fonts}\n        .propertyEditor=${this.propertyEditor}\n      >\n      </property-sidebar>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.bindShortcutEvent()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.unbindShortcutEvent()\n  }\n\n  close() {\n    this.model = null\n    this.requestUpdate()\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    if (isMacOS) var ctrlKey = e.metaKey\n    else var ctrlKey = e.ctrlKey\n\n    switch (e.code) {\n      case 'KeyS':\n        if (ctrlKey) {\n          this.onTapSave()\n          e.preventDefault()\n        }\n        break\n    }\n  }\n\n  preview() {\n    const board = {\n      id: 'preview',\n      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null\n    }\n\n    OxPopup.open({\n      template: html` <ox-board-viewer .provider=${this.provider} .board=${board}></ox-board-viewer> `,\n      parent: this.renderRoot as Element\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  downloadModel() {\n    if (!this.scene) return\n\n    var model = JSON.stringify(this.model, null, 2)\n    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'\n    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)\n  }\n\n  renderBrandingZone() {\n    return html``\n  }\n\n  onTapSave() {\n    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))\n  }\n\n  bindShortcutEvent() {\n    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.\n    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']\n\n    this.shortcutHandler = (e: KeyboardEvent) => {\n      const target = e.composedPath()[0] as HTMLElement\n      var tagName = target.tagName\n      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'\n      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)\n\n      if (!isGlobalHotkey && isInput) return\n      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)\n    }\n\n    document.addEventListener('keydown', this.shortcutHandler)\n  }\n\n  unbindShortcutEvent() {\n    if (this.shortcutHandler) {\n      document.removeEventListener('keydown', this.shortcutHandler)\n      delete this.shortcutHandler\n    }\n  }\n\n  onContextMenu() {}\n}\n"]}
+{"version":3,"file":"ox-board-modeller.js","sourceRoot":"","sources":["../../src/ox-board-modeller.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport './modeller/scene-viewer/ox-scene-viewer'\nimport './modeller/component-toolbar/component-toolbar'\nimport './modeller/property-sidebar/property-sidebar'\nimport './modeller/edit-toolbar'\nimport '@hatiolab/things-scene'\nimport './ox-board-viewer'\n\nimport { saveAs } from 'file-saver'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\nimport { OxPopup } from '@operato/popup'\n\nimport { EditToolbar } from './modeller/edit-toolbar'\nimport { ComponentGroup, ComponentTemplate } from './types'\nimport { togglefullscreen } from './utils/fullscreen'\n\nconst isMacOS = navigator.userAgent.indexOf('Mac') != -1\n\nconst ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href\nconst ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href\nconst ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href\nconst ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href\nconst ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href\n\nconst ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href\nconst ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href\nconst ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href\nconst ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href\n\nconst ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href\n\nvar Registry: ComponentGroup[] = []\n\n@customElement('ox-board-modeller')\nexport class BoardModeller extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n\n        grid-template-rows: auto 1fr;\n        grid-template-columns: auto 1fr auto;\n        grid-template-areas: 'toolbar toolbar toolbar' 'palletbar scene propertybar';\n        grid-gap: 0;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      #toolbar {\n        grid-area: toolbar;\n      }\n\n      edit-toolbar {\n        grid-area: toolbar;\n      }\n\n      component-toolbar {\n        grid-area: palletbar;\n      }\n\n      property-sidebar {\n        grid-area: propertybar;\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        grid-area: scene;\n        position: relative;\n\n        display: flex;\n        flex-direction: row;\n      }\n\n      ox-scene-viewer {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n      }\n\n      mwc-fab {\n        position: absolute;\n        right: 15px;\n        bottom: 15px;\n      }\n\n      ox-popup {\n        width: 90%;\n        height: 90%;\n        left: 50%;\n        top: 50%;\n        transform: translateX(-50%) translateY(-50%);\n        background: var(--secondary-color, black);\n\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      ox-board-viewer {\n        width: 98%;\n        height: 98%;\n        margin: auto;\n        padding: 0;\n      }\n    `\n  ]\n\n  static registerGroup(group: ComponentGroup) {\n    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)\n\n    if (found) {\n      found = {\n        ...found,\n        ...group\n      }\n    } else {\n      Registry.push(group)\n    }\n  }\n\n  static registerTemplate(templates: ComponentTemplate[]): void {\n    templates &&\n      templates.forEach(template => {\n        var group = Registry.find(group => group.name == template.group)\n\n        if (!group) {\n          console.warn('Invalid group', group, template)\n          return\n        }\n\n        if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n          group.templates.push(template)\n        }\n      })\n  }\n\n  static get groups(): ComponentGroup[] {\n    return Registry\n  }\n\n  static getGroup(name: string) {\n    return Registry.find(group => group.name === name)\n  }\n\n  @property({ type: String }) boardName: string = ''\n  @property({ type: Object }) model: any = null\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Array }) selected: any[] = []\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT\n  @property({ type: Object }) provider: any = null\n  @property({ type: Boolean }) hideProperty: boolean = false\n  @property({ type: String }) overlay: string = ''\n  @property({ type: Object }) scene?: Scene\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  @query('edit-toolbar') private editToolbar!: EditToolbar\n\n  private group: string = ''\n  private shortcutHandler?: (e: KeyboardEvent) => void\n\n  constructor() {\n    super()\n\n    document.addEventListener('get-all-scene-component-ids', (e: Event) => {\n      var { component, callback } = (e as CustomEvent).detail\n\n      if (!this.scene) return\n\n      var ids\n      if (component) {\n        ids = this.scene.findAll(component).map(c => c.model.id)\n      } else {\n        // @ts-ignore\n        ids = this.scene.ids.map(({ key }) => key)\n      }\n\n      ids = ids.filter(id => !!id).sort()\n      callback(ids)\n    })\n\n    this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`)\n    this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`)\n    this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`)\n    this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)\n    this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)\n\n    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)\n    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)\n    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)\n    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)\n\n    this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)\n  }\n\n  render() {\n    return html`\n      <edit-toolbar\n        id=\"edittoolbar\"\n        .scene=${this.scene}\n        .selected=${this.selected}\n        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}\n        @open-preview=${() => this.preview()}\n        @download-model=${() => this.downloadModel()}\n        @modeller-fullscreen=${() => togglefullscreen(this)}\n      >\n        ${this.renderBrandingZone()}\n      </edit-toolbar>\n\n      <component-toolbar\n        .scene=${this.scene}\n        .mode=${this.mode}\n        @mode-changed=${(e: CustomEvent) => {\n          this.mode = e.detail.value\n        }}\n        .componentGroupList=${this.componentGroupList}\n        .group=${this.group}\n      >\n      </component-toolbar>\n\n      <div id=\"scene-wrap\">\n        <ox-scene-viewer\n          id=\"scene\"\n          .scene=${this.scene}\n          @scene-changed=${(e: CustomEvent) => {\n            this.scene = e.detail.value\n          }}\n          .model=${this.model}\n          .selected=${this.selected}\n          @selected-changed=${(e: CustomEvent) => {\n            this.selected = e.detail.value\n          }}\n          .mode=${this.mode}\n          @mode-changed=${(e: CustomEvent) => {\n            this.mode = e.detail.value\n          }}\n          fit=\"ratio\"\n          .baseUrl=${this.baseUrl}\n          @contextmenu=${() => this.onContextMenu()}\n          .provider=${this.provider}\n          name=\"modeller\"\n        >\n          <ox-scene-layer type=\"selection-layer\"></ox-scene-layer>\n          <ox-scene-layer type=\"modeling-layer\"></ox-scene-layer>\n          <ox-scene-layer type=\"guide-layer\">\n            <ox-scene-property name=\"ruler\" value=\"disabled\"></ox-scene-property>\n          </ox-scene-layer>\n          <ox-scene-layer type=\"shift-layer\">\n            <ox-scene-property name=\"text\" value=\"${this.overlay}\"></ox-scene-property>\n            <ox-scene-property name=\"alpha\" value=\"0.3\"></ox-scene-property>\n            <ox-scene-property name=\"fontFamily\" value=\"arial\"></ox-scene-property>\n            <ox-scene-property name=\"fontSize\" value=\"30\" type=\"number\"></ox-scene-property>\n            <ox-scene-property name=\"fontColor\" value=\"navy\"></ox-scene-property>\n            <ox-scene-property name=\"textBaseline\" value=\"top\"></ox-scene-property>\n            <ox-scene-property name=\"textAlign\" value=\"left\"></ox-scene-property>\n            <ox-scene-property name=\"paddingTop\" value=\"50\" type=\"number\"></ox-scene-property>\n            <ox-scene-property name=\"paddingLeft\" value=\"50\" type=\"number\"></ox-scene-property>\n          </ox-scene-layer>\n          <ox-scene-layer type=\"tag-layer\"></ox-scene-layer>\n          <ox-scene-handler type=\"text-editor\"></ox-scene-handler>\n          <ox-scene-handler type=\"move-handler\"></ox-scene-handler>\n        </ox-scene-viewer>\n\n        <mwc-fab icon=\"save\" @click=${() => this.onTapSave()} title=\"save\"> </mwc-fab>\n      </div>\n\n      <property-sidebar\n        .scene=${this.scene}\n        .selected=${this.selected}\n        .collapsed=${this.hideProperty}\n        .fonts=${this.fonts}\n        .propertyEditor=${this.propertyEditor}\n      >\n      </property-sidebar>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.bindShortcutEvent()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.unbindShortcutEvent()\n  }\n\n  close() {\n    this.model = null\n    this.requestUpdate()\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    if (isMacOS) var ctrlKey = e.metaKey\n    else var ctrlKey = e.ctrlKey\n\n    switch (e.code) {\n      case 'KeyS':\n        if (ctrlKey) {\n          this.onTapSave()\n          e.preventDefault()\n        }\n        break\n    }\n  }\n\n  preview() {\n    const board = {\n      id: 'preview',\n      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null\n    }\n\n    OxPopup.open({\n      template: html` <ox-board-viewer .provider=${this.provider} .board=${board}></ox-board-viewer> `,\n      parent: this.renderRoot as Element\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  downloadModel() {\n    if (!this.scene) return\n\n    var model = JSON.stringify(this.model, null, 2)\n    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'\n    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)\n  }\n\n  renderBrandingZone() {\n    return html``\n  }\n\n  onTapSave() {\n    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))\n  }\n\n  bindShortcutEvent() {\n    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.\n    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']\n\n    this.shortcutHandler = (e: KeyboardEvent) => {\n      const target = e.composedPath()[0] as HTMLElement\n      var tagName = target.tagName\n      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'\n      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)\n\n      if (!isGlobalHotkey && isInput) return\n      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)\n    }\n\n    document.addEventListener('keydown', this.shortcutHandler)\n  }\n\n  unbindShortcutEvent() {\n    if (this.shortcutHandler) {\n      document.removeEventListener('keydown', this.shortcutHandler)\n      delete this.shortcutHandler\n    }\n  }\n\n  onContextMenu() {}\n}\n"]}