npm - @operato/property-panel - Versions diffs - 10.20.0 → 10.23.0 - Mend

@operato/property-panel 10.20.0 → 10.23.0

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 (32) hide show

package/dist/src/property-panel/event-handlers/event-handlers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"event-handlers.js","sourceRoot":"","sources":["../../../../src/property-panel/event-handlers/event-handlers.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n \n EventHandlers panel — 컴포넌트의 `state.eventHandlers[]` 편집기.\n \n 데이터바인딩 panel 의 형제로 완전 분리. 데이터바인딩은 데이터 흐름 전용,\n * eventHandlers 는 사용자 액션 (tap / hover / 등) 의 first-class 핸들러 등록.\n \n data-binding 패턴 그대로 — tabs (N handlers) + handler mapper + add/delete/copy/paste.\n /\n\nimport '@material/web/icon/icon.js'\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport type { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { openPopup } from '@operato/layout'\nimport { i18next } from '@operato/i18n'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js'\n\nvar clipboard = '{\"trigger\":\"click\",\"action\":\"\"}'\n\nexport class PropertyEventHandlers extends ScopedElementsMixin(AbstractProperty) {\n static styles = [\n PropertyGridStyles,\n css`\n / panel 자체가 부모 (사이드바) 너비를 넘기지 않도록. ox-input-code 같은\n * 자유 너비 자식이 panel 폭을 키워서 우측 open_in_new 버튼이 잘리는\n * 현상 방지. /\n :host {\n display: block;\n min-width: 0;\n max-width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n fieldset {\n min-width: 0;\n max-width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n event-handlers-mapper {\n display: block;\n min-width: 0;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n / 카드 상단 — chevron + tabs 를 하나의 둥근 모서리 박스로 통합. /\n #tab-header {\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n border: 1px solid rgba(0, 0, 0, 0.18);\n border-radius: 6px 6px 0 0;\n overflow: hidden;\n background: var(--md-sys-color-surface, #fff);\n }\n\n #tab-header > md-icon {\n padding: 0;\n margin: 0;\n width: 25px;\n height: 25px;\n font-size: x-large;\n align-self: center;\n }\n\n ox-buttons-radio {\n flex: 1;\n height: 25px;\n / 외곽 border 는 #tab-header 가 들고 있다 — 여기는 0. /\n border: 0;\n border-radius: 0;\n text-align: center;\n display: flex;\n padding: 0;\n box-sizing: border-box;\n width: 0;\n overflow-x: hidden;\n }\n\n ox-buttons-radio > div {\n background-color: rgba(0, 0, 0, 0.2);\n border: 1px solid rgba(0, 0, 0, 0.07);\n border-width: 0 0 2px 0;\n padding: 0 8px;\n margin: 0;\n color: #fff;\n font-size: 12px;\n max-width: 110px;\n min-width: 40px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n line-height: 23px;\n }\n\n ox-buttons-radio > div[disabled] {\n background-color: rgba(0, 0, 0, 0.1);\n }\n\n ox-buttons-radio > div[active] {\n border-color: rgb(242, 71, 28);\n }\n\n ox-buttons-radio > div.iron-selected {\n background-color: var(--md-sys-color-surface);\n color: var(--md-sys-color-on-surface);\n }\n\n div[handler-toolbar] {\n display: flex;\n flex-direction: row-reverse;\n background-color: var(--md-sys-color-surface);\n color: var(--md-sys-color-on-surface);\n overflow: hidden;\n border: 1px solid rgba(0, 0, 0, 0.18);\n border-width: 0 1px;\n padding: 6px 6px 4px 6px;\n }\n\n md-icon {\n margin-left: 5px;\n color: var(--md-sys-color-on-secondary-container);\n opacity: 0.8;\n cursor: pointer;\n --md-icon-size: 18px;\n }\n\n md-icon:hover {\n color: var(--md-sys-color-on-primary-container);\n opacity: 1;\n }\n\n md-icon[disabled] {\n color: rgba(0, 0, 0, 0.1);\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n @state() handlerIndex: number = 0\n @state() _afterRender?: Function \| null\n\n @query('#tabs') tabs!: HTMLElement\n @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n /\n 두 속성 통합 — 신규 `eventHandlers` 우선, 없으면 legacy `event` 객체를\n * read-only 변환해 표시. 사용자가 수정 시 `eventHandlers` 에만 저장 — legacy\n * 는 손대지 않음 (옛 코드 호환 / rollback 안전망).\n /\n get handlers(): EventHandlerSpec[] {\n const v = this.value as any\n if (!v) return []\n // 1. 신규\n if (Array.isArray(v.eventHandlers)) return v.eventHandlers as EventHandlerSpec[]\n // 2. legacy 객체 → 변환 (표시만, 저장 시점이 아님)\n const ev = v.event\n if (!ev \|\| typeof ev !== 'object' \|\| Array.isArray(ev)) return []\n const trigMap: Record<string, string> = {\n tap: 'click',\n hover: 'mouseenter',\n dblclick: 'dblclick',\n longpress: 'longpress'\n }\n const out: EventHandlerSpec[] = []\n for (const key of Object.keys(ev)) {\n const trig = trigMap[key]\n const e = ev[key]\n if (!trig \|\| !e \|\| typeof e !== 'object') continue\n if (e.action === 'script') {\n const code = typeof e.value === 'string' ? e.value : (e.value?.script ?? '')\n out.push({ trigger: trig, action: 'script', code, target: e.target })\n } else {\n out.push({\n trigger: trig,\n action: e.action,\n target: e.target,\n value: e.value,\n options: { emphasize: e.emphasize, restore: e.restore, pressed: e.pressed, ...(e.options ?? {}) }\n })\n }\n }\n return out\n }\n\n firstUpdated() {\n this.tabContainer.addEventListener('scroll', () => this._onTabScroll())\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.onValueChanged()\n }\n }\n\n static get scopedElements() {\n return {\n 'event-handlers-mapper': EventHandlersMapper\n }\n }\n\n render() {\n const handlers = this.handlers\n const current = handlers[this.handlerIndex] \|\| { trigger: 'click', action: '' }\n\n return html`\n <fieldset>\n <legend style=\"box-sizing:border-box;width:100%\">\n <ox-title-with-help topic=\"board-modeller/effects/event-handlers\" msgid=\"label.event-handlers\"\n >Event Handlers</ox-title-with-help\n >\n <span style=\"font-size:11px;opacity:0.65;margin-left:6px\">(${handlers.length})</span>\n <md-icon\n style=\"float:right;font-size:medium;margin:0;cursor:pointer\"\n @click=${() => this._openHandlersPopup()}\n title=\"open in popup\"\n >open_in_new</md-icon\n >\n </legend>\n\n <div id=\"tab-header\">\n <md-icon id=\"tab-nav-left-button\" @click=${() => this._onTabScrollNavLeft()} disabled\n >chevron_left</md-icon\n >\n\n <ox-buttons-radio\n id=\"tabs\"\n .value=${String(this.handlerIndex)}\n @change=${(e: Event) => {\n e.stopPropagation()\n this._setHandlerIndex((e.target as any).value)\n }}\n >\n ${handlers.map(\n (h, i) => html`\n <div data-value=${i} title=\"${h.trigger} · ${h.action \|\| '(none)'}${h.disabled ? ' (disabled)' : ''}\">\n ${h.trigger}\n </div>\n `\n )}\n <div data-value=${handlers.length} disabled title=\"add new\">+</div>\n </ox-buttons-radio>\n\n <md-icon id=\"tab-nav-right-button\" @click=${() => this._onTabScrollNavRight()} disabled\n >chevron_right</md-icon\n >\n </div>\n\n <div handler-toolbar>\n <md-icon style=\"font-size:19px\" @click=${() => this._clearHandler()} title=\"delete current\"\n >delete_forever</md-icon\n >\n <md-icon @click=${() => this._pasteHandler()} title=\"paste\">content_paste</md-icon>\n <md-icon style=\"font-size:17px\" @click=${() => this._copyHandler()} title=\"copy\"\n >content_copy</md-icon\n >\n </div>\n\n <event-handlers-mapper\n @value-change=${(e: CustomEvent) => this._onHandlerChanged(e)}\n .scene=${this.scene}\n .handler=${current}\n ></event-handlers-mapper>\n </fieldset>\n `\n }\n\n _setHandlerIndex(idx: number) {\n this.handlerIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n this._onTabScroll()\n }\n\n _clearHandler() {\n const next = [...this.handlers]\n next.splice(this.handlerIndex, 1)\n this._dispatchHandlersChange(next)\n }\n\n _copyHandler() {\n clipboard = JSON.stringify(this.handlers[this.handlerIndex] ?? {})\n }\n\n _pasteHandler() {\n try {\n const parsed = JSON.parse(clipboard)\n const next = [...this.handlers]\n next[this.handlerIndex] = parsed\n this._dispatchHandlersChange(next)\n } catch (_) {\n / invalid clipboard */\n }\n }\n\n _onHandlerChanged(e: CustomEvent) {\n const handler = e.detail?.handler as EventHandlerSpec\n if (!handler) return\n const next = [...this.handlers]\n // 신규 — last+1 위치 추가\n if (this.handlerIndex >= next.length) {\n next.push(handler)\n } else {\n next[this.handlerIndex] = handler\n }\n const currentIdx = this.handlerIndex\n this._afterRender = () => {\n this._setHandlerIndex(currentIdx)\n this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n }\n this._dispatchHandlersChange(next)\n }\n\n private _dispatchHandlersChange(handlers: EventHandlerSpec[]) {\n // action 이 비어있는 handler 는 외부 모델에서 제외 — UI placeholder 는 유지하되\n // 저장은 action 이 선택된 핸들러만.\n const valid = (handlers \|\| []).filter(h => !!h && !!h.action)\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: { eventHandlers: valid }\n })\n )\n }\n\n async onValueChanged() {\n await this.updateComplete\n if (this._afterRender) {\n this._afterRender()\n } else {\n this._setHandlerIndex(0)\n }\n this._afterRender = null\n }\n\n async _openHandlersPopup() {\n // 큰 popup 으로 펼치기 — data-binding 의 _openBindingPopup 패턴 동일.\n await import('./event-handlers-popup.js')\n\n const handlers = [...this.handlers]\n\n const template = html`\n <event-handlers-popup\n .handlers=${handlers}\n .scene=${this.scene}\n @handlers-change=${(e: CustomEvent) => {\n this._dispatchHandlersChange(e.detail?.handlers \|\| [])\n }}\n ></event-handlers-popup>\n `\n\n openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('label.event-handlers')\n })\n }\n\n get tabContainer() {\n return this.tabs\n }\n\n _onTabScroll() {\n if (!this.tabContainer \|\| !this.tabNavLeftButton) return\n if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.setAttribute('disabled', '')\n } else if (this.tabContainer.scrollLeft == 0) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.removeAttribute('disabled')\n } else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.setAttribute('disabled', '')\n } else {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n }\n\n _onTabScrollNavLeft() {\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n\n _onTabScrollNavRight() {\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n}\n\ncustomElements.define('property-event-handlers', PropertyEventHandlers)\n"]}
1	+ {"version":3,"file":"event-handlers.js","sourceRoot":"","sources":["../../../../src/property-panel/event-handlers/event-handlers.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n \n EventHandlers panel — 컴포넌트의 `state.eventHandlers[]` 편집기.\n \n 데이터바인딩 panel 의 형제로 완전 분리. 데이터바인딩은 데이터 흐름 전용,\n * eventHandlers 는 사용자 액션 (tap / hover / 등) 의 first-class 핸들러 등록.\n \n data-binding 패턴 그대로 — tabs (N handlers) + handler mapper + add/delete/copy/paste.\n /\n\nimport '@material/web/icon/icon.js'\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, nothing, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport type { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { openPopup } from '@operato/layout'\nimport { i18next } from '@operato/i18n'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js'\n\nvar clipboard = '{\"trigger\":\"click\",\"action\":\"\"}'\n\nexport class PropertyEventHandlers extends ScopedElementsMixin(AbstractProperty) {\n static styles = [\n PropertyGridStyles,\n css`\n / panel 자체가 부모 (사이드바) 너비를 넘기지 않도록. ox-input-code 같은\n * 자유 너비 자식이 panel 폭을 키워서 우측 open_in_new 버튼이 잘리는\n * 현상 방지. /\n :host {\n display: block;\n min-width: 0;\n max-width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n fieldset {\n min-width: 0;\n max-width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n / The mapper lays its rows out itself; this outer rule must not flatten it to a block,\n * or the row gap it declares on its own host is lost. /\n event-handlers-mapper {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n / 카드 상단 — chevron + tabs 를 하나의 둥근 모서리 박스로 통합. /\n / Not a card: a row of chips (one per handler, plus \"+\"), then the fields like any other section. /\n / How many there are, as a small muted count next to the title. /\n legend > .count {\n margin-left: 6px;\n padding: 0 6px;\n border-radius: 999px;\n font-size: 0.66rem;\n font-weight: 500;\n line-height: 16px;\n color: var(--md-sys-color-on-surface-variant);\n background: var(--md-sys-color-surface-container-high);\n }\n\n / Nothing yet: one quiet way in, instead of an empty form for a handler that does not exist. /\n button.add {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 26px;\n padding: 0 10px 0 6px;\n border: 1px dashed var(--md-sys-color-outline-variant);\n border-radius: 999px;\n background: transparent;\n color: var(--md-sys-color-on-surface-variant);\n font: inherit;\n font-size: 0.74rem;\n cursor: pointer;\n }\n\n button.add md-icon {\n --md-icon-size: 16px;\n }\n\n button.add:hover {\n color: var(--md-sys-color-on-surface);\n border-color: var(--md-sys-color-outline);\n background: var(--md-sys-color-surface-container-high);\n }\n\n / The \"+\" chip is an offer until it is pressed; pressed, it is the same chip as the numbered ones. /\n ox-buttons-radio > div.add-tab:not([active]) {\n line-height: 20px;\n border: 1px dashed var(--md-sys-color-outline-variant);\n background: transparent;\n }\n\n / The \"open in popup\" action is the last thing on the title line, at the far right. /\n legend > md-icon.open-popup {\n margin-left: auto;\n --md-icon-size: 16px;\n color: var(--md-sys-color-outline);\n opacity: 0.6;\n cursor: pointer;\n }\n\n legend > md-icon.open-popup:hover {\n color: var(--md-sys-color-on-surface);\n }\n\n #tab-header {\n display: flex;\n align-items: center;\n gap: 2px;\n margin-bottom: 6px;\n }\n\n #tab-header > md-icon {\n padding: 0;\n margin: 0;\n --md-icon-size: 18px;\n color: var(--md-sys-color-outline);\n }\n\n #tab-header > md-icon[disabled] {\n opacity: 0.3;\n }\n\n ox-buttons-radio {\n flex: 1;\n display: flex;\n gap: 4px;\n padding: 0;\n box-sizing: border-box;\n width: 0;\n overflow-x: hidden;\n }\n\n / Tabs are quiet chips on the strip; the open one is lifted to the card's surface. /\n ox-buttons-radio > div {\n border: 0;\n border-radius: 999px;\n padding: 0;\n margin: 0;\n width: 24px;\n height: 22px;\n line-height: 22px;\n text-align: center;\n font-size: 0.72rem;\n box-sizing: border-box;\n color: var(--md-sys-color-on-surface-variant);\n background-color: var(--md-sys-color-surface-container-high);\n cursor: pointer;\n }\n\n ox-buttons-radio > div[disabled] {\n opacity: 0.4;\n }\n\n ox-buttons-radio > div[active],\n ox-buttons-radio > div.iron-selected {\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--md-sys-color-secondary-container);\n }\n\n div[handler-toolbar] {\n display: flex;\n flex-direction: row-reverse;\n gap: 2px;\n margin-left: auto;\n padding-left: 6px;\n }\n\n #tab-header > md-icon[disabled] {\n display: none;\n }\n\n / Section actions are offers, not content: outline ink at half strength until hovered. /\n md-icon {\n margin-left: 5px;\n color: var(--md-sys-color-outline);\n opacity: 0.6;\n cursor: pointer;\n --md-icon-size: 18px;\n }\n\n md-icon:hover {\n color: var(--md-sys-color-on-surface);\n opacity: 1;\n }\n\n md-icon[disabled] {\n color: var(--md-sys-color-outline-variant);\n cursor: default;\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n @state() handlerIndex: number = 0\n / True while a new handler is being composed and is not yet in the model (no action chosen). /\n @state() private _composing: boolean = false\n private _composingFor?: unknown\n @state() _afterRender?: Function \| null\n\n @query('#tabs') tabs!: HTMLElement\n @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n /\n 두 속성 통합 — 신규 `eventHandlers` 우선, 없으면 legacy `event` 객체를\n * read-only 변환해 표시. 사용자가 수정 시 `eventHandlers` 에만 저장 — legacy\n * 는 손대지 않음 (옛 코드 호환 / rollback 안전망).\n /\n get handlers(): EventHandlerSpec[] {\n const v = this.value as any\n if (!v) return []\n // 1. 신규\n if (Array.isArray(v.eventHandlers)) return v.eventHandlers as EventHandlerSpec[]\n // 2. legacy 객체 → 변환 (표시만, 저장 시점이 아님)\n const ev = v.event\n if (!ev \|\| typeof ev !== 'object' \|\| Array.isArray(ev)) return []\n const trigMap: Record<string, string> = {\n tap: 'click',\n hover: 'mouseenter',\n dblclick: 'dblclick',\n longpress: 'longpress'\n }\n const out: EventHandlerSpec[] = []\n for (const key of Object.keys(ev)) {\n const trig = trigMap[key]\n const e = ev[key]\n if (!trig \|\| !e \|\| typeof e !== 'object') continue\n if (e.action === 'script') {\n const code = typeof e.value === 'string' ? e.value : (e.value?.script ?? '')\n out.push({ trigger: trig, action: 'script', code, target: e.target })\n } else {\n out.push({\n trigger: trig,\n action: e.action,\n target: e.target,\n value: e.value,\n options: { emphasize: e.emphasize, restore: e.restore, pressed: e.pressed, ...(e.options ?? {}) }\n })\n }\n }\n return out\n }\n\n firstUpdated() {\n / The tab strip only exists once there is a handler; scroll does not bubble, so capture it at the root. /\n this.renderRoot.addEventListener('scroll', e => (e.target as Element).id === 'tabs' && this._onTabScroll(), true)\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n const selected = this.scene?.selected?.[0]\n if (selected !== this._composingFor) {\n this._composingFor = selected\n this._composing = false\n }\n }\n\n if (changes.has('value')) {\n this.onValueChanged()\n }\n }\n\n static get scopedElements() {\n return {\n 'event-handlers-mapper': EventHandlersMapper\n }\n }\n\n render() {\n const handlers = this.handlers\n const current = handlers[this.handlerIndex] \|\| { trigger: 'click', action: '' }\n\n return html`\n <fieldset>\n <legend style=\"box-sizing:border-box;width:100%\">\n <ox-title-with-help topic=\"board-modeller/effects/event-handlers\" msgid=\"label.event-handlers\"\n >Event Handlers</ox-title-with-help\n >\n ${handlers.length ? html`<span class=\"count\">${handlers.length}</span>` : nothing}\n <md-icon\n class=\"open-popup\"\n @click=${() => this._openHandlersPopup()}\n title=\"open in popup\"\n >open_in_new</md-icon\n >\n </legend>\n\n ${handlers.length \|\| this._composing\n ? html`\n <div id=\"tab-header\">\n <md-icon id=\"tab-nav-left-button\" @click=${() => this._onTabScrollNavLeft()} disabled\n >chevron_left</md-icon\n >\n\n <ox-buttons-radio\n id=\"tabs\"\n .value=${String(this.handlerIndex)}\n @change=${(e: Event) => {\n e.stopPropagation()\n this._setHandlerIndex((e.target as any).value)\n }}\n >\n ${handlers.map(\n (h, i) => html`\n <div data-value=${i} title=\"${h.trigger} · ${h.action \|\| '(none)'}${h.disabled ? ' (disabled)' : ''}\">\n ${i + 1}\n </div>\n `\n )}\n <div data-value=${handlers.length} class=\"add-tab\" title=\"add\" @click=${() => (this._composing = true)}>\n +\n </div>\n </ox-buttons-radio>\n\n <md-icon id=\"tab-nav-right-button\" @click=${() => this._onTabScrollNavRight()} disabled\n >chevron_right</md-icon\n >\n\n <div handler-toolbar>\n <md-icon style=\"font-size:19px\" @click=${() => this._clearHandler()} title=\"delete current\"\n >delete_forever</md-icon\n >\n <md-icon @click=${() => this._pasteHandler()} title=\"paste\">content_paste</md-icon>\n <md-icon style=\"font-size:17px\" @click=${() => this._copyHandler()} title=\"copy\"\n >content_copy</md-icon\n >\n </div>\n </div>\n\n <event-handlers-mapper\n @value-change=${(e: CustomEvent) => this._onHandlerChanged(e)}\n .scene=${this.scene}\n .handler=${current}\n ></event-handlers-mapper>\n `\n : html`\n <button class=\"add\" @click=${() => this._startHandler()}>\n <md-icon>add</md-icon>${i18next.t('button.add-handler', { defaultValue: 'Add a handler' })}\n </button>\n `}\n </fieldset>\n `\n }\n\n private _startHandler() {\n this._composing = true\n this.handlerIndex = this.handlers.length\n }\n\n _setHandlerIndex(idx: number) {\n this.handlerIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n this._onTabScroll()\n }\n\n _clearHandler() {\n const next = [...this.handlers]\n next.splice(this.handlerIndex, 1)\n this._dispatchHandlersChange(next)\n }\n\n _copyHandler() {\n clipboard = JSON.stringify(this.handlers[this.handlerIndex] ?? {})\n }\n\n _pasteHandler() {\n try {\n const parsed = JSON.parse(clipboard)\n const next = [...this.handlers]\n next[this.handlerIndex] = parsed\n this._dispatchHandlersChange(next)\n } catch (_) {\n / invalid clipboard */\n }\n }\n\n _onHandlerChanged(e: CustomEvent) {\n const handler = e.detail?.handler as EventHandlerSpec\n if (!handler) return\n const next = [...this.handlers]\n // 신규 — last+1 위치 추가\n if (this.handlerIndex >= next.length) {\n next.push(handler)\n } else {\n next[this.handlerIndex] = handler\n }\n const currentIdx = this.handlerIndex\n this._afterRender = () => {\n this._setHandlerIndex(currentIdx)\n this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n }\n this._dispatchHandlersChange(next)\n }\n\n private _dispatchHandlersChange(handlers: EventHandlerSpec[]) {\n // action 이 비어있는 handler 는 외부 모델에서 제외 — UI placeholder 는 유지하되\n // 저장은 action 이 선택된 핸들러만.\n const valid = (handlers \|\| []).filter(h => !!h && !!h.action)\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: { eventHandlers: valid }\n })\n )\n }\n\n async onValueChanged() {\n await this.updateComplete\n if (this._afterRender) {\n this._afterRender()\n } else {\n this._setHandlerIndex(0)\n }\n this._afterRender = null\n }\n\n async _openHandlersPopup() {\n // 큰 popup 으로 펼치기 — data-binding 의 _openBindingPopup 패턴 동일.\n await import('./event-handlers-popup.js')\n\n const handlers = [...this.handlers]\n\n const template = html`\n <event-handlers-popup\n .handlers=${handlers}\n .scene=${this.scene}\n @handlers-change=${(e: CustomEvent) => {\n this._dispatchHandlersChange(e.detail?.handlers \|\| [])\n }}\n ></event-handlers-popup>\n `\n\n openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('label.event-handlers')\n })\n }\n\n get tabContainer() {\n return this.tabs\n }\n\n _onTabScroll() {\n if (!this.tabContainer \|\| !this.tabNavLeftButton) return\n if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.setAttribute('disabled', '')\n } else if (this.tabContainer.scrollLeft == 0) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.removeAttribute('disabled')\n } else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.setAttribute('disabled', '')\n } else {\n this.tabNavLeftButton.removeAttribute('disabled')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n }\n\n _onTabScrollNavLeft() {\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n\n _onTabScrollNavRight() {\n this.tabContainer.style.scrollBehavior = 'smooth'\n this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n this.tabContainer.style.scrollBehavior = 'auto'\n }\n}\n\ncustomElements.define('property-event-handlers', PropertyEventHandlers)\n"]}

package/dist/src/property-panel/shapes/shapes.d.ts CHANGED Viewed

@@ -11,11 +11,13 @@ import { AbstractProperty } from '../abstract-property.js';
 export declare class PropertyShapes extends AbstractProperty {
     static styles: import("lit").CSSResult[];
     value?: Properties;
+    heading: string;
     bounds: BOUNDS | null;
     selected: Component[];
     private _positionExpanded;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    private renderHeading;
     onValueChange(e: Event): void;
     _hasTextProperty(selected: Component[]): boolean;
     _hasProperties(selected: Component[]): boolean;

package/dist/src/property-panel/shapes/shapes.js CHANGED Viewed

@@ -13,9 +13,17 @@ import { keyed } from 'lit/directives/keyed.js';
 import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
 import { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js';
 import { AbstractProperty } from '../abstract-property.js';
+/** A coordinate as the panel shows it: at most two decimals, never the float's full tail. */
+function fmtNumber(value) {
+    const n = typeof value === 'number' ? value : parseFloat(String(value !== null && value !== void 0 ? value : ''));
+    return Number.isFinite(n) ? String(Math.round(n * 100) / 100) : '';
+}
 export class PropertyShapes extends AbstractProperty {
     constructor() {
         super(...arguments);
+        /* The name of the thing being modelled (a board, a figure). Drawn at the top of this tab when
+         * the root is what is selected - the modeller page has no title row of its own any more. */
+        this.heading = '';
         this.bounds = null;
         this.selected = [];
         this._positionExpanded = false;
@@ -27,7 +35,11 @@ export class PropertyShapes extends AbstractProperty {
         var _a, _b, _c;
         const value = this.value || {};
         const { width = '', height = '' } = this.bounds || {};
+        const rootSelected = !!this.selected.length &&
+            typeof this.selected[0].isRootModel === 'function' &&
+            this.selected[0].isRootModel();
         return html `
+      ${this.renderHeading(rootSelected, value)}
       <fieldset>
         <div class="property-grid">
           ${this._isIdentifiable(this.selected)
@@ -78,10 +90,14 @@ export class PropertyShapes extends AbstractProperty {
                 </legend>
                 <div class="property-grid">
-                  <label> <md-icon>arrow_range</md-icon><ox-i18n msgid="label.width">width</ox-i18n> </label>
-                  <input type="number" value-key="bounds.width" .value=${String(width)} />
-                  <label> <md-icon>height</md-icon><ox-i18n msgid="label.height">height</ox-i18n> </label>
-                  <input type="number" value-key="bounds.height" .value=${String(height)} />
+                  <div class="field half" title="width">
+                    <span>W</span>
+                    <input type="number" value-key="bounds.width" .value=${fmtNumber(width)} />
+                  </div>
+                  <div class="field half" title="height">
+                    <span>H</span>
+                    <input type="number" value-key="bounds.height" .value=${fmtNumber(height)} />
+                  </div>
                   ${this.selected.length &&
                 this.selected[0] &&
@@ -89,9 +105,7 @@ export class PropertyShapes extends AbstractProperty {
                 this.selected[0].isRootModel()
                 ? html ``
                 : html `
-                        <label class="rotate">
-                          <md-icon>rotate_90_degrees_cw</md-icon><ox-i18n msgid="label.rotate">rotate</ox-i18n>
-                        </label>
+                        <label class="rotate"><ox-i18n msgid="label.rotate">rotate</ox-i18n></label>
                         <ox-input-angle value-key="rotation" .value=${(_a = value.rotation) !== null && _a !== void 0 ? _a : 0}> </ox-input-angle>
                       `}
                 </div>
@@ -196,28 +210,13 @@ export class PropertyShapes extends AbstractProperty {
                 : ''}
                 <label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
-                <table class="box-padding custom-editor">
-                  <tr>
-                    <td class="slide1"></td>
-                    <td class="slide2"></td>
-                    <td class="slide3"></td>
-                  </tr>
-                  <tr>
-                    <td class="slide4"></td>
-                    <td class="slide5">
-                      <input type="number" value-key="paddingTop" .value=${value.paddingTop || 0} />
-                      <input type="number" value-key="paddingLeft" .value=${value.paddingLeft || 0} />
-                      <input type="number" value-key="paddingRight" .value=${value.paddingRight || 0} />
-                      <input type="number" value-key="paddingBottom" .value=${value.paddingBottom || 0} />
-                    </td>
-                    <td class="slide6"></td>
-                  </tr>
-                  <tr>
-                    <td class="slide7"></td>
-                    <td class="slide8"></td>
-                    <td class="slide9"></td>
-                  </tr>
-                </table>
+                <div class="box-padding custom-editor">
+                  <input class="top" type="number" value-key="paddingTop" .value=${value.paddingTop || 0} />
+                  <input class="left" type="number" value-key="paddingLeft" .value=${value.paddingLeft || 0} />
+                  <div class="inner"></div>
+                  <input class="right" type="number" value-key="paddingRight" .value=${value.paddingRight || 0} />
+                  <input class="bottom" type="number" value-key="paddingBottom" .value=${value.paddingBottom || 0} />
+                </div>
               </div>
             </fieldset>
           `
@@ -267,6 +266,23 @@ export class PropertyShapes extends AbstractProperty {
             : html ``}
     `;
     }
+    renderHeading(rootSelected, value) {
+        var _a;
+        if (rootSelected) {
+            return this.heading ? html `<div heading title=${this.heading}><b>${this.heading}</b></div>` : html ``;
+        }
+        const selected = this.selected || [];
+        if (!selected.length) {
+            return html ``;
+        }
+        if (selected.length > 1) {
+            return html `<div heading><b>${selected.length} items</b></div>`;
+        }
+        const component = selected[0];
+        const kind = String(((_a = component.get) === null || _a === void 0 ? void 0 : _a.call(component, 'type')) || '');
+        const name = String((value === null || value === void 0 ? void 0 : value.id) || (value === null || value === void 0 ? void 0 : value.text) || '');
+        return html `<div heading title=${name || kind}><b>${name || kind}</b>${name ? html `<small>${kind}</small>` : html ``}</div>`;
+    }
     onValueChange(e) {
         var element = e.target;
         var key = element.getAttribute('value-key');
@@ -329,6 +345,36 @@ export class PropertyShapes extends AbstractProperty {
     }
 }
 PropertyShapes.styles = [
+    css `
+      /* What is selected: the board's name for the root, kind and name for a shape. */
+      [heading] {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        padding: 12px 14px 4px;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      [heading] b {
+        font-size: 0.92rem;
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      [heading] small {
+        font-size: 0.7rem;
+        font-weight: 500;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--md-sys-color-outline);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    `,
     PropertyGridStyles,
     BoxPaddingEditorStyles,
     css `
@@ -337,6 +383,9 @@ PropertyShapes.styles = [
 __decorate([
     property({ type: Object })
 ], PropertyShapes.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], PropertyShapes.prototype, "heading", void 0);
 __decorate([
     property({ type: Object })
 ], PropertyShapes.prototype, "bounds", void 0);

package/dist/src/property-panel/shapes/shapes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../src/property-panel/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class PropertyShapes extends AbstractProperty {\n static styles = [\n PropertyGridStyles,\n BoxPaddingEditorStyles,\n css`\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) bounds: BOUNDS \| null = null\n @property({ type: Array }) selected: Component[] = []\n\n @state() private _positionExpanded: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n render() {\n const value = this.value \|\| {}\n const { width = '', height = '' } = this.bounds \|\| {}\n\n return html`\n <fieldset>\n <div class=\"property-grid\">\n ${this._isIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id \|\| ''} />\n `\n : html``}\n ${this._isClassIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class \|\| ''} />\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n <input value-key=\"text\" .value=${value.text \|\| ''} />\n <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n <input value-key=\"textFormat\" .value=${value.textFormat \|\| ''} list=\"format-list\" />\n <datalist id=\"format-list\">\n <option value=\"#,###.\"></option>\n <option value=\"#,###.#\"></option>\n <option value=\"#,###.0\"></option>\n <option value=\"#,##0.#\"></option>\n <option value=\"#,##0.0\"></option>\n <option value=\"#,##0.0%\"></option>\n </datalist>\n `\n : html``}\n ${this._hasProperties(this.selected)\n ? html`\n <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n `\n : html``}\n </div>\n </fieldset>\n\n ${!this._isLine(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label> <md-icon>arrow_range</md-icon><ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n <label> <md-icon>height</md-icon><ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n\n ${this.selected.length &&\n this.selected[0] &&\n typeof this.selected[0].isRootModel === 'function' &&\n this.selected[0].isRootModel()\n ? html``\n : html`\n <label class=\"rotate\">\n <md-icon>rotate_90_degrees_cw</md-icon><ox-i18n msgid=\"label.rotate\">rotate</ox-i18n>\n </label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation ?? 0}> </ox-input-angle>\n `}\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._isPositionable(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\" collapsable ?collapsed=${!this._positionExpanded}>\n <legend\n @click=${(e: Event) => {\n this._positionExpanded = !this._positionExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/shapes/position\" msgid=\"label.position\"\n >position</ox-title-with-help\n >\n <md-icon>${this._positionExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n\n <div class=\"property-grid\">\n <label>Position</label>\n <select value-key=\"position\" .value=${value.position}>\n <option value=\"\"> </option>\n <option value=\"static\">static</option>\n <option value=\"relative\">relative</option>\n <option value=\"absolute\">absolute</option>\n <option value=\"fixed\">fixed</option>\n <option value=\"sticky\">sticky</option>\n <option value=\"popup\">popup (template)</option>\n </select>\n\n <label>Origin</label>\n <select value-key=\"origin\" .value=${value.origin}>\n <option value=\"\"> </option>\n <option value=\"left-top\">left-top</option>\n <option value=\"center-top\">center-top</option>\n <option value=\"right-top\">right-top</option>\n <option value=\"left-middle\">left-middle</option>\n <option value=\"center-middle\">center-middle</option>\n <option value=\"right-middle\">right-middle</option>\n <option value=\"left-bottom\">left-bottom</option>\n <option value=\"center-bottom\">center-bottom</option>\n <option value=\"right-bottom\">right-bottom</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.offset-x\">offset-X</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${String(value.offsetX ?? '')} />\n <label> <ox-i18n msgid=\"label.offset-y\">offset-Y</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${String(value.offsetY ?? '')} />\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n >text box</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n <md-icon data-value=\"left\">format_align_left</md-icon>\n <md-icon data-value=\"center\">format_align_center</md-icon>\n <md-icon data-value=\"right\">format_align_right</md-icon>\n <md-icon data-value=\"justify\">format_align_justify</md-icon>\n </ox-buttons-radio>\n\n <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n <md-icon data-value=\"top\">align_vertical_top</md-icon>\n <md-icon data-value=\"middle\">align_vertical_center</md-icon>\n <md-icon data-value=\"bottom\">align_vertical_bottom</md-icon>\n </ox-buttons-radio>\n\n <input\n id=\"checkbox-support-markdown\"\n type=\"checkbox\"\n value-key=\"supportMarkdown\"\n .checked=${value.supportMarkdown}\n />\n <label for=\"checkbox-support-markdown\">\n <ox-i18n msgid=\"label.support-markdown\">Support Markdown</ox-i18n>\n </label>\n\n <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n\n ${!value.textWrap\n ? html` <label for=\"checkbox-textOverflow\">\n <ox-i18n msgid=\"label.text-overflow\">Text Overflow</ox-i18n>\n </label>\n <select value-key=\"textOverflow\" .value=${value.textOverflow \|\| ''}>\n <option value=\"\" selected>none</option>\n <option value=\"ellipsis\">ellipsis</option>\n <option value=\"clip\">clip</option>\n </select>`\n : ''}\n\n <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n <table class=\"box-padding custom-editor\">\n <tr>\n <td class=\"slide1\"></td>\n <td class=\"slide2\"></td>\n <td class=\"slide3\"></td>\n </tr>\n <tr>\n <td class=\"slide4\"></td>\n <td class=\"slide5\">\n <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop \|\| 0} />\n <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft \|\| 0} />\n <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight \|\| 0} />\n <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom \|\| 0} />\n </td>\n <td class=\"slide6\"></td>\n </tr>\n <tr>\n <td class=\"slide7\"></td>\n <td class=\"slide8\"></td>\n <td class=\"slide9\"></td>\n </tr>\n </table>\n </div>\n </fieldset>\n `\n : html``}\n ${this.selected.length &&\n this.selected[0] &&\n typeof this.selected[0].isRootModel === 'function' &&\n this.selected[0].isRootModel()\n ? html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n >Viewer Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n <select value-key=\"fitMode\" .value=${value.fitMode \|\| 'ratio'}>\n <option value=\"none\">none</option>\n <option value=\"center\">center</option>\n <option value=\"ratio\" selected>ratio</option>\n <option value=\"both\">both</option>\n <option value=\"width\">width</option>\n <option value=\"height\">height</option>\n </select>\n </div>\n </fieldset>\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n >Print Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"rotate\"><ox-i18n msgid=\"label.label-rotation\">Label Rotation</ox-i18n></label>\n <select value-key=\"labelRotation\" .value=${value.labelRotation \|\| 'N'}>\n <option value=\"N\" selected>0°</option>\n <option value=\"B\">90°</option>\n <option value=\"I\">180°</option>\n <option value=\"R\">270°</option>\n </select>\n </div>\n </fieldset>\n `\n : html``}\n `\n }\n\n onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value = this.getValueFromEventTarget(element)\n\n if (key.indexOf('bounds.') == 0) {\n if (isNaN(value)) return\n this.dispatchEvent(\n new CustomEvent('bounds-change', {\n bubbles: true,\n composed: true,\n detail: {\n [key.substr(7)]: value\n }\n })\n )\n } else {\n this.onAfterValueChange(key, value)\n }\n }\n\n _hasTextProperty(selected: Component[]) {\n for (let i = 0; i < selected.length; i++) {\n if (!selected[i] \|\| !selected[i].hasTextProperty) return false\n }\n\n return true\n }\n\n _hasProperties(selected: Component[]) {\n if (\n !selected \|\|\n selected.length == 0 \|\|\n (selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer())\n )\n return false\n\n return true\n }\n\n _isIdentifiable(selected: Component[]) {\n if (\n !selected \|\|\n selected.length == 0 \|\|\n selected.length > 1 \|\|\n !selected[0] \|\|\n (typeof selected[0].isLayer === 'function' && selected[0].isLayer())\n )\n return false\n\n return true\n }\n\n _isClassIdentifiable(selected: Component[]) {\n if (!selected \|\| (selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer())) return false\n\n return true\n }\n\n _isLine(selected: Component[]) {\n if (!selected \|\| !(selected[0] && typeof selected[0].isLine === 'function' && selected[0].isLine())) return false\n\n return true\n }\n\n _isPositionable(selected: Component[]) {\n if (!selected \|\| !(selected[0] && typeof selected[0].isPositionable === 'function' && selected[0].isPositionable()))\n return false\n\n return true\n }\n}\n"]}
1	+ {"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../src/property-panel/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\n/* A coordinate as the panel shows it: at most two decimals, never the float's full tail. /\nfunction fmtNumber(value: unknown): string {\n const n = typeof value === 'number' ? value : parseFloat(String(value ?? ''))\n return Number.isFinite(n) ? String(Math.round(n 100) / 100) : ''\n}\n\nexport class PropertyShapes extends AbstractProperty {\n static styles = [\n css`\n /* What is selected: the board's name for the root, kind and name for a shape. /\n [heading] {\n display: flex;\n align-items: baseline;\n gap: 8px;\n padding: 12px 14px 4px;\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n }\n\n [heading] b {\n font-size: 0.92rem;\n font-weight: 600;\n color: var(--md-sys-color-on-surface);\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [heading] small {\n font-size: 0.7rem;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: var(--md-sys-color-outline);\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `,\n PropertyGridStyles,\n BoxPaddingEditorStyles,\n css`\n `\n ]\n\n @property({ type: Object }) value?: Properties\n / The name of the thing being modelled (a board, a figure). Drawn at the top of this tab when\n * the root is what is selected - the modeller page has no title row of its own any more. */\n @property({ type: String }) heading: string = ''\n @property({ type: Object }) bounds: BOUNDS \| null = null\n @property({ type: Array }) selected: Component[] = []\n\n @state() private _positionExpanded: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n render() {\n const value = this.value \|\| {}\n const { width = '', height = '' } = this.bounds \|\| {}\n\n const rootSelected =\n !!this.selected.length &&\n typeof this.selected[0].isRootModel === 'function' &&\n this.selected[0].isRootModel()\n\n return html`\n ${this.renderHeading(rootSelected, value)}\n <fieldset>\n <div class=\"property-grid\">\n ${this._isIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id \|\| ''} />\n `\n : html``}\n ${this._isClassIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class \|\| ''} />\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n <input value-key=\"text\" .value=${value.text \|\| ''} />\n <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n <input value-key=\"textFormat\" .value=${value.textFormat \|\| ''} list=\"format-list\" />\n <datalist id=\"format-list\">\n <option value=\"#,###.\"></option>\n <option value=\"#,###.#\"></option>\n <option value=\"#,###.0\"></option>\n <option value=\"#,##0.#\"></option>\n <option value=\"#,##0.0\"></option>\n <option value=\"#,##0.0%\"></option>\n </datalist>\n `\n : html``}\n ${this._hasProperties(this.selected)\n ? html`\n <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n `\n : html``}\n </div>\n </fieldset>\n\n ${!this._isLine(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <div class=\"field half\" title=\"width\">\n <span>W</span>\n <input type=\"number\" value-key=\"bounds.width\" .value=${fmtNumber(width)} />\n </div>\n <div class=\"field half\" title=\"height\">\n <span>H</span>\n <input type=\"number\" value-key=\"bounds.height\" .value=${fmtNumber(height)} />\n </div>\n\n ${this.selected.length &&\n this.selected[0] &&\n typeof this.selected[0].isRootModel === 'function' &&\n this.selected[0].isRootModel()\n ? html``\n : html`\n <label class=\"rotate\"><ox-i18n msgid=\"label.rotate\">rotate</ox-i18n></label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation ?? 0}> </ox-input-angle>\n `}\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._isPositionable(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\" collapsable ?collapsed=${!this._positionExpanded}>\n <legend\n @click=${(e: Event) => {\n this._positionExpanded = !this._positionExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/shapes/position\" msgid=\"label.position\"\n >position</ox-title-with-help\n >\n <md-icon>${this._positionExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n\n <div class=\"property-grid\">\n <label>Position</label>\n <select value-key=\"position\" .value=${value.position}>\n <option value=\"\"> </option>\n <option value=\"static\">static</option>\n <option value=\"relative\">relative</option>\n <option value=\"absolute\">absolute</option>\n <option value=\"fixed\">fixed</option>\n <option value=\"sticky\">sticky</option>\n <option value=\"popup\">popup (template)</option>\n </select>\n\n <label>Origin</label>\n <select value-key=\"origin\" .value=${value.origin}>\n <option value=\"\"> </option>\n <option value=\"left-top\">left-top</option>\n <option value=\"center-top\">center-top</option>\n <option value=\"right-top\">right-top</option>\n <option value=\"left-middle\">left-middle</option>\n <option value=\"center-middle\">center-middle</option>\n <option value=\"right-middle\">right-middle</option>\n <option value=\"left-bottom\">left-bottom</option>\n <option value=\"center-bottom\">center-bottom</option>\n <option value=\"right-bottom\">right-bottom</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.offset-x\">offset-X</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${String(value.offsetX ?? '')} />\n <label> <ox-i18n msgid=\"label.offset-y\">offset-Y</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${String(value.offsetY ?? '')} />\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n >text box</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n <md-icon data-value=\"left\">format_align_left</md-icon>\n <md-icon data-value=\"center\">format_align_center</md-icon>\n <md-icon data-value=\"right\">format_align_right</md-icon>\n <md-icon data-value=\"justify\">format_align_justify</md-icon>\n </ox-buttons-radio>\n\n <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n <md-icon data-value=\"top\">align_vertical_top</md-icon>\n <md-icon data-value=\"middle\">align_vertical_center</md-icon>\n <md-icon data-value=\"bottom\">align_vertical_bottom</md-icon>\n </ox-buttons-radio>\n\n <input\n id=\"checkbox-support-markdown\"\n type=\"checkbox\"\n value-key=\"supportMarkdown\"\n .checked=${value.supportMarkdown}\n />\n <label for=\"checkbox-support-markdown\">\n <ox-i18n msgid=\"label.support-markdown\">Support Markdown</ox-i18n>\n </label>\n\n <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n\n ${!value.textWrap\n ? html` <label for=\"checkbox-textOverflow\">\n <ox-i18n msgid=\"label.text-overflow\">Text Overflow</ox-i18n>\n </label>\n <select value-key=\"textOverflow\" .value=${value.textOverflow \|\| ''}>\n <option value=\"\" selected>none</option>\n <option value=\"ellipsis\">ellipsis</option>\n <option value=\"clip\">clip</option>\n </select>`\n : ''}\n\n <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n <div class=\"box-padding custom-editor\">\n <input class=\"top\" type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop \|\| 0} />\n <input class=\"left\" type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft \|\| 0} />\n <div class=\"inner\"></div>\n <input class=\"right\" type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight \|\| 0} />\n <input class=\"bottom\" type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom \|\| 0} />\n </div>\n </div>\n </fieldset>\n `\n : html``}\n ${this.selected.length &&\n this.selected[0] &&\n typeof this.selected[0].isRootModel === 'function' &&\n this.selected[0].isRootModel()\n ? html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n >Viewer Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n <select value-key=\"fitMode\" .value=${value.fitMode \|\| 'ratio'}>\n <option value=\"none\">none</option>\n <option value=\"center\">center</option>\n <option value=\"ratio\" selected>ratio</option>\n <option value=\"both\">both</option>\n <option value=\"width\">width</option>\n <option value=\"height\">height</option>\n </select>\n </div>\n </fieldset>\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n >Print Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"rotate\"><ox-i18n msgid=\"label.label-rotation\">Label Rotation</ox-i18n></label>\n <select value-key=\"labelRotation\" .value=${value.labelRotation \|\| 'N'}>\n <option value=\"N\" selected>0°</option>\n <option value=\"B\">90°</option>\n <option value=\"I\">180°</option>\n <option value=\"R\">270°</option>\n </select>\n </div>\n </fieldset>\n `\n : html``}\n `\n }\n\n private renderHeading(rootSelected: boolean, value: any) {\n if (rootSelected) {\n return this.heading ? html`<div heading title=${this.heading}><b>${this.heading}</b></div>` : html``\n }\n\n const selected = this.selected \|\| []\n if (!selected.length) {\n return html``\n }\n\n if (selected.length > 1) {\n return html`<div heading><b>${selected.length} items</b></div>`\n }\n\n const component: any = selected[0]\n const kind = String(component.get?.('type') \|\| '')\n const name = String(value?.id \|\| value?.text \|\| '')\n\n return html`<div heading title=${name \|\| kind}><b>${name \|\| kind}</b>${name ? html`<small>${kind}</small>` : html``}</div>`\n }\n\n onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value = this.getValueFromEventTarget(element)\n\n if (key.indexOf('bounds.') == 0) {\n if (isNaN(value)) return\n this.dispatchEvent(\n new CustomEvent('bounds-change', {\n bubbles: true,\n composed: true,\n detail: {\n [key.substr(7)]: value\n }\n })\n )\n } else {\n this.onAfterValueChange(key, value)\n }\n }\n\n _hasTextProperty(selected: Component[]) {\n for (let i = 0; i < selected.length; i++) {\n if (!selected[i] \|\| !selected[i].hasTextProperty) return false\n }\n\n return true\n }\n\n _hasProperties(selected: Component[]) {\n if (\n !selected \|\|\n selected.length == 0 \|\|\n (selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer())\n )\n return false\n\n return true\n }\n\n _isIdentifiable(selected: Component[]) {\n if (\n !selected \|\|\n selected.length == 0 \|\|\n selected.length > 1 \|\|\n !selected[0] \|\|\n (typeof selected[0].isLayer === 'function' && selected[0].isLayer())\n )\n return false\n\n return true\n }\n\n _isClassIdentifiable(selected: Component[]) {\n if (!selected \|\| (selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer())) return false\n\n return true\n }\n\n _isLine(selected: Component[]) {\n if (!selected \|\| !(selected[0] && typeof selected[0].isLine === 'function' && selected[0].isLine())) return false\n\n return true\n }\n\n _isPositionable(selected: Component[]) {\n if (!selected \|\| !(selected[0] && typeof selected[0].isPositionable === 'function' && selected[0].isPositionable()))\n return false\n\n return true\n }\n}\n"]}

package/dist/src/property-panel/specifics/specifics.js CHANGED Viewed

@@ -56,14 +56,70 @@ export class PropertySpecific extends ScopedElementsMixin(LitElement) {
 PropertySpecific.styles = [
     PropertyGridStyles,
     css `
-      label {
+      /* The same heading the Shape tab draws: the kind of thing selected, quietly, then the fields. */
+      :host {
+        display: block;
+        padding-bottom: 16px;
+      }
+      :host > label {
         display: flex;
-        margin: 10px;
-        text-align: right;
-        font: bold 14px var(--theme-font);
-        color: var(--md-sys-color-on-primary-container);
-        text-transform: capitalize;
         align-items: center;
+        gap: 6px;
+        padding: 12px 16px 4px;
+        font: 600 0.92rem/1.3 var(--theme-font, Roboto, sans-serif);
+        color: var(--md-sys-color-on-surface);
+        text-transform: capitalize;
+      }
+      :host > label ox-help-icon {
+        --help-icon-color: var(--md-sys-color-outline);
+        --help-icon-opacity: 0.55;
+      }
+      specific-properties-builder {
+        display: block;
+        padding: 0 16px;
+      }
+      /*
+       * The generic editors draw a bordered, white "field" box of their own; here they sit next
+       * to the inspector's quiet tinted fields, so they take the inspector's measures: 24px rows,
+       * no border at rest, hairline on hover, primary on focus, numbers right-aligned.
+       */
+      specific-properties-builder > [property-editor] {
+        margin: 0 0 6px;
+        --property-editor-margin: 0;
+        --property-editor-gap: 6px 10px;
+        --property-editor-label-end: 10;
+        --property-editor-checkbox-end: 12;
+        --property-editor-label-font: 0.74rem/1.3 var(--theme-font, Roboto, sans-serif);
+        --property-editor-label-color: var(--md-sys-color-on-surface-variant);
+        --property-editor-color: var(--md-sys-color-on-surface);
+        --property-editor-border: 1px solid transparent;
+        --property-editor-border-color-hover: var(--md-sys-color-outline-variant);
+        --property-editor-border-color-focus: var(--md-sys-color-primary);
+        --property-editor-background: var(--property-input-background, var(--md-sys-color-surface-container-high));
+        --property-editor-background-focus: var(
+          --property-input-background-focus,
+          var(--md-sys-color-surface-container-lowest)
+        );
+        --property-editor-border-radius: 6px;
+        --property-editor-field-height: 24px;
+        --property-editor-field-padding: 2px 8px;
+        --property-editor-field-font: 0.76rem var(--theme-font, Roboto, sans-serif);
+        --property-editor-select-font-size: 0.76rem;
+        --property-editor-number-align: right;
+        /* Group titles inside the list read like the other tabs' legends. */
+        --legend-font: 600 0.74rem/1.4 var(--theme-font, Roboto, sans-serif);
+        --legend-color: var(--md-sys-color-on-surface);
+        --legend-margin: 14px 0 4px;
+        --legend-padding: 0;
+        --legend-border: 0;
+        --legend-border-radius: 0;
+        --legend-background-color: transparent;
       }
     `
 ];

package/dist/src/property-panel/specifics/specifics.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"specifics.js","sourceRoot":"","sources":["../../../../src/property-panel/specifics/specifics.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,+BAA+B,CAAA;AACtC,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAA;AAE5E,MAAM,OAAO,gBAAiB,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAArE;;~~QAiB8B~~,UAAK,GAAiB,IAAI,CAAA;QAC3B,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;QACjB,mBAAc,GAAU,EAAE,CAAA;QAE7C,uBAAkB,GAAQ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAyCnE,CAAC;IAvCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACnE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACtE,CAAC;IACD,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,6BAA6B,EAAE,yBAAyB;SACzD,CAAA;IACH,CAAC;IACD,MAAM;;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QAClD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;WAEJ,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,wBAAwB,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CAAE,IAAI;;;4CAGnG,KAAK,WAAW,IAAI,CAAC,KAAK,oBAAoB,IAAI,CAAC,cAAc;;KAExG,CAAA;IACH,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QAE3B,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,GAAG,EAAE;YAC9B,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;IACJ,CAAC;;~~AA7DM~~,uBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA~~;;;;;;;;;;KAUF~~;CACF,~~AAbY~~,~~CAaZ~~;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2B;AAC3B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wDAA2B","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/help/ox-help-icon.js'\nimport '../shapes/ox-placeholder-convert-editor.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { i18next } from '@operato/i18n'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { SpecificPropertiesBuilder } from './specific-properties-builder.js'\n\nexport class PropertySpecific extends ScopedElementsMixin(LitElement) {\n static styles = [\n PropertyGridStyles,\n css`\n label {\n display: flex;\n ~~margin~~: ~~10px~~;\n text-~~align~~: right;\n font: ~~bold~~ ~~14px~~ var(--theme-font);\n color: var(--md-sys-color-on-primary-container);\n ~~text~~-~~transform~~: ~~capitalize~~;\n align-~~items~~: ~~center~~;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) scene: Scene \| null = null\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) props: any[] = []\n @property({ type: Array }) propertyEditor: any[] = []\n\n private boundINeedSelected: any = this.onINeedSelected.bind(this)\n\n connectedCallback() {\n super.connectedCallback()\n\n this.addEventListener('i-need-selected', this.boundINeedSelected)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.removeEventListener('i-need-selected', this.boundINeedSelected)\n }\n static get scopedElements() {\n return {\n 'specific-properties-builder': SpecificPropertiesBuilder\n }\n }\n render() {\n const selected = this.selected && this.selected[0]\n const value = this.value \|\| {}\n\n return html`\n <label\n >${value.type ? i18next.t(`component.${value.type}`) : i18next.t('label.mixed-selection')}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon\n ></label>\n\n <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>\n </specific-properties-builder>\n `\n }\n\n private onINeedSelected(e: CustomEvent) {\n e.stopPropagation()\n\n var { callback } = e.detail\n\n this.scene!.undoableChange(() => {\n callback.call(null, this.selected)\n })\n }\n}\n"]}
1	+ {"version":3,"file":"specifics.js","sourceRoot":"","sources":["../../../../src/property-panel/specifics/specifics.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,+BAA+B,CAAA;AACtC,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAA;AAE5E,MAAM,OAAO,gBAAiB,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAArE;;QAyE8B,UAAK,GAAiB,IAAI,CAAA;QAC3B,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;QACjB,mBAAc,GAAU,EAAE,CAAA;QAE7C,uBAAkB,GAAQ,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAyCnE,CAAC;IAvCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACnE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACtE,CAAC;IACD,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,6BAA6B,EAAE,yBAAyB;SACzD,CAAA;IACH,CAAC;IACD,MAAM;;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QAClD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;WAEJ,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,wBAAwB,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CAAE,IAAI;;;4CAGnG,KAAK,WAAW,IAAI,CAAC,KAAK,oBAAoB,IAAI,CAAC,cAAc;;KAExG,CAAA;IACH,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QAE3B,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,GAAG,EAAE;YAC9B,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;IACJ,CAAC;;AArHM,uBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;CACF,AArEY,CAqEZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2B;AAC3B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wDAA2B","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/help/ox-help-icon.js'\nimport '../shapes/ox-placeholder-convert-editor.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { i18next } from '@operato/i18n'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { SpecificPropertiesBuilder } from './specific-properties-builder.js'\n\nexport class PropertySpecific extends ScopedElementsMixin(LitElement) {\n static styles = [\n PropertyGridStyles,\n css`\n / The same heading the Shape tab draws: the kind of thing selected, quietly, then the fields. /\n :host {\n display: block;\n padding-bottom: 16px;\n }\n\n :host > label {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 12px 16px 4px;\n font: 600 0.92rem/1.3 var(--theme-font, Roboto, sans-serif);\n color: var(--md-sys-color-on-surface);\n text-transform: capitalize;\n }\n\n :host > label ox-help-icon {\n --help-icon-color: var(--md-sys-color-outline);\n --help-icon-opacity: 0.55;\n }\n\n specific-properties-builder {\n display: block;\n padding: 0 16px;\n }\n\n /\n * The generic editors draw a bordered, white \"field\" box of their own; here they sit next\n * to the inspector's quiet tinted fields, so they take the inspector's measures: 24px rows,\n * no border at rest, hairline on hover, primary on focus, numbers right-aligned.\n /\n specific-properties-builder > [property-editor] {\n margin: 0 0 6px;\n\n --property-editor-margin: 0;\n --property-editor-gap: 6px 10px;\n --property-editor-label-end: 10;\n --property-editor-checkbox-end: 12;\n --property-editor-label-font: 0.74rem/1.3 var(--theme-font, Roboto, sans-serif);\n --property-editor-label-color: var(--md-sys-color-on-surface-variant);\n --property-editor-color: var(--md-sys-color-on-surface);\n --property-editor-border: 1px solid transparent;\n --property-editor-border-color-hover: var(--md-sys-color-outline-variant);\n --property-editor-border-color-focus: var(--md-sys-color-primary);\n --property-editor-background: var(--property-input-background, var(--md-sys-color-surface-container-high));\n --property-editor-background-focus: var(\n --property-input-background-focus,\n var(--md-sys-color-surface-container-lowest)\n );\n --property-editor-border-radius: 6px;\n --property-editor-field-height: 24px;\n --property-editor-field-padding: 2px 8px;\n --property-editor-field-font: 0.76rem var(--theme-font, Roboto, sans-serif);\n --property-editor-select-font-size: 0.76rem;\n --property-editor-number-align: right;\n\n / Group titles inside the list read like the other tabs' legends. */\n --legend-font: 600 0.74rem/1.4 var(--theme-font, Roboto, sans-serif);\n --legend-color: var(--md-sys-color-on-surface);\n --legend-margin: 14px 0 4px;\n --legend-padding: 0;\n --legend-border: 0;\n --legend-border-radius: 0;\n --legend-background-color: transparent;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) scene: Scene \| null = null\n @property({ type: Array }) selected: Component[] = []\n @property({ type: Array }) props: any[] = []\n @property({ type: Array }) propertyEditor: any[] = []\n\n private boundINeedSelected: any = this.onINeedSelected.bind(this)\n\n connectedCallback() {\n super.connectedCallback()\n\n this.addEventListener('i-need-selected', this.boundINeedSelected)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.removeEventListener('i-need-selected', this.boundINeedSelected)\n }\n static get scopedElements() {\n return {\n 'specific-properties-builder': SpecificPropertiesBuilder\n }\n }\n render() {\n const selected = this.selected && this.selected[0]\n const value = this.value \|\| {}\n\n return html`\n <label\n >${value.type ? i18next.t(`component.${value.type}`) : i18next.t('label.mixed-selection')}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon\n ></label>\n\n <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>\n </specific-properties-builder>\n `\n }\n\n private onINeedSelected(e: CustomEvent) {\n e.stopPropagation()\n\n var { callback } = e.detail\n\n this.scene!.undoableChange(() => {\n callback.call(null, this.selected)\n })\n }\n}\n"]}