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

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/scatter.js
+107 -70
View File
@@ -9,16 +9,11 @@ import { Capabilities } from './capabilities.js'
/** This interface allows scatters to delegate tap events to other objects. */
export class ITapDelegate extends Interface {
/** This method must be defined by the delegate. It handles the tap event. */
tap(event) {
}
tap(event) {}
/** Tells the delegate that it should handle standard click events. */
handleClicks() {
}
handleClicks() {}
}
/**
@@ -70,7 +65,7 @@ export class ScatterEvent extends BaseEvent {
toString() {
return (
'Event(\'scatterTransformed\', scale: ' +
"Event('scatterTransformed', scale: " +
this.scale +
' about: ' +
this.about.x +
@@ -145,7 +140,12 @@ class Throwable {
// Avoid division by zero errors later on
// and consider the number of involved pointers sind addVelocity will be called by the
// onMove events
let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number }
let velocity = {
t: t,
dt: dt,
dx: delta.x / delta.number,
dy: delta.y / delta.number
}
this.velocities.push(velocity)
while (this.velocities.length > buffer) {
this.velocities.shift()
@@ -241,8 +241,8 @@ class Throwable {
// damping, collison detection, etc. here
let next = Points.multiplyScalar(velocity, this.throwDamping)
return {
x: (this.movableX) ? next.x : 0,
y: (this.movableY) ? next.y : 0
x: this.movableX ? next.x : 0,
y: this.movableY ? next.y : 0
}
}
@@ -283,7 +283,7 @@ export class AbstractScatter extends Throwable {
onClose = null,
onThrowFinished = null,
scaleAutoClose = false,
scaleCloseThreshold = 0.10,
scaleCloseThreshold = 0.1,
scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5),
useLowPassFilter = true
@@ -305,7 +305,7 @@ export class AbstractScatter extends Throwable {
})
/**
* Closes the card when the minScale is reached and the
* Closes the card when the minScale is reached and the
* card is released. Card can be saved by scaling it up again.
*/
this.scaleAutoClose = scaleAutoClose
@@ -387,7 +387,7 @@ export class AbstractScatter extends Throwable {
if (this.useLowPassFilter) {
rotate = this.rotateLPF.next(rotate)
zoom = this.zoomLPF.next(zoom)
// console.log({rotate, zoom})
// console.log({rotate, zoom})
}
this.transform(delta, zoom, rotate, delta.about)
if (zoom != 1) this.interactionAnchor = delta.about
@@ -395,8 +395,8 @@ export class AbstractScatter extends Throwable {
}
get polygon() {
let w2 = this.width * this.scale / 2
let h2 = this.height * this.scale / 2
let w2 = (this.width * this.scale) / 2
let h2 = (this.height * this.scale) / 2
let center = this.center
let polygon = new Polygon(center)
polygon.addPoint({ x: -w2, y: -h2 })
@@ -409,11 +409,9 @@ export class AbstractScatter extends Throwable {
isOutside() {
let stagePolygon = this.containerPolygon
if (stagePolygon == null)
return false
if (stagePolygon == null) return false
let polygon = this.polygon
if (polygon == null)
return false
if (polygon == null) return false
let result = stagePolygon.intersectsWith(polygon)
return result === false || result.overlap < this.throwVisibility
}
@@ -456,7 +454,7 @@ export class AbstractScatter extends Throwable {
keepOnStage(velocity, collision = 0.5) {
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
if (!stagePolygon) return { x: 0, y: 0 }
let polygon = this.polygon
@@ -498,10 +496,18 @@ export class AbstractScatter extends Throwable {
_checkAutoClose() {
if (this.scaleAutoClose)
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) })
if (
this.scale <
this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
) {
this.zoom(this.minScale, {
animate: 0.2,
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
})
}
}
@@ -600,7 +606,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: UPDATE
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -609,9 +615,15 @@ export class AbstractScatter extends Throwable {
let origin = this.rotationOrigin
let beta = Points.angle(origin, anchor)
let distance = Points.distance(origin, anchor)
let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom)
let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(
zoom
)
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 offset = Points.subtract(anchor, origin)
this._move(offset)
@@ -631,7 +643,7 @@ export class AbstractScatter extends Throwable {
rotate: rotate,
about: anchor
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -643,7 +655,7 @@ export class AbstractScatter extends Throwable {
/**
* For a given zoom, a new scale is calculated, taking
* min and max scale into account.
*
*
* @param {number} zoom - The zoom factor, to scale the object with.
* @returns {object} - Returns an object containing the a value for a valid scale and the corrected zoom factor.
*/
@@ -661,8 +673,7 @@ export class AbstractScatter extends Throwable {
zoom = scale / this.scale
}
if (this.scaleAutoClose)
this._updateTransparency()
if (this.scaleAutoClose) this._updateTransparency()
return { zoom, scale }
}
@@ -675,8 +686,10 @@ export class AbstractScatter extends Throwable {
}
calculateScaleTransparency() {
let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold
transparency = (transparency > 1) ? 1 : (transparency < 0) ? 0 : transparency
let transparency =
(this.scale - this.minScale) / this.scaleCloseThreshold
transparency =
transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
return transparency
}
@@ -693,7 +706,7 @@ export class AbstractScatter extends Throwable {
animateZoomBounce(dt = 1) {
if (this.zoomAnchor != null) {
let zoom = 1
let amount = Math.min(0.01, 0.3 * dt / 100000.0)
let amount = Math.min(0.01, (0.3 * dt) / 100000.0)
if (this.scale < this.minScale) zoom = 1 + amount
if (this.scale > this.maxScale) zoom = 1 - amount
if (zoom != 1) {
@@ -734,8 +747,8 @@ export class AbstractScatter extends Throwable {
if (this.scaleAutoClose) {
if (this.scale <= this.minScale + this.scaleCloseThreshold) {
if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout)
if (this.scaleAutoCloseTimeout)
clearTimeout(this.scaleAutoCloseTimeout)
this.scaleAutoCloseTimeout = setTimeout(() => {
this._checkAutoClose()
}, 600)
@@ -745,7 +758,6 @@ export class AbstractScatter extends Throwable {
}
onStart(event, interaction) {
if (this.startGesture(interaction)) {
this.dragging = true
this.interactionAnchor = null
@@ -759,7 +771,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: START
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -794,7 +806,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: END
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -805,7 +817,7 @@ export class AbstractScatter extends Throwable {
}
}
onTap(event, interaction, point) { }
onTap(event, interaction, point) {}
onDragUpdate(delta) {
if (this.onTransform != null) {
@@ -816,7 +828,7 @@ export class AbstractScatter extends Throwable {
about: this.currentAbout,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -830,7 +842,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -844,7 +856,7 @@ export class AbstractScatter extends Throwable {
fast: true,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -857,16 +869,14 @@ export class AbstractScatter extends Throwable {
fast: false,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
}
onZoomed(about) {
if (this.scaleAutoClose)
this._updateTransparency()
if (this.scaleAutoClose) this._updateTransparency()
if (this.onTransform != null) {
let event = new ScatterEvent(this, {
@@ -875,7 +885,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -901,7 +911,13 @@ export class DOMScatterContainer {
*/
constructor(
element,
{ stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {}
{
stopEvents = 'auto',
claimEvents = true,
useCapture = true,
touchAction = 'none',
debugCanvas = null
} = {}
) {
this.onCapture = null
this.element = element
@@ -1015,7 +1031,10 @@ export class DOMScatterContainer {
***/
let found = document.elementFromPoint(global.x, global.y)
for (let target of this.scatter.values()) {
if (target.interactive && this.isDescendant(target.element, found)) {
if (
target.interactive &&
this.isDescendant(target.element, found)
) {
if (this.stopEvents) Events.stop(event)
if (this.claimEvents) event.claimedByScatter = target
return target
@@ -1049,8 +1068,6 @@ export class DOMScatterContainer {
}
}
export class DOMScatter extends AbstractScatter {
constructor(
element,
@@ -1074,7 +1091,7 @@ export class DOMScatter extends AbstractScatter {
x = 0,
y = 0,
width = null, // required
height = null, // required
height = null, // required
resizable = false,
tapDelegate = null,
triggerSVGClicks = false,
@@ -1087,7 +1104,7 @@ export class DOMScatter extends AbstractScatter {
autoThrow = true,
scaleAutoClose = false,
onClose = null,
scaleCloseThreshold = 0.10,
scaleCloseThreshold = 0.1,
scaleCloseBuffer = 0.05,
useLowPassFilter = true,
maxRotation = Angle.degree2radian(15)
@@ -1147,7 +1164,7 @@ export class DOMScatter extends AbstractScatter {
transformOrigin: transformOrigin
}
this.tapNodes = new Map()
// For tweenlite we need initial values in _gsTransform
TweenLite.set(element, this.initialValues)
this.onResize = onResize
@@ -1166,15 +1183,15 @@ export class DOMScatter extends AbstractScatter {
button.className = 'interactiveElement'
this.element.appendChild(button)
button.addEventListener('pointerdown', (e) => {
button.addEventListener('pointerdown', e => {
this.startResize(e)
})
button.addEventListener('pointermove', (e) => {
button.addEventListener('pointermove', e => {
this.resize(e)
})
button.addEventListener('pointerup', (e) => {
button.addEventListener('pointerup', e => {
this.stopResize(e)
})
this.resizeButton = button
@@ -1344,7 +1361,7 @@ export class DOMScatter extends AbstractScatter {
onTap(event, interaction, point) {
if (this.tapDelegate) {
Events.stop(event)
this.tapDelegate.tap(event, "scatter")
this.tapDelegate.tap(event, 'scatter')
}
}
@@ -1396,12 +1413,18 @@ export class DOMScatter extends AbstractScatter {
e.preventDefault()
let event = new CustomEvent('resizeStarted')
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
this.bringToFront()
this.element.style.transformOrigin = '0% 0%'
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition)
@@ -1424,23 +1447,31 @@ export class DOMScatter extends AbstractScatter {
rotation = (rotation + 360) % 360
let event = new CustomEvent('resized')
if (e.target.getAttribute('resizing') == 'true') {
let deltaX = (e.clientX - this.oldX)
let deltaY = (e.clientY - this.oldY)
let deltaX = e.clientX - this.oldX
let deltaY = e.clientY - this.oldY
let r = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2))
let phi = Angle.radian2degree(Math.atan2(deltaX, deltaY))
phi = ((phi) + 630) % 360
let rot = ((rotation + 90) + 630) % 360
phi = (phi + 630) % 360
let rot = (rotation + 90 + 630) % 360
let diffAngle = ((0 + rot) + 360) % 360
let diffAngle = (0 + rot + 360) % 360
let phiCorrected = (phi + diffAngle + 360) % 360
let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected))
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3 / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale })
if (
(this.element.offsetWidth + resizeW) / this.scale >
(this.width * 0.5) / this.scale &&
(this.element.offsetHeight + resizeH) / this.scale >
(this.height * 0.3) / this.scale
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
height: this.element.offsetHeight + resizeH / this.scale
})
this.oldX = e.clientX
this.oldY = e.clientY
@@ -1454,9 +1485,15 @@ export class DOMScatter extends AbstractScatter {
e.preventDefault()
let event = new CustomEvent('resizeEnded')
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
this.element.style.transformOrigin = '50% 50%'
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } })