@hkdigital/lib-sveltekit 0.1.22 → 0.1.24

package/dist/widgets/presenter/Presenter.state.svelte.js

@@ -1,3 +1,5 @@
+import { tick } from 'svelte';
+
 import { defineStateContext } from '../../util/svelte/state-context/index.js';
 
 import { findFirst } from '../../util/array/index.js';
@@ -67,24 +69,25 @@ export class PresenterState {
   /** @type {HkPromise[]} */
   transitionPromises = $state.raw([]);
 
+  /** @type {HkPromise} */
+  slideLoadingPromise = null;
+
   /** @type {boolean} */
   isSlideLoading = $state(false);
 
   /** @type {boolean} */
-  controllerRequested = $state(false);
-
-  /** @type {number} Loading timeout in milliseconds (0 = disabled) */
-  loadingTimeout = $state(1000);
+  loadingSpinner = $state(false);
 
   /** @type {boolean} */
   busy = $derived.by(() => {
-    const { layerA, layerB } = this;
+    const { layerA, layerB, isSlideLoading } = this;
+
     const layerAStable =
       layerA.stageShow || layerA.stageAfter || layerA.stageIdle;
     const layerBStable =
       layerB.stageShow || layerB.stageAfter || layerB.stageIdle;
 
-    return !(layerAStable && layerBStable);
+    return !(layerAStable && layerBStable) || isSlideLoading;
   });
 
   /** @type {string} */
@@ -98,21 +101,26 @@ export class PresenterState {
    */
   constructor() {
     this.#setupStageTransitions();
-    this.#setupTransitionTracking();
-    this.#setupLoadingTransitions();
-  }
 
-  /**
-   * Returns a simplified presenter reference with essential methods
-   * for slide components to use
-   *
-   * @returns {PresenterRef} A reference object with presenter methods
-   */
-  getPresenterRef() {
-    return {
-      gotoSlide: (name) => this.gotoSlide(name),
-      getCurrentSlideName: () => this.currentSlideName
-    };
+    let timeout;
+
+    $effect((slideLoadingPromise) => {
+      if (this.isSlideLoading) {
+        // Enable spinner after a short delay
+        clearTimeout(timeout);
+        setTimeout(() => {
+          untrack(() => {
+            if (this.isSlideLoading) {
+              this.loadingSpinner = true;
+            } else {
+              this.loadingSpinner = false;
+            }
+          });
+        }, 500);
+      } else {
+        this.loadingSpinner = false;
+      }
+    });
   }
 
   /**
@@ -155,59 +163,27 @@ export class PresenterState {
     return updatedLayer;
   }
 
-  /**
-   * Set up reactivity for tracking transition promises
-   * This handles the completion of animations and layer swapping
-   */
-  #setupTransitionTracking() {
-    $effect(() => {
-      const promises = this.transitionPromises;
+  // /**
+  //  * Set up reactivity for tracking transition promises
+  //  * This handles the completion of animations and layer swapping
+  //  */
+  // #setupTransitionTracking() {
+  //   $effect(() => {
+  //     const promises = this.transitionPromises;
 
-      if (promises.length > 0) {
-        const nextSlide = this.#getSlide(this.nextLayerLabel);
+  //     if (promises.length > 0) {
+  //       const nextSlide = this.#getSlide(this.nextLayerLabel);
 
-        if (!nextSlide) {
-          return;
-        }
+  //       if (!nextSlide) {
+  //         return;
+  //       }
 
-        untrack(() => {
-          this.#executeTransition(promises);
-        });
-      }
-    });
-  }
-
-  /**
-   * Set up reactivity to start transitions after component loading is complete
-   */
-  #setupLoadingTransitions() {
-    $effect(() => {
-      // Only start transitions when loading is complete and we have a next slide
-      if (!this.isSlideLoading && this.#getSlide(this.nextLayerLabel)) {
-        const currentSlide = this.#getSlide(this.currentLayerLabel);
-        const nextSlide = this.#getSlide(this.nextLayerLabel);
-
-        // Prepare the next layer for its entrance transition
-        this.#updateLayer(this.nextLayerLabel, {
-          z: Z_FRONT,
-          visible: true,
-          stageBeforeIn: true,
-          transitions: nextSlide?.intro ?? []
-        });
-
-        // Prepare the current layer for its exit transition
-        this.#updateLayer(this.currentLayerLabel, {
-          z: Z_BACK,
-          visible: true,
-          stageBeforeOut: true,
-          transitions: currentSlide?.outro ?? []
-        });
-
-        // Start transitions
-        this.#applyTransitions();
-      }
-    });
-  }
+  //       untrack(() => {
+  //         this.#executeTransition(promises);
+  //       });
+  //     }
+  //   });
+  // }
 
   /**
    * Execute the transition by waiting for all promises and then
@@ -217,6 +193,8 @@ export class PresenterState {
    */
   async #executeTransition(promises) {
     try {
+      // console.debug('executeTransition');
+
       await Promise.allSettled(promises);
 
       untrack(() => {
@@ -265,48 +243,6 @@ export class PresenterState {
     }
   }
 
-  /**
-   * Mark the slide as loaded, which triggers transitions to begin
-   */
-  finishSlideLoading() {
-    this.isSlideLoading = false;
-  }
-
-  /**
-   * Returns a controller object for managing manual loading
-   * Components can use this to signal when they're done loading
-   * or to cancel and go back to the previous slide
-   *
-   * @returns {LoadController} Object with loaded() and cancel() methods
-   */
-  getLoadingController() {
-    // Mark that the controller was requested
-    this.controllerRequested = true;
-
-    return {
-      /**
-       * Call when component has finished loading
-       */
-      loaded: () => {
-        this.finishSlideLoading();
-      },
-
-      /**
-       * Call to cancel loading and return to previous slide
-       */
-      cancel: () => {
-        // Return to previous slide if available
-        const currentSlideName = this.currentSlideName;
-        if (currentSlideName) {
-          this.gotoSlide(currentSlideName);
-        } else if (this.slides.length > 0) {
-          // Fallback to first slide if no current slide
-          this.gotoSlide(this.slides[0].name);
-        }
-      }
-    };
-  }
-
   /**
    * Configure the presentation
    *
@@ -369,57 +305,79 @@ export class PresenterState {
       throw new Error('Transition in progress');
     }
 
-    // Reset controller requested flag
-    this.controllerRequested = false;
-
-    // Set loading state to true before starting transition
-    this.isSlideLoading = true;
-
-    // Add controller function to slide props if it has a component
-    if (slide.data?.component) {
-      // Get a presenter reference to pass to the slide
-      const presenterRef = this.getPresenterRef();
-
-      // Create a copy of the slide to avoid mutating the original
-      const slideWithExtras = {
-        ...slide,
-        data: {
-          ...slide.data,
-          props: {
-            ...(slide.data.props || {}),
-            getLoadingController: () => this.getLoadingController(),
-            presenter: presenterRef // Add presenter reference to props
-          }
+    this.slideLoadingPromise = null;
+
+    // Get a presenter reference to pass to the slide
+    const presenterRef = this.#getPresenterRef();
+
+    // Create a copy of the slide to avoid mutating the original
+    const slideWithProps = {
+      ...slide,
+      data: {
+        ...slide.data,
+        props: {
+          ...(slide.data.props || {}),
+          getLoadingController: () => {
+            this.isSlideLoading = true;
+            this.slideLoadingPromise = new HkPromise(() => {});
+
+            return this.#getLoadingController();
+            // this.slideLoadingPromise should be a HkPromise now
+            // console.log('slideLoadingPromise', this.slideLoadingPromise);
+          },
+          presenter: presenterRef // Add presenter reference to props
         }
-      };
+      }
+    };
 
-      // Add next slide to next layer with controller and presenter included
-      this.#updateSlide(this.nextLayerLabel, slideWithExtras);
+    // console.debug('Checkpoint 1');
 
-      // If a timeout is configured, automatically finish loading after delay
-      if (this.loadingTimeout > 0) {
-        setTimeout(() => {
-          // Only auto-finish if the controller wasn't requested
-          if (!this.controllerRequested && this.isSlideLoading) {
-            // console.debug(
-            //   `Slide '${slide.name}' didn't request loading controller, auto-finishing.`
-            // );
-            this.finishSlideLoading();
-          }
-        }, this.loadingTimeout);
-      }
-    } else {
-      // No component, so just use the slide as is
-      this.#updateSlide(this.nextLayerLabel, slide);
-      // No component to load, so finish loading immediately
-      this.finishSlideLoading();
+    // Add next slide to next layer
+    this.#updateSlide(this.nextLayerLabel, slideWithProps);
+
+    // console.debug('Checkpoint 2');
+
+    await tick();
+
+    // console.debug('Checkpoint 3');
+
+    if (this.slideLoadingPromise) {
+      // console.debug('Waiting for slide to load');
+      // @ts-ignore
+      await this.slideLoadingPromise;
+      this.isSlideLoading = false;
+      // console.debug('Done waiting for slide loading');
     }
 
-    // Make next layer visible, move to front
+    const currentSlide = this.#getSlide(this.currentLayerLabel);
+    const nextSlide = this.#getSlide(this.nextLayerLabel);
+
+    // console.debug('Checkpoint 4');
+
+    // Make next layer visible, move to front, and prepare for
+    // transition in
     this.#updateLayer(this.nextLayerLabel, {
       z: Z_FRONT,
-      visible: true
+      visible: true,
+      stageBeforeIn: true,
+      transitions: nextSlide?.intro ?? []
     });
+
+    // Move current layer to back, keep visible, and prepare for
+    // transition out
+    this.#updateLayer(this.currentLayerLabel, {
+      z: Z_BACK,
+      visible: true,
+      stageBeforeOut: true,
+      transitions: currentSlide?.outro ?? []
+    });
+
+    // console.debug('Checkpoint 5');
+
+    // Start transitions
+    this.#applyTransitions();
+
+    await this.#executeTransition(this.transitionPromises);
   }
 
   /**
@@ -545,6 +503,49 @@ export class PresenterState {
 
     throw new Error(`Missing slide [${label}]`);
   }
+
+  /**
+   * Returns a simplified presenter reference with essential methods
+   * for slide components to use
+   *
+   * @returns {PresenterRef} A reference object with presenter methods
+   */
+  #getPresenterRef() {
+    return {
+      gotoSlide: (name) => this.gotoSlide(name),
+      getCurrentSlideName: () => this.currentSlideName
+    };
+  }
+
+  /**
+   * Returns a controller object for managing manual loading
+   * Components can use this to signal when they're done loading
+   * or to cancel and go back to the previous slide
+   *
+   * @returns {LoadController}
+   *  Object with loaded() and cancel() methods
+   */
+  #getLoadingController() {
+    // console.debug('getLoadingController was called');
+
+    return {
+      /**
+       * Call when component has finished loading
+       */
+      loaded: () => {
+        // console.debug('Slide said loading has completed');
+        this.slideLoadingPromise?.tryResolve();
+      },
+
+      /**
+       * Call to cancel loading and return to previous slide
+       */
+      cancel: () => {
+        // console.debug('Slide said loading has cancelled');
+        this.slideLoadingPromise?.tryReject();
+      }
+    };
+  }
 }
 
 /* -------------------------------------- Export create & get state functions */

package/dist/widgets/presenter/Presenter.svelte

@@ -3,7 +3,8 @@
 
   import { GridLayers } from '../../components/layout/index.js';
 
-  import { createOrGetPresenterState } from './index.js';
+  import { PresenterState } from './Presenter.state.svelte.js';
+  import { getPresenterState } from './index.js';
   import { cssBefore, cssDuring } from './util.js';
 
   /* ------------------------------------------------------------------ Props */
@@ -23,7 +24,9 @@
    *   autostart?: boolean,
    *   startSlide?: string,
    *   instanceKey?: Symbol | string,
-   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>
+   *   presenter?: import('./Presenter.state.svelte.js').PresenterState,
+   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
+   *   loadingSnippet?: import('svelte').Snippet,
    * }}
    */
   let {
@@ -38,13 +41,20 @@
     // State
     instanceKey,
 
+    presenter = $bindable(new PresenterState()),
+
     // Snippets
-    layoutSnippet
+    layoutSnippet,
+    loadingSnippet
   } = $props();
 
-  /* ------------------------------------------------------------------ State */
+  // > Create presenter state object and register using setContext
+
+  // FIXME: Using getPresenterState to force creation of presenter outside
+  //        the component. Otherwise transitions doe not work somehow..
+  presenter = getPresenterState(instanceKey);
 
-  const presenter = createOrGetPresenterState(instanceKey);
+  // > State
 
   $effect.pre(() => {
     // Configure presenter with slides if provided
@@ -107,7 +117,7 @@
     inert={presenter.busy}
     class="justify-self-stretch self-stretch overflow-hidden"
   >
-    <div class={classesA} style={stylesA}>
+    <div class="{classesA} h-full w-full" style={stylesA}>
       {@render layoutSnippet(presenter.slideA, presenter.layerA)}
     </div>
   </div>
@@ -118,8 +128,14 @@
     inert={presenter.busy}
     class="justify-self-stretch self-stretch overflow-hidden"
   >
-    <div class={classesB} style={stylesB}>
+    <div class="{classesB} h-full w-full" style={stylesB}>
       {@render layoutSnippet(presenter.slideB, presenter.layerB)}
     </div>
   </div>
+
+  {#if loadingSnippet && presenter.loadingSpinner}
+    <div class="h-full w-full" style="z-index:20;">
+      {@render loadingSnippet()}
+    </div>
+  {/if}
 </GridLayers>

package/dist/widgets/presenter/Presenter.svelte.d.ts

@@ -1,20 +1,11 @@
 export default Presenter;
-type Presenter = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<{
-        classes?: string;
-        slides?: Slide[];
-        autostart?: boolean;
-        startSlide?: string;
-        instanceKey?: string | Symbol;
-        layoutSnippet: Snippet<[Slide, Layer]>;
-    }>): void;
-};
 declare const Presenter: import("svelte").Component<{
     classes?: string;
     slides?: import("./typedef.js").Slide[];
     autostart?: boolean;
     startSlide?: string;
     instanceKey?: Symbol | string;
+    presenter?: import("./Presenter.state.svelte.js").PresenterState;
     layoutSnippet: import("svelte").Snippet<[import("./typedef.js").Slide | null, import("./typedef.js").Layer]>;
-}, {}, "">;
+    loadingSnippet?: import("svelte").Snippet;
+}, {}, "presenter">;

package/dist/widgets/presenter/Presenter.svelte__

@@ -0,0 +1,125 @@
+<script>
+  /* ---------------------------------------------------------------- Imports */
+
+  import { GridLayers } from '$lib/components/layout/index.js';
+
+  import { createOrGetPresenterState } from './index.js';
+  import { cssBefore, cssDuring } from './util.js';
+
+  /* ------------------------------------------------------------------ Props */
+
+  /**
+   * @typedef {import("./typedef.js").Slide} Slide
+   */
+
+  /**
+   * @typedef {import("./typedef.js").Layer} Layer
+   */
+
+  /**
+   * @type {{
+   *   classes?: string,
+   *   slides?: import("./typedef.js").Slide[],
+   *   autostart?: boolean,
+   *   startSlide?: string,
+   *   instanceKey?: Symbol | string,
+   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>
+   * }}
+   */
+  let {
+    // > Style
+    classes,
+
+    // > Functional
+    slides,
+    autostart = false,
+    startSlide,
+
+    // State
+    instanceKey,
+
+    // Snippets
+    layoutSnippet
+  } = $props();
+
+  /* ------------------------------------------------------------------ State */
+
+  const presenter = createOrGetPresenterState(instanceKey);
+
+  $effect.pre(() => {
+    // Configure presenter with slides if provided
+    presenter.configure({ slides, autostart, startSlide });
+  });
+
+  let classesA = $state('');
+  let classesB = $state('');
+
+  let stylesA = $state('');
+  let stylesB = $state('');
+
+  //> Apply stage classes and styles
+
+  $effect(() => {
+    // > layerA
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerA;
+
+    if (transitions && transitions.length) {
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesA, classes: classesA } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        setTimeout(() => {
+          ({ style: stylesA, classes: classesA } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesA = '';
+      classesA = '';
+    }
+  });
+
+  $effect(() => {
+    // > layerB
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerB;
+
+    if (transitions) {
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesB, classes: classesB } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        setTimeout(() => {
+          ({ style: stylesB, classes: classesB } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesB = '';
+      classesB = '';
+    }
+  });
+</script>
+
+<GridLayers data-component="presenter" {classes}>
+  <div
+    style:z-index={presenter.layerA.z}
+    style:visibility={presenter.layerA.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class={classesA} style={stylesA}>
+      {@render layoutSnippet(presenter.slideA, presenter.layerA)}
+    </div>
+  </div>
+
+  <div
+    style:z-index={presenter.layerB.z}
+    style:visibility={presenter.layerB.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class={classesB} style={stylesB}>
+      {@render layoutSnippet(presenter.slideB, presenter.layerB)}
+    </div>
+  </div>
+</GridLayers>

package/dist/widgets/virtual-viewport/VirtualViewport.svelte.d.ts

@@ -1,26 +1,4 @@
 export default VirtualViewport;
-type VirtualViewport = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<{
-        [attr: string]: any;
-        base?: string;
-        bg?: string;
-        classes?: string;
-        width?: string;
-        height?: string;
-        overflow?: string;
-        designWidth?: number;
-        designHeight?: number;
-        scaleViewport?: number;
-        scaleW?: number;
-        scaleH?: number;
-        scaleUI?: number;
-        scaleTextBase?: number;
-        scaleTextHeading?: number;
-        scaleTextUI?: number;
-        children?: Snippet<[]>;
-    }>): void;
-};
 declare const VirtualViewport: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.22",
+	"version": "0.1.24",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"