From ed40ffc43fb0ace29401fcaa8320e189a244a9f2 Mon Sep 17 00:00:00 2001 From: Uwe Oestermeier Date: Wed, 24 Jul 2019 11:45:03 +0200 Subject: [PATCH] Improved wrapper event handling. --- css/highlight.css | 12 ++++++++++++ dist/iwmlib.js | 26 +++++++++++++++++--------- lib/card/highlight.js | 22 +++++++++++++++------- lib/card/wrapper.js | 4 ++-- 4 files changed, 46 insertions(+), 18 deletions(-) diff --git a/css/highlight.css b/css/highlight.css index afe25c1..2a04689 100644 --- a/css/highlight.css +++ b/css/highlight.css @@ -4,7 +4,19 @@ circle { stroke-width: 8px; } + + mask circle { stroke-width: 0; fill: white; } + +.addedImage { + filter: invert(1); +} + +.debugRect { + stroke: red; + fill: transparent; + stroke-width: 8px; +} \ No newline at end of file diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 8f568b8..a5779cf 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -10097,14 +10097,14 @@ } if (this.tapNodes.has(node)) { handler = this.tapNodes.get(node); - handler(event); + handler(event, node); return true } for (let [selector, handler] of this.tapHandler.entries()) { console.log("nodeTapped", selector); for (let obj of this.domNode.querySelectorAll(selector)) { if (node == obj) { - handler(event); + handler(event, node); return true } } @@ -10351,22 +10351,21 @@ } else console.log('Element was no parent:', target); } this._bringToFront(target); - let svgRoot = target.closest('svg'); if (svgRoot == null) { return } let image = svgRoot.querySelector('image'); - + // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight$1._getSVGMask(target, { svgRoot, image }); let center = Highlight$1._calculateCenterRelativeTo(target, image); - + console.log("_calculateCenterRelativeTo", center); TweenLite.set(maskImage, { - transformOrigin: `${center.x}% ${center.y}%` + transformOrigin: `${center.x} ${center.y}` }); TweenLite.set(target, { transformOrigin: '50% 50%' }); @@ -10380,6 +10379,7 @@ } static toggleHighlight(node) { + console.log("toggleHighlight", Highlight$1._isExpanded(node)); if (Highlight$1._isExpanded(node)) { Highlight$1.closeHighlight(node); } else { @@ -10483,6 +10483,12 @@ svgGroup.insertBefore(maskImage, element); // image.nextSibling) TweenLite.set(maskImage, { scale: 1 }); maskImage.style.mask = 'url(#' + maskId + ')'; + + let rect = document.createElementNS(svg, 'rect'); + rect.setAttribute('width', width); + rect.setAttribute('height', height); + rect.classList.add('debugRect'); + svgGroup.appendChild(rect); } svgGroup.appendChild(maskImage); @@ -10497,7 +10503,9 @@ let height = bbox.height; let cx = target.getAttribute('cx'); let cy = target.getAttribute('cy'); - return { x: (cx / width) * 100, y: (cy / height) * 100 } + let x = cx.endsWith('%') ? cx : round((cx / width) * 100) + '%'; + let y = cy.endsWith('%') ? cy : round((cy / height) * 100) + '%'; + return { x, y } } static _isExpanded(target) { @@ -10513,12 +10521,12 @@ } static closeHighlight(target, { animation = 0.5 } = {}) { - console.log('Close Highlight'); + Highlight$1._notExpanded(target); // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight$1._getSVGMask(target); - + console.log('Close Highlight', maskImage); TweenLite.to([target, maskImage], animation, { scale: 1 }); diff --git a/lib/card/highlight.js b/lib/card/highlight.js index acc11fb..73bbeb5 100644 --- a/lib/card/highlight.js +++ b/lib/card/highlight.js @@ -213,22 +213,21 @@ export default class Highlight extends Object { } else console.log('Element was no parent:', target) } this._bringToFront(target) - let svgRoot = target.closest('svg') if (svgRoot == null) { return } let image = svgRoot.querySelector('image') - + // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image }) let center = Highlight._calculateCenterRelativeTo(target, image) - + console.log("_calculateCenterRelativeTo", center) TweenLite.set(maskImage, { - transformOrigin: `${center.x}% ${center.y}%` + transformOrigin: `${center.x} ${center.y}` }) TweenLite.set(target, { transformOrigin: '50% 50%' }) @@ -242,6 +241,7 @@ export default class Highlight extends Object { } static toggleHighlight(node) { + console.log("toggleHighlight", Highlight._isExpanded(node)) if (Highlight._isExpanded(node)) { Highlight.closeHighlight(node) } else { @@ -345,6 +345,12 @@ export default class Highlight extends Object { svgGroup.insertBefore(maskImage, element) // image.nextSibling) TweenLite.set(maskImage, { scale: 1 }) maskImage.style.mask = 'url(#' + maskId + ')' + + let rect = document.createElementNS(svg, 'rect') + rect.setAttribute('width', width) + rect.setAttribute('height', height) + rect.classList.add('debugRect') + svgGroup.appendChild(rect) } svgGroup.appendChild(maskImage) @@ -359,7 +365,9 @@ export default class Highlight extends Object { let height = bbox.height let cx = target.getAttribute('cx') let cy = target.getAttribute('cy') - return { x: (cx / width) * 100, y: (cy / height) * 100 } + let x = cx.endsWith('%') ? cx : round((cx / width) * 100) + '%' + let y = cy.endsWith('%') ? cy : round((cy / height) * 100) + '%' + return { x, y } } static _isExpanded(target) { @@ -375,12 +383,12 @@ export default class Highlight extends Object { } static closeHighlight(target, { animation = 0.5 } = {}) { - console.log('Close Highlight') + Highlight._notExpanded(target) // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight._getSVGMask(target) - + console.log('Close Highlight', maskImage) TweenLite.to([target, maskImage], animation, { scale: 1 }) diff --git a/lib/card/wrapper.js b/lib/card/wrapper.js index 5bc3565..77fc35f 100644 --- a/lib/card/wrapper.js +++ b/lib/card/wrapper.js @@ -161,14 +161,14 @@ export default class CardWrapper extends Object { } if (this.tapNodes.has(node)) { handler = this.tapNodes.get(node) - handler(event) + handler(event, node) return true } for (let [selector, handler] of this.tapHandler.entries()) { console.log("nodeTapped", selector) for (let obj of this.domNode.querySelectorAll(selector)) { if (node == obj) { - handler(event) + handler(event, node) return true } }