Sure, I can help. However, you wouldn't call animateViewBox when you're
dragging. When you think about it, you'll see why:
1. dragMove (the Raphael eve event) happens pretty much on mousemove,
which is every pixel of movement of your mouse. Therefore dragMove would
happen every time your cursor moves a pixel, which is maybe every 10ms.
2. animateViewBox would have a duration of 250ms, for example.
3. By moving your mouse you would send hundreds of dragMove events, and
the handlers of those, one might erroneously propose, would call the
animateViewBox method. The result would be a giant queue of
animateViewBox executions, which would leave you with an ugly animation.
So you just need to do a setViewBox call with the coordinates from
ev.pageX and ev.pageY.
However, binding events to the canvas itself with Raphael is kind of
hard, as drag/drop methods are only available on the Element object. I
worked around this by binding directly to the HTML element that is the
parent of the SVG canvas, i.e. the same element you call Raphael on.
I implemented this loosely earlier today, hopefully it's of some use to you:
var dragActive = false,
startCoords = {
x: 0,
y: 0
},
targetCoords = {
x: 0,
y: 0
};
function getDelta(pageX, pageY) {
var trueDelta = getTrueDelta(pageX, pageY);
targetCoords.x += trueDelta.x;
targetCoords.y += trueDelta.y;
return targetCoords;
}
function getTrueDelta(pageX, pageY) {
return {
x: startCoords.x - pageX,
y: startCoords.y - pageY
}
}
function dragEnd(pageX, pageY) {
dragActive = false;
}
function dragStart(pageX, pageY) {
dragActive = true;
startCoords = { x: pageX, y: pageY }
targetCoords = ChartManager.getViewBox();
}
function drag(pageX, pageY) {
if(dragActive) {
var scale = ChartManager.getViewBox()['scale'],
delta = getDelta(pageX, pageY);
delta.x /= scale * 1.75;
delta.y /= scale * 1.75;
//console.log(delta);
ChartManager.setView(delta, false, false);
}
}
// Controls
$('#Canvas')
.bind('mousemove', function(ev) {
drag(ev.pageX, ev.pageY);
})
.bind('mousedown', function(ev) {
if(ev.target.tagName == 'svg' || $.browser.msie && $.browser.version < 9
&& ev.target.tagName != 'shape') {
dragStart(ev.pageX, ev.pageY);
}
});
$(window).bind('mouseup', function(ev) {
dragEnd(ev.pageX, ev.pageY);
});
>> if(iterator == stepsNum&& callback) {
--To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/fu7a_j-1S3cJ.
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/bOSLBHQUxGkJ.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.
even if this is over a week old, I wanted to thank you once again for
all the effort.
The whole chart manager in its concept gave me some more insight and
raised an even bigger horizont for future plans. Lets hope in a good
way ;)
Hope you enjoyed LondonJS ;>
If it wouldn't be so far away, I ve had defenitly gave it a shot
Axel
On 23 Nov., 12:40, Will Morgan <m...@willmorgan.co.uk> wrote:
> Hah, you're welcome!
>
> I think the weight of this code so far warrants it to be put in a plugin,
> but I suspect if it were properly integrated in to Raphael's animation
> library the size would diminish. I can sort of see Dmitry's motivations in
> not adding this to the core - maybe could be put in a g.raphael or
> ui.raphael plugin or subpackage in the future with improvements.
>
> I'm not 100% certain on how events work in Raphael but I would expect
> dragStart/dragMove etc not to bubble up.
>
> Can you post a link to your code so I can have a look? If it's any use,
> here's mine:
>
> http://simplify.dev.betterbrief.co.uk/My-Organisation_Chart.html
>
> Please note it's a development environment at the moment - as such things
> may fall over for which I cannot be held responsible. Hopefully the code is
> expressive enough for you to grasp how everything works, so you can
> incorporate those concepts in to your project.
>
> Regards,
>
> Will
>
As a FYI, I've modified the code to increase performance and response
times, especially in IE. I did this by minimizing calls to the DOM, so
I basically reduced my calls to .attr and so on. Also I found that
modifying the transform SVG attribute on elements is faster than the X/
Y coordinates, at least to my perception anyway.
I've also put in hardware acceleration via requestAnimationFrame. The
animation code could do with a bit of a refactor as it's quite
misleading, but it works.
There's a known issue in my code where dragging on top of any element
other than the box causes the drop operation to fail. The app needs a
bit of a polish and then it'll be finished.
Hi Will,Nice job on the UI (http://simplify.dev.betterbrief.co.uk/My-Organisation_Chart.html). I'm working on a similar project (a diagram viewer), and I'd love to view the code relating to the animated pan/scroll/zoom. I couldn't see it from your link?Thanks,Gerry
> > > For more options, visit this group at
> > >http://groups.google.com/group/raphaeljs?hl=en-GB.
>
> > --
> > -----------------------
> > Will Morgan
> > Web Developer
> > -----------------------
> > m: m...@willmorgan.co.uk
> > t: +447935077670
--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To view this discussion on the web, visit https://groups.google.com/d/msg/raphaeljs/-/W9-Ca2ktii4J.