npm - @operato/board - Versions diffs - 9.0.0-beta.12 → 9.0.0-beta.14 - Mend

@operato/board 9.0.0-beta.12 → 9.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qDAAqD,CAAA;AAC5D,OAAO,qCAAqC,CAAA;AAC5C,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AACzC,OAAO,2CAA2C,CAAA;AAClD,OAAO,mCAAmC,CAAA;AAC1C,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,MAAM,OAAO,cAAe,SAAQ,gBAAgB;IAApD;;QAmT8B,UAAK,GAAQ,EAAE,CAAA;QAChB,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;IA2P9C,CAAC;IAzPC,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,GAAG,CAAC,EACT,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EACb,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,IAAI,EAAE,CAAA;QAEpB,OAAO,IAAI,CAAA;;;;;8EAK+D,KAAK;;;;;;;;;;;;;;;;;qBAiB9D,UAAU;;;;;;6DAM8B,QAAQ;;;+DAGN,UAAU;;;kEAGP,aAAa;;;yDAGtB,SAAS;;;;6DAIL,IAAI;+DACF,MAAM;;;;;;;;;;;;4DAYT,SAAS;;;;;;;;;;8DAUP,SAAS;;;2DAGZ,WAAW;;;;;;;;;kCASpC,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,CAAC;YACzC,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;YAEtB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;gBACnC,MAAM,GAAG,KAAK,CAAA;gBACd,OAAO,MAAM,CAAA;YACf,CAAC;YAED,MAAM,GAAG,IAAI,CAAA;QACf,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;;AA9iBM,qBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8SF;CACF,AAjTY,CAiTZ;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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/app/input/ox-input-fill-style.js'\nimport '@operato/font/ox-font-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\n\nexport class PropertyStyles extends AbstractProperty {\n static styles = [\n PropertySharedStyle,\n css`\n ox-input-range {\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 = 1,\n fontFamily,\n fontSize,\n lineHeight,\n fontColor,\n letterSpacing,\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 <ox-title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-title-with-help>\n </legend>\n <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n >text style</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n </label>\n\n <ox-font-selector\n value-key=\"fontFamily\"\n .value=${fontFamily}\n class=\"property-full-input\"\n custom-editor\n ></ox-font-selector>\n\n <label class=\"property-onethird-label icon-only-label font-size\"></label>\n <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-onethird-input\" />\n\n <label class=\"property-onethird-label icon-only-label lineHeight\"></label>\n <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-onethird-input\" />\n\n <label class=\"property-onethird-label icon-only-label letterSpacing\"></label>\n <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"property-onethird-input\" />\n\n <label class=\"property-half-label icon-only-label color\"></label>\n <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\"> </ox-input-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 <ox-title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n >fill style</ox-title-with-help\n >\n </legend>\n\n <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-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 <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\"> </ox-input-color>\n\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\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 <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n </label>\n <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n <option value=\"butt\"><ox-i18n msgid=\"label.square\">square</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n </select>\n\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n </label>\n <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n <option value=\"miter\"><ox-i18n msgid=\"label.miter\">miter</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n <option value=\"bevel\"><ox-i18n msgid=\"label.bevel\">bevel</ox-i18n></option>\n </select>\n\n ${this._isLine(this.selected)\n ? html`\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\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 <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\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 <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\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 <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\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"]}
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.js'\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/property-panel/ox-input-fill-style.js'\nimport '@operato/font/ox-font-selector.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\n\nexport class PropertyStyles extends AbstractProperty {\n static styles = [\n PropertySharedStyle,\n css`\n ox-input-range {\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 = 1,\n fontFamily,\n fontSize,\n lineHeight,\n fontColor,\n letterSpacing,\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 <ox-title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-title-with-help>\n </legend>\n <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n >text style</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n </label>\n\n <ox-font-selector\n value-key=\"fontFamily\"\n .value=${fontFamily}\n class=\"property-full-input\"\n custom-editor\n ></ox-font-selector>\n\n <label class=\"property-onethird-label icon-only-label font-size\"></label>\n <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-onethird-input\" />\n\n <label class=\"property-onethird-label icon-only-label lineHeight\"></label>\n <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-onethird-input\" />\n\n <label class=\"property-onethird-label icon-only-label letterSpacing\"></label>\n <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"property-onethird-input\" />\n\n <label class=\"property-half-label icon-only-label color\"></label>\n <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\"> </ox-input-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 <ox-title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n >fill style</ox-title-with-help\n >\n </legend>\n\n <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-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 <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\"> </ox-input-color>\n\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\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 <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n </label>\n <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n <option value=\"butt\"><ox-i18n msgid=\"label.square\">square</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n </select>\n\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n </label>\n <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n <option value=\"miter\"><ox-i18n msgid=\"label.miter\">miter</ox-i18n></option>\n <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n <option value=\"bevel\"><ox-i18n msgid=\"label.bevel\">bevel</ox-i18n></option>\n </select>\n\n ${this._isLine(this.selected)\n ? html`\n <label class=\"property-full-label\">\n <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\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 <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\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 <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\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 <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\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/modeller/property-sidebar.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { LitElement, PropertyValues } from 'lit';
+import { Component, Model, Scene } from '@hatiolab/things-scene';
+import { PropertyEffects } from '@operato/property-panel/effects.js';
+import { SceneInspector } from '@operato/property-panel/inspector.js';
+import { PropertyShapes } from '@operato/property-panel/shapes.js';
+import { PropertySpecific } from '@operato/property-panel/specifics.js';
+import { PropertyStyles } from '@operato/property-panel/styles.js';
+import { PropertyDataBinding } from '@operato/property-panel/data-binding.js';
+declare const PropertySidebar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class PropertySidebar extends PropertySidebar_base {
+    static styles: import("lit").CSSResult[];
+    scene: Scene | null;
+    bounds: any;
+    model: Model | null;
+    selected: Component[];
+    specificProps: any;
+    tabName: string | null;
+    collapsed: boolean;
+    fonts: any[];
+    propertyEditor: any[];
+    propertyTarget: Component | null;
+    firstUpdated(): void;
+    updated(change: PropertyValues<this>): void;
+    static get scopedElements(): {
+        'property-shape': typeof PropertyShapes;
+        'property-style': typeof PropertyStyles;
+        'property-effect': typeof PropertyEffects;
+        'property-specific': typeof PropertySpecific;
+        'property-data-binding': typeof PropertyDataBinding;
+        'scene-inspector': typeof SceneInspector;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    private onPropertyChanged;
+    private onBoundsChanged;
+    private onChangedByScene;
+    private setPropertyTargetAsDefault;
+    private onCollapsed;
+    private onSceneChanged;
+    private onSelectedChanged;
+    private setPropertyTarget;
+    private setBounds;
+    private isLine;
+}
+export {};

package/dist/src/modeller/property-sidebar.js ADDED Viewed

@@ -0,0 +1,342 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import deepClone from 'lodash-es/cloneDeep.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScrollbarStyles } from '@operato/styles';
+import { PropertyEffects } from '@operato/property-panel/effects.js';
+import { SceneInspector } from '@operato/property-panel/inspector.js';
+import { PropertyShapes } from '@operato/property-panel/shapes.js';
+import { PropertySpecific } from '@operato/property-panel/specifics.js';
+import { PropertyStyles } from '@operato/property-panel/styles.js';
+import { PropertyDataBinding } from '@operato/property-panel/data-binding.js';
+export class PropertySidebar extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.scene = null;
+        this.bounds = {};
+        this.model = {};
+        this.selected = [];
+        this.tabName = 'shape';
+        this.collapsed = false;
+        this.fonts = [];
+        this.propertyEditor = [];
+        this.propertyTarget = null;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this));
+        this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this));
+    }
+    updated(change) {
+        change.has('scene') && this.onSceneChanged();
+        change.has('selected') && this.onSelectedChanged(this.selected);
+        change.has('collapsed') && this.onCollapsed(this.collapsed);
+    }
+    static get scopedElements() {
+        return {
+            'property-shape': PropertyShapes,
+            'property-style': PropertyStyles,
+            'property-effect': PropertyEffects,
+            'property-specific': PropertySpecific,
+            'property-data-binding': PropertyDataBinding,
+            'scene-inspector': SceneInspector
+        };
+    }
+    render() {
+        var tabName = this.tabName ? this.tabName : 'shape';
+        return html `
+      <div
+        tab
+        @click=${(e) => {
+            this.tabName = e.target.getAttribute('name');
+        }}
+      >
+        <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
+        <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
+        <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
+        <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
+        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
+        <md-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</md-icon>
+      </div>
+      <div content>
+        ${html `
+          ${{
+            shape: html `
+              <property-shape
+                .value=${this.model}
+                .bounds=${this.bounds}
+                .selected=${this.selected}
+                ?active=${tabName == 'shape'}
+                ?is-line=${this.isLine(this.selected)}
+              >
+              </property-shape>
+            `,
+            style: html `
+              <property-style
+                .value=${this.model}
+                .selected=${this.selected}
+                .fonts=${this.fonts}
+                ?active=${tabName == 'style'}
+              >
+              </property-style>
+            `,
+            effect: html `
+              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
+              </property-effect>
+            `,
+            specific: html `
+              <property-specific
+                .value=${this.model}
+                .scene=${this.scene}
+                .selected=${this.selected}
+                .props=${this.specificProps}
+                .propertyEditor=${this.propertyEditor}
+                ?active=${tabName == 'specific'}
+              >
+              </property-specific>
+            `,
+            'data-binding': html `
+              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>
+              </property-data-binding>
+            `,
+            inspector: html `
+              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>
+            `
+        }[this.tabName]}
+        `}
+      </div>
+    `;
+    }
+    onPropertyChanged(e) {
+        var detail = e.detail;
+        if (this.propertyTarget) {
+            /* 단일 컴포넌트의 경우에 적용 */
+            this.scene && this.scene.undoableChange(() => this.propertyTarget.set(detail));
+        }
+        else {
+            /* 여러 컴포넌트의 경우에 적용 */
+            this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)));
+        }
+    }
+    onBoundsChanged(e) {
+        var detail = e.detail;
+        if (!this.scene) {
+            return;
+        }
+        if (this.propertyTarget) {
+            /* 단일 컴포넌트의 경우에 적용 */
+            this.scene.undoableChange(() => {
+                this.propertyTarget.bounds = {
+                    ...this.propertyTarget.bounds,
+                    ...detail
+                };
+            });
+        }
+        else {
+            /* 여러 컴포넌트의 경우에 적용 */
+            this.scene.undoableChange(() => {
+                this.selected.forEach(component => {
+                    component.bounds = {
+                        ...component.bounds,
+                        ...detail
+                    };
+                });
+            });
+        }
+    }
+    onChangedByScene() {
+        if (this.propertyTarget) {
+            this.model = {
+                ...this.propertyTarget.model
+            };
+            this.setBounds(this.propertyTarget.bounds);
+        }
+    }
+    setPropertyTargetAsDefault() {
+        if (!this.scene) {
+            this.setPropertyTarget(null);
+            this.specificProps = [];
+            this.model = null;
+            this.bounds = {};
+        }
+        else {
+            this.scene.select('model-layer');
+        }
+    }
+    onCollapsed(collapsed) {
+        !collapsed && (this.style.display = '');
+        this.animate(collapsed
+            ? [
+                { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },
+                { transform: 'translateX(100%)', opacity: 1 }
+            ]
+            : [
+                { transform: 'translateX(100%)', opacity: 1 },
+                { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }
+            ], {
+            duration: 500
+        }).onfinish = () => {
+            collapsed && (this.style.display = 'none');
+            dispatchEvent(new Event('resize'));
+        };
+    }
+    async onSceneChanged() {
+        await this.updateComplete;
+        if (this.scene)
+            this.selected = this.scene.select('model-layer');
+    }
+    async onSelectedChanged(after) {
+        await this.updateComplete;
+        if (after.length == 1) {
+            this.setPropertyTarget(after[0]);
+            // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.
+            // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.
+            this.specificProps = deepClone(this.propertyTarget.nature.properties);
+            this.model = {
+                ...this.propertyTarget.model
+            };
+            this.setBounds(this.propertyTarget.bounds);
+        }
+        else if (after.length == 0) {
+            // 선택이 안된 경우
+            this.setPropertyTargetAsDefault();
+        }
+        else {
+            // 다중 선택된 경우
+            var type = after[0].model.type;
+            for (let i = 1; i < after.length; i++) {
+                if (after[i].model.type != type) {
+                    type = undefined;
+                    break;
+                }
+            }
+            this.setPropertyTarget(null);
+            if (type)
+                this.specificProps = deepClone(after[0].nature.properties);
+            else
+                this.specificProps = null;
+            this.model = {
+                type: type,
+                alpha: 1
+            };
+            this.bounds = {};
+        }
+    }
+    setPropertyTarget(newTarget) {
+        var oldTarget = this.propertyTarget;
+        if (oldTarget) {
+            oldTarget.off('change', this.onChangedByScene, this);
+        }
+        if (newTarget) {
+            newTarget.on('change', this.onChangedByScene, this);
+        }
+        this.propertyTarget = newTarget;
+    }
+    setBounds(bounds) {
+        this.bounds = {
+            left: bounds.left,
+            top: bounds.top,
+            width: Math.round(bounds.width),
+            height: Math.round(bounds.height)
+        };
+    }
+    isLine(selected) {
+        var isLine = false;
+        for (var i = 0; i < selected.length; i++) {
+            var comp = selected[i];
+            if (!comp.isLine || !comp.isLine()) {
+                isLine = false;
+                return isLine;
+            }
+            isLine = true;
+        }
+        return isLine;
+    }
+}
+PropertySidebar.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        border-left: 1px solid var(--md-sys-color-border, #ccc);
+        width: 270px;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
+        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));
+        user-select: none;
+        --input-padding: var(--spacing-small);
+        --label-font: var(--property-sidebar-fieldset-label, roboto);
+      }
+      [tab] {
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.08);
+        opacity: 0.85;
+      }
+      [tab] md-icon {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--property-sidebar-tab-icon-color);
+        height: 40px;
+      }
+      [tab] [selected] {
+        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
+        border-left: 1px solid rgba(255, 255, 255, 0.5);
+        border-right: 1px solid rgba(0, 0, 0, 0.15);
+        opacity: 1;
+      }
+      [content] {
+        flex: 1;
+        overflow: hidden;
+        overflow-y: auto;
+        --md-icon-size: 22px;
+      }
+      [content] > :not([active]) {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertySidebar.prototype, "scene", void 0);
+__decorate([
+    property({ type: Object })
+], PropertySidebar.prototype, "bounds", void 0);
+__decorate([
+    property({ type: Object })
+], PropertySidebar.prototype, "model", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySidebar.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySidebar.prototype, "specificProps", void 0);
+__decorate([
+    property({ type: String })
+], PropertySidebar.prototype, "tabName", void 0);
+__decorate([
+    property({ type: Boolean })
+], PropertySidebar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySidebar.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySidebar.prototype, "propertyEditor", void 0);
+//# sourceMappingURL=property-sidebar.js.map

package/dist/src/modeller/property-sidebar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../src/modeller/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep.js'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyEffects } from '@operato/property-panel/effects.js'\nimport { SceneInspector } from '@operato/property-panel/inspector.js'\nimport { PropertyShapes } from '@operato/property-panel/shapes.js'\nimport { PropertySpecific } from '@operato/property-panel/specifics.js'\nimport { PropertyStyles } from '@operato/property-panel/styles.js'\nimport { PropertyDataBinding } from '@operato/property-panel/data-binding.js'\n\nexport class PropertySidebar extends ScopedElementsMixin(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n border-left: 1px solid var(--md-sys-color-border, #ccc);\n width: 270px;\n display: flex;\n flex-direction: column;\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));\n user-select: none;\n\n --input-padding: var(--spacing-small);\n --label-font: var(--property-sidebar-fieldset-label, roboto);\n }\n\n [tab] {\n display: flex;\n background-color: rgba(0, 0, 0, 0.08);\n opacity: 0.85;\n }\n\n [tab] md-icon {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--property-sidebar-tab-icon-color);\n height: 40px;\n }\n\n [tab] [selected] {\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n border-left: 1px solid rgba(255, 255, 255, 0.5);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n opacity: 1;\n }\n\n [content] {\n flex: 1;\n\n overflow: hidden;\n overflow-y: auto;\n\n --md-icon-size: 22px;\n }\n\n [content] > :not([active]) {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) scene: Scene | null = null\n @property({ type: Object }) bounds: any = {}\n @property({ type: Object }) model: Model | null = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) specificProps: any\n @property({ type: String }) tabName: string | null = 'shape'\n @property({ type: Boolean }) collapsed: boolean = false\n @property({ type: Array }) fonts: any[] = []\n @property({ type: Array }) propertyEditor: any[] = []\n\n propertyTarget: Component | null = null\n\n firstUpdated() {\n this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)\n this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)\n }\n\n updated(change: PropertyValues<this>) {\n change.has('scene') && this.onSceneChanged()\n change.has('selected') && this.onSelectedChanged(this.selected)\n change.has('collapsed') && this.onCollapsed(this.collapsed)\n }\n\n static get scopedElements() {\n return {\n 'property-shape': PropertyShapes,\n 'property-style': PropertyStyles,\n 'property-effect': PropertyEffects,\n 'property-specific': PropertySpecific,\n 'property-data-binding': PropertyDataBinding,\n 'scene-inspector': SceneInspector\n }\n }\n\n render() {\n var tabName = this.tabName ? this.tabName : 'shape'\n\n return html`\n <div\n tab\n @click=${(e: MouseEvent) => {\n this.tabName = (e.target as HTMLElement).getAttribute('name')\n }}\n >\n <md-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</md-icon>\n <md-icon name=\"style\" ?selected=${tabName == 'style'}>palette</md-icon>\n <md-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</md-icon>\n <md-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</md-icon>\n <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</md-icon>\n <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</md-icon>\n </div>\n\n <div content>\n ${html`\n ${{\n shape: html`\n <property-shape\n .value=${this.model}\n .bounds=${this.bounds}\n .selected=${this.selected}\n ?active=${tabName == 'shape'}\n ?is-line=${this.isLine(this.selected)}\n >\n </property-shape>\n `,\n style: html`\n <property-style\n .value=${this.model}\n .selected=${this.selected}\n .fonts=${this.fonts}\n ?active=${tabName == 'style'}\n >\n </property-style>\n `,\n effect: html`\n <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n </property-effect>\n `,\n specific: html`\n <property-specific\n .value=${this.model}\n .scene=${this.scene}\n .selected=${this.selected}\n .props=${this.specificProps}\n .propertyEditor=${this.propertyEditor}\n ?active=${tabName == 'specific'}\n >\n </property-specific>\n `,\n 'data-binding': html`\n <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n </property-data-binding>\n `,\n inspector: html`\n <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n `\n }[this.tabName!]}\n `}\n </div>\n `\n }\n\n private onPropertyChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (this.propertyTarget) {\n /* 단일 컴포넌트의 경우에 적용 */\n this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n } else {\n /* 여러 컴포넌트의 경우에 적용 */\n this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n }\n }\n\n private onBoundsChanged(e: CustomEvent) {\n var detail = e.detail\n\n if (!this.scene) {\n return\n }\n\n if (this.propertyTarget) {\n /* 단일 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.propertyTarget!.bounds = {\n ...this.propertyTarget!.bounds,\n ...detail\n }\n })\n } else {\n /* 여러 컴포넌트의 경우에 적용 */\n this.scene.undoableChange(() => {\n this.selected.forEach(component => {\n component.bounds = {\n ...component.bounds,\n ...detail\n }\n })\n })\n }\n }\n\n private onChangedByScene() {\n if (this.propertyTarget) {\n this.model = {\n ...this.propertyTarget.model\n }\n this.setBounds(this.propertyTarget.bounds)\n }\n }\n\n private setPropertyTargetAsDefault() {\n if (!this.scene) {\n this.setPropertyTarget(null)\n this.specificProps = []\n this.model = null\n this.bounds = {}\n } else {\n this.scene.select('model-layer')\n }\n }\n\n private onCollapsed(collapsed: boolean) {\n !collapsed && (this.style.display = '')\n\n this.animate(\n collapsed\n ? [\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n { transform: 'translateX(100%)', opacity: 1 }\n ]\n : [\n { transform: 'translateX(100%)', opacity: 1 },\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n ],\n {\n duration: 500\n }\n ).onfinish = () => {\n collapsed && (this.style.display = 'none')\n dispatchEvent(new Event('resize'))\n }\n }\n\n private async onSceneChanged() {\n await this.updateComplete\n\n if (this.scene) this.selected = this.scene.select('model-layer')\n }\n\n private async onSelectedChanged(after: Component[]) {\n await this.updateComplete\n\n if (after.length == 1) {\n this.setPropertyTarget(after[0])\n // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n this.model = {\n ...this.propertyTarget!.model\n }\n this.setBounds(this.propertyTarget!.bounds)\n } else if (after.length == 0) {\n // 선택이 안된 경우\n\n this.setPropertyTargetAsDefault()\n } else {\n // 다중 선택된 경우\n\n var type = after[0].model.type\n for (let i = 1; i < after.length; i++) {\n if (after[i].model.type != type) {\n type = undefined\n break\n }\n }\n\n this.setPropertyTarget(null)\n\n if (type) this.specificProps = deepClone(after[0].nature.properties)\n else this.specificProps = null\n\n this.model = {\n type: type,\n alpha: 1\n }\n this.bounds = {}\n }\n }\n\n private setPropertyTarget(newTarget: Component | null) {\n var oldTarget = this.propertyTarget\n\n if (oldTarget) {\n oldTarget.off('change', this.onChangedByScene, this)\n }\n if (newTarget) {\n newTarget.on('change', this.onChangedByScene, this)\n }\n\n this.propertyTarget = newTarget\n }\n\n private setBounds(bounds: BOUNDS) {\n this.bounds = {\n left: bounds.left,\n top: bounds.top,\n width: Math.round(bounds.width),\n height: Math.round(bounds.height)\n }\n }\n\n private 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.d.ts CHANGED Viewed

@@ -10,9 +10,9 @@ import { LitElement, PropertyValues } from 'lit';
 import { Scene, SCENE_MODE } from '@hatiolab/things-scene';
 import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar.js';
 import { EditToolbar } from './modeller/edit-toolbar.js';
-import { PropertySidebar } from './modeller/property-sidebar/property-sidebar.js';
+import { PropertySidebar } from './modeller/property-sidebar.js';
 import { ComponentGroup, ComponentTemplate } from './types.js';
-declare const BoardModeller_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
+declare const BoardModeller_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
 export declare class BoardModeller extends BoardModeller_base {
     static styles: import("lit").CSSResult[];
     static registerGroup(group: ComponentGroup): void;

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

@@ -16,7 +16,7 @@ import { OxPopup } from '@operato/popup';
 import { isMacOS, togglefullscreen } from '@operato/utils';
 import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar.js';
 import { EditToolbar } from './modeller/edit-toolbar.js';
-import { PropertySidebar } from './modeller/property-sidebar/property-sidebar.js';
+import { PropertySidebar } from './modeller/property-sidebar.js';
 const MACOS = isMacOS();
 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;