Options
All
  • Public
  • Public/Protected
  • All
Menu

Svelte stores in Micrio

Micrio uses Svelte Stores for its internal state management.

This means that changes in values can passively trigger state updates.

There are two types of stores: Readable, which is read-only for the user, and Writable which can be updated or overridden by the user.

Typically, for accessing the data directly instead of its store, Micrio offers $ prefixes to any store properties:

// This is the current active image in <micr-io> (.current is the store Writable)
const image = micrio.$current;

// The current image ImageInfo value
const info = image.$info;

// Log the current image resolution
console.log(`The current image is ${info.width} x ${info.height}px`);

// The current CultureData value of the current MicrioImage
console.log(micrio.$current.$data);

An example of setting and subscribing to the MicrioImage.data writable store:


// Subscribe to any changes in its data (markers, tours, etc)
image.data.subscribe(data => {
// Data for this image been set, removed or changed
// This also triggers when the image data has been loaded from the server
if(data) console.log(`The image now has ${data.markers.length} markers`);
else console.log('The image data is now empty.');
});

// Let's set the image data to something. It expects ImageCultureData.
image.data.set({
markers: [{
"title": "My First Marker",
"x": .5,
"y": .5
}]
});

// Immediately access the data
console.log('The data has beeen set to', image.$data);

List of stores used by Micrio:

Property Direct value getter Type Description>
The main HTMLMicrioElement element instance
current $current Writable<MicrioImage> The current active and shown MicrioImage
The HTMLMicrioElement.state main state manager
tour $tour Writable<MarkerTour|VideoTour> The current running MarkerTour or VideoTour
marker $marker Writable<Marker> The current opened marker in the current opened MicrioImage
The MicrioImage individual image
info $info Readable<ImageInfo> The static image base info
data $data Writable<ImageCultureData> The image data (markers, tours, etc)
lang $lang Writable<string> The static image base info
The MicrioImage.state individual image state manager
view $view Readable<View> The current image viewport
marker $marker Writable<Marker> The current opened marker in this image
package

svelte

author

These people

license

MIT https://github.com/sveltejs/svelte/blob/master/LICENSE.md

link

https://svelte.dev/tutorial/writable-stores

Index

Type aliases

Subscriber

Subscriber<T>: (value: T) => void

Type parameters

  • T

Type declaration

    • (value: T): void
    • Callback to inform of a value updates.

      Parameters

      • value: T

      Returns void

Unsubscriber

Unsubscriber: () => void

Type declaration

    • (): void
    • Unsubscribes from value updates.

      Returns void

Updater

Updater<T>: (value: T) => T

Type parameters

  • T

Type declaration

    • (value: T): T
    • Callback to update a value.

      Parameters

      • value: T

      Returns T

Invalidator

Invalidator<T>: (value?: T) => void

Type parameters

  • T

Type declaration

    • (value?: T): void
    • Cleanup logic callback.

      Parameters

      • Optional value: T

      Returns void

Generated using TypeDoc