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

Fixed problem of popups showing up directly centered on highlights instead of over it.

Browse Source
This commit is contained in:
Severin Opel 2019-08-19 16:09:47 +02:00
parent 28a7a0b6a2
commit a775126f9c
2 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
lib/card/card.js
View File

@ -1,6 +1,6 @@
'use strict' '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. */ /** To avoid problems with relative URL paths, we use inline data URI to load svg icons. */
const closeIconDataURI = `data:image/svg+xml;utf8, const closeIconDataURI = `data:image/svg+xml;utf8,
@ -201,7 +201,7 @@ export default class Card {
this.registerEvent(context, interactionType, element, event => { 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 = [] let args = []
argsStrings.forEach(arg => { argsStrings.forEach(arg => {
@ -235,7 +235,7 @@ export default class Card {
* *
* Currently covers: * Currently covers:
* Tags: a,img, image, circle * Tags: a,img, image, circle
* Attributes: xlink:href,href,src (first occurence only) * Attributes: xlink:href,href,src (first occurrence only)
* *
* @static * @static
* @param {DomElement} element - The children of the element are inspected, if there are relative paths, that has to be adjusted to absolute ones. * @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) { static _getRelativePath(src) {
let path = this.relativePath != '' ? this.relativePath + '/' + src : src let path = this.relativePath != '' ? this.relativePath + '/' + src : src
@ -488,7 +488,7 @@ export default class Card {
) )
// Placing the popup when it required loading, // 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. // We manually prevent this here.
popup.element.style.display = 'none' popup.element.style.display = 'none'
@ -530,7 +530,7 @@ export default class Card {
* The cleanup functionality is now covered by the _cleanup function. * The cleanup functionality is now covered by the _cleanup function.
* It cleans up zoomables, popups and open image highlights. * 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) { if (overlay) {
TweenLite.to(overlay, 0.2, { TweenLite.to(overlay, 0.2, {
@ -642,7 +642,7 @@ export default class Card {
} }
mainController.popController() mainController.popController()
} else { } else {
/** This may be in conflice with the cleanup method. */ /** This may be in conflict with the cleanup method. */
//this._overlayCleanup(context, overlay) //this._overlayCleanup(context, overlay)
popup.remove() popup.remove()
} }
@ -786,10 +786,15 @@ export default class Card {
animation: Card.highlightAnimation, animation: Card.highlightAnimation,
onExpanded: () => { onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used. // 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 svgRoot = node.closest('svg')
let image = svgRoot.querySelector('image') 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 As the popup is appended directly to the card. We have to
@ -797,11 +802,9 @@ export default class Card {
card space. card space.
*/ */
// let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint() let svgPoint = svgRoot.createSVGPoint()
svgPoint.x = position.x svgPoint.x = position.x
svgPoint.y = position.y svgPoint.y = position.y - radius
let matrix = node.getCTM() let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix) let point = svgPoint.matrixTransform(matrix)
@ -809,7 +812,6 @@ export default class Card {
// console.log('closestDiv', closestDiv, point) // console.log('closestDiv', closestDiv, point)
let global = Points.fromNodeToPage(closestDiv, point) let global = Points.fromNodeToPage(closestDiv, point)
let local = Points.fromPageToNode(context, global) let local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div') let overlay = document.createElement('div')
//TODO: Check if this is necessary for the editor. //TODO: Check if this is necessary for the editor.
// overlay.onclick = e =>{} // overlay.onclick = e =>{}
@ -987,7 +989,7 @@ export default class Card {
wrapper.appendChild(zoomContainer) wrapper.appendChild(zoomContainer)
//Note: Remaned ZoomedFigure to zoomed-figure //Note: Renamed ZoomedFigure to zoomed-figure
zoomedFig.className = 'zoomed-figure' zoomedFig.className = 'zoomed-figure'
zoomedFig.style.zIndex = this.zIndices.zoomedFigure zoomedFig.style.zIndex = this.zIndices.zoomedFigure
let zoomedG = zoomedFig.querySelector('g') let zoomedG = zoomedFig.querySelector('g')
@ -1642,7 +1644,7 @@ export default class Card {
let context = this.getContext(target) let context = this.getContext(target)
let subcard = this._getSubcard(context) let subcard = this._getSubcard(context)
//console.log("openIndexCard", { context, subcard }) //console.log("openIndexCard", { context, subcard })
//Dont proceeed if a subcard is active //Don't proceed if a subcard is active
if (subcard != null) return if (subcard != null) return
// In edit mode we only accept icon clicks // 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 * 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, * 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) { static openPopupOrZoomable(event) {
let target = this._preferFirstTarget(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. * an active highlight.
*/ */
static _isHighlightActive(context, element) { static _isHighlightActive(context, element) {

16
lib/card/highlight.js
View File

@ -22,7 +22,7 @@ function round(value) {
* </svg> * </svg>
* *
* The SVG root element should use a viewbox with 0 0 100 100 to ensure that the positions and size of the * 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 * @class Highlight
* @extends {Object} * @extends {Object}
@ -30,7 +30,7 @@ function round(value) {
export default class Highlight extends Object { export default class Highlight extends Object {
static disableAnimations() { static disableAnimations() {
_HighlightEnabled = false _HighlightEnabled = false
let expanded = document.querySelectorAll('.expanded') let expanded = document.querySelectorAll('.' + Highlight.expandedClass)
for (let obj of expanded) { for (let obj of expanded) {
this.shrink(obj) this.shrink(obj)
} }
@ -41,11 +41,11 @@ export default class Highlight extends Object {
} }
static removeAnimations(svgRoot) { static removeAnimations(svgRoot) {
let expanded = svgRoot.querySelectorAll('.expanded') let expanded = svgRoot.querySelectorAll('.' + Highlight.expandedClass)
for (let obj of expanded) { for (let obj of expanded) {
TweenLite.set(obj, { scale: 1 }) TweenLite.set(obj, { scale: 1 })
obj.classList.remove('zooming') obj.classList.remove('zooming')
obj.classList.remove('expanded') obj.classList.remove(Highlight.expandedClass)
} }
let defs = svgRoot.querySelector('defs') let defs = svgRoot.querySelector('defs')
while (defs.firstChild) { while (defs.firstChild) {
@ -88,7 +88,7 @@ export default class Highlight extends Object {
onComplete: () => { onComplete: () => {
console.log('expand complete') console.log('expand complete')
obj.classList.remove('zooming') obj.classList.remove('zooming')
obj.classList.add('expanded') obj.classList.add(Highlight.expandedClass)
obj.setAttribute('stroke-width', stroke / scale) obj.setAttribute('stroke-width', stroke / scale)
if (onComplete) onComplete() if (onComplete) onComplete()
} }
@ -108,7 +108,7 @@ export default class Highlight extends Object {
onComplete: () => { onComplete: () => {
//console.log("shrink complete") //console.log("shrink complete")
obj.classList.remove('zooming') obj.classList.remove('zooming')
obj.classList.remove('expanded') obj.classList.remove(Highlight.expandedClass)
obj.setAttribute('stroke-width', stroke) obj.setAttribute('stroke-width', stroke)
} }
}) })
@ -147,7 +147,7 @@ export default class Highlight extends Object {
let maskImageId = 'maskImage' + id let maskImageId = 'maskImage' + id
let maskImage = svgRoot.getElementById(maskImageId) let maskImage = svgRoot.getElementById(maskImageId)
if (circle.classList.contains('expanded')) { if (circle.classList.contains(Highlight.expandedClass)) {
if (!circle.classList.contains('zooming')) { if (!circle.classList.contains('zooming')) {
this.shrink(circle, { stroke }) this.shrink(circle, { stroke })
this.shrink(maskImage, { stroke }) this.shrink(maskImage, { stroke })
@ -221,7 +221,7 @@ export default class Highlight extends Object {
onComplete: onExpanded onComplete: onExpanded
}) })
target.classList.add('expanded') target.classList.add(Highlight.expandedClass)
} }
} }