@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.
@@ -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 (windowWidth > windowHeight) {
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 = windowHeight;
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
- const { ...attrs } = $props();
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
- // console.log('attrs:', attrs.imageMeta);
14
+ let show = $state(false);
7
15
 
8
- if (!attrs.imageMeta) {
9
- throw new Error('Missing property [imageMeta]');
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
- <ImageBox {...attrs} />
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<Record<string, unknown>, {}, "">;
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
+ }, {}, "">;
@@ -25,6 +25,8 @@ export class PresenterState {
25
25
  busy: boolean;
26
26
  /** @type {string} */
27
27
  currentSlideName: string;
28
+ /** @type {string} */
29
+ pendingSlideName: string;
28
30
  /**
29
31
  * Configure the presentation
30
32
  *
@@ -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
- throw new Error('Transition in progress');
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
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hkdigital/lib-sveltekit",
3
- "version": "0.1.24",
3
+ "version": "0.1.26",
4
4
  "author": {
5
5
  "name": "HKdigital",
6
6
  "url": "https://hkdigital.nl"