Class Grid

constructor

• new Grid(micrio, image): Grid

• The Grid constructor

  Parameters

  • micrio: HTMLMicrioElement

    The Micrio instance
  • image: MicrioImage

    The MicrioImage which is the virtual grid container

  Returns Grid

_buttons

_grid

aniDurationIn

aniDurationOut

Readonly cellSizes

clickable

current

depth

Readonly focussed

history

image

Readonly images

Readonly markersShown

micrio

transitionDelay

$focussed

• get $focussed(): MicrioImage

• Get the current focussed store value

  Returns MicrioImage

action

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

• Do an (external) action

  Parameters

  • action: string | GridActionType

    The action type enum or string
  • Optional data: string

    Optional action data
  • Optional duration: number

    Optional action duration

  Returns void

back

• back(duration?): Promise<void>

• Go back one step in the grid history

  Parameters

  • Optional duration: 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

  • Optional tag: string

    The class name to match
  • Optional duration: number

    Optional duration in ms
  • Optional noZoom: 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

• Convert a grid string to GridImage object

  Parameters

  • s: string

    The image individual encoded grid string

  Returns GridImage

  the GridImage

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

• Convert an ImageInfo object to an individual image grid string

  Parameters

  • i: ImageInfo
  • opts: GridImageOptions = {}

  Returns string

  The grid encoded string of 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

  • Optional duration: number

    Duration in seconds
  • Optional noCamAni: boolean

    Don't do any camera animating
  • Optional forceAni: boolean

    Force animation on all grid images

  Returns Promise<MicrioImage[]>

  Promise when the transition is complete

set

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

• Set the grid to this input

  Parameters

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

    The grid string
  • 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;
    } = {}

    Optional settings

    • Optional columns?: number

      Grid columns

    • Optional cover?: boolean

      Open the images on cover view, but don't limit

    • Optional coverLimit?: boolean

      Limit the images to cover view

    • Optional duration?: number

      Any main camera animation duration in seconds

    • Optional forceAni?: boolean

      Force an animation for all images

    • Optional forceAreaAni?: boolean

      Force area animating for images currently not visible

    • Optional horizontal?: boolean

      The layout is horizontal

    • Optional keepGrid?: boolean

      Don't remove the grid HTML element

    • Optional noBlur?: boolean

      Don't unfocus the current focussed image

    • Optional noCamAni?: boolean

      Don't draw any frame or do any camera stuff

    • Optional noFade?: boolean

      Don't do any fading in

    • Optional noHistory?: boolean

      Don't add the layout to the history stack

    • Optional scale?: number

      Scale individual grid images (0-100%)

    • Optional transition?: GridSetTransition

      Transition animation, defaults to crossfade

    • Optional view?: View

      Fly the main grid view to this viewport

  Returns Promise<MicrioImage[]>

  Promise when the animation is done with the currently shown images