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