Class Grid

constructor

• new Grid(micrio, image): Grid

• The Grid constructor. Initializes the grid based on image settings.

  Parameters

  • micrio: HTMLMicrioElement

    The main HTMLMicrioElement instance.
  • image: MicrioImage

    The MicrioImage instance acting as the virtual container for the grid.

  Returns Grid

aniDurationIn

aniDurationOut

clickable

current

depth

Readonlyfocussed

history

image

Readonlyimages

ReadonlymarkersShown

micrio

transitionDelay

$focussed

• get $focussed(): MicrioImage

• Getter for the current value of the focussed store.

  Returns MicrioImage

action

• action(action, data?, duration?): void

• Do an (external) action

  Parameters

  • action: string | GridActionType

    The action type enum or string
  • Optionaldata: string

    Optional action data
  • Optionalduration: number

    Optional action duration

  Returns void

back

• back(duration?): Promise<void>

• Go back one step in the grid history

  Parameters

  • Optionalduration: number

    Optional duration for transition

  Returns Promise<void>

  Promise when the transition is complete

blur

• blur(): void

• Unfocusses any currently focussed image

  Returns void

enlarge

• enlarge(idx, width, height?): Promise<MicrioImage[]>

• Enlarge a specific image idx of the currently shown grid

  Parameters

  • idx: number

    The image index of the current grid
  • width: number

    The image target number of columns
  • height: number = width

    The image target number of rows

  Returns Promise<MicrioImage[]>

  Promise when the transition is completed

flyToMarkers

• flyToMarkers(tag?, duration?, noZoom?): Promise<MicrioImage[]>

• Fly to the viewports of any markers containing a class name

  Parameters

  • Optionaltag: string

    The class name to match
  • Optionalduration: number

    Optional duration in ms
  • OptionalnoZoom: boolean

    Don't zoom into the markers, just filter the images

  Returns Promise<MicrioImage[]>

  Promise when the transition is complete

focus

• focus(img, opts?): Promise<void>

• Open a grid image full size and set it as the main active image

  Parameters

  • img: MicrioImage

    The image
  • opts: FocusOptions = {}

    Focus options

  Returns Promise<void>

  Promise for when the transition completes

getImage

• getImage(s): GridImage

• Parses an individual image grid string into a GridImage object.

  Parameters

  • s: string

    The grid string for a single image.

  Returns GridImage

  The parsed Models.Grid.GridImage object.

getRelativeView

• getRelativeView(image, view): View

• Get the relative in-grid viewport of the image

  Parameters

  • image: MicrioImage
  • view: View

  Returns View

getString

• getString(i, opts?): string

• Converts an ImageInfo object and options back into the grid string format.

  Parameters

  • i: ImageInfo
  • opts: GridImageOptions = {}

  Returns string

  The grid encoded string for this image.

insideGrid

• insideGrid(): boolean

• Checks whether current viewed image is (part of) grid

  Returns boolean

reset

• reset(duration?, noCamAni?, forceAni?): Promise<MicrioImage[]>

• Reset the grid to its initial layout

  Parameters

  • Optionalduration: number

    Duration in seconds
  • OptionalnoCamAni: boolean

    Don't do any camera animating
  • OptionalforceAni: boolean

    Force animation on all grid images

  Returns Promise<MicrioImage[]>

  Promise when the transition is complete

set

• set(input?, opts?): Promise<MicrioImage[]>

• Sets the grid layout based on an input string or array of image definitions. This is the main method for changing the grid's content and appearance.

  Parameters

  • input: string | MicrioImage[] | ({
        image: MicrioImage;
    } & GridImageOptions)[] = ''

    The grid definition. Can be:

    • A semicolon-separated string following the format defined in Grid.getString.
    • An array of MicrioImage instances.
    • An array of objects {image: MicrioImage, ...GridImageOptions}.
  • opts: {
        columns?: number;
        cover?: boolean;
        coverLimit?: boolean;
        duration?: number;
        forceAni?: boolean;
        forceAreaAni?: boolean;
        horizontal?: boolean;
        keepGrid?: boolean;
        noBlur?: boolean;
        noCamAni?: boolean;
        noFade?: boolean;
        noHistory?: boolean;
        scale?: number;
        transition?: GridSetTransition;
        view?: View;
    } = {}

    Options controlling the transition and layout.

    • Optionalcolumns?: number

      Overrides the automatic calculation of grid columns.

    • Optionalcover?: boolean

      If true, sets the initial view of images to cover their grid cell (but doesn't enforce limit).

    • OptionalcoverLimit?: boolean

      If true, limits individual image views to cover their grid cell.

    • Optionalduration?: number

      Overrides the default animation duration for the main grid view transition.

    • OptionalforceAni?: boolean

      If true, forces animation even if duration is 0.

    • OptionalforceAreaAni?: boolean

      If true, forces area animation even for images not currently visible.

    • Optionalhorizontal?: boolean

      If true, arranges images in a single horizontal row.

    • OptionalkeepGrid?: boolean

      If true, keeps the HTML grid element in the DOM (used internally).

    • OptionalnoBlur?: boolean

      If true, does not unfocus the currently focused image when setting a new layout.

    • OptionalnoCamAni?: boolean

      If true, skips the main grid camera animation.

    • OptionalnoFade?: boolean

      If true, skips the fade-in animation for new images.

    • OptionalnoHistory?: boolean

      If true, does not add the previous layout to the history stack.

    • Optionalscale?: number

      Scale factor (0-1) applied to each grid cell (creates margins).

    • Optionaltransition?: GridSetTransition

      Specifies the transition animation type (e.g., 'crossfade', 'slide-left', 'behind-delayed').

    • Optionalview?: View

      If provided, animates the main grid view to this viewport rectangle.

  Returns Promise<MicrioImage[]>

  A Promise that resolves with the array of currently displayed MicrioImage instances when the transition completes.