Compare commits
No commits in common. "master" and "obersalzberg" have entirely different histories.
master
...
obersalzbe
|
@ -77,9 +77,11 @@ typings/
|
||||||
.fusebox/
|
.fusebox/
|
||||||
|
|
||||||
# own
|
# own
|
||||||
|
*.code-workspace
|
||||||
.history/
|
.history/
|
||||||
.vscode/
|
.vscode/
|
||||||
|
|
||||||
|
|
||||||
# ignore generated contents-
|
# ignore generated contents-
|
||||||
/doc/out/*
|
/doc/out/*
|
||||||
**/thumbnails
|
**/thumbnails
|
||||||
|
|
|
@ -9,9 +9,9 @@
|
||||||
|
|
||||||
static implementationError(klass) {
|
static implementationError(klass) {
|
||||||
let interfaceKeys = Reflect.ownKeys(this.prototype);
|
let interfaceKeys = Reflect.ownKeys(this.prototype);
|
||||||
Reflect.ownKeys(klass.prototype);
|
let classKeys = Reflect.ownKeys(klass.prototype);
|
||||||
for (let key of interfaceKeys) {
|
for (let key of interfaceKeys) {
|
||||||
this.prototype[key];
|
let interfaceDesc = 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,7 +3148,8 @@
|
||||||
*/
|
*/
|
||||||
class ScatterEvent extends BaseEvent {
|
class ScatterEvent extends BaseEvent {
|
||||||
constructor(
|
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 });
|
super('scatterTransformed', { target: target });
|
||||||
this.translate = translate;
|
this.translate = translate;
|
||||||
|
@ -3209,7 +3210,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() {
|
||||||
|
@ -3287,7 +3288,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);
|
||||||
|
@ -3485,7 +3486,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) {
|
||||||
|
@ -3506,8 +3507,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3572,10 +3571,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 }
|
||||||
this.polygon;
|
let polygon = this.polygon;
|
||||||
let bounced = this.bouncing();
|
let bounced = this.bouncing();
|
||||||
if (bounced) {
|
if (bounced) {
|
||||||
let stage = this.containerBounds;
|
let stage = this.containerBounds;
|
||||||
|
@ -3584,7 +3583,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;
|
||||||
|
@ -3620,10 +3619,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) {
|
||||||
|
@ -3726,7 +3725,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);
|
||||||
|
@ -4016,7 +4015,8 @@
|
||||||
* @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,7 +4180,8 @@
|
||||||
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,
|
||||||
|
@ -4377,10 +4378,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 }
|
||||||
|
@ -4500,7 +4501,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 });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6257,7 +6258,7 @@
|
||||||
/** Configuration object. Return default styles as CSS values.
|
/** Configuration object. Return default styles as CSS values.
|
||||||
*/
|
*/
|
||||||
defaultStyle() {
|
defaultStyle() {
|
||||||
this.padding;
|
let padding = this.padding;
|
||||||
let style = {
|
let style = {
|
||||||
maxWidth: this.maxWidth + 'px',
|
maxWidth: this.maxWidth + 'px',
|
||||||
zIndex: this.zIndex,
|
zIndex: this.zIndex,
|
||||||
|
@ -6536,7 +6537,7 @@
|
||||||
* @memberof Popup
|
* @memberof Popup
|
||||||
*/
|
*/
|
||||||
static targetCenter(event) {
|
static targetCenter(event) {
|
||||||
event.target;
|
let 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);
|
||||||
|
@ -7582,7 +7583,7 @@
|
||||||
reorderArguments(params) {
|
reorderArguments(params) {
|
||||||
// first parameter
|
// first parameter
|
||||||
//--------------------
|
//--------------------
|
||||||
params[0];
|
const element = params[0];
|
||||||
|
|
||||||
// other parameter
|
// other parameter
|
||||||
//--------------------
|
//--------------------
|
||||||
|
@ -8252,7 +8253,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';
|
||||||
|
|
||||||
element.parentNode;
|
let svgGroup = element.parentNode;
|
||||||
|
|
||||||
let src = image.getAttributeNS(xlink, 'href');
|
let src = image.getAttributeNS(xlink, 'href');
|
||||||
|
|
||||||
|
@ -9079,7 +9080,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');
|
||||||
r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r);
|
let radius = 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;
|
||||||
|
@ -11302,4 +11303,4 @@
|
||||||
window.Highlight = Highlight;
|
window.Highlight = Highlight;
|
||||||
window.Theme = Theme;
|
window.Theme = Theme;
|
||||||
|
|
||||||
})();
|
}());
|
||||||
|
|
|
@ -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.resizeApp(event), 50);
|
const resizeDebounced = debounce(event => this.resize(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,19 +4546,6 @@
|
||||||
* @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();
|
||||||
|
@ -4628,7 +4615,7 @@
|
||||||
*/
|
*/
|
||||||
expandRenderer(expand = 256) {
|
expandRenderer(expand = 256) {
|
||||||
let renderer = this.renderer;
|
let renderer = this.renderer;
|
||||||
this.renderer.resolution;
|
let 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;
|
||||||
|
@ -5262,9 +5249,9 @@
|
||||||
|
|
||||||
static implementationError(klass) {
|
static implementationError(klass) {
|
||||||
let interfaceKeys = Reflect.ownKeys(this.prototype);
|
let interfaceKeys = Reflect.ownKeys(this.prototype);
|
||||||
Reflect.ownKeys(klass.prototype);
|
let classKeys = Reflect.ownKeys(klass.prototype);
|
||||||
for (let key of interfaceKeys) {
|
for (let key of interfaceKeys) {
|
||||||
this.prototype[key];
|
let interfaceDesc = 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
|
||||||
}
|
}
|
||||||
|
@ -6711,7 +6698,8 @@
|
||||||
*/
|
*/
|
||||||
class ScatterEvent extends BaseEvent {
|
class ScatterEvent extends BaseEvent {
|
||||||
constructor(
|
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 });
|
super('scatterTransformed', { target: target });
|
||||||
this.translate = translate;
|
this.translate = translate;
|
||||||
|
@ -6772,7 +6760,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() {
|
||||||
|
@ -6850,7 +6838,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);
|
||||||
|
@ -7048,7 +7036,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) {
|
||||||
|
@ -7069,8 +7057,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7135,10 +7121,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 }
|
||||||
this.polygon;
|
let polygon = this.polygon;
|
||||||
let bounced = this.bouncing();
|
let bounced = this.bouncing();
|
||||||
if (bounced) {
|
if (bounced) {
|
||||||
let stage = this.containerBounds;
|
let stage = this.containerBounds;
|
||||||
|
@ -7147,7 +7133,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;
|
||||||
|
@ -7183,10 +7169,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) {
|
||||||
|
@ -7289,7 +7275,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);
|
||||||
|
@ -7564,7 +7550,8 @@
|
||||||
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,
|
||||||
|
@ -7761,10 +7748,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 }
|
||||||
|
@ -7884,7 +7871,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 });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -9928,7 +9915,7 @@
|
||||||
**/
|
**/
|
||||||
setupTiles(center = false) {
|
setupTiles(center = false) {
|
||||||
// First load background tile
|
// First load background tile
|
||||||
this.ensureAllTiles(this.currentLevel);
|
let tiles = this.ensureAllTiles(this.currentLevel);
|
||||||
if (center) {
|
if (center) {
|
||||||
this.pivot.set(w / 2, h / 2);
|
this.pivot.set(w / 2, h / 2);
|
||||||
}
|
}
|
||||||
|
@ -10165,7 +10152,7 @@
|
||||||
let maxWidth = worldBounds.width;
|
let maxWidth = worldBounds.width;
|
||||||
let maxHeight = worldBounds.height;
|
let maxHeight = worldBounds.height;
|
||||||
|
|
||||||
new PIXI.Point();
|
let pointInWindow = 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);
|
||||||
|
@ -10355,7 +10342,7 @@
|
||||||
untintTiles(level) {
|
untintTiles(level) {
|
||||||
let key = level.toString();
|
let key = level.toString();
|
||||||
if (key in this.tileLayers) {
|
if (key in this.tileLayers) {
|
||||||
this.tileLayers[key];
|
let tiles = this.tileLayers[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10657,7 +10644,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;
|
||||||
this.scatter.displayObject instanceof PIXI.Sprite;
|
let isSprite = 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();
|
||||||
|
@ -11932,7 +11919,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 });
|
||||||
this.displayObject.x;
|
let p = 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)
|
||||||
}
|
}
|
||||||
|
@ -13799,8 +13786,11 @@
|
||||||
? false
|
? false
|
||||||
: this.scrollHeight > this.options.boxHeight;
|
: this.scrollHeight > this.options.boxHeight;
|
||||||
this.scrollbar.clear();
|
this.scrollbar.clear();
|
||||||
this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
|
let options = {};
|
||||||
this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
|
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 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;
|
||||||
|
@ -19550,11 +19540,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
_adaptCoordinates(map) {
|
_adaptCoordinates(map) {
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
if (map instanceof DeepZoomMap) {
|
if (map instanceof DeepZoomMap) {
|
||||||
map.image.scale.x;
|
scale = map.image.scale.x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scale = scale / 4;
|
||||||
|
|
||||||
return map.coordinatesToPoint(this.coordinates)
|
return map.coordinatesToPoint(this.coordinates)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21125,8 +21118,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;
|
||||||
submap.container.width / 2;
|
const radius = submap.container.width / 2;
|
||||||
Points.distance(center, event.data.global) / submap.scatter.scale;
|
const distance = Points.distance(center, event.data.global) / submap.scatter.scale;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -22324,4 +22317,4 @@
|
||||||
window.GeoJson = GeoJson;
|
window.GeoJson = GeoJson;
|
||||||
window.GeoUtils = GeoUtils;
|
window.GeoUtils = GeoUtils;
|
||||||
|
|
||||||
})();
|
}());
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
{
|
|
||||||
"folders": [
|
|
||||||
{
|
|
||||||
"path": "."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"settings": {}
|
|
||||||
}
|
|
Before Width: | Height: | Size: 13 MiB |
Before Width: | Height: | Size: 568 KiB |
Before Width: | Height: | Size: 755 KiB |
Before Width: | Height: | Size: 1.0 MiB |
Before Width: | Height: | Size: 254 KiB |
Before Width: | Height: | Size: 228 KiB |
Before Width: | Height: | Size: 168 KiB |
|
@ -1,36 +0,0 @@
|
||||||
<!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>
|
|
|
@ -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.resizeApp(event), 50)
|
const resizeDebounced = debounce(event => this.resize(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,19 +312,6 @@ 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()
|
||||||
|
|
|
@ -85,8 +85,8 @@ export class PIXITileLoader extends TileLoader {
|
||||||
super(tiles)
|
super(tiles)
|
||||||
this.destroyed = false
|
this.destroyed = false
|
||||||
this.loader = new PIXI.Loader()
|
this.loader = new PIXI.Loader()
|
||||||
this.loader.onLoad.add(this._onLoaded.bind(this))
|
this.loader.on('load', this._onLoaded.bind(this))
|
||||||
this.loader.onError.add(this._onError.bind(this))
|
this.loader.on('error', this._onError.bind(this))
|
||||||
if (compression) {
|
if (compression) {
|
||||||
this.loader.use(PIXI.compressedTextures.ImageParser.use)
|
this.loader.use(PIXI.compressedTextures.ImageParser.use)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,102 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
|
|
||||||
<title>PIXI Resolution Doctest</title>
|
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas id="canvas"></canvas>
|
|
||||||
|
|
||||||
<script class="doctest">
|
|
||||||
const app = new PIXIApp({
|
|
||||||
view: canvas,
|
|
||||||
fpsLogging: true,
|
|
||||||
transparent: false
|
|
||||||
})
|
|
||||||
|
|
||||||
app.setup()
|
|
||||||
app.run()
|
|
||||||
|
|
||||||
const textProps = {fontSize: 72, fill: 0xffffff}
|
|
||||||
|
|
||||||
Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => {
|
|
||||||
|
|
||||||
app.stage.removeChildren()
|
|
||||||
|
|
||||||
let sprite = null
|
|
||||||
let label = null
|
|
||||||
|
|
||||||
if (key === '1') {
|
|
||||||
sprite = PIXI.Sprite.from('resolution/image-4k.jpg')
|
|
||||||
label = `4096 * 2732 ~ 4K`
|
|
||||||
} else if (key === '2') {
|
|
||||||
sprite = PIXI.Sprite.from('resolution/image-8k.jpg')
|
|
||||||
label = `7952 * 5304 ~ 8K`
|
|
||||||
} else if (key === '3') {
|
|
||||||
const texture = PIXI.Texture.from('resolution/video-1k.mp4')
|
|
||||||
texture.baseTexture.resource.source.loop = true
|
|
||||||
sprite = new PIXI.Sprite(texture)
|
|
||||||
label = `1920 * 1080 = 1K`
|
|
||||||
} else if (key === '4') {
|
|
||||||
const texture = PIXI.Texture.from('resolution/video-4k.mp4')
|
|
||||||
texture.baseTexture.resource.source.loop = true
|
|
||||||
sprite = new PIXI.Sprite(texture)
|
|
||||||
label = `3840 * 2160 = 4K`
|
|
||||||
} else if (key === '5') {
|
|
||||||
const texture = PIXI.Texture.from('resolution/video-8k.mp4')
|
|
||||||
texture.baseTexture.resource.source.loop = true
|
|
||||||
sprite = new PIXI.Sprite(texture)
|
|
||||||
label = `7680 * 4320 ~ 8K`
|
|
||||||
}
|
|
||||||
|
|
||||||
app.stage.addChild(sprite)
|
|
||||||
|
|
||||||
// texts
|
|
||||||
//--------------------
|
|
||||||
const shortcuts = new PIXI.Text(`Press 1 - 5 to change Sprites`, textProps)
|
|
||||||
shortcuts.x = 100
|
|
||||||
shortcuts.y = 100
|
|
||||||
|
|
||||||
const width = new PIXI.Text(`Width: ${app.renderer.width}`, textProps)
|
|
||||||
width.x = 100
|
|
||||||
width.y = shortcuts.y + shortcuts.height * 2
|
|
||||||
|
|
||||||
const height = new PIXI.Text(`Height: ${app.renderer.height}`, textProps)
|
|
||||||
height.x = 100
|
|
||||||
height.y = width.y + width.height + 10
|
|
||||||
|
|
||||||
const resolution = new PIXI.Text(`Resolution: ${app.renderer.resolution}`, textProps)
|
|
||||||
resolution.x = 100
|
|
||||||
resolution.y = height.y + height.height + 10
|
|
||||||
|
|
||||||
const devicePixelRatio = new PIXI.Text(`devicePixelRatio: ${window.devicePixelRatio}`, textProps)
|
|
||||||
devicePixelRatio.x = 100
|
|
||||||
devicePixelRatio.y = resolution.y + resolution.height + 10
|
|
||||||
|
|
||||||
const text = new PIXI.Text(label, textProps)
|
|
||||||
text.x = 100
|
|
||||||
text.y = devicePixelRatio.y + devicePixelRatio.height * 2
|
|
||||||
|
|
||||||
app.stage.addChild(shortcuts, width, height, resolution, devicePixelRatio, text)
|
|
||||||
})
|
|
||||||
|
|
||||||
Mousetrap.trigger('1')
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
Before Width: | Height: | Size: 4.6 MiB |
Before Width: | Height: | Size: 9.9 MiB |
|
@ -1,133 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
|
|
||||||
<title>PIXI Scatter Resolution Doctest</title>
|
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<canvas id="canvas" />
|
|
||||||
<script>
|
|
||||||
const app = new PIXIApp({
|
|
||||||
view: canvas,
|
|
||||||
roundPixels: true,
|
|
||||||
resolution: 2
|
|
||||||
})
|
|
||||||
.setup()
|
|
||||||
.run()
|
|
||||||
|
|
||||||
app.loadSprites(
|
|
||||||
[
|
|
||||||
'../examples/front__1_dpi75.png',
|
|
||||||
'../examples/front__1_dpi150.png',
|
|
||||||
'../examples/front__1_dpi300.png',
|
|
||||||
'../examples/front__1_dpi600.png',
|
|
||||||
'../examples/front__1_dpi1200.png'
|
|
||||||
],
|
|
||||||
sprites => {
|
|
||||||
app.scatterContainerFront = new ScatterContainer(app.renderer, { app })
|
|
||||||
app.scatterContainerBack = new ScatterContainer(app.renderer, { app })
|
|
||||||
|
|
||||||
app.scene.addChild(app.scatterContainerBack)
|
|
||||||
app.scene.addChild(app.scatterContainerFront)
|
|
||||||
|
|
||||||
let startScale = 0.5
|
|
||||||
|
|
||||||
// sprite1
|
|
||||||
//--------------------
|
|
||||||
let sprite1 = sprites.get('../examples/front__1_dpi75.png')
|
|
||||||
sprite1.interactive = true
|
|
||||||
let scatter1 = new DisplayObjectScatter(sprite1, app.renderer, {
|
|
||||||
x: 20,
|
|
||||||
y: 20,
|
|
||||||
startScale,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
app.scatterContainerBack.addChild(sprite1)
|
|
||||||
|
|
||||||
// sprite2
|
|
||||||
//--------------------
|
|
||||||
let sprite2 = sprites.get('../examples/front__1_dpi150.png')
|
|
||||||
sprite2.interactive = true
|
|
||||||
let scatter2 = new DisplayObjectScatter(sprite2, app.renderer, {
|
|
||||||
x: 320,
|
|
||||||
y: 20,
|
|
||||||
startScale: 0.5 * startScale,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
app.scatterContainerFront.addChild(sprite2)
|
|
||||||
|
|
||||||
// sprite3
|
|
||||||
//--------------------
|
|
||||||
let sprite3 = sprites.get('../examples/front__1_dpi300.png')
|
|
||||||
sprite3.interactive = true
|
|
||||||
let scatter3 = new DisplayObjectScatter(sprite3, app.renderer, {
|
|
||||||
x: 620,
|
|
||||||
y: 20,
|
|
||||||
startScale: 0.25 * startScale,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
app.scatterContainerBack.addChild(sprite3)
|
|
||||||
|
|
||||||
// sprite4
|
|
||||||
//--------------------
|
|
||||||
let sprite4 = sprites.get('../examples/front__1_dpi600.png')
|
|
||||||
sprite4.interactive = true
|
|
||||||
let scatter4 = new DisplayObjectScatter(sprite4, app.renderer, {
|
|
||||||
x: 920,
|
|
||||||
y: 20,
|
|
||||||
startScale: 0.125 * startScale,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
app.scatterContainerFront.addChild(sprite4)
|
|
||||||
|
|
||||||
// sprite5
|
|
||||||
//--------------------
|
|
||||||
let sprite5 = sprites.get('../examples/front__1_dpi1200.png')
|
|
||||||
sprite5.interactive = true
|
|
||||||
let scatter5 = new DisplayObjectScatter(sprite5, app.renderer, {
|
|
||||||
x: 1220,
|
|
||||||
y: 20,
|
|
||||||
startScale: 0.0625 * startScale,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
app.scatterContainerFront.addChild(sprite5)
|
|
||||||
|
|
||||||
// renderTexture
|
|
||||||
//--------------------
|
|
||||||
sprites.forEach(value => {
|
|
||||||
|
|
||||||
const matrix = new PIXI.Matrix()
|
|
||||||
matrix.translate(-value.x, -value.y)
|
|
||||||
|
|
||||||
const texture = PIXI.RenderTexture.create({ width: value.width, height: value.height, resolution: 2 })
|
|
||||||
app.renderer.render(value, texture, true, matrix)
|
|
||||||
|
|
||||||
const sprite = new PIXI.Sprite(texture)
|
|
||||||
sprite.interactive = true
|
|
||||||
|
|
||||||
new DisplayObjectScatter(sprite, app.renderer, {
|
|
||||||
x: value.x,
|
|
||||||
y: 400,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
|
|
||||||
app.scatterContainerFront.addChild(sprite)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{ resolutionDependent: false }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,90 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
|
|
||||||
<title>PIXI Scatter Resolution Doctest</title>
|
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<canvas id="canvas2" class="interactive">Canvas not supported</canvas>
|
|
||||||
<script>
|
|
||||||
class ScatterApp extends PIXIApp {
|
|
||||||
setup() {
|
|
||||||
super.setup()
|
|
||||||
// Obey order in which ScatterContainer are created because the
|
|
||||||
// InteractionMapper register event handlers in a first come first serve
|
|
||||||
// order
|
|
||||||
this.scatterContainerFront = new ScatterContainer(this.renderer, { app: this })
|
|
||||||
this.scatterContainerBack = new ScatterContainer(this.renderer, { app: this })
|
|
||||||
|
|
||||||
// Note that the addChild order is different because later children
|
|
||||||
// are placed in front of earlier children.
|
|
||||||
this.scene.addChild(this.scatterContainerBack)
|
|
||||||
this.scene.addChild(this.scatterContainerFront)
|
|
||||||
|
|
||||||
// Add the queen to ScatterContainer one
|
|
||||||
let sprite1 = PIXI.Sprite.from('../examples/test-1280-720.png')
|
|
||||||
sprite1.interactive = true
|
|
||||||
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
|
|
||||||
x: 20,
|
|
||||||
y: 40,
|
|
||||||
startScale: 0.5,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
this.scatterContainerBack.addChild(sprite1)
|
|
||||||
|
|
||||||
// Add the king to ScatterContainer two
|
|
||||||
let sprite2 = PIXI.Sprite.from('../examples/test-1280-720.png')
|
|
||||||
sprite2.interactive = true
|
|
||||||
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
|
|
||||||
x: 280,
|
|
||||||
y: 40,
|
|
||||||
startScale: 1,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
this.scatterContainerFront.addChild(sprite2)
|
|
||||||
|
|
||||||
// Add the queen to ScatterContainer one
|
|
||||||
let sprite3 = PIXI.Sprite.from('../examples/test-800-450.png')
|
|
||||||
sprite3.interactive = true
|
|
||||||
let scatter3 = new DisplayObjectScatter(sprite3, this.renderer, {
|
|
||||||
x: 140,
|
|
||||||
y: 400,
|
|
||||||
startScale: 0.5,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
this.scatterContainerBack.addChild(sprite3)
|
|
||||||
|
|
||||||
// Add the king to ScatterContainer two
|
|
||||||
let sprite4 = PIXI.Sprite.from('../examples/test-800-450.png')
|
|
||||||
sprite4.interactive = true
|
|
||||||
let scatter4 = new DisplayObjectScatter(sprite4, this.renderer, {
|
|
||||||
x: 280,
|
|
||||||
y: 400,
|
|
||||||
startScale: 1,
|
|
||||||
minScale: 0.01,
|
|
||||||
maxScale: 5.0
|
|
||||||
})
|
|
||||||
this.scatterContainerFront.addChild(sprite4)
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const scatterApp = new ScatterApp({
|
|
||||||
view: canvas2,
|
|
||||||
roundPixels: true,
|
|
||||||
antialias: true
|
|
||||||
})
|
|
||||||
.setup()
|
|
||||||
.run()
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -44,7 +44,8 @@ const END = 'onEnd'
|
||||||
*/
|
*/
|
||||||
export class ScatterEvent extends BaseEvent {
|
export class ScatterEvent extends BaseEvent {
|
||||||
constructor(
|
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 })
|
super('scatterTransformed', { target: target })
|
||||||
this.translate = translate
|
this.translate = translate
|
||||||
|
@ -105,7 +106,7 @@ class Throwable {
|
||||||
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() {
|
||||||
|
@ -183,7 +184,7 @@ class Throwable {
|
||||||
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)
|
||||||
|
@ -381,7 +382,7 @@ export class AbstractScatter extends Throwable {
|
||||||
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) {
|
||||||
|
@ -402,8 +403,6 @@ export class AbstractScatter extends Throwable {
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -468,8 +467,8 @@ export class AbstractScatter extends Throwable {
|
||||||
|
|
||||||
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
|
let polygon = this.polygon
|
||||||
let bounced = this.bouncing()
|
let bounced = this.bouncing()
|
||||||
|
@ -480,7 +479,7 @@ export class AbstractScatter extends Throwable {
|
||||||
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
|
||||||
|
@ -516,10 +515,10 @@ export class AbstractScatter extends Throwable {
|
||||||
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) {
|
||||||
|
@ -622,7 +621,7 @@ export class AbstractScatter extends Throwable {
|
||||||
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)
|
||||||
|
@ -912,7 +911,8 @@ export class DOMScatterContainer {
|
||||||
* @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,
|
||||||
|
@ -1076,7 +1076,8 @@ export class DOMScatterContainer {
|
||||||
export class DOMScatter extends AbstractScatter {
|
export 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,
|
||||||
|
@ -1273,10 +1274,10 @@ export class DOMScatter extends AbstractScatter {
|
||||||
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 }
|
||||||
|
@ -1396,7 +1397,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
}
|
}
|
||||||
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 })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1503,4 +1504,4 @@ export class DOMScatter extends AbstractScatter {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
DOMScatter.zIndex = 1000
|
DOMScatter.zIndex = 1000
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iwmlib",
|
"name": "iwmlib",
|
||||||
"version": "1.1.2",
|
"version": "1.1.1",
|
||||||
"description": "An Open Source library for multi-touch, WebGL powered applications.",
|
"description": "An Open Source library for multi-touch, WebGL powered applications.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"directories": {
|
"directories": {
|
||||||
|
|