Hi All,
I'm facing the main issue with managing mouse events of svg elements while zoom
in is applied on svg.because when i try to drag svg element(that is placed in
map svg) in zoomed position of map svg,it is moving at distant position(far
from cursor position) than cursor's position.and while referring
http://www.maa.org/joma/Volume7/Lane/Developer.html i found something like
mentioned below at the last statement of this page,
i.e. Note that if you zoom or pan, or otherwise change the transform matrix or
viewbox, this will break the mouse functionality. If you need to account for
these dynamically, check out Kevin Lindsay's Mouser JavaScript class at
kevlindev.com.
So i need a solution for dragging svg elements in svg map when zoom is
applied(by playing with svg viewbox coordinates) on svg map.Is there any plugin
available which can manage mouse events of svg elements while zoom in is
applied on svg map?and I want it to get work with Google Chrome Browser.
Thanks for anticipation
Regards,
Vishal
--- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@...> wrote:
>
> Hi Vishal,
>
> I have used the following to track the cursor as related to inline SVG:
>
> //---x,y offset values for svgDiv (no page scrolling)---
> function findPos(obj)
> {
> var curleft = curtop = 0;
> if (obj.offsetParent)
> {
> do {
> curleft += obj.offsetLeft;
> curtop += obj.offsetTop;
> }
> while (obj = obj.offsetParent);
>
> return [curleft,curtop];
> }
> }
>
> var xSVG
> var ySVG
> function showXY(evt)
> {
> var posX=findPos(svgDiv)[0]
> var posY=findPos(svgDiv)[1]
> //---if page scrolling y,x ----
> var offsetY=document.documentElement.scrollTop
> var offsetX=document.documentElement.scrollLeft
> xSVG=evt.clientX-posX+offsetX
> ySVG=evt.clientY-posY+offsetY
>
> }
>
> In order to drag from/across one viewPort and drop to another, where they
> each have different viewBox values, is tricky but doable. You'll would use
> the following SVG goodies:
> 1) nearestViewportElement()
> 2) getScreenCTM
> 3) SVGPoint
> 4) matrixTransform
> 5) inverse()
> 6) getCTM
> Plus store the translation x,y value at each DragTarget.
>
> Assume the DragTarget is the svg element that will be dragged from another
> SVG/HTML parent within the HTML document and dropped into the desired SVG,
> i.e, your map.svg (shown as mySVG below)
>
>
> var DragTarget=null;
> var Dragging = false;
> var OffsetX = 0;
> var OffsetY = 0;
> var Pnt;
> //---mouse down over svg element, determine Offset---
> function startDrag(evt)
> {
> if(Dragging==false)
> {
> DragTarget=evt.target;
> //---reference point to its respective viewport--
> Pnt = DragTarget.nearestViewportElement.createSVGPoint();
> Pnt.x = evt.clientX;
> Pnt.y = evt.clientY;
> //---elements in different(svg) viewports---
> var sCTM = DragTarget.nearestViewportElement.getScreenCTM();
> Pnt = Pnt.matrixTransform(sCTM.inverse());
>
> OffsetX = Pnt.x - parseFloat(DragTarget.getAttribute("transX"));
> OffsetY = Pnt.y - parseFloat(DragTarget.getAttribute("transY"));
>
> Dragging=true;
> }
> }
>
>
> //---onmousemove---
> function drag(evt)
> {
> if(Dragging)
> {
> //---reference point to its respective viewport--
> Pnt = DragTarget.nearestViewportElement.createSVGPoint();
> Pnt.x = evt.clientX;
> Pnt.y = evt.clientY;
> //---elements in different(svg) viewports---
> var sCTM = DragTarget.nearestViewportElement.getScreenCTM();
> Pnt = Pnt.matrixTransform(sCTM.inverse());
> Pnt.x -= OffsetX;
> Pnt.y -= OffsetY;
> //---retain values for next Offset---
> DragTarget.setAttribute("transX", Pnt.x);
> DragTarget.setAttribute("transY", Pnt.y);
> DragTarget.setAttribute("transform", "translate(" + Pnt.x + ","
> + Pnt.y + ")");
> }
> }
>
> //---mouseup: drop into new viewPort, and auto transform to its current
> viewBox---
> function stopDrag(evt)
> {
> mySVG.appendChild(DragTarget);
> showXY(evt)
> Pnt = mySVG.createSVGPoint();
> Pnt.x =xSVG
> Pnt.y =ySVG;
> //---elements in different(svg) viewports---
> var sCTM = DragTarget.nearestViewportElement.getCTM();
> Pnt = Pnt.matrixTransform(sCTM.inverse());
> Pnt.x -= OffsetX;
> Pnt.y -= OffsetY;
> DragTarget.setAttribute("transform", "translate(" + Pnt.x + ","
> + Pnt.y + ")");
> Dragging = false;
> DragTarget=null
> OffsetX=0
> OffsetY=0
> }
>
> I have used this in IE9, and it works nicely. I haven't tested it in other
> browsers.
>
> Regards,
> Francis
>
>
> --- In svg-developers@yahoogroups.com, "vishal_aegisisc" <vishal_aegisisc@>
> wrote:
> >
> > Dear Friends,
> >
> > i'm stuck with the below mentioned scenario,
> >
> > Following Implementations are done,
> >
> > 1) i'm loading svg in html division as shown below,
> >
> > $('#SvgDIV').svg({ loadURL: 'map.svg', onLoad: function () {
> > // here i'm binding some functionalities with jquery
> > }
> > });
> >
> > here map.svg is representing a map
> >
> > 2) [Drag and Drop From HTML DIV To SVG]
> >
> > I have another html division i.e. <div id="pqr" class="drag"> <ul><li
> > class="abc" image="xyz.svg">XYZ</li></ul> </div>
> >
> > here xyz.svg represents an element,And i'm placing/appending this element
> > as an svg image tag on above map (i.e. mentioned in point-1),
> > To accomplish that I'm dragging this <li> to above loaded svg map in
> > "SvgDIV" division with the help of jQuery UI plugin.
> >
> > As a result,xyz.svg(element) that is binded with <li class="abc"> will be
> > appended as an svg image tag in map.svg (map) on the drop event of <li>
> >
> >
> > 3) [Drag and Drop From SVG To SVG]
> >
> > Drag & Drop of svg element(xyz.svg) in map.svg(map) with the help of jQuery
> > UI plugin only.
> >
> >
> > 4) SVG Zoom in out functionality without panning by playing with Viewbox
> > coordinates of root element of map SVG i.e. map.svg,
> >
> > Implemented Point 3 & 4 are Drag and Drop without zooming in/out the
> > map,that means map is in its original size and position
> > when we are making Drag/Drop From SVG To SVG and From HTML DIV to SVG,
> > the issue is with drag and drop of an element along with zoom in/out of the
> > map
> >
> > Issue 1 : Is it possible/feasible If I want to drag & drop element(xyz.svg)
> > on map(map.svg) at the time of ZOOM IN IS APPLIED ON THE MAP?
> > and if it is correct approach/possible then how to get correct
> > position/actual coordinates of element
> > in map on drop event of that svg element? (Please suggest any possible way
> > to achieve this)
> >
> > Issue 2 : When i try to drag element from map and drop it to the map only
> > that time also getting problem to get actual position/coordinates of
> > element on map
> >
> > Please suggest the possible ways to get rid of it.
> >
> > Regards,
> > Vishal
> >
>
------------------------------------
-----
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
<*> To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
