npm - @operato/property-panel - Versions diffs - 10.0.0-beta.6 → 10.0.0-beta.60 - Mend

@operato/property-panel 10.0.0-beta.6 → 10.0.0-beta.60

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"event-handlers-popup.js","sourceRoot":"","sources":["../../../../src/property-panel/event-handlers/event-handlers-popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * EventHandlers popup — N 핸들러 large editor. data-binding-popup 의 형제.\n *\n * 2-column layout:\n * Left: handler list — add / duplicate / disable / reorder / delete\n * Right: 선택된 handler 의 mapper (큰 code editor 영역)\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js'\nimport { EventHandlersHelp } from './event-handlers-help.js'\n\n@customElement('event-handlers-popup')\nexport class EventHandlersPopup extends ScopedElementsMixin(LitElement) {\n static get scopedElements() {\n return {\n 'event-handlers-mapper': EventHandlersMapper,\n 'event-handlers-help': EventHandlersHelp\n }\n }\n\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n width: 1400px;\n height: 680px;\n overflow: hidden;\n font-family: 'Roboto', Arial, sans-serif;\n font-size: 13px;\n color: var(--md-sys-color-on-surface, #1c1b1f);\n background: var(--md-sys-color-surface, #fff);\n }\n\n [handler-list] {\n width: 240px;\n min-width: 240px;\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 [handler-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 [handler-list] header md-icon {\n cursor: pointer;\n --md-icon-size: 18px;\n border-radius: 4px;\n padding: 2px;\n }\n\n [handler-list] header md-icon:hover {\n background: rgba(0, 0, 0, 0.05);\n }\n\n [handler-list] ul {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n flex: 1;\n }\n\n [handler-list] li {\n padding: 8px 10px;\n cursor: pointer;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.08));\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n [handler-list] li[active] {\n background: var(--md-sys-color-secondary-container, #e8def8);\n color: var(--md-sys-color-on-secondary-container, #1d192b);\n }\n\n [handler-list] li[disabled] {\n opacity: 0.5;\n font-style: italic;\n }\n\n [handler-list] li:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n\n [handler-list] li .meta {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n }\n\n [handler-list] li .trigger {\n font-weight: 600;\n font-size: 12px;\n }\n\n [handler-list] li .summary {\n font-size: 11px;\n opacity: 0.7;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: 2px;\n }\n\n [handler-list] li md-icon {\n --md-icon-size: 16px;\n opacity: 0.5;\n cursor: pointer;\n padding: 3px;\n border-radius: 4px;\n flex-shrink: 0;\n }\n\n [handler-list] li md-icon:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.05);\n }\n\n [handler-list] li md-icon.danger:hover {\n color: var(--md-sys-color-error, #b3261e);\n }\n\n [handler-list] [empty] {\n padding: 24px 12px;\n text-align: center;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n opacity: 0.6;\n font-size: 12px;\n }\n\n [editor] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n padding: 16px 20px;\n background: var(--md-sys-color-surface, #fff);\n }\n\n [editor] [empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n color: var(--md-sys-color-on-surface-variant, #49454f);\n font-size: 13px;\n opacity: 0.6;\n }\n\n [editor] event-handlers-mapper {\n min-height: 100%;\n /* popup 에서는 위에 toolbar 가 없다 — 상하 모두 둥근 모서리로 균형. */\n border-radius: 6px;\n }\n\n [help] {\n width: 320px;\n min-width: 320px;\n max-width: 320px;\n display: flex;\n flex-direction: column;\n }\n `\n ]\n\n @property({ type: Array }) handlers: EventHandlerSpec[] = []\n @property({ type: Object }) scene?: Scene\n @state() selectedIndex: number = 0\n\n render() {\n const handlers = this.handlers ?? []\n const current = handlers[this.selectedIndex]\n\n return html`\n <div handler-list>\n <header>\n <span><ox-i18n msgid=\"label.handlers\">Handlers</ox-i18n> (${handlers.length})</span>\n <md-icon @click=${() => this._addHandler()} title=\"add\">add</md-icon>\n </header>\n ${handlers.length === 0\n ? html`<div empty><ox-i18n msgid=\"label.no-handlers\">No handlers — add one</ox-i18n></div>`\n : html`<ul>${handlers.map((h, i) => this._renderListItem(h, i, handlers.length))}</ul>`}\n </div>\n\n <div editor>\n ${current\n ? html`\n <event-handlers-mapper\n .handler=${current}\n .scene=${this.scene}\n @value-change=${(e: CustomEvent) => this._onHandlerChanged(e)}\n ></event-handlers-mapper>\n `\n : html`<div empty><ox-i18n msgid=\"label.select-or-add-handler\">Select or add a handler</ox-i18n></div>`}\n </div>\n\n <div help>\n <event-handlers-help\n .handler=${current}\n @insert-snippet=${(e: CustomEvent) => this._onInsertSnippet(e)}\n ></event-handlers-help>\n </div>\n `\n }\n\n private _renderListItem(h: EventHandlerSpec, i: number, total: number) {\n return html`\n <li\n ?active=${i === this.selectedIndex}\n ?disabled=${h.disabled}\n @click=${() => (this.selectedIndex = i)}\n >\n <div class=\"meta\">\n <span class=\"trigger\">${h.trigger}${h.disabled ? ' (off)' : ''}</span>\n <span class=\"summary\">${this._summarize(h)}</span>\n </div>\n <md-icon\n @click=${(e: Event) => this._toggleDisabled(i, e)}\n title=${h.disabled ? 'enable' : 'disable'}\n >${h.disabled ? 'toggle_off' : 'toggle_on'}</md-icon>\n <md-icon\n @click=${(e: Event) => this._duplicateHandler(i, e)}\n title=\"duplicate\"\n >content_copy</md-icon>\n <md-icon\n @click=${(e: Event) => this._moveHandler(i, -1, e)}\n title=\"move up\"\n ?style=${i === 0 ? 'opacity:0.2;pointer-events:none' : ''}\n >arrow_upward</md-icon>\n <md-icon\n @click=${(e: Event) => this._moveHandler(i, +1, e)}\n title=\"move down\"\n ?style=${i === total - 1 ? 'opacity:0.2;pointer-events:none' : ''}\n >arrow_downward</md-icon>\n <md-icon\n class=\"danger\"\n @click=${(e: Event) => this._removeHandler(i, e)}\n title=\"delete\"\n >delete</md-icon>\n </li>\n `\n }\n\n private _summarize(h: EventHandlerSpec): string {\n if (h.action === 'script') {\n const c = (h.code || '').replace(/\\s+/g, ' ').trim()\n return 'script · ' + (c.length > 60 ? c.slice(0, 60) + '…' : (c || '(empty)'))\n }\n return [h.action || '(none)', h.target ? `→${h.target}` : ''].filter(Boolean).join(' ')\n }\n\n private _addHandler() {\n const next: EventHandlerSpec = { trigger: 'click', action: '' }\n this.handlers = [...(this.handlers || []), next]\n this.selectedIndex = this.handlers.length - 1\n this._dispatch()\n }\n\n private _duplicateHandler(idx: number, e: Event) {\n e.stopPropagation()\n const original = this.handlers[idx]\n if (!original) return\n const copy: EventHandlerSpec = JSON.parse(JSON.stringify(original))\n const next = [...(this.handlers || [])]\n next.splice(idx + 1, 0, copy)\n this.handlers = next\n this.selectedIndex = idx + 1\n this._dispatch()\n }\n\n private _toggleDisabled(idx: number, e: Event) {\n e.stopPropagation()\n const next = [...(this.handlers || [])]\n next[idx] = { ...next[idx], disabled: !next[idx].disabled }\n this.handlers = next\n this._dispatch()\n }\n\n private _moveHandler(idx: number, delta: -1 | 1, e: Event) {\n e.stopPropagation()\n const next = [...(this.handlers || [])]\n const newIdx = idx + delta\n if (newIdx < 0 || newIdx >= next.length) return\n const [m] = next.splice(idx, 1)\n next.splice(newIdx, 0, m)\n this.handlers = next\n if (this.selectedIndex === idx) this.selectedIndex = newIdx\n this._dispatch()\n }\n\n private _removeHandler(idx: number, e: Event) {\n e.stopPropagation()\n const next = [...(this.handlers || [])]\n next.splice(idx, 1)\n this.handlers = next\n this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, next.length - 1))\n this._dispatch()\n }\n\n private _onHandlerChanged(e: CustomEvent) {\n const handler = e.detail?.handler as EventHandlerSpec\n if (!handler) return\n const next = [...(this.handlers || [])]\n next[this.selectedIndex] = handler\n this.handlers = next\n this._dispatch()\n }\n\n /**\n * help pane 의 snippet 버튼 → 현재 선택 handler 의 code 에 *append* (덮어쓰지\n * 않음). action 이 script 가 아니면 자동으로 script 로 전환 + code 초기화.\n */\n private _onInsertSnippet(e: CustomEvent) {\n const snippet = e.detail?.code\n if (typeof snippet !== 'string' || !snippet) return\n const cur = this.handlers[this.selectedIndex]\n if (!cur) return\n const isScript = cur.action === 'script'\n const baseCode = isScript ? (cur.code || '') : ''\n const nextCode = baseCode ? baseCode.replace(/\\s*$/, '') + '\\n\\n' + snippet : snippet\n const nextHandler: EventHandlerSpec = {\n ...cur,\n action: 'script',\n code: nextCode\n }\n const next = [...this.handlers]\n next[this.selectedIndex] = nextHandler\n this.handlers = next\n this._dispatch()\n }\n\n private _dispatch() {\n // action 이 (none) — 즉 빈 문자열 — 인 핸들러는 외부 모델에 포함하지 않는다.\n // UI 안에서는 placeholder 로 남겨두고, 사용자가 action 을 선택하면 그제서야\n // 저장 모델에 포함된다.\n const valid = (this.handlers || []).filter(h => !!h && !!h.action)\n this.dispatchEvent(\n new CustomEvent('handlers-change', {\n bubbles: true,\n composed: true,\n detail: { handlers: valid }\n })\n )\n }\n}\n"]}

package/dist/src/property-panel/event-handlers/event-handlers.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers panel — 컴포넌트의 `state.eventHandlers[]` 편집기.
+ *
+ * 데이터바인딩 panel 의 형제로 *완전 분리*. 데이터바인딩은 데이터 흐름 전용,
+ * eventHandlers 는 사용자 액션 (tap / hover / 등) 의 first-class 핸들러 등록.
+ *
+ * data-binding 패턴 그대로 — tabs (N handlers) + handler mapper + add/delete/copy/paste.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/help/ox-title-with-help.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@operato/i18n/ox-i18n.js';
+import { PropertyValues } from 'lit';
+import type { Properties, Scene } from '@hatiolab/things-scene';
+import { AbstractProperty } from '../abstract-property.js';
+import { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js';
+declare const PropertyEventHandlers_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class PropertyEventHandlers extends PropertyEventHandlers_base {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene?: Scene;
+    handlerIndex: number;
+    _afterRender?: Function | null;
+    tabs: HTMLElement;
+    tabNavLeftButton: HTMLElement;
+    tabNavRightButton: HTMLElement;
+    /**
+     * 두 속성 통합 — 신규 `eventHandlers` 우선, 없으면 legacy `event` 객체를
+     * *read-only* 변환해 표시. 사용자가 수정 시 `eventHandlers` 에만 저장 — legacy
+     * 는 손대지 않음 (옛 코드 호환 / rollback 안전망).
+     */
+    get handlers(): EventHandlerSpec[];
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    static get scopedElements(): {
+        'event-handlers-mapper': typeof EventHandlersMapper;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    _setHandlerIndex(idx: number): void;
+    _clearHandler(): void;
+    _copyHandler(): void;
+    _pasteHandler(): void;
+    _onHandlerChanged(e: CustomEvent): void;
+    private _dispatchHandlersChange;
+    onValueChanged(): Promise<void>;
+    _openHandlersPopup(): Promise<void>;
+    get tabContainer(): HTMLElement;
+    _onTabScroll(): void;
+    _onTabScrollNavLeft(): void;
+    _onTabScrollNavRight(): void;
+}
+export {};

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

@@ -0,0 +1,410 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers panel — 컴포넌트의 `state.eventHandlers[]` 편집기.
+ *
+ * 데이터바인딩 panel 의 형제로 *완전 분리*. 데이터바인딩은 데이터 흐름 전용,
+ * eventHandlers 는 사용자 액션 (tap / hover / 등) 의 first-class 핸들러 등록.
+ *
+ * data-binding 패턴 그대로 — tabs (N handlers) + handler mapper + add/delete/copy/paste.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/help/ox-title-with-help.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@operato/i18n/ox-i18n.js';
+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 { EventHandlersMapper } from './event-handlers-mapper.js';
+var clipboard = '{"trigger":"click","action":""}';
+export class PropertyEventHandlers extends ScopedElementsMixin(AbstractProperty) {
+    constructor() {
+        super(...arguments);
+        this.handlerIndex = 0;
+    }
+    /**
+     * 두 속성 통합 — 신규 `eventHandlers` 우선, 없으면 legacy `event` 객체를
+     * *read-only* 변환해 표시. 사용자가 수정 시 `eventHandlers` 에만 저장 — legacy
+     * 는 손대지 않음 (옛 코드 호환 / rollback 안전망).
+     */
+    get handlers() {
+        var _a, _b, _c;
+        const v = this.value;
+        if (!v)
+            return [];
+        // 1. 신규
+        if (Array.isArray(v.eventHandlers))
+            return v.eventHandlers;
+        // 2. legacy 객체 → 변환 (표시만, 저장 시점이 아님)
+        const ev = v.event;
+        if (!ev || typeof ev !== 'object' || Array.isArray(ev))
+            return [];
+        const trigMap = {
+            tap: 'click',
+            hover: 'mouseenter',
+            dblclick: 'dblclick',
+            longpress: 'longpress'
+        };
+        const out = [];
+        for (const key of Object.keys(ev)) {
+            const trig = trigMap[key];
+            const e = ev[key];
+            if (!trig || !e || typeof e !== 'object')
+                continue;
+            if (e.action === 'script') {
+                const code = typeof e.value === 'string' ? e.value : ((_b = (_a = e.value) === null || _a === void 0 ? void 0 : _a.script) !== null && _b !== void 0 ? _b : '');
+                out.push({ trigger: trig, action: 'script', code, target: e.target });
+            }
+            else {
+                out.push({
+                    trigger: trig,
+                    action: e.action,
+                    target: e.target,
+                    value: e.value,
+                    options: { emphasize: e.emphasize, restore: e.restore, pressed: e.pressed, ...((_c = e.options) !== null && _c !== void 0 ? _c : {}) }
+                });
+            }
+        }
+        return out;
+    }
+    firstUpdated() {
+        this.tabContainer.addEventListener('scroll', () => this._onTabScroll());
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            this.onValueChanged();
+        }
+    }
+    static get scopedElements() {
+        return {
+            'event-handlers-mapper': EventHandlersMapper
+        };
+    }
+    render() {
+        const handlers = this.handlers;
+        const current = handlers[this.handlerIndex] || { trigger: 'click', action: '' };
+        return html `
+      <fieldset>
+        <legend style="box-sizing:border-box;width:100%">
+          <ox-title-with-help topic="board-modeller/effects/event-handlers" msgid="label.event-handlers"
+            >Event Handlers</ox-title-with-help
+          >
+          <span style="font-size:11px;opacity:0.65;margin-left:6px">(${handlers.length})</span>
+          <md-icon
+            style="float:right;font-size:medium;margin:0;cursor:pointer"
+            @click=${() => this._openHandlersPopup()}
+            title="open in popup"
+            >open_in_new</md-icon
+          >
+        </legend>
+        <div id="tab-header">
+          <md-icon id="tab-nav-left-button" @click=${() => this._onTabScrollNavLeft()} disabled
+            >chevron_left</md-icon
+          >
+          <ox-buttons-radio
+            id="tabs"
+            .value=${String(this.handlerIndex)}
+            @change=${(e) => {
+            e.stopPropagation();
+            this._setHandlerIndex(e.target.value);
+        }}
+          >
+            ${handlers.map((h, i) => html `
+                <div data-value=${i} title="${h.trigger} · ${h.action || '(none)'}${h.disabled ? ' (disabled)' : ''}">
+                  ${h.trigger}
+                </div>
+              `)}
+            <div data-value=${handlers.length} disabled title="add new">+</div>
+          </ox-buttons-radio>
+          <md-icon id="tab-nav-right-button" @click=${() => this._onTabScrollNavRight()} disabled
+            >chevron_right</md-icon
+          >
+        </div>
+        <div handler-toolbar>
+          <md-icon style="font-size:19px" @click=${() => this._clearHandler()} title="delete current"
+            >delete_forever</md-icon
+          >
+          <md-icon @click=${() => this._pasteHandler()} title="paste">content_paste</md-icon>
+          <md-icon style="font-size:17px" @click=${() => this._copyHandler()} title="copy"
+            >content_copy</md-icon
+          >
+        </div>
+        <event-handlers-mapper
+          @value-change=${(e) => this._onHandlerChanged(e)}
+          .scene=${this.scene}
+          .handler=${current}
+        ></event-handlers-mapper>
+      </fieldset>
+    `;
+    }
+    _setHandlerIndex(idx) {
+        this.handlerIndex = isNaN(Number(idx)) ? 0 : Number(idx);
+        this._onTabScroll();
+    }
+    _clearHandler() {
+        const next = [...this.handlers];
+        next.splice(this.handlerIndex, 1);
+        this._dispatchHandlersChange(next);
+    }
+    _copyHandler() {
+        var _a;
+        clipboard = JSON.stringify((_a = this.handlers[this.handlerIndex]) !== null && _a !== void 0 ? _a : {});
+    }
+    _pasteHandler() {
+        try {
+            const parsed = JSON.parse(clipboard);
+            const next = [...this.handlers];
+            next[this.handlerIndex] = parsed;
+            this._dispatchHandlersChange(next);
+        }
+        catch (_) {
+            /* invalid clipboard */
+        }
+    }
+    _onHandlerChanged(e) {
+        var _a;
+        const handler = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.handler;
+        if (!handler)
+            return;
+        const next = [...this.handlers];
+        // 신규 — last+1 위치 추가
+        if (this.handlerIndex >= next.length) {
+            next.push(handler);
+        }
+        else {
+            next[this.handlerIndex] = handler;
+        }
+        const currentIdx = this.handlerIndex;
+        this._afterRender = () => {
+            this._setHandlerIndex(currentIdx);
+            this.tabContainer.scrollLeft = this.tabContainer.scrollWidth;
+        };
+        this._dispatchHandlersChange(next);
+    }
+    _dispatchHandlersChange(handlers) {
+        // action 이 비어있는 handler 는 외부 모델에서 제외 — UI placeholder 는 유지하되
+        // 저장은 action 이 선택된 핸들러만.
+        const valid = (handlers || []).filter(h => !!h && !!h.action);
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: { eventHandlers: valid }
+        }));
+    }
+    async onValueChanged() {
+        await this.updateComplete;
+        if (this._afterRender) {
+            this._afterRender();
+        }
+        else {
+            this._setHandlerIndex(0);
+        }
+        this._afterRender = null;
+    }
+    async _openHandlersPopup() {
+        // 큰 popup 으로 펼치기 — data-binding 의 _openBindingPopup 패턴 동일.
+        await import('./event-handlers-popup.js');
+        const handlers = [...this.handlers];
+        const template = html `
+      <event-handlers-popup
+        .handlers=${handlers}
+        .scene=${this.scene}
+        @handlers-change=${(e) => {
+            var _a;
+            this._dispatchHandlersChange(((_a = e.detail) === null || _a === void 0 ? void 0 : _a.handlers) || []);
+        }}
+      ></event-handlers-popup>
+    `;
+        openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('label.event-handlers')
+        });
+    }
+    get tabContainer() {
+        return this.tabs;
+    }
+    _onTabScroll() {
+        if (!this.tabContainer || !this.tabNavLeftButton)
+            return;
+        if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.setAttribute('disabled', '');
+            this.tabNavRightButton.setAttribute('disabled', '');
+        }
+        else if (this.tabContainer.scrollLeft == 0) {
+            this.tabNavLeftButton.setAttribute('disabled', '');
+            this.tabNavRightButton.removeAttribute('disabled');
+        }
+        else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.removeAttribute('disabled');
+            this.tabNavRightButton.setAttribute('disabled', '');
+        }
+        else {
+            this.tabNavLeftButton.removeAttribute('disabled');
+            this.tabNavRightButton.removeAttribute('disabled');
+        }
+    }
+    _onTabScrollNavLeft() {
+        this.tabContainer.style.scrollBehavior = 'smooth';
+        this.tabContainer.scrollLeft -= this.tabContainer.clientWidth;
+        this.tabContainer.style.scrollBehavior = 'auto';
+    }
+    _onTabScrollNavRight() {
+        this.tabContainer.style.scrollBehavior = 'smooth';
+        this.tabContainer.scrollLeft += this.tabContainer.clientWidth;
+        this.tabContainer.style.scrollBehavior = 'auto';
+    }
+}
+PropertyEventHandlers.styles = [
+    PropertyGridStyles,
+    css `
+      /* panel 자체가 부모 (사이드바) 너비를 넘기지 않도록. ox-input-code 같은
+       * 자유 너비 자식이 panel 폭을 키워서 우측 open_in_new 버튼이 잘리는
+       * 현상 방지. */
+      :host {
+        display: block;
+        min-width: 0;
+        max-width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+      fieldset {
+        min-width: 0;
+        max-width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+      event-handlers-mapper {
+        display: block;
+        min-width: 0;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+      /* 카드 상단 — chevron + tabs 를 하나의 둥근 모서리 박스로 통합. */
+      #tab-header {
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+        border: 1px solid rgba(0, 0, 0, 0.18);
+        border-radius: 6px 6px 0 0;
+        overflow: hidden;
+        background: var(--md-sys-color-surface, #fff);
+      }
+      #tab-header > md-icon {
+        padding: 0;
+        margin: 0;
+        width: 25px;
+        height: 25px;
+        font-size: x-large;
+        align-self: center;
+      }
+      ox-buttons-radio {
+        flex: 1;
+        height: 25px;
+        /* 외곽 border 는 #tab-header 가 들고 있다 — 여기는 0. */
+        border: 0;
+        border-radius: 0;
+        text-align: center;
+        display: flex;
+        padding: 0;
+        box-sizing: border-box;
+        width: 0;
+        overflow-x: hidden;
+      }
+      ox-buttons-radio > div {
+        background-color: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 0, 0, 0.07);
+        border-width: 0 0 2px 0;
+        padding: 0 8px;
+        margin: 0;
+        color: #fff;
+        font-size: 12px;
+        max-width: 110px;
+        min-width: 40px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 23px;
+      }
+      ox-buttons-radio > div[disabled] {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+      ox-buttons-radio > div[active] {
+        border-color: rgb(242, 71, 28);
+      }
+      ox-buttons-radio > div.iron-selected {
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+      div[handler-toolbar] {
+        display: flex;
+        flex-direction: row-reverse;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        overflow: hidden;
+        border: 1px solid rgba(0, 0, 0, 0.18);
+        border-width: 0 1px;
+        padding: 6px 6px 4px 6px;
+      }
+      md-icon {
+        margin-left: 5px;
+        color: var(--md-sys-color-on-secondary-container);
+        opacity: 0.8;
+        cursor: pointer;
+        --md-icon-size: 18px;
+      }
+      md-icon:hover {
+        color: var(--md-sys-color-on-primary-container);
+        opacity: 1;
+      }
+      md-icon[disabled] {
+        color: rgba(0, 0, 0, 0.1);
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyEventHandlers.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyEventHandlers.prototype, "scene", void 0);
+__decorate([
+    state()
+], PropertyEventHandlers.prototype, "handlerIndex", void 0);
+__decorate([
+    state()
+], PropertyEventHandlers.prototype, "_afterRender", void 0);
+__decorate([
+    query('#tabs')
+], PropertyEventHandlers.prototype, "tabs", void 0);
+__decorate([
+    query('#tab-nav-left-button')
+], PropertyEventHandlers.prototype, "tabNavLeftButton", void 0);
+__decorate([
+    query('#tab-nav-right-button')
+], PropertyEventHandlers.prototype, "tabNavRightButton", void 0);
+customElements.define('property-event-handlers', PropertyEventHandlers);
+//# sourceMappingURL=event-handlers.js.map

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

@@ -0,0 +1 @@

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

package/dist/src/property-panel/shapes/ox-placeholder-convert-editor.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * placeholder → 도메인 type 변환 property editor.
+ *
+ * GenericObject.nature.properties 에 `{ type: 'placeholder-convert', name: '_convert' }` 로
+ * 선언되어 specific 탭에서 자동 렌더링. 별도 사용처 없음 — nature 선언으로 충분.
+ *
+ * 변환 흐름:
+ *   타입 버튼 클릭 → i-need-selected → specifics.ts undoableChange → convertComponentType
+ */
+import { TemplateResult } from 'lit';
+import { OxPropertyEditor } from '@operato/property-editor';
+import type { PropertySpec } from '@operato/property-editor';
+export declare class OxPlaceholderConvertEditor extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    private _search;
+    editorTemplate(_value: any, _spec: PropertySpec): TemplateResult;
+    private _onConvert;
+}