@hkdigital/lib-sveltekit 0.1.5 → 0.1.6
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/README.md +127 -127
- package/dist/classes/data/IterableTree.js +243 -243
- package/dist/classes/data/Selector.js +190 -190
- package/dist/classes/data/index.js +2 -2
- package/dist/classes/index.js +3 -3
- package/dist/classes/promise/HkPromise.js +377 -377
- package/dist/classes/promise/index.js +1 -1
- package/dist/classes/stores/SubscribersCount.js +107 -107
- package/dist/classes/stores/index.js +1 -1
- package/dist/classes/streams/LogTransformStream.js +19 -19
- package/dist/classes/streams/ServerEventsStore.js +110 -110
- package/dist/classes/streams/TimeStampSource.js +26 -26
- package/dist/classes/streams/index.js +3 -3
- package/dist/classes/svelte/audio/AudioLoader.svelte.js +58 -58
- package/dist/classes/svelte/audio/AudioScene.svelte.js +282 -282
- package/dist/classes/svelte/audio/mocks.js +35 -35
- package/dist/classes/svelte/final-state-machine/FiniteStateMachine.svelte.js +133 -133
- package/dist/classes/svelte/final-state-machine/index.js +1 -1
- package/dist/classes/svelte/image/ImageLoader.svelte.js +47 -47
- package/dist/classes/svelte/image/ImageScene.svelte.js +253 -253
- package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js +152 -152
- package/dist/classes/svelte/image/index.js +4 -4
- package/dist/classes/svelte/image/mocks.js +35 -35
- package/dist/classes/svelte/image/typedef.js +8 -8
- package/dist/classes/svelte/loading-state-machine/LoadingStateMachine.svelte.js +109 -109
- package/dist/classes/svelte/loading-state-machine/constants.js +16 -16
- package/dist/classes/svelte/loading-state-machine/index.js +3 -3
- package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js +331 -331
- package/dist/classes/svelte/network-loader/constants.js +3 -3
- package/dist/classes/svelte/network-loader/index.js +3 -3
- package/dist/classes/svelte/network-loader/mocks.js +30 -30
- package/dist/classes/svelte/network-loader/typedef.js +8 -8
- package/dist/components/area/HkArea.svelte +49 -49
- package/dist/components/area/HkArea.svelte.d.ts +0 -14
- package/dist/components/area/HkGridArea.svelte +77 -77
- package/dist/components/area/HkGridArea.svelte.d.ts +0 -22
- package/dist/components/area/index.js +2 -2
- package/dist/components/boxes/game-box/GameBox.svelte +112 -112
- package/dist/components/boxes/game-box/GameBox.svelte.d.ts +0 -15
- package/dist/components/boxes/game-box/gamebox.util.js +83 -83
- package/dist/components/boxes/index.js +2 -2
- package/dist/components/boxes/virtual-viewport/VirtualViewport.svelte +199 -199
- package/dist/components/boxes/virtual-viewport/VirtualViewport.svelte.d.ts +0 -22
- package/dist/components/buttons/button/Button.svelte +75 -75
- package/dist/components/buttons/button/Button.svelte.d.ts +0 -21
- package/dist/components/buttons/button-text/TextButton.svelte +21 -21
- package/dist/components/buttons/button-text/TextButton.svelte.d.ts +0 -7
- package/dist/components/buttons/index.js +2 -2
- package/dist/components/hkdev/blocks/TextBlock.svelte +46 -46
- package/dist/components/hkdev/blocks/TextBlock.svelte.d.ts +0 -13
- package/dist/components/hkdev/buttons/CheckButton.svelte +62 -62
- package/dist/components/hkdev/buttons/CheckButton.svelte.d.ts +0 -18
- package/dist/components/icon/HkIcon.svelte +86 -86
- package/dist/components/icon/HkIcon.svelte.d.ts +0 -12
- package/dist/components/icon/HkTabIcon.svelte +116 -116
- package/dist/components/icon/HkTabIcon.svelte.d.ts +0 -21
- package/dist/components/icon/index.js +4 -4
- package/dist/components/icon/typedef.js +16 -16
- package/dist/components/image/ImageBox.svelte +208 -208
- package/dist/components/image/ImageBox.svelte.d.ts +0 -19
- package/dist/components/image/index.js +5 -5
- package/dist/components/image/typedef.js +32 -32
- package/dist/components/index.js +2 -2
- package/dist/components/inputs/index.js +1 -1
- package/dist/components/inputs/text-input/TestTextInput.svelte__ +102 -102
- package/dist/components/inputs/text-input/TextInput.svelte +226 -226
- package/dist/components/inputs/text-input/TextInput.svelte.d.ts +0 -28
- package/dist/components/inputs/text-input/TextInput.svelte___ +83 -83
- package/dist/components/inputs/text-input/assets/IconInvalid.svelte +14 -14
- package/dist/components/inputs/text-input/assets/IconValid.svelte +12 -12
- package/dist/components/layout/HkAppLayout.state.svelte.js +25 -25
- package/dist/components/layout/HkAppLayout.svelte +251 -251
- package/dist/components/layout/HkAppLayout.svelte.d.ts +0 -11
- package/dist/components/layout/HkGridLayers.svelte +82 -82
- package/dist/components/layout/HkGridLayers.svelte.d.ts +0 -23
- package/dist/components/layout/index.js +9 -9
- package/dist/components/panels/index.js +1 -1
- package/dist/components/panels/plain-panel/PlainPanel.svelte +33 -33
- package/dist/components/panels/plain-panel/PlainPanel.svelte.d.ts +0 -12
- package/dist/components/rows/index.js +3 -3
- package/dist/components/rows/panel-grid-row/PanelGridRow.svelte +104 -104
- package/dist/components/rows/panel-grid-row/PanelGridRow.svelte.d.ts +0 -14
- package/dist/components/rows/panel-row-2/PanelRow2.svelte +40 -40
- package/dist/components/rows/panel-row-2/PanelRow2.svelte.d.ts +0 -14
- package/dist/components/tab-bar/HkTabBar.state.svelte.js +149 -149
- package/dist/components/tab-bar/HkTabBar.svelte +74 -74
- package/dist/components/tab-bar/HkTabBar.svelte.d.ts +0 -18
- package/dist/components/tab-bar/HkTabBarSelector.state.svelte.js +93 -93
- package/dist/components/tab-bar/HkTabBarSelector.svelte +49 -49
- package/dist/components/tab-bar/HkTabBarSelector.svelte.d.ts +0 -19
- package/dist/components/tab-bar/index.js +17 -17
- package/dist/components/tab-bar/typedef.js +8 -8
- package/dist/components/widgets/compare-left-right/CompareLeftRight.svelte +179 -179
- package/dist/components/widgets/compare-left-right/CompareLeftRight.svelte.d.ts +0 -10
- package/dist/components/widgets/compare-left-right/index.js +1 -1
- package/dist/components/widgets/scale-control/index.js +1 -1
- package/dist/config/imagetools-config.js +189 -189
- package/dist/config/imagetools.d.ts +71 -71
- package/dist/config/typedef.js +8 -8
- package/dist/constants/errors/api.js +9 -9
- package/dist/constants/errors/generic.js +5 -5
- package/dist/constants/errors/index.js +3 -3
- package/dist/constants/errors/jwt.js +5 -5
- package/dist/constants/http/headers.js +6 -6
- package/dist/constants/http/index.js +2 -2
- package/dist/constants/http/methods.js +2 -2
- package/dist/constants/index.js +3 -3
- package/dist/constants/mime/application.js +5 -5
- package/dist/constants/mime/audio.js +13 -13
- package/dist/constants/mime/image.js +3 -3
- package/dist/constants/mime/index.js +4 -4
- package/dist/constants/mime/text.js +2 -2
- package/dist/constants/regexp/index.js +31 -31
- package/dist/constants/regexp/inspiratie.js__ +95 -95
- package/dist/constants/regexp/text.js +49 -49
- package/dist/constants/regexp/user.js +32 -32
- package/dist/constants/regexp/web.js +3 -3
- package/dist/constants/state-labels/input-states.js +11 -11
- package/dist/constants/state-labels/submit-states.js +4 -4
- package/dist/constants/time.js +28 -28
- package/dist/css/tw-prose.postcss__ +259 -259
- package/dist/css/utilities.postcss +43 -43
- package/dist/design/design-config.js +73 -73
- package/dist/design/tailwind-theme-extend.d.ts +4 -4
- package/dist/design/tailwind-theme-extend.js +151 -151
- package/dist/schemas/index.js +1 -1
- package/dist/schemas/validate-url.js +180 -180
- package/dist/server/index.js +1 -1
- package/dist/server/logger.js +94 -94
- package/dist/states/index.js +1 -1
- package/dist/states/navigation.svelte.js +55 -55
- package/dist/stores/index.js +1 -1
- package/dist/stores/theme.js +80 -80
- package/dist/themes/hkdev/components/blocks/text-block.postcss +40 -40
- package/dist/themes/hkdev/components/boxes/game-box.postcss +13 -13
- package/dist/themes/hkdev/components/buttons/button-text.postcss +34 -34
- package/dist/themes/hkdev/components/buttons/button.postcss +138 -138
- package/dist/themes/hkdev/components/buttons/skip-button.postcss +8 -8
- package/dist/themes/hkdev/components/inputs/text-input.postcss +108 -108
- package/dist/themes/hkdev/components/panels/plain-panel.postcss +46 -46
- package/dist/themes/hkdev/components/panels/speech-bubble.postcss +52 -52
- package/dist/themes/hkdev/components/rows/panel-grid-row.postcss +7 -7
- package/dist/themes/hkdev/components/rows/panel-row-2.postcss +9 -9
- package/dist/themes/hkdev/components.postcss +55 -55
- package/dist/themes/hkdev/debug.postcss +1 -1
- package/dist/themes/hkdev/global/layout.postcss +39 -39
- package/dist/themes/hkdev/global/on-colors.postcss +53 -53
- package/dist/themes/hkdev/global/text.postcss__ +34 -34
- package/dist/themes/hkdev/global/vars.postcss__ +7 -7
- package/dist/themes/hkdev/globals.postcss +11 -11
- package/dist/themes/hkdev/responsive.postcss +12 -12
- package/dist/themes/hkdev/theme-ext.js +15 -15
- package/dist/themes/hkdev/theme.js +227 -227
- package/dist/themes/index.js +1 -1
- package/dist/util/array/index.js +455 -455
- package/dist/util/compare/index.js +247 -247
- package/dist/util/css/css-vars.js +83 -83
- package/dist/util/css/index.js +1 -1
- package/dist/util/design-system/components/states.js +22 -22
- package/dist/util/design-system/css/clamp.d.ts +2 -2
- package/dist/util/design-system/css/clamp.js +66 -66
- package/dist/util/design-system/css/root-design-vars.js +100 -100
- package/dist/util/design-system/index.js +5 -5
- package/dist/util/design-system/layout/scaling.js +97 -97
- package/dist/util/design-system/tailwind.js +289 -289
- package/dist/util/expect/arrays.js +47 -47
- package/dist/util/expect/index.js +259 -259
- package/dist/util/expect/primitives.js +55 -55
- package/dist/util/expect/url.js +60 -60
- package/dist/util/function/index.js +218 -218
- package/dist/util/http/errors.js +97 -97
- package/dist/util/http/headers.js +45 -45
- package/dist/util/http/http-request.js +273 -273
- package/dist/util/http/index.js +22 -22
- package/dist/util/http/json-request.js +143 -143
- package/dist/util/http/mocks.js +65 -65
- package/dist/util/http/response.js +228 -228
- package/dist/util/http/url.js +52 -52
- package/dist/util/image/index.js +86 -86
- package/dist/util/index.js +2 -2
- package/dist/util/is/index.js +140 -140
- package/dist/util/iterate/index.js +234 -234
- package/dist/util/object/index.js +1361 -1361
- package/dist/util/singleton/index.js +97 -97
- package/dist/util/string/index.js +184 -184
- package/dist/util/svelte/index.js +2 -2
- package/dist/util/svelte/observe/index.js +49 -49
- package/dist/util/svelte/state-context/index.js +83 -83
- package/dist/util/svelte/wait/index.js +38 -38
- package/dist/util/sveltekit/index.js +1 -1
- package/dist/util/sveltekit/route-folders/index.js +82 -82
- package/dist/util/time/index.js +339 -339
- package/dist/valibot/date.js__ +10 -10
- package/dist/valibot/index.js +9 -9
- package/dist/valibot/url.js +95 -95
- package/dist/valibot/user.js +23 -23
- package/dist/zod/all.js +33 -33
- package/dist/zod/generic.js +11 -11
- package/dist/zod/javascript.js +32 -32
- package/dist/zod/user.js +16 -16
- package/dist/zod/web.js +52 -52
- package/package.json +99 -99
- package/dist/themes/hkdev/components/buttons/button.postcss__ +0 -40
- package/dist/themes/hkdev/components/buttons/button.postcss___ +0 -91
@@ -1,253 +1,253 @@
|
|
1
|
-
/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
|
2
|
-
|
3
|
-
import * as expect from '../../../util/expect/index.js';
|
4
|
-
|
5
|
-
import {
|
6
|
-
LoadingStateMachine,
|
7
|
-
STATE_INITIAL,
|
8
|
-
STATE_LOADING,
|
9
|
-
STATE_UNLOADING,
|
10
|
-
STATE_LOADED,
|
11
|
-
STATE_CANCELLED,
|
12
|
-
STATE_ERROR,
|
13
|
-
LOAD,
|
14
|
-
// CANCEL,
|
15
|
-
ERROR,
|
16
|
-
LOADED,
|
17
|
-
UNLOAD,
|
18
|
-
INITIAL
|
19
|
-
} from '../loading-state-machine/index.js';
|
20
|
-
|
21
|
-
import ImageLoader from './ImageLoader.svelte.js';
|
22
|
-
|
23
|
-
/**
|
24
|
-
* @typedef {object} SourceConfig
|
25
|
-
* // property ...
|
26
|
-
*/
|
27
|
-
|
28
|
-
/**
|
29
|
-
* @typedef {object} ImageSource
|
30
|
-
* @property {string} label
|
31
|
-
* @property {ImageLoader} imageLoader
|
32
|
-
* @property {ImageMeta} [imageMeta]
|
33
|
-
*/
|
34
|
-
|
35
|
-
export default class ImageScene {
|
36
|
-
#state = new LoadingStateMachine();
|
37
|
-
|
38
|
-
// @note this exported state is set by $effect's
|
39
|
-
state = $state(STATE_INITIAL);
|
40
|
-
|
41
|
-
// @note this exported state is set by $effect's
|
42
|
-
loaded = $derived.by(() => {
|
43
|
-
return this.state === STATE_LOADED;
|
44
|
-
});
|
45
|
-
|
46
|
-
/** @type {ImageSource[]} */
|
47
|
-
#imageSources = $state([]);
|
48
|
-
|
49
|
-
#progress = $derived.by(() => {
|
50
|
-
// console.log('update progress');
|
51
|
-
|
52
|
-
let totalSize = 0;
|
53
|
-
let totalBytesLoaded = 0;
|
54
|
-
let sourcesLoaded = 0;
|
55
|
-
|
56
|
-
const sources = this.#imageSources;
|
57
|
-
const numberOfSources = sources.length;
|
58
|
-
|
59
|
-
for (let j = 0; j < numberOfSources; j++) {
|
60
|
-
const source = sources[j];
|
61
|
-
const { imageLoader } = source;
|
62
|
-
|
63
|
-
const { bytesLoaded, size, loaded } = imageLoader.progress;
|
64
|
-
|
65
|
-
totalSize += size;
|
66
|
-
totalBytesLoaded += bytesLoaded;
|
67
|
-
|
68
|
-
if (loaded) {
|
69
|
-
sourcesLoaded++;
|
70
|
-
}
|
71
|
-
} // end for
|
72
|
-
|
73
|
-
return {
|
74
|
-
totalBytesLoaded,
|
75
|
-
totalSize,
|
76
|
-
sourcesLoaded,
|
77
|
-
numberOfSources
|
78
|
-
};
|
79
|
-
});
|
80
|
-
|
81
|
-
/**
|
82
|
-
* Construct ImageScene
|
83
|
-
*/
|
84
|
-
constructor() {
|
85
|
-
const state = this.#state;
|
86
|
-
|
87
|
-
$effect(() => {
|
88
|
-
if (state.current === STATE_LOADING) {
|
89
|
-
// console.log(
|
90
|
-
// 'progress',
|
91
|
-
// JSON.stringify($state.snapshot(this.#progress))
|
92
|
-
// );
|
93
|
-
|
94
|
-
const { sourcesLoaded, numberOfSources } = this.#progress;
|
95
|
-
|
96
|
-
if (sourcesLoaded === numberOfSources) {
|
97
|
-
// console.log(`All [${numberOfSources}] sources loaded`);
|
98
|
-
this.#state.send(LOADED);
|
99
|
-
}
|
100
|
-
}
|
101
|
-
});
|
102
|
-
|
103
|
-
$effect(() => {
|
104
|
-
switch (state.current) {
|
105
|
-
case STATE_LOADING:
|
106
|
-
{
|
107
|
-
// console.log('ImageScene:loading');
|
108
|
-
this.#startLoading();
|
109
|
-
}
|
110
|
-
break;
|
111
|
-
|
112
|
-
case STATE_UNLOADING:
|
113
|
-
{
|
114
|
-
// console.log('ImageScene:unloading');
|
115
|
-
// this.#startUnLoading();
|
116
|
-
}
|
117
|
-
break;
|
118
|
-
|
119
|
-
case STATE_LOADED:
|
120
|
-
{
|
121
|
-
// console.log('ImageScene:loaded');
|
122
|
-
// TODO
|
123
|
-
// this.#abortLoading = null;
|
124
|
-
}
|
125
|
-
break;
|
126
|
-
|
127
|
-
case STATE_CANCELLED:
|
128
|
-
{
|
129
|
-
// console.log('ImageScene:cancelled');
|
130
|
-
// TODO
|
131
|
-
}
|
132
|
-
break;
|
133
|
-
|
134
|
-
case STATE_ERROR:
|
135
|
-
{
|
136
|
-
console.log('ImageScene:error', state.error);
|
137
|
-
}
|
138
|
-
break;
|
139
|
-
} // end switch
|
140
|
-
|
141
|
-
this.state = state.current;
|
142
|
-
});
|
143
|
-
}
|
144
|
-
|
145
|
-
destroy() {
|
146
|
-
// TODO: disconnect all image sources?
|
147
|
-
// TODO: Unload ImageLoaders?
|
148
|
-
}
|
149
|
-
|
150
|
-
/**
|
151
|
-
* Add image source
|
152
|
-
* - Uses an ImageLoader instance to load image data from network
|
153
|
-
*
|
154
|
-
* @param {object} _
|
155
|
-
* @param {string} _.label
|
156
|
-
* @param {ImageMeta|ImageMeta[]} _.imageMeta
|
157
|
-
*/
|
158
|
-
defineImage({ label, imageMeta }) {
|
159
|
-
expect.notEmptyString(label);
|
160
|
-
|
161
|
-
// expect.notEmptyString(url);
|
162
|
-
|
163
|
-
const imageLoader = new ImageLoader({ imageMeta });
|
164
|
-
|
165
|
-
this.#imageSources.push({ label, imageLoader, imageMeta });
|
166
|
-
}
|
167
|
-
|
168
|
-
/**
|
169
|
-
* Start loading all image sources
|
170
|
-
*/
|
171
|
-
load() {
|
172
|
-
this.#state.send(LOAD);
|
173
|
-
|
174
|
-
// FIXME: in unit test when moved to startloading it hangs!
|
175
|
-
|
176
|
-
for (const { imageLoader } of this.#imageSources) {
|
177
|
-
imageLoader.load();
|
178
|
-
}
|
179
|
-
}
|
180
|
-
|
181
|
-
async #startLoading() {
|
182
|
-
// console.log('#startLoading');
|
183
|
-
// FIXME: in unit test when moved to startloading it hangs!
|
184
|
-
// for (const { audioLoader } of this.#memorySources) {
|
185
|
-
// audioLoader.load();
|
186
|
-
// }
|
187
|
-
}
|
188
|
-
|
189
|
-
/**
|
190
|
-
* Get Image source
|
191
|
-
*
|
192
|
-
* @param {string} label
|
193
|
-
*
|
194
|
-
* @returns {ImageSource}
|
195
|
-
*/
|
196
|
-
#getImageSource(label) {
|
197
|
-
for (const source of this.#imageSources) {
|
198
|
-
if (label === source.label) {
|
199
|
-
return source;
|
200
|
-
}
|
201
|
-
}
|
202
|
-
|
203
|
-
throw new Error(`Source [${label}] has not been defined`);
|
204
|
-
}
|
205
|
-
|
206
|
-
/**
|
207
|
-
* Get image scene loading progress
|
208
|
-
*/
|
209
|
-
get progress() {
|
210
|
-
return this.#progress;
|
211
|
-
}
|
212
|
-
|
213
|
-
/**
|
214
|
-
* Get an image loader
|
215
|
-
*
|
216
|
-
* @param {string} label
|
217
|
-
*
|
218
|
-
* @returns {ImageLoader}
|
219
|
-
*/
|
220
|
-
getImageLoader(label) {
|
221
|
-
const source = this.#getImageSource(label);
|
222
|
-
|
223
|
-
return source.imageLoader;
|
224
|
-
}
|
225
|
-
|
226
|
-
/**
|
227
|
-
* Get object URL that can be used as src parameter of an HTML image
|
228
|
-
*
|
229
|
-
* @param {string} label
|
230
|
-
*
|
231
|
-
* @returns {ImageMeta}
|
232
|
-
*/
|
233
|
-
getImageMeta(label) {
|
234
|
-
const source = this.#getImageSource(label);
|
235
|
-
|
236
|
-
return source.imageMeta;
|
237
|
-
}
|
238
|
-
|
239
|
-
/**
|
240
|
-
* Get object URL that can be used as src parameter of an HTML image
|
241
|
-
*
|
242
|
-
* @param {string} label
|
243
|
-
*
|
244
|
-
* @note the objectURL should be revoked when no longer used
|
245
|
-
*
|
246
|
-
* @returns {string}
|
247
|
-
*/
|
248
|
-
getObjectURL(label) {
|
249
|
-
const source = this.#getImageSource(label);
|
250
|
-
|
251
|
-
return source.imageLoader.getObjectURL();
|
252
|
-
}
|
253
|
-
}
|
1
|
+
/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
|
2
|
+
|
3
|
+
import * as expect from '../../../util/expect/index.js';
|
4
|
+
|
5
|
+
import {
|
6
|
+
LoadingStateMachine,
|
7
|
+
STATE_INITIAL,
|
8
|
+
STATE_LOADING,
|
9
|
+
STATE_UNLOADING,
|
10
|
+
STATE_LOADED,
|
11
|
+
STATE_CANCELLED,
|
12
|
+
STATE_ERROR,
|
13
|
+
LOAD,
|
14
|
+
// CANCEL,
|
15
|
+
ERROR,
|
16
|
+
LOADED,
|
17
|
+
UNLOAD,
|
18
|
+
INITIAL
|
19
|
+
} from '../loading-state-machine/index.js';
|
20
|
+
|
21
|
+
import ImageLoader from './ImageLoader.svelte.js';
|
22
|
+
|
23
|
+
/**
|
24
|
+
* @typedef {object} SourceConfig
|
25
|
+
* // property ...
|
26
|
+
*/
|
27
|
+
|
28
|
+
/**
|
29
|
+
* @typedef {object} ImageSource
|
30
|
+
* @property {string} label
|
31
|
+
* @property {ImageLoader} imageLoader
|
32
|
+
* @property {ImageMeta} [imageMeta]
|
33
|
+
*/
|
34
|
+
|
35
|
+
export default class ImageScene {
|
36
|
+
#state = new LoadingStateMachine();
|
37
|
+
|
38
|
+
// @note this exported state is set by $effect's
|
39
|
+
state = $state(STATE_INITIAL);
|
40
|
+
|
41
|
+
// @note this exported state is set by $effect's
|
42
|
+
loaded = $derived.by(() => {
|
43
|
+
return this.state === STATE_LOADED;
|
44
|
+
});
|
45
|
+
|
46
|
+
/** @type {ImageSource[]} */
|
47
|
+
#imageSources = $state([]);
|
48
|
+
|
49
|
+
#progress = $derived.by(() => {
|
50
|
+
// console.log('update progress');
|
51
|
+
|
52
|
+
let totalSize = 0;
|
53
|
+
let totalBytesLoaded = 0;
|
54
|
+
let sourcesLoaded = 0;
|
55
|
+
|
56
|
+
const sources = this.#imageSources;
|
57
|
+
const numberOfSources = sources.length;
|
58
|
+
|
59
|
+
for (let j = 0; j < numberOfSources; j++) {
|
60
|
+
const source = sources[j];
|
61
|
+
const { imageLoader } = source;
|
62
|
+
|
63
|
+
const { bytesLoaded, size, loaded } = imageLoader.progress;
|
64
|
+
|
65
|
+
totalSize += size;
|
66
|
+
totalBytesLoaded += bytesLoaded;
|
67
|
+
|
68
|
+
if (loaded) {
|
69
|
+
sourcesLoaded++;
|
70
|
+
}
|
71
|
+
} // end for
|
72
|
+
|
73
|
+
return {
|
74
|
+
totalBytesLoaded,
|
75
|
+
totalSize,
|
76
|
+
sourcesLoaded,
|
77
|
+
numberOfSources
|
78
|
+
};
|
79
|
+
});
|
80
|
+
|
81
|
+
/**
|
82
|
+
* Construct ImageScene
|
83
|
+
*/
|
84
|
+
constructor() {
|
85
|
+
const state = this.#state;
|
86
|
+
|
87
|
+
$effect(() => {
|
88
|
+
if (state.current === STATE_LOADING) {
|
89
|
+
// console.log(
|
90
|
+
// 'progress',
|
91
|
+
// JSON.stringify($state.snapshot(this.#progress))
|
92
|
+
// );
|
93
|
+
|
94
|
+
const { sourcesLoaded, numberOfSources } = this.#progress;
|
95
|
+
|
96
|
+
if (sourcesLoaded === numberOfSources) {
|
97
|
+
// console.log(`All [${numberOfSources}] sources loaded`);
|
98
|
+
this.#state.send(LOADED);
|
99
|
+
}
|
100
|
+
}
|
101
|
+
});
|
102
|
+
|
103
|
+
$effect(() => {
|
104
|
+
switch (state.current) {
|
105
|
+
case STATE_LOADING:
|
106
|
+
{
|
107
|
+
// console.log('ImageScene:loading');
|
108
|
+
this.#startLoading();
|
109
|
+
}
|
110
|
+
break;
|
111
|
+
|
112
|
+
case STATE_UNLOADING:
|
113
|
+
{
|
114
|
+
// console.log('ImageScene:unloading');
|
115
|
+
// this.#startUnLoading();
|
116
|
+
}
|
117
|
+
break;
|
118
|
+
|
119
|
+
case STATE_LOADED:
|
120
|
+
{
|
121
|
+
// console.log('ImageScene:loaded');
|
122
|
+
// TODO
|
123
|
+
// this.#abortLoading = null;
|
124
|
+
}
|
125
|
+
break;
|
126
|
+
|
127
|
+
case STATE_CANCELLED:
|
128
|
+
{
|
129
|
+
// console.log('ImageScene:cancelled');
|
130
|
+
// TODO
|
131
|
+
}
|
132
|
+
break;
|
133
|
+
|
134
|
+
case STATE_ERROR:
|
135
|
+
{
|
136
|
+
console.log('ImageScene:error', state.error);
|
137
|
+
}
|
138
|
+
break;
|
139
|
+
} // end switch
|
140
|
+
|
141
|
+
this.state = state.current;
|
142
|
+
});
|
143
|
+
}
|
144
|
+
|
145
|
+
destroy() {
|
146
|
+
// TODO: disconnect all image sources?
|
147
|
+
// TODO: Unload ImageLoaders?
|
148
|
+
}
|
149
|
+
|
150
|
+
/**
|
151
|
+
* Add image source
|
152
|
+
* - Uses an ImageLoader instance to load image data from network
|
153
|
+
*
|
154
|
+
* @param {object} _
|
155
|
+
* @param {string} _.label
|
156
|
+
* @param {ImageMeta|ImageMeta[]} _.imageMeta
|
157
|
+
*/
|
158
|
+
defineImage({ label, imageMeta }) {
|
159
|
+
expect.notEmptyString(label);
|
160
|
+
|
161
|
+
// expect.notEmptyString(url);
|
162
|
+
|
163
|
+
const imageLoader = new ImageLoader({ imageMeta });
|
164
|
+
|
165
|
+
this.#imageSources.push({ label, imageLoader, imageMeta });
|
166
|
+
}
|
167
|
+
|
168
|
+
/**
|
169
|
+
* Start loading all image sources
|
170
|
+
*/
|
171
|
+
load() {
|
172
|
+
this.#state.send(LOAD);
|
173
|
+
|
174
|
+
// FIXME: in unit test when moved to startloading it hangs!
|
175
|
+
|
176
|
+
for (const { imageLoader } of this.#imageSources) {
|
177
|
+
imageLoader.load();
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
async #startLoading() {
|
182
|
+
// console.log('#startLoading');
|
183
|
+
// FIXME: in unit test when moved to startloading it hangs!
|
184
|
+
// for (const { audioLoader } of this.#memorySources) {
|
185
|
+
// audioLoader.load();
|
186
|
+
// }
|
187
|
+
}
|
188
|
+
|
189
|
+
/**
|
190
|
+
* Get Image source
|
191
|
+
*
|
192
|
+
* @param {string} label
|
193
|
+
*
|
194
|
+
* @returns {ImageSource}
|
195
|
+
*/
|
196
|
+
#getImageSource(label) {
|
197
|
+
for (const source of this.#imageSources) {
|
198
|
+
if (label === source.label) {
|
199
|
+
return source;
|
200
|
+
}
|
201
|
+
}
|
202
|
+
|
203
|
+
throw new Error(`Source [${label}] has not been defined`);
|
204
|
+
}
|
205
|
+
|
206
|
+
/**
|
207
|
+
* Get image scene loading progress
|
208
|
+
*/
|
209
|
+
get progress() {
|
210
|
+
return this.#progress;
|
211
|
+
}
|
212
|
+
|
213
|
+
/**
|
214
|
+
* Get an image loader
|
215
|
+
*
|
216
|
+
* @param {string} label
|
217
|
+
*
|
218
|
+
* @returns {ImageLoader}
|
219
|
+
*/
|
220
|
+
getImageLoader(label) {
|
221
|
+
const source = this.#getImageSource(label);
|
222
|
+
|
223
|
+
return source.imageLoader;
|
224
|
+
}
|
225
|
+
|
226
|
+
/**
|
227
|
+
* Get object URL that can be used as src parameter of an HTML image
|
228
|
+
*
|
229
|
+
* @param {string} label
|
230
|
+
*
|
231
|
+
* @returns {ImageMeta}
|
232
|
+
*/
|
233
|
+
getImageMeta(label) {
|
234
|
+
const source = this.#getImageSource(label);
|
235
|
+
|
236
|
+
return source.imageMeta;
|
237
|
+
}
|
238
|
+
|
239
|
+
/**
|
240
|
+
* Get object URL that can be used as src parameter of an HTML image
|
241
|
+
*
|
242
|
+
* @param {string} label
|
243
|
+
*
|
244
|
+
* @note the objectURL should be revoked when no longer used
|
245
|
+
*
|
246
|
+
* @returns {string}
|
247
|
+
*/
|
248
|
+
getObjectURL(label) {
|
249
|
+
const source = this.#getImageSource(label);
|
250
|
+
|
251
|
+
return source.imageLoader.getObjectURL();
|
252
|
+
}
|
253
|
+
}
|