@fmsim/board 2.0.0-beta.3 → 2.0.0-beta.7

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 (8) hide show
  1. package/custom-elements.json +1076 -1072
  2. package/dist/src/modeller/property-sidebar/property-sidebar.js +3 -16
  3. package/dist/src/modeller/property-sidebar/property-sidebar.js.map +1 -1
  4. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +6 -4
  5. package/dist/src/modeller/property-sidebar/styles/styles.js +139 -436
  6. package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -1
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/package.json +3 -6
package/dist/src/modeller/property-sidebar/styles/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kDAAkD,CAAA;AACzD,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AACzC,OAAO,uCAAuC,CAAA;AAC9C,OAAO,0BAA0B,CAAA;AACjC,OAAO,gDAAgD,CAAA;AAEvD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAInD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAC/C,MAAM,OAAO,cAAe,SAAQ,gBAAgB;IAApD;;QAmT8B,UAAK,GAAQ,EAAE,CAAA;QAChB,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;QAEnC,kBAAa,GAAY,KAAK,CAAA;IAiQzC,CAAC;IA/PC,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAA;QAE7E,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,aAAa,EACb,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,IAAI,EAAE,CAAA;QAEpB,OAAO,IAAI,CAAA;;;;;8EAK+D,KAAK;;;;;;;;;YASvE,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;;2BAOS,UAAU;;;;eAItB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;6DAGyC,QAAQ;;;+DAGN,UAAU;;;kEAGP,aAAa;;;yDAGtB,SAAS;;;;;;6DAML,IAAI;+DACF,MAAM;;;;;;;;;;UAU3D,kBAAkB,EAAE;YACpB,CAAC,CAAC,IAAI,CAAA,2DAA2D,SAAS,gCAAgC;YAC1G,CAAC,CAAC,IAAI,CAAA,sDAAsD,SAAS,2BAA2B;;;;;;;;;;8DAU5C,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;;AAtjBM,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;AAEnC;IAAR,KAAK,EAAE;qDAA+B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/input/ox-input-fill-style.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '../../../component/restful-input-fill-style.js'\n\nimport { css, html } from 'lit'\nimport { property, state } 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\nimport { isRestfulAvailable } from '@fmsim/api'\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 @state() fontAvailable: boolean = false\n\n firstUpdated() {\n this.fontAvailable = !sessionStorage.getItem('ThingsFactory-UseExternServer')\n\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 letterSpacing,\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 <ox-i18n topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-i18n>\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-i18n topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\">text style</ox-i18n>\n </legend>\n\n <div class=\"property-grid\">\n ${this.fontAvailable\n ? html`\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 : html``}\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 letterSpacing\"></label>\n <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"property-half-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-full-label\">\n <ox-i18n msgid=\"label.text-formatting\">Text Formatting</ox-i18n>\n </label>\n <div class=\"property-full-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-i18n topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\">fill style</ox-i18n>\n </legend>\n\n ${isRestfulAvailable()\n ? html` <restful-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </restful-input-fill-style> `\n : html` <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style> `}\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-i18n msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-i18n>\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 '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/input/ox-input-fill-style.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@material/web/icon/icon.js'\nimport '../../../component/restful-input-fill-style.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nimport { isRestfulAvailable } from '@fmsim/api'\nexport class PropertyStyles extends AbstractProperty {\n static styles = [\n PropertyGridStyles,\n LineStyles,\n css`\n ox-input-range {\n width: 100%;\n }\n\n .btn-group {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-medium, 8px);\n }\n\n .btn-group * {\n width: 30px;\n min-width: initial;\n border-radius: 0;\n border-bottom: 2px solid #fff;\n }\n\n .btn-group [active] {\n border-bottom: 2px solid #f2471c;\n }\n `\n ]\n\n @property({ type: Object }) value: any = {}\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) fonts: any[] = []\n\n connectedCallback() {\n super.connectedCallback()\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n onButtonGroupClick(e: Event) {\n const target = e.target as HTMLElement\n\n if (target.hasAttribute('value-key')) {\n target.toggleAttribute('active')\n\n target.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n }\n\n render() {\n var {\n alpha = 1,\n fontFamily,\n fontSize,\n lineHeight,\n letterSpacing,\n fontColor,\n bold,\n italic,\n fillStyle,\n lineWidth,\n strokeStyle,\n lineDash = 'solid',\n lineCap,\n lineJoin,\n begin = 'none',\n beginSize = 'size1',\n end = 'none',\n endSize = 'size1'\n } = this.value || {}\n\n return html`\n <fieldset>\n <legend>\n <ox-i18n topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-i18n>\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-i18n topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\">text style</ox-i18n>\n </legend>\n\n <div class=\"property-grid\">\n <label>\n <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n </label>\n\n <ox-font-selector class=\"custom-editor\" value-key=\"fontFamily\" .value=${fontFamily}></ox-font-selector>\n\n <label class=\"onethird-label icon-only-label\"><md-icon>format_size</md-icon></label>\n <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"onethird-editor\" />\n\n <label class=\"onethird-label icon-only-label\"><md-icon>format_line_spacing</md-icon></label>\n <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"onethird-editor\" />\n\n <label class=\"onethird-label icon-only-label\"><md-icon>format_letter_spacing</md-icon></label>\n <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"onethird-editor\" />\n\n <label class=\"twothird-label icon-only-label\"><md-icon>format_color_text</md-icon></label>\n <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"twothird-editor\"> </ox-input-color>\n\n <div class=\"onethird-full btn-group\" @click=${this.onButtonGroupClick}>\n <md-icon value-key=\"bold\" ?active=${bold}>format_bold</md-icon>\n <md-icon value-key=\"italic\" ?active=${italic}>format_italic</md-icon>\n </div>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-i18n topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\">fill style</ox-i18n>\n </legend>\n\n ${isRestfulAvailable()\n ? html` <restful-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </restful-input-fill-style> `\n : html` <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style> `}\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-i18n msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-i18n>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"half-label icon-only-label\"><md-icon>line_weight</md-icon></label>\n <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"half-editor\" />\n\n <label class=\"half-label icon-only-label\"><md-icon>border_color</md-icon></label>\n <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"half-editor\"> </ox-input-color>\n\n <label>\n <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\n </label>\n <ox-select value-key=\"lineDash\" .value=${lineDash} class=\"custom-editor\">\n <div class=\"line-type ${lineDash}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n </label>\n <select 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>\n <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n </label>\n <select 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>\n <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\n </label>\n <ox-select value-key=\"begin\" .value=${begin} class=\"custom-editor\">\n <div class=\"arrow-type ${begin ? `begin-${begin}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type begin-none\" value=\"none\" option></div>\n <div class=\"arrow-type begin-arrow\" value=\"arrow\" option></div>\n <div class=\"arrow-type begin-open-arrow\" value=\"open-arrow\" option></div>\n <div class=\"arrow-type begin-sharp-arrow\" value=\"sharp-arrow\" option></div>\n <div class=\"arrow-type begin-diamond\" value=\"diamond\" option></div>\n <div class=\"arrow-type begin-oval\" value=\"oval\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\n </label>\n <ox-select value-key=\"beginSize\" .value=${beginSize} class=\"custom-editor\">\n <div class=\"arrow-type ${beginSize ? `begin-${beginSize}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type begin-size1\" value=\"size1\" option></div>\n <div class=\"arrow-type begin-size2\" value=\"size2\" option></div>\n <div class=\"arrow-type begin-size3\" value=\"size3\" option></div>\n <div class=\"arrow-type begin-size4\" value=\"size4\" option></div>\n <div class=\"arrow-type begin-size5\" value=\"size5\" option></div>\n <div class=\"arrow-type begin-size6\" value=\"size6\" option></div>\n <div class=\"arrow-type begin-size7\" value=\"size7\" option></div>\n <div class=\"arrow-type begin-size8\" value=\"size8\" option></div>\n <div class=\"arrow-type begin-size9\" value=\"size9\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\n </label>\n <ox-select value-key=\"end\" .value=${end} class=\"custom-editor\">\n <div class=\"arrow-type ${end ? `end-${end}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type end-none\" value=\"none\" option></div>\n <div class=\"arrow-type end-arrow\" value=\"arrow\" option></div>\n <div class=\"arrow-type end-open-arrow\" value=\"open-arrow\" option></div>\n <div class=\"arrow-type end-sharp-arrow\" value=\"sharp-arrow\" option></div>\n <div class=\"arrow-type end-diamond\" value=\"diamond\" option></div>\n <div class=\"arrow-type end-oval\" value=\"oval\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label>\n <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\n </label>\n <ox-select value-key=\"endSize\" .value=${endSize} class=\"custom-editor\">\n <div class=\"arrow-type ${endSize ? `end-${endSize}` : nothing}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"arrow-type end-size1\" value=\"size1\" option></div>\n <div class=\"arrow-type end-size2\" value=\"size2\" option></div>\n <div class=\"arrow-type end-size3\" value=\"size3\" option></div>\n <div class=\"arrow-type end-size4\" value=\"size4\" option></div>\n <div class=\"arrow-type end-size5\" value=\"size5\" option></div>\n <div class=\"arrow-type end-size6\" value=\"size6\" option></div>\n <div class=\"arrow-type end-size7\" value=\"size7\" option></div>\n <div class=\"arrow-type end-size8\" value=\"size8\" option></div>\n <div class=\"arrow-type end-size9\" value=\"size9\" option></div>\n </ox-popup-list>\n </ox-select>\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"]}