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

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

8
lib/card/card.js
View File

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

2
lib/logging.js
View File

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