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

Improved logging and adjusted card's click handler

Browse Source 
+ Logging now also works when ipcRenderer is appended to the window element.
+ Card's callback replacement method was changed from click to pointerdown.
This commit is contained in:
Severin Opel 2020-09-15 11:36:59 +02:00
parent 28cfdc180c
commit 114c217ffa
4 changed files with 91 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
dist/iwmlib.js vendored
View File

@ -617,19 +617,6 @@
static toLine(event) {
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() {
@ -883,7 +870,7 @@
return new Date(date.getTime() + 1)
}
static *iterYears(start, end) {
static * iterYears(start, end) {
let date = this.create(start.getFullYear(), 0, 1);
while (date <= end) {
yield date;
@ -892,7 +879,7 @@
yield date;
}
static *iterMonths(year, limit = 12) {
static * iterMonths(year, limit = 12) {
let month = 0;
while (month < limit) {
let date = this.create(year.getFullYear(), month, 1);
@ -901,7 +888,7 @@
}
}
static *iterMonthsOfYears(years) {
static * iterMonthsOfYears(years) {
for (let year of years) {
for (let month of this.iterMonths(year)) {
yield month;
@ -909,7 +896,7 @@
}
}
static *iterDays(month) {
static * iterDays(month) {
let day = 1;
let limit = Dates.daysInMonth(month);
while (day <= limit) {
@ -919,7 +906,7 @@
}
}
static *iterDaysOfMonths(months) {
static * iterDaysOfMonths(months) {
for (let month of months) {
for (let day of this.iterDays(month)) {
yield day;
@ -1095,9 +1082,22 @@
// Distance == 0.0 indicates an inside relation.
static distanceToRect(p, r) {
let cx = Math.max(Math.min(p.x, r.x + r.width), r.x);
let cy = Math.max(Math.min(p.y, r.y + r.height), r.y);
return Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
let dx = 0;
let dy = 0;
if (p.x < r.x)
dx = p.x - r.x;
else if (p.x > r.x + r.width)
dx = p.x - (r.x + r.width);
if (p.y < r.y)
dy = p.y - r.y;
else if (p.y > r.y + r.height)
dy = p.y - (r.y + r.height);
return Math.sqrt(dx * dx + dy * dy)
/* let cx = Math.max(Math.min(p.x, r.x + r.width), r.x)
let cy = Math.max(Math.min(p.y, r.y + r.height), r.y)
let result = Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
console.log("distanceToRect", p, r, result)
return result */
}
static fromPageToNode(element, p) {
@ -1137,7 +1137,8 @@
const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0);
const [smallest] = sets.splice(i, 1);
const res = new Set();
for (let val of smallest) if (sets.every(s => s.has(val))) res.add(val);
for (let val of smallest)
if (sets.every(s => s.has(val))) res.add(val);
return res
}
@ -1686,11 +1687,11 @@
next(nextValue) {
// push new value to the end, and remove oldest one
let removed = this.__push(nextValue);
// smooth value using all values from buffer
// smooth value using all values from buffer
let result = this.buffer.reduce((last, current) => {
return this.smoothing * current + (1 - this.smoothing) * last
}, removed);
// replace smoothed value
return this.smoothing * current + (1 - this.smoothing) * last
}, removed);
// replace smoothed value
this.buffer[this.buffer.length - 1] = result;
return result
}
@ -1725,7 +1726,7 @@
};
try {
ipc = require('electron').ipcRenderer;
ipc = window.ipcRenderer || require('electron').ipcRenderer;
logHandlers.log = message => ipc.send('log', message);
logHandlers.warn = message => ipc.send('warn', message);
logHandlers.error = message => ipc.send('error', message);
@ -2589,8 +2590,6 @@
onMouseWheel(event) {
if (this.capture(event) && this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback')
}
}
@ -2651,25 +2650,6 @@
result[id] = this.getPosition(event);
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
}
@ -2796,8 +2776,6 @@
}
if (this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback', this.target)
}
}
}
@ -4680,7 +4658,7 @@
isClickable(node) {
if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node))
// console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) {
return false
}
@ -4727,16 +4705,24 @@
let clickRects = activeNodes.map(link => {
let rect = link.getBoundingClientRect();
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
let bottomRight = Points$1.fromPageToNode(element, {
x: rect.x + rect.width,
y: rect.y + rect.height
});
let topLeft = Points$1.fromPageToNode(element, rect);
let width = Math.abs(bottomRight.x - topLeft.x);
let height = Math.abs(bottomRight.y - topLeft.y);
let center = Points$1.fromPageToNode(element, {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2
x: rect.x + width / 2,
y: rect.y + height / 2
});
return {
x: topLeft.x,
y: topLeft.y,
width: rect.width,
height: rect.height,
width,
height,
center,
link
}
@ -5768,8 +5754,6 @@
let bottom = parseFloat(this.element.style.bottom);
this.element.style.bottom = bottom - delta.y + 'px';
break
default:
break
}
//console.log("onResize", this.onResize)
if (this.onResize) {
@ -6192,8 +6176,6 @@
x = bbRight;
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2;
break
default:
break
}
}
@ -6249,8 +6231,6 @@
x += this.notchSize * 2;
x += this.posOffset;
break
default:
break
}
this.placeOrigin(x, y);
}
@ -8294,12 +8274,11 @@
maskImage.setAttribute('width', width);
maskImage.setAttribute('height', height);
maskImage.setAttribute('class', 'addedImage');
svgGroup.insertBefore(maskImage, element); // image.nextSibling)
TweenLite.set(maskImage, { scale: 1 });
maskImage.style.mask = 'url(#' + maskId + ')';
}
svgGroup.appendChild(maskImage);
element.insertAdjacentElement('beforebegin', maskImage); // image.nextSibling)
// svgGroup.appendChild(element)
return [mask, maskImage]
@ -8356,9 +8335,6 @@
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
* EyeVisit like cards.
@ -8503,7 +8479,7 @@
*/
static _replaceCallback(context, element, attributeVal) {
if (element.tagName == 'A') {
element.addEventListener('click', event => {
element.addEventListener('pointerdown', event => {
event.preventDefault();
});
}
@ -8596,7 +8572,7 @@
*/
return html.replace(
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function() {
function () {
let path = that._getRelativePath(arguments[4]);
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`;
/* if (that.debug) */ console.log('Adjusted: ', tag);
@ -8625,7 +8601,7 @@
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.onreadystatechange = function() {
request.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200 || Card._isLocal()) {
try {
@ -9787,16 +9763,6 @@
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];
// Use the 'tap' event for closing.
@ -9920,7 +9886,7 @@
});
},
onUpdateParams: ['{self}'],
onUpdate: function(self) {
onUpdate: function (self) {
let transform = self.target._gsTransform;
TweenLite.set(title, {

98
dist/iwmlib.pixi.js vendored
View File

@ -1335,19 +1335,6 @@
static toLine(event) {
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() {
@ -1528,7 +1515,7 @@
return new Date(date.getTime() + 1)
}
static *iterYears(start, end) {
static * iterYears(start, end) {
let date = this.create(start.getFullYear(), 0, 1);
while (date <= end) {
yield date;
@ -1537,7 +1524,7 @@
yield date;
}
static *iterMonths(year, limit = 12) {
static * iterMonths(year, limit = 12) {
let month = 0;
while (month < limit) {
let date = this.create(year.getFullYear(), month, 1);
@ -1546,7 +1533,7 @@
}
}
static *iterMonthsOfYears(years) {
static * iterMonthsOfYears(years) {
for (let year of years) {
for (let month of this.iterMonths(year)) {
yield month;
@ -1554,7 +1541,7 @@
}
}
static *iterDays(month) {
static * iterDays(month) {
let day = 1;
let limit = Dates.daysInMonth(month);
while (day <= limit) {
@ -1564,7 +1551,7 @@
}
}
static *iterDaysOfMonths(months) {
static * iterDaysOfMonths(months) {
for (let month of months) {
for (let day of this.iterDays(month)) {
yield day;
@ -1740,9 +1727,22 @@
// Distance == 0.0 indicates an inside relation.
static distanceToRect(p, r) {
let cx = Math.max(Math.min(p.x, r.x + r.width), r.x);
let cy = Math.max(Math.min(p.y, r.y + r.height), r.y);
return Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
let dx = 0;
let dy = 0;
if (p.x < r.x)
dx = p.x - r.x;
else if (p.x > r.x + r.width)
dx = p.x - (r.x + r.width);
if (p.y < r.y)
dy = p.y - r.y;
else if (p.y > r.y + r.height)
dy = p.y - (r.y + r.height);
return Math.sqrt(dx * dx + dy * dy)
/* let cx = Math.max(Math.min(p.x, r.x + r.width), r.x)
let cy = Math.max(Math.min(p.y, r.y + r.height), r.y)
let result = Math.sqrt((p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy))
console.log("distanceToRect", p, r, result)
return result */
}
static fromPageToNode(element, p) {
@ -2210,11 +2210,11 @@
next(nextValue) {
// push new value to the end, and remove oldest one
let removed = this.__push(nextValue);
// smooth value using all values from buffer
// smooth value using all values from buffer
let result = this.buffer.reduce((last, current) => {
return this.smoothing * current + (1 - this.smoothing) * last
}, removed);
// replace smoothed value
return this.smoothing * current + (1 - this.smoothing) * last
}, removed);
// replace smoothed value
this.buffer[this.buffer.length - 1] = result;
return result
}
@ -5263,7 +5263,7 @@
};
try {
ipc = require('electron').ipcRenderer;
ipc = window.ipcRenderer || require('electron').ipcRenderer;
logHandlers.log = message => ipc.send('log', message);
logHandlers.warn = message => ipc.send('warn', message);
logHandlers.error = message => ipc.send('error', message);
@ -6127,8 +6127,6 @@
onMouseWheel(event) {
if (this.capture(event) && this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback')
}
}
@ -6189,25 +6187,6 @@
result[id] = this.getPosition(event);
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
}
@ -6334,8 +6313,6 @@
}
if (this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback', this.target)
}
}
}
@ -8029,7 +8006,7 @@
isClickable(node) {
if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node))
// console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) {
return false
}
@ -8076,16 +8053,24 @@
let clickRects = activeNodes.map(link => {
let rect = link.getBoundingClientRect();
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
let bottomRight = Points.fromPageToNode(element, {
x: rect.x + rect.width,
y: rect.y + rect.height
});
let topLeft = Points.fromPageToNode(element, rect);
let width = Math.abs(bottomRight.x - topLeft.x);
let height = Math.abs(bottomRight.y - topLeft.y);
let center = Points.fromPageToNode(element, {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2
x: rect.x + width / 2,
y: rect.y + height / 2
});
return {
x: topLeft.x,
y: topLeft.y,
width: rect.width,
height: rect.height,
width,
height,
center,
link
}
@ -16885,10 +16870,7 @@
* that is either passed or null.
*/
if (listeners == null) {
// Null is a valid value as the EventHandler assumes no listener is passed on purpose.
// This is useful, when a default parameter is passed as null.
} else if (Array.isArray(listeners)) this.listeners = listeners;
if (listeners == null) ; else if (Array.isArray(listeners)) this.listeners = listeners;
else if (typeof listeners == 'function') {
this.listeners = [];
this.add(listeners);

8
lib/card/card.js
View File

@ -176,7 +176,7 @@ export default class Card {
*/
static _replaceCallback(context, element, attributeVal) {
if (element.tagName == 'A') {
element.addEventListener('click', event => {
element.addEventListener('pointerdown', event => {
event.preventDefault()
})
}
@ -269,7 +269,7 @@ export default class Card {
*/
return html.replace(
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function() {
function () {
let path = that._getRelativePath(arguments[4])
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
/* if (that.debug) */ console.log('Adjusted: ', tag)
@ -298,7 +298,7 @@ export default class Card {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.onreadystatechange = function() {
request.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200 || Card._isLocal()) {
try {
@ -1593,7 +1593,7 @@ export default class Card {
})
},
onUpdateParams: ['{self}'],
onUpdate: function(self) {
onUpdate: function (self) {
let transform = self.target._gsTransform
TweenLite.set(title, {

2
lib/logging.js
View File

@ -10,7 +10,7 @@ let logHandlers = {
}
try {
ipc = require('electron').ipcRenderer
ipc = window.ipcRenderer || require('electron').ipcRenderer
logHandlers.log = message => ipc.send('log', message)
logHandlers.warn = message => ipc.send('warn', message)
logHandlers.error = message => ipc.send('error', message)