Ability to read the current graph center

[julbra]

trafficstars

Hey Andrei,

Been reading through the code but can't figure out a way to retrieve the current transform from graphics.

The use case is to preserve the graph center and zoom-level after the graph container has been resized.

I have a (dirty) work around to preserve the zoom-level, but reading the current center seems impossible. I believe if I had the current center I would then be able to use renderer.moveTo()

[anvaka]

Hi Julien,

I remember struggling with it a lot too and current implementation is suboptimal. I also remember it used to keep the graph center/zoom level, but now it seem to be broken (tried here), most likely I broke it during fix of https://github.com/anvaka/VivaGraphJS/issues/136

Please feel free to add/modify required API yourself, if you are interested. Otherwise I can look into fixing it too, hopefully soon (all my free time is eaten now by preparing to http://2015.cascadiajs.com/ )

[julbra]

Great I hope to have some time this week to look at this. I already have an improved version of the automatic zoom-out which works for all aspect ratios.

[julbra]

https://github.com/julbra/VivaGraphJS contains various updates relating to this.

New features:

• smooth zoom
• preserve center and scale through resizes
• exposed onResize() through renderer's public interface
• window resize handler now optional through settings (other apps may use more sophisticated resize mechanisms)

I'll finish reviewing/tidying up on Monday and make a pull request once I figure out how to do this :D

PS: the SVG and WebGL coordinate space differences make this rather painful to try and abstract in the renderer!

[anvaka]

Nice. Looking forward to it!

PS: the SVG and WebGL coordinate space differences make this rather painful to try and abstract in the renderer!

Agreed.

[ZeroX-DG]

What's the status of this issue? I'm having trouble reading the graph center too! looks like the getTransform() function doesn't update with the latest graph center :cry: only the scale is updated :cry:

[ZeroX-DG]

My current solution for this is: create a transform variable to store the transform info. Initialize it with the default center point Then use drag event from renderer to receive the offset and update it with the transform variable. Save the transform variable to reuse for next time using graphCenterChanged function of graphics.

const transform = { x: 0, y: 0 }
// initialize with the default transform
const defaultTransform = renderer.getTransform()
transform.x = defaultTransform.x
transform.y = defaultTransform.y
// update the position when the graph is dragged
renderer.on('drag', offset => {
  transform.x += offset.x
  transform.y += offset.y
})
// Next time just use
graphics.graphCenterChanged(transform.x, transform.y)