Class: ZoomLayout

ZoomLayout

new ZoomLayout(options)

Basic zoomed-in layout implementation
Parameters:
Name Type Argument Description
options Object <nullable>
 options
Source:

Extends

Members

defaultOptions

Default options for a Layout instance
Inherited From:
Source:

destroy

Destroys the layout (no-op by default)
Inherited From:
Source:

onCanvasBoundsSet

Event handler which informs the Layout when the Canvas bounds have been set.
Inherited From:
Source:

onFrameBoundsSet

Event handler which informs the Layout when the Frame bounds have been set.
Inherited From:
Source:

onItemCollectionFilterSet

Event handler which informs the Layout when the ItemCollection filter has been set.
Inherited From:
Source:

onItemCollectionIndexed

Event handler which informs the Layout when the ItemCollection has been (re-)indexed..
Inherited From:
Source:

onItemCollectionReversedSet

Event handler which informs the Layout when the ItemCollection reversed flag has been set.
Inherited From:
Source:

onItemCollectionSortBySet

Event handler which informs the Layout when the ItemCollection sort by function has been set.
Inherited From:
Source:

onViewportAllRendersDrawn

Event handler which informs the Layout when a all renders in one drawing cycle have finished animating.
Inherited From:
Source:

onViewportItemDrawing

Event handler which informs the Layout that a render cycle is about to start for a single Item.
Inherited From:
Source:

onViewportItemsDrawing

Event handler which informs the Layout that a render cycle is about to start for a multiple Items.
Inherited From:
Source:

onViewportRenderDrawing

Event handler which informs the Layout that a render is about to start drawing (animating). The Layout can use this method to modify the render/element before the animation starts.
Inherited From:
Source:

onViewportRenderDrawn

Event handler which informs the Layout when a single render has finished animating.
Inherited From:
Source:

onViewportRenderErased

Event handler which informs the Layout when a single render has finished its hide animation.
Inherited From:
Source:

onViewportRenderErasing

Event handler which informs the Layout that a render is about to start erasing (animating to a hidden state before being removed).) The Layout can use this method to modify the render/element before the animation starts.
Inherited From:
Source:

Methods

getCanvasBoundsOptions() → {Object}

Gets the Layouts preferences for how the canvas is resized when elements are added or removed.
Inherited From:
Source:
Returns:
- the resize options
Type
Object

getCanvasGestureOptions()

Gets the gesture handler options to use for the Canvas for this Layout. Each Layout might call for different Canvas gestures, like a vertical list Layout might only allow vertical panning/swiping, whereas a horizontal list might only allow horizontal scrolling. Override this method in a Layout subclass or Layout options.
Inherited From:
Source:

getCustomRenders(options) → {Object[]}

Returns an array of render objects, or a single render object, which are not associated with items. This can be used to draw custom elements on the Canvas, like divider lines, non-item-associated labels, etc.
Parameters:
Name Type Description
options Object standard layout method options (viewport, frame, etc.)
Inherited From:
Source:
Returns:
- array of custom render objects
Type
Object[]

getEmitterEvents()

Events that all Layout instances will bind to, so the layout can receive notifications when certain decks events occur.
Inherited From:
Source:

getHideAnimation()

Gets the base animation to use/merge when hiding (removing) a render This is typically the opposite of the show animation transform. E.g. if the show animation sets opacity: 1, this might set opacity: 0. Override this method in a Layout subclass or with Layout options to provide a custom "hide" animation.
Inherited From:
Source:

getMoveToElementOffsets(element) → {undefined}

Gets extra offsets to apply when panning to an item
Parameters:
Name Type Description
element Element element being moved to
Inherited From:
Source:
Returns:
Type
undefined

getOverridables()

List of method names that can be overridden by passing them in via options properties in the constructor. You can also override these properties by subclassing Layout.
Inherited From:
Source:

getRenderGestureOptions(render, options) → {Object}

Gets the default gesture handler options to apply to render elements
Parameters:
Name Type Description
render Object render object
options Object standard Layout method options
Inherited From:
Source:
Returns:
- GestureHandler options to apply to the render
Type
Object

<abstract> getRenders(item, options) → {Object|Array.<Object>}

Creates the "render" or "renders" for a given Item during a (re-)drawing cycle. A "render" is basically an instruction to the Viewport on where and how to draw the item in the * Canvas. An Item can be drawn in the Canvas one time, or multiple times, which is specified by how many render objects this method returns. The Viewport invokes this method for an/each Item when a drawing cycle is happening. This method should return a "render" object (which is a set of DOM style properties to apply to the render's element, along with animation options, like duration, easing, delay, etc.), or an array of render objects. The Viewport will reconcile any existing renders/elements for the given Item, and eventually animate an element to the property values listed in "transform", with the animation controlled by the options in "animateOptions". This method is abstract at this level - it must be implemented by either passing an options.getRenders function value into the Layout constructor, or creating a subclass of Layout that implements this method on itself, or its prototype. A render object must have "transform" and "animateOptions" properties at a minimum, but can also have any other arbitrary properties that are needed for loading or unloading the render at a later time (e.g. in load/unloadRender). A render might look like this:
Parameters:
Name Type Description
item Item Item for which to create renders
options Object Other options provided by the Viewport
Inherited From:
Source:
Returns:
- The render object or array of render objects for the Item
Type
Object | Array.<Object>
Example
Example render object created by Layout#getRenders:
{
 transform: {
  top: 20,
  left: 20,
  width: 200,
  height: 150,
  rotateZ: 20
 },
 animateOptions: {
  duration: 200,
  easing: "easeInOutExpo"
 },
 someLayoutSpecificProperty: "some value",
}

getShowAnimation()

Gets the animation to use/merge when showing a render. This would typically be transform properties that ensure the element is fully visible (e.g. opacity: 1, scaleX: 1, scaleY: 1, display: auto, etc.) Override this method in a Layout subclass or with Layout options to provide a custom "show" animation.
Inherited From:
Source:

initializeRender(render) → {undefined}

Allows the layout to initialize a new render element, when a new render element is needed for a render.
Parameters:
Name Type Description
render Object The render object that was just created
Inherited From:
Source:
Returns:
Type
undefined

loadRender(render) → {undefined}

Contains the logic to load the contents of a render (e.g. load an image in the render element)
Parameters:
Name Type Description
render Object The render object to load
Inherited From:
Source:
Returns:
Type
undefined

setHideAnimation(render) → {undefined}

Sets an animation on a render to remove the render. The implementation of this method should set transform and animateOptions properties on the render.
Parameters:
Name Type Description
render Object render on which to set animation
Inherited From:
Source:
Returns:
Type
undefined

setShowAnimation(render) → {undefined}

Sets the animation on a render to include the default show animation.
Parameters:
Name Type Description
render Object render on which to add the show animation
Inherited From:
Source:
Returns:
Type
undefined

shouldLoadRender(render, options) → {undefined}

Returns whether the given render should be loaded at the time of invocation. The Layout can implement this method if there are cases where a render might not be normally loaded, but should be.
Parameters:
Name Type Description
render Object render object to check for loading
options Object hash of all deck-related objects
Inherited From:
Source:
Returns:
Type
undefined

shouldUnloadRender(render, options) → {undefined}

Returns whether the given render should be unloaded at the time of invocation. The Layout can implement this method if there are cases where a render should be unloaded (e.g. to save on memory).
Parameters:
Name Type Description
render Object render object to check for unloading.
options Object hash of all deck-related objects
Inherited From:
Source:
Returns:
Type
undefined

unloadRender(render, options) → {undefined}

Contains the logic to unload the contents of a render (e.g. remove the DOM content of a render element)
Parameters:
Name Type Description
render Object The render object to unload
options Object
Inherited From:
Source:
Returns:
Type
undefined