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 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 been set to', image.$data);

List of stores used by Micrio:

Property	Direct value getter	Type	Description
<micr-io> Element
.current	$current	Writable<MicrioImage>	The current active and shown MicrioImage
<micr-io>.state controller
.tour	$tour	Writable<MarkerTour | VideoTour>	The current running VideoTour or MarkerTour
.marker	$marker	Writable<Marker>	The current opened marker in the current opened MicrioImage
Individual MicrioImage
.info	$info	Readable<ImageInfo>	The static image base info
.data	$data	Writable<ImageCultureData>	The image data (markers, tours, etc)
.lang	$lang	Writable<string>	The current image data culture value
MicrioImage.state controller
.view	$view	Writable<View>	The current viewport
.marker	$marker	Writable<Marker>	The current opened marker of 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