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);
Copy

An example of setting and subscribing to the Micrio.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 ImageData.
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);
Copy

List of stores used by Micrio:

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