@fmsim/layout-view 1.0.83 → 2.0.0-beta.2

package/dist-client/board-provider.d.ts

@@ -1,3 +1,3 @@
-import { ReferenceMap, Scene } from '@hatiolab/things-scene';
-export declare function createBoardProvider(): ReferenceMap<Scene>;
-export declare const provider: ReferenceMap<Scene>;
+import { ReferenceMap } from '@hatiolab/things-scene';
+export declare function createBoardProvider(): ReferenceMap;
+export declare const provider: ReferenceMap;

package/dist-client/board-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-provider.js","sourceRoot":"","sources":["../client/board-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAS,MAAM,wBAAwB,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,MAAM,UAAU,mBAAmB;IACjC,IAAI,SAAS,GAAG,IAAI,YAAY,CAC9B,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAgB,EAAE;QAC/C,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,cAAc,CAAC,OAAO,CAAC,CAAA;YAC7C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAA;YAC1E,MAAM,KAAK,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAClD,IAAI,CAAC;oBACH,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,OAAO,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAA;gBAC5F,CAAC;gBAAC,OAAO,GAAG,EAAE,CAAC;oBACb,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAA;gBAC1C,CAAC;gBACD,OAAO,KAAK,CAAA;YACd,CAAC,EAAE,EAAE,CAAC,CAAA;YAEN,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,MAAM,CAAC,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAA;gBACvD,OAAM;YACR,CAAC;YAED,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YAEnC,IAAI,KAAY,CAAA;YAEhB,IAAI,CAAC;gBACH,KAAK,GAAG,MAAM,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;gBACnC,OAAO,CAAC,IAAI,CAAC,gCAAgC,EAAE,OAAO,CAAC,CAAA;YACzD,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,KAAK,GAAG,MAAM,CAAC;oBACb,KAAK;oBACL,KAAK;oBACL,IAAI,EAAE,CAAC;oBACP,WAAW,EAAE,QAAe;oBAC5B,WAAW,EAAE,IAAI,WAAW,CAAC,OAAO,CAAC;oBACrC,QAAQ,EAAE,CAAC,mBAAmB,EAAE,cAAc,EAAE,eAAe,CAAC;oBAChE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC;iBACrF,CAAC,CAAA;gBAEF,6BAA6B;YAC/B,CAAC;YAED,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,CAAC,CAAC,CAAC,CAAA;YACR,MAAM,CAAC,CAAC,CAAC,CAAA;QACX,CAAC;IACH,CAAC,EACD,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;QAChB,GAAG,CAAC,OAAO,EAAE,CAAA;IACf,CAAC,CACF,CAAA;IAED,OAAO,SAAS,CAAA;AAClB,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,mBAAmB,EAAE,CAAA","sourcesContent":["import { create, error, ReferenceMap, Scene } from '@hatiolab/things-scene'\nimport { DataStorage } from '@fmsim/board'\nimport { fetchBoardById } from '@fmsim/api'\n\nexport function createBoardProvider() {\n  var _provider = new ReferenceMap<Scene>(\n    async (boardId, resolve, reject): Promise<any> => {\n      try {\n        const fetched = await fetchBoardById(boardId)\n        const { board, themes } = 'data' in fetched ? fetched.data : fetched || {}\n        const style = themes?.items.reduce((style, theme) => {\n          try {\n            style[theme.name] = typeof theme.value == 'string' ? JSON.parse(theme.value) : theme.value\n          } catch (err) {\n            console.error('themes parse error', err)\n          }\n          return style\n        }, {})\n\n        if (!board) {\n          reject(new Error('Failed to get the requested board.'))\n          return\n        }\n\n        var model = JSON.parse(board.model)\n\n        var scene: Scene\n\n        try {\n          scene = await provider.get(boardId)\n          console.warn('Board fetched more than twice.', boardId)\n        } catch (e) {\n          scene = create({\n            model,\n            style,\n            mode: 0,\n            refProvider: provider as any,\n            dataStorage: new DataStorage(boardId),\n            handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],\n            layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }]\n          })\n\n          // s.app.baseUrl = undefined;\n        }\n\n        resolve(scene)\n      } catch (e) {\n        error(e)\n        reject(e)\n      }\n    },\n    async (id, ref) => {\n      ref.dispose()\n    }\n  )\n\n  return _provider\n}\n\nexport const provider = createBoardProvider()\n"]}
+{"version":3,"file":"board-provider.js","sourceRoot":"","sources":["../client/board-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAS,MAAM,wBAAwB,CAAA;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,MAAM,UAAU,mBAAmB;IACjC,IAAI,SAAS,GAAG,IAAI,YAAY,CAC9B,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAgB,EAAE;QAC/C,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,cAAc,CAAC,OAAO,CAAC,CAAA;YAC7C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAA;YAC1E,MAAM,KAAK,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAClD,IAAI,CAAC;oBACH,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,OAAO,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAA;gBAC5F,CAAC;gBAAC,OAAO,GAAG,EAAE,CAAC;oBACb,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAA;gBAC1C,CAAC;gBACD,OAAO,KAAK,CAAA;YACd,CAAC,EAAE,EAAE,CAAC,CAAA;YAEN,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,MAAM,CAAC,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAA;gBACvD,OAAM;YACR,CAAC;YAED,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YAEnC,IAAI,KAAY,CAAA;YAEhB,IAAI,CAAC;gBACH,KAAK,GAAG,MAAM,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;gBACnC,OAAO,CAAC,IAAI,CAAC,gCAAgC,EAAE,OAAO,CAAC,CAAA;YACzD,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,KAAK,GAAG,MAAM,CAAC;oBACb,KAAK;oBACL,KAAK;oBACL,IAAI,EAAE,CAAC;oBACP,WAAW,EAAE,QAAe;oBAC5B,WAAW,EAAE,IAAI,WAAW,CAAC,OAAO,CAAC;oBACrC,QAAQ,EAAE,CAAC,mBAAmB,EAAE,cAAc,EAAE,eAAe,CAAC;oBAChE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC;iBACrF,CAAC,CAAA;gBAEF,6BAA6B;YAC/B,CAAC;YAED,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,CAAC,CAAC,CAAC,CAAA;YACR,MAAM,CAAC,CAAC,CAAC,CAAA;QACX,CAAC;IACH,CAAC,EACD,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;QAChB,GAAG,CAAC,OAAO,EAAE,CAAA;IACf,CAAC,CACF,CAAA;IAED,OAAO,SAAS,CAAA;AAClB,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,mBAAmB,EAAE,CAAA","sourcesContent":["import { create, error, ReferenceMap, Scene } from '@hatiolab/things-scene'\nimport { DataStorage } from '@fmsim/board'\nimport { fetchBoardById } from '@fmsim/api'\n\nexport function createBoardProvider() {\n  var _provider = new ReferenceMap(\n    async (boardId, resolve, reject): Promise<any> => {\n      try {\n        const fetched = await fetchBoardById(boardId)\n        const { board, themes } = 'data' in fetched ? fetched.data : fetched || {}\n        const style = themes?.items.reduce((style, theme) => {\n          try {\n            style[theme.name] = typeof theme.value == 'string' ? JSON.parse(theme.value) : theme.value\n          } catch (err) {\n            console.error('themes parse error', err)\n          }\n          return style\n        }, {})\n\n        if (!board) {\n          reject(new Error('Failed to get the requested board.'))\n          return\n        }\n\n        var model = JSON.parse(board.model)\n\n        var scene: Scene\n\n        try {\n          scene = await provider.get(boardId)\n          console.warn('Board fetched more than twice.', boardId)\n        } catch (e) {\n          scene = create({\n            model,\n            style,\n            mode: 0,\n            refProvider: provider as any,\n            dataStorage: new DataStorage(boardId),\n            handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],\n            layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }]\n          })\n\n          // s.app.baseUrl = undefined;\n        }\n\n        resolve(scene)\n      } catch (e) {\n        error(e)\n        reject(e)\n      }\n    },\n    async (id, ref) => {\n      ref.dispose()\n    }\n  )\n\n  return _provider\n}\n\nexport const provider = createBoardProvider()\n"]}

package/dist-client/data-grist/animation-map-editor.d.ts

@@ -1,4 +1,10 @@
-import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js';
-export declare class AnimationMapEditor extends OxGristEditorValueMap {
+import './ox-input-animation-map.js';
+import { OxGristEditor } from '@operato/data-grist';
+export declare class AnimationMapEditor extends OxGristEditor {
+    private popup?;
     get options(): any;
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+    _onclick(e: Event): void;
+    _onkeydown(e: KeyboardEvent): void;
+    openSelector(): Promise<void>;
 }

package/dist-client/data-grist/animation-map-editor.js

@@ -1,11 +1,86 @@
 import { __decorate } from "tslib";
+import './ox-input-animation-map.js';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js';
-let AnimationMapEditor = class AnimationMapEditor extends OxGristEditorValueMap {
+import { cloneDeep } from 'lodash-es';
+import { OxGristEditor } from '@operato/data-grist';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/popup';
+let AnimationMapEditor = class AnimationMapEditor extends OxGristEditor {
     get options() {
         var _a;
         const overidable = ((_a = this.column.record) === null || _a === void 0 ? void 0 : _a.options) || {};
-        return Object.assign({ name: `Animation : ${this.record.name}`, valuetype: 'code', objectified: false, defaultValue: '' }, overidable);
+        return Object.assign({ name: `Animation : ${this.record.name}`, objectified: false }, overidable);
+    }
+    get editorTemplate() {
+        const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value;
+        return html `<div tabindex="0">${value || ''}</div>`;
+    }
+    _onclick(e) {
+        e.stopPropagation();
+        this.openSelector();
+    }
+    _onkeydown(e) {
+        if (e.key === 'Enter') {
+            e.stopPropagation();
+            this.openSelector();
+        }
+    }
+    async openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        const { name, objectified = false } = this.options || {};
+        const confirmCallback = (newval) => {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: !objectified ? JSON.stringify(newval) : newval,
+                    record: this.record,
+                    column: this.column,
+                    row: this.row
+                }
+            }));
+        };
+        let value;
+        try {
+            value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {});
+        }
+        catch (e) {
+            value = {};
+        }
+        let latestValue = value;
+        const onConfirm = () => {
+            var _a;
+            confirmCallback(latestValue);
+            (_a = this.popup) === null || _a === void 0 ? void 0 : _a.close();
+        };
+        const template = html `
+      <div style="display:flex;flex-direction:column;height:100%;padding:12px;box-sizing:border-box;">
+        <ox-input-animation-map
+          .value=${value}
+          @change=${(e) => { latestValue = e.detail; }}
+          style="flex:1;overflow:auto;"
+        ></ox-input-animation-map>
+        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:12px;">
+          <button @click=${onConfirm}
+            style="padding:6px 16px;background:var(--md-sys-color-primary,#1976d2);color:#fff;border:none;border-radius:4px;cursor:pointer;">
+            ${i18next.t('button.confirm') || 'Confirm'}
+          </button>
+          <button @click=${() => { var _a; return (_a = this.popup) === null || _a === void 0 ? void 0 : _a.close(); }}
+            style="padding:6px 16px;background:var(--md-sys-color-surface-variant,#e0e0e0);color:#333;border:none;border-radius:4px;cursor:pointer;">
+            ${i18next.t('button.cancel') || 'Cancel'}
+          </button>
+        </div>
+      </div>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: `${(name === null || name === void 0 ? void 0 : name.toUpperCase()) || 'ANIMATION MAP'}`
+        });
     }
 };
 AnimationMapEditor = __decorate([

package/dist-client/data-grist/animation-map-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation-map-editor.js","sourceRoot":"","sources":["../../client/data-grist/animation-map-editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,oDAAoD,CAAA;AAGnF,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,qBAAqB;IAC3D,IAAI,OAAO;;QACT,MAAM,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,MAAM,CAAC,MAAM,0CAAE,OAAO,KAAI,EAAE,CAAA;QAEpD,uBACE,IAAI,EAAE,eAAe,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EACvC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,EAAE,IACb,UAAU,EACd;IACH,CAAC;CACF,CAAA;AAZY,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAY9B","sourcesContent":["import { customElement } from 'lit/decorators.js'\n\nimport { OxGristEditorValueMap } from '@operato/grist-editor/ox-grist-editor-value-map.js'\n\n@customElement('animation-map-editor')\nexport class AnimationMapEditor extends OxGristEditorValueMap {\n  get options() {\n    const overidable = this.column.record?.options || {}\n\n    return {\n      name: `Animation : ${this.record.name}`,\n      valuetype: 'code',\n      objectified: false,\n      defaultValue: '',\n      ...overidable\n    }\n  }\n}\n"]}
+{"version":3,"file":"animation-map-editor.js","sourceRoot":"","sources":["../../client/data-grist/animation-map-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-input-animation-map.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { cloneDeep } from 'lodash-es'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup, PopupHandle } from '@operato/popup'\n\n@customElement('animation-map-editor')\nexport class AnimationMapEditor extends OxGristEditor {\n  private popup?: PopupHandle\n\n  get options() {\n    const overidable = this.column.record?.options || {}\n\n    return {\n      name: `Animation : ${this.record.name}`,\n      objectified: false,\n      ...overidable\n    }\n  }\n\n  get editorTemplate() {\n    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value\n    return html`<div tabindex=\"0\">${value || ''}</div>`\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n    this.openSelector()\n  }\n\n  _onkeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter') {\n      e.stopPropagation()\n      this.openSelector()\n    }\n  }\n\n  async openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const { name, objectified = false } = this.options || {}\n\n    const confirmCallback = (newval: any) => {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: !objectified ? JSON.stringify(newval) : newval,\n            record: this.record,\n            column: this.column,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    let value: any\n    try {\n      value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})\n    } catch (e) {\n      value = {}\n    }\n\n    let latestValue = value\n\n    const onConfirm = () => {\n      confirmCallback(latestValue)\n      this.popup?.close()\n    }\n\n    const template = html`\n      <div style=\"display:flex;flex-direction:column;height:100%;padding:12px;box-sizing:border-box;\">\n        <ox-input-animation-map\n          .value=${value}\n          @change=${(e: CustomEvent) => { latestValue = e.detail }}\n          style=\"flex:1;overflow:auto;\"\n        ></ox-input-animation-map>\n        <div style=\"display:flex;justify-content:flex-end;gap:8px;margin-top:12px;\">\n          <button @click=${onConfirm}\n            style=\"padding:6px 16px;background:var(--md-sys-color-primary,#1976d2);color:#fff;border:none;border-radius:4px;cursor:pointer;\">\n            ${i18next.t('button.confirm') || 'Confirm'}\n          </button>\n          <button @click=${() => this.popup?.close()}\n            style=\"padding:6px 16px;background:var(--md-sys-color-surface-variant,#e0e0e0);color:#333;border:none;border-radius:4px;cursor:pointer;\">\n            ${i18next.t('button.cancel') || 'Cancel'}\n          </button>\n        </div>\n      </div>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: `${name?.toUpperCase() || 'ANIMATION MAP'}`\n    })\n  }\n}\n"]}

package/dist-client/data-grist/ox-input-animation-config.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 단일 애니메이션 설정 폼 컴포넌트
+ *
+ * AnimationConfig 객체 하나를 폼으로 편집한다.
+ * type 선택에 따라 관련 필드만 표시된다.
+ */
+import { LitElement } from 'lit';
+type AnimationConfig = {
+    type?: string;
+    delay?: number;
+    duration?: number;
+    interval?: number;
+    theta?: number;
+    scale?: number;
+    x?: number;
+    y?: number;
+    startAlpha?: number;
+    endAlpha?: number;
+    repeat?: boolean;
+    autoplay?: boolean;
+    delta?: string;
+    ease?: string;
+};
+export declare class OxInputAnimationConfig extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: AnimationConfig;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    private _onChange;
+}
+export {};

package/dist-client/data-grist/ox-input-animation-config.js

@@ -0,0 +1,190 @@
+/**
+ * 단일 애니메이션 설정 폼 컴포넌트
+ *
+ * AnimationConfig 객체 하나를 폼으로 편집한다.
+ * type 선택에 따라 관련 필드만 표시된다.
+ */
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxInputAnimationConfig = class OxInputAnimationConfig extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const v = this.value || {};
+        return html `
+      <div class="form">
+        <label>Type</label>
+        <select value-key="type" .value=${v.type || ''}>
+          <option value="">None</option>
+          <option value="rotation">Rotation</option>
+          <option value="vibration">Vibration</option>
+          <option value="heartbeat">Heartbeat</option>
+          <option value="moving">Moving</option>
+          <option value="fade">Fade</option>
+        </select>
+
+        <label>Delay</label>
+        <input type="number" value-key="delay" .value=${String((_a = v.delay) !== null && _a !== void 0 ? _a : '')} placeholder="ms" />
+
+        <label>Duration</label>
+        <input type="number" value-key="duration" .value=${String((_b = v.duration) !== null && _b !== void 0 ? _b : '')} placeholder="ms" />
+
+        <label>Interval</label>
+        <input type="number" value-key="interval" .value=${String((_c = v.interval) !== null && _c !== void 0 ? _c : '')} placeholder="ms" />
+
+        ${v.type === 'rotation' || v.type === 'vibration'
+            ? html `
+              <label>Theta</label>
+              <input type="number" value-key="theta" .value=${String((_d = v.theta) !== null && _d !== void 0 ? _d : '')} />
+            `
+            : ''}
+        ${v.type === 'heartbeat'
+            ? html `
+              <label>Scale</label>
+              <input type="number" value-key="scale" .value=${String((_e = v.scale) !== null && _e !== void 0 ? _e : '')} />
+            `
+            : ''}
+        ${v.type === 'moving'
+            ? html `
+              <label>X</label>
+              <input type="number" value-key="x" .value=${String((_f = v.x) !== null && _f !== void 0 ? _f : '')} />
+              <label>Y</label>
+              <input type="number" value-key="y" .value=${String((_g = v.y) !== null && _g !== void 0 ? _g : '')} />
+            `
+            : ''}
+        ${v.type === 'fade'
+            ? html `
+              <label>Start α</label>
+              <input type="number" value-key="startAlpha" .value=${String((_h = v.startAlpha) !== null && _h !== void 0 ? _h : '')} />
+              <label>End α</label>
+              <input type="number" value-key="endAlpha" .value=${String((_j = v.endAlpha) !== null && _j !== void 0 ? _j : '')} />
+            `
+            : ''}
+
+        <label>Delta</label>
+        <select value-key="delta" .value=${v.delta || 'linear'}>
+          <option value="linear">linear</option>
+          <option value="quad">quad</option>
+          <option value="circ">circ</option>
+          <option value="back">back</option>
+          <option value="bounce">bounce</option>
+          <option value="elastic">elastic</option>
+        </select>
+
+        <label>Ease</label>
+        <select value-key="ease" .value=${v.ease || 'in'}>
+          <option value="in">in</option>
+          <option value="out">out</option>
+          <option value="inout">inout</option>
+        </select>
+      </div>
+
+      <div class="checkbox-row">
+        <label>
+          <input type="checkbox" value-key="repeat" .checked=${!!v.repeat} />
+          Repeat
+        </label>
+        <label>
+          <input type="checkbox" value-key="autoplay" .checked=${(_k = v.autoplay) !== null && _k !== void 0 ? _k : true} />
+          Autoplay
+        </label>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+    }
+    _onChange(e) {
+        e.stopPropagation();
+        const el = e.target;
+        const key = el.getAttribute('value-key');
+        if (!key)
+            return;
+        let val;
+        if (el instanceof HTMLInputElement) {
+            if (el.type === 'checkbox')
+                val = el.checked;
+            else if (el.type === 'number')
+                val = el.value ? Number(el.value) : undefined;
+            else
+                val = el.value;
+        }
+        else {
+            val = el.value;
+        }
+        this.value = Object.assign(Object.assign({}, this.value), { [key]: val });
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+};
+OxInputAnimationConfig.styles = css `
+    :host {
+      display: block;
+      font-size: var(--fontsize-default, 12px);
+    }
+
+    .form {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 2px 6px;
+      align-items: center;
+    }
+
+    label {
+      font-size: 11px;
+      color: var(--md-sys-color-on-surface-variant, #555);
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    input,
+    select {
+      border: 0;
+      border-bottom: 1px solid transparent;
+      padding: 3px 4px;
+      font: var(--input-font, 12px sans-serif);
+      color: var(--md-sys-color-on-primary-container, #333);
+      background: transparent;
+      box-sizing: border-box;
+    }
+
+    input:focus,
+    select:focus {
+      outline: none;
+      border-bottom-color: var(--md-sys-color-primary, #1976d2);
+    }
+
+    input[type='number'] {
+      width: 80px;
+    }
+
+    .checkbox-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .checkbox-row label {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      cursor: pointer;
+    }
+
+    input[type='checkbox'] {
+      width: auto;
+      margin: 0;
+    }
+  `;
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], OxInputAnimationConfig.prototype, "value", void 0);
+OxInputAnimationConfig = __decorate([
+    customElement('ox-input-animation-config')
+], OxInputAnimationConfig);
+export { OxInputAnimationConfig };
+//# sourceMappingURL=ox-input-animation-config.js.map

package/dist-client/data-grist/ox-input-animation-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-animation-config.js","sourceRoot":"","sources":["../../client/data-grist/ox-input-animation-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAoBpD,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;QA6DuB,UAAK,GAAoB,EAAE,CAAA;IA6GzD,CAAC;IA3GC,MAAM;;QACJ,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE1B,OAAO,IAAI,CAAA;;;0CAG2B,CAAC,CAAC,IAAI,IAAI,EAAE;;;;;;;;;;wDAUE,MAAM,CAAC,MAAA,CAAC,CAAC,KAAK,mCAAI,EAAE,CAAC;;;2DAGlB,MAAM,CAAC,MAAA,CAAC,CAAC,QAAQ,mCAAI,EAAE,CAAC;;;2DAGxB,MAAM,CAAC,MAAA,CAAC,CAAC,QAAQ,mCAAI,EAAE,CAAC;;UAEzE,CAAC,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW;YAC/C,CAAC,CAAC,IAAI,CAAA;;8DAE8C,MAAM,CAAC,MAAA,CAAC,CAAC,KAAK,mCAAI,EAAE,CAAC;aACtE;YACH,CAAC,CAAC,EAAE;UACJ,CAAC,CAAC,IAAI,KAAK,WAAW;YACtB,CAAC,CAAC,IAAI,CAAA;;8DAE8C,MAAM,CAAC,MAAA,CAAC,CAAC,KAAK,mCAAI,EAAE,CAAC;aACtE;YACH,CAAC,CAAC,EAAE;UACJ,CAAC,CAAC,IAAI,KAAK,QAAQ;YACnB,CAAC,CAAC,IAAI,CAAA;;0DAE0C,MAAM,CAAC,MAAA,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;;0DAEjB,MAAM,CAAC,MAAA,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;aAC9D;YACH,CAAC,CAAC,EAAE;UACJ,CAAC,CAAC,IAAI,KAAK,MAAM;YACjB,CAAC,CAAC,IAAI,CAAA;;mEAEmD,MAAM,CAAC,MAAA,CAAC,CAAC,UAAU,mCAAI,EAAE,CAAC;;iEAE5B,MAAM,CAAC,MAAA,CAAC,CAAC,QAAQ,mCAAI,EAAE,CAAC;aAC5E;YACH,CAAC,CAAC,EAAE;;;2CAG6B,CAAC,CAAC,KAAK,IAAI,QAAQ;;;;;;;;;;0CAUpB,CAAC,CAAC,IAAI,IAAI,IAAI;;;;;;;;;+DASO,CAAC,CAAC,CAAC,CAAC,MAAM;;;;iEAIR,MAAA,CAAC,CAAC,QAAQ,mCAAI,IAAI;;;;KAI9E,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAqB,CAAA;QAClC,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QACxC,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,IAAI,GAAQ,CAAA;QACZ,IAAI,EAAE,YAAY,gBAAgB,EAAE,CAAC;YACnC,IAAI,EAAE,CAAC,IAAI,KAAK,UAAU;gBAAE,GAAG,GAAG,EAAE,CAAC,OAAO,CAAA;iBACvC,IAAI,EAAE,CAAC,IAAI,KAAK,QAAQ;gBAAE,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;;gBACvE,GAAG,GAAG,EAAE,CAAC,KAAK,CAAA;QACrB,CAAC;aAAM,CAAC;YACN,GAAG,GAAI,EAAwB,CAAC,KAAK,CAAA;QACvC,CAAC;QAED,IAAI,CAAC,KAAK,mCAAQ,IAAI,CAAC,KAAK,KAAE,CAAC,GAAG,CAAC,EAAE,GAAG,GAAE,CAAA;QAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AAxKM,6BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DlB,AA1DY,CA0DZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAA4B;AA7D5C,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA0KlC","sourcesContent":["/**\n * 단일 애니메이션 설정 폼 컴포넌트\n *\n * AnimationConfig 객체 하나를 폼으로 편집한다.\n * type 선택에 따라 관련 필드만 표시된다.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\ntype AnimationConfig = {\n  type?: string\n  delay?: number\n  duration?: number\n  interval?: number\n  theta?: number\n  scale?: number\n  x?: number\n  y?: number\n  startAlpha?: number\n  endAlpha?: number\n  repeat?: boolean\n  autoplay?: boolean\n  delta?: string\n  ease?: string\n}\n\n@customElement('ox-input-animation-config')\nexport class OxInputAnimationConfig extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      font-size: var(--fontsize-default, 12px);\n    }\n\n    .form {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      gap: 2px 6px;\n      align-items: center;\n    }\n\n    label {\n      font-size: 11px;\n      color: var(--md-sys-color-on-surface-variant, #555);\n      text-align: right;\n      white-space: nowrap;\n    }\n\n    input,\n    select {\n      border: 0;\n      border-bottom: 1px solid transparent;\n      padding: 3px 4px;\n      font: var(--input-font, 12px sans-serif);\n      color: var(--md-sys-color-on-primary-container, #333);\n      background: transparent;\n      box-sizing: border-box;\n    }\n\n    input:focus,\n    select:focus {\n      outline: none;\n      border-bottom-color: var(--md-sys-color-primary, #1976d2);\n    }\n\n    input[type='number'] {\n      width: 80px;\n    }\n\n    .checkbox-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .checkbox-row label {\n      display: flex;\n      align-items: center;\n      gap: 3px;\n      cursor: pointer;\n    }\n\n    input[type='checkbox'] {\n      width: auto;\n      margin: 0;\n    }\n  `\n\n  @property({ type: Object }) value: AnimationConfig = {}\n\n  render() {\n    const v = this.value || {}\n\n    return html`\n      <div class=\"form\">\n        <label>Type</label>\n        <select value-key=\"type\" .value=${v.type || ''}>\n          <option value=\"\">None</option>\n          <option value=\"rotation\">Rotation</option>\n          <option value=\"vibration\">Vibration</option>\n          <option value=\"heartbeat\">Heartbeat</option>\n          <option value=\"moving\">Moving</option>\n          <option value=\"fade\">Fade</option>\n        </select>\n\n        <label>Delay</label>\n        <input type=\"number\" value-key=\"delay\" .value=${String(v.delay ?? '')} placeholder=\"ms\" />\n\n        <label>Duration</label>\n        <input type=\"number\" value-key=\"duration\" .value=${String(v.duration ?? '')} placeholder=\"ms\" />\n\n        <label>Interval</label>\n        <input type=\"number\" value-key=\"interval\" .value=${String(v.interval ?? '')} placeholder=\"ms\" />\n\n        ${v.type === 'rotation' || v.type === 'vibration'\n          ? html`\n              <label>Theta</label>\n              <input type=\"number\" value-key=\"theta\" .value=${String(v.theta ?? '')} />\n            `\n          : ''}\n        ${v.type === 'heartbeat'\n          ? html`\n              <label>Scale</label>\n              <input type=\"number\" value-key=\"scale\" .value=${String(v.scale ?? '')} />\n            `\n          : ''}\n        ${v.type === 'moving'\n          ? html`\n              <label>X</label>\n              <input type=\"number\" value-key=\"x\" .value=${String(v.x ?? '')} />\n              <label>Y</label>\n              <input type=\"number\" value-key=\"y\" .value=${String(v.y ?? '')} />\n            `\n          : ''}\n        ${v.type === 'fade'\n          ? html`\n              <label>Start α</label>\n              <input type=\"number\" value-key=\"startAlpha\" .value=${String(v.startAlpha ?? '')} />\n              <label>End α</label>\n              <input type=\"number\" value-key=\"endAlpha\" .value=${String(v.endAlpha ?? '')} />\n            `\n          : ''}\n\n        <label>Delta</label>\n        <select value-key=\"delta\" .value=${v.delta || 'linear'}>\n          <option value=\"linear\">linear</option>\n          <option value=\"quad\">quad</option>\n          <option value=\"circ\">circ</option>\n          <option value=\"back\">back</option>\n          <option value=\"bounce\">bounce</option>\n          <option value=\"elastic\">elastic</option>\n        </select>\n\n        <label>Ease</label>\n        <select value-key=\"ease\" .value=${v.ease || 'in'}>\n          <option value=\"in\">in</option>\n          <option value=\"out\">out</option>\n          <option value=\"inout\">inout</option>\n        </select>\n      </div>\n\n      <div class=\"checkbox-row\">\n        <label>\n          <input type=\"checkbox\" value-key=\"repeat\" .checked=${!!v.repeat} />\n          Repeat\n        </label>\n        <label>\n          <input type=\"checkbox\" value-key=\"autoplay\" .checked=${v.autoplay ?? true} />\n          Autoplay\n        </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  private _onChange(e: Event) {\n    e.stopPropagation()\n\n    const el = e.target as HTMLElement\n    const key = el.getAttribute('value-key')\n    if (!key) return\n\n    let val: any\n    if (el instanceof HTMLInputElement) {\n      if (el.type === 'checkbox') val = el.checked\n      else if (el.type === 'number') val = el.value ? Number(el.value) : undefined\n      else val = el.value\n    } else {\n      val = (el as HTMLSelectElement).value\n    }\n\n    this.value = { ...this.value, [key]: val }\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

package/dist-client/data-grist/ox-input-animation-map.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Animation Map 에디터
+ *
+ * key-value 맵에서 value가 애니메이션 설정 객체인 경우를 위한 편집기.
+ * 각 행은 key 입력 + ox-input-animation-config 폼으로 구성된다.
+ *
+ * value 구조:
+ * {
+ *   "1001": { type: "rotation", duration: 1000, delay: 0, theta: 360, repeat: true, delta: "linear", ease: "in" },
+ *   "1007": { type: "vibration", duration: 500, ... },
+ *   "default": ""
+ * }
+ */
+import '@material/web/icon/icon.js';
+import './ox-input-animation-config.js';
+import { LitElement } from 'lit';
+type AnimationConfig = {
+    type?: string;
+    delay?: number;
+    duration?: number;
+    interval?: number;
+    theta?: number;
+    scale?: number;
+    x?: number;
+    y?: number;
+    startAlpha?: number;
+    endAlpha?: number;
+    repeat?: boolean;
+    autoplay?: boolean;
+    delta?: string;
+    ease?: string;
+};
+type AnimationMap = {
+    default?: any;
+    [key: string]: AnimationConfig | any;
+};
+export declare class OxInputAnimationMap extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: AnimationMap;
+    render(): import("lit-html").TemplateResult<1>;
+    private _onConfigChange;
+    private _onNewKeyChange;
+    firstUpdated(): void;
+    private _build;
+    private _add;
+    private _delete;
+    private _toArray;
+}
+export {};