@hkdigital/lib-sveltekit 0.1.24 → 0.1.26
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/widgets/game-box/GameBox.svelte +15 -6
- package/dist/widgets/presenter/ImageSlide.svelte +29 -5
- package/dist/widgets/presenter/ImageSlide.svelte.d.ts +12 -1
- package/dist/widgets/presenter/Presenter.state.svelte.d.ts +2 -0
- package/dist/widgets/presenter/Presenter.state.svelte.js +18 -1
- package/package.json +1 -1
@@ -39,6 +39,12 @@
|
|
39
39
|
aspectOnLandscape,
|
40
40
|
aspectOnPortrait,
|
41
41
|
|
42
|
+
marginLeft = 0,
|
43
|
+
marginRight = 0,
|
44
|
+
|
45
|
+
marginTop = 0,
|
46
|
+
marginBottom = 0,
|
47
|
+
|
42
48
|
// > Scaling options
|
43
49
|
enableScaling = false,
|
44
50
|
designLandscape = { width: 1920, height: 1080 },
|
@@ -69,19 +75,22 @@
|
|
69
75
|
$effect(() => {
|
70
76
|
if (!windowWidth || !windowHeight) return;
|
71
77
|
|
78
|
+
const availWidth = windowWidth - marginLeft - marginRight;
|
79
|
+
const availHeight = windowHeight - marginTop - marginBottom;
|
80
|
+
|
72
81
|
let gameAspect;
|
73
82
|
|
74
|
-
if (
|
83
|
+
if (availWidth > availHeight) {
|
75
84
|
gameWidth = getGameWidthOnLandscape({
|
76
|
-
windowWidth,
|
77
|
-
windowHeight,
|
85
|
+
windowWidth: availWidth,
|
86
|
+
windowHeight: availHeight,
|
78
87
|
aspectOnLandscape
|
79
88
|
});
|
80
89
|
gameAspect = aspectOnLandscape;
|
81
90
|
} else {
|
82
91
|
gameWidth = getGameWidthOnPortrait({
|
83
|
-
windowWidth,
|
84
|
-
windowHeight,
|
92
|
+
windowWidth: availWidth,
|
93
|
+
windowHeight: availHeight,
|
85
94
|
aspectOnPortrait
|
86
95
|
});
|
87
96
|
gameAspect = aspectOnPortrait;
|
@@ -90,7 +99,7 @@
|
|
90
99
|
if (gameAspect) {
|
91
100
|
gameHeight = gameWidth / gameAspect;
|
92
101
|
} else {
|
93
|
-
gameHeight =
|
102
|
+
gameHeight = availHeight;
|
94
103
|
}
|
95
104
|
});
|
96
105
|
|
@@ -1,13 +1,37 @@
|
|
1
1
|
<script>
|
2
2
|
import { ImageBox } from '../index.js';
|
3
3
|
|
4
|
-
|
4
|
+
/**
|
5
|
+
* @type {{
|
6
|
+
* imageMeta?: import('@hkdigital/lib-sveltekit/config/typedef.js').ImageMeta | import('@hkdigital/lib-sveltekit/config/typedef.js').ImageMeta[],
|
7
|
+
* presenter?: { gotoSlide: (name: string) => void, getCurrentSlideName: () => string },
|
8
|
+
* getLoadingController?: () => { loaded: () => void, cancel: () => void }
|
9
|
+
* [attr: string]: any
|
10
|
+
* }}
|
11
|
+
*/
|
12
|
+
let { imageMeta, presenter, getLoadingController, ...attrs } = $props();
|
5
13
|
|
6
|
-
|
14
|
+
let show = $state(false);
|
7
15
|
|
8
|
-
|
9
|
-
|
16
|
+
let controller = getLoadingController();
|
17
|
+
|
18
|
+
async function progressListener(progress, id) {
|
19
|
+
// console.log('loadingProgress', { ...progress, id });
|
20
|
+
if (progress.loaded && !show) {
|
21
|
+
setTimeout(() => {
|
22
|
+
show = true;
|
23
|
+
controller.loaded();
|
24
|
+
}, 0);
|
25
|
+
}
|
10
26
|
}
|
11
27
|
</script>
|
12
28
|
|
13
|
-
<
|
29
|
+
<div class="absolute inset-0" class:invisible={!show}>
|
30
|
+
<ImageBox
|
31
|
+
{imageMeta}
|
32
|
+
fit="cover"
|
33
|
+
position="center center"
|
34
|
+
onProgress={progressListener}
|
35
|
+
{...attrs}
|
36
|
+
/>
|
37
|
+
</div>
|
@@ -1,2 +1,13 @@
|
|
1
1
|
export default ImageSlide;
|
2
|
-
declare const ImageSlide: import("svelte").Component<
|
2
|
+
declare const ImageSlide: import("svelte").Component<{
|
3
|
+
[attr: string]: any;
|
4
|
+
imageMeta?: any | any[];
|
5
|
+
presenter?: {
|
6
|
+
gotoSlide: (name: string) => void;
|
7
|
+
getCurrentSlideName: () => string;
|
8
|
+
};
|
9
|
+
getLoadingController?: () => {
|
10
|
+
loaded: () => void;
|
11
|
+
cancel: () => void;
|
12
|
+
};
|
13
|
+
}, {}, "">;
|
@@ -96,6 +96,9 @@ export class PresenterState {
|
|
96
96
|
return currentSlide?.name || '';
|
97
97
|
});
|
98
98
|
|
99
|
+
/** @type {string} */
|
100
|
+
pendingSlideName;
|
101
|
+
|
99
102
|
/**
|
100
103
|
* Initialize the presenter state and set up reactivity
|
101
104
|
*/
|
@@ -302,7 +305,8 @@ export class PresenterState {
|
|
302
305
|
*/
|
303
306
|
async #gotoSlide(slide) {
|
304
307
|
if (this.busy) {
|
305
|
-
|
308
|
+
this.pendingSlideName = slide.name;
|
309
|
+
return;
|
306
310
|
}
|
307
311
|
|
308
312
|
this.slideLoadingPromise = null;
|
@@ -378,6 +382,19 @@ export class PresenterState {
|
|
378
382
|
this.#applyTransitions();
|
379
383
|
|
380
384
|
await this.#executeTransition(this.transitionPromises);
|
385
|
+
|
386
|
+
// Check if there's a pending slide transition
|
387
|
+
if (this.pendingSlideName) {
|
388
|
+
const pendingName = this.pendingSlideName;
|
389
|
+
|
390
|
+
this.pendingSlideName = null;
|
391
|
+
|
392
|
+
untrack(() => {
|
393
|
+
if (pendingName !== this.currentSlideName) {
|
394
|
+
this.gotoSlide(pendingName);
|
395
|
+
}
|
396
|
+
});
|
397
|
+
}
|
381
398
|
}
|
382
399
|
|
383
400
|
/**
|