Mirror Engine API / ScrollViewComponent
Class: ScrollViewComponent
A ScrollViewComponent enables a group of entities to behave like a masked scrolling area, with optional horizontal and vertical scroll bars.
Extends
Component
Properties
entity
entity: Entity
The Entity that this Component is attached to.
Inherited from
Component.entity
system
system: ComponentSystem
The ComponentSystem used to create this Component.
Inherited from
Component.system
bounceAmount
Get Signature
get bounceAmount(): number
Gets how far the content should move before bouncing back.
Returns
number
Set Signature
set bounceAmount(arg: number): void
Sets how far the content should move before bouncing back.
Parameters
arg
number
Returns
void
contentEntity
Get Signature
get contentEntity(): null | Entity
Gets the entity which contains the scrolling content itself.
Returns
null | Entity
Set Signature
set contentEntity(arg: null | Entity): void
Sets the entity which contains the scrolling content itself. This entity must have an ElementComponent.
Parameters
arg
null | Entity
Returns
void
enabled
Get Signature
get enabled(): boolean
Gets the enabled state of the component.
Returns
boolean
Set Signature
set enabled(arg: boolean): void
Sets the enabled state of the component.
Parameters
arg
boolean
Returns
void
Overrides
Component.enabled
friction
Get Signature
get friction(): number
Gets how freely the content should move if thrown.
Returns
number
Set Signature
set friction(arg: number): void
Sets how freely the content should move if thrown, i.e. By flicking on a phone or by flinging the scroll wheel on a mouse. A value of 1 means that content will stop immediately; 0 means that content will continue moving forever (or until the bounds of the content are reached, depending on the scrollMode).
Parameters
arg
number
Returns
void
horizontal
Get Signature
get horizontal(): boolean
Gets whether horizontal scrolling is enabled.
Returns
boolean
Set Signature
set horizontal(arg: boolean): void
Sets whether horizontal scrolling is enabled.
Parameters
arg
boolean
Returns
void
horizontalScrollbarEntity
Get Signature
get horizontalScrollbarEntity(): null | Entity
Gets the entity to be used as the horizontal scrollbar.
Returns
null | Entity
Set Signature
set horizontalScrollbarEntity(arg: null | Entity): void
Sets the entity to be used as the horizontal scrollbar. This entity must have a ScrollbarComponent.
Parameters
arg
null | Entity
Returns
void
horizontalScrollbarVisibility
Get Signature
get horizontalScrollbarVisibility(): number
Gets whether the horizontal scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.
Returns
number
Set Signature
set horizontalScrollbarVisibility(arg: number): void
Sets whether the horizontal scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.
Parameters
arg
number
Returns
void
mouseWheelSensitivity
Get Signature
get mouseWheelSensitivity(): Vec2
Gets the mouse wheel horizontal and vertical sensitivity.
Returns
Set Signature
set mouseWheelSensitivity(arg: Vec2): void
Sets the mouse wheel horizontal and vertical sensitivity. Only used if useMouseWheel is set. Setting a direction to 0 will disable mouse wheel scrolling in that direction. 1 is a default sensitivity that is considered to feel good. The values can be set higher or lower than 1 to tune the sensitivity. Defaults to [1, 1].
Parameters
arg
Returns
void
scroll
Get Signature
get scroll(): Vec2
Gets the scroll value.
Returns
Set Signature
set scroll(value: Vec2): void
Sets the scroll value.
Parameters
value
Returns
void
scrollMode
Get Signature
get scrollMode(): number
Gets the scroll mode of the scroll viewer.
Returns
number
Set Signature
set scrollMode(arg: number): void
Sets the scroll mode of the scroll viewer. Specifies how the scroll view should behave when the user scrolls past the end of the content. Modes are defined as follows:
- SCROLL_MODE_CLAMP: Content does not scroll any further than its bounds.
- SCROLL_MODE_BOUNCE: Content scrolls past its bounds and then gently bounces back.
- SCROLL_MODE_INFINITE: Content can scroll forever.
Parameters
arg
number
Returns
void
useMouseWheel
Get Signature
get useMouseWheel(): boolean
Gets whether to use mouse wheel for scrolling (horizontally and vertically).
Returns
boolean
Set Signature
set useMouseWheel(arg: boolean): void
Sets whether to use mouse wheel for scrolling (horizontally and vertically).
Parameters
arg
boolean
Returns
void
vertical
Get Signature
get vertical(): boolean
Gets whether vertical scrolling is enabled.
Returns
boolean
Set Signature
set vertical(arg: boolean): void
Sets whether vertical scrolling is enabled.
Parameters
arg
boolean
Returns
void
verticalScrollbarEntity
Get Signature
get verticalScrollbarEntity(): null | Entity
Gets the entity to be used as the vertical scrollbar.
Returns
null | Entity
Set Signature
set verticalScrollbarEntity(arg: null | Entity): void
Sets the entity to be used as the vertical scrollbar. This entity must have a ScrollbarComponent.
Parameters
arg
null | Entity
Returns
void
verticalScrollbarVisibility
Get Signature
get verticalScrollbarVisibility(): number
Gets whether the vertical scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.
Returns
number
Set Signature
set verticalScrollbarVisibility(arg: number): void
Sets whether the vertical scrollbar should be visible all the time, or only visible when the content exceeds the size of the viewport.
Parameters
arg
number
Returns
void
viewportEntity
Get Signature
get viewportEntity(): null | Entity
Gets the entity to be used as the masked viewport area, within which the content will scroll.
Returns
null | Entity
Set Signature
set viewportEntity(arg: null | Entity): void
Sets the entity to be used as the masked viewport area, within which the content will scroll. This entity must have an ElementGroup component.
Parameters
arg
null | Entity
Returns
void
Methods
fire()
fire(
name: string,
arg1?: any,
arg2?: any,
arg3?: any,
arg4?: any,
arg5?: any,
arg6?: any,
arg7?: any,
arg8?: any): EventHandler
Fire an event, all additional arguments are passed on to the event listener.
Parameters
name
string
Name of event to fire.
arg1?
any
First argument that is passed to the event handler.
arg2?
any
Second argument that is passed to the event handler.
arg3?
any
Third argument that is passed to the event handler.
arg4?
any
Fourth argument that is passed to the event handler.
arg5?
any
Fifth argument that is passed to the event handler.
arg6?
any
Sixth argument that is passed to the event handler.
arg7?
any
Seventh argument that is passed to the event handler.
arg8?
any
Eighth argument that is passed to the event handler.
Returns
Self for chaining.
Example
obj.fire('test', 'This is the message')
Inherited from
Component.fire
hasEvent()
hasEvent(name: string): boolean
Test if there are any handlers bound to an event name.
Parameters
name
string
The name of the event to test.
Returns
boolean
True if the object has handlers bound to the specified event name.
Example
obj.on('test', () => {}) // bind an event to 'test'
obj.hasEvent('test') // returns true
obj.hasEvent('hello') // returns false
Inherited from
Component.hasEvent
off()
off(
name?: string,
callback?: HandleEventCallback,
scope?: any): EventHandler
Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.
Parameters
name?
string
Name of the event to unbind.
callback?
HandleEventCallback
Function to be unbound.
scope?
any
Scope that was used as the this when the event is fired.
Returns
Self for chaining.
Example
const handler = () => {}
obj.on('test', handler)
obj.off() // Removes all events
obj.off('test') // Removes all events called 'test'
obj.off('test', handler) // Removes all handler functions, called 'test'
obj.off('test', handler, this) // Removes all handler functions, called 'test' with scope this
Inherited from
Component.off
on()
on(
name: string,
callback: HandleEventCallback,
scope?: any): EventHandle
Attach an event handler to an event.
Parameters
name
string
Name of the event to bind the callback to.
callback
HandleEventCallback
Function that is called when event is fired. Note the callback is limited to 8 arguments.
scope?
any = ...
Object to use as 'this' when the event is fired, defaults to current this.
Returns
Can be used for removing event in the future.
Examples
obj.on('test', (a, b) => {
console.log(a + b)
})
obj.fire('test', 1, 2) // prints 3 to the console
const evt = obj.on('test', (a, b) => {
console.log(a + b)
})
// some time later
evt.off()
Inherited from
Component.on
once()
once(
name: string,
callback: HandleEventCallback,
scope?: any): EventHandle
Attach an event handler to an event. This handler will be removed after being fired once.
Parameters
name
string
Name of the event to bind the callback to.
callback
HandleEventCallback
Function that is called when event is fired. Note the callback is limited to 8 arguments.
scope?
any = ...
Object to use as 'this' when the event is fired, defaults to current this.
Returns
- can be used for removing event in the future.
Example
obj.once('test', (a, b) => {
console.log(a + b)
})
obj.fire('test', 1, 2) // prints 3 to the console
obj.fire('test', 1, 2) // not going to get handled
Inherited from
Component.once
Events
EVENT_SETSCROLL
static EVENT_SETSCROLL: string = 'set:scroll';
Fired whenever the scroll position changes. The handler is passed a Vec2 containing the horizontal and vertical scroll values in the range 0..1.
Example
entity.scrollview.on('set:scroll', (scroll) => {
console.log(`Horizontal scroll position: ${'${scroll.x}'}`)
console.log(`Vertical scroll position: ${'${scroll.y}'}`)
})