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

Merge branch 'main' of https://gitea.iwm-tuebingen.de/IWMBrowser/iwmlib

Browse Source
This commit is contained in:
Tjark Müller
2023-06-02 14:24:51 +02:00
parent 03fda7e79e a748d05c38
commit 98085006bb
4 changed files with 219 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/flippable.html
+36
View File
@@ -1,5 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flippable 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flippable Doctest</title>
@@ -9,6 +17,13 @@
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
<link rel="stylesheet" href="../css/flipeffect.css" />
<template id="flipTemplate">
<div class="flipWrapper">
<div class="flipCard">
<div class="flipFace front"></div>
<div class="flipFace back" style="visibility: hidden"></div>
</div>
<link rel="stylesheet" href="../css/flipeffect.css" />
<template id="flipTemplate">
<div class="flipWrapper">
@@ -91,4 +106,25 @@ the viewbox of the SVG will interfere with the coordinate transformation.
}
</script>
</body>
</html>
<h3>Example</h3>
<main id="main" style="border: 1px solid gray; position: relative; height: 256px"></main>
<script class="doctest">
let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
if (Capabilities.supportsTemplate()) {
let flip = new DOMFlip(
scatterContainer,
flipTemplate,
new ImageLoader('./examples/king.jpeg'),
new ImageLoader('./examples/women.jpeg'),
{ tapDelegateFactory: CardWrapper, preloadBack: true }
)
flip.load().then((flip) => {
flip.centerAt({ x: 150, y: 120 })
})
} else {
alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
}
</script>
</body>
</html>
lib/scatter.js
+62 -58
View File
@@ -95,7 +95,7 @@ class Throwable {
throwVisibility = 44,
throwDamping = 0.95,
autoThrow = true,
onThrowFinished = null,
onThrowFinished = null
} = {}) {
this.movableX = movableX
this.movableY = movableY
@@ -128,7 +128,7 @@ class Throwable {
t: t,
dt: dt,
dx: delta.x / number,
dy: delta.y / number,
dy: delta.y / number
}
this.velocities.push(velocity)
while (this.velocities.length > buffer) {
@@ -190,7 +190,7 @@ class Throwable {
if (nextLength > prevLength) {
let factor = nextLength / prevLength
next = Points.multiplyScalar(next, 1 / factor)
console.log('Prevent acceleration', factor, this.velocity, next)
// console.log('Prevent acceleration', factor, this.velocity, next)
}
this.velocity = next
let d = Points.multiplyScalar(this.velocity, dt)
@@ -226,7 +226,7 @@ class Throwable {
let next = Points.multiplyScalar(velocity, this.throwDamping)
return {
x: this.movableX ? next.x : 0,
y: this.movableY ? next.y : 0,
y: this.movableY ? next.y : 0
}
}
@@ -271,7 +271,7 @@ export class AbstractScatter extends Throwable {
scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5),
minInteractionDistance = 0,
useLowPassFilter = false,
useLowPassFilter = false
} = {}) {
if (rotationDegrees != null && rotation != null) {
throw new Error('Use rotationDegrees or rotation but not both')
@@ -286,7 +286,7 @@ export class AbstractScatter extends Throwable {
throwVisibility,
throwDamping,
autoThrow,
onThrowFinished,
onThrowFinished
})
/**
@@ -361,7 +361,7 @@ export class AbstractScatter extends Throwable {
_callCloseCallbacks() {
if (this.onClose) {
this.onClose.forEach((callback) => callback(this))
this.onClose.forEach(callback => callback(this))
}
}
@@ -381,6 +381,9 @@ export class AbstractScatter extends Throwable {
let delta = interaction.delta()
if (delta != null) {
/* uo: Is this the best place to add velocity? It works with scrollable text in card drawers but
has to be tested */
this.addVelocity(delta)
let rotate = delta.rotate
let zoom = delta.zoom
if (this.maxRotation != null) {
@@ -399,9 +402,10 @@ export class AbstractScatter extends Throwable {
zoomDelta *= ratio
zoom = 1 + zoomDelta
}
this.transform(delta, zoom, rotate, delta.about)
/* uo: This is too late an dangerous. transform sometimes modifies delta
this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
*/
if (zoom != 1) this.interactionAnchor = delta.about
}
@@ -512,11 +516,11 @@ export class AbstractScatter extends Throwable {
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this),
onComplete: this.close.bind(this)
})
} else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4,
animate: 0.4
})
}
}
@@ -538,12 +542,12 @@ export class AbstractScatter extends Throwable {
x: '+=' + d.x,
y: '+=' + d.y,
/* scale: scale, uo: not defined, why was this here? */
onUpdate: (e) => {
onUpdate: e => {
let p = this.position
let dx = p.x - startPos.x
let dy = p.x - startPos.y
this.onMoved(dx, dy)
},
}
})
} else {
this._move(d)
@@ -572,7 +576,7 @@ export class AbstractScatter extends Throwable {
scale: scale,
delay: delay,
onComplete: onComplete,
onUpdate: this.onZoomed.bind(this),
onUpdate: this.onZoomed.bind(this)
})
} else {
this.scale = scale
@@ -590,7 +594,7 @@ export class AbstractScatter extends Throwable {
transform(translate, zoom, rotate, anchor) {
let delta = {
x: this.movableX ? translate.x : 0,
y: this.movableY ? translate.y : 0,
y: this.movableY ? translate.y : 0
}
if (this.resizable) var vzoom = zoom
if (!this.translatable) delta = { x: 0, y: 0 }
@@ -605,9 +609,9 @@ export class AbstractScatter extends Throwable {
rotate: 0,
about: anchor,
fast: false,
type: UPDATE,
type: UPDATE
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -636,9 +640,9 @@ export class AbstractScatter extends Throwable {
translate: delta,
scale: newScale,
rotate: rotate,
about: anchor,
about: anchor
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -704,7 +708,7 @@ export class AbstractScatter extends Throwable {
if (this.scale > this.maxScale) zoom = 1 - amount
if (zoom != 1) {
this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor)
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.animateZoomBounce(dt)
})
return
@@ -761,9 +765,9 @@ export class AbstractScatter extends Throwable {
rotate: 0,
about: null,
fast: false,
type: START,
type: START
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -779,13 +783,13 @@ export class AbstractScatter extends Throwable {
}
onEnd(event, interaction) {
console.log('Scatter.onEnd', this.dragging)
//console.log('Scatter.onEnd', this.dragging)
if (interaction.isFinished()) {
this.endGesture(interaction)
this.dragging = false
for (let key of interaction.ended.keys()) {
if (interaction.isTap(key)) {
console.log('Scatter.isTap')
//console.log('Scatter.isTap')
let point = interaction.ended.get(key)
this.onTap(event, interaction, point)
}
@@ -797,9 +801,9 @@ export class AbstractScatter extends Throwable {
rotate: 0,
about: null,
fast: false,
type: END,
type: END
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -813,7 +817,7 @@ export class AbstractScatter extends Throwable {
//onTap(event, interaction, point) {}
onTap(event, interaction, point) {
console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
//console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
if (this.tapDelegate) {
Events.stop(event)
this.tapDelegate.tap(event, 'scatter')
@@ -827,9 +831,9 @@ export class AbstractScatter extends Throwable {
translate: delta,
scale: this.scale,
about: this.currentAbout,
type: null,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -841,9 +845,9 @@ export class AbstractScatter extends Throwable {
scale: this.scale,
about: this.currentAbout,
fast: false,
type: null,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -855,9 +859,9 @@ export class AbstractScatter extends Throwable {
translate: { x: dx, y: dy },
about: about,
fast: true,
type: null,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -868,9 +872,9 @@ export class AbstractScatter extends Throwable {
let event = new ScatterEvent(this, {
scale: this.scale,
fast: false,
type: null,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -884,9 +888,9 @@ export class AbstractScatter extends Throwable {
scale: this.scale,
about: about,
fast: false,
type: null,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@@ -918,7 +922,7 @@ export class DOMScatterContainer {
useCapture = true,
capturePointerEvents = true,
touchAction = 'none',
debugCanvas = null,
debugCanvas = null
} = {}
) {
this.onCapture = null
@@ -930,7 +934,7 @@ export class DOMScatterContainer {
movement of scatter objects, the touchmove event has to be bound again.
*/
if (Capabilities.isSafari) {
document.addEventListener('touchmove', (event) => this.preventPinch(event), false)
document.addEventListener('touchmove', event => this.preventPinch(event), false)
stopEvents = false
} else {
stopEvents = true
@@ -945,11 +949,11 @@ export class DOMScatterContainer {
this.delegate = new InteractionMapper(element, this, {
useCapture,
capturePointerEvents,
mouseWheelElement: window,
mouseWheelElement: window
})
if (debugCanvas !== null) {
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.showTouches(dt, debugCanvas)
})
}
@@ -971,7 +975,7 @@ export class DOMScatterContainer {
context.fill()
context.stroke()
}
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.showTouches(dt, canvas)
})
}
@@ -1113,7 +1117,7 @@ export class DOMScatter extends AbstractScatter {
scaleCloseBuffer = 0.05,
useLowPassFilter = false,
maxRotation = Angle.degree2radian(15),
minInteractionDistance = 200,
minInteractionDistance = 200
} = {}
) {
super({
@@ -1140,7 +1144,7 @@ export class DOMScatter extends AbstractScatter {
onClose,
useLowPassFilter,
maxRotation,
minInteractionDistance,
minInteractionDistance
})
if (container == null || width == null || height == null) {
throw new Error('Invalid value: null')
@@ -1168,7 +1172,7 @@ export class DOMScatter extends AbstractScatter {
height: height,
scale: startScale,
rotation: this.startRotationDegrees,
transformOrigin: transformOrigin,
transformOrigin: transformOrigin
}
this.tapNodes = new Map()
@@ -1190,15 +1194,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
@@ -1215,7 +1219,7 @@ export class DOMScatter extends AbstractScatter {
scale: this.scale,
x: this.x,
y: this.y,
rotation: this.rotation,
rotation: this.rotation
}
}
@@ -1266,7 +1270,7 @@ export class DOMScatter extends AbstractScatter {
top: rect.top - stage.top,
left: rect.left - stage.left,
width: rect.width,
height: rect.height,
height: rect.height
}
}
@@ -1307,7 +1311,7 @@ export class DOMScatter extends AbstractScatter {
set scale(scale) {
TweenLite.set(this.element, {
scale: scale,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
})
this._scale = scale
}
@@ -1339,9 +1343,9 @@ export class DOMScatter extends AbstractScatter {
hide() {
TweenLite.to(this.element, 0.1, {
display: 'none',
onComplete: (e) => {
onComplete: e => {
this.element.parentNode.removeChild(this.element)
},
}
})
}
@@ -1355,7 +1359,7 @@ export class DOMScatter extends AbstractScatter {
x: p.x,
y: p.y,
rotation: rotationDegrees,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
})
}
@@ -1416,7 +1420,7 @@ export class DOMScatter extends AbstractScatter {
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
this.bringToFront()
@@ -1424,7 +1428,7 @@ export class DOMScatter extends AbstractScatter {
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition)
@@ -1469,7 +1473,7 @@ export class DOMScatter extends AbstractScatter {
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
height: this.element.offsetHeight + resizeH / this.scale,
height: this.element.offsetHeight + resizeH / this.scale
})
this.oldX = e.clientX
@@ -1486,12 +1490,12 @@ export class DOMScatter extends AbstractScatter {
let event = new CustomEvent('resizeEnded')
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
this.element.style.transformOrigin = '50% 50%'
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition)