@operato/property-panel 10.0.0-beta.57 → 10.0.0-beta.58

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

@@ -0,0 +1,325 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers popup — N 핸들러 large editor. data-binding-popup 의 형제.
+ *
+ * 2-column layout:
+ *   Left:  handler list — add / duplicate / disable / reorder / delete
+ *   Right: 선택된 handler 의 mapper (큰 code editor 영역)
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { EventHandlersMapper } from './event-handlers-mapper.js';
+let EventHandlersPopup = class EventHandlersPopup extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.handlers = [];
+        this.selectedIndex = 0;
+    }
+    static get scopedElements() {
+        return {
+            'event-handlers-mapper': EventHandlersMapper
+        };
+    }
+    render() {
+        var _a;
+        const handlers = (_a = this.handlers) !== null && _a !== void 0 ? _a : [];
+        const current = handlers[this.selectedIndex];
+        return html `
+      <div handler-list>
+        <header>
+          <span><ox-i18n msgid="label.handlers">Handlers</ox-i18n> (${handlers.length})</span>
+          <md-icon @click=${() => this._addHandler()} title="add">add</md-icon>
+        </header>
+        ${handlers.length === 0
+            ? html `<div empty><ox-i18n msgid="label.no-handlers">No handlers — add one</ox-i18n></div>`
+            : html `<ul>${handlers.map((h, i) => this._renderListItem(h, i, handlers.length))}</ul>`}
+      </div>
+
+      <div editor>
+        ${current
+            ? html `
+              <event-handlers-mapper
+                .handler=${current}
+                .scene=${this.scene}
+                @value-change=${(e) => this._onHandlerChanged(e)}
+              ></event-handlers-mapper>
+            `
+            : html `<div empty><ox-i18n msgid="label.select-or-add-handler">Select or add a handler</ox-i18n></div>`}
+      </div>
+    `;
+    }
+    _renderListItem(h, i, total) {
+        return html `
+      <li
+        ?active=${i === this.selectedIndex}
+        ?disabled=${h.disabled}
+        @click=${() => (this.selectedIndex = i)}
+      >
+        <div class="meta">
+          <span class="trigger">${h.trigger}${h.disabled ? ' (off)' : ''}</span>
+          <span class="summary">${this._summarize(h)}</span>
+        </div>
+        <md-icon
+          @click=${(e) => this._toggleDisabled(i, e)}
+          title=${h.disabled ? 'enable' : 'disable'}
+        >${h.disabled ? 'toggle_off' : 'toggle_on'}</md-icon>
+        <md-icon
+          @click=${(e) => this._duplicateHandler(i, e)}
+          title="duplicate"
+        >content_copy</md-icon>
+        <md-icon
+          @click=${(e) => this._moveHandler(i, -1, e)}
+          title="move up"
+          ?style=${i === 0 ? 'opacity:0.2;pointer-events:none' : ''}
+        >arrow_upward</md-icon>
+        <md-icon
+          @click=${(e) => this._moveHandler(i, +1, e)}
+          title="move down"
+          ?style=${i === total - 1 ? 'opacity:0.2;pointer-events:none' : ''}
+        >arrow_downward</md-icon>
+        <md-icon
+          class="danger"
+          @click=${(e) => this._removeHandler(i, e)}
+          title="delete"
+        >delete</md-icon>
+      </li>
+    `;
+    }
+    _summarize(h) {
+        if (h.action === 'script') {
+            const c = (h.code || '').replace(/\s+/g, ' ').trim();
+            return 'script · ' + (c.length > 60 ? c.slice(0, 60) + '…' : (c || '(empty)'));
+        }
+        return [h.action || '(none)', h.target ? `→${h.target}` : ''].filter(Boolean).join(' ');
+    }
+    _addHandler() {
+        const next = { trigger: 'click', action: '' };
+        this.handlers = [...(this.handlers || []), next];
+        this.selectedIndex = this.handlers.length - 1;
+        this._dispatch();
+    }
+    _duplicateHandler(idx, e) {
+        e.stopPropagation();
+        const original = this.handlers[idx];
+        if (!original)
+            return;
+        const copy = JSON.parse(JSON.stringify(original));
+        const next = [...(this.handlers || [])];
+        next.splice(idx + 1, 0, copy);
+        this.handlers = next;
+        this.selectedIndex = idx + 1;
+        this._dispatch();
+    }
+    _toggleDisabled(idx, e) {
+        e.stopPropagation();
+        const next = [...(this.handlers || [])];
+        next[idx] = { ...next[idx], disabled: !next[idx].disabled };
+        this.handlers = next;
+        this._dispatch();
+    }
+    _moveHandler(idx, delta, e) {
+        e.stopPropagation();
+        const next = [...(this.handlers || [])];
+        const newIdx = idx + delta;
+        if (newIdx < 0 || newIdx >= next.length)
+            return;
+        const [m] = next.splice(idx, 1);
+        next.splice(newIdx, 0, m);
+        this.handlers = next;
+        if (this.selectedIndex === idx)
+            this.selectedIndex = newIdx;
+        this._dispatch();
+    }
+    _removeHandler(idx, e) {
+        e.stopPropagation();
+        const next = [...(this.handlers || [])];
+        next.splice(idx, 1);
+        this.handlers = next;
+        this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, next.length - 1));
+        this._dispatch();
+    }
+    _onHandlerChanged(e) {
+        var _a;
+        const handler = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.handler;
+        if (!handler)
+            return;
+        const next = [...(this.handlers || [])];
+        next[this.selectedIndex] = handler;
+        this.handlers = next;
+        this._dispatch();
+    }
+    _dispatch() {
+        this.dispatchEvent(new CustomEvent('handlers-change', {
+            bubbles: true,
+            composed: true,
+            detail: { handlers: this.handlers }
+        }));
+    }
+};
+EventHandlersPopup.styles = [
+    css `
+      :host {
+        display: flex;
+        width: 1100px;
+        height: 680px;
+        overflow: hidden;
+        font-family: 'Roboto', Arial, sans-serif;
+        font-size: 13px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        background: var(--md-sys-color-surface, #fff);
+      }
+
+      [handler-list] {
+        width: 280px;
+        min-width: 280px;
+        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        display: flex;
+        flex-direction: column;
+        background: var(--md-sys-color-surface-container-low, #f7f2fa);
+      }
+
+      [handler-list] header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        font-weight: 600;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+
+      [handler-list] header md-icon {
+        cursor: pointer;
+        --md-icon-size: 18px;
+        border-radius: 4px;
+        padding: 2px;
+      }
+
+      [handler-list] header md-icon:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+
+      [handler-list] ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      [handler-list] li {
+        padding: 8px 10px;
+        cursor: pointer;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.08));
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      [handler-list] li[active] {
+        background: var(--md-sys-color-secondary-container, #e8def8);
+        color: var(--md-sys-color-on-secondary-container, #1d192b);
+      }
+
+      [handler-list] li[disabled] {
+        opacity: 0.5;
+        font-style: italic;
+      }
+
+      [handler-list] li:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+
+      [handler-list] li .meta {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+      }
+
+      [handler-list] li .trigger {
+        font-weight: 600;
+        font-size: 12px;
+      }
+
+      [handler-list] li .summary {
+        font-size: 11px;
+        opacity: 0.7;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 2px;
+      }
+
+      [handler-list] li md-icon {
+        --md-icon-size: 16px;
+        opacity: 0.5;
+        cursor: pointer;
+        padding: 3px;
+        border-radius: 4px;
+        flex-shrink: 0;
+      }
+
+      [handler-list] li md-icon:hover {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.05);
+      }
+
+      [handler-list] li md-icon.danger:hover {
+        color: var(--md-sys-color-error, #b3261e);
+      }
+
+      [handler-list] [empty] {
+        padding: 24px 12px;
+        text-align: center;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        opacity: 0.6;
+        font-size: 12px;
+      }
+
+      [editor] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        padding: 16px 20px;
+        background: var(--md-sys-color-surface, #fff);
+      }
+
+      [editor] [empty] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        font-size: 13px;
+        opacity: 0.6;
+      }
+
+      [editor] event-handlers-mapper {
+        min-height: 100%;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], EventHandlersPopup.prototype, "handlers", void 0);
+__decorate([
+    property({ type: Object })
+], EventHandlersPopup.prototype, "scene", void 0);
+__decorate([
+    state()
+], EventHandlersPopup.prototype, "selectedIndex", void 0);
+EventHandlersPopup = __decorate([
+    customElement('event-handlers-popup')
+], EventHandlersPopup);
+export { EventHandlersPopup };
+//# sourceMappingURL=event-handlers-popup.js.map

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

@@ -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'\n\nimport { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.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    }\n  }\n\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        width: 1100px;\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: 280px;\n        min-width: 280px;\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      }\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  }\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  private _dispatch() {\n    this.dispatchEvent(\n      new CustomEvent('handlers-change', {\n        bubbles: true,\n        composed: true,\n        detail: { handlers: this.handlers }\n      })\n    )\n  }\n}\n"]}

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

@@ -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 {};