Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Drag group of elements and line end

Expand Messages
  • ddailey
    Take a look at http://srufaculty.sru.edu/david.dailey/svg/drag.svg It has some SMIL animation in it so Opera or IE/ASV display better (Firefox handles most of
    Message 1 of 5 , Mar 5, 2009
    • 0 Attachment
      Take a look at http://srufaculty.sru.edu/david.dailey/svg/drag.svg

      It has some SMIL animation in it so Opera or IE/ASV display better (Firefox handles most of it, and Chrome and Safari see unhappy). But there is a group being dragged about by mouse activity (a <g> with text and a rect, I think) that seems to respond properly across all browsers.

      Unless the properties of the car have to somehow be communicated back to a database, then I'm not sure why doing what you're talking about in JavaScript would be a problem (and even so then you'd just use JSON or AJAX to ship data back and forth asynchronously).

      So I'd just use JavaScript to drag the car and to redraw the line as the car moves. With each mousemove, reposition the group and reset the x1 and y1 attributes of the line.

      There are a few other dragging examples at http://srufaculty.sru.edu/david.dailey/svg/ , including one which allows the resizing of rectangles in a sort of "drawing" mode.

      hope this helps
      DD


      ----- Original Message -----
      From: agebosma
      To: svg-developers@yahoogroups.com
      Sent: Wednesday, March 04, 2009 8:16 AM
      Subject: [svg-developers] Drag group of elements and line end


      Hi,

      Even though I'm using Batik SVG, this is more of a general SVG and/or DOM matter I think.

      I've got a group of elements, lets say a car, on a Batik JSVGCanvas. A strait line should go from that group to a specific point, to indicate its destination. The end point of the line is always the center of the map. This line can be just one strait line for the time being but in the future I'd like to make it possible to click on any position of the line and drag that point to a different location to create intermediate destination point. The latter, however, is a different topic. There can also be more then one car on the map.
      What I'd like to create is the possibility to drag the car to a different position and by that, the start of the line has to move as well. I'm a bit stuck on how to do this though.

      Using Java would be the logical thing to do. This is because of the
      updating of the properties dialog of the car. I.e. if I double click
      on the car, a properties dialog should appear allowing you to change
      the car settings and also the position of the car. Using JavaScript
      for the dragging would only complicate this communication as far as I
      can tell but correct me if I'm wrong.
      The dragging of the group of elements should not be too hard. The
      approach explained on XML.com [1] looks usable, the only thing I'd
      have to add would be determining if a car is clicked or not. If yes,
      start moving it. Or would a different approach be more appropriate?
      What would be a sane approach to moving the line starting point?
      Including the line or path element in the car group element would
      cause the complete line to move along with the car, thus moving the
      destination point.
      Because of the future alterations I will have to use the path element.
      There's also no way of knowing the end point, or first intermediate
      point, in advance. Completely redrawing the path would therefor be not
      an option IMHO, or it would at least be the difficult way of doing it.
      Is there some way to 'attach' the line starting point with the group?
      How can I determine and move just the line starting point?

      I hope you can give me some advise on how to proceed.

      Yours,

      Age

      [1] http://www.xml.com/pub/a/2002/02/27/drag.html




      [Non-text portions of this message have been removed]
    • Age Bosma
      Thank you for your reply. ... The properties don t have to communicate back to a database but I do need it in various other locations of the Java application.
      Message 2 of 5 , Mar 8, 2009
      • 0 Attachment
        Thank you for your reply.

        ddailey wrote:

        > Unless the properties of the car have to somehow be communicated back to a database, then I'm not sure why doing what you're talking about in JavaScript would be a problem (and even so then you'd just use JSON or AJAX to ship data back and forth asynchronously).
        >

        The properties don't have to communicate back to a database but I do
        need it in various other locations of the Java application. Would using
        JSON or AJAX be more efficient in that case? If yes, do you have some
        resources explaining how to use JSON or AJAX in combination with SVG?

        > So I'd just use JavaScript to drag the car and to redraw the line as the car moves. With each mousemove, reposition the group and reset the x1 and y1 attributes of the line.
        >

        I came to this conclusion as well. This, however, would work when using
        a line, not a path as far as I can tell. The only solution I can think
        of when using a path is to perform some string replacements on the 'd'
        attribute (locate the 'M' command, change the points). Something which
        isn't very clean. Is there any other way to just replace the 'M' command?

        The second issue is getting the path element in the first place. I take
        it there's no easier way then to a) give each line a special 'id', one
        which can be determined by the 'id' of the car group or b) add both the
        car group and the path to a second group and walk the DOM until it finds
        a path in the same group as the car group. Too bad SVG doesn't support
        some kind of snapping behaviour ;-)

        Yours,

        Age
      • David Leunen
        Hey, The only solution I can think ... Yes there is. Are you aware of the SVGPathElement? http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathElement
        Message 3 of 5 , Mar 8, 2009
        • 0 Attachment
          Hey,


          The only solution I can think
          > of when using a path is to perform some string replacements on the 'd'
          > attribute (locate the 'M' command, change the points). Something which
          > isn't very clean. Is there any other way to just replace the 'M' command?


          Yes there is. Are you aware of the SVGPathElement?
          http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathElement
          http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/dom/svg/SVGOMPathElement.html
          You can get its pathSegList and modify it without having to parse the 'd'
          attribute yourself.




          > The second issue is getting the path element in the first place. I take
          > it there's no easier way then to a) give each line a special 'id', one
          > which can be determined by the 'id' of the car group or b) add both the
          > car group and the path to a second group and walk the DOM until it finds
          > a path in the same group as the car group. Too bad SVG doesn't support
          > some kind of snapping behaviour ;-)


          What do you mean exactly ?
          By using SMIL (batik does support it pretty well) you can use an
          <animationMotion> and a <mpath> linked to your dynamic path.
          See this example in Batik or Opera :
          http://www.w3.org/TR/SVG/images/animate/animMotion01.svg
          It's from here : http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement
          But yes, in order to link your car to the animation path, you have to give
          the path an id.


          cheers.

          David


          [Non-text portions of this message have been removed]
        • Age Bosma
          ... No, I did not know about the SVGPathElement. There are just too many options :-S Many thanks, that was what I was looking for. ... What I meant was having
          Message 4 of 5 , Mar 10, 2009
          • 0 Attachment
            2009/3/8 David Leunen <leunen.d@...>:
            > Hey,
            >
            >
            > The only solution I can think
            >> of when using a path is to perform some string replacements on the 'd'
            >> attribute (locate the 'M' command, change the points). Something which
            >> isn't very clean. Is there any other way to just replace the 'M' command?
            >
            >
            > Yes there is. Are you aware of the SVGPathElement?
            > http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathElement
            > http://xmlgraphics.apache.org/batik/javadoc/org/apache/batik/dom/svg/SVGOMPathElement.html
            > You can get its pathSegList and modify it without having to parse the 'd'
            > attribute yourself.
            >

            No, I did not know about the SVGPathElement. There are just too many
            options :-S Many thanks, that was what I was looking for.

            >
            >
            >
            >> The second issue is getting the path element in the first place. I take
            >> it there's no easier way then to a) give each line a special 'id', one
            >> which can be determined by the 'id' of the car group or b) add both the
            >> car group and the path to a second group and walk the DOM until it finds
            >> a path in the same group as the car group. Too bad SVG doesn't support
            >> some kind of snapping behaviour ;-)
            >
            >
            > What do you mean exactly ?

            What I meant was having the option in SVG to say: This path point
            should always be attached to this path/location of this element. This
            way, not matter what happens to the element the path point is attached
            to, the point will always move along with the element. You wouldn't
            have to do it manually any more.

            Age
          Your message has been successfully submitted and would be delivered to recipients shortly.