Added Scrollview.
This commit is contained in:
Vendored
+689
-2
@@ -11972,7 +11972,7 @@
|
||||
class Timeline extends BitmapLabeledGraphics {
|
||||
|
||||
constructor(width, height, { ticks = null,
|
||||
baseLine = 0.5, showRange = true } = {}) {
|
||||
baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
|
||||
super();
|
||||
this.wantedWidth = width;
|
||||
this.wantedHeight = height;
|
||||
@@ -12003,6 +12003,7 @@
|
||||
this.selection = null;
|
||||
this.autoScroll = false;
|
||||
this.direction = -1;
|
||||
this.throwDamping = throwDamping;
|
||||
this.timeticks = ticks || new TimeTicks(new DecadeTicks(),
|
||||
new YearTicks(),
|
||||
new MonthTicks(),
|
||||
@@ -12380,7 +12381,7 @@
|
||||
return
|
||||
}
|
||||
this.scroll += delta;
|
||||
delta *= 0.985;
|
||||
delta *= this.throwDamping;
|
||||
this.redraw();
|
||||
if (Math.abs(delta) > 1 && this.autoScroll) {
|
||||
setTimeout(() => this.keepInBounds(delta, anchor), 1000 / 100);
|
||||
@@ -12410,6 +12411,691 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
|
||||
*/
|
||||
class Scrollbox extends PIXI.Container {
|
||||
/**
|
||||
* create a scrollbox
|
||||
* @param {object} options
|
||||
* @param {boolean} [options.dragScroll=true] user may drag the content area to scroll content
|
||||
* @param {string} [options.overflowX=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
|
||||
* @param {string} [options.overflowY=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
|
||||
* @param {string} [options.overflow] (none, scroll, hidden, auto) sets overflowX and overflowY to this value
|
||||
* @param {number} [options.boxWidth=100] width of scrollbox including scrollbar (in pixels)
|
||||
* @param {number} [options.boxHeight=100] height of scrollbox including scrollbar (in pixels)
|
||||
* @param {number} [options.scrollbarSize=10] size of scrollbar (in pixels)
|
||||
* @param {number} [options.scrollbarOffsetHorizontal=0] offset of horizontal scrollbar (in pixels)
|
||||
* @param {number} [options.scrollbarOffsetVertical=0] offset of vertical scrollbar (in pixels)
|
||||
* @param {boolean} [options.stopPropagation=true] call stopPropagation on any events that impact scrollbox
|
||||
* @param {number} [options.scrollbarBackground=0xdddddd] background color of scrollbar
|
||||
* @param {number} [options.scrollbarBackgroundAlpha=1] alpha of background of scrollbar
|
||||
* @param {number} [options.scrollbarForeground=0x888888] foreground color of scrollbar
|
||||
* @param {number} [options.scrollbarForegroundAlpha=1] alpha of foreground of scrollbar
|
||||
* @param {string} [options.underflow=top-left] what to do when content underflows the scrollbox size: none: do nothing; (left/right/center AND top/bottom/center); OR center (e.g., 'top-left', 'center', 'none', 'bottomright')
|
||||
* @param {(boolean|number)} [options.fade] fade the scrollbar when not in use (true = 1000ms)
|
||||
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
|
||||
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
|
||||
*/
|
||||
constructor(options)
|
||||
{
|
||||
super();
|
||||
this.options = Object.assign({}, {
|
||||
"boxWidth": 100,
|
||||
"boxHeight": 100,
|
||||
"scrollbarSize": 10,
|
||||
"scrollbarBackground": 14540253,
|
||||
"scrollbarBackgroundAlpha": 1,
|
||||
"scrollbarForeground": 8947848,
|
||||
"scrollbarForegroundAlpha": 1,
|
||||
"dragScroll": true,
|
||||
"stopPropagation": true,
|
||||
"scrollbarOffsetHorizontal": 0,
|
||||
"scrollbarOffsetVertical": 0,
|
||||
"underflow": "top-left",
|
||||
"fadeScrollbar": false,
|
||||
"fadeWait": 3000,
|
||||
"fadeEase": "easeInOutSine"
|
||||
}, options);
|
||||
this.ease = new PIXI.extras.Ease.list();
|
||||
|
||||
/**
|
||||
* content in placed in here
|
||||
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
|
||||
* @type {PIXI.extras.Viewport}
|
||||
*/
|
||||
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }));
|
||||
this.content
|
||||
.decelerate()
|
||||
.on('moved', () => this._drawScrollbars());
|
||||
|
||||
/**
|
||||
* graphics element for drawing the scrollbars
|
||||
* @type {PIXI.Graphics}
|
||||
*/
|
||||
this.scrollbar = this.addChild(new PIXI.Graphics());
|
||||
this.scrollbar.interactive = true;
|
||||
this.scrollbar.on('pointerdown', this.scrollbarDown, this);
|
||||
this.interactive = true;
|
||||
this.on('pointermove', this.scrollbarMove, this);
|
||||
this.on('pointerup', this.scrollbarUp, this);
|
||||
this.on('pointercancel', this.scrollbarUp, this);
|
||||
this.on('pointerupoutside', this.scrollbarUp, this);
|
||||
this._maskContent = this.addChild(new PIXI.Graphics());
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* offset of horizontal scrollbar (in pixels)
|
||||
* @type {number}
|
||||
*/
|
||||
get scrollbarOffsetHorizontal()
|
||||
{
|
||||
return this.options.scrollbarOffsetHorizontal
|
||||
}
|
||||
set scrollbarOffsetHorizontal(value)
|
||||
{
|
||||
this.options.scrollbarOffsetHorizontal = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* offset of vertical scrollbar (in pixels)
|
||||
* @type {number}
|
||||
*/
|
||||
get scrollbarOffsetVertical()
|
||||
{
|
||||
return this.options.scrollbarOffsetVertical
|
||||
}
|
||||
set scrollbarOffsetVertical(value)
|
||||
{
|
||||
this.options.scrollbarOffsetVertical = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* disable the scrollbox (if set to true this will also remove the mask)
|
||||
* @type {boolean}
|
||||
*/
|
||||
get disable()
|
||||
{
|
||||
return this._disabled
|
||||
}
|
||||
set disable(value)
|
||||
{
|
||||
if (this._disabled !== value)
|
||||
{
|
||||
this._disabled = value;
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* call stopPropagation on any events that impact scrollbox
|
||||
* @type {boolean}
|
||||
*/
|
||||
get stopPropagation()
|
||||
{
|
||||
return this.options.stopPropagation
|
||||
}
|
||||
set stopPropagation(value)
|
||||
{
|
||||
this.options.stopPropagation = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* user may drag the content area to scroll content
|
||||
* @type {boolean}
|
||||
*/
|
||||
get dragScroll()
|
||||
{
|
||||
return this.options.dragScroll
|
||||
}
|
||||
set dragScroll(value)
|
||||
{
|
||||
this.options.dragScroll = value;
|
||||
if (value)
|
||||
{
|
||||
this.content.drag();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.content.removePlugin('drag');
|
||||
}
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
|
||||
* @type {number}
|
||||
*/
|
||||
get boxWidth()
|
||||
{
|
||||
return this.options.boxWidth
|
||||
}
|
||||
set boxWidth(value)
|
||||
{
|
||||
this.options.boxWidth = value;
|
||||
this.content.screenWidth = value;
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* sets overflowX and overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
|
||||
* scroll = always show scrollbar
|
||||
* hidden = hide overflow and do not show scrollbar
|
||||
* auto = if content is larger than box size, then show scrollbar
|
||||
* @type {string}
|
||||
*/
|
||||
get overflow()
|
||||
{
|
||||
return this.options.overflow
|
||||
}
|
||||
set overflow(value)
|
||||
{
|
||||
this.options.overflow = value;
|
||||
this.options.overflowX = value;
|
||||
this.options.overflowY = value;
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* sets overflowX to (scroll, hidden, auto) changing whether the scrollbar is shown
|
||||
* scroll = always show scrollbar
|
||||
* hidden = hide overflow and do not show scrollbar
|
||||
* auto = if content is larger than box size, then show scrollbar
|
||||
* @type {string}
|
||||
*/
|
||||
get overflowX()
|
||||
{
|
||||
return this.options.overflowX
|
||||
}
|
||||
set overflowX(value)
|
||||
{
|
||||
this.options.overflowX = value;
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* sets overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
|
||||
* scroll = always show scrollbar
|
||||
* hidden = hide overflow and do not show scrollbar
|
||||
* auto = if content is larger than box size, then show scrollbar
|
||||
* @type {string}
|
||||
*/
|
||||
get overflowY()
|
||||
{
|
||||
return this.options.overflowY
|
||||
}
|
||||
set overflowY(value)
|
||||
{
|
||||
this.options.overflowY = value;
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
|
||||
* @type {number}
|
||||
*/
|
||||
get boxHeight()
|
||||
{
|
||||
return this.options.boxHeight
|
||||
}
|
||||
set boxHeight(value)
|
||||
{
|
||||
this.options.boxHeight = value;
|
||||
this.content.screenHeight = value;
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* scrollbar size in pixels
|
||||
* @type {number}
|
||||
*/
|
||||
get scrollbarSize()
|
||||
{
|
||||
return this.options.scrollbarSize
|
||||
}
|
||||
set scrollbarSize(value)
|
||||
{
|
||||
this.options.scrollbarSize = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* width of scrollbox less the scrollbar (if visible)
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
get contentWidth()
|
||||
{
|
||||
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* height of scrollbox less the scrollbar (if visible)
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
get contentHeight()
|
||||
{
|
||||
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* is the vertical scrollbar visible
|
||||
* @type {boolean}
|
||||
* @readonly
|
||||
*/
|
||||
get isScrollbarVertical()
|
||||
{
|
||||
return this._isScrollbarVertical
|
||||
}
|
||||
|
||||
/**
|
||||
* is the horizontal scrollbar visible
|
||||
* @type {boolean}
|
||||
* @readonly
|
||||
*/
|
||||
get isScrollbarHorizontal()
|
||||
{
|
||||
return this._isScrollbarHorizontal
|
||||
}
|
||||
|
||||
/**
|
||||
* top coordinate of scrollbar
|
||||
*/
|
||||
get scrollTop()
|
||||
{
|
||||
return this.content.top
|
||||
}
|
||||
|
||||
/**
|
||||
* left coordinate of scrollbar
|
||||
*/
|
||||
get scrollLeft()
|
||||
{
|
||||
return this.content.left
|
||||
}
|
||||
|
||||
/**
|
||||
* width of content area
|
||||
* if not set then it uses content.width to calculate width
|
||||
*/
|
||||
get scrollWidth()
|
||||
{
|
||||
return this._scrollWidth || this.content.width
|
||||
}
|
||||
set scrollWidth(value)
|
||||
{
|
||||
this._scrollWidth = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* height of content area
|
||||
* if not set then it uses content.height to calculate height
|
||||
*/
|
||||
get scrollHeight()
|
||||
{
|
||||
return this._scrollHeight || this.content.height
|
||||
}
|
||||
set scrollHeight(value)
|
||||
{
|
||||
this._scrollHeight = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* draws scrollbars
|
||||
* @private
|
||||
*/
|
||||
_drawScrollbars()
|
||||
{
|
||||
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth;
|
||||
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight;
|
||||
this.scrollbar.clear();
|
||||
let options = {};
|
||||
options.left = 0;
|
||||
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
|
||||
options.top = 0;
|
||||
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
|
||||
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
|
||||
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
|
||||
this.scrollbarTop = (this.content.top / height) * this.boxHeight;
|
||||
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop;
|
||||
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight;
|
||||
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight;
|
||||
this.scrollbarLeft = (this.content.left / width) * this.boxWidth;
|
||||
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft;
|
||||
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth;
|
||||
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth;
|
||||
if (this.isScrollbarVertical)
|
||||
{
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
|
||||
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
|
||||
.endFill();
|
||||
}
|
||||
if (this.isScrollbarHorizontal)
|
||||
{
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
|
||||
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
|
||||
.endFill();
|
||||
}
|
||||
if (this.isScrollbarVertical)
|
||||
{
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
|
||||
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
|
||||
.endFill();
|
||||
}
|
||||
if (this.isScrollbarHorizontal)
|
||||
{
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
|
||||
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
|
||||
.endFill();
|
||||
}
|
||||
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
|
||||
this.activateFade();
|
||||
}
|
||||
|
||||
/**
|
||||
* draws mask layer
|
||||
* @private
|
||||
*/
|
||||
_drawMask()
|
||||
{
|
||||
this._maskContent
|
||||
.beginFill(0)
|
||||
.drawRect(0, 0, this.boxWidth, this.boxHeight)
|
||||
.endFill();
|
||||
this.content.mask = this._maskContent;
|
||||
}
|
||||
|
||||
/**
|
||||
* call when scrollbox content changes
|
||||
*/
|
||||
update()
|
||||
{
|
||||
this.content.mask = null;
|
||||
this._maskContent.clear();
|
||||
if (!this._disabled)
|
||||
{
|
||||
this._drawScrollbars();
|
||||
this._drawMask();
|
||||
if (this.options.dragScroll)
|
||||
{
|
||||
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y';
|
||||
if (direction !== null)
|
||||
{
|
||||
this.content
|
||||
.drag({ clampWheel: true, direction })
|
||||
.clamp({ direction, underflow: this.options.underflow });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* show the scrollbar and restart the timer for fade if options.fade is set
|
||||
*/
|
||||
activateFade()
|
||||
{
|
||||
if (this.options.fade)
|
||||
{
|
||||
if (this.fade)
|
||||
{
|
||||
this.ease.remove(this.fade);
|
||||
}
|
||||
this.scrollbar.alpha = 1;
|
||||
const time = this.options.fade === true ? 1000 : this.options.fade;
|
||||
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase });
|
||||
this.fade.on('each', () => this.content.dirty = true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* handle pointer down on scrollbar
|
||||
* @param {PIXI.interaction.InteractionEvent} e
|
||||
* @private
|
||||
*/
|
||||
scrollbarDown(e)
|
||||
{
|
||||
const local = this.toLocal(e.data.global);
|
||||
if (this.isScrollbarHorizontal)
|
||||
{
|
||||
if (local.y > this.boxHeight - this.scrollbarSize)
|
||||
{
|
||||
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
|
||||
{
|
||||
this.pointerDown = { type: 'horizontal', last: local };
|
||||
}
|
||||
else
|
||||
{
|
||||
if (local.x > this.scrollbarLeft)
|
||||
{
|
||||
this.content.left += this.content.worldScreenWidth;
|
||||
this.update();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.content.left -= this.content.worldScreenWidth;
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
if (this.options.stopPropagation)
|
||||
{
|
||||
e.stopPropagation();
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
if (this.isScrollbarVertical)
|
||||
{
|
||||
if (local.x > this.boxWidth - this.scrollbarSize)
|
||||
{
|
||||
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
|
||||
{
|
||||
this.pointerDown = { type: 'vertical', last: local };
|
||||
}
|
||||
else
|
||||
{
|
||||
if (local.y > this.scrollbarTop)
|
||||
{
|
||||
this.content.top += this.content.worldScreenHeight;
|
||||
this.update();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.content.top -= this.content.worldScreenHeight;
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
if (this.options.stopPropagation)
|
||||
{
|
||||
e.stopPropagation();
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* handle pointer move on scrollbar
|
||||
* @param {PIXI.interaction.InteractionEvent} e
|
||||
* @private
|
||||
*/
|
||||
scrollbarMove(e)
|
||||
{
|
||||
if (this.pointerDown)
|
||||
{
|
||||
if (this.pointerDown.type === 'horizontal')
|
||||
{
|
||||
const local = this.toLocal(e.data.global);
|
||||
this.content.left += local.x - this.pointerDown.last.x;
|
||||
this.pointerDown.last = local;
|
||||
this.update();
|
||||
}
|
||||
else if (this.pointerDown.type === 'vertical')
|
||||
{
|
||||
const local = this.toLocal(e.data.global);
|
||||
this.content.top += local.y - this.pointerDown.last.y;
|
||||
this.pointerDown.last = local;
|
||||
this.update();
|
||||
}
|
||||
if (this.options.stopPropagation)
|
||||
{
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* handle pointer down on scrollbar
|
||||
* @private
|
||||
*/
|
||||
scrollbarUp()
|
||||
{
|
||||
this.pointerDown = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* resize the mask for the container
|
||||
* @param {object} options
|
||||
* @param {number} [options.boxWidth] width of scrollbox including scrollbar (in pixels)
|
||||
* @param {number} [options.boxHeight] height of scrollbox including scrollbar (in pixels)
|
||||
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
|
||||
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
|
||||
*/
|
||||
resize(options)
|
||||
{
|
||||
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth;
|
||||
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight;
|
||||
if (options.scrollWidth)
|
||||
{
|
||||
this.scrollWidth = options.scrollWidth;
|
||||
}
|
||||
if (options.scrollHeight)
|
||||
{
|
||||
this.scrollHeight = options.scrollHeight;
|
||||
}
|
||||
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight);
|
||||
this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* ensure that the bounding box is visible
|
||||
* @param {number} x - relative to content's coordinate system
|
||||
* @param {number} y
|
||||
* @param {number} width
|
||||
* @param {number} height
|
||||
*/
|
||||
ensureVisible(x, y, width, height)
|
||||
{
|
||||
this.content.ensureVisible(x, y, width, height);
|
||||
this._drawScrollbars();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for the switch action.
|
||||
*
|
||||
* @callback actionCallback
|
||||
* @param {object} event - The event object.
|
||||
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Callback for the switch action.
|
||||
*
|
||||
* @callback actionActiveCallback
|
||||
* @param {object} event - The event object.
|
||||
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Callback for the switch beforeAction.
|
||||
*
|
||||
* @callback beforeActionCallback
|
||||
* @param {object} event - The event object.
|
||||
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Callback for the switch afterAction.
|
||||
*
|
||||
* @callback afterActionCallback
|
||||
* @param {object} event - The event object.
|
||||
* @param {Switch} switch - A reference to the switch (also this refers to the switch).
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class that represents a PixiJS Switch.
|
||||
*
|
||||
* @example
|
||||
* // Create the app
|
||||
* const app = new PIXIApp({
|
||||
* view: canvas,
|
||||
* width: 900,
|
||||
* height: 250
|
||||
* }).setup().run()
|
||||
*
|
||||
* // Create the switch
|
||||
* const switch1 = new Switch({
|
||||
* x: 10,
|
||||
* y: 20
|
||||
* })
|
||||
*
|
||||
* // Add the switch to a DisplayObject
|
||||
* app.scene.addChild(switch1)
|
||||
*
|
||||
* @class
|
||||
* @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}
|
||||
*/
|
||||
class Scrollview extends Scrollbox {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Switch.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
super(opts);
|
||||
|
||||
this.opts = opts;
|
||||
|
||||
// setup
|
||||
//-----------------
|
||||
this.setup();
|
||||
|
||||
// layout
|
||||
//-----------------
|
||||
this.layout();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates children and instantiates everything.
|
||||
*
|
||||
* @private
|
||||
* @return {Scrollview} A reference to the Scrollview for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* Should be called to refresh the layout of the Scrollview. Can be used after resizing.
|
||||
*
|
||||
* @return {Scrollview} A reference to the Scrollview for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for the slider action onStart.
|
||||
*
|
||||
@@ -14055,6 +14741,7 @@
|
||||
window.Theme = Theme;
|
||||
window.Button = Button;
|
||||
window.ButtonGroup = ButtonGroup;
|
||||
window.Scrollview = Scrollview;
|
||||
window.Slider = Slider;
|
||||
window.Switch = Switch;
|
||||
window.Popup = Popup;
|
||||
|
||||
Reference in New Issue
Block a user