IWMBrowser/iwmlib
IWMBrowser
/
iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Fixed resize fullscreen bug.

This commit is contained in:
Sebastian Kupke 2022-04-29 10:28:59 +02:00
parent eff934e8b5
commit 7f068c5d94
5 changed files with 11524 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
dist/iwmlib.js vendored
View File

@ -9,9 +9,9 @@
static implementationError(klass) { static implementationError(klass) {
let interfaceKeys = Reflect.ownKeys(this.prototype); let interfaceKeys = Reflect.ownKeys(this.prototype);
let classKeys = Reflect.ownKeys(klass.prototype); Reflect.ownKeys(klass.prototype);
for (let key of interfaceKeys) { for (let key of interfaceKeys) {
let interfaceDesc = this.prototype[key]; this.prototype[key];
let classDesc = klass.prototype[key]; let classDesc = klass.prototype[key];
if (typeof classDesc == 'undefined') return 'Missing ' + key if (typeof classDesc == 'undefined') return 'Missing ' + key
} }
@ -3148,8 +3148,7 @@
*/ */
class ScatterEvent extends BaseEvent { class ScatterEvent extends BaseEvent {
constructor( constructor(
target, target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
{ translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
) { ) {
super('scatterTransformed', { target: target }); super('scatterTransformed', { target: target });
this.translate = translate; this.translate = translate;
@ -3210,7 +3209,7 @@
this.velocity = null; this.velocity = null;
this.timestamp = null; this.timestamp = null;
this.onThrowFinished = onThrowFinished; this.onThrowFinished = onThrowFinished;
//console.log("onThrowFinished", onThrowFinished) //console.log("onThrowFinished", onThrowFinished)
} }
observeVelocity() { observeVelocity() {
@ -3288,7 +3287,7 @@
animateThrow(time) { animateThrow(time) {
if (this.velocity != null) { if (this.velocity != null) {
let dt = this._throwDeltaTime(); let dt = this._throwDeltaTime();
// console.log("animateThrow", dt) // console.log("animateThrow", dt)
let next = this.nextVelocity(this.velocity); let next = this.nextVelocity(this.velocity);
let prevLength = Points$1.length(this.velocity); let prevLength = Points$1.length(this.velocity);
let nextLength = Points$1.length(next); let nextLength = Points$1.length(next);
@ -3486,7 +3485,7 @@
let delta = interaction.delta(); let delta = interaction.delta();
if (delta != null) { if (delta != null) {
this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
let rotate = delta.rotate; let rotate = delta.rotate;
let zoom = delta.zoom; let zoom = delta.zoom;
if (this.maxRotation != null) { if (this.maxRotation != null) {
@ -3507,6 +3506,8 @@
} }
this.transform(delta, zoom, rotate, delta.about); this.transform(delta, zoom, rotate, delta.about);
this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
if (zoom != 1) this.interactionAnchor = delta.about; if (zoom != 1) this.interactionAnchor = delta.about;
} }
} }
@ -3571,10 +3572,10 @@
keepOnStage(velocity, collision = 0.5) { keepOnStage(velocity, collision = 0.5) {
let stagePolygon = this.containerPolygon; let stagePolygon = this.containerPolygon;
// UO: since keepOnStage is called in nextVelocity we need to // UO: since keepOnStage is called in nextVelocity we need to
// ensure a return value // ensure a return value
if (!stagePolygon) return { x: 0, y: 0 } if (!stagePolygon) return { x: 0, y: 0 }
let polygon = this.polygon; this.polygon;
let bounced = this.bouncing(); let bounced = this.bouncing();
if (bounced) { if (bounced) {
let stage = this.containerBounds; let stage = this.containerBounds;
@ -3583,7 +3584,7 @@
let dx = this.movableX ? velocity.x : 0; let dx = this.movableX ? velocity.x : 0;
let dy = this.movableY ? velocity.y : 0; let dy = this.movableY ? velocity.y : 0;
let factor = this.throwDamping; let factor = this.throwDamping;
// if (recentered) { // if (recentered) {
if (x < 0) { if (x < 0) {
dx = -dx; dx = -dx;
factor = collision; factor = collision;
@ -3619,10 +3620,10 @@
onComplete: this.close.bind(this) onComplete: this.close.bind(this)
}); });
} else if (this.scale < this.minScale + this.scaleCloseThreshold) { } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, { this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4 animate: 0.4
}); });
} }
} }
rotateDegrees(degrees, anchor) { rotateDegrees(degrees, anchor) {
@ -3725,7 +3726,7 @@
let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom); let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom);
let extra = Points$1.subtract(newOrigin, origin); let extra = Points$1.subtract(newOrigin, origin);
const anchorOffset = Points$1.subtract(anchor, origin); const anchorOffset = Points$1.subtract(anchor, origin);
// this._move(offset) // this._move(offset)
this.scale = newScale; this.scale = newScale;
this.rotation += rotate; this.rotation += rotate;
let offset = Points$1.negate(anchorOffset); let offset = Points$1.negate(anchorOffset);
@ -4015,8 +4016,7 @@
* @param {DOM node} debugCanvas - Shows debug infos about touches if not null * @param {DOM node} debugCanvas - Shows debug infos about touches if not null
*/ */
constructor( constructor(
element, element, {
{
stopEvents = 'auto', stopEvents = 'auto',
claimEvents = true, claimEvents = true,
useCapture = true, useCapture = true,
@ -4180,8 +4180,7 @@
class DOMScatter$1 extends AbstractScatter { class DOMScatter$1 extends AbstractScatter {
constructor( constructor(
element, element,
container, container, {
{
startScale = 1.0, startScale = 1.0,
minScale = 0.1, minScale = 0.1,
maxScale = 1.0, maxScale = 1.0,
@ -4378,10 +4377,10 @@
let r = this.bounds; let r = this.bounds;
let w2 = r.width / 2; let w2 = r.width / 2;
let h2 = r.height / 2; let h2 = r.height / 2;
// if (this.resizable) { // if (this.resizable) {
// w2 *= this.scale // w2 *= this.scale
// h2 *= this.scale // h2 *= this.scale
// } // }
var x = r.left + w2; var x = r.left + w2;
var y = r.top + h2; var y = r.top + h2;
return { x, y } return { x, y }
@ -4501,7 +4500,7 @@
} }
this._x = x; this._x = x;
this._y = y; this._y = y;
// this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855 // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
TweenLite.set(this.element, { x, y }); TweenLite.set(this.element, { x, y });
} }
@ -6258,7 +6257,7 @@
/** Configuration object. Return default styles as CSS values. /** Configuration object. Return default styles as CSS values.
*/ */
defaultStyle() { defaultStyle() {
let padding = this.padding; this.padding;
let style = { let style = {
maxWidth: this.maxWidth + 'px', maxWidth: this.maxWidth + 'px',
zIndex: this.zIndex, zIndex: this.zIndex,
@ -6537,7 +6536,7 @@
* @memberof Popup * @memberof Popup
*/ */
static targetCenter(event) { static targetCenter(event) {
let target = event.target; event.target;
let x = event.pageX; let x = event.pageX;
let y = event.pageY; let y = event.pageY;
let rect = Popup$1.targetRect(event); let rect = Popup$1.targetRect(event);
@ -7583,7 +7582,7 @@
reorderArguments(params) { reorderArguments(params) {
// first parameter // first parameter
//-------------------- //--------------------
const element = params[0]; params[0];
// other parameter // other parameter
//-------------------- //--------------------
@ -8253,7 +8252,7 @@
let svg = 'http://www.w3.org/2000/svg'; let svg = 'http://www.w3.org/2000/svg';
let xlink = 'http://www.w3.org/1999/xlink'; let xlink = 'http://www.w3.org/1999/xlink';
let svgGroup = element.parentNode; element.parentNode;
let src = image.getAttributeNS(xlink, 'href'); let src = image.getAttributeNS(xlink, 'href');
@ -9080,7 +9079,7 @@
let cx = target.getAttribute('cx'); let cx = target.getAttribute('cx');
let cy = target.getAttribute('cy'); let cy = target.getAttribute('cy');
let r = target.getAttribute('r'); let r = target.getAttribute('r');
let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r); r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r);
let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx; let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx;
let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx; let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx;
@ -11303,4 +11302,4 @@
window.Highlight = Highlight; window.Highlight = Highlight;
window.Theme = Theme; window.Theme = Theme;
}()); })();

91
dist/iwmlib.pixi.js vendored
View File

@ -4371,7 +4371,7 @@
this.graphql = graphql; this.graphql = graphql;
if (fullScreen || autoResize) { if (fullScreen || autoResize) {
console.log('App is in fullScreen mode or autoResize mode'); console.log('App is in fullScreen mode or autoResize mode');
const resizeDebounced = debounce(event => this.resize(event), 50); const resizeDebounced = debounce(event => this.resizeApp(event), 50);
window.addEventListener('resize', resizeDebounced); window.addEventListener('resize', resizeDebounced);
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this)); document.body.addEventListener('orientationchange', this.checkOrientation.bind(this));
} }
@ -4546,6 +4546,19 @@
* @return {PIXIApp} - Returns the PIXIApp for chaining. * @return {PIXIApp} - Returns the PIXIApp for chaining.
*/ */
resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) { resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
return this.resizeApp(event, { width, height })
}
/**
* Resizes the renderer to fit into the window or given width and height.
*
* @param {object} [event] - The event.
* @param {object=} [opts={}] - The event.
* @param {number} [opts.width=window.innerWidth] - The width of the app to resize to.
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
* @return {PIXIApp} - Returns the PIXIApp for chaining.
*/
resizeApp(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.expandRenderer(); this.expandRenderer();
@ -4615,7 +4628,7 @@
*/ */
expandRenderer(expand = 256) { expandRenderer(expand = 256) {
let renderer = this.renderer; let renderer = this.renderer;
let resolution = this.renderer.resolution; this.renderer.resolution;
let ww = this.width; let ww = this.width;
let hh = this.height; let hh = this.height;
let sw = this.screen.width; let sw = this.screen.width;
@ -5249,9 +5262,9 @@
static implementationError(klass) { static implementationError(klass) {
let interfaceKeys = Reflect.ownKeys(this.prototype); let interfaceKeys = Reflect.ownKeys(this.prototype);
let classKeys = Reflect.ownKeys(klass.prototype); Reflect.ownKeys(klass.prototype);
for (let key of interfaceKeys) { for (let key of interfaceKeys) {
let interfaceDesc = this.prototype[key]; this.prototype[key];
let classDesc = klass.prototype[key]; let classDesc = klass.prototype[key];
if (typeof classDesc == 'undefined') return 'Missing ' + key if (typeof classDesc == 'undefined') return 'Missing ' + key
} }
@ -6698,8 +6711,7 @@
*/ */
class ScatterEvent extends BaseEvent { class ScatterEvent extends BaseEvent {
constructor( constructor(
target, target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
{ translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
) { ) {
super('scatterTransformed', { target: target }); super('scatterTransformed', { target: target });
this.translate = translate; this.translate = translate;
@ -6760,7 +6772,7 @@
this.velocity = null; this.velocity = null;
this.timestamp = null; this.timestamp = null;
this.onThrowFinished = onThrowFinished; this.onThrowFinished = onThrowFinished;
//console.log("onThrowFinished", onThrowFinished) //console.log("onThrowFinished", onThrowFinished)
} }
observeVelocity() { observeVelocity() {
@ -6838,7 +6850,7 @@
animateThrow(time) { animateThrow(time) {
if (this.velocity != null) { if (this.velocity != null) {
let dt = this._throwDeltaTime(); let dt = this._throwDeltaTime();
// console.log("animateThrow", dt) // console.log("animateThrow", dt)
let next = this.nextVelocity(this.velocity); let next = this.nextVelocity(this.velocity);
let prevLength = Points.length(this.velocity); let prevLength = Points.length(this.velocity);
let nextLength = Points.length(next); let nextLength = Points.length(next);
@ -7036,7 +7048,7 @@
let delta = interaction.delta(); let delta = interaction.delta();
if (delta != null) { if (delta != null) {
this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
let rotate = delta.rotate; let rotate = delta.rotate;
let zoom = delta.zoom; let zoom = delta.zoom;
if (this.maxRotation != null) { if (this.maxRotation != null) {
@ -7057,6 +7069,8 @@
} }
this.transform(delta, zoom, rotate, delta.about); this.transform(delta, zoom, rotate, delta.about);
this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
if (zoom != 1) this.interactionAnchor = delta.about; if (zoom != 1) this.interactionAnchor = delta.about;
} }
} }
@ -7121,10 +7135,10 @@
keepOnStage(velocity, collision = 0.5) { keepOnStage(velocity, collision = 0.5) {
let stagePolygon = this.containerPolygon; let stagePolygon = this.containerPolygon;
// UO: since keepOnStage is called in nextVelocity we need to // UO: since keepOnStage is called in nextVelocity we need to
// ensure a return value // ensure a return value
if (!stagePolygon) return { x: 0, y: 0 } if (!stagePolygon) return { x: 0, y: 0 }
let polygon = this.polygon; this.polygon;
let bounced = this.bouncing(); let bounced = this.bouncing();
if (bounced) { if (bounced) {
let stage = this.containerBounds; let stage = this.containerBounds;
@ -7133,7 +7147,7 @@
let dx = this.movableX ? velocity.x : 0; let dx = this.movableX ? velocity.x : 0;
let dy = this.movableY ? velocity.y : 0; let dy = this.movableY ? velocity.y : 0;
let factor = this.throwDamping; let factor = this.throwDamping;
// if (recentered) { // if (recentered) {
if (x < 0) { if (x < 0) {
dx = -dx; dx = -dx;
factor = collision; factor = collision;
@ -7169,10 +7183,10 @@
onComplete: this.close.bind(this) onComplete: this.close.bind(this)
}); });
} else if (this.scale < this.minScale + this.scaleCloseThreshold) { } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, { this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4 animate: 0.4
}); });
} }
} }
rotateDegrees(degrees, anchor) { rotateDegrees(degrees, anchor) {
@ -7275,7 +7289,7 @@
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom); let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom);
let extra = Points.subtract(newOrigin, origin); let extra = Points.subtract(newOrigin, origin);
const anchorOffset = Points.subtract(anchor, origin); const anchorOffset = Points.subtract(anchor, origin);
// this._move(offset) // this._move(offset)
this.scale = newScale; this.scale = newScale;
this.rotation += rotate; this.rotation += rotate;
let offset = Points.negate(anchorOffset); let offset = Points.negate(anchorOffset);
@ -7550,8 +7564,7 @@
class DOMScatter extends AbstractScatter { class DOMScatter extends AbstractScatter {
constructor( constructor(
element, element,
container, container, {
{
startScale = 1.0, startScale = 1.0,
minScale = 0.1, minScale = 0.1,
maxScale = 1.0, maxScale = 1.0,
@ -7748,10 +7761,10 @@
let r = this.bounds; let r = this.bounds;
let w2 = r.width / 2; let w2 = r.width / 2;
let h2 = r.height / 2; let h2 = r.height / 2;
// if (this.resizable) { // if (this.resizable) {
// w2 *= this.scale // w2 *= this.scale
// h2 *= this.scale // h2 *= this.scale
// } // }
var x = r.left + w2; var x = r.left + w2;
var y = r.top + h2; var y = r.top + h2;
return { x, y } return { x, y }
@ -7871,7 +7884,7 @@
} }
this._x = x; this._x = x;
this._y = y; this._y = y;
// this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855 // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
TweenLite.set(this.element, { x, y }); TweenLite.set(this.element, { x, y });
} }
@ -9915,7 +9928,7 @@
**/ **/
setupTiles(center = false) { setupTiles(center = false) {
// First load background tile // First load background tile
let tiles = this.ensureAllTiles(this.currentLevel); this.ensureAllTiles(this.currentLevel);
if (center) { if (center) {
this.pivot.set(w / 2, h / 2); this.pivot.set(w / 2, h / 2);
} }
@ -10152,7 +10165,7 @@
let maxWidth = worldBounds.width; let maxWidth = worldBounds.width;
let maxHeight = worldBounds.height; let maxHeight = worldBounds.height;
let pointInWindow = new PIXI.Point(); new PIXI.Point();
let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y); let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y);
let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight); let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight);
let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2); let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2);
@ -10342,7 +10355,7 @@
untintTiles(level) { untintTiles(level) {
let key = level.toString(); let key = level.toString();
if (key in this.tileLayers) { if (key in this.tileLayers) {
let tiles = this.tileLayers[key]; this.tileLayers[key];
} }
} }
@ -10644,7 +10657,7 @@
load(domNode) { load(domNode) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let isImage = domNode instanceof HTMLImageElement; let isImage = domNode instanceof HTMLImageElement;
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite; this.scatter.displayObject instanceof PIXI.Sprite;
let image = isImage ? domNode : document.createElement('img'); let image = isImage ? domNode : document.createElement('img');
let [x, y, w, h, cloneURL] = this.cloneScatterImage(); let [x, y, w, h, cloneURL] = this.cloneScatterImage();
let [ww, hh] = this.unscaledSize(); let [ww, hh] = this.unscaledSize();
@ -11919,7 +11932,7 @@
let h2 = this.height / 2; let h2 = this.height / 2;
let dist = Math.sqrt(w2 * w2 + h2 * h2); let dist = Math.sqrt(w2 * w2 + h2 * h2);
let angle = Points.angle({ x: w2, y: h2 }, { x: 0, y: 0 }); let angle = Points.angle({ x: w2, y: h2 }, { x: 0, y: 0 });
let p = this.displayObject.x; this.displayObject.x;
let c = Points.arc(this.position, this.rotation + angle, dist); let c = Points.arc(this.position, this.rotation + angle, dist);
return c // Points.subtract(c, this.pivot) return c // Points.subtract(c, this.pivot)
} }
@ -13786,11 +13799,8 @@
? false ? false
: this.scrollHeight > this.options.boxHeight; : this.scrollHeight > this.options.boxHeight;
this.scrollbar.clear(); this.scrollbar.clear();
let options = {}; this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
options.left = 0; this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 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 width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
const height = this.scrollHeight + (this.isScrollbarHorizontal ? 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.content.top / height) * this.boxHeight;
@ -19540,14 +19550,11 @@
} }
_adaptCoordinates(map) { _adaptCoordinates(map) {
let scale = 1;
if (map instanceof DeepZoomMap) { if (map instanceof DeepZoomMap) {
scale = map.image.scale.x; map.image.scale.x;
} }
scale = scale / 4;
return map.coordinatesToPoint(this.coordinates) return map.coordinatesToPoint(this.coordinates)
} }
@ -21118,8 +21125,8 @@
if (myevent && myevent.submap) { if (myevent && myevent.submap) {
const submap = myevent.submap; const submap = myevent.submap;
const center = submap.center; const center = submap.center;
const radius = submap.container.width / 2; submap.container.width / 2;
const distance = Points.distance(center, event.data.global) / submap.scatter.scale; Points.distance(center, event.data.global) / submap.scatter.scale;
} }
} }
} }
@ -22317,4 +22324,4 @@
window.GeoJson = GeoJson; window.GeoJson = GeoJson;
window.GeoUtils = GeoUtils; window.GeoUtils = GeoUtils;
}()); })();

36
lib/pixi/app-fullscreen.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIXI Fullscreen Application Doctest</title>
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
<link rel="stylesheet" href="../../css/doctest.css" />
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body style="margin: 0; padding: 0;">
<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
fpsLogging: true,
transparent: false
})
app.setup()
app.run()
let highlightBtn = new PIXI.Graphics()
highlightBtn.lineStyle(4, 0xff6900)
highlightBtn.drawRoundedRect(150, 40, 30, 30, 4)
highlightBtn.endFill()
app.stage.addChild(highlightBtn)
</script>
</body>
</html>

15
lib/pixi/app.js
View File

@ -137,7 +137,7 @@ export default class PIXIApp extends PIXI.Application {
this.graphql = graphql this.graphql = graphql
if (fullScreen || autoResize) { if (fullScreen || autoResize) {
console.log('App is in fullScreen mode or autoResize mode') console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resize(event), 50) const resizeDebounced = debounce(event => this.resizeApp(event), 50)
window.addEventListener('resize', resizeDebounced) window.addEventListener('resize', resizeDebounced)
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this)) document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
} }
@ -312,6 +312,19 @@ export default class PIXIApp extends PIXI.Application {
* @return {PIXIApp} - Returns the PIXIApp for chaining. * @return {PIXIApp} - Returns the PIXIApp for chaining.
*/ */
resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) { resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
return this.resizeApp(event, { width, height })
}
/**
* Resizes the renderer to fit into the window or given width and height.
*
* @param {object} [event] - The event.
* @param {object=} [opts={}] - The event.
* @param {number} [opts.width=window.innerWidth] - The width of the app to resize to.
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
* @return {PIXIApp} - Returns the PIXIApp for chaining.
*/
resizeApp(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
this.width = width this.width = width
this.height = height this.height = height
this.expandRenderer() this.expandRenderer()

11419
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff