Using Ariutta's svg-pan-zoom with svg.js, I've disabled the native doubleclick functionality and implemented my own custom doubleclick behavior involving pan adjustment and animation.
While this setup usually works fine, occasionally the doubleclick function behaves strangely upon loading the page. Upon debugging, it appears that the function I wrote is sometimes triggered twice for each doubleclick, leading to erratic animation behavior with no clear pattern of occurrence. Restarting the server sometimes resolves the issue, but not consistently, requiring multiple page reloads to correct.
I suspect a possible issue with file load order or conflicts with svg.js animation library or the replacement of the native double-click function in Ariutta's plugin. Any insights on this?
myApp.service('AnimatorService', function(){
this.dblClickBehavior = function(svgCanvas, zoom){
$('.node').dblclick(function(){
// get pan
pan = zoom.getPan();
// get screen width and height
var sizes = zoom.getSizes();
var centerX = (sizes.width)/2;
var centerY = (sizes.height)/2;
// get center position of svg object double clicked
var x0 = this.instance.first().attr('cx');
var y0 = this.instance.first().attr('cy');
//determine the correct pan value necessary to center the svg
panAdjustX = centerX - x0*sizes.realZoom;
panAdjustY = centerY - y0*sizes.realZoom;
//center the svg object by adjust pan
zoom.pan({'x' :centerX - x0*sizes.realZoom, 'y' : centerY - y0*sizes.realZoom});
//simple animation on the object
this.instance.first().animate().radius(centerX);
});
}
});
When functioning correctly, the svg image centers and grows, but when malfunctioning, it centers and shrinks to nothingness.