@things-factory/figure-ui 10.1.3 → 10.1.5
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/client/graphql/index.ts +87 -12
- package/client/modeller/figure-ask.ts +14 -4
- package/client/modeller/figure-canvas.ts +53 -0
- package/client/modeller/figure-history-panel.ts +324 -0
- package/client/modeller/figure-inspector.ts +78 -2
- package/client/modeller/figure-side.ts +22 -1
- package/client/modeller/figure-thumbnail.ts +78 -0
- package/client/pages/figure-list-page.ts +391 -195
- package/client/pages/figure-modeller-page.ts +114 -19
- package/client/types.ts +17 -0
- package/dist-client/graphql/index.d.ts +24 -4
- package/dist-client/graphql/index.js +70 -9
- package/dist-client/graphql/index.js.map +1 -1
- package/dist-client/modeller/figure-ask.js +14 -4
- package/dist-client/modeller/figure-ask.js.map +1 -1
- package/dist-client/modeller/figure-canvas.d.ts +11 -0
- package/dist-client/modeller/figure-canvas.js +42 -0
- package/dist-client/modeller/figure-canvas.js.map +1 -1
- package/dist-client/modeller/figure-history-panel.d.ts +42 -0
- package/dist-client/modeller/figure-history-panel.js +343 -0
- package/dist-client/modeller/figure-history-panel.js.map +1 -0
- package/dist-client/modeller/figure-inspector.d.ts +17 -0
- package/dist-client/modeller/figure-inspector.js +77 -2
- package/dist-client/modeller/figure-inspector.js.map +1 -1
- package/dist-client/modeller/figure-side.d.ts +7 -0
- package/dist-client/modeller/figure-side.js +43 -0
- package/dist-client/modeller/figure-side.js.map +1 -1
- package/dist-client/modeller/figure-thumbnail.d.ts +3 -0
- package/dist-client/modeller/figure-thumbnail.js +59 -0
- package/dist-client/modeller/figure-thumbnail.js.map +1 -0
- package/dist-client/pages/figure-list-page.d.ts +45 -17
- package/dist-client/pages/figure-list-page.js +374 -209
- package/dist-client/pages/figure-list-page.js.map +1 -1
- package/dist-client/pages/figure-modeller-page.d.ts +27 -0
- package/dist-client/pages/figure-modeller-page.js +109 -19
- package/dist-client/pages/figure-modeller-page.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -0
- package/dist-client/types.d.ts +19 -0
- package/dist-client/types.js.map +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -0
- package/package.json +5 -3
- package/translations/en.json +19 -0
- package/translations/ja.json +21 -2
- package/translations/ko.json +21 -2
- package/translations/ms.json +21 -2
- package/translations/zh.json +21 -2
- package/client/viewparts/figure-card.ts +0 -226
- package/dist-client/viewparts/figure-card.d.ts +0 -24
- package/dist-client/viewparts/figure-card.js +0 -221
- package/dist-client/viewparts/figure-card.js.map +0 -1
package/translations/ms.json
CHANGED
|
@@ -13,14 +13,17 @@
|
|
|
13
13
|
"button.move-part-down": "move down",
|
|
14
14
|
"button.move-part-up": "move up",
|
|
15
15
|
"button.new-figure": "new figure",
|
|
16
|
+
"button.release": "terbitkan",
|
|
16
17
|
"button.remove-part": "delete",
|
|
17
18
|
"button.reset-view": "reset",
|
|
19
|
+
"button.revert": "kembalikan",
|
|
18
20
|
"button.save": "save",
|
|
19
21
|
"button.see-the-trend-chart": "see the trend chart",
|
|
20
22
|
"button.snap": "snap",
|
|
21
23
|
"button.take-it": "apply",
|
|
22
24
|
"button.take-n-changes": "apply {n}",
|
|
23
25
|
"button.to-floor": "to floor",
|
|
26
|
+
"button.try-again": "cuba lagi",
|
|
24
27
|
"label.all": "all",
|
|
25
28
|
"label.axis-consistency": "visual consistency",
|
|
26
29
|
"label.axis-consistency-short": "consistency",
|
|
@@ -45,6 +48,7 @@
|
|
|
45
48
|
"label.budget-transparent": "transparent materials",
|
|
46
49
|
"label.budgets": "budgets",
|
|
47
50
|
"label.by-axis": "maturity by axis",
|
|
51
|
+
"label.capacity": "had penempatan",
|
|
48
52
|
"label.cast-shadow": "cast shadow",
|
|
49
53
|
"label.coordinate-ground": "coordinate ground",
|
|
50
54
|
"label.corner-round": "corner round",
|
|
@@ -54,7 +58,7 @@
|
|
|
54
58
|
"label.detail-level": "detail level",
|
|
55
59
|
"label.distinct-materials": "distinct materials",
|
|
56
60
|
"label.distinct-shapes": "distinct shapes",
|
|
57
|
-
"label.draft": "
|
|
61
|
+
"label.draft": "draf",
|
|
58
62
|
"label.draw-calls-at-100": "draw calls for 100",
|
|
59
63
|
"label.draw-calls-at-10k": "draw calls at 10k instances",
|
|
60
64
|
"label.emissive": "emissive",
|
|
@@ -68,12 +72,14 @@
|
|
|
68
72
|
"label.environment-studio": "studio",
|
|
69
73
|
"label.environment-sunny": "sunny",
|
|
70
74
|
"label.environment-warehouse": "warehouse",
|
|
75
|
+
"label.figure": "figura",
|
|
71
76
|
"label.findings": "findings",
|
|
72
77
|
"label.flat-shading": "flat shading",
|
|
73
78
|
"label.floor": "floor",
|
|
74
79
|
"label.follow-camera": "follow camera",
|
|
75
80
|
"label.guides": "guides",
|
|
76
81
|
"label.hemisphere-light": "hemisphere light",
|
|
82
|
+
"label.history": "sejarah",
|
|
77
83
|
"label.hollow-floor": "floor thickness",
|
|
78
84
|
"label.hollow-wall": "wall thickness",
|
|
79
85
|
"label.intensity": "intensity",
|
|
@@ -109,7 +115,9 @@
|
|
|
109
115
|
"label.primitive-wall": "wall",
|
|
110
116
|
"label.properties": "properties",
|
|
111
117
|
"label.proposed": "proposed",
|
|
112
|
-
"label.
|
|
118
|
+
"label.release": "terbitkan",
|
|
119
|
+
"label.released": "diterbitkan",
|
|
120
|
+
"label.released-versions": "versi diterbitkan",
|
|
113
121
|
"label.repeat-axis": "axis it repeats along",
|
|
114
122
|
"label.repeat-pitch": "pitch",
|
|
115
123
|
"label.reuse-trend": "reuse trend",
|
|
@@ -126,16 +134,19 @@
|
|
|
126
134
|
"label.sizing-scale": "scales proportionally",
|
|
127
135
|
"label.sizing-stretch": "stretches on one axis",
|
|
128
136
|
"label.sky-color": "sky color",
|
|
137
|
+
"label.state": "keadaan",
|
|
129
138
|
"label.status-colors": "lit colors (lamps · indicators)",
|
|
130
139
|
"label.tools": "align",
|
|
131
140
|
"label.transparent": "transparent",
|
|
132
141
|
"label.triangles": "triangles",
|
|
133
142
|
"label.triangles-at-100": "triangles for 100",
|
|
134
143
|
"label.triangles-at-10k": "triangles at 10k instances",
|
|
144
|
+
"label.type": "type",
|
|
135
145
|
"label.view": "settings",
|
|
136
146
|
"label.weight": "weight",
|
|
137
147
|
"text.add-a-shape": "click to add a part",
|
|
138
148
|
"text.all-lights-off": "both lights are off. only self-lit surfaces show; everything else goes black — this is how you check whether a lamp is lit.",
|
|
149
|
+
"text.already-released-edit-to-release-again": "sudah diterbitkan. sunting dan simpan untuk kembali ke draf, kemudian terbitkan semula.",
|
|
139
150
|
"text.ask-create-example": "e.g. a three-tier conveyor sorter",
|
|
140
151
|
"text.ask-revise-example": "e.g. bring it down to two material groups",
|
|
141
152
|
"text.ask-to-create": "create",
|
|
@@ -159,6 +170,7 @@
|
|
|
159
170
|
"text.collapse-parts-pane": "collapse the part list",
|
|
160
171
|
"text.collapse-properties-pane": "collapse the property pane",
|
|
161
172
|
"text.coordinate-ground-explained": "draws the origin and a grid on the floor",
|
|
173
|
+
"text.could-not-load-figures": "tidak dapat memuatkan senarai figura",
|
|
162
174
|
"text.delete-figure-confirm": "delete {name}? boards already using this type will no longer find it.",
|
|
163
175
|
"text.detail-level-explained": "declares how detailed this figure is meant to be. S simple suits signs and posts, M normal suits most equipment, L detailed suits the large equipment a view is built around. the level sets the part limit, and maturity checks whether the figure lives up to it.",
|
|
164
176
|
"text.editing-tools-come-next": "the shape palette and part editor are not built yet — for now you can open, review and save.",
|
|
@@ -207,6 +219,7 @@
|
|
|
207
219
|
"text.no-findings": "nothing to report.",
|
|
208
220
|
"text.not-measurable-yet": "not measurable",
|
|
209
221
|
"text.not-measured-yet": "not measured",
|
|
222
|
+
"text.nothing-released-yet": "belum ada versi diterbitkan. penerbitan menyimpan figura seperti sekarang sebagai satu versi.",
|
|
210
223
|
"text.on-by-default-explained": "the starting state when placed on a board. an instance switching it wins.",
|
|
211
224
|
"text.other-segment-count": "enter a value",
|
|
212
225
|
"text.part-limit-reached": "the detail level allows no more parts — raise the level or remove a part.",
|
|
@@ -217,11 +230,15 @@
|
|
|
217
230
|
"text.preview-blocked-by-errors": "cannot build — the figure breaks the format. the maturity tab has the reason.",
|
|
218
231
|
"text.preview-needs-a-part": "add a part and the board view appears here.",
|
|
219
232
|
"text.put-on-floor": "drop it to the floor (Z=0).",
|
|
233
|
+
"text.release-needs-a-save-first": "ada perubahan yang belum disimpan. penerbitan mengeluarkan apa yang telah disimpan, jadi simpan dahulu.",
|
|
234
|
+
"text.releasing": "sedang menerbitkan…",
|
|
220
235
|
"text.renaming-a-part-breaks-bindings": "the name is a stored identifier — changing it breaks bindings on instances already placed.",
|
|
221
236
|
"text.repeat-edits-the-unit": "you author one unit even though several appear. the gizmo moves the whole run, while size and rotation apply to that one unit — the pitch is declared separately so the layout stays. a single copy cannot be edited on its own.",
|
|
222
237
|
"text.repeat-pitch-explained": "centre to centre distance. it does not depend on the part size, so widening or turning the part leaves the layout alone.",
|
|
223
238
|
"text.report-appears-when-you-add-a-part": "weight and score appear once the figure has a part.",
|
|
224
239
|
"text.reuse-score-explained": "how much headroom is left in the declared limits. the one closest to its cap sets the score.",
|
|
240
|
+
"text.revert-to-version-confirm": "kembali ke v{version}? apa yang sedang anda kerjakan akan digantikan dengan versi itu.",
|
|
241
|
+
"text.save-the-figure-before-releasing": "figura ini belum disimpan. simpan dahulu untuk menerbitkannya.",
|
|
225
242
|
"text.saving": "saving",
|
|
226
243
|
"text.search-figure-by-name-or-type": "search by name or type",
|
|
227
244
|
"text.select-a-part-to-edit": "select a part to edit it here.",
|
|
@@ -240,8 +257,10 @@
|
|
|
240
257
|
"text.type-name-already-taken": "the type name {type} is already in use. pick another one — it cannot be changed later.",
|
|
241
258
|
"text.type-name-cannot-change": "the type name is a stored identifier and cannot be changed after creation.",
|
|
242
259
|
"text.unsaved-changes": "unsaved",
|
|
260
|
+
"text.version-number": "v{version}",
|
|
243
261
|
"text.view-settings-are-not-saved": "these settings are not saved. they make the view comfortable to work in and do not travel with the asset.",
|
|
244
262
|
"text.what-a-figure-is": "a Figure is a 3D component you author. Compose it from simple shapes and it becomes a component you can place on a board, sharing shape and material across every instance.",
|
|
263
|
+
"text.what-changed-in-this-release": "apa yang berubah dalam versi ini",
|
|
245
264
|
"title.figures": "figures",
|
|
246
265
|
"title.new-figure": "new figure"
|
|
247
266
|
}
|
package/translations/zh.json
CHANGED
|
@@ -13,14 +13,17 @@
|
|
|
13
13
|
"button.move-part-down": "move down",
|
|
14
14
|
"button.move-part-up": "move up",
|
|
15
15
|
"button.new-figure": "new figure",
|
|
16
|
+
"button.release": "发布",
|
|
16
17
|
"button.remove-part": "delete",
|
|
17
18
|
"button.reset-view": "reset",
|
|
19
|
+
"button.revert": "回退",
|
|
18
20
|
"button.save": "save",
|
|
19
21
|
"button.see-the-trend-chart": "see the trend chart",
|
|
20
22
|
"button.snap": "snap",
|
|
21
23
|
"button.take-it": "apply",
|
|
22
24
|
"button.take-n-changes": "apply {n}",
|
|
23
25
|
"button.to-floor": "to floor",
|
|
26
|
+
"button.try-again": "重试",
|
|
24
27
|
"label.all": "all",
|
|
25
28
|
"label.axis-consistency": "visual consistency",
|
|
26
29
|
"label.axis-consistency-short": "consistency",
|
|
@@ -45,6 +48,7 @@
|
|
|
45
48
|
"label.budget-transparent": "transparent materials",
|
|
46
49
|
"label.budgets": "budgets",
|
|
47
50
|
"label.by-axis": "maturity by axis",
|
|
51
|
+
"label.capacity": "布置上限",
|
|
48
52
|
"label.cast-shadow": "cast shadow",
|
|
49
53
|
"label.coordinate-ground": "coordinate ground",
|
|
50
54
|
"label.corner-round": "corner round",
|
|
@@ -54,7 +58,7 @@
|
|
|
54
58
|
"label.detail-level": "detail level",
|
|
55
59
|
"label.distinct-materials": "distinct materials",
|
|
56
60
|
"label.distinct-shapes": "distinct shapes",
|
|
57
|
-
"label.draft": "
|
|
61
|
+
"label.draft": "草稿",
|
|
58
62
|
"label.draw-calls-at-100": "draw calls for 100",
|
|
59
63
|
"label.draw-calls-at-10k": "draw calls at 10k instances",
|
|
60
64
|
"label.emissive": "emissive",
|
|
@@ -68,12 +72,14 @@
|
|
|
68
72
|
"label.environment-studio": "studio",
|
|
69
73
|
"label.environment-sunny": "sunny",
|
|
70
74
|
"label.environment-warehouse": "warehouse",
|
|
75
|
+
"label.figure": "图形",
|
|
71
76
|
"label.findings": "findings",
|
|
72
77
|
"label.flat-shading": "flat shading",
|
|
73
78
|
"label.floor": "floor",
|
|
74
79
|
"label.follow-camera": "follow camera",
|
|
75
80
|
"label.guides": "guides",
|
|
76
81
|
"label.hemisphere-light": "hemisphere light",
|
|
82
|
+
"label.history": "历史",
|
|
77
83
|
"label.hollow-floor": "floor thickness",
|
|
78
84
|
"label.hollow-wall": "wall thickness",
|
|
79
85
|
"label.intensity": "intensity",
|
|
@@ -109,7 +115,9 @@
|
|
|
109
115
|
"label.primitive-wall": "wall",
|
|
110
116
|
"label.properties": "properties",
|
|
111
117
|
"label.proposed": "proposed",
|
|
112
|
-
"label.
|
|
118
|
+
"label.release": "发布",
|
|
119
|
+
"label.released": "已发布",
|
|
120
|
+
"label.released-versions": "已发布版本",
|
|
113
121
|
"label.repeat-axis": "axis it repeats along",
|
|
114
122
|
"label.repeat-pitch": "pitch",
|
|
115
123
|
"label.reuse-trend": "reuse trend",
|
|
@@ -126,16 +134,19 @@
|
|
|
126
134
|
"label.sizing-scale": "scales proportionally",
|
|
127
135
|
"label.sizing-stretch": "stretches on one axis",
|
|
128
136
|
"label.sky-color": "sky color",
|
|
137
|
+
"label.state": "状态",
|
|
129
138
|
"label.status-colors": "lit colors (lamps · indicators)",
|
|
130
139
|
"label.tools": "align",
|
|
131
140
|
"label.transparent": "transparent",
|
|
132
141
|
"label.triangles": "triangles",
|
|
133
142
|
"label.triangles-at-100": "triangles for 100",
|
|
134
143
|
"label.triangles-at-10k": "triangles at 10k instances",
|
|
144
|
+
"label.type": "类型",
|
|
135
145
|
"label.view": "settings",
|
|
136
146
|
"label.weight": "weight",
|
|
137
147
|
"text.add-a-shape": "click to add a part",
|
|
138
148
|
"text.all-lights-off": "both lights are off. only self-lit surfaces show; everything else goes black — this is how you check whether a lamp is lit.",
|
|
149
|
+
"text.already-released-edit-to-release-again": "已经发布。修改并保存会回到草稿,然后可以再次发布。",
|
|
139
150
|
"text.ask-create-example": "e.g. a three-tier conveyor sorter",
|
|
140
151
|
"text.ask-revise-example": "e.g. bring it down to two material groups",
|
|
141
152
|
"text.ask-to-create": "create",
|
|
@@ -159,6 +170,7 @@
|
|
|
159
170
|
"text.collapse-parts-pane": "collapse the part list",
|
|
160
171
|
"text.collapse-properties-pane": "collapse the property pane",
|
|
161
172
|
"text.coordinate-ground-explained": "draws the origin and a grid on the floor",
|
|
173
|
+
"text.could-not-load-figures": "无法加载列表",
|
|
162
174
|
"text.delete-figure-confirm": "delete {name}? boards already using this type will no longer find it.",
|
|
163
175
|
"text.detail-level-explained": "declares how detailed this figure is meant to be. S simple suits signs and posts, M normal suits most equipment, L detailed suits the large equipment a view is built around. the level sets the part limit, and maturity checks whether the figure lives up to it.",
|
|
164
176
|
"text.editing-tools-come-next": "the shape palette and part editor are not built yet — for now you can open, review and save.",
|
|
@@ -207,6 +219,7 @@
|
|
|
207
219
|
"text.no-findings": "nothing to report.",
|
|
208
220
|
"text.not-measurable-yet": "not measurable",
|
|
209
221
|
"text.not-measured-yet": "not measured",
|
|
222
|
+
"text.nothing-released-yet": "还没有发布过。发布后会把当前的图形保留为一个版本。",
|
|
210
223
|
"text.on-by-default-explained": "the starting state when placed on a board. an instance switching it wins.",
|
|
211
224
|
"text.other-segment-count": "enter a value",
|
|
212
225
|
"text.part-limit-reached": "the detail level allows no more parts — raise the level or remove a part.",
|
|
@@ -217,11 +230,15 @@
|
|
|
217
230
|
"text.preview-blocked-by-errors": "cannot build — the figure breaks the format. the maturity tab has the reason.",
|
|
218
231
|
"text.preview-needs-a-part": "add a part and the board view appears here.",
|
|
219
232
|
"text.put-on-floor": "drop it to the floor (Z=0).",
|
|
233
|
+
"text.release-needs-a-save-first": "有未保存的修改。发布的是已保存的内容,请先保存。",
|
|
234
|
+
"text.releasing": "正在发布…",
|
|
220
235
|
"text.renaming-a-part-breaks-bindings": "the name is a stored identifier — changing it breaks bindings on instances already placed.",
|
|
221
236
|
"text.repeat-edits-the-unit": "you author one unit even though several appear. the gizmo moves the whole run, while size and rotation apply to that one unit — the pitch is declared separately so the layout stays. a single copy cannot be edited on its own.",
|
|
222
237
|
"text.repeat-pitch-explained": "centre to centre distance. it does not depend on the part size, so widening or turning the part leaves the layout alone.",
|
|
223
238
|
"text.report-appears-when-you-add-a-part": "weight and score appear once the figure has a part.",
|
|
224
239
|
"text.reuse-score-explained": "how much headroom is left in the declared limits. the one closest to its cap sets the score.",
|
|
240
|
+
"text.revert-to-version-confirm": "回退到第{version}版?当前正在编辑的内容会被该版本替换。",
|
|
241
|
+
"text.save-the-figure-before-releasing": "尚未保存。保存后即可发布。",
|
|
225
242
|
"text.saving": "saving",
|
|
226
243
|
"text.search-figure-by-name-or-type": "search by name or type",
|
|
227
244
|
"text.select-a-part-to-edit": "select a part to edit it here.",
|
|
@@ -240,8 +257,10 @@
|
|
|
240
257
|
"text.type-name-already-taken": "the type name {type} is already in use. pick another one — it cannot be changed later.",
|
|
241
258
|
"text.type-name-cannot-change": "the type name is a stored identifier and cannot be changed after creation.",
|
|
242
259
|
"text.unsaved-changes": "unsaved",
|
|
260
|
+
"text.version-number": "第{version}版",
|
|
243
261
|
"text.view-settings-are-not-saved": "these settings are not saved. they make the view comfortable to work in and do not travel with the asset.",
|
|
244
262
|
"text.what-a-figure-is": "a Figure is a 3D component you author. Compose it from simple shapes and it becomes a component you can place on a board, sharing shape and material across every instance.",
|
|
263
|
+
"text.what-changed-in-this-release": "这一版有什么变化",
|
|
245
264
|
"title.figures": "figures",
|
|
246
265
|
"title.new-figure": "new figure"
|
|
247
266
|
}
|
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
import '@material/web/icon/icon.js'
|
|
2
|
-
|
|
3
|
-
import { css, html, LitElement } from 'lit'
|
|
4
|
-
import { customElement, property } from 'lit/decorators.js'
|
|
5
|
-
|
|
6
|
-
import { i18next, localize } from '@operato/i18n'
|
|
7
|
-
|
|
8
|
-
import { capacityFrom } from '../modeller/scene-budget.js'
|
|
9
|
-
import type { Figure } from '../types.js'
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* 이 값 아래면 카드에서 색으로 눈에 띄게 한다.
|
|
13
|
-
*
|
|
14
|
-
* **등급 경계가 아니다.** 등급(A~D)은 `figure-model` 의 `scoreOf` 가 정하고 화면은
|
|
15
|
-
* 그것을 베끼지 않는다. 이것은 「눈에 걸리게 할 선」이고, 화면의 판단이다.
|
|
16
|
-
*/
|
|
17
|
-
const ATTENTION_BELOW = 50
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Figure 한 장.
|
|
21
|
-
*
|
|
22
|
-
* 카드에 무엇을 실을지가 이 화면의 값이다. 이름과 썸네일만 실으면 저작자는 **무게를
|
|
23
|
-
* 모른 채** 고르게 된다. 삼각형 수와 점수를 함께 실어, 「이걸 100개 놓아도 되나」를
|
|
24
|
-
* 목록에서 판단할 수 있게 한다.
|
|
25
|
-
*/
|
|
26
|
-
@customElement('figure-card')
|
|
27
|
-
export class FigureCard extends localize(i18next)(LitElement) {
|
|
28
|
-
static styles = css`
|
|
29
|
-
:host {
|
|
30
|
-
display: flex;
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
overflow: hidden;
|
|
33
|
-
background-color: var(--md-sys-color-surface-container-lowest);
|
|
34
|
-
border: 1px solid var(--md-sys-color-outline-variant);
|
|
35
|
-
border-radius: 6px;
|
|
36
|
-
cursor: pointer;
|
|
37
|
-
}
|
|
38
|
-
:host(:hover) {
|
|
39
|
-
border-color: var(--md-sys-color-primary);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
div[thumbnail] {
|
|
43
|
-
position: relative;
|
|
44
|
-
aspect-ratio: 4 / 3;
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: center;
|
|
47
|
-
justify-content: center;
|
|
48
|
-
background-color: var(--md-sys-color-surface-container);
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
}
|
|
51
|
-
div[thumbnail] img {
|
|
52
|
-
width: 100%;
|
|
53
|
-
height: 100%;
|
|
54
|
-
object-fit: contain;
|
|
55
|
-
}
|
|
56
|
-
/* 썸네일이 아직 없는 것을 빈 사각형으로 두지 않는다 — 왜 없는지 말한다 */
|
|
57
|
-
div[thumbnail] span[nothumb] {
|
|
58
|
-
display: flex;
|
|
59
|
-
flex-direction: column;
|
|
60
|
-
align-items: center;
|
|
61
|
-
gap: 4px;
|
|
62
|
-
font: var(--label-font, inherit);
|
|
63
|
-
color: var(--md-sys-color-outline-variant);
|
|
64
|
-
}
|
|
65
|
-
div[thumbnail] span[nothumb] md-icon {
|
|
66
|
-
--md-icon-size: 28px;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
span[state] {
|
|
70
|
-
position: absolute;
|
|
71
|
-
top: 6px;
|
|
72
|
-
left: 6px;
|
|
73
|
-
padding: 1px 7px;
|
|
74
|
-
font: var(--label-font, inherit);
|
|
75
|
-
font-size: 0.7rem;
|
|
76
|
-
color: var(--md-sys-color-on-secondary-container);
|
|
77
|
-
background-color: var(--md-sys-color-secondary-container);
|
|
78
|
-
border-radius: 6px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
button[remove] {
|
|
82
|
-
position: absolute;
|
|
83
|
-
top: 4px;
|
|
84
|
-
right: 4px;
|
|
85
|
-
display: none;
|
|
86
|
-
padding: 3px;
|
|
87
|
-
color: var(--md-sys-color-on-surface);
|
|
88
|
-
background-color: var(--md-sys-color-surface);
|
|
89
|
-
border: 1px solid var(--md-sys-color-outline-variant);
|
|
90
|
-
border-radius: 6px;
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
}
|
|
93
|
-
button[remove] md-icon {
|
|
94
|
-
--md-icon-size: 16px;
|
|
95
|
-
}
|
|
96
|
-
:host(:hover) button[remove] {
|
|
97
|
-
display: block;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
div[body] {
|
|
101
|
-
display: flex;
|
|
102
|
-
flex-direction: column;
|
|
103
|
-
gap: 2px;
|
|
104
|
-
padding: 8px 10px 10px 10px;
|
|
105
|
-
}
|
|
106
|
-
span[name] {
|
|
107
|
-
font: var(--theme-font, inherit);
|
|
108
|
-
font-size: 0.92rem;
|
|
109
|
-
color: var(--md-sys-color-on-surface);
|
|
110
|
-
overflow: hidden;
|
|
111
|
-
text-overflow: ellipsis;
|
|
112
|
-
white-space: nowrap;
|
|
113
|
-
}
|
|
114
|
-
/* 타입 이름은 저장되는 식별자다 — 표시 이름과 다르게 보이게 둔다 */
|
|
115
|
-
code[type] {
|
|
116
|
-
font-family: var(--mono-font, monospace);
|
|
117
|
-
font-size: 0.72rem;
|
|
118
|
-
color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
div[metrics] {
|
|
122
|
-
display: flex;
|
|
123
|
-
align-items: center;
|
|
124
|
-
gap: 10px;
|
|
125
|
-
margin-top: 6px;
|
|
126
|
-
font: var(--label-font, inherit);
|
|
127
|
-
font-size: 0.72rem;
|
|
128
|
-
color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
|
|
129
|
-
}
|
|
130
|
-
/* 「몇 개까지」가 카드의 머리다 — 저작면 머리와 같은 말이라야 한다 */
|
|
131
|
-
span[fits] {
|
|
132
|
-
margin-right: auto;
|
|
133
|
-
font-size: 0.82rem;
|
|
134
|
-
font-weight: 700;
|
|
135
|
-
color: var(--md-sys-color-primary);
|
|
136
|
-
}
|
|
137
|
-
span[grade] {
|
|
138
|
-
padding: 0 6px;
|
|
139
|
-
font-weight: 700;
|
|
140
|
-
color: var(--md-sys-color-on-primary-container);
|
|
141
|
-
background-color: var(--md-sys-color-primary-container);
|
|
142
|
-
border-radius: 6px;
|
|
143
|
-
}
|
|
144
|
-
/* 점수가 낮으면 색으로도 말한다 — 숫자만으로는 눈에 안 들어온다 */
|
|
145
|
-
span[grade][low] {
|
|
146
|
-
color: var(--md-sys-color-on-error, #fff);
|
|
147
|
-
background-color: var(--md-sys-color-error);
|
|
148
|
-
}
|
|
149
|
-
span[unmeasured] {
|
|
150
|
-
font-style: italic;
|
|
151
|
-
color: var(--md-sys-color-outline-variant);
|
|
152
|
-
}
|
|
153
|
-
`
|
|
154
|
-
|
|
155
|
-
@property({ type: Object }) figure!: Figure
|
|
156
|
-
|
|
157
|
-
render() {
|
|
158
|
-
const figure = this.figure
|
|
159
|
-
if (!figure) {
|
|
160
|
-
return html``
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
return html`
|
|
164
|
-
<div thumbnail @click=${() => this.dispatchEvent(new CustomEvent('open'))}>
|
|
165
|
-
${figure.thumbnail
|
|
166
|
-
? html`<img src=${figure.thumbnail} alt=${figure.name} />`
|
|
167
|
-
: html`
|
|
168
|
-
<span nothumb>
|
|
169
|
-
<md-icon>deployed_code</md-icon>
|
|
170
|
-
${i18next.t('text.thumbnail-not-made-yet')}
|
|
171
|
-
</span>
|
|
172
|
-
`}
|
|
173
|
-
${figure.state === 'draft' ? html`<span state>${i18next.t('label.draft')}</span>` : ''}
|
|
174
|
-
<button
|
|
175
|
-
remove
|
|
176
|
-
title=${i18next.t('button.delete')}
|
|
177
|
-
@click=${(e: Event) => {
|
|
178
|
-
e.stopPropagation()
|
|
179
|
-
this.dispatchEvent(new CustomEvent('remove'))
|
|
180
|
-
}}
|
|
181
|
-
>
|
|
182
|
-
<md-icon>delete</md-icon>
|
|
183
|
-
</button>
|
|
184
|
-
</div>
|
|
185
|
-
|
|
186
|
-
<div body @click=${() => this.dispatchEvent(new CustomEvent('open'))}>
|
|
187
|
-
<span name title=${figure.name}>${figure.name}</span>
|
|
188
|
-
<code type>${figure.type}</code>
|
|
189
|
-
|
|
190
|
-
<div metrics>${this.renderMetrics()}</div>
|
|
191
|
-
</div>
|
|
192
|
-
`
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
* 무게와 점수.
|
|
197
|
-
*
|
|
198
|
-
* 아직 재지 않은 것(정본을 저장한 적이 없는 것)을 **0 으로 보여 주지 않는다.**
|
|
199
|
-
* 0 은 「가볍다」는 뜻이 되어 버린다. 재지 않았다고 말한다.
|
|
200
|
-
*/
|
|
201
|
-
private renderMetrics() {
|
|
202
|
-
const { score, triangles, groups } = this.figure
|
|
203
|
-
|
|
204
|
-
if (score == null || triangles == null) {
|
|
205
|
-
return html`<span unmeasured>${i18next.t('text.not-measured-yet')}</span>`
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
// 목록이 저작면과 **같은 말**을 하게 한다. 저작면 머리가 「몇 개까지」이면 카드도
|
|
209
|
-
// 그것이어야 한다 — 같은 형상을 두 화면이 다른 잣대로 말하면 무엇을 고칠지 모른다.
|
|
210
|
-
const capacity = capacityFrom(groups ?? 0, triangles)
|
|
211
|
-
|
|
212
|
-
// 등급 문자(A~D)를 여기서 만들지 않는다. 경계는 `figure-model` 의 `scoreOf` 가
|
|
213
|
-
// 정하고, 그것을 화면이 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 보여 준다.
|
|
214
|
-
// 목록에는 점수 숫자만 싣는다. 등급이 필요해지면 `figure-model` 이
|
|
215
|
-
// `gradeOf(score)` 를 내보내야 한다 — 그때 그것을 쓴다.
|
|
216
|
-
return html`
|
|
217
|
-
${capacity
|
|
218
|
-
? html`<span fits title=${i18next.t('text.reuse-score-explained')}>
|
|
219
|
-
${i18next.t('text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
|
|
220
|
-
</span>`
|
|
221
|
-
: ''}
|
|
222
|
-
<span grade ?low=${score < ATTENTION_BELOW}>${Math.round(score)}</span>
|
|
223
|
-
<span>${i18next.t('text.triangle-count', { count: triangles })}</span>
|
|
224
|
-
`
|
|
225
|
-
}
|
|
226
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import '@material/web/icon/icon.js';
|
|
2
|
-
import { LitElement } from 'lit';
|
|
3
|
-
import type { Figure } from '../types.js';
|
|
4
|
-
declare const FigureCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
|
|
5
|
-
/**
|
|
6
|
-
* Figure 한 장.
|
|
7
|
-
*
|
|
8
|
-
* 카드에 무엇을 실을지가 이 화면의 값이다. 이름과 썸네일만 실으면 저작자는 **무게를
|
|
9
|
-
* 모른 채** 고르게 된다. 삼각형 수와 점수를 함께 실어, 「이걸 100개 놓아도 되나」를
|
|
10
|
-
* 목록에서 판단할 수 있게 한다.
|
|
11
|
-
*/
|
|
12
|
-
export declare class FigureCard extends FigureCard_base {
|
|
13
|
-
static styles: import("lit").CSSResult;
|
|
14
|
-
figure: Figure;
|
|
15
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
16
|
-
/**
|
|
17
|
-
* 무게와 점수.
|
|
18
|
-
*
|
|
19
|
-
* 아직 재지 않은 것(정본을 저장한 적이 없는 것)을 **0 으로 보여 주지 않는다.**
|
|
20
|
-
* 0 은 「가볍다」는 뜻이 되어 버린다. 재지 않았다고 말한다.
|
|
21
|
-
*/
|
|
22
|
-
private renderMetrics;
|
|
23
|
-
}
|
|
24
|
-
export {};
|