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

Drag group of elements and line end

Expand Messages
  • agebosma
    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
    Message 1 of 5 , Mar 4, 2009
    • 0 Attachment
      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
    • 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 2 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 3 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 4 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 5 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.