Skip to main content
Version: Next

Renderer

class Renderer

A component that manages Panel and its elements

constructor

new Renderer(options, options.align, options.strategy)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobjectAn options object
options.alignConstants.ALIGN | string | number✔️"center"An align value that will be applied to all panels
options.strategyobject✔️An instance of RenderingStrategy(internal module)

Properties

panels

readonly

Array of panels

Type: Array<Panel>

See:

rendering

readonly

A boolean value indicating whether rendering is in progress

Type: boolean

panelCount

readonly

Count of panels

Type: number

strategy

align

A Panel's align value that applied to all panels

Type: Constants.ALIGN | string | number

Methods

render

Render panel elements inside the camera element

Returns: this

init

Initialize Renderer

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
flickingFlickingAn instance of Flicking

destroy

Destroy Renderer and return to initial state

Returns: void

getPanel

Return the Panel at the given index. null if it doesn't exists.

Returns: Panel | null

  • Panel at the given index
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

See:

updatePanelSize

Update all panel sizes

Returns: this

batchInsert

Insert new panels at given index
This will increase index of panels after by the number of panels added

Returns: Array<Panel>

  • An array of prepended panels
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsArray<object>An array of items to insert
items.indexnumber✔️Index to insert new panels at
items.elementsArray<any>✔️An array of element or framework component with element in it
items.hasDOMInElementsboolean✔️Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element

batchInsertDefer

Defers update
camera position & others will be updated after calling updateAfterPanelChange

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
...itemsArray<{index: number, elements: any[], hasDOMInElements: boolean}>

batchRemove

Remove the panel at the given index
This will decrease index of panels after by the number of panels removed

Returns: Panel[]

  • An array of removed panels
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsArray<object>An array of items to remove
items.indexnumber✔️Index of panel to remove
items.deleteCountnumber✔️1Number of panels to remove from index
items.hasDOMInElementsboolean✔️1Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element

batchRemoveDefer

Defers update
camera position & others will be updated after calling updateAfterPanelChange

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
...itemsArray<{index: number, deleteCount: number, hasDOMInElements: boolean}>

updateAfterPanelChange

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
panelsAddedPanel[]
panelsRemovedPanel[]

checkPanelContentsReady

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
checkingPanelsPanel[]