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

Fixed resize fullscreen bug.

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

91
dist/iwmlib.pixi.js vendored
View File

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

11419
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff