npm - @operato/property-panel - Versions diffs - 10.0.0-beta.2 → 10.0.0-beta.21 - Mend

@operato/property-panel 10.0.0-beta.2 → 10.0.0-beta.21

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

package/dist/src/property-panel/data-binding/data-binding-popup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data-binding-popup.js","sourceRoot":"","sources":["../../../../src/property-panel/data-binding/data-binding-popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { DataBindingMapper, Mapping } from './data-binding-mapper.js'\n\ninterface TreeNode {\n key: string\n path: string\n value: any\n type: string\n children?: TreeNode[]\n}\n\nfunction buildDataTree(data: any, prefix = ''): TreeNode[] {\n if (data == null || typeof data !== 'object') return []\n\n return Object.keys(data).map(key => {\n const value = data[key]\n const path = prefix ? `${prefix}.${key}` : key\n const type = Array.isArray(value) ? 'array' : typeof value\n\n return {\n key,\n path,\n value,\n type,\n children: type === 'object' || type === 'array' ? buildDataTree(value, path) : undefined\n }\n })\n}\n\nfunction typeIcon(type: string): string {\n switch (type) {\n case 'string':\n return 'abc'\n case 'number':\n return 'tag'\n case 'boolean':\n return 'toggle_on'\n case 'object':\n return 'data_object'\n case 'array':\n return 'data_array'\n default:\n return 'help_outline'\n }\n}\n\nfunction truncate(val: any, max = 24): string {\n if (val == null) return 'null'\n const s = typeof val === 'object' ? JSON.stringify(val) : String(val)\n return s.length > max ? s.slice(0, max) + '…' : s\n}\n\n@customElement('data-binding-popup')\nexport class DataBindingPopup extends ScopedElementsMixin(LitElement) {\n static get scopedElements() {\n return {\n 'data-binding-mapper': DataBindingMapper\n }\n }\n\n static styles = [\n css`\n :host {\n display: flex;\n width: 1000px;\n height: 600px;\n overflow: hidden;\n font-family: 'Roboto', Arial, sans-serif;\n font-size: 13px;\n color: var(--md-sys-color-on-surface, #1c1b1f);\n }\n\n /* ── Column 1: Mapping List ── */\n [mapping-list] {\n width: 170px;\n min-width: 170px;\n border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n display: flex;\n flex-direction: column;\n background: var(--md-sys-color-surface-container-low, #f7f2fa);\n }\n\n [mapping-list] header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 12px;\n font-weight: 600;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n }\n\n [mapping-list] header md-icon {\n cursor: pointer;\n --md-icon-size: 18px;\n border-radius: 50%;\n padding: 2px;\n }\n\n [mapping-list] header md-icon:hover {\n background: var(--md-sys-color-primary-container, rgba(0, 100, 200, 0.12));\n }\n\n [mapping-items] {\n flex: 1;\n overflow-y: auto;\n }\n\n [mapping-item] {\n padding: 8px 12px;\n cursor: pointer;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.06));\n font-size: 11px;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: background 0.15s;\n }\n\n [mapping-item]:hover {\n background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.08));\n }\n\n [mapping-item][selected] {\n background: var(--md-sys-color-secondary-container, rgba(0, 100, 200, 0.15));\n color: var(--md-sys-color-on-secondary-container, #1d192b);\n }\n\n .status-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .status-dot.complete {\n background: var(--md-sys-color-primary, #6750a4);\n }\n\n .status-dot.partial {\n background: var(--md-sys-color-tertiary, #7d5260);\n }\n\n .status-dot.empty {\n background: var(--md-sys-color-outline, #79747e);\n }\n\n .summary {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n }\n\n [mapping-item] md-icon.delete-btn {\n --md-icon-size: 14px;\n opacity: 0;\n transition: opacity 0.15s;\n cursor: pointer;\n }\n\n [mapping-item]:hover md-icon.delete-btn {\n opacity: 0.6;\n }\n\n [mapping-item] md-icon.delete-btn:hover {\n opacity: 1;\n }\n\n /* ── Column 2: Flow Editor ── */\n [flow-editor] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n [flow-cards] {\n display: flex;\n align-items: stretch;\n gap: 0;\n padding: 16px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n }\n\n .flow-card {\n flex: 1;\n border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));\n border-radius: 8px;\n padding: 10px;\n background: var(--md-sys-color-surface-container, #f3edf7);\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .flow-card-header {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .flow-card-header md-icon {\n --md-icon-size: 14px;\n }\n\n .flow-arrow {\n display: flex;\n align-items: center;\n padding: 0 6px;\n color: var(--md-sys-color-primary, #6750a4);\n font-size: 18px;\n flex-shrink: 0;\n }\n\n .flow-card input,\n .flow-card select {\n width: 100%;\n box-sizing: border-box;\n padding: 4px 6px;\n border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));\n border-radius: 4px;\n font-size: 12px;\n background: var(--md-sys-color-surface, #fffbfe);\n color: var(--md-sys-color-on-surface, #1c1b1f);\n outline: none;\n }\n\n .flow-card input:focus {\n border-color: var(--md-sys-color-primary, #6750a4);\n box-shadow: 0 0 0 1px var(--md-sys-color-primary, #6750a4);\n }\n\n .rule-badge {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .rule-badge[active] {\n background: var(--md-sys-color-primary-container, #eaddff);\n color: var(--md-sys-color-on-primary-container, #21005d);\n }\n\n .rule-badge:not([active]) {\n background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n color: var(--md-sys-color-on-surface-variant, #49454f);\n }\n\n .rule-badge:hover {\n filter: brightness(0.95);\n }\n\n /* ── Rule Config Area ── */\n [rule-config] {\n flex: 1;\n overflow-y: auto;\n padding: 12px 16px;\n display: flex;\n flex-direction: column;\n }\n\n [rule-config] ox-input-code {\n flex: 1;\n min-height: 100px;\n }\n\n [rule-config] .options-row {\n display: flex;\n gap: 16px;\n margin-top: 8px;\n font-size: 12px;\n align-items: center;\n }\n\n [rule-config] .options-row label {\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n }\n\n /* ── Column 3: Inspector ── */\n [inspector] {\n width: 260px;\n min-width: 260px;\n border-left: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n display: flex;\n flex-direction: column;\n background: var(--md-sys-color-surface-container-low, #f7f2fa);\n }\n\n [inspector] header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 12px;\n font-weight: 600;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n }\n\n [inspector] header md-icon {\n --md-icon-size: 16px;\n }\n\n [tree-content] {\n flex: 1;\n overflow-y: auto;\n padding: 4px 0;\n }\n\n .tree-node {\n cursor: pointer;\n user-select: none;\n }\n\n .tree-row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 3px 8px;\n transition: background 0.1s;\n }\n\n .tree-row:hover {\n background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));\n }\n\n .tree-row[selected] {\n background: var(--md-sys-color-secondary-container, rgba(0, 100, 200, 0.15));\n font-weight: 600;\n }\n\n .tree-row md-icon {\n --md-icon-size: 14px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n }\n\n .tree-key {\n font-weight: 500;\n font-size: 12px;\n color: var(--md-sys-color-on-surface, #1c1b1f);\n }\n\n .tree-value {\n font-size: 11px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n margin-left: 4px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .tree-children {\n padding-left: 16px;\n }\n\n /* ── Preview ── */\n [preview-section] {\n border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n padding: 10px 12px;\n }\n\n .preview-label {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n margin-bottom: 6px;\n }\n\n .preview-row {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n padding: 2px 0;\n }\n\n .preview-input {\n color: var(--md-sys-color-tertiary, #7d5260);\n font-family: monospace;\n }\n\n .preview-output {\n color: var(--md-sys-color-primary, #6750a4);\n font-family: monospace;\n font-weight: 600;\n }\n\n /* ── Tab Header ── */\n [tab-header] {\n display: flex;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n }\n\n [tab-header] > div {\n flex: 1;\n text-align: center;\n padding: 8px 0;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n cursor: pointer;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n transition: all 0.15s;\n }\n\n [tab-header] > div[active] {\n color: var(--md-sys-color-primary, #6750a4);\n border-bottom: 2px solid var(--md-sys-color-primary, #6750a4);\n }\n\n [tab-header] > div:not([active]):hover {\n background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.05));\n }\n\n /* ── Flow View ── */\n [flow-view] {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .flow-source-group {\n margin-bottom: 12px;\n }\n\n .flow-source-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 600;\n color: var(--md-sys-color-primary, #6750a4);\n }\n\n .flow-source-header md-icon {\n --md-icon-size: 16px;\n }\n\n .flow-binding-row {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 3px 12px 3px 32px;\n font-size: 11px;\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .flow-binding-row:hover {\n background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));\n }\n\n .flow-accessor {\n color: var(--md-sys-color-tertiary, #7d5260);\n font-family: monospace;\n min-width: 80px;\n }\n\n .flow-target {\n color: var(--md-sys-color-on-surface, #1c1b1f);\n font-weight: 500;\n }\n\n .flow-property {\n color: var(--md-sys-color-primary, #6750a4);\n font-family: monospace;\n }\n\n .flow-rule-tag {\n font-size: 9px;\n padding: 1px 5px;\n border-radius: 8px;\n background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n color: var(--md-sys-color-on-surface-variant, #49454f);\n font-weight: 500;\n text-transform: uppercase;\n }\n\n .flow-section-label {\n padding: 8px 12px 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));\n margin-top: 4px;\n }\n\n .flow-issue {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 3px 12px;\n font-size: 11px;\n color: var(--md-sys-color-error, #b3261e);\n }\n\n .flow-issue md-icon {\n --md-icon-size: 14px;\n color: var(--md-sys-color-error, #b3261e);\n }\n\n .flow-schema-field {\n padding: 2px 12px 2px 32px;\n font-size: 11px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .flow-schema-field code {\n color: var(--md-sys-color-tertiary, #7d5260);\n font-size: 11px;\n }\n\n .flow-schema-field .usages {\n color: var(--md-sys-color-on-surface-variant, #49454f);\n font-size: 10px;\n }\n\n /* ── Empty state ── */\n .empty-state {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, 0.4));\n font-size: 13px;\n }\n `\n ]\n\n @property({ type: Array }) mappings: Mapping[] = []\n @property({ type: Array }) properties: Properties[] = []\n @property({ type: Object }) selected?: any\n\n @state() private _viewMode: 'mappings' | 'flow' = 'mappings'\n @state() private _selectedIndex: number = 0\n @state() private _inspectorMode: 'source-select' | 'source-data' | 'target-select' | 'target-prop' | 'rule-help' = 'source-select'\n @state() private _sourceTree: TreeNode[] = []\n @state() private _expandedPaths: Set<string> = new Set()\n @state() private _previewInput: any = undefined\n @state() private _previewOutput: any = undefined\n\n private get _selected(): any {\n return this.selected\n }\n\n private get _root(): any {\n return this._selected?.root\n }\n\n private get _currentMapping(): Mapping | null {\n return this._selectedIndex < this.mappings.length ? this.mappings[this._selectedIndex] : null\n }\n\n connectedCallback() {\n super.connectedCallback()\n this._refreshPreview()\n }\n\n render() {\n const mapping = this._currentMapping\n\n return html`\n ${this._renderLeftPanel()}\n\n ${this._viewMode === 'mappings'\n ? html`\n <div flow-editor>\n ${mapping ? this._renderFlowCards(mapping) : html`<div class=\"empty-state\">Select or add a mapping</div>`}\n ${mapping ? this._renderRuleConfig(mapping) : nothing}\n </div>\n ${this._renderInspector(mapping)}\n `\n : html`\n <div flow-view>\n ${this._renderFlowOverview()}\n </div>\n `}\n `\n }\n\n /* ── Left Panel: Tab Header + Mapping List or Flow ── */\n private _renderLeftPanel() {\n return html`\n <div mapping-list>\n <div tab-header>\n <div ?active=${this._viewMode === 'mappings'} @click=${() => (this._viewMode = 'mappings')}>Mappings</div>\n <div ?active=${this._viewMode === 'flow'} @click=${() => (this._viewMode = 'flow')}>Flow</div>\n </div>\n ${this._viewMode === 'mappings' ? this._renderMappingItems() : nothing}\n </div>\n `\n }\n\n private _renderMappingItems() {\n return html`\n <header>\n <span>${this.mappings.length} mappings</span>\n <md-icon @click=${() => this._addMapping()} title=\"Add mapping\">add</md-icon>\n </header>\n <div mapping-items>\n ${this.mappings.map(\n (m, i) => html`\n <div mapping-item ?selected=${i === this._selectedIndex} @click=${() => this._selectMapping(i)}>\n <span class=\"status-dot ${this._mappingStatus(m)}\"></span>\n <span class=\"summary\">${this._mappingSummary(m, i)}</span>\n <md-icon\n class=\"delete-btn\"\n @click=${(e: Event) => {\n e.stopPropagation()\n this._deleteMapping(i)\n }}\n title=\"Delete\"\n >close</md-icon\n >\n </div>\n `\n )}\n </div>\n `\n }\n\n /* ── Column 2: Flow Cards ── */\n private _renderFlowCards(mapping: Mapping) {\n return html`\n <div flow-cards>\n \n <div class=\"flow-card\">\n <div class=\"flow-card-header\"><md-icon>input</md-icon> SOURCE</div>\n <input\n type=\"text\"\n placeholder=\"(self)\"\n .value=${mapping.source || ''}\n @focus=${() => {\n this._inspectorMode = 'source-select'\n }}\n @change=${(e: Event) => this._updateMapping({ source: (e.target as HTMLInputElement).value })}\n />\n <input\n id=\"accessor-input\"\n type=\"text\"\n placeholder=\"accessor\"\n .value=${mapping.accessor || ''}\n @focus=${() => {\n this._inspectorMode = 'source-data'\n this._refreshSourceTree()\n }}\n @change=${(e: Event) => this._updateMapping({ accessor: (e.target as HTMLInputElement).value })}\n />\n </div>\n\n\n \n <div class=\"flow-arrow\">→</div>\n\n \n <div class=\"flow-card\" @click=${() => (this._inspectorMode = 'rule-help')}>\n <div class=\"flow-card-header\"><md-icon>tune</md-icon> RULE</div>\n <div style=\"display:flex;flex-wrap:wrap;gap:4px\">\n ${['value', 'map', 'range', 'eval'].map(\n r => html`\n <span\n class=\"rule-badge\"\n ?active=${mapping.rule === r}\n @click=${(e: Event) => { e.stopPropagation(); this._changeRule(r as any) }}\n >${r}</span\n >\n `\n )}\n </div>\n ${mapping.rule !== 'value' && mapping.param\n ? html`<div style=\"font-size:10px;color:var(--md-sys-color-on-surface-variant,#49454f);margin-top:2px\">${this._ruleSummary(mapping)}</div>`\n : nothing}\n </div>\n\n \n <div class=\"flow-arrow\">→</div>\n\n \n <div class=\"flow-card\">\n <div class=\"flow-card-header\"><md-icon>output</md-icon> TARGET</div>\n <input\n type=\"text\"\n placeholder=\"(self)\"\n .value=${mapping.target || ''}\n @focus=${() => (this._inspectorMode = 'target-select')}\n @change=${(e: Event) => this._updateMapping({ target: (e.target as HTMLInputElement).value })}\n />\n <input\n id=\"property-input\"\n type=\"text\"\n placeholder=\"property\"\n .value=${mapping.property || ''}\n @focus=${() => (this._inspectorMode = 'target-prop')}\n @change=${(e: Event) => this._updateMapping({ property: (e.target as HTMLInputElement).value })}\n />\n </div>\n\n </div>\n `\n }\n\n /* ── Rule Config ── */\n private _renderRuleConfig(mapping: Mapping) {\n return html`\n <div rule-config @focusin=${() => (this._inspectorMode = 'rule-help')}>\n ${mapping.rule === 'map'\n ? html`\n <data-binding-value-map\n .value=${mapping.param || {}}\n .valuetype=${'string'}\n active\n @change=${(e: Event) => this._updateMapping({ param: (e.target as any).value })}\n ></data-binding-value-map>\n `\n : nothing}\n ${mapping.rule === 'range'\n ? html`\n <data-binding-value-range\n .value=${mapping.param || {}}\n .valuetype=${'string'}\n active\n @change=${(e: Event) => this._updateMapping({ param: (e.target as any).value })}\n ></data-binding-value-range>\n `\n : nothing}\n ${mapping.rule === 'eval'\n ? html`\n <ox-input-code\n .value=${mapping.param || ''}\n language=\"javascript\"\n active\n @change=${(e: Event) => this._updateMapping({ param: (e.target as any).value })}\n ></ox-input-code>\n `\n : nothing}\n\n <div class=\"options-row\">\n <label>\n <input type=\"checkbox\" .checked=${mapping.partial === true} @change=${(e: Event) =>\n this._updateMapping({ partial: (e.target as HTMLInputElement).checked })} />\n Partial\n </label>\n <label>\n <input type=\"checkbox\" .checked=${mapping.ndnsp === true} @change=${(e: Event) =>\n this._updateMapping({ ndnsp: (e.target as HTMLInputElement).checked })} />\n No Data No Spreading\n </label>\n </div>\n </div>\n `\n }\n\n /* ── Column 3: Inspector ── */\n private _renderInspector(mapping: Mapping | null) {\n const modeLabel: Record<string, string> = {\n 'source-select': 'Source Components',\n 'source-data': 'Source Data',\n 'target-select': 'Target Selector',\n 'target-prop': 'Target Properties',\n 'rule-help': 'Rule Guide'\n }\n const modeIcon: Record<string, string> = {\n 'source-select': 'list',\n 'source-data': 'input',\n 'target-select': 'list',\n 'target-prop': 'output',\n 'rule-help': 'help_outline'\n }\n\n return html`\n <div inspector>\n <header>\n <md-icon>${modeIcon[this._inspectorMode]}</md-icon>\n ${modeLabel[this._inspectorMode]}\n </header>\n\n <div tree-content>\n ${this._inspectorMode === 'source-select' ? this._renderComponentList('source') : nothing}\n ${this._inspectorMode === 'source-data' ? this._renderSourceTree() : nothing}\n ${this._inspectorMode === 'target-select' ? this._renderComponentList('target') : nothing}\n ${this._inspectorMode === 'target-prop' ? this._renderTargetTree() : nothing}\n ${this._inspectorMode === 'rule-help' ? this._renderRuleHelp() : nothing}\n </div>\n\n ${this._renderPreviewBar(mapping)}\n </div>\n `\n }\n\n private _renderComponentList(mode: 'source' | 'target') {\n // root의 indexMap(Map)에서 직접 컴포넌트 ID 목록을 가져온다\n let ids: { value: string; description: string }[] = []\n try {\n const root = this._root\n if (root?.indexMap) {\n for (const [id, components] of root.indexMap.entries()) {\n const comp = Array.isArray(components) ? components[0] : components\n ids.push({ value: `#${id}`, description: comp?.model?.type || '' })\n }\n ids.sort((a, b) => a.value.localeCompare(b.value))\n }\n } catch {\n /* ignore */\n }\n\n const selectHandler = (value: string) => {\n if (mode === 'source') {\n this._updateMapping({ source: value === '(self)' ? '' : value })\n this._inspectorMode = 'source-data'\n this._refreshSourceTree()\n // accessor input에 자동 포커스\n this.updateComplete.then(() => {\n (this.renderRoot.querySelector('#accessor-input') as HTMLInputElement)?.focus()\n })\n } else {\n this._updateMapping({ target: value })\n this._inspectorMode = 'target-prop'\n // property input에 자동 포커스\n this.updateComplete.then(() => {\n (this.renderRoot.querySelector('#property-input') as HTMLInputElement)?.focus()\n })\n }\n }\n\n // target 전용 특수 셀렉터\n const targetSpecials = [\n { value: '(self)', icon: 'person', label: '(self)', desc: '자기 자신' },\n { value: '(children)', icon: 'account_tree', label: '(children)', desc: '자식 컴포넌트' },\n { value: '(key)', icon: 'key', label: '(key)', desc: '키 기반 매핑' },\n { value: '[propkey]', icon: 'dynamic_feed', label: '[propkey]', desc: '속성-키 매핑' }\n ]\n\n const sourceSpecials = [{ value: '(self)', icon: 'person', label: '(self)', desc: '자기 자신' }]\n\n const specials = mode === 'target' ? targetSpecials : sourceSpecials\n\n return html`\n ${specials.map(\n s => html`\n <div class=\"tree-node\">\n <div class=\"tree-row\" @click=${() => selectHandler(s.value)}>\n <md-icon style=\"--md-icon-size:14px\">${s.icon}</md-icon>\n <span class=\"tree-key\">${s.label}</span>\n <span class=\"tree-value\">${s.desc}</span>\n </div>\n </div>\n `\n )}\n ${ids.length\n ? html`\n <div style=\"padding:6px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--md-sys-color-on-surface-variant,#49454f);border-top:1px solid var(--md-sys-color-outline-variant,rgba(0,0,0,0.1));margin-top:4px\">\n Components\n </div>\n ${ids.map(\n ({ value, description }) => html`\n <div class=\"tree-node\">\n <div class=\"tree-row\" @click=${() => selectHandler(value)}>\n <md-icon style=\"--md-icon-size:14px\">widgets</md-icon>\n <span class=\"tree-key\">${value}</span>\n <span class=\"tree-value\">${description}</span>\n </div>\n </div>\n `\n )}\n `\n : nothing}\n `\n }\n\n private _renderSourceTree() {\n return html`\n ${this._sourceTree.length > 0\n ? this._renderTreeNodes(this._sourceTree, 'accessor')\n : html`<div class=\"empty-state\" style=\"font-size:12px;height:auto;padding:12px\">No data available</div>`}\n ${this._renderJsonataHelp()}\n `\n }\n\n private _renderJsonataHelp() {\n const examples = [\n { syntax: 'name', desc: '단일 속성' },\n { syntax: 'address.city', desc: '중첩 속성' },\n { syntax: '$[0]', desc: '루트 배열 첫 번째' },\n { syntax: '$[0].name', desc: '루트 배열 요소의 속성' },\n { syntax: 'orders[0]', desc: '배열 첫 번째' },\n { syntax: 'orders[-1]', desc: '배열 마지막' },\n { syntax: 'orders[price>100]', desc: '필터' },\n { syntax: 'orders.price', desc: '배열 내 속성 추출' },\n { syntax: '$sum(orders.price)', desc: '합계' },\n { syntax: '$count(items)', desc: '개수' },\n { syntax: '$string(value)', desc: '문자열 변환' },\n { syntax: '$number(text)', desc: '숫자 변환' },\n { syntax: '$now()', desc: '현재 시각 (ISO)' },\n { syntax: 'a ? a : b', desc: '조건식' }\n ]\n\n return html`\n <div style=\"border-top:1px solid var(--md-sys-color-outline-variant,rgba(0,0,0,0.1));margin-top:8px;padding:8px\">\n <div style=\"font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--md-sys-color-on-surface-variant,#49454f);margin-bottom:4px\">\n JSONata Syntax\n <a href=\"https://docs.jsonata.org/overview\" target=\"_blank\" rel=\"noopener\"\n style=\"font-size:10px;font-weight:400;text-decoration:none;color:var(--md-sys-color-primary,#6750a4);margin-left:6px\"\n >docs ↗</a>\n </div>\n ${examples.map(\n ex => html`\n <div style=\"display:flex;gap:6px;padding:2px 0;font-size:11px;cursor:pointer;border-radius:3px\"\n @click=${() => this._updateMapping({ accessor: ex.syntax })}>\n <code style=\"color:var(--md-sys-color-primary,#6750a4);min-width:110px;font-size:11px\">${ex.syntax}</code>\n <span style=\"color:var(--md-sys-color-on-surface-variant,#49454f)\">${ex.desc}</span>\n </div>\n `\n )}\n </div>\n `\n }\n\n private _renderTargetTree() {\n const nodes: TreeNode[] = this.properties.map(p => ({\n key: p.name || p.label,\n path: p.name || p.label,\n value: null,\n type: 'property'\n }))\n\n // GLTF 컴포넌트: nodes, animations 항상 표시\n const isGltf = this._selected?.model?.type === 'gltf-object'\n\n if (isGltf) {\n // nodes (Mesh만 표시)\n const allNodeNames = (this._selected?.nodeNames as string[]) || []\n const realObject = this._selected?.realObject\n const meshNames = realObject\n ? allNodeNames.filter(name => realObject.getNode?.(name)?.isMesh)\n : allNodeNames\n const nodeChildren = meshNames.map(name => ({\n key: name,\n path: `nodes.${name}`,\n value: null,\n type: 'object',\n children: ['color', 'visible', 'opacity', 'emissive', 'emissiveIntensity', 'scale'].map(prop => ({\n key: prop,\n path: `nodes.${name}.${prop}`,\n value: null,\n type: 'property'\n }))\n }))\n\n nodes.push({\n key: 'nodes',\n path: 'nodes',\n value: null,\n type: 'object',\n children: nodeChildren\n })\n\n // animations (애니메이션 제어)\n const animNames = (this._selected?.animationNames as string[]) || []\n const animChildren = animNames.map(name => ({\n key: name,\n path: `animations.${name}`,\n value: null,\n type: 'object',\n children: ['play', 'speed', 'weight', 'loop'].map(prop => ({\n key: prop,\n path: `animations.${name}.${prop}`,\n value: null,\n type: 'property'\n }))\n }))\n\n nodes.push({\n key: 'animations',\n path: 'animations',\n value: null,\n type: 'object',\n children: animChildren\n })\n }\n\n return html`${this._renderTreeNodes(nodes, 'property')}`\n }\n\n private _renderTreeNodes(nodes: TreeNode[], targetField: 'accessor' | 'property'): any {\n const currentPath = targetField === 'accessor'\n ? this._currentMapping?.accessor\n : this._currentMapping?.property\n\n return nodes.map(\n node => html`\n <div class=\"tree-node\">\n <div\n class=\"tree-row\"\n ?selected=${currentPath === node.path}\n @click=${() => {\n if (node.children) {\n const newSet = new Set(this._expandedPaths)\n newSet.has(node.path) ? newSet.delete(node.path) : newSet.add(node.path)\n this._expandedPaths = newSet\n } else {\n this._selectTreePath(node.path, targetField)\n }\n }}\n >\n ${node.children\n ? html`<md-icon>${this._expandedPaths.has(node.path) ? 'expand_more' : 'chevron_right'}</md-icon>`\n : html`<md-icon style=\"--md-icon-size:14px\">${typeIcon(node.type)}</md-icon>`}\n <span class=\"tree-key\">${node.key}</span>\n ${node.value != null && !node.children ? html`<span class=\"tree-value\">${truncate(node.value)}</span>` : nothing}\n </div>\n ${node.children && this._expandedPaths.has(node.path)\n ? html`<div class=\"tree-children\">\n ${node.children.length > 0\n ? this._renderTreeNodes(node.children, targetField)\n : html`<div style=\"padding:4px 8px;font-size:11px;color:var(--md-sys-color-on-surface-variant,#49454f)\">(empty)</div>`}\n </div>`\n : nothing}\n </div>\n `\n )\n }\n\n private _renderPreviewBar(mapping: Mapping | null) {\n if (!mapping) return nothing\n\n this._refreshPreview()\n\n return html`\n <div preview-section>\n <div class=\"preview-label\">Preview</div>\n ${this._previewInput !== undefined\n ? html`\n <div class=\"preview-row\">\n <md-icon style=\"--md-icon-size:12px;color:var(--md-sys-color-tertiary,#7d5260)\">input</md-icon>\n <span class=\"preview-input\">${truncate(this._previewInput, 32)}</span>\n <span class=\"flow-arrow\" style=\"font-size:12px;padding:0 4px\">→</span>\n <span class=\"preview-output\">${truncate(this._previewOutput, 32)}</span>\n </div>\n `\n : html`<div style=\"font-size:11px;color:var(--md-sys-color-on-surface-variant,#49454f)\">No data</div>`}\n </div>\n `\n }\n\n /* ── Actions ── */\n private _selectMapping(index: number) {\n this._selectedIndex = index\n this._inspectorMode = 'source-select'\n }\n\n private _addMapping() {\n this.mappings = [...this.mappings, { rule: 'value' } as Mapping]\n this._selectedIndex = this.mappings.length - 1\n this._dispatchChange()\n }\n\n private _deleteMapping(index: number) {\n this.mappings = this.mappings.filter((_, i) => i !== index)\n if (this._selectedIndex >= this.mappings.length) {\n this._selectedIndex = Math.max(0, this.mappings.length - 1)\n }\n this._dispatchChange()\n }\n\n private _updateMapping(patch: Partial<Mapping>) {\n const mapping = this._currentMapping\n if (!mapping) return\n\n const updated = { ...mapping, ...patch }\n const mappings = [...this.mappings]\n mappings[this._selectedIndex] = updated\n this.mappings = mappings\n this._dispatchChange()\n this._refreshPreview()\n }\n\n private _changeRule(rule: 'value' | 'map' | 'range' | 'eval') {\n const mapping = this._currentMapping\n if (!mapping) return\n\n // 기존 param 보존\n this._updateMapping({ rule, param: rule === mapping.rule ? mapping.param : undefined })\n }\n\n private _selectTreePath(path: string, targetField: 'accessor' | 'property') {\n if (targetField === 'accessor') {\n this._updateMapping({ accessor: path })\n } else {\n this._updateMapping({ property: path })\n }\n }\n\n\n private _findComponent(idOrSelector: string): any {\n if (!idOrSelector || idOrSelector === '(self)') return this._selected\n const id = idOrSelector.startsWith('#') ? idOrSelector.substring(1) : idOrSelector\n return this._root?.findById(id)\n }\n\n private _refreshSourceTree() {\n const mapping = this._currentMapping\n if (!mapping) {\n this._sourceTree = []\n return\n }\n\n const sourceComponent = this._findComponent(mapping.source || '')\n const data = sourceComponent?.data\n this._sourceTree = data ? buildDataTree(data) : []\n }\n\n private _refreshPreview() {\n const mapping = this._currentMapping\n if (!mapping) {\n this._previewInput = undefined\n this._previewOutput = undefined\n return\n }\n\n try {\n const sourceComponent = this._findComponent(mapping.source || '')\n\n const data = sourceComponent?.data\n if (data == null) {\n this._previewInput = undefined\n this._previewOutput = undefined\n return\n }\n\n // Simple accessor extraction\n let input = data\n if (mapping.accessor) {\n const keys = mapping.accessor.split('.')\n for (const k of keys) {\n if (input == null) break\n input = input[k]\n }\n }\n this._previewInput = input\n\n // Simple rule preview (no full evaluator import for now)\n if (mapping.rule === 'value') {\n this._previewOutput = input\n } else if (mapping.rule === 'map' && mapping.param) {\n this._previewOutput = mapping.param[String(input)] ?? mapping.param['default'] ?? input\n } else if (mapping.rule === 'range' && mapping.param) {\n this._previewOutput = undefined\n for (const [range, val] of Object.entries(mapping.param)) {\n if (range === 'default') continue\n const [from, to] = range.split('~').map(Number)\n const num = Number(input)\n if (!isNaN(num) && num >= from && (isNaN(to) || to === 0 || num < to)) {\n this._previewOutput = val\n break\n }\n }\n if (this._previewOutput === undefined) {\n this._previewOutput = (mapping.param as any)['default']\n }\n } else {\n this._previewOutput = '(eval)'\n }\n } catch {\n this._previewInput = undefined\n this._previewOutput = '(error)'\n }\n }\n\n private _renderRuleHelp() {\n const rule = this._currentMapping?.rule || 'value'\n\n const helpContent: Record<string, { title: string; desc: string; examples: { code: string; desc: string }[] }> = {\n value: {\n title: 'Value (Pass-through)',\n desc: '소스 데이터를 그대로 타겟 속성에 전달합니다. 타입 변환 없이 원본 값이 설정됩니다.',\n examples: [\n { code: 'source.data.name → target.text', desc: '텍스트 전달' },\n { code: 'source.data → target.data', desc: '객체 전체 전달' },\n { code: 'source.data.active → target.hidden', desc: '불리언 전달' }\n ]\n },\n map: {\n title: 'Map (Key-Value Mapping)',\n desc: '입력 값을 키로 사용하여 미리 정의된 값으로 변환합니다. 일치하는 키가 없으면 default 값을 사용합니다.',\n examples: [\n { code: 'active → \"green\"', desc: '상태값 → 색상' },\n { code: 'true → \"운전중\"', desc: '불리언 → 텍스트' },\n { code: 'default → \"gray\"', desc: '미매칭 시 기본값' }\n ]\n },\n range: {\n title: 'Range (범위 매핑)',\n desc: '숫자 입력값이 어떤 범위에 속하는지에 따라 값을 변환합니다. from~to 형식으로 범위를 지정합니다 (from 이상, to 미만).',\n examples: [\n { code: '0~50 → \"blue\"', desc: '0 이상 50 미만' },\n { code: '50~80 → \"green\"', desc: '50 이상 80 미만' },\n { code: '80~ → \"red\"', desc: '80 이상 (상한 없음)' },\n { code: 'default → \"gray\"', desc: '범위 밖 기본값' }\n ]\n },\n eval: {\n title: 'Eval (JavaScript)',\n desc: 'JavaScript 코드로 값을 변환합니다. value 변수로 입력값에 접근하고, return으로 결과를 반환합니다. targets[0]으로 타겟 컴포넌트에 접근 가능합니다.',\n examples: [\n { code: 'return value * 100', desc: '숫자 변환' },\n { code: 'return value > 80 ? \"red\" : \"green\"', desc: '조건 분기' },\n { code: 'return `${value}%`', desc: '문자열 포맷팅' },\n { code: 'return Math.round(value * 10) / 10', desc: '소수점 반올림' },\n { code: 'return targets[0].get(\"text\")', desc: '타겟 속성 참조' }\n ]\n }\n }\n\n const help = helpContent[rule]\n\n return html`\n <div style=\"padding:8px\">\n <div style=\"font-size:13px;font-weight:600;color:var(--md-sys-color-primary,#6750a4);margin-bottom:6px\">\n ${help.title}\n </div>\n <div style=\"font-size:12px;color:var(--md-sys-color-on-surface,#1c1b1f);line-height:1.5;margin-bottom:10px\">\n ${help.desc}\n </div>\n <div style=\"font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--md-sys-color-on-surface-variant,#49454f);margin-bottom:4px\">\n Examples\n </div>\n ${help.examples.map(\n ex => html`\n <div style=\"padding:3px 0;font-size:11px;display:flex;gap:6px\">\n <code style=\"color:var(--md-sys-color-primary,#6750a4);min-width:50%;font-size:11px\">${ex.code}</code>\n <span style=\"color:var(--md-sys-color-on-surface-variant,#49454f)\">${ex.desc}</span>\n </div>\n `\n )}\n </div>\n `\n }\n\n /* ── Flow Overview ── */\n private _renderFlowOverview() {\n const root = this._root\n if (!root) return html`<div class=\"empty-state\">No scene</div>`\n\n // 전체 보드 순회하여 매핑 수집\n interface FlowBinding {\n ownerID: string\n ownerType: string\n source: string\n accessor: string\n target: string\n property: string\n rule: string\n }\n\n const bindings: FlowBinding[] = []\n const allIds = new Set<string>()\n const sourcesUsed = new Set<string>()\n\n // 모든 컴포넌트 순회\n const traverse = (component: any) => {\n const id = component.model?.id\n if (id) allIds.add(id)\n\n const mappings = component.model?.mappings\n if (mappings && Array.isArray(mappings)) {\n for (const m of mappings) {\n if (!m || !m.target || !m.property) continue\n\n const source = m.source || '(self)'\n const sourceKey = source === '(self)' ? (id || '(self)') : source.replace(/^#/, '')\n sourcesUsed.add(sourceKey)\n\n bindings.push({\n ownerID: id || '(anonymous)',\n ownerType: component.model?.type || '',\n source: sourceKey,\n accessor: m.accessor || '',\n target: m.target,\n property: m.property,\n rule: m.rule || 'value'\n })\n }\n }\n\n if (component.components) {\n for (const child of component.components) {\n traverse(child)\n }\n }\n }\n\n traverse(root)\n\n // 소스별 그룹핑\n const bySource = new Map<string, FlowBinding[]>()\n for (const b of bindings) {\n const key = b.source\n if (!bySource.has(key)) bySource.set(key, [])\n bySource.get(key)!.push(b)\n }\n\n // 소스별 기대 스키마 추출\n const schemaBySource = new Map<string, Map<string, string[]>>()\n for (const [source, bs] of bySource.entries()) {\n const fields = new Map<string, string[]>()\n for (const b of bs) {\n if (!b.accessor) continue\n const usages = fields.get(b.accessor) || []\n usages.push(`${b.target}.${b.property}`)\n fields.set(b.accessor, usages)\n }\n if (fields.size > 0) schemaBySource.set(source, fields)\n }\n\n // 바인딩 없는 ID 컴포넌트\n const unboundIds = [...allIds].filter(id => {\n const isSource = sourcesUsed.has(id)\n const isTarget = bindings.some(b => b.target === `#${id}` || b.ownerID === id)\n return !isSource && !isTarget\n })\n\n return html`\n ${bySource.size === 0\n ? html`<div class=\"empty-state\" style=\"height:auto;padding:20px\">No data bindings in this board</div>`\n : nothing}\n\n ${[...bySource.entries()].map(\n ([source, bs]) => html`\n <div class=\"flow-source-group\">\n <div class=\"flow-source-header\">\n <md-icon>sensors</md-icon>\n ${source}\n </div>\n\n ${bs.map(\n b => html`\n <div class=\"flow-binding-row\">\n <span class=\"flow-accessor\">${b.accessor || '(all)'}</span>\n <span style=\"color:var(--md-sys-color-outline,#79747e)\">→</span>\n <span class=\"flow-target\">${b.target}</span>\n <span class=\"flow-property\">.${b.property}</span>\n <span class=\"flow-rule-tag\">${b.rule}</span>\n </div>\n `\n )}\n\n ${schemaBySource.has(source)\n ? html`\n <div style=\"padding:4px 12px 2px 32px;font-size:10px;font-weight:600;color:var(--md-sys-color-on-surface-variant,#49454f)\">\n Expected Fields\n </div>\n ${[...schemaBySource.get(source)!.entries()].map(\n ([field, usages]) => html`\n <div class=\"flow-schema-field\">\n <code>${field}</code>\n <span class=\"usages\">(${usages.length} usage${usages.length > 1 ? 's' : ''})</span>\n </div>\n `\n )}\n `\n : nothing}\n </div>\n `\n )}\n\n ${unboundIds.length > 0\n ? html`\n <div class=\"flow-section-label\">Unbound Components</div>\n ${unboundIds.map(\n id => html`\n <div class=\"flow-issue\">\n <md-icon>info</md-icon>\n <span>#${id} — no bindings</span>\n </div>\n `\n )}\n `\n : nothing}\n `\n }\n\n private _ruleSummary(mapping: Mapping): string {\n if (mapping.rule === 'map' && mapping.param) {\n const keys = Object.keys(mapping.param)\n return `${keys.length} entries`\n }\n if (mapping.rule === 'range' && mapping.param) {\n const keys = Object.keys(mapping.param).filter(k => k !== 'default')\n return `${keys.length} ranges`\n }\n if (mapping.rule === 'eval' && mapping.param) {\n return `${String(mapping.param).length} chars`\n }\n return ''\n }\n\n private _mappingStatus(m: any): string {\n if (!m || (!m.target && !m.property)) return 'empty'\n if (m.target && m.property && m.rule) return 'complete'\n return 'partial'\n }\n\n private _mappingSummary(m: any, i: number): string {\n if (!m || (!m.target && !m.property)) return `#${i + 1} (empty)`\n const parts: string[] = []\n if (m.accessor) parts.push(m.accessor)\n parts.push('→')\n if (m.property) parts.push(m.property)\n return parts.join(' ')\n }\n\n private _dispatchChange() {\n this.dispatchEvent(\n new CustomEvent('mappings-change', {\n bubbles: true,\n composed: true,\n detail: { mappings: this.mappings.filter(m => m && m.property) }\n })\n )\n }\n}\n"]}

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

@@ -30,6 +30,7 @@ export declare class PropertyDataBinding extends PropertyDataBinding_base {
     };
     render(): import("lit-html").TemplateResult<1>;
     _setMappingIndex(idx: number): void;
+    _openBindingPopup(): void;
     _clearDataBindingMapper(): void;
     _copyDataBindingMapper(): void;
     _pasteDataBindingMapper(): Promise<void>;

package/dist/src/property-panel/data-binding/data-binding.js CHANGED Viewed

@@ -11,6 +11,8 @@ import { css, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { openPopup } from '@operato/layout';
+import { i18next } from '@operato/i18n';
 import { AbstractProperty } from '../abstract-property.js';
 import { DataBindingMapper } from './data-binding-mapper.js';
 var clipboard = '{}';
@@ -121,10 +123,16 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
       </fieldset>
       <fieldset>
-        <legend>
+        <legend style="box-sizing:border-box;width:100%">
           <ox-title-with-help topic="board-modeller/data-spread" msgid="label.data-spread"
             >Data Spread</ox-title-with-help
           >
+          <md-icon
+            style="float:right;font-size:medium;margin:0;cursor:pointer"
+            @click=${() => this._openBindingPopup()}
+            title="open in popup (D)"
+            >open_in_new</md-icon
+          >
         </legend>
         <div id="tab-header">
@@ -183,6 +191,29 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx);
         this._onTabScroll();
     }
+    _openBindingPopup() {
+        import('./data-binding-popup.js');
+        const value = this.value || { mappings: [] };
+        const template = html `
+      <data-binding-popup
+        .mappings=${[...(value.mappings || [])]}
+        .properties=${PROPS}
+        .scene=${this.scene}
+        @mappings-change=${(e) => {
+            this.dispatchEvent(new CustomEvent('property-change', {
+                bubbles: true,
+                composed: true,
+                detail: { mappings: e.detail.mappings }
+            }));
+        }}
+      ></data-binding-popup>
+    `;
+        openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('label.data-spread')
+        });
+    }
     _clearDataBindingMapper() {
         var _a;
         var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
@@ -242,7 +273,7 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         }
         /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */
         var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
-        if (mapping.target && mapping.property && mapping.rule) {
+        if (mapping.property) {
             mappings[this.mappingIndex] = mapping;
             var mappingIdx = this.mappingIndex;
             this._afterRender = () => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-binding.js","sourceRoot":"","sources":["../../../../src/property-panel/data-binding/data-binding.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\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/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { DataBindingMapper } from './data-binding-mapper.js'\n\nvar clipboard = '{}'\n\nconst PROPS = [\n '',\n 'text',\n ['fillStyle', 'fill style'],\n ['strokeStyle', 'stroke style'],\n ['fontColor', 'font color'],\n 'value',\n 'data',\n 'source',\n 'hidden',\n 'started',\n 'play',\n ['ref', 'reference'],\n 'action',\n 'options',\n 'rotate',\n 'dimension',\n 'location',\n 'accessor',\n 'appendum',\n 'tag',\n ['tap', '(tap)'],\n '(action)'\n].map(prop => {\n return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] }\n})\n\nexport class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {\n static styles = [\n PropertyGridStyles,\n css`\n #tab-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\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 border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n\n ox-buttons-radio {\n flex: 1;\n height: 25px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 1px 1px 0 1px;\n text-align: center;\n\n display: flex;\n padding: 0;\n box-sizing: border-box;\n\n width: 0; / limit width /\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;\n margin: 0;\n color: #fff;\n font-size: 13px;\n max-width: 25px;\n min-width: 25px;\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 ox-input-data {\n height: 300px;\n border-radius: var(--spacing-small);\n }\n\n div[binding] {\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-style: solid;\n border-color: rgba(0, 0, 0, 0.2);\n border-image: initial;\n border-width: 0px 1px;\n padding: 7px 5px 2px 5px;\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 data-binding-mapper {\n --things-select: {\n min-width: 50%;\n margin-bottom: 10px;\n padding: 3px 20px 2px 5px;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n font-size: 15px;\n font-weight: 300;\n -webkit-appearance: none;\n };\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n @state() mappingIndex: number = 0\n @state() _afterRender?: Function \| null\n @state() _dataExpanded: boolean = false\n\n @query('#tabs') tabs!: HTMLElement\n @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n private mapping: Properties = {}\n\n get mappings() {\n return this.value?.mappings \|\| []\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n\n this.tabContainer.addEventListener('scroll', () => {\n this._onTabScroll()\n })\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 'data-binding-mapper': DataBindingMapper\n }\n }\n\n render() {\n const value = this.value \|\| {\n mappings: []\n }\n\n return html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/data-binding\" msgid=\"label.identifier\"\n >identifier</ox-title-with-help\n >\n </legend>\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id \|\| ''} />\n\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class \|\| ''} />\n\n <label> <ox-i18n msgid=\"label.tag\">Tag</ox-i18n> </label>\n <input value-key=\"tag\" .value=${value.tag \|\| ''} />\n\n <label> <ox-i18n msgid=\"label.template-prefix\">Template Prefix</ox-i18n> </label>\n <input value-key=\"templatePrefix\" .value=${value.templatePrefix \|\| ''} />\n\n <input id=\"checkbox-ndns\" type=\"checkbox\" value-key=\"ndns\" .checked=${value.ndns} />\n <label for=\"checkbox-ndns\"> <ox-i18n msgid=\"label.ndns\">No Data No Show</ox-i18n> </label>\n\n <input id=\"checkbox-sensitive\" type=\"checkbox\" value-key=\"sensitive\" .checked=${value.sensitive} />\n <label for=\"checkbox-sensitive\">\n <ox-i18n msgid=\"label.intent-sensitive\">Intent Sensitive</ox-i18n>\n </label>\n\n <input id=\"checkbox-persistent\" type=\"checkbox\" value-key=\"persistent\" .checked=${value.persistent} />\n <label for=\"checkbox-persistent\">\n <ox-i18n msgid=\"label.persistent-data\">Persistent Data</ox-i18n>\n </label>\n </div>\n </fieldset>\n\n <fieldset collapsable ?collapsed=${!this._dataExpanded}>\n <legend\n @click=${() => {\n this._dataExpanded = !this._dataExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/initial-data\" msgid=\"label.initial-data\"\n >initial value</ox-title-with-help\n >\n <md-icon>${this._dataExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n <ox-input-data value-key=\"data\" .value=${value.data}> </ox-input-data>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/data-spread\" msgid=\"label.data-spread\"\n >Data Spread</ox-title-with-help\n >\n </legend>\n\n <div id=\"tab-header\">\n <md-icon\n id=\"tab-nav-left-button\"\n @click=${() => {\n this._onTabScrollNavLeft()\n }}\n disabled\n >chevron_left</md-icon\n >\n\n <ox-buttons-radio\n id=\"tabs\"\n .value=${String(this.mappingIndex)}\n @change=${(e: Event) => {\n e.stopPropagation()\n this._setMappingIndex((e.target as any).value)\n }}\n >\n ${this.mappings.map((m: string, i: number) => html` <div data-value=${i} data-mapping>${i + 1}</div> `)}\n <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>\n </ox-buttons-radio>\n\n <md-icon\n id=\"tab-nav-right-button\"\n @click=${(e: Event) => {\n this._onTabScrollNavRight()\n }}\n disabled\n >chevron_right</md-icon\n >\n </div>\n\n <div binding>\n <md-icon style=\"font-size:19px\" @click=${() => this._clearDataBindingMapper()} title=\"delete current tab\"\n >delete_forever</md-icon\n >\n <md-icon @click=${() => this._pasteDataBindingMapper()} title=\"replace current tab\">content_paste</md-icon>\n <md-icon style=\"font-size:17px\" @click=${() => this._copyDataBindingMapper()} title=\"copy current tab\"\n >content_copy</md-icon\n >\n </div>\n\n <data-binding-mapper\n @value-change=${(e: CustomEvent) => this._onMappingChanged(e)}\n .scene=${this.scene}\n .mapping=${(value.mappings && value.mappings[this.mappingIndex]) \|\| {}}\n .properties=${PROPS}\n >\n </data-binding-mapper>\n </fieldset>\n `\n }\n\n _setMappingIndex(idx: number) {\n this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n\n this._onTabScroll()\n }\n\n _clearDataBindingMapper() {\n var mappings = [...(this.value?.mappings \|\| [])]\n mappings.splice(this.mappingIndex, 1)\n this.onAfterValueChange(\n 'mappings',\n mappings.filter(m => !!m)\n )\n }\n\n _copyDataBindingMapper() {\n clipboard = JSON.stringify(this.mappings[this.mappingIndex])\n }\n\n async _pasteDataBindingMapper() {\n var index = this.mappingIndex\n var mappings = [...(this.value?.mappings \|\| [])]\n mappings[this.mappingIndex] = JSON.parse(clipboard)\n\n this.onAfterValueChange('mappings', mappings)\n\n setTimeout(() => {\n this._setMappingIndex(index)\n }, 100)\n }\n\n async onValueChanged() {\n await this.updateComplete\n\n if (this._afterRender) {\n this._afterRender()\n } else {\n this._setMappingIndex(0)\n }\n\n this._afterRender = null\n }\n\n onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n var value = this.getValueFromEventTarget(element)\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: value\n }\n\n this.onAfterValueChange(key, value)\n }\n\n get tabContainer() {\n return this.tabs\n }\n\n async _onMappingChanged(e: CustomEvent) {\n var mapping = (e.target as any).mapping\n\n / data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 /\n if (mapping && mapping.target) {\n this.scene &&\n this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c: any, i: any) => {\n if (i == 0) c.trigger('decotagreset')\n c.trigger('decotag', {})\n })\n }\n\n / mapping의 모든 속성이 편집되면, 모델에 반영한다. */\n var mappings = [...(this.value?.mappings \|\| [])]\n\n if (mapping.target && mapping.property && mapping.rule) {\n mappings[this.mappingIndex] = mapping\n\n var mappingIdx = this.mappingIndex\n this._afterRender = () => {\n this._setMappingIndex(mappingIdx)\n this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n }\n\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: {\n mappings: mappings.filter(m => !!m)\n }\n })\n )\n\n await this.requestUpdate()\n } else if (!mapping.target && !mapping.property) {\n const { accessor, source } = e.detail?.changed \|\| {}\n\n // accessor나 source를 입력중인 경우 tabIndex Change 방지\n if (!accessor && !source) {\n mappings[this.mappingIndex] = null\n var nextMappingIdx = Math.max(this.mappingIndex - 1, 0)\n this._afterRender = () => {\n this._setMappingIndex(nextMappingIdx)\n }\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: {\n mappings: mappings.filter(m => !!m)\n }\n })\n )\n }\n }\n }\n\n _onTabScroll() {\n if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.setAttribute('disabled', '')\n }\n // left-end\n else if (this.tabContainer.scrollLeft == 0) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n // right-end\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"]}
1	+ {"version":3,"file":"data-binding.js","sourceRoot":"","sources":["../../../../src/property-panel/data-binding/data-binding.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\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/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { 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 { DataBindingMapper } from './data-binding-mapper.js'\n\nvar clipboard = '{}'\n\nconst PROPS = [\n '',\n 'text',\n ['fillStyle', 'fill style'],\n ['strokeStyle', 'stroke style'],\n ['fontColor', 'font color'],\n 'value',\n 'data',\n 'source',\n 'hidden',\n 'started',\n 'play',\n ['ref', 'reference'],\n 'action',\n 'options',\n 'rotate',\n 'dimension',\n 'location',\n 'accessor',\n 'appendum',\n 'tag',\n ['tap', '(tap)'],\n '(action)'\n].map(prop => {\n return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] }\n})\n\nexport class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {\n static styles = [\n PropertyGridStyles,\n css`\n #tab-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\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 border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n\n ox-buttons-radio {\n flex: 1;\n height: 25px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 1px 1px 0 1px;\n text-align: center;\n\n display: flex;\n padding: 0;\n box-sizing: border-box;\n\n width: 0; / limit width /\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;\n margin: 0;\n color: #fff;\n font-size: 13px;\n max-width: 25px;\n min-width: 25px;\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 ox-input-data {\n height: 300px;\n border-radius: var(--spacing-small);\n }\n\n div[binding] {\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-style: solid;\n border-color: rgba(0, 0, 0, 0.2);\n border-image: initial;\n border-width: 0px 1px;\n padding: 7px 5px 2px 5px;\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 data-binding-mapper {\n --things-select: {\n min-width: 50%;\n margin-bottom: 10px;\n padding: 3px 20px 2px 5px;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.15);\n font-size: 15px;\n font-weight: 300;\n -webkit-appearance: none;\n };\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n @state() mappingIndex: number = 0\n @state() _afterRender?: Function \| null\n @state() _dataExpanded: boolean = false\n\n @query('#tabs') tabs!: HTMLElement\n @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n private mapping: Properties = {}\n\n get mappings() {\n return this.value?.mappings \|\| []\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n\n this.tabContainer.addEventListener('scroll', () => {\n this._onTabScroll()\n })\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 'data-binding-mapper': DataBindingMapper\n }\n }\n\n render() {\n const value = this.value \|\| {\n mappings: []\n }\n\n return html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/data-binding\" msgid=\"label.identifier\"\n >identifier</ox-title-with-help\n >\n </legend>\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id \|\| ''} />\n\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class \|\| ''} />\n\n <label> <ox-i18n msgid=\"label.tag\">Tag</ox-i18n> </label>\n <input value-key=\"tag\" .value=${value.tag \|\| ''} />\n\n <label> <ox-i18n msgid=\"label.template-prefix\">Template Prefix</ox-i18n> </label>\n <input value-key=\"templatePrefix\" .value=${value.templatePrefix \|\| ''} />\n\n <input id=\"checkbox-ndns\" type=\"checkbox\" value-key=\"ndns\" .checked=${value.ndns} />\n <label for=\"checkbox-ndns\"> <ox-i18n msgid=\"label.ndns\">No Data No Show</ox-i18n> </label>\n\n <input id=\"checkbox-sensitive\" type=\"checkbox\" value-key=\"sensitive\" .checked=${value.sensitive} />\n <label for=\"checkbox-sensitive\">\n <ox-i18n msgid=\"label.intent-sensitive\">Intent Sensitive</ox-i18n>\n </label>\n\n <input id=\"checkbox-persistent\" type=\"checkbox\" value-key=\"persistent\" .checked=${value.persistent} />\n <label for=\"checkbox-persistent\">\n <ox-i18n msgid=\"label.persistent-data\">Persistent Data</ox-i18n>\n </label>\n </div>\n </fieldset>\n\n <fieldset collapsable ?collapsed=${!this._dataExpanded}>\n <legend\n @click=${() => {\n this._dataExpanded = !this._dataExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/initial-data\" msgid=\"label.initial-data\"\n >initial value</ox-title-with-help\n >\n <md-icon>${this._dataExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n <ox-input-data value-key=\"data\" .value=${value.data}> </ox-input-data>\n </fieldset>\n\n <fieldset>\n <legend style=\"box-sizing:border-box;width:100%\">\n <ox-title-with-help topic=\"board-modeller/data-spread\" msgid=\"label.data-spread\"\n >Data Spread</ox-title-with-help\n >\n <md-icon\n style=\"float:right;font-size:medium;margin:0;cursor:pointer\"\n @click=${() => this._openBindingPopup()}\n title=\"open in popup (D)\"\n >open_in_new</md-icon\n >\n </legend>\n\n <div id=\"tab-header\">\n <md-icon\n id=\"tab-nav-left-button\"\n @click=${() => {\n this._onTabScrollNavLeft()\n }}\n disabled\n >chevron_left</md-icon\n >\n\n <ox-buttons-radio\n id=\"tabs\"\n .value=${String(this.mappingIndex)}\n @change=${(e: Event) => {\n e.stopPropagation()\n this._setMappingIndex((e.target as any).value)\n }}\n >\n ${this.mappings.map((m: string, i: number) => html` <div data-value=${i} data-mapping>${i + 1}</div> `)}\n <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>\n </ox-buttons-radio>\n\n <md-icon\n id=\"tab-nav-right-button\"\n @click=${(e: Event) => {\n this._onTabScrollNavRight()\n }}\n disabled\n >chevron_right</md-icon\n >\n </div>\n\n <div binding>\n <md-icon style=\"font-size:19px\" @click=${() => this._clearDataBindingMapper()} title=\"delete current tab\"\n >delete_forever</md-icon\n >\n <md-icon @click=${() => this._pasteDataBindingMapper()} title=\"replace current tab\">content_paste</md-icon>\n <md-icon style=\"font-size:17px\" @click=${() => this._copyDataBindingMapper()} title=\"copy current tab\"\n >content_copy</md-icon\n >\n </div>\n\n <data-binding-mapper\n @value-change=${(e: CustomEvent) => this._onMappingChanged(e)}\n .scene=${this.scene}\n .mapping=${(value.mappings && value.mappings[this.mappingIndex]) \|\| {}}\n .properties=${PROPS}\n >\n </data-binding-mapper>\n </fieldset>\n `\n }\n\n _setMappingIndex(idx: number) {\n this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n\n this._onTabScroll()\n }\n\n _openBindingPopup() {\n import('./data-binding-popup.js')\n\n const value = this.value \|\| { mappings: [] }\n\n const template = html`\n <data-binding-popup\n .mappings=${[...(value.mappings \|\| [])]}\n .properties=${PROPS}\n .scene=${this.scene}\n @mappings-change=${(e: CustomEvent) => {\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: { mappings: e.detail.mappings }\n })\n )\n }}\n ></data-binding-popup>\n `\n\n openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('label.data-spread')\n })\n }\n\n _clearDataBindingMapper() {\n var mappings = [...(this.value?.mappings \|\| [])]\n mappings.splice(this.mappingIndex, 1)\n this.onAfterValueChange(\n 'mappings',\n mappings.filter(m => !!m)\n )\n }\n\n _copyDataBindingMapper() {\n clipboard = JSON.stringify(this.mappings[this.mappingIndex])\n }\n\n async _pasteDataBindingMapper() {\n var index = this.mappingIndex\n var mappings = [...(this.value?.mappings \|\| [])]\n mappings[this.mappingIndex] = JSON.parse(clipboard)\n\n this.onAfterValueChange('mappings', mappings)\n\n setTimeout(() => {\n this._setMappingIndex(index)\n }, 100)\n }\n\n async onValueChanged() {\n await this.updateComplete\n\n if (this._afterRender) {\n this._afterRender()\n } else {\n this._setMappingIndex(0)\n }\n\n this._afterRender = null\n }\n\n onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n var value = this.getValueFromEventTarget(element)\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: value\n }\n\n this.onAfterValueChange(key, value)\n }\n\n get tabContainer() {\n return this.tabs\n }\n\n async _onMappingChanged(e: CustomEvent) {\n var mapping = (e.target as any).mapping\n\n / data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 /\n if (mapping && mapping.target) {\n this.scene &&\n this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c: any, i: any) => {\n if (i == 0) c.trigger('decotagreset')\n c.trigger('decotag', {})\n })\n }\n\n / mapping의 모든 속성이 편집되면, 모델에 반영한다. */\n var mappings = [...(this.value?.mappings \|\| [])]\n\n if (mapping.property) {\n mappings[this.mappingIndex] = mapping\n\n var mappingIdx = this.mappingIndex\n this._afterRender = () => {\n this._setMappingIndex(mappingIdx)\n this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n }\n\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: {\n mappings: mappings.filter(m => !!m)\n }\n })\n )\n\n await this.requestUpdate()\n } else if (!mapping.target && !mapping.property) {\n const { accessor, source } = e.detail?.changed \|\| {}\n\n // accessor나 source를 입력중인 경우 tabIndex Change 방지\n if (!accessor && !source) {\n mappings[this.mappingIndex] = null\n var nextMappingIdx = Math.max(this.mappingIndex - 1, 0)\n this._afterRender = () => {\n this._setMappingIndex(nextMappingIdx)\n }\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: {\n mappings: mappings.filter(m => !!m)\n }\n })\n )\n }\n }\n }\n\n _onTabScroll() {\n if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.setAttribute('disabled', '')\n }\n // left-end\n else if (this.tabContainer.scrollLeft == 0) {\n this.tabNavLeftButton.setAttribute('disabled', '')\n this.tabNavRightButton.removeAttribute('disabled')\n }\n // right-end\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"]}

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

@@ -37,7 +37,7 @@ export class PropertySpecific extends ScopedElementsMixin(LitElement) {
         const value = this.value || {};
         return html `
       <label
-        >${i18next.t(`component.${value.type}`)}<ox-help-icon .topic=${(_a = selected === null || selected === void 0 ? void 0 : selected.nature) === null || _a === void 0 ? void 0 : _a.help}></ox-help-icon
+        >${value.type ? i18next.t(`component.${value.type}`) : i18next.t('label.mixed-selection')}<ox-help-icon .topic=${(_a = selected === null || selected === void 0 ? void 0 : selected.nature) === null || _a === void 0 ? void 0 : _a.help}></ox-help-icon
       ></label>
       <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>

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;AAEtC,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,OAAO,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,IAAI,EAAE,CAAC,wBAAwB,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CAAE,IAAI;;;~~4CAGjD~~,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'\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 >${i18next.t(`component.${value.type}`)}<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;AAEtC,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'\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"]}

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

@@ -156,6 +156,7 @@ export class PropertyStyles extends AbstractProperty {
                     <div class="arrow-type begin-sharp-arrow" value="sharp-arrow" option></div>
                     <div class="arrow-type begin-diamond" value="diamond" option></div>
                     <div class="arrow-type begin-oval" value="oval" option></div>
+                    <div class="arrow-type begin-cross" value="cross" option></div>
                   </ox-popup-list>
                 </ox-select>
@@ -195,6 +196,7 @@ export class PropertyStyles extends AbstractProperty {
                     <div class="arrow-type end-sharp-arrow" value="sharp-arrow" option></div>
                     <div class="arrow-type end-diamond" value="diamond" option></div>
                     <div class="arrow-type end-oval" value="oval" option></div>
+                    <div class="arrow-type end-cross" value="cross" option></div>
                   </ox-popup-list>
                 </ox-select>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/property-panel/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-fill-style.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/font/ox-font-selector.js'\nimport '@operato/i18n/ox-i18n.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\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 @property({ type: Boolean, attribute: 'is-line' }) isLine: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n\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 fontColor,\n letterSpacing,\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-title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-title-with-help>\n </legend>\n <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n >text style</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label>\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-title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n >fill style</ox-title-with-help\n >\n </legend>\n\n <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"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\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"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/property-panel/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-fill-style.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/font/ox-font-selector.js'\nimport '@operato/i18n/ox-i18n.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\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 @property({ type: Boolean, attribute: 'is-line' }) isLine: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n\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 fontColor,\n letterSpacing,\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-title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-title-with-help>\n </legend>\n <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n >text style</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label>\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-title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n >fill style</ox-title-with-help\n >\n </legend>\n\n <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"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\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 <div class=\"arrow-type begin-cross\" value=\"cross\" 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 <div class=\"arrow-type end-cross\" value=\"cross\" 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"]}

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

@@ -15,8 +15,14 @@ export declare class PropertyScene3D extends AbstractProperty {
     scene: Scene | null;
     render(): import("lit-html").TemplateResult<1>;
     private _renderMode;
-    private _renderCamera;
+    private _renderBookmarks;
+    private _longPressTimer?;
+    private _pressTarget?;
+    private _onBookmarkMouseDown;
+    private _onBookmarkMouseUp;
+    private _bookmarkAction;
     private _renderRenderer;
+    private _renderSky;
     private _renderHemisphereLight;
     private _renderKeyLight;
     private _renderLightingPresets;