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'
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) {

16
lib/card/highlight.js
View File

@ -22,7 +22,7 @@ function round(value) {
* </svg>
*
* 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)
}
}