@micrio/client 5.2.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/micrio.min.d.ts CHANGED
@@ -1,57 +1,101 @@
1
1
  declare module '@micrio/client' {
2
2
  import type { Readable, Writable } from 'svelte/store';
3
- export const VERSION = "5.2.1";
3
+ /**
4
+ * Defines the current version of the Micrio library.
5
+ * This constant is used internally and exposed statically via `HTMLMicrioElement.VERSION`.
6
+ */
7
+ export const VERSION = "5.3.0";
4
8
  export type PREDEFINED = [string, Models.ImageInfo.ImageInfo, Models.ImageData.ImageData | undefined];
5
- export const isFetching: (uri: string) => boolean;
6
- export const getLocalData: (id: string) => PREDEFINED | undefined;
7
- /** Get a character numeric value from a Micrio ID
9
+ /** Enum for identifying media type. */
10
+ export enum MediaType {
11
+ None = 0,
12
+ IFrame = 1,
13
+ Video = 2,
14
+ Audio = 3,
15
+ VideoTour = 4,
16
+ Micrio = 5
17
+ }
18
+ /** Enum for identifying iframe player type. */
19
+ export enum FrameType {
20
+ YouTube = 1,
21
+ Vimeo = 2
22
+ }
23
+ /**
24
+ * Converts seconds into a human-readable time string (hh?:mm:ss).
25
+ * @param s Time in seconds. Can be negative for remaining time display.
26
+ * @returns Formatted time string (e.g., "1:23", "1:05:09", "-0:15").
27
+ */
28
+ export function parseTime(s: number): string;
29
+ /**
30
+ * Decodes a character from a Micrio ID into its numeric value (used for V4 short IDs).
8
31
  * @private
9
- */
32
+ */
10
33
  export const getIdVal: (a: string) => number;
34
+ /** Checks if an ID likely belongs to the V5 format (6 or 7 characters). */
11
35
  export const idIsV5: (id: string) => boolean;
12
- /** Hard-limit a view to full image bounds */
36
+ /** Clamps a view rectangle [x0, y0, x1, y1] to the image bounds [0, 0, 1, 1]. */
13
37
  export const limitView: (v: Models.Camera.View) => Models.Camera.View;
14
- /** Calculating the movement vector between two 360 images
38
+ /**
39
+ * Calculates the 3D vector and navigation parameters between two images in a 360 space.
40
+ * Used for smooth transitions between waypoints.
15
41
  * @private
16
- */
42
+ * @param micrio The main HTMLMicrioElement instance.
43
+ * @param targetId The ID of the target image.
44
+ * @returns An object containing the vector, normalized vector, direction, and transition parameters, or undefined if calculation fails.
45
+ */
17
46
  export function getSpaceVector(micrio: HTMLMicrioElement, targetId: string): {
18
47
  vector: Models.Camera.Vector;
19
48
  directionX: number;
20
49
  v: Models.Spaces.DirectionVector;
21
50
  vN: Models.Spaces.DirectionVector;
22
51
  } | undefined;
23
- /** Feature detection for native HLS video support
52
+ /**
53
+ * Checks if the browser natively supports HLS video playback via the `<video>` element.
24
54
  * @private
55
+ * @param video Optional HTMLVideoElement to check (defaults to creating a temporary one).
56
+ * @returns True if native HLS support is detected.
25
57
  */
26
58
  export const hasNativeHLS: (video?: HTMLMediaElement) => boolean;
59
+ /**
60
+ * Defines various enums used throughout the Micrio application,
61
+ * primarily for standardizing action types and option values.
62
+ */
27
63
  export namespace Enums {
64
+ /** Enums related to the Grid functionality. */
28
65
  namespace Grid {
29
- /** External grid action types */
66
+ /**
67
+ * Defines the types of actions that can be performed on a Grid instance,
68
+ * often triggered by marker data (`gridAction`) or tour events.
69
+ */
30
70
  enum GridActionType {
31
- /** Filter the grid display by these IDs, comma separated */
71
+ /** Focus on specific images within the grid, hiding others. Data: comma-separated image IDs. */
32
72
  focus = 0,
33
- /** Fly the camera to the bounding box of these in-grid image IDs */
73
+ /** Animate the main grid view to fit the bounding box of specified images. Data: comma-separated image IDs. */
34
74
  flyTo = 1,
35
- /** Filter the grid to the images containing markers that have this custom class name */
75
+ /** Focus on images containing markers with a specific tag. Data: tag name. */
36
76
  focusWithTagged = 2,
37
- /** Filter the grid to the images containing markers that have this custom class name, and fly to their views */
77
+ /** Focus on images containing markers with a specific tag and fly to the marker views. Data: tag name. */
38
78
  focusTagged = 3,
39
- /** Reset the grid to its inception state */
79
+ /** Reset the grid to its initial layout and view. */
40
80
  reset = 4,
41
- /** Go back one grid history step */
81
+ /** Navigate back one step in the grid layout history. */
42
82
  back = 5,
43
- /** When a grid image is in full-focus, immediately switch to the view as if it were in the initial grid */
83
+ /** Instantly switch a focused image back to its position within the grid layout (used internally?). */
44
84
  switchToGrid = 6,
45
- /** If there is a current MarkerTour going on, filter the grid to all grid images that are part of the tour */
85
+ /** Filter the grid to show only images that are part of the currently active marker tour. */
46
86
  filterTourImages = 7,
47
- /** Single time fade duration for next image that will be navigated to */
87
+ /** Set a one-time crossfade duration for the *next* grid transition. Data: duration in seconds. */
48
88
  nextFadeDuration = 8
49
89
  }
50
90
  }
91
+ /** Enums related to the Camera functionality. */
51
92
  namespace Camera {
52
- /** Camera animation timing function */
93
+ /**
94
+ * Defines the available timing functions for camera animations (flyToView, flyToCoo).
95
+ * These correspond to standard CSS easing functions.
96
+ */
53
97
  enum TimingFunction {
54
- 'ease' = 0,
98
+ 'ease' = 0,// Default ease-in-out
55
99
  'ease-in' = 1,
56
100
  'ease-out' = 2,
57
101
  'linear' = 3
@@ -62,122 +106,98 @@ declare module '@micrio/client' {
62
106
  * Micrio grid display controller
63
107
  * @author Marcel Duin <marcel@micr.io>
64
108
  */
65
- /** The Grid controller class */
109
+ /**
110
+ * Controls the display and interaction logic for grid layouts.
111
+ * Instantiated on the primary {@link MicrioImage} if grid data is present.
112
+ * Accessed via `micrioImage.grid`.
113
+ */
66
114
  export class Grid {
67
115
  micrio: HTMLMicrioElement;
68
116
  image: MicrioImage;
69
- /** The instanced grid images */
117
+ /** Array of {@link MicrioImage} instances currently part of the grid definition (loaded). */
70
118
  readonly images: MicrioImage[];
71
- /** The currently shown images */
119
+ /** Array of {@link MicrioImage} instances currently visible in the grid layout. */
72
120
  current: MicrioImage[];
73
- /** The grid HTML element */
74
- _grid: HTMLDivElement;
75
- /** The image HTML `<button>` grid elements */
76
- _buttons: Map<string, HTMLButtonElement>;
77
- /** The HTML grid will stay visible and clickable */
121
+ /** If true, the HTML grid overlay remains visible and interactive even when an image is focused. */
78
122
  clickable: boolean;
79
- /** The current full-view focussed image */
123
+ /** Writable Svelte store holding the currently focused {@link MicrioImage} instance, or undefined if in grid view. */
80
124
  readonly focussed: Writable<MicrioImage | undefined>;
81
- /** Get the current focussed store value */
125
+ /** Getter for the current value of the {@link focussed} store. */
82
126
  get $focussed(): MicrioImage | undefined;
83
- /** Show the markers of these elements */
127
+ /** Writable Svelte store holding an array of {@link MicrioImage} instances whose markers should be displayed in the grid view. */
84
128
  readonly markersShown: Writable<MicrioImage[]>;
85
- /** The grid state history */
129
+ /** Array storing the history of grid layouts for back navigation. */
86
130
  history: Models.Grid.GridHistory[];
87
- /** The current history length */
131
+ /** Writable Svelte store indicating the current depth in the grid history stack. */
88
132
  depth: Writable<number>;
89
- /** The animation duration when opening a new layout, in s */
133
+ /** Default animation duration (seconds) when transitioning *into* a new layout or focused view. */
90
134
  aniDurationIn: number;
91
- /** The animation duration when going back, in s */
135
+ /** Default animation duration (seconds) when transitioning *out* of a focused view or going back in history. */
92
136
  aniDurationOut: number;
93
- /** For delayed transitions, individual delay in s */
137
+ /** Delay (seconds) between individual image transitions for 'delayed' effects. */
94
138
  transitionDelay: number;
95
- /** Duration for the next crossfade */
96
- private nextCrossFadeDuration;
97
- /** The current grid layout is a single horizontal row */
98
- private isHorizontal;
99
- /** Current individual cell sizes w,h */
100
- readonly cellSizes: Map<string, [number, number?]>;
101
- /** Temporary size map for next .set() */
102
- private readonly nextSize;
103
- /** The Grid constructor
104
- * @param micrio The Micrio instance
105
- * @param image The MicrioImage which is the virtual grid container
139
+ /**
140
+ * The Grid constructor. Initializes the grid based on image settings.
141
+ * @param micrio The main HTMLMicrioElement instance.
142
+ * @param image The MicrioImage instance acting as the virtual container for the grid.
106
143
  */
107
144
  constructor(micrio: HTMLMicrioElement, image: MicrioImage);
108
- /** Hook all events */
109
- private hook;
110
- private clearTimeouts;
111
- /** Set the grid to this input
112
- * @param input The grid string
113
- * @param opts Optional settings
114
- * @returns Promise when the animation is done with the currently shown images
145
+ /**
146
+ * Sets the grid layout based on an input string or array of image definitions.
147
+ * This is the main method for changing the grid's content and appearance.
148
+ *
149
+ * @param input The grid definition. Can be:
150
+ * - A semicolon-separated string following the format defined in `Grid.getString`.
151
+ * - An array of {@link MicrioImage} instances.
152
+ * - An array of objects `{image: MicrioImage, ...GridImageOptions}`.
153
+ * @param opts Options controlling the transition and layout.
154
+ * @returns A Promise that resolves with the array of currently displayed {@link MicrioImage} instances when the transition completes.
115
155
  */
116
156
  set(input?: string | MicrioImage[] | ({
117
157
  image: MicrioImage;
118
158
  } & Models.Grid.GridImageOptions)[], opts?: {
119
- /** Don't add the layout to the history stack */
159
+ /** If true, does not add the previous layout to the history stack. */
120
160
  noHistory?: boolean;
121
- /** Don't remove the grid HTML element */
161
+ /** If true, keeps the HTML grid element in the DOM (used internally). */
122
162
  keepGrid?: boolean;
123
- /** The layout is horizontal */
163
+ /** If true, arranges images in a single horizontal row. */
124
164
  horizontal?: boolean;
125
- /** Any main camera animation duration in seconds */
165
+ /** Overrides the default animation duration for the main grid view transition. */
126
166
  duration?: number;
127
- /** Fly the main grid view to this viewport */
167
+ /** If provided, animates the main grid view to this viewport rectangle. */
128
168
  view?: Models.Camera.View;
129
- /** Don't draw any frame or do any camera stuff */
169
+ /** If true, skips the main grid camera animation. */
130
170
  noCamAni?: boolean;
131
- /** Force area animating for images currently not visible */
171
+ /** If true, forces area animation even for images not currently visible. */
132
172
  forceAreaAni?: boolean;
133
- /** Don't unfocus the current focussed image */
173
+ /** If true, does not unfocus the currently focused image when setting a new layout. */
134
174
  noBlur?: boolean;
135
- /** Don't do any fading in */
175
+ /** If true, skips the fade-in animation for new images. */
136
176
  noFade?: boolean;
137
- /** Transition animation, defaults to crossfade */
177
+ /** Specifies the transition animation type (e.g., 'crossfade', 'slide-left', 'behind-delayed'). */
138
178
  transition?: Models.Grid.GridSetTransition;
139
- /** Force an animation for all images */
179
+ /** If true, forces animation even if duration is 0. */
140
180
  forceAni?: boolean;
141
- /** Limit the images to cover view */
181
+ /** If true, limits individual image views to cover their grid cell. */
142
182
  coverLimit?: boolean;
143
- /** Open the images on cover view, but don't limit */
183
+ /** If true, sets the initial view of images to cover their grid cell (but doesn't enforce limit). */
144
184
  cover?: boolean;
145
- /** Scale individual grid images (0-100%) */
185
+ /** Scale factor (0-1) applied to each grid cell (creates margins). */
146
186
  scale?: number;
147
- /** Grid columns */
187
+ /** Overrides the automatic calculation of grid columns. */
148
188
  columns?: number;
149
189
  }): Promise<MicrioImage[]>;
150
- /** See if grid has changed configuration from original state */
151
- private hasChanged;
152
- /** Convert a grid string to GridImage object
153
- * @param s The image individual encoded grid string
154
- * @returns the GridImage
190
+ /**
191
+ * Parses an individual image grid string into a GridImage object.
192
+ * @param s The grid string for a single image.
193
+ * @returns The parsed {@link Models.Grid.GridImage} object.
155
194
  */
156
195
  getImage(s: string): Models.Grid.GridImage;
157
- /** Convert an ImageInfo object to an individual image grid string
158
- * @returns The grid encoded string of this image
196
+ /**
197
+ * Converts an ImageInfo object and options back into the grid string format.
198
+ * @returns The grid encoded string for this image.
159
199
  */
160
200
  getString: (i: Models.ImageInfo.ImageInfo, opts?: Models.Grid.GridImageOptions) => string;
161
- private getCols;
162
- /** Print the image grid based on a generated HTML layout
163
- * @param images Print these images
164
- * @param horizontal Print the images as a single row
165
- */
166
- private printGrid;
167
- /** Place and watch the grid */
168
- private placeGrid;
169
- /** Remove the grid */
170
- private removeGrid;
171
- /** Update grid placement */
172
- private updateGrid;
173
- /** Place an image in the grid
174
- * @param entry The GridImage:MicrioInfo info object
175
- * @param duration The duration of flying to an optional view
176
- * @param noCamAni Just set internal values, don't animate camera
177
- * @param delay Delay the animation, s
178
- * @returns The instanced MicrioImage
179
- */
180
- private placeImage;
181
201
  /** Fade out unused images in the grid
182
202
  * @param images The images to hide
183
203
  */
@@ -203,17 +223,14 @@ declare module '@micrio/client' {
203
223
  * @returns Promise when the transition is complete
204
224
  */
205
225
  back(duration?: number): Promise<void>;
206
- private setTimingFunction;
207
226
  /** Open a grid image full size and set it as the main active image
208
227
  * @param img The image
209
228
  * @param opts Focus options
210
229
  * @returns Promise for when the transition completes
211
230
  */
212
231
  focus(img: MicrioImage | undefined, opts?: Models.Grid.FocusOptions): Promise<void>;
213
- private transition;
214
232
  /** Unfocusses any currently focussed image */
215
233
  blur(): void;
216
- private tourEvent;
217
234
  /** Do an (external) action
218
235
  * @param action The action type enum or string
219
236
  * @param data Optional action data
@@ -231,656 +248,616 @@ declare module '@micrio/client' {
231
248
  getRelativeView(image: MicrioImage, view: Models.Camera.View): Models.Camera.View;
232
249
  }
233
250
  /**
234
- * The virtual Micrio camera
251
+ * Loads an image texture asynchronously. Adds the request to the queue
252
+ * and returns a Promise that resolves with the TextureBitmap or rejects on error.
253
+ * @param src The URL of the image to load.
254
+ * @returns A Promise resolving to the loaded TextureBitmap.
255
+ */
256
+ export const loadTexture: (src: string) => Promise<TextureBitmap>;
257
+ /**
258
+ * Represents the virtual camera used to view a {@link MicrioImage}.
259
+ * Provides methods for controlling the viewport (position, zoom, rotation),
260
+ * converting between screen and image coordinates, and managing animations.
261
+ *
262
+ * Instances are typically accessed via `micrioImage.camera`.
235
263
  * @author Marcel Duin <marcel@micr.io>
236
264
  */
237
265
  export class Camera {
238
- /** Current center screen coordinates and scale */
266
+ /** Current center screen coordinates [x, y] and scale [z]. For 360, also includes [yaw, pitch]. For Omni, also includes [frameIndex]. */
239
267
  readonly center: Models.Camera.Coords;
240
- /** Get the current image view rectangle
241
- * @returns The current screen viewport
268
+ /**
269
+ * Gets the current image view rectangle [x0, y0, x1, y1] relative to the image (0-1).
270
+ * @returns A copy of the current screen viewport array, or undefined if not initialized.
242
271
  */
243
272
  getView: () => Models.Camera.View | undefined;
244
- /** Set the screen viewport
245
- * @param v The viewport
246
- * @param opts Options
273
+ /**
274
+ * Sets the camera view instantly to the specified rectangle.
275
+ * @param v The target viewport rectangle [x0, y0, x1, y1].
276
+ * @param opts Options for setting the view.
247
277
  */
248
278
  setView(v: Models.Camera.View, opts?: {
249
- /** Don't restrict the boundaries */
279
+ /** If true, allows setting a view outside the normal image boundaries. */
250
280
  noLimit?: boolean;
251
- /** [360] Correct the view to trueNorth */
281
+ /** If true (for 360), corrects the view based on the `trueNorth` setting. */
252
282
  correctNorth?: boolean;
253
- /** Don't render */
283
+ /** If true, prevents triggering a Wasm render after setting the view. */
254
284
  noRender?: boolean;
255
- /** Custom sub-area */
285
+ /** If provided, interprets `v` relative to this sub-area instead of the full image. */
256
286
  area?: Models.Camera.View;
257
287
  }): void;
258
- /** Gets the static image XY coordinates of a screen coordinate
259
- * @param x The screen X coordinate in pixels
260
- * @param y The screen Y coordinate in pixels
261
- * @param absolute Use absolute browser window coordinates
262
- * @param noLimit Allow to go out of image bounds
263
- * @returns The relative image XY coordinates
288
+ /**
289
+ * Gets the relative image coordinates [x, y, scale, depth, yaw?, pitch?] corresponding to a screen coordinate.
290
+ * Rounds the result for cleaner output.
291
+ * @param x The screen X coordinate in pixels.
292
+ * @param y The screen Y coordinate in pixels.
293
+ * @param absolute If true, treats x/y as absolute browser window coordinates.
294
+ * @param noLimit If true, allows returning coordinates outside the image bounds (0-1).
295
+ * @returns A Float64Array containing the relative image coordinates [x, y, scale, depth, yaw?, pitch?].
264
296
  */
265
297
  getCoo: (x: number, y: number, absolute?: boolean, noLimit?: boolean) => Float64Array;
266
- /** Sets current coordinates as the center of the screen
267
- * @param x The X Coordinate
268
- * @param y The Y Coordinate
269
- * @param scale The scale to set
298
+ /**
299
+ * Sets the center of the screen to the specified image coordinates and scale instantly.
300
+ * @param x The target image X coordinate (0-1).
301
+ * @param y The target image Y coordinate (0-1).
302
+ * @param scale The target scale (optional, defaults to current scale).
270
303
  */
271
304
  setCoo(x: number, y: number, scale?: number): void;
272
- /** Gets the static screen XY coordinates of an image coordinate
273
- * @param x The image X coordinate
274
- * @param y The image Y coordinate
275
- * @param abs Use absolute browser window coordinates
276
- * @returns The screen XY coordinates in pixels
305
+ /**
306
+ * Gets the screen coordinates [x, y, scale, depth] corresponding to relative image coordinates.
307
+ * @param x The image X coordinate (0-1).
308
+ * @param y The image Y coordinate (0-1).
309
+ * @param abs If true, returns absolute browser window coordinates instead of element-relative.
310
+ * @param radius Optional offset radius for 360 calculations.
311
+ * @param rotation Optional offset rotation (radians) for 360 calculations.
312
+ * @param noTrueNorth If true (for 360), ignores the `trueNorth` correction.
313
+ * @returns A Float64Array containing the screen coordinates [x, y, scale, depth].
277
314
  */
278
315
  getXY: (x: number, y: number, abs?: boolean, radius?: number, rotation?: number, noTrueNorth?: boolean) => Float64Array;
279
- /** Get the current image scale */
316
+ /** Gets the current camera zoom scale. */
280
317
  getScale: () => number;
281
- /** Get a rectangle in 360 space
282
- * @param cX The quad center X coordinate
283
- * @param cY The quad center Y coordinate
284
- * @param w The quad width
285
- * @param h The quad height
286
- * @param rotX Rotation over X axis
287
- * @param rotY Rotation over Y axis
288
- * @param rotZ Rotation over Z axis
289
- * @param scaleX Horizontal scale
290
- * @param scaleY Vertical scale
318
+ /**
319
+ * Calculates the screen coordinates of the four corners of a transformed quad in 360 space.
320
+ * Used for positioning HTML embeds accurately on the 360 sphere.
321
+ * @param cX The quad center X coordinate (0-1).
322
+ * @param cY The quad center Y coordinate (0-1).
323
+ * @param w The quad relative width (0-1).
324
+ * @param h The quad relative height (0-1).
325
+ * @param rotX Rotation over X axis (radians).
326
+ * @param rotY Rotation over Y axis (radians).
327
+ * @param rotZ Rotation over Z axis (radians).
328
+ * @param scaleX Horizontal scale multiplier.
329
+ * @param scaleY Vertical scale multiplier.
330
+ * @returns A Float32Array containing the screen coordinates [x0,y0, x1,y1, x2,y2, x3,y3].
291
331
  */
292
332
  getQuad(cX: number, cY: number, w: number, h: number, rotX?: number, rotY?: number, rotZ?: number, scaleX?: number, scaleY?: number): Float32Array;
293
- /** Get a custom matrix for 360 placed embeds
294
- * @param x The X coordinate
295
- * @param y The Y coordinate
296
- * @param scale The object scale
297
- * @param radius The object radius (default 10)
298
- * @param rotX The object X rotation in radians
299
- * @param rotY The object Y rotation in radians
300
- * @param rotZ The object Z rotation in radians
301
- * @param transY Optional Y translation in 3d space
302
- * @param scaleX Optional X scaling
303
- * @param scaleY Optional Y scaling
304
- * @returns The resulting 4x4 matrix
333
+ /**
334
+ * Calculates a 4x4 transformation matrix for placing an object at specific coordinates
335
+ * with scale and rotation in 360 space. Used for CSS `matrix3d`.
336
+ * @param x The image X coordinate (0-1).
337
+ * @param y The image Y coordinate (0-1).
338
+ * @param scale The object scale multiplier.
339
+ * @param radius The object radius (distance from center, default 10).
340
+ * @param rotX The object X rotation in radians.
341
+ * @param rotY The object Y rotation in radians.
342
+ * @param rotZ The object Z rotation in radians.
343
+ * @param transY Optional Y translation in 3D space.
344
+ * @param scaleX Optional non-uniform X scaling.
345
+ * @param scaleY Optional non-uniform Y scaling.
346
+ * @returns The resulting 4x4 matrix as a Float32Array.
305
347
  */
306
348
  getMatrix(x: number, y: number, scale?: number, radius?: number, rotX?: number, rotY?: number, rotZ?: number, transY?: number, scaleX?: number, scaleY?: number): Float32Array;
307
- /** Set the current image scale
308
- * @param s The scale
349
+ /**
350
+ * Sets the camera zoom scale instantly.
351
+ * @param s The target scale.
309
352
  */
310
353
  setScale: (s: number) => void;
311
- /** Get the scale when the image would cover the screen*/
354
+ /** Gets the scale at which the image fully covers the viewport. */
312
355
  getCoverScale: () => number;
313
- /** Get the minimum scale
314
- * @returns The minimum scale
356
+ /**
357
+ * Gets the minimum allowed zoom scale for the image.
358
+ * @returns The minimum scale.
315
359
  */
316
360
  getMinScale: () => number;
317
- /** Sets the minimum scale
318
- * @param s The minimum scale to set
361
+ /**
362
+ * Sets the minimum allowed zoom scale.
363
+ * @param s The minimum scale to set.
319
364
  */
320
365
  setMinScale(s: number): void;
321
- /** Sets the minimum screen size you can zoom out to -- this makes you able to zoom out with margins
322
- * Note: This does not work with albums!
323
- * @param s The minimum screen size [0-1]
366
+ /**
367
+ * Sets the minimum screen size the image should occupy when zooming out (0-1).
368
+ * Allows zooming out further than the image boundaries, creating margins.
369
+ * Note: Does not work with albums.
370
+ * @param s The minimum screen size fraction (0-1).
324
371
  */
325
372
  setMinScreenSize(s: number): void;
326
- /** Returns true when the camera is zoomed in to the max */
373
+ /** Returns true if the camera is currently zoomed in to its maximum limit. */
327
374
  isZoomedIn: () => boolean;
328
- /** Returns true when the camera is fully zoomed out
329
- * @param full When using a custom .minSize, use this in the calculation
375
+ /**
376
+ * Returns true if the camera is currently zoomed out to its minimum limit.
377
+ * @param full If true, checks against the absolute minimum scale (ignoring `setMinScreenSize`).
330
378
  */
331
379
  isZoomedOut: (full?: boolean) => boolean;
332
- /** Limit camera navigation boundaries
333
- * @param l The viewport limit
380
+ /**
381
+ * Sets a rectangular limit for camera navigation within the image.
382
+ * @param l The viewport limit rectangle [x0, y0, x1, y1].
334
383
  */
335
384
  setLimit(l: Models.Camera.View): void;
336
- /** Set the coverLimit of the image to always fill the screen
337
- * @param b Limit the image to cover view
385
+ /**
386
+ * Sets whether the camera view should be limited to always cover the viewport.
387
+ * @param b If true, limits the view to cover the screen.
338
388
  */
339
389
  setCoverLimit(b: boolean): void;
340
- /** Get whether the image always fills the screen or not */
390
+ /** Gets whether the cover limit is currently enabled. */
341
391
  getCoverLimit: () => boolean;
342
- /** Limit camera navigation boundaries
343
- * @param xPerc The horizontal arc to limit to, percentage (1 = 360°)
344
- * @param yPerc The vertical arc to limit to, percentage (1 = 180°)
392
+ /**
393
+ * Limits the horizontal and vertical viewing range for 360 images.
394
+ * @param xPerc The horizontal arc limit as a percentage (0-1, where 1 = 360°). 0 disables horizontal limit.
395
+ * @param yPerc The vertical arc limit as a percentage (0-1, where 1 = 180°). 0 disables vertical limit.
345
396
  */
346
397
  set360RangeLimit(xPerc?: number, yPerc?: number): void;
347
- /** Fly to a specific view
348
- * @returns Promise when the animation is done
349
- * @param view The viewport to fly to
350
- * @param opts Optional animation settings
398
+ /**
399
+ * Animates the camera smoothly to a target view rectangle.
400
+ * @param view The target viewport rectangle [x0, y0, x1, y1].
401
+ * @param opts Optional animation settings.
402
+ * @returns A Promise that resolves when the animation completes, or rejects if aborted.
351
403
  */
352
404
  flyToView: (view: Models.Camera.View, opts?: Models.Camera.AnimationOptions & {
353
- /** Set the starting animation progress percentage */
405
+ /** Set the starting animation progress percentage (0-1). */
354
406
  progress?: number;
355
- /** Base the progress override on this starting view */
407
+ /** Base the progress override on this starting view. */
356
408
  prevView?: Models.Camera.View;
357
- /** Zoom out and in during the animation */
409
+ /** If true, performs a "jump" animation (zooms out then in). */
358
410
  isJump?: boolean;
359
- /** For omni objects: image index to animate to */
411
+ /** For Omni objects: the target image frame index to animate to. */
360
412
  omniIndex?: number;
361
- /** Don't do trueNorth correction */
413
+ /** If true (for 360), ignores the `trueNorth` correction. */
362
414
  noTrueNorth?: boolean;
363
- /** Custom sub-area */
415
+ /** If provided, interprets `view` relative to this sub-area. */
364
416
  area?: Models.Camera.View;
365
- /** Respect the image's maximum zoom limit */
417
+ /** If true, respects the image's maximum zoom limit during animation. */
366
418
  limitZoom?: boolean;
367
419
  }) => Promise<void>;
368
- /** Fly to a full view of the image
369
- * @param opts Animation options
370
- * @returns Promise when the animation is done
420
+ /**
421
+ * Animates the camera to a view showing the entire image (minimum zoom).
422
+ * @param opts Optional animation settings.
423
+ * @returns A Promise that resolves when the animation completes.
371
424
  */
372
425
  flyToFullView: (opts?: Models.Camera.AnimationOptions) => Promise<void>;
373
- /** Fly to a screen-covering view of the image
374
- * @param opts Animation options
375
- * @returns Promise when the animation is done
426
+ /**
427
+ * Animates the camera to a view where the image covers the viewport.
428
+ * @param opts Optional animation settings.
429
+ * @returns A Promise that resolves when the animation completes.
376
430
  */
377
431
  flyToCoverView: (opts?: Models.Camera.AnimationOptions) => Promise<void>;
378
- /** Fly to the specific coordinates
379
- * @param coords The X, Y and scale coordinates to fly to
380
- * @param opts Animation options
381
- * @returns Promise when the animation is done
432
+ /**
433
+ * Animates the camera to center on specific image coordinates and scale.
434
+ * @param coords The target coordinates [x, y, scale]. Scale is optional.
435
+ * @param opts Optional animation settings.
436
+ * @returns A Promise that resolves when the animation completes.
382
437
  */
383
438
  flyToCoo: (coords: Models.Camera.Coords, opts?: Models.Camera.AnimationOptions) => Promise<void>;
384
- /** Do a zooming animation
385
- * @param delta The amount to zoom
386
- * @param duration A forced duration in ms of the animation
387
- * @param x Screen pixel X-coordinate as zoom focus
388
- * @param y Screen pixel Y-coordinate as zoom focus
389
- * @param speed A non-default camera speed
390
- * @param noLimit Can zoom outside of the image boundaries
391
- * @returns Promise when the zoom animation is done
439
+ /**
440
+ * Performs an animated zoom centered on a specific screen point (or the current center).
441
+ * @param delta The amount to zoom (positive zooms out, negative zooms in).
442
+ * @param duration Forced duration in ms (0 for instant).
443
+ * @param x Screen pixel X-coordinate for zoom focus (optional, defaults to center).
444
+ * @param y Screen pixel Y-coordinate for zoom focus (optional, defaults to center).
445
+ * @param speed Animation speed multiplier (optional).
446
+ * @param noLimit If true, allows zooming beyond image boundaries.
447
+ * @returns A Promise that resolves when the zoom animation completes.
392
448
  */
393
449
  zoom: (delta: number, duration?: number, x?: number | undefined, y?: number | undefined, speed?: number, noLimit?: boolean) => Promise<void>;
394
- /** Zoom out a factor
395
- * @param factor The amount to zoom in
396
- * @param duration A forced duration in ms of the animation
397
- * @param speed A non-default camera speed
398
- * @returns Promise when the zoom animation is done
450
+ /**
451
+ * Zooms in by a specified factor.
452
+ * @param factor Zoom factor (e.g., 1 = standard zoom step).
453
+ * @param duration Animation duration in ms.
454
+ * @param speed Animation speed multiplier.
455
+ * @returns A Promise that resolves when the animation completes.
399
456
  */
400
457
  zoomIn: (factor?: number, duration?: number, speed?: number) => Promise<void>;
401
- /** Zoom out a factor
402
- * @param factor The amount to zoom out
403
- * @param duration A forced duration in ms of the animation
404
- * @param speed A non-default camera speed
405
- * @returns Promise when the zoom animation is done
458
+ /**
459
+ * Zooms out by a specified factor.
460
+ * @param factor Zoom factor (e.g., 1 = standard zoom step).
461
+ * @param duration Animation duration in ms.
462
+ * @param speed Animation speed multiplier.
463
+ * @returns A Promise that resolves when the animation completes.
406
464
  */
407
465
  zoomOut: (factor?: number, duration?: number, speed?: number) => Promise<void>;
408
- /** Pan relative pixels
409
- * @param x The horizontal number of pixels to pan
410
- * @param y The vertical number of pixels to pan
411
- * @param duration An optional duration
466
+ /**
467
+ * Pans the camera view by a relative pixel amount.
468
+ * @param x The horizontal pixel distance to pan.
469
+ * @param y The vertical pixel distance to pan.
470
+ * @param duration Animation duration in ms (0 for instant).
471
+ * @param opts Options: render (force render), noLimit (allow panning outside bounds).
412
472
  */
413
473
  pan(x: number, y: number, duration?: number, opts?: {
414
474
  render?: boolean;
415
475
  noLimit?: boolean;
416
476
  }): void;
417
- /** Stop any animation */
477
+ /** Stops any currently running camera animation immediately. */
418
478
  stop(): void;
419
- /** Pause any animation */
479
+ /** Pauses the current camera animation. */
420
480
  pause(): void;
421
- /** Pause any animation */
481
+ /** Resumes a paused camera animation. */
422
482
  resume(): void;
423
- /** Returns whether the current camera movement is kinetic / rubber banding */
483
+ /** Returns true if the camera is currently performing a kinetic pan/zoom (coasting). */
424
484
  aniIsKinetic(): boolean;
425
- /** Get the current direction facing in 360 mode in radians */
485
+ /** Gets the current viewing direction (yaw) in 360 mode.
486
+ * @returns The current yaw in radians.
487
+ */
426
488
  getDirection: () => number;
427
- /** Sets the 360 viewing direction in radians
428
- * @param yaw The direction in radians
429
- * @param pitch Optional pitch in radians
489
+ /**
490
+ * Sets the viewing direction (yaw and optionally pitch) instantly in 360 mode.
491
+ * @param yaw The target yaw in radians.
492
+ * @param pitch Optional target pitch in radians.
430
493
  */
431
494
  setDirection(yaw: number, pitch?: number): void;
432
- /** Get the current direction pitch
433
- * @returns The current pitch in radians
495
+ /**
496
+ * Gets the current viewing pitch in 360 mode.
497
+ * @returns The current pitch in radians.
434
498
  */
435
499
  getPitch: () => number;
436
- /** Set the relative {@link Models.Camera.View} to render to, animates by default */
500
+ /**
501
+ * Sets the rendering area for this image within the main canvas.
502
+ * Used for split-screen and potentially other layout effects. Animates by default.
503
+ * @param v The target area rectangle [x0, y0, x1, y1] relative to the main canvas (0-1).
504
+ * @param opts Options for setting the area.
505
+ */
437
506
  setArea(v: Models.Camera.View, opts?: {
438
- /** Directly set the area without animation */
507
+ /** If true, sets the area instantly without animation. */
439
508
  direct?: boolean;
440
- /** Don't emit the updates back to JS */
509
+ /** If true, prevents dispatching view updates during the animation. */
441
510
  noDispatch?: boolean;
442
- /** Don't trigger a frame draw */
511
+ /** If true, prevents triggering a Wasm render after setting the area. */
443
512
  noRender?: boolean;
444
513
  }): void;
445
- /** For in-image 360 embeds */
514
+ /** Sets the 3D rotation for an embedded image (used for placing embeds in 360 space). */
446
515
  setRotation(rotX?: number, rotY?: number, rotZ?: number): void;
447
- /** [Omni] Get the current rotation in degrees */
516
+ /** [Omni] Gets the current rotation angle in degrees based on the active frame index. */
448
517
  getOmniRotation(): number;
449
- /** [Omni] Get the corresponding frame number to current rotation */
518
+ /** [Omni] Gets the frame index corresponding to a given rotation angle (radians). */
450
519
  getOmniFrame(rot?: number): number | undefined;
451
- /** [Omni] Get the corresponding screen coordinates based on xyz coords */
520
+ /** [Omni] Gets the screen coordinates [x, y, scale, depth] for given 3D object coordinates. */
452
521
  getOmniXY(x: number, y: number, z: number): Float64Array;
522
+ /** [Omni] Applies Omni-specific camera settings (distance, FoV, angle) to Wasm. */
453
523
  setOmniSettings(): void;
454
524
  }
455
- export const BASEPATH_V5: string;
456
- export const BASEPATH_V5_EU: string;
457
- /** External wasm binary */
458
- export const WASM: {
459
- 'b64': string;
460
- 'ugz'?: (b: string, t: boolean) => Promise<ArrayBuffer | Uint8Array>;
461
- };
462
- /** The WebAssembly class */
525
+ /**
526
+ * The main WebAssembly controller class. Handles interaction between JavaScript
527
+ * and the compiled C++ core of Micrio. Accessed via `micrio.wasm`.
528
+ */
463
529
  export class Wasm {
464
530
  micrio: HTMLMicrioElement;
465
- /** Wasm inited */
531
+ /** Flag indicating if the Wasm module has been loaded and initialized. */
466
532
  ready: boolean;
467
- /** Shared WebAssembly memory -- 1 page is 64KB */
533
+ /** Shared WebAssembly memory instance. */
468
534
  private memory;
469
- /** The actual WebAssembly memory buffer -- only call here since memory won't grow */
470
- private b;
471
- /** The WebAssembly main instance memory pointer */
472
- private i;
473
- /** The WebAssembly current canvas instance memory pointer */
474
- private c;
475
- /** The current frame's timestamp */
476
- private now;
477
- /** RequestAnimationFrame pointer */
478
- private raf;
479
- /** Is currently drawing */
480
- private drawing;
481
- /** Barebone mode, minimal tile downloading */
482
- private bareBone;
483
- /** Number of tiles per image */
484
- private baseTiles;
485
- /** Array of tile indices drawn this frame */
486
- private drawn;
487
- /** Array of tile indices drawn last frame */
488
- private prevDrawn;
489
- /** Tile indices to be deleted */
490
- private toDelete;
491
- /** Tile textures */
492
- private textures;
493
- /** Running texture download threads */
494
- private requests;
495
- /** Timeout after texture loads */
496
- private timeouts;
497
- /** Tile loaded timestamp */
498
- private tileLoaded;
499
- /** Tile opacity */
500
- private tileOpacity;
501
- /** Tile load states */
502
- private loadStates;
503
- /** Svelte watch subscriptions */
504
- private unsubscribe;
505
- private cameras;
506
- /** The tile vertex buffer */
507
- _vertexBuffer: Float32Array;
508
- /** The tile texture buffer */
509
- static readonly _textureBuffer: Float32Array;
510
- /** Number of X geometry segments per tile */
511
- static segsX: number;
512
- /** Number of Y geometry segments per tile */
513
- static segsY: number;
514
- /** The tile vertex buffer for 360 */
515
- _vertexBuffer360: Float32Array;
516
- /** The tile texture buffer for 360 */
517
- static _textureBuffer360: Float32Array;
518
- /** Camera perspective matrix from WebAssembly */
519
- private _pMatrices;
520
- /** Is paged */
521
- private isGallery;
522
- /** Wasm imports */
523
- private imports;
524
- /** Build the static tile texture coord buffer */
525
- private static getTextureBuffer;
526
- /** Create the WebAssembly instance
527
- * @param micrio The main <micr-io> instance
535
+ /**
536
+ * Creates the Wasm controller instance.
537
+ * @param micrio The main HTMLMicrioElement instance.
528
538
  */
529
539
  constructor(micrio: HTMLMicrioElement);
530
- /** Load the WebAssembly module
531
- * @returns The promise when loading is complete
540
+ /**
541
+ * Loads and instantiates the WebAssembly module.
542
+ * @returns A Promise that resolves when the Wasm module is ready.
532
543
  */
533
544
  load(): Promise<void>;
534
- /** Unbind this module */
545
+ /** Unbinds event listeners, stops rendering, and cleans up resources. */
535
546
  unbind(): void;
536
- /** Add a new rendering canvas */
537
- private addCanvas;
538
- /** Set the specified canvas as active
539
- * @param canvas The Image to add
547
+ /**
548
+ * Sets the currently active canvas/image instance in the Wasm module.
549
+ * Handles adding the canvas to Wasm if it's not already initialized.
550
+ * @param canvas The MicrioImage instance to set as active.
540
551
  */
541
552
  setCanvas(canvas?: MicrioImage): void;
542
- /** Remove a canvas */
553
+ /** Removes a canvas instance from the Wasm module. */
543
554
  removeCanvas(c: MicrioImage): void;
544
- /** Request a next frame to draw */
555
+ /** Requests the next animation frame to trigger the `draw` method. */
545
556
  render(): void;
546
- /** Draw an actual frame */
547
- private draw;
548
- /** Cancel the current requestAnimationFrame request */
549
- private stop;
550
- /** Tile drawing function called from inside Wasm
551
- * @returns True when the tile is downloaded and ready to drawn
552
- */
553
- private drawTile;
554
- /** Clear the canvas for drawing */
555
- private drawStart;
556
- /** Received the texture data */
557
- private gotTexture;
558
- /** Delete an ended or cancelled request */
559
- private deleteRequest;
560
- /** Delete a tile */
561
- private deleteTile;
562
- /** Do a general cleanup */
563
- private cleanup;
564
- /** Resize the internal canvas
565
- * @param c The viewport rect
566
- */
567
- resize(c: Models.Canvas.ViewRect): void;
568
557
  /** Add a child image to the current canvas, either embed or independent canvas */
569
558
  private addImage;
570
- /** Add a child image to the current canvas
571
- * @param image The image
572
- * @param parent The parent image
573
- * @param opts Embedding options
574
- * @returns Promise when the image is added
575
- */
576
- addEmbed: (image: MicrioImage | Models.Omni.Frame, parent: MicrioImage, opts?: Models.Embeds.EmbedOptions) => Promise<void>;
577
559
  /** Add a child independent canvas to the current canvas, used for grid images
578
560
  * @param image The image
579
561
  * @param parent The parent image
580
562
  * @returns Promise when the image is added
581
563
  */
582
564
  addChild: (image: MicrioImage, parent: MicrioImage) => Promise<void>;
583
- /** Simple image fader
584
- * @param ptr The child image mem pointer
585
- * @param opacity The target opacity
586
- * @param direct Set immediately
587
- */
588
- fadeImage(ptr: number, opacity: number, direct?: boolean): void;
589
565
  }
590
566
  /**
591
- * Swipeable switching image sequence
567
+ * Handles swipe gestures for navigating image sequences, particularly for
568
+ * swipe galleries and Omni object rotation.
592
569
  * @author Marcel Duin <marcel@micr.io>
593
- *
594
- */
570
+ */
595
571
  export class GallerySwiper {
596
572
  private micrio;
597
573
  private length;
598
574
  goto: (i: number) => void;
599
575
  private opts;
600
- private startIndex;
601
- private startX;
602
- private hitTresh;
603
- private snapTo;
604
- private raf;
605
- private pointers;
606
- private isFullWidth;
607
- private startedWithShift;
608
- private firstTouchId;
609
- private image;
576
+ /** Getter for the current active image/frame index from the Wasm module. */
610
577
  get currentIndex(): number;
611
- constructor(micrio: HTMLMicrioElement, length: number, goto: (i: number) => void, opts?: {
578
+ /**
579
+ * Creates a GallerySwiper instance.
580
+ * @param micrio The main HTMLMicrioElement instance.
581
+ * @param length The total number of images/frames in the sequence.
582
+ * @param goto Callback function to navigate to a specific index.
583
+ * @param opts Swiper options: sensitivity, continuous looping, coverLimit.
584
+ */
585
+ constructor(micrio: HTMLMicrioElement, length: number, goto: (i: number) => void, // Callback to change the active index
586
+ opts?: {
612
587
  sensitivity?: number;
613
588
  continuous?: boolean;
614
589
  coverLimit?: boolean;
615
590
  });
591
+ /** Cleans up event listeners when the swiper is destroyed. */
616
592
  destroy(): void;
617
- private isDragging;
618
- /** Drag start */
619
- private dStart;
620
- /** Drag move */
621
- private dMove;
622
- /** Drag stop */
623
- private dStop;
624
- private mouseleave;
625
- private swipeEnd;
626
- /** Same as .goto(), but animate the rotation */
593
+ /**
594
+ * Animates smoothly to a target index using requestAnimationFrame.
595
+ * @param idx The target index.
596
+ */
627
597
  animateTo(idx: number): void;
628
598
  }
629
599
  /**
630
600
  * # Micrio State management
631
601
  *
632
- * Newly introduced in Micrio 4.0 is the replacement of the way you can interact with markers and tours from a classic imperative JavaScript API to a Svelte-inspired, store-based **state** management using SvelteStore.
633
- *
634
- * This has greatly simplified the internal workings and has made the HTML interface fully reactive based on the image state instead of being interwoven in the previous JS API itself.
635
- *
636
- * There are 2 `State` controllers:
637
- *
638
- * 1. {@link State.Main}: the main {@link HTMLMicrioElement} state controller, used for:
639
- * * Getting and setting the active tour and marker
640
- * * Loading and saving the entire current state as a minimal independent JSON object
641
- * 2. {@link State.Image}: individual image {@link MicrioImage.state} controller, used for:
642
- * * Setting the current opened marker in this image
643
- * * Getting the image's last known viewport, even if it is not active at the moment
644
- *
645
- * ## Upgrading from Micrio 3.x to 4.x
602
+ * Manages the application state using Svelte stores, allowing reactive updates
603
+ * throughout the UI and providing methods to get/set the overall state.
604
+ * Replaces the imperative API of Micrio 3.x.
646
605
  *
647
- * Please refer to [this Micrio knowledge base article](https://doc.micr.io/client/v4/migrating.html)
648
- * for if you want to upgrade an existing 3.x implementation to 4.x.
606
+ * Consists of two main state controllers:
607
+ * 1. {@link State.Main}: Global state for the `<micr-io>` element (active tour, marker, UI state).
608
+ * 2. {@link State.Image}: State specific to individual {@link MicrioImage} instances (view, active marker within that image).
649
609
  *
610
+ * @see {@link https://doc.micr.io/client/v4/migrating.html | Migrating from Micrio 3.x}
650
611
  * @author Marcel Duin <marcel@micr.io>
651
- */
612
+ */
652
613
  export namespace State {
653
- /** A main Micrio state JSON object */
614
+ /** Represents the entire serializable state of a Micrio instance. */
654
615
  type MicrioStateJSON = {
655
- /** The current image id */
616
+ /** The ID of the currently active main image. */
656
617
  id: string;
657
- /** Array of individual image states */
618
+ /** Array containing the state of each individual image canvas. */
658
619
  c: ImageState[];
659
- /** Any running tour */
620
+ /** Optional information about the currently active tour [tourId, currentTime?, pausedState?]. */
660
621
  t?: [string, number?, string?];
661
- /** Any running media */
622
+ /** Reference to the currently active HTMLMediaElement (unused?). */
662
623
  m?: HTMLMediaElement;
663
624
  };
664
- /** An individual image state */
625
+ /** Represents the serializable state of a single MicrioImage instance. */
665
626
  type ImageState = [
627
+ /** The image ID. */
666
628
  string,
629
+ /** The current viewport x0. */
667
630
  number,
631
+ /** The current viewport y0. */
668
632
  number,
633
+ /** The current viewport x1. */
669
634
  number,
635
+ /** The current viewport y1. */
670
636
  number,
637
+ /** The ID of the currently opened marker within this image (optional). */
671
638
  string?,
639
+ /** The UUID of the media element associated with the opened marker (optional). */
672
640
  string?,
641
+ /** The currentTime of the marker's media element (optional). */
673
642
  number?,
643
+ /** The paused state ('p') of the marker's media element (optional). */
674
644
  string?
675
645
  ];
676
646
  /**
677
- * # HTMLMicrioElement state controller
678
- *
679
- * The {@link State.Main} constructor is used as {@link HTMLMicrioElement.state}, and offers:
680
- *
681
- * * Reading and setting the active tour and marker
682
- * * Loading and saving the entire current state as a minimal independent JSON object
647
+ * # HTMLMicrioElement state controller (`micrio.state`)
683
648
  *
649
+ * Manages the global application state associated with the main `<micr-io>` element.
650
+ * Provides Svelte stores for reactive UI updates and methods for state serialization.
684
651
  */
685
652
  class Main {
686
653
  private micrio;
687
- /** The current {@link Models.ImageData.MarkerTour} or {@link Models.ImageData.VideoTour} store Writable */
654
+ /** Writable Svelte store holding the currently active tour object (VideoTour or MarkerTour), or undefined if no tour is active. */
688
655
  readonly tour: Writable<Models.ImageData.VideoTour | Models.ImageData.MarkerTour | undefined>;
689
- /** The current active {@link Models.ImageData.MarkerTour} or {@link Models.ImageData.VideoTour} */
656
+ /** Getter for the current value of the {@link tour} store. */
690
657
  get $tour(): Models.ImageData.VideoTour | Models.ImageData.MarkerTour | undefined;
691
- /** The current shown image's opened {@link Models.ImageData.Marker} store Writable */
658
+ /** Writable Svelte store holding the marker object currently opened in the *main* active image, or undefined if none is open. */
692
659
  readonly marker: Writable<Models.ImageData.Marker | undefined>;
693
- /** The current hovered marker */
660
+ /** Writable Svelte store holding the ID of the marker currently being hovered over. */
694
661
  readonly markerHoverId: Writable<string | undefined>;
695
- /** The current opened {@link Models.ImageData.Marker} of the current shown {@link MicrioImage} */
662
+ /** Getter for the current value of the {@link marker} store. */
696
663
  get $marker(): Models.ImageData.Marker | undefined;
697
- /** The current opened popup */
664
+ /** Writable Svelte store holding the marker object whose popup is currently displayed. */
698
665
  readonly popup: Writable<Models.ImageData.Marker | undefined>;
699
- /** The current opened custom content page */
666
+ /** Writable Svelte store holding the data for the currently displayed popover (custom page or gallery). See {@link Models.State.PopoverType}. */
700
667
  readonly popover: Writable<Models.State.PopoverType | undefined>;
701
- /** UI controls settings */
668
+ /** UI state stores. */
702
669
  ui: {
703
- /** Show/hide main controls */
670
+ /** Writable store controlling the visibility of the main UI controls (bottom right). */
704
671
  controls: Writable<boolean>;
705
- /** Show zoom buttons if applicable */
672
+ /** Writable store controlling the visibility of zoom buttons. */
706
673
  zoom: Writable<boolean>;
707
- /** Hide all UI elements */
674
+ /** Writable store controlling the visibility of all UI elements (e.g., for fullscreen or specific modes). */
708
675
  hidden: Writable<boolean>;
709
676
  };
710
677
  /**
711
- * Gets the current state as an independent, minimal JSON object.
712
- * This includes the currently open image(s), marker(s), and actively playing media (video, audio, tour) and its state.
713
- * You can use this object in any other environment to immediately replicate this state (neat!).
714
- *
715
- * Example:
678
+ * Gets the current state of the Micrio viewer as a serializable JSON object.
679
+ * This object captures the active image(s), viewports, open markers, active tour,
680
+ * and media playback states, allowing the exact state to be restored later or elsewhere.
716
681
  *
717
- * ```js
718
- * // Save the current state in Browser 1
719
- * const state = micrio.state.get();
720
- *
721
- * // Save or sync this object to Browser 2 and load it there..
722
- *
723
- * // This makes the <micr-io> session state identical to Browser 1.
724
- * micrio.state.set(state);
682
+ * @example
683
+ * ```javascript
684
+ * const currentState = micrio.state.get();
685
+ * // Store or transmit `currentState`
725
686
  * ```
687
+ * @returns The current state as a {@link MicrioStateJSON} object, or undefined if no image is loaded.
726
688
  */
727
689
  get(): MicrioStateJSON | undefined;
728
690
  /**
729
- * Sets the state from a `MicrioStateJSON` object, output by the function above here.
730
- * This works on any Micrio instance!
731
- */
691
+ * Sets the Micrio viewer state from a previously saved {@link MicrioStateJSON} object.
692
+ * This will attempt to restore the active image, viewports, open markers, active tour,
693
+ * and media playback states.
694
+ *
695
+ * @example
696
+ * ```javascript
697
+ * const savedState = // ... load state object ...
698
+ * micrio.state.set(savedState);
699
+ * ```
700
+ * @param s The state object to load.
701
+ */
732
702
  set(s: MicrioStateJSON): Promise<void>;
733
- private setTour;
734
703
  }
735
704
  /**
736
- * # MicrioImage state controller
737
- *
738
- * The {@link State.Image} constructor is used as {@link MicrioImage.state}, and offers:
705
+ * # MicrioImage state controller (`micrioImage.state`)
739
706
  *
740
- * * Setting the current opened marker in this image
741
- * * Getting the image's last known viewport, even if it is not active at the moment
707
+ * Manages the state specific to a single {@link MicrioImage} instance,
708
+ * primarily its viewport and currently opened marker.
742
709
  */
743
710
  class Image {
744
711
  private image;
745
- /** The current image viewport store Writable */
712
+ /** Writable Svelte store holding the current viewport [x0, y0, x1, y1] of this image. */
746
713
  readonly view: Writable<Models.Camera.View | undefined>;
747
- /** The current or last known viewport of this image */
714
+ /** Getter for the current value of the {@link view} store. */
748
715
  get $view(): Models.Camera.View | undefined;
749
716
  /**
750
- * The current active marker store Writable.
751
- * You can either set this to be a {@link Models.ImageData.Marker} JSON object, or `string`, which is the ID
752
- * of the marker you wish to open.
717
+ * Writable Svelte store holding the currently active marker within *this specific image*.
718
+ * Can be set with a marker ID string or a full marker object. Setting to undefined closes the marker.
753
719
  */
754
720
  readonly marker: Writable<Models.ImageData.Marker | string | undefined>;
755
- /** The current active Marker instance */
721
+ /** Getter for the current value of the {@link marker} store. */
756
722
  get $marker(): Models.ImageData.Marker | undefined;
757
- /** The current layer to display (omni objects) */
723
+ /** Writable Svelte store holding the currently displayed layer index (for Omni objects). */
758
724
  readonly layer: Writable<number>;
759
- /** Hook omni layer */
760
- hookOmni(): void;
761
725
  }
762
726
  }
763
727
  /**
764
- * An individual Micrio image
728
+ * Represents and controls a single Micrio image instance within the viewer.
729
+ * This class manages the image's metadata (info), cultural data (data),
730
+ * settings, camera, state, and interactions with the WebAssembly module
731
+ * for rendering and processing. It handles loading image tiles, embeds,
732
+ * markers, tours, and galleries associated with the image.
733
+ *
734
+ * Instances are typically created and managed by the main {@link HTMLMicrioElement}.
765
735
  * @author Marcel Duin <marcel@micr.io>
766
736
  */
767
737
  export class MicrioImage {
768
738
  wasm: Wasm;
769
739
  private attr;
770
740
  opts: {
771
- /** Optional sub area for partial / embedded images */
741
+ /** Optional sub area [x0, y0, x1, y1] defining placement within a parent canvas (for embeds/galleries). */
772
742
  area?: Models.Camera.View;
773
- /** For split screen, the image this is secondary to */
743
+ /** For split screen, the primary image this one is secondary to. */
774
744
  secondaryTo?: MicrioImage;
775
- /** Follow the movements of the main image */
745
+ /** If true, passively follows the view changes of the primary split-screen image. */
776
746
  isPassive?: boolean;
777
- /** This is an in-image embed */
747
+ /** If true, this image is embedded within another image (affects rendering/camera). */
778
748
  isEmbed?: boolean;
779
- /** For non-independent embeds, use the parent's .camera */
749
+ /** If true, uses the parent image's camera instead of creating its own (for switch/omni galleries). */
780
750
  useParentCamera?: boolean;
781
751
  };
782
- /** The image id */
752
+ /** The unique identifier (Micrio ID) for this image. */
783
753
  readonly id: string;
784
- /** Unique instance id */
754
+ /** A unique instance identifier (UUID) generated for this specific instance. */
785
755
  readonly uuid: string;
786
- /** The Micrio info data Readable store */
756
+ /** Svelte Readable store holding the image's core information (dimensions, format, settings, etc.). See {@link Models.ImageInfo.ImageInfo}. */
787
757
  readonly info: Readable<Models.ImageInfo.ImageInfo | undefined>;
788
- /** The image info data
758
+ /** Getter for the current value of the {@link info} store.
789
759
  * @readonly
790
760
  */
791
761
  get $info(): Models.ImageInfo.ImageInfo | undefined;
792
- /** The image settings Writable */
762
+ /** Svelte Writable store holding the image's specific settings, often merged from attributes and info data. See {@link Models.ImageInfo.Settings}. */
793
763
  readonly settings: Writable<Models.ImageInfo.Settings>;
794
- /** The current CultureData */
764
+ /** Getter for the current value of the {@link settings} store. */
795
765
  get $settings(): Models.ImageInfo.Settings;
796
- /** The Micrio culture data Writable */
766
+ /** Svelte Writable store holding the image's cultural data (markers, tours, text content for the current language). See {@link Models.ImageData.ImageData}. */
797
767
  readonly data: Writable<Models.ImageData.ImageData | undefined>;
798
- /** The current CultureData */
768
+ /** Getter for the current value of the {@link data} store. */
799
769
  get $data(): Models.ImageData.ImageData | undefined;
800
- /** State manager */
770
+ /** State manager specific to this image instance (view, active marker, etc.). See {@link State.Image}. */
801
771
  readonly state: State.Image;
802
- /** The virtual camera instance to control the current main image views */
772
+ /** The virtual camera instance controlling the view for this image. */
803
773
  camera: Camera;
804
- /** The 2D or 360 video MediaElement */
774
+ /** Svelte Writable store holding the HTMLVideoElement if this image represents a video. */
805
775
  readonly video: Writable<HTMLVideoElement | undefined>;
806
- /** The canvas is currently visible
776
+ /** Svelte Writable store indicating if this image's canvas is currently visible and being rendered.
807
777
  * @readonly
808
778
  */
809
779
  readonly visible: Writable<boolean>;
810
- /** Album info if image is part of an album (V5+) */
780
+ /** Album information if this image is part of a V5 album. */
811
781
  album?: Models.Album | undefined;
812
- /** Gallery swiper instance */
782
+ /** Gallery swiper instance, if this image is part of a swipe gallery. */
813
783
  swiper: GallerySwiper | undefined;
814
- /** The last opened view */
784
+ /** Stores the camera view state when a marker is opened, used to return to the previous view. */
815
785
  openedView: Models.Camera.View | undefined;
816
- /** Error, if any */
786
+ /** Base path URI for fetching `data.[lang].json` files. */
787
+ dataPath: string;
788
+ /** Stores an error message if loading failed. */
817
789
  error: string | undefined;
818
- /** Rendered pixel rectangle [left, top, width, height] */
790
+ /** Svelte Writable store holding the calculated pixel viewport [left, top, width, height] of this image within the main canvas. */
819
791
  readonly viewport: Writable<Models.Camera.View>;
820
- /** Embedded in-image children */
792
+ /** Array of child {@link MicrioImage} instances embedded within this image. */
821
793
  readonly embeds: MicrioImage[];
822
- /** Grid controller */
794
+ /** Grid controller instance, if this image is a grid container. */
823
795
  grid: Grid | undefined;
824
- /** The tile basePath */
796
+ /** Base path for fetching image tiles. */
825
797
  tileBase: string | undefined;
826
- private setError;
827
- private loadScript;
828
- private loadStyle;
829
- /** Enrich marker tour data with external tour step info and durations
830
- * This method is called BEFORE Image.data is set. So that's pretty neat.
831
- */
832
- private enrichData;
833
- private parseIIIFSequence;
834
- /** Add an in-image micrio embed */
798
+ /**
799
+ * Adds an embedded MicrioImage (representing another Micrio image or video) within this image.
800
+ * @param info Partial info data for the embed.
801
+ * @param area The placement area `[x0, y0, x1, y1]` within the parent image.
802
+ * @param opts Embedding options (opacity, fit, etc.).
803
+ * @returns The newly created embedded {@link MicrioImage} instance.
804
+ */
835
805
  addEmbed(info: Partial<Models.ImageInfo.ImageInfo>, area: Models.Camera.View, opts?: Models.Embeds.EmbedOptions): MicrioImage;
836
- /** Get the accompanying HTMLMediaElement for any in-image video embeds */
806
+ /** Gets the HTMLMediaElement associated with a video embed ID. */
837
807
  getEmbedMediaElement(id: string): HTMLMediaElement | undefined;
838
- /** Fade in the individual image */
808
+ /** Fades in the image smoothly or instantly. */
839
809
  fadeIn(direct?: boolean): void;
810
+ /** Fades out the image smoothly or instantly. */
840
811
  fadeOut(direct?: boolean): void;
841
812
  }
842
813
  /**
843
- * Video tour controller
814
+ * Video tour controller. Manages playback and camera animation for video tours
815
+ * defined by a timeline of view rectangles and durations.
844
816
  * @author Marcel Duin <marcel@micr.io>
845
- */
846
- /** The Video Tour class */
817
+ */
818
+ /**
819
+ * Controls the playback of a video tour, animating the camera according
820
+ * to a predefined timeline and synchronizing with associated audio/video media.
821
+ * Instances are typically created and managed by the `Tour.svelte` component.
822
+ */
847
823
  export class VideoTourInstance {
848
824
  private image;
849
825
  private data;
850
- /** The tour timeline */
851
- private timeline;
852
- private content;
853
- /** Micrio instance */
854
- private micrio;
855
- /** Set the data */
826
+ /**
827
+ * Creates a VideoTourInstance.
828
+ * @param image The parent {@link MicrioImage} instance.
829
+ * @param data The {@link Models.ImageData.VideoTour} data object.
830
+ */
856
831
  constructor(image: MicrioImage, data: Models.ImageData.VideoTour);
832
+ /** Cleans up the tour instance, stops animations, and re-hooks events if necessary. */
857
833
  destroy(): void;
858
- /** Parse the timeline data */
834
+ /** Parses the raw timeline data from the tour content into the internal `timeline` array. */
859
835
  read(): void;
836
+ /** Getter for the total duration of the tour in seconds. */
860
837
  get duration(): number;
838
+ /** Setter for the total duration (updates internal content). */
861
839
  set duration(v: number);
840
+ /** Getter for the current paused state. */
862
841
  get paused(): boolean;
842
+ /** Getter indicating if the tour has ended. */
863
843
  get ended(): boolean;
844
+ /** Getter for the current playback time in seconds. */
864
845
  get currentTime(): number;
846
+ /** Setter for the current playback time (seeks to the corresponding progress). */
865
847
  set currentTime(v: number);
848
+ /** Getter for the current progress percentage (0-1). */
866
849
  get progress(): number;
850
+ /** Setter for the current progress percentage (seeks to that point). */
867
851
  set progress(v: number);
868
- /** Play/resume the tour */
852
+ /** Starts or resumes tour playback. */
869
853
  play(): void;
870
- /** Pause the tour */
854
+ /** Pauses the tour playback. */
871
855
  pause(): void;
872
- /** Go to time segment index */
873
- private gotoStep;
874
- /** Go to the next tour segment */
875
- private nextStep;
876
- /** Get a viewport for a step index */
877
- private getView;
878
- /** Start a segment animation */
879
- private startAni;
880
- /** Set the tour to this progress percentage */
856
+ /**
857
+ * Seeks the tour to a specific progress percentage.
858
+ * @param perc The target progress (0-1).
859
+ */
881
860
  private setProgress;
882
- /** Go to a timestamp in milliseconds */
883
- private gotoTime;
884
861
  }
885
862
  /**
886
863
  * # Micrio JSON data model
@@ -1740,6 +1717,7 @@ declare module '@micrio/client' {
1740
1717
  currentTime?: number;
1741
1718
  /** Media has ended */
1742
1719
  ended?: boolean;
1720
+ hasSubtitle?: boolean;
1743
1721
  };
1744
1722
  interface MenuPageButton {
1745
1723
  /** Localized button title */
@@ -2079,91 +2057,143 @@ declare module '@micrio/client' {
2079
2057
  }
2080
2058
  }
2081
2059
  }
2060
+ /**
2061
+ * Handles WebGL postprocessing effects.
2062
+ * Sets up a framebuffer to render the main scene to a texture,
2063
+ * then renders a fullscreen quad using that texture and a custom fragment shader
2064
+ * to apply effects like bloom, vignette, etc.
2065
+ */
2082
2066
  export class PostProcessor {
2083
2067
  private gl;
2084
- /** Framebuffer render target for postprocessing */
2068
+ /** Framebuffer object used as the render target for the main scene. */
2085
2069
  frameBuffer: WebGLFramebuffer;
2086
- /** Frame buffer render-to-texture */
2087
- private texture;
2088
- /** Quad buffer for frameBuffer */
2089
- private quad;
2090
- /** Post processing shader */
2091
- private program;
2092
- private ppPositionLoc;
2093
- private ppTexCoordLoc;
2094
- private ppTimeLoc;
2070
+ /**
2071
+ * Creates a PostProcessor instance.
2072
+ * Compiles the shaders, creates the framebuffer and texture, and sets up attributes/uniforms.
2073
+ * @param gl The WebGL rendering context.
2074
+ * @param micrio The main HTMLMicrioElement instance (used for WebGL utilities).
2075
+ * @param fragmentShader The source code for the custom fragment shader implementing the effect.
2076
+ */
2095
2077
  constructor(gl: WebGL2RenderingContext | WebGLRenderingContext, micrio: HTMLMicrioElement, fragmentShader: string);
2078
+ /**
2079
+ * Renders the postprocessing effect.
2080
+ * Binds the postprocessing shader, sets up attributes, binds the scene texture,
2081
+ * passes uniforms (like time), and draws the fullscreen quad.
2082
+ * Assumes the main scene has already been rendered to this instance's framebuffer.
2083
+ */
2096
2084
  render(): void;
2085
+ /**
2086
+ * Resizes the framebuffer texture when the canvas size changes.
2087
+ */
2097
2088
  resize(): void;
2098
2089
  }
2099
2090
  /**
2100
- * Micrio user input event handler
2091
+ * Handles user input events (mouse, touch, keyboard, wheel, gestures) for the Micrio viewer.
2092
+ * Translates browser events into camera movements (pan, zoom), dispatches custom Micrio events,
2093
+ * and manages interaction states like panning, pinching, and enabled/disabled states.
2094
+ * Accessed via `micrio.events`.
2101
2095
  * @author Marcel Duin <marcel@micr.io>
2102
2096
  */
2103
2097
  export class Events {
2104
- /** Enable/disable events */
2098
+ /** Writable Svelte store indicating if event handling is currently enabled. Set to false during tours or animations. */
2105
2099
  enabled: Writable<boolean>;
2106
- /** Enabled state getter */
2100
+ /** Getter for the current value of the {@link enabled} store. */
2107
2101
  get $enabled(): boolean;
2108
- /** User is pinching above certain treshold */
2102
+ /** Current pinch zoom factor relative to the start of the pinch. Undefined when not pinching. */
2109
2103
  pinchFactor: number | undefined;
2110
- /** User is currently manually navigating or not
2111
- * @returns Whether the user is using mouse/gestures to navigate right now
2104
+ /**
2105
+ * Checks if the user is currently interacting with the map via panning, pinching, or wheeling.
2106
+ * @returns True if the user is actively navigating.
2112
2107
  */
2113
2108
  get isNavigating(): boolean;
2114
- /** Hook all event listeners */
2109
+ /** Hooks all necessary event listeners based on current settings. */
2115
2110
  hook(): void;
2116
- /** Unhook all event listeners */
2111
+ /** Unhooks all attached event listeners. */
2117
2112
  unhook(): void;
2118
- /** Hook keyboard event listeners */
2113
+ /** Hooks keyboard event listeners. */
2119
2114
  hookKeys(): void;
2120
- /** Unhook keyboard event listeners */
2115
+ /** Unhooks keyboard event listeners. */
2121
2116
  unhookKeys(): void;
2122
- /** Hook all zoom event listeners */
2117
+ /** Hooks zoom-related event listeners (pinch, scroll, double-tap/click). */
2123
2118
  hookZoom(): void;
2124
- /** Remove all zoom event listeners */
2119
+ /** Unhooks zoom-related event listeners. */
2125
2120
  unhookZoom(): void;
2126
- scrollHooked: boolean;
2127
- /** Hook mousewheel / scroll event listeners */
2121
+ /** Hooks mouse wheel/scroll event listeners. */
2128
2122
  hookScroll(): void;
2129
- /** Unhook mousewheel / scroll event listeners */
2123
+ /** Unhooks mouse wheel/scroll event listeners. */
2130
2124
  unhookScroll(): void;
2131
- /** Hook touch/pinch event listeners */
2125
+ /** Hooks touch pinch and macOS gesture event listeners. */
2132
2126
  hookPinch(): void;
2133
- /** Unhook touch/pinch event listeners */
2127
+ /** Unhooks touch pinch and macOS gesture event listeners. */
2134
2128
  unhookPinch(): void;
2135
- /** Hook mouse/touch dragging event listeners */
2129
+ /** Hooks pointer down/move/up listeners for drag panning. */
2136
2130
  hookDrag(): void;
2137
- /** Unhook mouse/touch dragging event listeners */
2131
+ /** Unhooks pointer listeners for drag panning. */
2138
2132
  unhookDrag(): void;
2139
2133
  }
2140
- /** Micrio sizing and `<canvas>` controller */
2134
+ /**
2135
+ * Manages the HTML `<canvas>` element used for WebGL rendering,
2136
+ * handles resizing, and provides viewport information.
2137
+ * Accessed via `micrio.canvas`.
2138
+ */
2141
2139
  export class Canvas {
2142
2140
  private micrio;
2143
- /** The Micrio WebGL rendering `<canvas>` element */
2141
+ /** The main WebGL rendering `<canvas>` element. */
2144
2142
  readonly element: HTMLCanvasElement;
2145
- /** Canvas sizing information */
2143
+ /** Object containing current viewport dimensions, position, and ratios. */
2146
2144
  readonly viewport: Models.Canvas.ViewRect;
2147
- /** Client is a mobile device, Writable */
2145
+ /** Writable Svelte store indicating if the client is likely a mobile device. */
2148
2146
  readonly isMobile: Writable<boolean>;
2149
- /** Client is a mobile device, Writable value */
2147
+ /** Getter for the current value of the {@link isMobile} store. */
2150
2148
  get $isMobile(): boolean;
2149
+ /**
2150
+ * Creates a Canvas controller instance.
2151
+ * @param micrio The main HTMLMicrioElement instance.
2152
+ */
2151
2153
  constructor(micrio: HTMLMicrioElement);
2152
- /** Micrio element resize handler */
2153
- onresize(): void;
2154
- /** Get the screen pixel ratio
2155
- * @returns The device pixel ratio
2154
+ /**
2155
+ * Gets the appropriate device pixel ratio for rendering.
2156
+ * Clamped between 1 and 2, disabled on iOS and if `noRetina` setting is true.
2157
+ * @param s Optional image settings object to check for `noRetina`.
2158
+ * @returns The calculated device pixel ratio.
2156
2159
  */
2157
2160
  getRatio: (s?: Partial<Models.ImageInfo.Settings>) => number;
2158
- /** Set virtual offset margins applied to all viewports
2159
- * @param width The offset width in pixels
2160
- * @param height The offset height in pixels
2161
+ /**
2162
+ * Sets virtual offset margins in the Wasm controller.
2163
+ * This likely affects how viewports are calculated or limited.
2164
+ * @param width The horizontal offset margin in pixels.
2165
+ * @param height The vertical offset margin in pixels.
2161
2166
  */
2162
2167
  setMargins(width: number, height: number): void;
2163
2168
  }
2169
+ /**
2170
+ * Language-related constants and utilities.
2171
+ */
2172
+ /**
2173
+ * The browser's current locale string (e.g., 'en-US', 'nl-NL'), falling back to 'en-EN'.
2174
+ * Used for initializing the `languageNames` object.
2175
+ */
2164
2176
  export const locale: string;
2177
+ /**
2178
+ * An `Intl.DisplayNames` object configured to provide human-readable language names
2179
+ * based on the browser's locale. Used for displaying language options in the UI.
2180
+ * Will be `undefined` if `Intl.DisplayNames` is not supported by the browser.
2181
+ *
2182
+ * @example
2183
+ * ```javascript
2184
+ * languageNames?.of('nl'); // Output might be "Dutch" (depending on browser locale)
2185
+ * ```
2186
+ */
2165
2187
  export const languageNames: Intl.DisplayNames;
2188
+ /**
2189
+ * An array of language codes that are typically written Right-to-Left (RTL).
2190
+ * Used by the `HTMLMicrioElement` to set the `dir="rtl"` attribute when an RTL language is selected.
2191
+ */
2166
2192
  export const rtlLanguageCodes: string[];
2193
+ /**
2194
+ * Interface defining the structure for UI button translations.
2195
+ * Each key corresponds to a specific UI element's title or label.
2196
+ */
2167
2197
  interface ButtonTranslations {
2168
2198
  close: string;
2169
2199
  zoomIn: string;
@@ -2187,116 +2217,174 @@ declare module '@micrio/client' {
2187
2217
  menuToggle: string;
2188
2218
  waypointFollow: string;
2189
2219
  }
2220
+ /**
2221
+ * Object containing translations for UI button titles in different languages.
2222
+ * The keys are language codes (e.g., 'en', 'nl'), and the values are objects
2223
+ * conforming to the `ButtonTranslations` interface.
2224
+ */
2190
2225
  export const langs: {
2191
2226
  [key: string]: ButtonTranslations;
2192
2227
  };
2228
+ /**
2229
+ * Writable Svelte store holding the currently active `ButtonTranslations` object.
2230
+ * Defaults to English ('en'). UI components subscribe to this store to display
2231
+ * translated text based on the currently selected language.
2232
+ * The language is typically changed by updating the `micrio._lang` store, which
2233
+ * should then trigger an update to this `i18n` store.
2234
+ */
2193
2235
  export const i18n: Writable<ButtonTranslations>;
2194
2236
  /**
2237
+ * The main Micrio custom HTML element `<micr-io>`.
2238
+ * This class acts as the central controller for the Micrio viewer, managing
2239
+ * the WebGL canvas, WebAssembly module, Svelte UI, state, events, and image loading.
2240
+ *
2241
+ * It orchestrates the interaction between different parts of the library and
2242
+ * exposes methods and properties for controlling the viewer.
2243
+ *
2244
+ * @example
2245
+ * ```html
2246
+ * <micr-io id="image123"></micr-io>
2247
+ * <script>
2248
+ * const viewer = document.querySelector('micr-io');
2249
+ * viewer.open('image456');
2250
+ * viewer.addEventListener('marker-click', (e) => console.log(e.detail));
2251
+ * </script>
2252
+ * ```
2253
+ *
2195
2254
  * [[include:./ts/element.md]]
2255
+ *
2196
2256
  * @author Marcel Duin <marcel@micr.io>
2197
2257
  */
2198
2258
  export class HTMLMicrioElement extends HTMLElement {
2259
+ /** Observed attributes trigger `attributeChangedCallback` when changed. */
2199
2260
  static get observedAttributes(): string[];
2200
- /** The Micrio library version number */
2261
+ /** The Micrio library version number. */
2201
2262
  static VERSION: string;
2202
- /** Downloaded JSON files cache store */
2263
+ /** Static cache store for downloaded JSON files (like image info). */
2203
2264
  static jsonCache: Map<string, Object>;
2204
- /** All available canvases */
2265
+ /** Array holding all instantiated {@link MicrioImage} objects managed by this element. */
2205
2266
  readonly canvases: MicrioImage[];
2206
- /** Current main {@link MicrioImage} store Writable. Its value can be referred to using the {@link $current} property.
2207
- * A lot of the app is reactive to this, so only set this using <micr-io>.open();
2267
+ /**
2268
+ * Writable Svelte store holding the currently active main {@link MicrioImage}.
2269
+ * Use `<micr-io>.open()` to change the active image.
2270
+ * Subscribe to this store to react to image changes.
2271
+ * Access the current value directly using the {@link $current} getter.
2208
2272
  */
2209
2273
  readonly current: Writable<MicrioImage | undefined>;
2210
- /** Currently visible canvases */
2274
+ /** Writable Svelte store holding an array of currently visible {@link MicrioImage} instances (relevant for split-screen or grid). */
2211
2275
  readonly visible: Writable<MicrioImage[]>;
2212
- /** The current active and shown {@link MicrioImage}, returning the current value of the {@link current} store Writable
2276
+ /**
2277
+ * Getter for the current value of the {@link current} store.
2278
+ * Provides direct access to the active {@link MicrioImage} instance.
2213
2279
  * @readonly
2214
2280
  */
2215
2281
  get $current(): MicrioImage | undefined;
2216
- /** The virtual camera instance to control the current main image views */
2282
+ /** Getter for the virtual {@link Camera} instance of the currently active image. */
2217
2283
  get camera(): Camera | undefined;
2218
- /** The Micrio sizing and `<canvas>` controller */
2284
+ /** The controller managing the HTML `<canvas>` element, resizing, and viewport. */
2219
2285
  readonly canvas: Canvas;
2220
- /** User input browser event handlers */
2286
+ /** The controller managing user input events (mouse, touch, keyboard) and dispatching custom events. */
2221
2287
  readonly events: Events;
2222
- /** The main state manager. Read more about it in the {@link State} section.*/
2288
+ /** The main state manager, providing access to various application states (UI visibility, active marker, tour, etc.). See {@link State.Main}. */
2223
2289
  readonly state: State.Main;
2224
- /** Google analytics plugin */
2290
+ /** The Google Analytics integration controller. */
2225
2291
  private readonly analytics;
2226
- /** Router */
2292
+ /** The URL router, handling deep linking and history management. */
2227
2293
  private readonly _router;
2228
- /** Barebone texture downloading, uglier but less bandwidth */
2294
+ /** Writable Svelte store indicating if barebone texture downloading is enabled (lower quality, less bandwidth). */
2229
2295
  readonly barebone: Writable<boolean>;
2230
- /** Custom settings, if specified, this overwrites any server received data */
2296
+ /** Custom settings object provided programmatically, overriding server-fetched settings. */
2231
2297
  defaultSettings?: Partial<Models.ImageInfo.Settings>;
2232
- /** 360 tour Space data */
2298
+ /** Holds data for the current 360 space, if applicable (loaded via `data-space` attribute or API). */
2233
2299
  spaceData: Models.Spaces.Space | undefined;
2234
- /** Destroy the Micrio instance and free up all memory */
2300
+ /** Destroys the Micrio instance, cleans up resources, and removes event listeners. */
2235
2301
  destroy(): void;
2236
- private printUI;
2237
- /** Open a Micrio image by ID or {@link Models.ImageInfo.ImageInfo} JSON data
2238
- * @param idOrInfo An image ID or a {@link Models.ImageInfo.ImageInfo} JSON object
2239
- * @param opts Some opening parameters
2302
+ /**
2303
+ * Opens a Micrio image by its ID or by providing partial image info data.
2304
+ * This is the primary method for loading and displaying images.
2305
+ *
2306
+ * @param idOrInfo An image ID string (e.g., 'abcdef123') or a partial {@link Models.ImageInfo.ImageInfo} object.
2307
+ * @param opts Options for opening the image.
2308
+ * @returns The {@link MicrioImage} instance being opened.
2240
2309
  */
2241
2310
  open(idOrInfo: string | Partial<Models.ImageInfo.ImageInfo>, opts?: {
2242
- /** Don't focus on an image inside the grid, keep the grid active */
2311
+ /** If true, keeps the grid view active instead of focusing on the opened image. */
2243
2312
  gridView?: boolean;
2244
- /** Open the image as a secondary split screen image */
2313
+ /** If true, opens the image as a secondary split-screen view. */
2245
2314
  splitScreen?: boolean;
2246
- /** Optional image that is the lead image for split screen */
2315
+ /** The primary image when opening in split-screen mode. Defaults to the current main image. */
2247
2316
  splitTo?: MicrioImage;
2248
- /** Passive split screen */
2317
+ /** If true, opens the split-screen view passively (doesn't take focus). */
2249
2318
  isPassive?: boolean;
2250
- /** Optional start view */
2319
+ /** An optional starting view `[x0, y0, x1, y1]` to apply immediately. */
2251
2320
  startView?: Models.Camera.View;
2252
- /** In case of 360, move into this direction */
2321
+ /** For 360 transitions, provides the direction vector from the previous image. */
2253
2322
  vector?: Models.Camera.Vector;
2254
2323
  }): MicrioImage;
2255
- /** Close an opened MicrioImage
2256
- * @param img The currently visible {@link MicrioImage}
2324
+ /**
2325
+ * Closes an opened MicrioImage.
2326
+ * For split-screen images, it triggers the split-end transition.
2327
+ * For main images, it removes the canvas from the Wasm controller.
2328
+ * @param img The {@link MicrioImage} instance to close.
2257
2329
  */
2258
2330
  close(img: MicrioImage): void;
2259
- /** Parse a gallery string ([micrioId,width?,height?,type?,format?], ';'-separated)
2260
- * and load all relevant image data needed.
2261
- * A gallery is basically one giant wide MicrioImage, that has each individual gallery
2262
- * image embedded within itself.
2263
- */
2264
- private loadGallery;
2331
+ /** Holds loaded grid info data if applicable. */
2265
2332
  gridInfoData: {
2266
2333
  images: Models.ImageInfo.ImageInfo[];
2267
2334
  } | undefined;
2268
- private setGrid;
2269
- private getArchiveIndex;
2335
+ /** Getter for the current language code. */
2336
+ get lang(): string;
2337
+ /** Setter for the current language code. Triggers language change logic. */
2338
+ set lang(l: string);
2270
2339
  }
2340
+ export interface MicrioUIProps {
2341
+ /** The main HTMLMicrioElement instance. Provided by element.ts */
2342
+ micrio: HTMLMicrioElement;
2343
+ /** If true, suppresses rendering of most UI elements (except markers if data-ui="markers"). */
2344
+ noHTML: boolean;
2345
+ /** If true, suppresses rendering of the Micrio logo. Defaults to `noHTML`. */
2346
+ noLogo?: boolean;
2347
+ /** Loading progress (0-1), used for the progress indicator. */
2348
+ loadingProgress?: number;
2349
+ /** Optional error message to display. */
2350
+ error?: string | undefined;
2351
+ }
2352
+ /**
2353
+ * Handles integration with Google Tag Manager (gtag.js) for tracking Micrio events.
2354
+ * Listens to specific Micrio custom events and sends corresponding events to GTM.
2355
+ */
2271
2356
  export class GoogleTag {
2272
2357
  private micrio;
2273
- /** Google Tag Manager tracker
2274
- * @param {!HTMLMicrioElement} micrio The Micrio instance
2358
+ /**
2359
+ * Creates a GoogleTag instance.
2360
+ * @param micrio The main HTMLMicrioElement instance.
2275
2361
  */
2276
2362
  constructor(micrio: HTMLMicrioElement);
2277
2363
  }
2278
- /** In-WebGL rendered embedded videos, used in <Embed /> */
2364
+ /**
2365
+ * Manages the loading, playback, and WebGL integration of embedded videos
2366
+ * that are rendered directly onto the Micrio canvas texture (not as HTML elements).
2367
+ * Used internally by the `Embed.svelte` component when `printGL` is true.
2368
+ * Handles HLS playback via hls.js if necessary.
2369
+ */
2279
2370
  export class GLEmbedVideo {
2280
2371
  private wasm;
2281
2372
  private image;
2282
2373
  private embed;
2283
2374
  private paused;
2284
2375
  private moved;
2285
- private ism3u;
2286
- private hlsPlayer;
2287
- private usVid;
2288
- private vidRepeatTo;
2289
- private placeTo;
2290
- private autoplay;
2291
- _vid: HTMLVideoElement | undefined;
2292
- isMounted: boolean;
2293
- constructor(wasm: Wasm, image: MicrioImage, embed: Models.ImageData.Embed, paused: boolean, moved: () => void);
2376
+ /**
2377
+ * Creates a GLEmbedVideo instance.
2378
+ * @param wasm The Wasm controller instance.
2379
+ * @param image The parent MicrioImage instance where the video is embedded.
2380
+ * @param embed The embed data object.
2381
+ * @param paused Initial paused state (e.g., due to pause-on-zoom).
2382
+ * @param moved Callback function to notify when position/state changes (triggers Wasm render).
2383
+ */
2384
+ constructor(wasm: Wasm, image: MicrioImage, embed: Models.ImageData.Embed, paused: boolean, // Initial paused state
2385
+ moved: () => void);
2386
+ /** Cleans up resources when the parent Embed component is unmounted. */
2294
2387
  unmount(): void;
2295
- private setPlaying;
2296
- private load;
2297
- private events;
2298
- private hook;
2299
- private unhook;
2300
2388
  }
2301
2389
  }declare module "svelte/store" {
2302
2390
  /** Callback to inform of a value updates.