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

Improved wrapper event handling.

Browse Source
This commit is contained in:
Uwe Oestermeier 2019-07-24 11:45:03 +02:00
parent cc6ef8de46
commit ed40ffc43f
4 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/highlight.css
View File

@ -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;
}

24
dist/iwmlib.js vendored
View File

@ -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,7 +10351,6 @@
} else console.log('Element was no parent:', target);
}
this._bringToFront(target);
let svgRoot = target.closest('svg');
if (svgRoot == null) {
return
@ -10364,9 +10363,9 @@
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
});

20
lib/card/highlight.js
View File

@ -213,7 +213,6 @@ 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
@ -226,9 +225,9 @@ export default class Highlight extends Object {
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
})

4
lib/card/wrapper.js
View File

@ -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
}
}