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

Working on stacked buttons.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-30 16:56:29 +02:00
parent 0bcf931465
commit 5f46b4feae
115 changed files with 3277 additions and 5134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/interaction.js
+37 -152
View File
@@ -205,10 +205,10 @@ export class InteractionPoints {
delta() {
let prev = []
let curr = []
let cm = { x: 0, y: 0}
let pm = { x: 0, y: 0}
let cm = { x: 0, y: 0 }
let pm = { x: 0, y: 0 }
let count = 0
for(let key of this.current.keys()) {
for (let key of this.current.keys()) {
if (this.previous.has(key)) {
let p = this.previous.get(key)
let c = this.current.get(key)
@@ -227,7 +227,7 @@ export class InteractionPoints {
let scaled = 0
let alpha = 0
let zoom = 1
for(let i=0; i<count; i++) {
for (let i = 0; i < count; i++) {
let p = prev[i]
let c = curr[i]
let previousAngle = Points.angle(p, pm)
@@ -253,17 +253,8 @@ export class InteractionPoints {
let c2 = current[1]
let distance2 = Points.distance(c1, c2)
return new InteractionDelta(
delta.x,
delta.y,
zoom,
alpha,
cm,
count,
distance2
)
}
else {
return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, count, distance2)
} else {
return null
}
}
@@ -303,33 +294,14 @@ export class InteractionPoints {
let currentAngle = Points.angle(c1, c2)
let previousAngle = Points.angle(p1, p2)
let alpha = this.diffAngle(currentAngle, previousAngle)
return new InteractionDelta(
delta.x,
delta.y,
zoom,
alpha,
cm,
csize,
distance2
)
} else if (
csize == 1 &&
psize == 1 &&
this.current.firstKey() == this.previous.firstKey()
) {
return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize, distance2)
} else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
// We need to ensure that the keys are the same, since single points with different keys
// can jump
let current = this.current.first()
let previous = this.previous.first()
let delta = Points.subtract(current, previous)
return new InteractionDelta(
delta.x,
delta.y,
1.0,
0.0,
current,
csize
)
return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current, csize)
}
return null
}
@@ -483,11 +455,7 @@ export class Interaction extends InteractionPoints {
isTap(key) {
let ended = this.ended.get(key)
let start = this.start.get(key)
if (
start &&
ended &&
Points.distance(ended, start) < this.tapDistance
) {
if (start && ended && Points.distance(ended, start) < this.tapDistance) {
let t1 = this.timestamps.get(key)
let tookLong = performance.now() > t1 + this.longPressTime
if (tookLong) {
@@ -509,10 +477,7 @@ export class Interaction extends InteractionPoints {
this.unregisterTap(key)
}
}
if (
this.tapTimestamps.has(key) &&
performance.now() > this.tapTimestamps.get(key) + this.tapDuration
) {
if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
//console.log("tap too long")
this.unregisterTap(key)
}
@@ -537,11 +502,7 @@ export class Interaction extends InteractionPoints {
isLongPress(key) {
let ended = this.ended.get(key)
let start = this.start.get(key)
if (
start &&
ended &&
Points.distance(ended, start) < this.tapDistance
) {
if (start && ended && Points.distance(ended, start) < this.tapDistance) {
let t1 = this.timestamps.get(key)
let tookLong = performance.now() > t1 + this.longPressTime
if (tookLong) {
@@ -608,9 +569,7 @@ export class InteractionDelegate {
setupInteraction() {
if (this.debug) {
let error = this.targetInterface.implementationError(
this.target.constructor
)
let error = this.targetInterface.implementationError(this.target.constructor)
if (error != null) {
throw new Error('Expected IInteractionTarget: ' + error)
}
@@ -648,16 +607,11 @@ export class InteractionDelegate {
element.addEventListener(
'pointermove',
e => {
if (this.debug)
console.log('pointermove', e.pointerId, e.pointerType)
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
if (
e.pointerType == 'touch' ||
(e.pointerType == 'mouse' && Events.isPointerDown(e))
) {
if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
// this.capture(e) &&
if (this.debug)
console.log('pointermove captured', e.pointerId)
if (this.debug) console.log('pointermove captured', e.pointerId)
this.onMove(e)
}
},
@@ -666,8 +620,7 @@ export class InteractionDelegate {
element.addEventListener(
'pointerup',
e => {
if (this.debug)
console.log('pointerup', e.pointerId, e.pointerType)
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
this.onEnd(e)
if (this.capturePointerEvents) {
try {
@@ -682,11 +635,9 @@ export class InteractionDelegate {
element.addEventListener(
'pointercancel',
e => {
if (this.debug)
console.log('pointercancel', e.pointerId, e.pointerType)
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
this.onEnd(e)
if (this.capturePointerEvents)
element.releasePointerCapture(e.pointerId)
if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
},
useCapture
)
@@ -695,12 +646,7 @@ export class InteractionDelegate {
element.addEventListener(
'pointerleave',
e => {
if (this.debug)
console.log(
'pointerleave',
e.pointerId,
e.pointerType
)
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
if (e.target == element) this.onEnd(e)
},
useCapture
@@ -711,12 +657,7 @@ export class InteractionDelegate {
element.addEventListener(
'pointerout',
e => {
if (this.debug)
console.log(
'pointerout',
e.pointerId,
e.pointerType
)
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
if (e.target == element) this.onEnd(e)
},
useCapture
@@ -727,13 +668,7 @@ export class InteractionDelegate {
window.addEventListener(
'pointerout',
e => {
if (this.debug)
console.log(
'pointerout',
e.pointerId,
e.pointerType,
e.target
)
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
if (e.target == element) {
this.onEnd(e)
}
@@ -746,8 +681,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchstart',
e => {
if (this.debug)
console.log('touchstart', this.touchPoints(e))
if (this.debug) console.log('touchstart', this.touchPoints(e))
if (this.capture(e)) {
for (let touch of e.changedTouches) {
this.onStart(touch)
@@ -759,8 +693,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchmove',
e => {
if (this.debug)
console.log('touchmove', this.touchPoints(e), e)
if (this.debug) console.log('touchmove', this.touchPoints(e), e)
for (let touch of e.changedTouches) {
this.onMove(touch)
}
@@ -783,12 +716,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchcancel',
e => {
if (this.debug)
console.log(
'touchcancel',
e.targetTouches.length,
e.changedTouches.length
)
if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
for (let touch of e.changedTouches) {
this.onEnd(touch)
}
@@ -837,9 +765,7 @@ export class InteractionDelegate {
e => {
if (e.target == element) {
this.onEnd(e)
console.warn(
"Shouldn't happen: mouseout ends interaction"
)
console.warn("Shouldn't happen: mouseout ends interaction")
}
},
useCapture
@@ -880,16 +806,8 @@ export class InteractionDelegate {
}
setupMouseWheelInteraction() {
this.mouseWheelElement.addEventListener(
'mousewheel',
this.onMouseWheel.bind(this),
true
)
this.mouseWheelElement.addEventListener(
'DOMMouseScroll',
this.onMouseWheel.bind(this),
true
)
this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true)
this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true)
}
onMouseWheel(event) {
@@ -953,10 +871,7 @@ export class InteractionDelegate {
break
}
case 'Touch': {
let id =
event.touchType === 'stylus'
? 'stylus'
: event.identifier.toString()
let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString()
result[id] = this.getPosition(event)
break
}
@@ -1006,10 +921,7 @@ export class InteractionDelegate {
let point = extracted[key]
let updated = this.interaction.update(key, point)
if (updated) {
console.warn(
"new pointer in updateInteraction shouldn't happen",
key
)
console.warn("new pointer in updateInteraction shouldn't happen", key)
this.interactionStarted(event, key, point)
}
}
@@ -1143,11 +1055,7 @@ export class InteractionMapper extends InteractionDelegate {
onEnd(event) {
let extracted = this.extractPoint(event, 'changedTouches')
this.endInteraction(event, extracted)
let mapped = this.interaction.mapInteraction(
extracted,
['ended'],
this.mapPositionToPoint.bind(this)
)
let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this))
for (let [target, interaction] of mapped.entries()) {
target.onEnd(event, interaction)
}
@@ -1181,10 +1089,7 @@ export class InteractionMapper extends InteractionDelegate {
// convert to array
types = Array.isArray(types) ? types : types.split(/\s/)
if (
elements instanceof NodeList ||
elements instanceof HTMLCollection
) {
if (elements instanceof NodeList || elements instanceof HTMLCollection) {
elements = Array.from(elements)
}
elements = Array.isArray(elements) ? elements : [elements]
@@ -1193,9 +1098,7 @@ export class InteractionMapper extends InteractionDelegate {
const type = types[i].toLowerCase()
// list of hammer events
const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(
type
)
const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type)
// if it is a hammer event
if (useHammer) {
@@ -1210,33 +1113,15 @@ export class InteractionMapper extends InteractionDelegate {
// recognizers
if (type.startsWith('pan')) {
hammer
.get('pan')
.set(
Object.assign(
{ direction: Hammer.DIRECTION_ALL },
opts
)
)
hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
} else if (type.startsWith('pinch')) {
hammer
.get('pinch')
.set(Object.assign({ enable: true }, opts))
hammer.get('pinch').set(Object.assign({ enable: true }, opts))
} else if (type.startsWith('press')) {
hammer.get('press').set(opts)
} else if (type.startsWith('rotate')) {
hammer
.get('rotate')
.set(Object.assign({ enable: true }, opts))
hammer.get('rotate').set(Object.assign({ enable: true }, opts))
} else if (type.startsWith('swipe')) {
hammer
.get('swipe')
.set(
Object.assign(
{ direction: Hammer.DIRECTION_ALL },
opts
)
)
hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
} else if (type.startsWith('tap')) {
hammer.get('tap').set(opts)
}