@things-factory/figure-library 10.1.248 → 10.1.253
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/editors/ox-property-editor-figure-data.d.ts +1 -3
- package/dist-client/editors/ox-property-editor-figure-data.js +10 -98
- package/dist-client/editors/ox-property-editor-figure-data.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -8
- package/translations/en.json +1 -35
- package/translations/es.json +1 -35
- package/translations/ja.json +1 -35
- package/translations/ko.json +1 -35
- package/translations/ms.json +1 -35
- package/translations/zh.json +1 -35
- package/dist-client/figure-data-report.d.ts +0 -53
- package/dist-client/figure-data-report.js +0 -93
- package/dist-client/figure-data-report.js.map +0 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { OxPropertyEditor, type PropertySpec } from '@operato/property-editor';
|
|
2
|
+
import '@things-factory/figure-viewer/dist-client/figure-data-list.js';
|
|
2
3
|
/**
|
|
3
4
|
* 「Figure 데이터」 on the board's property panel (data binding design, decision 3): what the selected figure is given
|
|
4
5
|
* and what it makes of it -- its data shape as a tree, each value now and where it came from, what each moves, a control
|
|
@@ -8,12 +9,9 @@ import { OxPropertyEditor, type PropertySpec } from '@operato/property-editor';
|
|
|
8
9
|
*/
|
|
9
10
|
export declare class OxPropertyEditorFigureData extends OxPropertyEditor {
|
|
10
11
|
static styles: import("lit").CSSResult[];
|
|
11
|
-
private copied;
|
|
12
12
|
editorTemplate(value: unknown, spec: PropertySpec): import("lit-html").TemplateResult<1>;
|
|
13
|
-
private renderRow;
|
|
14
13
|
/** The selected figure's report; none for a figure with no data shape, or a selection of several. */
|
|
15
14
|
private reportOf;
|
|
16
|
-
private copy;
|
|
17
15
|
}
|
|
18
16
|
declare global {
|
|
19
17
|
interface HTMLElementTagNameMap {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { __decorate
|
|
2
|
-
import { css, html
|
|
3
|
-
import { customElement
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
|
4
4
|
import { i18next } from '@operato/i18n';
|
|
5
5
|
import { OxPropertyEditor } from '@operato/property-editor';
|
|
6
|
-
import
|
|
6
|
+
import '@things-factory/figure-viewer/dist-client/figure-data-list.js';
|
|
7
|
+
import { figureDataReportOf } from '@things-factory/figure-viewer/dist-client/figure-data-report.js';
|
|
7
8
|
/**
|
|
8
9
|
* 「Figure 데이터」 on the board's property panel (data binding design, decision 3): what the selected figure is given
|
|
9
10
|
* and what it makes of it -- its data shape as a tree, each value now and where it came from, what each moves, a control
|
|
@@ -12,89 +13,23 @@ import { behaviorTargetOf, figureDataReportOf } from '../figure-data-report.js';
|
|
|
12
13
|
* values from 「데이터 값」 above.
|
|
13
14
|
*/
|
|
14
15
|
let OxPropertyEditorFigureData = class OxPropertyEditorFigureData extends OxPropertyEditor {
|
|
15
|
-
constructor() {
|
|
16
|
-
super(...arguments);
|
|
17
|
-
this.copied = false;
|
|
18
|
-
}
|
|
19
16
|
static { this.styles = [
|
|
20
17
|
...OxPropertyEditor.styles,
|
|
21
18
|
css `
|
|
22
|
-
|
|
19
|
+
figure-data-list,
|
|
20
|
+
[hint] {
|
|
23
21
|
grid-column: 1 / -1;
|
|
24
|
-
display: grid;
|
|
25
|
-
gap: 6px;
|
|
26
|
-
font-size: var(--ui-t-small, 11.5px);
|
|
27
|
-
}
|
|
28
|
-
ul {
|
|
29
|
-
margin: 0;
|
|
30
|
-
padding: 0;
|
|
31
|
-
list-style: none;
|
|
32
|
-
display: grid;
|
|
33
|
-
gap: 2px;
|
|
34
|
-
}
|
|
35
|
-
li {
|
|
36
|
-
display: flex;
|
|
37
|
-
flex-wrap: wrap;
|
|
38
|
-
gap: 0 6px;
|
|
39
|
-
align-items: baseline;
|
|
40
|
-
}
|
|
41
|
-
li [meta] {
|
|
42
|
-
margin-left: auto;
|
|
43
|
-
color: var(--md-sys-color-on-surface-variant);
|
|
44
|
-
text-align: right;
|
|
45
22
|
}
|
|
46
|
-
[source] {
|
|
47
|
-
padding: 0 4px;
|
|
48
|
-
border-radius: 4px;
|
|
49
|
-
background: var(--md-sys-color-surface-container-high);
|
|
50
|
-
color: var(--md-sys-color-on-surface-variant);
|
|
51
|
-
}
|
|
52
|
-
[moves],
|
|
53
23
|
[hint] {
|
|
54
|
-
|
|
24
|
+
margin: 0;
|
|
25
|
+
font-size: var(--ui-t-small, 11.5px);
|
|
55
26
|
color: var(--md-sys-color-on-surface-variant);
|
|
56
27
|
}
|
|
57
|
-
[warn] {
|
|
58
|
-
color: var(--md-sys-color-error);
|
|
59
|
-
}
|
|
60
|
-
button {
|
|
61
|
-
justify-self: start;
|
|
62
|
-
}
|
|
63
28
|
`
|
|
64
29
|
]; }
|
|
65
30
|
editorTemplate(value, spec) {
|
|
66
31
|
const report = this.reportOf(value);
|
|
67
|
-
|
|
68
|
-
return html `<div report><p hint>${i18next.t('figure.text.board-data-none')}</p></div>`;
|
|
69
|
-
return html `<div report>
|
|
70
|
-
<ul>
|
|
71
|
-
${report.rows.map(row => this.renderRow(row))}
|
|
72
|
-
</ul>
|
|
73
|
-
${report.refused.length
|
|
74
|
-
? html `<p warn>
|
|
75
|
-
${report.refused.map(r => r.issues?.length
|
|
76
|
-
? r.issues.map(i => i18next.t('figure.text.board-data-value-' + i.reason, { path: i.path || '-' })).join(' · ')
|
|
77
|
-
: i18next.t('figure.text.board-data-refused', { reason: r.reason }))}
|
|
78
|
-
</p>`
|
|
79
|
-
: nothing}
|
|
80
|
-
${report.unused.length ? html `<p hint>${i18next.t('figure.text.board-data-unused', { fields: report.unused.join(', ') })}</p>` : nothing}
|
|
81
|
-
<button @click=${() => this.copy(report)}>${i18next.t(this.copied ? 'figure.button.board-data-copied' : 'figure.button.board-data-copy-example')}</button>
|
|
82
|
-
</div>`;
|
|
83
|
-
}
|
|
84
|
-
renderRow(row) {
|
|
85
|
-
const shown = (v) => (typeof v === 'boolean' ? i18next.t(v ? 'figure.label.board-data-true' : 'figure.label.board-data-false') : String(v));
|
|
86
|
-
return html `<li style="padding-left: ${row.depth * 12}px">
|
|
87
|
-
<span>${row.name}${row.label ? html ` <small>${row.label}</small>` : nothing}</span>
|
|
88
|
-
<span meta>
|
|
89
|
-
${row.value !== undefined ? html `<b>${shown(row.value)}</b>` : row.count !== undefined ? html `<b>${i18next.t('figure.label.board-data-count', { count: row.count })}</b>` : nothing}
|
|
90
|
-
${row.source ? html `<span source>${i18next.t('figure.label.board-data-source-' + row.source)}</span>` : nothing}
|
|
91
|
-
${row.value === undefined && row.count === undefined ? kindWord(row.node) : nothing}
|
|
92
|
-
</span>
|
|
93
|
-
${row.behaviors.length
|
|
94
|
-
? html `<span moves>→ ${row.behaviors.map(b => i18next.t('figure.label.board-data-behavior-' + b.kind, { name: behaviorTargetOf(b) })).join(', ')}</span>`
|
|
95
|
-
: nothing}
|
|
96
|
-
${row.heldByBoard.length ? html `<span warn moves>${i18next.t('figure.text.board-data-held', { controls: row.heldByBoard.join(', ') })}</span>` : nothing}
|
|
97
|
-
</li>`;
|
|
32
|
+
return report ? html `<figure-data-list .report=${report}></figure-data-list>` : html `<p hint>${i18next.t('figure.text.board-data-none')}</p>`;
|
|
98
33
|
}
|
|
99
34
|
/** The selected figure's report; none for a figure with no data shape, or a selection of several. */
|
|
100
35
|
reportOf(value) {
|
|
@@ -112,32 +47,9 @@ let OxPropertyEditorFigureData = class OxPropertyEditorFigureData extends OxProp
|
|
|
112
47
|
refused: inputs.diagnostics()
|
|
113
48
|
});
|
|
114
49
|
}
|
|
115
|
-
async copy(report) {
|
|
116
|
-
try {
|
|
117
|
-
await navigator.clipboard.writeText(JSON.stringify(report.example, null, 2));
|
|
118
|
-
this.copied = true;
|
|
119
|
-
setTimeout(() => (this.copied = false), 1500);
|
|
120
|
-
}
|
|
121
|
-
catch {
|
|
122
|
-
/* No clipboard here (an insecure page): the button stays as it was. */
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
50
|
};
|
|
126
|
-
__decorate([
|
|
127
|
-
state(),
|
|
128
|
-
__metadata("design:type", Object)
|
|
129
|
-
], OxPropertyEditorFigureData.prototype, "copied", void 0);
|
|
130
51
|
OxPropertyEditorFigureData = __decorate([
|
|
131
52
|
customElement('ox-property-editor-figure-data')
|
|
132
53
|
], OxPropertyEditorFigureData);
|
|
133
54
|
export { OxPropertyEditorFigureData };
|
|
134
|
-
/** A field's kind as the section says it, with a number's unit and range and a closed text's values. */
|
|
135
|
-
function kindWord(node) {
|
|
136
|
-
const kind = i18next.t('figure.label.board-data-kind-' + node.kind);
|
|
137
|
-
if (node.kind === 'number')
|
|
138
|
-
return [kind, node.unit, node.min !== undefined || node.max !== undefined ? `${node.min ?? ''}~${node.max ?? ''}` : ''].filter(Boolean).join(' ');
|
|
139
|
-
if (node.kind === 'text' && node.values)
|
|
140
|
-
return `${kind} (${node.values.join(', ')})`;
|
|
141
|
-
return kind;
|
|
142
|
-
}
|
|
143
55
|
//# sourceMappingURL=ox-property-editor-figure-data.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-property-editor-figure-data.js","sourceRoot":"","sources":["../../client/editors/ox-property-editor-figure-data.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { OxPropertyEditor, type PropertySpec } from '@operato/property-editor'\nimport type { FigureAsset, FigureDataNode, FigureDataValue } from '@hatiolab/figure-model'\n\nimport { behaviorTargetOf, figureDataReportOf, type FigureDataReport, type FigureDataSnapshot } from '../figure-data-report.js'\n\n/** The parts of a placed figure the section reads: things-scene's FigureInstance, as the property panel holds it. */\ninterface PlacedFigure {\n state?: { data?: unknown; parameters?: Record<string, unknown> }\n figureInputs?: {\n asset: FigureAsset\n dataValues: FigureDataSnapshot['values']\n diagnostics(): FigureDataSnapshot['refused']\n }\n}\n\n/**\n * 「Figure 데이터」 on the board's property panel (data binding design, decision 3): what the selected figure is given\n * and what it makes of it -- its data shape as a tree, each value now and where it came from, what each moves, a control\n * the board's own state values hold, why data was refused, the fields the data has that the shape does not name, and an\n * example to copy. It changes nothing: the figure's data comes from the board's data source or a mapping, its saved\n * values from 「데이터 값」 above.\n */\n@customElement('ox-property-editor-figure-data')\nexport class OxPropertyEditorFigureData extends OxPropertyEditor {\n static styles = [\n ...OxPropertyEditor.styles,\n css`\n [report] {\n grid-column: 1 / -1;\n display: grid;\n gap: 6px;\n font-size: var(--ui-t-small, 11.5px);\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: grid;\n gap: 2px;\n }\n li {\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: baseline;\n }\n li [meta] {\n margin-left: auto;\n color: var(--md-sys-color-on-surface-variant);\n text-align: right;\n }\n [source] {\n padding: 0 4px;\n border-radius: 4px;\n background: var(--md-sys-color-surface-container-high);\n color: var(--md-sys-color-on-surface-variant);\n }\n [moves],\n [hint] {\n width: 100%;\n color: var(--md-sys-color-on-surface-variant);\n }\n [warn] {\n color: var(--md-sys-color-error);\n }\n button {\n justify-self: start;\n }\n `\n ]\n\n @state() private copied = false\n\n editorTemplate(value: unknown, spec: PropertySpec) {\n const report = this.reportOf(value)\n if (!report) return html`<div report><p hint>${i18next.t('figure.text.board-data-none')}</p></div>`\n return html`<div report>\n <ul>\n ${report.rows.map(row => this.renderRow(row))}\n </ul>\n ${report.refused.length\n ? html`<p warn>\n ${report.refused.map(r =>\n r.issues?.length\n ? r.issues.map(i => i18next.t('figure.text.board-data-value-' + i.reason, { path: i.path || '-' })).join(' · ')\n : i18next.t('figure.text.board-data-refused', { reason: r.reason })\n )}\n </p>`\n : nothing}\n ${report.unused.length ? html`<p hint>${i18next.t('figure.text.board-data-unused', { fields: report.unused.join(', ') })}</p>` : nothing}\n <button @click=${() => this.copy(report)}>${i18next.t(this.copied ? 'figure.button.board-data-copied' : 'figure.button.board-data-copy-example')}</button>\n </div>`\n }\n\n private renderRow(row: FigureDataReport['rows'][number]) {\n const shown = (v: FigureDataValue) => (typeof v === 'boolean' ? i18next.t(v ? 'figure.label.board-data-true' : 'figure.label.board-data-false') : String(v))\n return html`<li style=\"padding-left: ${row.depth * 12}px\">\n <span>${row.name}${row.label ? html` <small>${row.label}</small>` : nothing}</span>\n <span meta>\n ${row.value !== undefined ? html`<b>${shown(row.value)}</b>` : row.count !== undefined ? html`<b>${i18next.t('figure.label.board-data-count', { count: row.count })}</b>` : nothing}\n ${row.source ? html`<span source>${i18next.t('figure.label.board-data-source-' + row.source)}</span>` : nothing}\n ${row.value === undefined && row.count === undefined ? kindWord(row.node) : nothing}\n </span>\n ${row.behaviors.length\n ? html`<span moves>→ ${row.behaviors.map(b => i18next.t('figure.label.board-data-behavior-' + b.kind, { name: behaviorTargetOf(b) })).join(', ')}</span>`\n : nothing}\n ${row.heldByBoard.length ? html`<span warn moves>${i18next.t('figure.text.board-data-held', { controls: row.heldByBoard.join(', ') })}</span>` : nothing}\n </li>`\n }\n\n /** The selected figure's report; none for a figure with no data shape, or a selection of several. */\n private reportOf(value: unknown): FigureDataReport | null {\n let selected: unknown[] | undefined\n this.dispatchEvent(new CustomEvent('i-need-selected', { bubbles: true, composed: true, detail: { callback: (s: unknown[]) => (selected = s) } }))\n const figure = selected?.length === 1 ? (selected[0] as PlacedFigure) : undefined\n const inputs = figure?.figureInputs\n if (!inputs) return null\n return figureDataReportOf({\n asset: inputs.asset,\n data: value ?? figure!.state?.data,\n parameters: figure!.state?.parameters ?? null,\n values: inputs.dataValues,\n refused: inputs.diagnostics()\n })\n }\n\n private async copy(report: FigureDataReport) {\n try {\n await navigator.clipboard.writeText(JSON.stringify(report.example, null, 2))\n this.copied = true\n setTimeout(() => (this.copied = false), 1500)\n } catch {\n /* No clipboard here (an insecure page): the button stays as it was. */\n }\n }\n}\n\n/** A field's kind as the section says it, with a number's unit and range and a closed text's values. */\nfunction kindWord(node: FigureDataNode): string {\n const kind = i18next.t('figure.label.board-data-kind-' + node.kind)\n if (node.kind === 'number') return [kind, node.unit, node.min !== undefined || node.max !== undefined ? `${node.min ?? ''}~${node.max ?? ''}` : ''].filter(Boolean).join(' ')\n if (node.kind === 'text' && node.values) return `${kind} (${node.values.join(', ')})`\n return kind\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-property-editor-figure-data': OxPropertyEditorFigureData\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-property-editor-figure-data.js","sourceRoot":"","sources":["../../client/editors/ox-property-editor-figure-data.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAqB,MAAM,0BAA0B,CAAA;AAG9E,OAAO,+DAA+D,CAAA;AACtE,OAAO,EAAE,kBAAkB,EAAkD,MAAM,iEAAiE,CAAA;AAYpJ;;;;;;GAMG;AAEI,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,gBAAgB;aACvD,WAAM,GAAG;QACd,GAAG,gBAAgB,CAAC,MAAM;QAC1B,GAAG,CAAA;;;;;;;;;;KAUF;KACF,AAbY,CAaZ;IAED,cAAc,CAAC,KAAc,EAAE,IAAkB;QAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACnC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,MAAM,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAA,WAAW,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,MAAM,CAAA;IAC/I,CAAC;IAED,qGAAqG;IAC7F,QAAQ,CAAC,KAAc;QAC7B,IAAI,QAA+B,CAAA;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA;QACjJ,MAAM,MAAM,GAAG,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAE,QAAQ,CAAC,CAAC,CAAkB,CAAC,CAAC,CAAC,SAAS,CAAA;QACjF,MAAM,MAAM,GAAG,MAAM,EAAE,YAAY,CAAA;QACnC,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA;QACxB,OAAO,kBAAkB,CAAC;YACxB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,IAAI,EAAE,KAAK,IAAI,MAAO,CAAC,KAAK,EAAE,IAAI;YAClC,UAAU,EAAE,MAAO,CAAC,KAAK,EAAE,UAAU,IAAI,IAAI;YAC7C,MAAM,EAAE,MAAM,CAAC,UAAU;YACzB,OAAO,EAAE,MAAM,CAAC,WAAW,EAAE;SAC9B,CAAC,CAAA;IACJ,CAAC;;AAnCU,0BAA0B;IADtC,aAAa,CAAC,gCAAgC,CAAC;GACnC,0BAA0B,CAoCtC","sourcesContent":["import { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { OxPropertyEditor, type PropertySpec } from '@operato/property-editor'\nimport type { FigureAsset } from '@hatiolab/figure-model'\n\nimport '@things-factory/figure-viewer/dist-client/figure-data-list.js'\nimport { figureDataReportOf, type FigureDataReport, type FigureDataSnapshot } from '@things-factory/figure-viewer/dist-client/figure-data-report.js'\n\n/** The parts of a placed figure the section reads: things-scene's FigureInstance, as the property panel holds it. */\ninterface PlacedFigure {\n state?: { data?: unknown; parameters?: Record<string, unknown> }\n figureInputs?: {\n asset: FigureAsset\n dataValues: FigureDataSnapshot['values']\n diagnostics(): FigureDataSnapshot['refused']\n }\n}\n\n/**\n * 「Figure 데이터」 on the board's property panel (data binding design, decision 3): what the selected figure is given\n * and what it makes of it -- its data shape as a tree, each value now and where it came from, what each moves, a control\n * the board's own state values hold, why data was refused, the fields the data has that the shape does not name, and an\n * example to copy. It changes nothing: the figure's data comes from the board's data source or a mapping, its saved\n * values from 「데이터 값」 above.\n */\n@customElement('ox-property-editor-figure-data')\nexport class OxPropertyEditorFigureData extends OxPropertyEditor {\n static styles = [\n ...OxPropertyEditor.styles,\n css`\n figure-data-list,\n [hint] {\n grid-column: 1 / -1;\n }\n [hint] {\n margin: 0;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--md-sys-color-on-surface-variant);\n }\n `\n ]\n\n editorTemplate(value: unknown, spec: PropertySpec) {\n const report = this.reportOf(value)\n return report ? html`<figure-data-list .report=${report}></figure-data-list>` : html`<p hint>${i18next.t('figure.text.board-data-none')}</p>`\n }\n\n /** The selected figure's report; none for a figure with no data shape, or a selection of several. */\n private reportOf(value: unknown): FigureDataReport | null {\n let selected: unknown[] | undefined\n this.dispatchEvent(new CustomEvent('i-need-selected', { bubbles: true, composed: true, detail: { callback: (s: unknown[]) => (selected = s) } }))\n const figure = selected?.length === 1 ? (selected[0] as PlacedFigure) : undefined\n const inputs = figure?.figureInputs\n if (!inputs) return null\n return figureDataReportOf({\n asset: inputs.asset,\n data: value ?? figure!.state?.data,\n parameters: figure!.state?.parameters ?? null,\n values: inputs.dataValues,\n refused: inputs.diagnostics()\n })\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-property-editor-figure-data': OxPropertyEditorFigureData\n }\n}\n"]}
|