Commit 07726a89 authored by Jörg Richter's avatar Jörg Richter

Auto-pan on select topic (in-map details)

See dmx-platform/dmx-platform#300
parent e72ef995
Pipeline #8255 passed with stage
in 3 seconds
......@@ -151,8 +151,11 @@ export default class CytoscapeView {
}).play().promise()
}
playFisheyeAnimation () {
playFisheyeAnimation()
/**
* @param callback called once animation is complete
*/
playFisheyeAnimation (callback) {
playFisheyeAnimation(callback)
}
autoPan (node) {
......@@ -600,11 +603,13 @@ function emitTopicsDrag (node) {
// Animation
const playFisheyeAnimation = dm5.utils.debounce(() => {
// Note: instead of returning a promise we take a callback, because debounced functions can't return anything
const playFisheyeAnimation = dm5.utils.debounce(callback => {
// console.log('playFisheyeAnimation')
fisheyeAnimation && fisheyeAnimation.stop()
fisheyeAnimation = cy.layout({
name: 'cose-bilkent',
stop: callback,
fit: false,
/* animateFilter: (node, i) => {
if (isAuxNode(node)) {
......
......@@ -474,7 +474,11 @@ const actions = {
// Note: the fisheye animation can only be started once the restore animation is complete, *and* "object" is
// available. The actual order of these 2 occasions doesn't matter.
if (showDetails) {
Promise.all([p, p2]).then(createAndShowSelectionDetail)
Promise.all([p, p2])
.then(createAndShowSelectionDetail)
.then(() => {
cyView.autoPan(_ele)
})
} else {
cyView.autoPan(_ele)
}
......@@ -855,17 +859,26 @@ function createDetailForSelection () {
return detail
}
/**
* @return a promise resolved once the fisheye animation is complete
*/
function createAndShowSelectionDetail () {
if (!ele) {
console.warn('createDetailForSelection() when "ele" is undefined')
return
}
return showDetail(createDetailForSelection())
}
/**
* @return a promise resolved once the fisheye animation is complete
*/
function showDetail (detail) {
detail.node.addClass('expanded')
Vue.set(state.details, detail.id, detail) // Vue.set() triggers dm5-detail-layer rendering
Vue.nextTick(() => {
adjustDetailSize(detail)
})
}
function createAndShowSelectionDetail () {
!ele && console.warn('createDetailForSelection() when "ele" is undefined')
ele && showDetail(createDetailForSelection())
return Vue.nextTick().then(
() => adjustDetailSize(detail)
)
}
/**
......@@ -875,6 +888,8 @@ function createAndShowSelectionDetail () {
* - the DOM is updated already.
*
* @param detail a detail record
*
* @return a promise resolved once the fisheye animation is complete
*/
function adjustDetailSize(detail) {
const detailDOM = document.querySelector(`.dm5-detail-layer .dm5-detail[data-detail-id="${detail.id}"]`)
......@@ -887,7 +902,9 @@ function adjustDetailSize(detail) {
}
// console.log('adjustDetailSize', detail.node.id(), detail.size.width, detail.size.height)
detail.node.style(detail.size)
cyView.playFisheyeAnimation()
return new Promise(resolve => {
cyView.playFisheyeAnimation(resolve)
})
}
function removeDetailIfUnpinned (id, pinned, showDetails) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment