iwmlib/lib/pixi/scrollview.js

74 lines
1.7 KiB
JavaScript
Raw Normal View History

2019-05-14 13:56:05 +02:00
import Scrollbox from './scrollbox.js'
2019-05-14 11:54:25 +02:00
/**
2019-05-14 14:03:32 +02:00
* Class that represents a PixiJS Scrollview.
2019-05-14 11:54:25 +02:00
*
* @example
* // Create the app
* const app = new PIXIApp({
* view: canvas,
2019-05-14 14:30:12 +02:00
* width: 600,
* height: 400
2019-05-14 11:54:25 +02:00
* }).setup().run()
*
2019-05-14 14:03:32 +02:00
* // Create the Scrollview
* app.loader
* .add('elephant', './assets/elephant-1.jpg')
* .load((loader, resources) => {
* const sprite = new PIXI.Sprite(resources.elephant.texture)
2019-05-14 14:30:12 +02:00
* const scrollview = new Scrollview({boxWidth: 400, boxHeight: 300})
2019-05-14 14:03:32 +02:00
* scrollview.content.addChild(sprite)
* app.scene.addChild(scrollview)
2019-05-14 11:54:25 +02:00
*
* @class
2019-05-14 13:56:05 +02:00
* @extends PIXI.extras.Scrollbox
* @see {@link https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html|Scrollbox}
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
2019-05-14 11:54:25 +02:00
*/
2019-05-14 13:56:05 +02:00
export default class Scrollview extends Scrollbox {
2019-05-14 11:54:25 +02:00
/**
2019-05-14 14:03:32 +02:00
* Creates an instance of a Scrollview.
2019-05-14 11:54:25 +02:00
*
* @constructor
2019-05-14 14:30:12 +02:00
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
2019-05-14 11:54:25 +02:00
*/
constructor(opts = {}) {
2019-05-14 13:56:05 +02:00
super(opts)
2019-05-14 11:54:25 +02:00
2019-05-14 13:56:05 +02:00
this.opts = opts
2019-05-14 11:54:25 +02:00
// setup
//-----------------
this.setup()
// layout
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
* @private
2019-05-14 13:56:05 +02:00
* @return {Scrollview} A reference to the Scrollview for chaining.
2019-05-14 11:54:25 +02:00
*/
setup() {
return this
}
/**
2019-05-14 13:56:05 +02:00
* Should be called to refresh the layout of the Scrollview. Can be used after resizing.
2019-05-14 11:54:25 +02:00
*
2019-05-14 13:56:05 +02:00
* @return {Scrollview} A reference to the Scrollview for chaining.
2019-05-14 11:54:25 +02:00
*/
layout() {
2019-05-14 14:13:37 +02:00
this.update()
2019-05-14 11:54:25 +02:00
return this
}
}