From 114c217ffaafee648e50d0d78ecbdfc3784b1371 Mon Sep 17 00:00:00 2001 From: Ukmasmu Date: Tue, 15 Sep 2020 11:36:59 +0200 Subject: [PATCH] Improved logging and adjusted card's click handler + Logging now also works when ipcRenderer is appended to the window element. + Card's callback replacement method was changed from click to pointerdown. --- dist/iwmlib.js | 126 ++++++++++++++++---------------------------- dist/iwmlib.pixi.js | 98 ++++++++++++++-------------------- lib/card/card.js | 8 +-- lib/logging.js | 2 +- 4 files changed, 91 insertions(+), 143 deletions(-) diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 561a704..d35e039 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -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, { diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 203fced..039e2d1 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -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); diff --git a/lib/card/card.js b/lib/card/card.js index c423c12..9c83892 100644 --- a/lib/card/card.js +++ b/lib/card/card.js @@ -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, { diff --git a/lib/logging.js b/lib/logging.js index 60c72c8..e885d13 100644 --- a/lib/logging.js +++ b/lib/logging.js @@ -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)