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

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

Browse Source 
* 'master' of https://gitea.iwm-tuebingen.de/IWMBrowser/iwmlib:
  Changed scale
  Updated to PixiJS 5.2.1.
This commit is contained in:
Uwe Oestermeier 2020-02-17 16:19:33 +01:00
commit d4ab5c7e9c
7 changed files with 8780 additions and 8396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14733
dist/iwmlib.3rdparty.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/iwmlib.3rdparty.min.js vendored
View File

File diff suppressed because one or more lines are too long

80
dist/iwmlib.js vendored
View File

@ -614,19 +614,6 @@
static toLine(event) { static toLine(event) {
return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}` return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}`
let result = event.type;
let selector = this.selector(event.target);
result += ' selector: ' + selector;
if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector);
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
for (let key of keys) {
try {
result += ' ' + key + ':' + event[key];
} catch (e) {
console.log('Invalid key: ' + key);
}
}
return result
} }
static compareExtractedWithSimulated() { static compareExtractedWithSimulated() {
@ -2646,25 +2633,6 @@
result[id] = this.getPosition(event); result[id] = this.getPosition(event);
break break
} }
// case 'TouchEvent':
// // Needs to be observed: Perhaps changedTouches are all we need. If so
// // we can remove the touchEventKey default parameter
// if (touchEventKey == 'all') {
// for(let t of event.targetTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// }
// else {
// for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// }
// break
default:
break
} }
return result return result
} }
@ -5759,8 +5727,6 @@
let bottom = parseFloat(this.element.style.bottom); let bottom = parseFloat(this.element.style.bottom);
this.element.style.bottom = bottom - delta.y + 'px'; this.element.style.bottom = bottom - delta.y + 'px';
break break
default:
break
} }
//console.log("onResize", this.onResize) //console.log("onResize", this.onResize)
if (this.onResize) { if (this.onResize) {
@ -6183,8 +6149,6 @@
x = bbRight; x = bbRight;
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2; if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2;
break break
default:
break
} }
} }
@ -6240,8 +6204,6 @@
x += this.notchSize * 2; x += this.notchSize * 2;
x += this.posOffset; x += this.posOffset;
break break
default:
break
} }
this.placeOrigin(x, y); this.placeOrigin(x, y);
} }
@ -7989,6 +7951,9 @@
* @class Highlight * @class Highlight
* @extends {Object} * @extends {Object}
*/ */
const SCALE = 1.5;
class Highlight extends Object { class Highlight extends Object {
static disableAnimations() { static disableAnimations() {
_HighlightEnabled = false; _HighlightEnabled = false;
@ -8037,12 +8002,12 @@
} }
} }
static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) { static expand(obj, { scale = SCALE, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null) return if (obj == null) return
//console.log("expand") //console.log("expand")
obj.classList.add('zooming'); obj.classList.add('zooming');
TweenLite.to(obj, duration, { TweenLite.to(obj, duration, {
scale: scale, scale,
onUpdate: () => { onUpdate: () => {
let scale = obj._gsTransform.scaleX; let scale = obj._gsTransform.scaleX;
obj.setAttribute('stroke-width', stroke / scale); obj.setAttribute('stroke-width', stroke / scale);
@ -8078,20 +8043,20 @@
static animateCircle(target, callback) { static animateCircle(target, callback) {
console.log('ANIMATE CIRCLE', this); console.log('ANIMATE CIRCLE', this);
// ** DEBUG OUTPUTS ** // ** DEBUG OUTPUTS **
let circle = target; let circle = target;
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!circle.hasAttribute('id')) { if (!circle.hasAttribute('id')) {
_CircleIds += 1; _CircleIds += 1;
circle.setAttribute('id', '@@' + _CircleIds); circle.setAttribute('id', '@@' + _CircleIds);
} }
let id = circle.getAttribute('id'); let id = circle.getAttribute('id');
TweenLite.set(circle, { transformOrigin: '50% 50%' }); TweenLite.set(circle, { transformOrigin: '50% 50%' });
/*if (circle.classList.contains('zooming')) { /*if (circle.classList.contains('zooming')) {
console.log("already zooming") console.log("already zooming")
return return
}*/ }*/
let svgRoot = circle.closest('svg'); let svgRoot = circle.closest('svg');
let circleGroup = circle.parentNode; let circleGroup = circle.parentNode;
@ -8142,7 +8107,7 @@
return false return false
} }
static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) { static openHighlight(target, { animation = 0.5, scale = SCALE, onExpanded = null } = {}) {
if (Highlight._isExpanded(target)) { if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!'); console.log('Target is already expanded!');
return return
@ -8287,7 +8252,7 @@
} }
svgGroup.appendChild(maskImage); svgGroup.appendChild(maskImage);
// svgGroup.appendChild(element) // svgGroup.appendChild(element)
return [mask, maskImage] return [mask, maskImage]
} }
@ -8309,7 +8274,7 @@
static closeHighlight(target, { animation = 0.5 } = {}) { static closeHighlight(target, { animation = 0.5 } = {}) {
target.classList.remove(Highlight.expandedClass); target.classList.remove(Highlight.expandedClass);
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target); let [mask, maskImage] = Highlight._getSVGMask(target);
console.log('Close Highlight', maskImage); console.log('Close Highlight', maskImage);
TweenLite.to([target, maskImage], animation, { TweenLite.to([target, maskImage], animation, {
@ -8328,7 +8293,7 @@
static _retrieveId(target) { static _retrieveId(target) {
let id = target.getAttribute('id'); let id = target.getAttribute('id');
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!id) { if (!id) {
_CircleIds += 1; _CircleIds += 1;
target.setAttribute('id', '@@' + _CircleIds); target.setAttribute('id', '@@' + _CircleIds);
@ -8343,9 +8308,6 @@
Highlight.expandedClass = 'expanded'; Highlight.expandedClass = 'expanded';
// TODO: @ue Is this constant necessary?
const enableNearestNeighborTaps = false;
/** /**
* A class that collects static methods to maintain the states and parts of * A class that collects static methods to maintain the states and parts of
* EyeVisit like cards. * EyeVisit like cards.
@ -9774,16 +9736,6 @@
article.appendChild(iconClone); article.appendChild(iconClone);
} }
if (enableNearestNeighborTaps) {
//look for nearby popups on tap
InteractionMapper.on('tap', indexbox, () => {
// console.log('Tap handler called', editable)
if (!editable) {
this.findNearbyPopups(event, card);
}
});
}
const eventElements = [indexbox, iconClone, clone]; const eventElements = [indexbox, iconClone, clone];
// Use the 'tap' event for closing. // Use the 'tap' event for closing.

32
dist/iwmlib.pixi.js vendored
View File

@ -1335,19 +1335,6 @@
static toLine(event) { static toLine(event) {
return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}` return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}`
let result = event.type;
let selector = this.selector(event.target);
result += ' selector: ' + selector;
if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector);
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
for (let key of keys) {
try {
result += ' ' + key + ':' + event[key];
} catch (e) {
console.log('Invalid key: ' + key);
}
}
return result
} }
static compareExtractedWithSimulated() { static compareExtractedWithSimulated() {
@ -6187,25 +6174,6 @@
result[id] = this.getPosition(event); result[id] = this.getPosition(event);
break break
} }
// case 'TouchEvent':
// // Needs to be observed: Perhaps changedTouches are all we need. If so
// // we can remove the touchEventKey default parameter
// if (touchEventKey == 'all') {
// for(let t of event.targetTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// }
// else {
// for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t)
// }
// }
// break
default:
break
} }
return result return result
} }

29
lib/card/highlight.js
View File

@ -27,6 +27,9 @@ function round(value) {
* @class Highlight * @class Highlight
* @extends {Object} * @extends {Object}
*/ */
const SCALE = 1.5
export default class Highlight extends Object { export default class Highlight extends Object {
static disableAnimations() { static disableAnimations() {
_HighlightEnabled = false _HighlightEnabled = false
@ -75,12 +78,12 @@ export default class Highlight extends Object {
} }
} }
static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) { static expand(obj, { scale = SCALE, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null) return if (obj == null) return
//console.log("expand") //console.log("expand")
obj.classList.add('zooming') obj.classList.add('zooming')
TweenLite.to(obj, duration, { TweenLite.to(obj, duration, {
scale: scale, scale,
onUpdate: () => { onUpdate: () => {
let scale = obj._gsTransform.scaleX let scale = obj._gsTransform.scaleX
obj.setAttribute('stroke-width', stroke / scale) obj.setAttribute('stroke-width', stroke / scale)
@ -116,20 +119,20 @@ export default class Highlight extends Object {
static animateCircle(target, callback) { static animateCircle(target, callback) {
console.log('ANIMATE CIRCLE', this) console.log('ANIMATE CIRCLE', this)
// ** DEBUG OUTPUTS ** // ** DEBUG OUTPUTS **
let circle = target let circle = target
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!circle.hasAttribute('id')) { if (!circle.hasAttribute('id')) {
_CircleIds += 1 _CircleIds += 1
circle.setAttribute('id', '@@' + _CircleIds) circle.setAttribute('id', '@@' + _CircleIds)
} }
let id = circle.getAttribute('id') let id = circle.getAttribute('id')
TweenLite.set(circle, { transformOrigin: '50% 50%' }) TweenLite.set(circle, { transformOrigin: '50% 50%' })
/*if (circle.classList.contains('zooming')) { /*if (circle.classList.contains('zooming')) {
console.log("already zooming") console.log("already zooming")
return return
}*/ }*/
let svgRoot = circle.closest('svg') let svgRoot = circle.closest('svg')
let circleGroup = circle.parentNode let circleGroup = circle.parentNode
@ -180,7 +183,7 @@ export default class Highlight extends Object {
return false return false
} }
static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) { static openHighlight(target, { animation = 0.5, scale = SCALE, onExpanded = null } = {}) {
if (Highlight._isExpanded(target)) { if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!') console.log('Target is already expanded!')
return return
@ -325,7 +328,7 @@ export default class Highlight extends Object {
} }
svgGroup.appendChild(maskImage) svgGroup.appendChild(maskImage)
// svgGroup.appendChild(element) // svgGroup.appendChild(element)
return [mask, maskImage] return [mask, maskImage]
} }
@ -347,7 +350,7 @@ export default class Highlight extends Object {
static closeHighlight(target, { animation = 0.5 } = {}) { static closeHighlight(target, { animation = 0.5 } = {}) {
target.classList.remove(Highlight.expandedClass) target.classList.remove(Highlight.expandedClass)
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target) let [mask, maskImage] = Highlight._getSVGMask(target)
console.log('Close Highlight', maskImage) console.log('Close Highlight', maskImage)
TweenLite.to([target, maskImage], animation, { TweenLite.to([target, maskImage], animation, {
@ -366,7 +369,7 @@ export default class Highlight extends Object {
static _retrieveId(target) { static _retrieveId(target) {
let id = target.getAttribute('id') let id = target.getAttribute('id')
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!id) { if (!id) {
_CircleIds += 1 _CircleIds += 1
target.setAttribute('id', '@@' + _CircleIds) target.setAttribute('id', '@@' + _CircleIds)

2294
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -53,8 +53,8 @@
"pixi-filters": "^3.0.3", "pixi-filters": "^3.0.3",
"pixi-particles": "^4.2.0", "pixi-particles": "^4.2.0",
"pixi-projection": "^0.3.7", "pixi-projection": "^0.3.7",
"pixi-viewport": "^4.5.0", "pixi-viewport": "^4.8.0",
"pixi.js": "^5.2.0", "pixi.js": "^5.2.1",
"propagating-hammerjs": "^1.4.7" "propagating-hammerjs": "^1.4.7"
} }
} }