From a775126f9ce0327faadfa6e3452e14d457c0a16d Mon Sep 17 00:00:00 2001 From: Severin Opel Date: Mon, 19 Aug 2019 16:09:47 +0200 Subject: [PATCH] Fixed problem of popups showing up directly centered on highlights instead of over it. --- lib/card/card.js | 36 +++++++++++++++++++----------------- lib/card/highlight.js | 16 ++++++++-------- 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/lib/card/card.js b/lib/card/card.js index 366710e..a046fa6 100644 --- a/lib/card/card.js +++ b/lib/card/card.js @@ -1,6 +1,6 @@ 'use strict' -import Highlight from './highlight.js' +import Highlight from './highlight.js' /** To avoid problems with relative URL paths, we use inline data URI to load svg icons. */ const closeIconDataURI = `data:image/svg+xml;utf8, @@ -201,7 +201,7 @@ export default class Card { this.registerEvent(context, interactionType, element, event => { /** - * Replaces the strings from the listener with the cooresponding variables. + * Replaces the strings from the listener with the corresponding variables. */ let args = [] argsStrings.forEach(arg => { @@ -235,7 +235,7 @@ export default class Card { * * Currently covers: * Tags: a,img, image, circle - * Attributes: xlink:href,href,src (first occurence only) + * Attributes: xlink:href,href,src (first occurrence only) * * @static * @param {DomElement} element - The children of the element are inspected, if there are relative paths, that has to be adjusted to absolute ones. @@ -260,7 +260,7 @@ export default class Card { } /** - * Concats the given path with the relative path specified in the Card (as static variable). + * Concatenates the given path with the relative path specified in the Card (as static variable). */ static _getRelativePath(src) { let path = this.relativePath != '' ? this.relativePath + '/' + src : src @@ -488,7 +488,7 @@ export default class Card { ) // Placing the popup when it required loading, - // it resulted in flahing up at the default position. + // it resulted in flashing up at the default position. // We manually prevent this here. popup.element.style.display = 'none' @@ -530,7 +530,7 @@ export default class Card { * The cleanup functionality is now covered by the _cleanup function. * It cleans up zoomables, popups and open image highlights. * - * TEST if this intereferes with the editor. + * TEST if this interferes with the editor. */ if (overlay) { TweenLite.to(overlay, 0.2, { @@ -642,7 +642,7 @@ export default class Card { } mainController.popController() } else { - /** This may be in conflice with the cleanup method. */ + /** This may be in conflict with the cleanup method. */ //this._overlayCleanup(context, overlay) popup.remove() } @@ -786,10 +786,15 @@ export default class Card { animation: Card.highlightAnimation, onExpanded: () => { // We assume it's always a circle. This may break, when other svg shapes are used. + let x = node.getAttribute('cx') + let y = node.getAttribute('cy') + let position = { x, y } + + let radius = parseFloat(node.getAttribute('r')) let svgRoot = node.closest('svg') let image = svgRoot.querySelector('image') - let position = Card._calculateCenterRelativeTo(node, image) + //let position = Card._calculateCenterRelativeTo(node, image) /* As the popup is appended directly to the card. We have to @@ -797,11 +802,9 @@ export default class Card { card space. */ - // let svgRoot = node.closest('svg') - let svgPoint = svgRoot.createSVGPoint() svgPoint.x = position.x - svgPoint.y = position.y + svgPoint.y = position.y - radius let matrix = node.getCTM() let point = svgPoint.matrixTransform(matrix) @@ -809,7 +812,6 @@ export default class Card { // console.log('closestDiv', closestDiv, point) let global = Points.fromNodeToPage(closestDiv, point) let local = Points.fromPageToNode(context, global) - let overlay = document.createElement('div') //TODO: Check if this is necessary for the editor. // overlay.onclick = e =>{} @@ -987,7 +989,7 @@ export default class Card { wrapper.appendChild(zoomContainer) - //Note: Remaned ZoomedFigure to zoomed-figure + //Note: Renamed ZoomedFigure to zoomed-figure zoomedFig.className = 'zoomed-figure' zoomedFig.style.zIndex = this.zIndices.zoomedFigure let zoomedG = zoomedFig.querySelector('g') @@ -1642,7 +1644,7 @@ export default class Card { let context = this.getContext(target) let subcard = this._getSubcard(context) //console.log("openIndexCard", { context, subcard }) - //Dont proceeed if a subcard is active + //Don't proceed if a subcard is active if (subcard != null) return // In edit mode we only accept icon clicks @@ -1817,10 +1819,10 @@ export default class Card { } /** - * There occured a problem with the tap event, as it was canceled by the event on the svg element + * There occurred a problem with the tap event, as it was canceled by the event on the svg element * therefore we restructured the interaction, that only the svg listens for events and if the target is * a circle (more are not supported yet) the target is adjusted using the .firstTarget of the event, - * that is provided by the Hammer.propergate plugin. + * that is provided by the Hammer.propagate plugin. */ static openPopupOrZoomable(event) { let target = this._preferFirstTarget(event) @@ -1946,7 +1948,7 @@ export default class Card { } /** - * Helper function to determine if a proided element is still + * Helper function to determine if a provided element is still * an active highlight. */ static _isHighlightActive(context, element) { diff --git a/lib/card/highlight.js b/lib/card/highlight.js index 7accac8..5811056 100644 --- a/lib/card/highlight.js +++ b/lib/card/highlight.js @@ -22,7 +22,7 @@ function round(value) { * * * The SVG root element should use a viewbox with 0 0 100 100 to ensure that the positions and size of the - * circles can be represnted in percent. + * circles can be represented in percent. * * @class Highlight * @extends {Object} @@ -30,7 +30,7 @@ function round(value) { export default class Highlight extends Object { static disableAnimations() { _HighlightEnabled = false - let expanded = document.querySelectorAll('.expanded') + let expanded = document.querySelectorAll('.' + Highlight.expandedClass) for (let obj of expanded) { this.shrink(obj) } @@ -41,11 +41,11 @@ export default class Highlight extends Object { } static removeAnimations(svgRoot) { - let expanded = svgRoot.querySelectorAll('.expanded') + let expanded = svgRoot.querySelectorAll('.' + Highlight.expandedClass) for (let obj of expanded) { TweenLite.set(obj, { scale: 1 }) obj.classList.remove('zooming') - obj.classList.remove('expanded') + obj.classList.remove(Highlight.expandedClass) } let defs = svgRoot.querySelector('defs') while (defs.firstChild) { @@ -88,7 +88,7 @@ export default class Highlight extends Object { onComplete: () => { console.log('expand complete') obj.classList.remove('zooming') - obj.classList.add('expanded') + obj.classList.add(Highlight.expandedClass) obj.setAttribute('stroke-width', stroke / scale) if (onComplete) onComplete() } @@ -108,7 +108,7 @@ export default class Highlight extends Object { onComplete: () => { //console.log("shrink complete") obj.classList.remove('zooming') - obj.classList.remove('expanded') + obj.classList.remove(Highlight.expandedClass) obj.setAttribute('stroke-width', stroke) } }) @@ -147,7 +147,7 @@ export default class Highlight extends Object { let maskImageId = 'maskImage' + id let maskImage = svgRoot.getElementById(maskImageId) - if (circle.classList.contains('expanded')) { + if (circle.classList.contains(Highlight.expandedClass)) { if (!circle.classList.contains('zooming')) { this.shrink(circle, { stroke }) this.shrink(maskImage, { stroke }) @@ -221,7 +221,7 @@ export default class Highlight extends Object { onComplete: onExpanded }) - target.classList.add('expanded') + target.classList.add(Highlight.expandedClass) } }