@fmsim/layout-view 2.0.0-beta.11 → 2.0.0-beta.111
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.
- package/dist-client/board-provider.js +2 -1
- package/dist-client/board-provider.js.map +1 -1
- package/dist-client/data-grist/animation-map-editor.js +80 -20
- package/dist-client/data-grist/animation-map-editor.js.map +1 -1
- package/dist-client/data-grist/ox-input-animation-config.d.ts +1 -0
- package/dist-client/data-grist/ox-input-animation-config.js +42 -37
- package/dist-client/data-grist/ox-input-animation-config.js.map +1 -1
- package/dist-client/data-grist/ox-input-animation-map.d.ts +19 -5
- package/dist-client/data-grist/ox-input-animation-map.js +100 -28
- package/dist-client/data-grist/ox-input-animation-map.js.map +1 -1
- package/dist-client/pages/board-modeller-page.d.ts +1 -0
- package/dist-client/pages/board-modeller-page.js +9 -0
- package/dist-client/pages/board-modeller-page.js.map +1 -1
- package/dist-client/pages/board-viewer-page.d.ts +1 -0
- package/dist-client/pages/board-viewer-page.js +23 -8
- package/dist-client/pages/board-viewer-page.js.map +1 -1
- package/dist-client/pages/theme/theme-list-page.js +1 -4
- package/dist-client/pages/theme/theme-list-page.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/translations/en.json +14 -1
- package/translations/ja.json +14 -1
- package/translations/ko.json +14 -1
- package/translations/ms.json +14 -1
- package/translations/zh.json +14 -1
- package/dist-client/pages/theme/theme-editors.d.ts +0 -5
- package/dist-client/pages/theme/theme-editors.js +0 -61
- package/dist-client/pages/theme/theme-editors.js.map +0 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import JSON5 from 'json5';
|
|
1
2
|
import { create, error, ReferenceMap } from '@hatiolab/things-scene';
|
|
2
3
|
import { DataStorage } from '@fmsim/board';
|
|
3
4
|
import { fetchBoardById } from '@fmsim/api';
|
|
@@ -8,7 +9,7 @@ export function createBoardProvider() {
|
|
|
8
9
|
const { board, themes } = 'data' in fetched ? fetched.data : fetched || {};
|
|
9
10
|
const style = themes === null || themes === void 0 ? void 0 : themes.items.reduce((style, theme) => {
|
|
10
11
|
try {
|
|
11
|
-
style[theme.name] = typeof theme.value == 'string' ?
|
|
12
|
+
style[theme.name] = typeof theme.value == 'string' ? JSON5.parse(theme.value) : theme.value;
|
|
12
13
|
}
|
|
13
14
|
catch (err) {
|
|
14
15
|
console.error('themes parse error', err);
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"board-provider.js","sourceRoot":"","sources":["../client/board-provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,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,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAA;gBAC7F,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 JSON5 from 'json5'\nimport { 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' ? JSON5.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"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import './ox-input-animation-map.js';
|
|
3
|
+
import JSON5 from 'json5';
|
|
3
4
|
import { html } from 'lit';
|
|
4
5
|
import { customElement } from 'lit/decorators.js';
|
|
6
|
+
import { createRef, ref } from 'lit/directives/ref.js';
|
|
5
7
|
import { cloneDeep } from 'lodash-es';
|
|
6
8
|
import { OxGristEditor } from '@operato/data-grist';
|
|
7
9
|
import { i18next } from '@operato/i18n';
|
|
@@ -13,7 +15,7 @@ let AnimationMapEditor = class AnimationMapEditor extends OxGristEditor {
|
|
|
13
15
|
return Object.assign({ name: `Animation : ${this.record.name}`, objectified: false }, overidable);
|
|
14
16
|
}
|
|
15
17
|
get editorTemplate() {
|
|
16
|
-
const value = typeof this.value === 'object' ?
|
|
18
|
+
const value = typeof this.value === 'object' ? JSON5.stringify(this.value) : this.value;
|
|
17
19
|
return html `<div tabindex="0">${value || ''}</div>`;
|
|
18
20
|
}
|
|
19
21
|
_onclick(e) {
|
|
@@ -37,7 +39,7 @@ let AnimationMapEditor = class AnimationMapEditor extends OxGristEditor {
|
|
|
37
39
|
composed: true,
|
|
38
40
|
detail: {
|
|
39
41
|
before: this.value,
|
|
40
|
-
after: !objectified ?
|
|
42
|
+
after: !objectified ? JSON5.stringify(newval, null, 2) : newval,
|
|
41
43
|
record: this.record,
|
|
42
44
|
column: this.column,
|
|
43
45
|
row: this.row
|
|
@@ -46,33 +48,91 @@ let AnimationMapEditor = class AnimationMapEditor extends OxGristEditor {
|
|
|
46
48
|
};
|
|
47
49
|
let value;
|
|
48
50
|
try {
|
|
49
|
-
value = !objectified && typeof this.value === 'string' ?
|
|
51
|
+
value = !objectified && typeof this.value === 'string' ? JSON5.parse(this.value) : cloneDeep(this.value || {});
|
|
50
52
|
}
|
|
51
53
|
catch (e) {
|
|
52
54
|
value = {};
|
|
53
55
|
}
|
|
54
56
|
let latestValue = value;
|
|
57
|
+
const editorRef = createRef();
|
|
55
58
|
const onConfirm = () => {
|
|
56
|
-
var _a;
|
|
59
|
+
var _a, _b, _c;
|
|
60
|
+
// key 없이 정의된 애니메이션이 있으면 확인(저장) 불가 — key 는 맵의 식별자.
|
|
61
|
+
if ((_b = (_a = editorRef.value) === null || _a === void 0 ? void 0 : _a.hasEmptyKey) === null || _b === void 0 ? void 0 : _b.call(_a)) {
|
|
62
|
+
document.dispatchEvent(new CustomEvent('notify', {
|
|
63
|
+
detail: {
|
|
64
|
+
level: 'warn',
|
|
65
|
+
message: i18next.t('text.animation_key_required', {
|
|
66
|
+
defaultValue: 'Enter a key for each animation definition.'
|
|
67
|
+
})
|
|
68
|
+
}
|
|
69
|
+
}));
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
57
72
|
confirmCallback(latestValue);
|
|
58
|
-
(
|
|
73
|
+
(_c = this.popup) === null || _c === void 0 ? void 0 : _c.close();
|
|
59
74
|
};
|
|
60
75
|
const template = html `
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
${
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
style="
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
<style>
|
|
77
|
+
.animation-map-popup ::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
78
|
+
.animation-map-popup ::-webkit-scrollbar-track { background-color: transparent; }
|
|
79
|
+
.animation-map-popup ::-webkit-scrollbar-thumb { background-color: var(--md-sys-color-outline, #888); border-radius: 0; }
|
|
80
|
+
.animation-map-popup ::-webkit-scrollbar-thumb:hover { background-color: var(--md-sys-color-outline-variant, #aaa); }
|
|
81
|
+
</style>
|
|
82
|
+
<div class="animation-map-popup" style="display:flex;flex-direction:row;height:100%;box-sizing:border-box;gap:0;">
|
|
83
|
+
<div style="display:flex;flex-direction:column;flex:2;overflow:hidden;">
|
|
84
|
+
<ox-input-animation-map
|
|
85
|
+
${ref(editorRef)}
|
|
86
|
+
.value=${value}
|
|
87
|
+
@change=${(e) => { latestValue = e.detail; }}
|
|
88
|
+
style="flex:1;overflow:auto;padding:12px 12px 0;"
|
|
89
|
+
></ox-input-animation-map>
|
|
90
|
+
<div style="display:flex;justify-content:flex-end;gap:8px;padding:12px;">
|
|
91
|
+
<button @click=${onConfirm}
|
|
92
|
+
style="padding:6px 16px;background:var(--md-sys-color-primary,#1976d2);color:#fff;border:none;border-radius:4px;cursor:pointer;">
|
|
93
|
+
${i18next.t('button.confirm') || 'Confirm'}
|
|
94
|
+
</button>
|
|
95
|
+
<button @click=${() => { var _a; return (_a = this.popup) === null || _a === void 0 ? void 0 : _a.close(); }}
|
|
96
|
+
style="padding:6px 16px;background:var(--md-sys-color-surface-variant,#e0e0e0);color:#333;border:none;border-radius:4px;cursor:pointer;">
|
|
97
|
+
${i18next.t('button.cancel') || 'Cancel'}
|
|
98
|
+
</button>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div style="flex:1;padding:12px 16px;overflow:auto;border-left:1px solid var(--md-sys-color-outline-variant,#ddd);
|
|
103
|
+
font-size:12px;line-height:1.6;color:var(--md-sys-color-on-surface-variant,#555);background:var(--md-sys-color-surface-container-low,#f4f4f4);">
|
|
104
|
+
<h3 style="margin:0 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);">Animation Types</h3>
|
|
105
|
+
<dl style="margin:0;padding:0;">
|
|
106
|
+
<dt style="font-weight:600;margin-top:6px;">Rotation</dt>
|
|
107
|
+
<dd style="margin:0 0 4px 8px;">Theta(°) 각도만큼 회전. 360°이면 1회전.</dd>
|
|
108
|
+
<dt style="font-weight:600;margin-top:6px;">Vibration</dt>
|
|
109
|
+
<dd style="margin:0 0 4px 8px;">Theta(°) 범위 내에서 좌우 진동.</dd>
|
|
110
|
+
<dt style="font-weight:600;margin-top:6px;">Heartbeat</dt>
|
|
111
|
+
<dd style="margin:0 0 4px 8px;">Scale 비율로 확대/축소 반복. 1.2 = 20% 확대.</dd>
|
|
112
|
+
<dt style="font-weight:600;margin-top:6px;">Moving</dt>
|
|
113
|
+
<dd style="margin:0 0 4px 8px;">X, Y 픽셀만큼 이동 후 복귀.</dd>
|
|
114
|
+
<dt style="font-weight:600;margin-top:6px;">Fade</dt>
|
|
115
|
+
<dd style="margin:0 0 4px 8px;">Start/End Alpha(0~1) 사이에서 투명도 변화.</dd>
|
|
116
|
+
</dl>
|
|
117
|
+
|
|
118
|
+
<h3 style="margin:18px 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);">Common Properties</h3>
|
|
119
|
+
<dl style="margin:0;padding:0;">
|
|
120
|
+
<dt style="font-weight:600;margin-top:6px;">Delay</dt>
|
|
121
|
+
<dd style="margin:0 0 4px 8px;">애니메이션 시작 전 대기 시간 (ms).</dd>
|
|
122
|
+
<dt style="font-weight:600;margin-top:6px;">Duration</dt>
|
|
123
|
+
<dd style="margin:0 0 4px 8px;">한 사이클 소요 시간 (ms). 1000 = 1초.</dd>
|
|
124
|
+
<dt style="font-weight:600;margin-top:6px;">Interval</dt>
|
|
125
|
+
<dd style="margin:0 0 4px 8px;">반복 사이 대기 시간 (ms).</dd>
|
|
126
|
+
<dt style="font-weight:600;margin-top:6px;">Delta</dt>
|
|
127
|
+
<dd style="margin:0 0 4px 8px;">보간 함수. linear(균일), quad(가속), circ(원형), back(오버슈트), bounce(바운스), elastic(탄성).</dd>
|
|
128
|
+
<dt style="font-weight:600;margin-top:6px;">Ease</dt>
|
|
129
|
+
<dd style="margin:0 0 4px 8px;">이징 방향. in(시작 느림), out(끝 느림), inout(양쪽 느림).</dd>
|
|
130
|
+
<dt style="font-weight:600;margin-top:6px;">Repeat</dt>
|
|
131
|
+
<dd style="margin:0 0 4px 8px;">체크 시 무한 반복.</dd>
|
|
132
|
+
<dt style="font-weight:600;margin-top:6px;">Autoplay</dt>
|
|
133
|
+
<dd style="margin:0 0 4px 8px;">체크 시 로드 즉시 자동 재생.</dd>
|
|
134
|
+
</dl>
|
|
135
|
+
|
|
76
136
|
</div>
|
|
77
137
|
</div>
|
|
78
138
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"]}
|
|
1
|
+
{"version":3,"file":"animation-map-editor.js","sourceRoot":"","sources":["../../client/data-grist/animation-map-editor.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAErC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAe,MAAM,gBAAgB,CAAA;AAGhD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,aAAa;IAGnD,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,WAAW,EAAE,KAAK,IACf,UAAU,EACd;IACH,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAA;QACvF,OAAO,IAAI,CAAA,qBAAqB,KAAK,IAAI,EAAE,QAAQ,CAAA;IACrD,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAExD,MAAM,eAAe,GAAG,CAAC,MAAW,EAAE,EAAE;YACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,KAAK;oBAClB,KAAK,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;oBAC/D,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,GAAG,EAAE,IAAI,CAAC,GAAG;iBACd;aACF,CAAC,CACH,CAAA;QACH,CAAC,CAAA;QAED,IAAI,KAAU,CAAA;QACd,IAAI,CAAC;YACH,KAAK,GAAG,CAAC,WAAW,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;QAChH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,GAAG,EAAE,CAAA;QACZ,CAAC;QAED,IAAI,WAAW,GAAG,KAAK,CAAA;QAEvB,MAAM,SAAS,GAAG,SAAS,EAAO,CAAA;QAElC,MAAM,SAAS,GAAG,GAAG,EAAE;;YACrB,kDAAkD;YAClD,IAAI,MAAA,MAAA,SAAS,CAAC,KAAK,0CAAE,WAAW,kDAAI,EAAE,CAAC;gBACrC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE;wBACN,KAAK,EAAE,MAAM;wBACb,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,6BAA6B,EAAE;4BAChD,YAAY,EAAE,4CAA4C;yBAC3D,CAAC;qBACH;iBACF,CAAC,CACH,CAAA;gBACD,OAAM;YACR,CAAC;YACD,eAAe,CAAC,WAAW,CAAC,CAAA;YAC5B,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAA;QACrB,CAAC,CAAA;QAED,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;;;;;;cAUX,GAAG,CAAC,SAAS,CAAC;qBACP,KAAK;sBACJ,CAAC,CAAc,EAAE,EAAE,GAAG,WAAW,GAAG,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC;;;;6BAIvC,SAAS;;gBAEtB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,SAAS;;6BAE3B,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAA,EAAA;;gBAEtC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCjD,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,KAAI,eAAe,EAAE;SACnD,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AA1JY,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA0J9B","sourcesContent":["import './ox-input-animation-map.js'\n\nimport JSON5 from 'json5'\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.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' ? JSON5.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 ? JSON5.stringify(newval, null, 2) : 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' ? JSON5.parse(this.value) : cloneDeep(this.value || {})\n } catch (e) {\n value = {}\n }\n\n let latestValue = value\n\n const editorRef = createRef<any>()\n\n const onConfirm = () => {\n // key 없이 정의된 애니메이션이 있으면 확인(저장) 불가 — key 는 맵의 식별자.\n if (editorRef.value?.hasEmptyKey?.()) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'warn',\n message: i18next.t('text.animation_key_required', {\n defaultValue: 'Enter a key for each animation definition.'\n })\n }\n })\n )\n return\n }\n confirmCallback(latestValue)\n this.popup?.close()\n }\n\n const template = html`\n <style>\n .animation-map-popup ::-webkit-scrollbar { width: 5px; height: 5px; }\n .animation-map-popup ::-webkit-scrollbar-track { background-color: transparent; }\n .animation-map-popup ::-webkit-scrollbar-thumb { background-color: var(--md-sys-color-outline, #888); border-radius: 0; }\n .animation-map-popup ::-webkit-scrollbar-thumb:hover { background-color: var(--md-sys-color-outline-variant, #aaa); }\n </style>\n <div class=\"animation-map-popup\" style=\"display:flex;flex-direction:row;height:100%;box-sizing:border-box;gap:0;\">\n <div style=\"display:flex;flex-direction:column;flex:2;overflow:hidden;\">\n <ox-input-animation-map\n ${ref(editorRef)}\n .value=${value}\n @change=${(e: CustomEvent) => { latestValue = e.detail }}\n style=\"flex:1;overflow:auto;padding:12px 12px 0;\"\n ></ox-input-animation-map>\n <div style=\"display:flex;justify-content:flex-end;gap:8px;padding: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 <div style=\"flex:1;padding:12px 16px;overflow:auto;border-left:1px solid var(--md-sys-color-outline-variant,#ddd);\n font-size:12px;line-height:1.6;color:var(--md-sys-color-on-surface-variant,#555);background:var(--md-sys-color-surface-container-low,#f4f4f4);\">\n <h3 style=\"margin:0 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);\">Animation Types</h3>\n <dl style=\"margin:0;padding:0;\">\n <dt style=\"font-weight:600;margin-top:6px;\">Rotation</dt>\n <dd style=\"margin:0 0 4px 8px;\">Theta(°) 각도만큼 회전. 360°이면 1회전.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Vibration</dt>\n <dd style=\"margin:0 0 4px 8px;\">Theta(°) 범위 내에서 좌우 진동.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Heartbeat</dt>\n <dd style=\"margin:0 0 4px 8px;\">Scale 비율로 확대/축소 반복. 1.2 = 20% 확대.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Moving</dt>\n <dd style=\"margin:0 0 4px 8px;\">X, Y 픽셀만큼 이동 후 복귀.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Fade</dt>\n <dd style=\"margin:0 0 4px 8px;\">Start/End Alpha(0~1) 사이에서 투명도 변화.</dd>\n </dl>\n\n <h3 style=\"margin:18px 0 10px;font-size:15px;font-weight:700;color:var(--md-sys-color-primary,#1976d2);\">Common Properties</h3>\n <dl style=\"margin:0;padding:0;\">\n <dt style=\"font-weight:600;margin-top:6px;\">Delay</dt>\n <dd style=\"margin:0 0 4px 8px;\">애니메이션 시작 전 대기 시간 (ms).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Duration</dt>\n <dd style=\"margin:0 0 4px 8px;\">한 사이클 소요 시간 (ms). 1000 = 1초.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Interval</dt>\n <dd style=\"margin:0 0 4px 8px;\">반복 사이 대기 시간 (ms).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Delta</dt>\n <dd style=\"margin:0 0 4px 8px;\">보간 함수. linear(균일), quad(가속), circ(원형), back(오버슈트), bounce(바운스), elastic(탄성).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Ease</dt>\n <dd style=\"margin:0 0 4px 8px;\">이징 방향. in(시작 느림), out(끝 느림), inout(양쪽 느림).</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Repeat</dt>\n <dd style=\"margin:0 0 4px 8px;\">체크 시 무한 반복.</dd>\n <dt style=\"font-weight:600;margin-top:6px;\">Autoplay</dt>\n <dd style=\"margin:0 0 4px 8px;\">체크 시 로드 즉시 자동 재생.</dd>\n </dl>\n\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"]}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* type 선택에 따라 관련 필드만 표시된다.
|
|
6
6
|
*/
|
|
7
7
|
import { __decorate, __metadata } from "tslib";
|
|
8
|
+
import '@operato/input/ox-input-angle.js';
|
|
8
9
|
import { css, html, LitElement } from 'lit';
|
|
9
10
|
import { customElement, property } from 'lit/decorators.js';
|
|
10
11
|
let OxInputAnimationConfig = class OxInputAnimationConfig extends LitElement {
|
|
@@ -13,18 +14,18 @@ let OxInputAnimationConfig = class OxInputAnimationConfig extends LitElement {
|
|
|
13
14
|
this.value = {};
|
|
14
15
|
}
|
|
15
16
|
render() {
|
|
16
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j
|
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
17
18
|
const v = this.value || {};
|
|
18
19
|
return html `
|
|
19
20
|
<div class="form">
|
|
20
21
|
<label>Type</label>
|
|
21
|
-
<select value-key="type"
|
|
22
|
-
<option value="">None</option>
|
|
23
|
-
<option value="rotation">Rotation</option>
|
|
24
|
-
<option value="vibration">Vibration</option>
|
|
25
|
-
<option value="heartbeat">Heartbeat</option>
|
|
26
|
-
<option value="moving">Moving</option>
|
|
27
|
-
<option value="fade">Fade</option>
|
|
22
|
+
<select value-key="type">
|
|
23
|
+
<option value="" ?selected=${!v.type}>None</option>
|
|
24
|
+
<option value="rotation" ?selected=${v.type === 'rotation'}>Rotation</option>
|
|
25
|
+
<option value="vibration" ?selected=${v.type === 'vibration'}>Vibration</option>
|
|
26
|
+
<option value="heartbeat" ?selected=${v.type === 'heartbeat'}>Heartbeat</option>
|
|
27
|
+
<option value="moving" ?selected=${v.type === 'moving'}>Moving</option>
|
|
28
|
+
<option value="fade" ?selected=${v.type === 'fade'}>Fade</option>
|
|
28
29
|
</select>
|
|
29
30
|
|
|
30
31
|
<label>Delay</label>
|
|
@@ -39,59 +40,59 @@ let OxInputAnimationConfig = class OxInputAnimationConfig extends LitElement {
|
|
|
39
40
|
${v.type === 'rotation' || v.type === 'vibration'
|
|
40
41
|
? html `
|
|
41
42
|
<label>Theta</label>
|
|
42
|
-
<input
|
|
43
|
+
<ox-input-angle value-key="theta" .value=${v.theta}></ox-input-angle>
|
|
43
44
|
`
|
|
44
45
|
: ''}
|
|
45
46
|
${v.type === 'heartbeat'
|
|
46
47
|
? html `
|
|
47
48
|
<label>Scale</label>
|
|
48
|
-
<input type="number" value-key="scale" .value=${String((
|
|
49
|
+
<input type="number" value-key="scale" .value=${String((_d = v.scale) !== null && _d !== void 0 ? _d : '')} />
|
|
49
50
|
`
|
|
50
51
|
: ''}
|
|
51
52
|
${v.type === 'moving'
|
|
52
53
|
? html `
|
|
53
54
|
<label>X</label>
|
|
54
|
-
<input type="number" value-key="x" .value=${String((
|
|
55
|
+
<input type="number" value-key="x" .value=${String((_e = v.x) !== null && _e !== void 0 ? _e : '')} />
|
|
55
56
|
<label>Y</label>
|
|
56
|
-
<input type="number" value-key="y" .value=${String((
|
|
57
|
+
<input type="number" value-key="y" .value=${String((_f = v.y) !== null && _f !== void 0 ? _f : '')} />
|
|
57
58
|
`
|
|
58
59
|
: ''}
|
|
59
60
|
${v.type === 'fade'
|
|
60
61
|
? html `
|
|
61
62
|
<label>Start α</label>
|
|
62
|
-
<input type="number" value-key="startAlpha" .value=${String((
|
|
63
|
+
<input type="number" value-key="startAlpha" .value=${String((_g = v.startAlpha) !== null && _g !== void 0 ? _g : '')} />
|
|
63
64
|
<label>End α</label>
|
|
64
|
-
<input type="number" value-key="endAlpha" .value=${String((
|
|
65
|
+
<input type="number" value-key="endAlpha" .value=${String((_h = v.endAlpha) !== null && _h !== void 0 ? _h : '')} />
|
|
65
66
|
`
|
|
66
67
|
: ''}
|
|
67
68
|
|
|
68
69
|
<label>Delta</label>
|
|
69
|
-
<select value-key="delta"
|
|
70
|
-
<option value="linear">linear</option>
|
|
71
|
-
<option value="quad">quad</option>
|
|
72
|
-
<option value="circ">circ</option>
|
|
73
|
-
<option value="back">back</option>
|
|
74
|
-
<option value="bounce">bounce</option>
|
|
75
|
-
<option value="elastic">elastic</option>
|
|
70
|
+
<select value-key="delta">
|
|
71
|
+
<option value="linear" ?selected=${(v.delta || 'linear') === 'linear'}>linear</option>
|
|
72
|
+
<option value="quad" ?selected=${v.delta === 'quad'}>quad</option>
|
|
73
|
+
<option value="circ" ?selected=${v.delta === 'circ'}>circ</option>
|
|
74
|
+
<option value="back" ?selected=${v.delta === 'back'}>back</option>
|
|
75
|
+
<option value="bounce" ?selected=${v.delta === 'bounce'}>bounce</option>
|
|
76
|
+
<option value="elastic" ?selected=${v.delta === 'elastic'}>elastic</option>
|
|
76
77
|
</select>
|
|
77
78
|
|
|
78
79
|
<label>Ease</label>
|
|
79
|
-
<select value-key="ease"
|
|
80
|
-
<option value="in">in</option>
|
|
81
|
-
<option value="out">out</option>
|
|
82
|
-
<option value="inout">inout</option>
|
|
80
|
+
<select value-key="ease">
|
|
81
|
+
<option value="in" ?selected=${(v.ease || 'in') === 'in'}>in</option>
|
|
82
|
+
<option value="out" ?selected=${v.ease === 'out'}>out</option>
|
|
83
|
+
<option value="inout" ?selected=${v.ease === 'inout'}>inout</option>
|
|
83
84
|
</select>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
</
|
|
85
|
+
<label></label>
|
|
86
|
+
<div class="checkbox-row">
|
|
87
|
+
<label>
|
|
88
|
+
<input type="checkbox" value-key="repeat" .checked=${!!v.repeat} />
|
|
89
|
+
Repeat
|
|
90
|
+
</label>
|
|
91
|
+
<label>
|
|
92
|
+
<input type="checkbox" value-key="autoplay" .checked=${(_j = v.autoplay) !== null && _j !== void 0 ? _j : true} />
|
|
93
|
+
Autoplay
|
|
94
|
+
</label>
|
|
95
|
+
</div>
|
|
95
96
|
</div>
|
|
96
97
|
`;
|
|
97
98
|
}
|
|
@@ -113,7 +114,11 @@ let OxInputAnimationConfig = class OxInputAnimationConfig extends LitElement {
|
|
|
113
114
|
else
|
|
114
115
|
val = el.value;
|
|
115
116
|
}
|
|
117
|
+
else if (el instanceof HTMLSelectElement) {
|
|
118
|
+
val = el.value;
|
|
119
|
+
}
|
|
116
120
|
else {
|
|
121
|
+
// custom element (ox-input-angle 등): value 프로퍼티 사용
|
|
117
122
|
val = el.value;
|
|
118
123
|
}
|
|
119
124
|
this.value = Object.assign(Object.assign({}, this.value), { [key]: val });
|
|
@@ -164,7 +169,7 @@ OxInputAnimationConfig.styles = css `
|
|
|
164
169
|
.checkbox-row {
|
|
165
170
|
display: flex;
|
|
166
171
|
align-items: center;
|
|
167
|
-
gap:
|
|
172
|
+
gap: 24px;
|
|
168
173
|
}
|
|
169
174
|
|
|
170
175
|
.checkbox-row label {
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
1
|
+
{"version":3,"file":"ox-input-animation-config.js","sourceRoot":"","sources":["../../client/data-grist/ox-input-animation-config.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * 단일 애니메이션 설정 폼 컴포넌트\n *\n * AnimationConfig 객체 하나를 폼으로 편집한다.\n * type 선택에 따라 관련 필드만 표시된다.\n */\n\nimport '@operato/input/ox-input-angle.js'\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: 24px;\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\">\n <option value=\"\" ?selected=${!v.type}>None</option>\n <option value=\"rotation\" ?selected=${v.type === 'rotation'}>Rotation</option>\n <option value=\"vibration\" ?selected=${v.type === 'vibration'}>Vibration</option>\n <option value=\"heartbeat\" ?selected=${v.type === 'heartbeat'}>Heartbeat</option>\n <option value=\"moving\" ?selected=${v.type === 'moving'}>Moving</option>\n <option value=\"fade\" ?selected=${v.type === '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 <ox-input-angle value-key=\"theta\" .value=${v.theta}></ox-input-angle>\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\">\n <option value=\"linear\" ?selected=${(v.delta || 'linear') === 'linear'}>linear</option>\n <option value=\"quad\" ?selected=${v.delta === 'quad'}>quad</option>\n <option value=\"circ\" ?selected=${v.delta === 'circ'}>circ</option>\n <option value=\"back\" ?selected=${v.delta === 'back'}>back</option>\n <option value=\"bounce\" ?selected=${v.delta === 'bounce'}>bounce</option>\n <option value=\"elastic\" ?selected=${v.delta === 'elastic'}>elastic</option>\n </select>\n\n <label>Ease</label>\n <select value-key=\"ease\">\n <option value=\"in\" ?selected=${(v.ease || 'in') === 'in'}>in</option>\n <option value=\"out\" ?selected=${v.ease === 'out'}>out</option>\n <option value=\"inout\" ?selected=${v.ease === 'inout'}>inout</option>\n </select>\n <label></label>\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 </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 if (el instanceof HTMLSelectElement) {\n val = el.value\n } else {\n // custom element (ox-input-angle 등): value 프로퍼티 사용\n val = (el as any).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"]}
|
|
@@ -4,12 +4,15 @@
|
|
|
4
4
|
* key-value 맵에서 value가 애니메이션 설정 객체인 경우를 위한 편집기.
|
|
5
5
|
* 각 행은 key 입력 + ox-input-animation-config 폼으로 구성된다.
|
|
6
6
|
*
|
|
7
|
-
* value
|
|
7
|
+
* value 구조 (실제 데이터):
|
|
8
8
|
* {
|
|
9
|
-
* "
|
|
10
|
-
* "
|
|
9
|
+
* "CRITICAL": "{ animation: { type: 'vibration', duration: 1000, ... }, icon: { ... } }",
|
|
10
|
+
* "WARN": "{ animation: { type: 'vibration', ... } }",
|
|
11
11
|
* "default": ""
|
|
12
12
|
* }
|
|
13
|
+
*
|
|
14
|
+
* 각 entry value는 JSON5 string이며, 내부에 animation 키가 있으면 그 속성만 폼에 표시.
|
|
15
|
+
* 저장 시 animation 외 다른 키(icon 등)는 보존됨.
|
|
13
16
|
*/
|
|
14
17
|
import '@material/web/icon/icon.js';
|
|
15
18
|
import './ox-input-animation-config.js';
|
|
@@ -36,7 +39,17 @@ type AnimationMap = {
|
|
|
36
39
|
};
|
|
37
40
|
export declare class OxInputAnimationMap extends LitElement {
|
|
38
41
|
static styles: import("lit").CSSResult;
|
|
39
|
-
value: AnimationMap;
|
|
42
|
+
set value(v: AnimationMap);
|
|
43
|
+
get value(): AnimationMap;
|
|
44
|
+
private _value;
|
|
45
|
+
private _parsed;
|
|
46
|
+
/**
|
|
47
|
+
* 확인(저장) 가능 여부 검증 — key 없이 정의된 애니메이션이 하나라도 있으면 true.
|
|
48
|
+
* 1) 기존 entry 행에 key(공백 포함)가 비어 있는 경우
|
|
49
|
+
* 2) 새 항목 행에서 애니메이션 설정은 채웠는데 key 를 입력하지 않은 경우
|
|
50
|
+
* key 는 애니메이션 맵의 식별자라, 비면 저장 시 항목이 유실/중복되므로 확인을 막는다.
|
|
51
|
+
*/
|
|
52
|
+
hasEmptyKey(): boolean;
|
|
40
53
|
render(): import("lit-html").TemplateResult<1>;
|
|
41
54
|
private _onConfigChange;
|
|
42
55
|
private _onNewKeyChange;
|
|
@@ -44,6 +57,7 @@ export declare class OxInputAnimationMap extends LitElement {
|
|
|
44
57
|
private _build;
|
|
45
58
|
private _add;
|
|
46
59
|
private _delete;
|
|
47
|
-
private
|
|
60
|
+
private _parseEntries;
|
|
61
|
+
private _normalize;
|
|
48
62
|
}
|
|
49
63
|
export {};
|