Class Grid

constructor

• new Grid(micrio: HTMLMicrioElement, image: MicrioImage): 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: string | GridActionType, data?: string, duration?: number): 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?: number): 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: number, width: number, height?: number): 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?: string,
      duration?: number,
      noZoom?: boolean,
  ): 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: MicrioImage, opts?: FocusOptions): 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: string): 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: MicrioImage, view: CameraArray): CameraArray

  Get the relative in-grid viewport of the image

  Parameters

  • image: MicrioImage
  • view: CameraArray

  Returns CameraArray

getString

• getString(i: Models.ImageInfo.ImageInfo, opts?: GridImageOptions): string

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

  Parameters

  • i: Models.ImageInfo.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?: number,
      noCamAni?: boolean,
      forceAni?: boolean,
  ): 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?:
          | string
          | MicrioImage[]
          | ({ 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?: CameraArray;
      },
  ): 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?: CameraArray;
    } = {}

    Options controlling the transition and layout.

  Returns Promise<MicrioImage[]>

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