Class Grid

The Grid controller class

Hierarchy

Grid

Index

Constructors

Properties

images current _grid _buttons clickable focussed markersShown history depth aniDurationIn aniDurationOut cellSizes image

Methods

set getImage getString insideGrid reset flyToMarkers back focus blur action enlarge getRelativeView

Constructors

constructor

new Grid(micrio: HTMLMicrioElement, image: MicrioImage): Grid
The Grid constructor
Parameters
- micrio: HTMLMicrioElement
  
  The Micrio instance
- image: MicrioImage
  
  The MicrioImage which is the virtual grid container
Returns Grid

Properties

`Readonly` images

images: MicrioImage[] = []

The instanced grid images

current

current: MicrioImage[] = []

The currently shown images

_grid

_grid: HTMLDivElement = ...

The grid HTML element

_buttons

_buttons: Map<string, HTMLButtonElement> = ...

The image HTML

clickable

clickable: boolean = false

The HTML grid will stay visible and clickable

`Readonly` focussed

focussed: Writable<MicrioImage> = ...

The current full-view focussed image

`Readonly` markersShown

markersShown: Writable<MicrioImage[]> = ...

Show the markers of these elements

history

history: GridHistory[] = []

The grid state history

depth

depth: Writable<number> = ...

The current history length

aniDurationIn

aniDurationIn: number = 1500

The animation duration when opening a new layout, in ms

aniDurationOut

aniDurationOut: number = 500

The animation duration when going back, in ms

`Readonly` cellSizes

cellSizes: Map<string, [number, number?]> = ...

Current individual cell sizes w,h

image

image: MicrioImage

The MicrioImage which is the virtual grid container

Methods

set

set(input?: string, opts?: {
    noHistory?: boolean;
    keepGrid?: boolean;
    horizontal?: boolean;
    duration?: number;
    defaultCrossfade?: boolean;
    view?: View;
    noDraw?: boolean;
    noBlur?: boolean;
    noFade?: boolean;
}): Promise<MicrioImage[]>
Set the grid to this input

Returns
Promise when the animation is done with the currently shown images
Parameters
- input: string = ''
  
  The grid string
- opts: {
      noHistory?: boolean;
      keepGrid?: boolean;
      horizontal?: boolean;
      duration?: number;
      defaultCrossfade?: boolean;
      view?: View;
      noDraw?: boolean;
      noBlur?: boolean;
      noFade?: boolean;
  } = {}
  
  Optional settings
  - Optional noHistory?: boolean
    
    Don't add the layout to the history stack
  - Optional keepGrid?: boolean
    
    Don't remove the grid
  - Optional horizontal?: boolean
    
    The layout is horizontal
  - Optional duration?: number
    
    Any main camera animation duration in seconds
  - Optional defaultCrossfade?: boolean
    
    Use the default crossfade duration
  - Optional view?: View
    
    Fly the main grid view to this viewport
  - Optional noDraw?: boolean
    
    Don't draw any frame or do any camera stuff
  - Optional noBlur?: boolean
    
    Don't unfocus the current focussed image
  - Optional noFade?: boolean
    
    Don't do any fading in
Returns Promise<MicrioImage[]>

getImage

getImage(s: string): GridImage
Convert a grid string to GridImage object

Returns
the GridImage
Parameters
- s: string
  
  The image individual encoded grid string
Returns GridImage

getString

getString(i: ImageInfo, view?: View, size?: number[]): string
Convert an ImageInfo object to an individual image grid string

Returns
The grid encoded string of this image
Parameters
- i: ImageInfo
- Optional view: View
- Optional size: number[]
Returns string

insideGrid

insideGrid(): boolean
Checks whether current viewed image is (part of) grid

Returns boolean

reset

reset(duration?: number, noDraw?: boolean): Promise<MicrioImage[]>
Reset the grid to its initial layout

Returns
Promise when the transition is complete
Parameters
- Optional duration: number
- Optional noDraw: boolean
Returns Promise<MicrioImage[]>

flyToMarkers

flyToMarkers(tag?: string, duration?: number, noZoom?: boolean): Promise<MicrioImage[]>
Fly to the viewports of any markers containing a class name

Returns
Promise when the transition is complete
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[]>

back

back(duration?: number): Promise<void>
Go back one step in the grid history

Returns
Promise when the transition is complete
Parameters
- Optional duration: number
  
  Optional duration for transition
Returns Promise<void>

focus

focus(img: MicrioImage, view?: View, duration?: number): Promise<void>
Open a grid image full size and set it as the main active image

Returns
Promise for when the transition completes
Parameters
- img: MicrioImage
  
  The image
- Optional view: View
  
  Optional viewport to focus on
- Optional duration: number
Returns Promise<void>

blur

blur(): void
Unfocusses any currently focussed image

Returns void

action

action(action: string | GridActionType, data?: string, duration?: number): 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

enlarge

enlarge(idx: number, width: number, height?: number): Promise<MicrioImage[]>
Enlarge a specific image idx of the currently shown grid

Returns
Promise when the transition is completed
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[]>

getRelativeView

getRelativeView(image: MicrioImage, view: View): View
Get the relative in-grid viewport of the image
Parameters
- image: MicrioImage
- view: View
Returns View

Class Grid

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

micrio: HTMLMicrioElement

image: MicrioImage

Returns Grid

Properties

Readonly images

current

_grid

_buttons

clickable

Readonly focussed

Readonly markersShown

history

depth

aniDurationIn

aniDurationOut

Readonly cellSizes

image

Methods

set

Returns

Parameters

input: string = ''

opts: { noHistory?: boolean; keepGrid?: boolean; horizontal?: boolean; duration?: number; defaultCrossfade?: boolean; view?: View; noDraw?: boolean; noBlur?: boolean; noFade?: boolean; } = {}

Optional noHistory?: boolean

Optional keepGrid?: boolean

Optional horizontal?: boolean

Optional duration?: number

Optional defaultCrossfade?: boolean

Optional view?: View

Optional noDraw?: boolean

Optional noBlur?: boolean

Optional noFade?: boolean

Returns Promise<MicrioImage[]>

getImage

Returns

Parameters

s: string

Returns GridImage

getString

Returns

Parameters

i: ImageInfo

Optional view: View

Optional size: number[]

Returns string

insideGrid

Returns boolean

reset

Returns

Parameters

Optional duration: number

Optional noDraw: boolean

Returns Promise<MicrioImage[]>

flyToMarkers

Returns

Parameters

Optional tag: string

Optional duration: number

Optional noZoom: boolean

Returns Promise<MicrioImage[]>

back

Returns

Parameters

Optional duration: number

Returns Promise<void>

focus

Returns

Parameters

img: MicrioImage

Optional view: View

Optional duration: number

`Readonly` images

`Readonly` focussed

`Readonly` markersShown

`Readonly` cellSizes

opts: {
noHistory?: boolean;
keepGrid?: boolean;
horizontal?: boolean;
duration?: number;
defaultCrossfade?: boolean;
view?: View;
noDraw?: boolean;
noBlur?: boolean;
noFade?: boolean;
} = {}

`Optional` noHistory?: boolean

`Optional` keepGrid?: boolean

`Optional` horizontal?: boolean

`Optional` duration?: number

`Optional` defaultCrossfade?: boolean

`Optional` view?: View

`Optional` noDraw?: boolean

`Optional` noBlur?: boolean

`Optional` noFade?: boolean

`Optional` view: View

`Optional` size: number[]

`Optional` duration: number

`Optional` noDraw: boolean

`Optional` tag: string

`Optional` duration: number

`Optional` noZoom: boolean

`Optional` duration: number

`Optional` view: View

`Optional` duration: number

`Optional` data: string

`Optional` duration: number