@hkdigital/lib-sveltekit 0.1.22 → 0.1.24

package/dist/classes/svelte/image/ImageScene.svelte.js__

@@ -1,253 +0,0 @@
-/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
-
-import * as expect from '$lib/util/expect/index.js';
-
-import {
-  LoadingStateMachine,
-  STATE_INITIAL,
-  STATE_LOADING,
-  STATE_UNLOADING,
-  STATE_LOADED,
-  STATE_CANCELLED,
-  STATE_ERROR,
-  LOAD,
-  // CANCEL,
-  ERROR,
-  LOADED,
-  UNLOAD,
-  INITIAL
-} from '$lib/classes/svelte/loading-state-machine/index.js';
-
-import ImageLoader from '$lib/classes/svelte/image/ImageLoader.svelte.js';
-
-/**
- * @typedef {object} SourceConfig
- * // property ...
- */
-
-/**
- * @typedef {object} ImageSource
- * @property {string} label
- * @property {ImageLoader} imageLoader
- * @property {ImageMeta} [imageMeta]
- */
-
-export default class ImageScene {
-  #state = new LoadingStateMachine();
-
-  // @note this exported state is set by $effect's
-  state = $state(STATE_INITIAL);
-
-  // @note this exported state is set by $effect's
-  loaded = $derived.by(() => {
-    return this.state === STATE_LOADED;
-  });
-
-  /** @type {ImageSource[]} */
-  #imageSources = $state([]);
-
-  #progress = $derived.by(() => {
-    // console.log('update progress');
-
-    let totalSize = 0;
-    let totalBytesLoaded = 0;
-    let sourcesLoaded = 0;
-
-    const sources = this.#imageSources;
-    const numberOfSources = sources.length;
-
-    for (let j = 0; j < numberOfSources; j++) {
-      const source = sources[j];
-      const { imageLoader } = source;
-
-      const { bytesLoaded, size, loaded } = imageLoader.progress;
-
-      totalSize += size;
-      totalBytesLoaded += bytesLoaded;
-
-      if (loaded) {
-        sourcesLoaded++;
-      }
-    } // end for
-
-    return {
-      totalBytesLoaded,
-      totalSize,
-      sourcesLoaded,
-      numberOfSources
-    };
-  });
-
-  /**
-   * Construct ImageScene
-   */
-  constructor() {
-    const state = this.#state;
-
-    $effect(() => {
-      if (state.current === STATE_LOADING) {
-        // console.log(
-        //   'progress',
-        //   JSON.stringify($state.snapshot(this.#progress))
-        // );
-
-        const { sourcesLoaded, numberOfSources } = this.#progress;
-
-        if (sourcesLoaded === numberOfSources) {
-          // console.log(`All [${numberOfSources}] sources loaded`);
-          this.#state.send(LOADED);
-        }
-      }
-    });
-
-    $effect(() => {
-      switch (state.current) {
-        case STATE_LOADING:
-          {
-            // console.log('ImageScene:loading');
-            this.#startLoading();
-          }
-          break;
-
-        case STATE_UNLOADING:
-          {
-            // console.log('ImageScene:unloading');
-            // this.#startUnLoading();
-          }
-          break;
-
-        case STATE_LOADED:
-          {
-            // console.log('ImageScene:loaded');
-            // TODO
-            // this.#abortLoading = null;
-          }
-          break;
-
-        case STATE_CANCELLED:
-          {
-            // console.log('ImageScene:cancelled');
-            // TODO
-          }
-          break;
-
-        case STATE_ERROR:
-          {
-            console.log('ImageScene:error', state.error);
-          }
-          break;
-      } // end switch
-
-      this.state = state.current;
-    });
-  }
-
-  destroy() {
-    // TODO: disconnect all image sources?
-    // TODO: Unload ImageLoaders?
-  }
-
-  /**
-   * Add image source
-   * - Uses an ImageLoader instance to load image data from network
-   *
-   * @param {object} _
-   * @param {string} _.label
-   * @param {ImageMeta|ImageMeta[]} _.imageMeta
-   */
-  defineImage({ label, imageMeta }) {
-    expect.notEmptyString(label);
-
-    // expect.notEmptyString(url);
-
-    const imageLoader = new ImageLoader({ imageMeta });
-
-    this.#imageSources.push({ label, imageLoader, imageMeta });
-  }
-
-  /**
-   * Start loading all image sources
-   */
-  load() {
-    this.#state.send(LOAD);
-
-    // FIXME: in unit test when moved to startloading it hangs!
-
-    for (const { imageLoader } of this.#imageSources) {
-      imageLoader.load();
-    }
-  }
-
-  async #startLoading() {
-    // console.log('#startLoading');
-    // FIXME: in unit test when moved to startloading it hangs!
-    // for (const { audioLoader } of this.#memorySources) {
-    //   audioLoader.load();
-    // }
-  }
-
-  /**
-   * Get Image source
-   *
-   * @param {string} label
-   *
-   * @returns {ImageSource}
-   */
-  #getImageSource(label) {
-    for (const source of this.#imageSources) {
-      if (label === source.label) {
-        return source;
-      }
-    }
-
-    throw new Error(`Source [${label}] has not been defined`);
-  }
-
-  /**
-   * Get image scene loading progress
-   */
-  get progress() {
-    return this.#progress;
-  }
-
-  /**
-   * Get an image loader
-   *
-   * @param {string} label
-   *
-   * @returns {ImageLoader}
-   */
-  getImageLoader(label) {
-    const source = this.#getImageSource(label);
-
-    return source.imageLoader;
-  }
-
-  /**
-   * Get object URL that can be used as src parameter of an HTML image
-   *
-   * @param {string} label
-   *
-   * @returns {ImageMeta}
-   */
-  getImageMeta(label) {
-    const source = this.#getImageSource(label);
-
-    return source.imageMeta;
-  }
-
-  /**
-   * Get object URL that can be used as src parameter of an HTML image
-   *
-   * @param {string} label
-   *
-   * @note the objectURL should be revoked when no longer used
-   *
-   * @returns {string}
-   */
-  getObjectURL(label) {
-    const source = this.#getImageSource(label);
-
-    return source.imageLoader.getObjectURL();
-  }
-}

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js--responsive-loading-fails-fix-tried__

@@ -1,184 +0,0 @@
-/** @typedef {import('./typedef.js').ImageMeta} ImageMeta */
-
-// import * as expect from '$lib/util/expect/index.js';
-
-import { calculateEffectiveWidth } from '$lib/util/image/index.js';
-
-import { untrack } from 'svelte';
-
-import ImageLoader from './ImageLoader.svelte.js';
-
-export default class ImageVariantsLoader {
-  /** @type {number} */
-  #devicePixelRatio;
-
-  /** @type {ImageMeta[]} */
-  #imagesMeta;
-
-  /** @type {ImageMeta|null} */
-  #imageVariant = $state(null);
-
-  /** @type {ImageLoader|null} */
-  #imageLoader = $state(null);
-
-  /** @type {boolean} */
-  #manuallyCheckedLoaded = $state(false);
-
-  // Create a custom progress object that we control fully
-  #customProgress = $state({
-    bytesLoaded: 0,
-    size: 0,
-    loaded: false
-  });
-
-  #progress = $derived.by(() => {
-    return this.#customProgress;
-  });
-
-  // Derive loaded state from our custom progress
-  #loaded = $derived.by(() => this.#customProgress.loaded);
-
-  /**
-   * @param {ImageMeta[]} imagesMeta
-   */
-  constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
-    this.#devicePixelRatio = devicePixelRatio ?? 1;
-    this.#imagesMeta = [...imagesMeta].sort((a, b) => a.width - b.width);
-
-    // Track when the imageLoader's progress changes
-    $effect(() => {
-      if (this.#imageLoader) {
-        const loaderProgress = this.#imageLoader.progress;
-
-        // Update our custom progress with the loader's values,
-        // but maintain our own loaded state
-        this.#customProgress = {
-          bytesLoaded: loaderProgress.bytesLoaded,
-          size: loaderProgress.size,
-          loaded: this.#manuallyCheckedLoaded && loaderProgress.loaded
-        };
-      }
-    });
-  }
-
-  /**
-   * Set new optimal image variant or keep current
-   *
-   * @param {object} params
-   * @param {number} [params.containerWidth] Container width
-   * @param {number} [params.containerHeight] Container height
-   * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
-   */
-  updateOptimalImageMeta({ containerWidth, containerHeight, fit = 'contain' }) {
-    const baseImage = this.#imagesMeta[0];
-    const imageAspectRatio = baseImage.width / baseImage.height;
-
-    const effectiveWidth = calculateEffectiveWidth({
-      containerWidth,
-      containerHeight,
-      imageAspectRatio,
-      fit
-    });
-
-    const newVariant = this.getOptimalImageMeta(effectiveWidth);
-
-    if (
-      !newVariant ||
-      !this.#imageVariant ||
-      newVariant.width > this.#imageVariant.width
-    ) {
-      this.#imageVariant = newVariant;
-
-      // Reset loaded state when changing variants
-      this.#manuallyCheckedLoaded = false;
-      this.#customProgress = {
-        bytesLoaded: 0,
-        size: 0,
-        loaded: false
-      };
-
-      // Create and start loader here directly when variant changes
-      if (this.#imageLoader?.initial) {
-        this.#imageLoader.unload();
-      }
-
-      this.#imageLoader = new ImageLoader({
-        imageMeta: newVariant
-      });
-
-      this.#imageLoader.load();
-    }
-  }
-
-  get loaded() {
-    return this.#loaded;
-  }
-
-  get variant() {
-    return this.#imageVariant;
-  }
-
-  /**
-   * Get object URL that can be used as src parameter of an HTML image
-   *
-   * @note the objectURL should be revoked when no longer used
-   *
-   * @returns {string|null}
-   */
-  getObjectURL() {
-    // First check if the loader is actually loaded
-    if (!this.#imageLoader?.loaded) {
-      return null;
-    }
-
-    const blob = this.#imageLoader.getBlob();
-
-    if (!blob) {
-      return null;
-    }
-
-    // Successfully got a blob, so we're definitely loaded
-    if (!this.#manuallyCheckedLoaded) {
-      this.#manuallyCheckedLoaded = true;
-
-      // Update our custom progress to indicate we're loaded
-      this.#customProgress = {
-        bytesLoaded: this.#customProgress.bytesLoaded,
-        size: this.#customProgress.size,
-        loaded: true
-      };
-    }
-
-    return URL.createObjectURL(blob);
-  }
-
-  get progress() {
-    return this.#progress;
-  }
-
-  /**
-   * Get optimal image variant
-   *
-   * @param {number} containerWidth
-   *
-   * @returns {ImageMeta|null}
-   */
-  getOptimalImageMeta(containerWidth) {
-    if (!containerWidth) {
-      return null;
-    }
-
-    // Calculate the required width (container * DPR)
-    const requiredWidth = containerWidth * this.#devicePixelRatio;
-
-    const imagesMeta = this.#imagesMeta;
-
-    // Find the smallest image that's larger than our required width
-    const optimal = imagesMeta.find(
-      (current) => current.width >= requiredWidth
-    );
-
-    // Fall back to the largest image if nothing is big enough
-    return optimal || imagesMeta[imagesMeta.length - 1];
-  }
-} // end class