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

How to manipulate SVG DOM tree: locate items & insert nodes?

Expand Messages
  • krell Krellis
    I have a specific requirement to add a label to an SVG component that is on the canvas within an SVG editor tool. And not being a DOM / SVG expert, I have got
    Message 1 of 6 , May 28, 2013
    • 0 Attachment
      I have a specific requirement to add a label to an SVG component that is on the canvas within an SVG editor tool.
      And not being a DOM / SVG expert, I have got a bit stuck.

      The flow I am trying to achieve is this:
      - user drops a component onto the canvas (derived from a rectangle-type item from an SVG file)
      - user selects the component with the mouse
      - user clicks on 'Add Label' toolbar button
      - code is invoked to add the label to the component

      The
      label will consist of a simple line with a disc (filled circle) fixed
      to one end of the line, and the disc should sit underneath a text
      element representing the label text to be shown: a simple numeric
      sequence number from one upwards. The disc, text and end of the line
      underneath should be able to be dragged into another position by the
      user.

      The other end of the line should appear underneath the
      centre-point of the selected component, and this end should remain fixed
      at that position and never move.

      Think of 'call-out'
      lines/labels in the old 'Haynes' car maintenance manuals (or Bosch power
      tool technical sheets), and this is what I'm trying to achieve.
      The numbers shown on the discs map to a table showing the part number the label/call-out is attached to.

      I have mocked this up in Adobe Illustrator and it all seems to work ok.
      In
      the mock up, after setting the Z-order/layer positions as I want them, I
      grouped all the items, including the label elements and the main
      component itself.
      Then, to move the disc end of the line, I selected
      the 'Direct selection tool' in Illustrator, dragged over the disc and
      label text, and part of the line, but not the over the component.
      This worked and I could drag the disc end anywhere I wanted.
      One
      point that I
      noticed was that in Illustrator when moving the line near the centre of
      the component to which it refers to, the word 'anchor' was displayed,
      but I don't know if this is relevant, as I suspect this may not be
      relevant. I think the grouping of the items, combined with the use of
      the direct selection tool to select the disc end of the line, was the
      signifant factor in allowing the line/disc/label to be moved.

      Now
      I want to traverse the DOM document programmatically from Java (not
      javascript), identify the selected component, then wrap it in a
      '<g>' (group?) element, along with the line, the disc and the text
      label in the correct order, and then insert the final closing
      '</g>' node to mark the end of the grouping, to mimic the
      behaviour in the Illustrator mock up.

      If anyone can help with
      this, I would be more than grateful, as I have an approaching deadline a
      few days from now, which cannot be moved.

      See more details in the
      attached image, as it should help understand what I'm trying to do.

      Thanks a lot, and I just hope someone knowledgeable can answer before my deadline approaches :(


      [Non-text portions of this message have been removed]
    • krellksa100
      @Moderator: if you see this posted several times (due to various technical problems with posting an image, posting when not yet registered, waiting for first
      Message 2 of 6 , May 28, 2013
      • 0 Attachment
        @Moderator: if you see this posted several times (due to various technical problems with posting an image, posting when not yet registered, waiting for first post acceptance by moderator etc), please use this post.

        I have a specific requirement to add a label to an SVG component that is on the canvas within an SVG editor tool.
        And not being a DOM / SVG expert, I have got a bit stuck.

        The flow I am trying to achieve is this:
        - user drops a component onto the canvas (derived from a rectangle-type item from an SVG file)
        - user selects the component with the mouse
        - user clicks on 'Add Label' toolbar button
        - code is invoked to add the label to the component

        The label will consist of a simple line with a disc (filled circle) fixed to one end of the line, and the disc should sit underneath a text element representing the label text to be shown: a simple numeric sequence number from one upwards. The disc, text and end of the line underneath should be able to be dragged into another position by the user.

        The other end of the line should appear underneath the centre-point of the selected component, and this end should remain fixed at that position and never move.

        Think of 'call-out' lines/labels in the old 'Haynes' car maintenance manuals (or Bosch power tool technical sheets), and this is what I'm trying to achieve.
        The numbers shown on the discs map to a table showing the part number the label/call-out is attached to.

        I have mocked this up in Adobe Illustrator and it all seems to work ok.
        In the mock up, after setting the Z-order/layer positions as I want them, I grouped all the items, including the label elements and the main component itself.
        Then, to move the disc end of the line, I selected the 'Direct selection tool' in Illustrator, dragged over the disc and label text, and part of the line, but not the over the component.
        This worked and I could drag the disc end anywhere I wanted.
        One point that I noticed was that in Illustrator when moving the line near the centre of the component to which it refers to, the word 'anchor' was displayed, but I don't know if this is relevant, as I suspect this may not be relevant. I think the grouping of the items, combined with the use of the direct selection tool to select the disc end of the line, was the signifant factor in allowing the line/disc/label to be moved.

        Now I want to traverse the DOM document programmatically from Java (not javascript), identify the selected component, then wrap it in a '<g>' (group?) element, along with the line, the disc and the text label in the correct order, and then insert the final closing '</g>' node to mark the end of the grouping, to mimic the behaviour in the Illustrator mock up.

        If anyone can help with this, I would be more than grateful, as I have an approaching deadline a few days from now, which cannot be moved.

        See more details below, as it should help understand what I'm trying to do.

        Thanks a lot, and I just hope someone knowledgeable can answer before my deadline approaches :(


        Create label functionality:
        1. Select component
        2. Select Label tool
        3. Line is created behind component, anchored to component's centre
        4. Filled white circle is created in-front of line, anchored to line's end-point
        5. Text is created at circle's centre-point
        6. Text is set to a sequence value (A to Z)
        7. Component, line, circle and text are grouped

        Move label functionality:
        1. User drags label to new position:
        - use direct selection tool to move label (in the code)
        - line remains anchored to component's centre-point
        2. After drag complete, selection tool is re-selected

        Move component functionality:
        1. User moves component, and connected label follows, as it is grouped
      • David Dailey
        The SVG Primer at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html explains how to do that sort of thing in JavaScript. I would assume that Java
        Message 3 of 6 , May 29, 2013
        • 0 Attachment
          The SVG Primer at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
          explains how to do that sort of thing in JavaScript. I would assume that
          Java methods for manipulating SVG DOM would be similar.



          The Apache Batik project at http://xmlgraphics.apache.org/batik/ probably
          has information a bit more closely matched to your needs.



          Good luck

          David



          From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
          On Behalf Of krell Krellis
          Sent: Tuesday, May 28, 2013 12:56 PM
          To: svg-developers@yahoogroups.com
          Subject: [svg-developers] How to manipulate SVG DOM tree: locate items &
          insert nodes?





          I have a specific requirement to add a label to an SVG component that is on
          the canvas within an SVG editor tool.
          And not being a DOM / SVG expert, I have got a bit stuck.

          The flow I am trying to achieve is this:
          - user drops a component onto the canvas (derived from a rectangle-type item
          from an SVG file)
          - user selects the component with the mouse
          - user clicks on 'Add Label' toolbar button
          - code is invoked to add the label to the component

          The
          label will consist of a simple line with a disc (filled circle) fixed
          to one end of the line, and the disc should sit underneath a text
          element representing the label text to be shown: a simple numeric
          sequence number from one upwards. The disc, text and end of the line
          underneath should be able to be dragged into another position by the
          user.

          The other end of the line should appear underneath the
          centre-point of the selected component, and this end should remain fixed
          at that position and never move.

          Think of 'call-out'
          lines/labels in the old 'Haynes' car maintenance manuals (or Bosch power
          tool technical sheets), and this is what I'm trying to achieve.
          The numbers shown on the discs map to a table showing the part number the
          label/call-out is attached to.

          I have mocked this up in Adobe Illustrator and it all seems to work ok.
          In
          the mock up, after setting the Z-order/layer positions as I want them, I
          grouped all the items, including the label elements and the main
          component itself.
          Then, to move the disc end of the line, I selected
          the 'Direct selection tool' in Illustrator, dragged over the disc and
          label text, and part of the line, but not the over the component.
          This worked and I could drag the disc end anywhere I wanted.
          One
          point that I
          noticed was that in Illustrator when moving the line near the centre of
          the component to which it refers to, the word 'anchor' was displayed,
          but I don't know if this is relevant, as I suspect this may not be
          relevant. I think the grouping of the items, combined with the use of
          the direct selection tool to select the disc end of the line, was the
          signifant factor in allowing the line/disc/label to be moved.

          Now
          I want to traverse the DOM document programmatically from Java (not
          javascript), identify the selected component, then wrap it in a
          '<g>' (group?) element, along with the line, the disc and the text
          label in the correct order, and then insert the final closing
          '</g>' node to mark the end of the grouping, to mimic the
          behaviour in the Illustrator mock up.

          If anyone can help with
          this, I would be more than grateful, as I have an approaching deadline a
          few days from now, which cannot be moved.

          See more details in the
          attached image, as it should help understand what I'm trying to do.

          Thanks a lot, and I just hope someone knowledgeable can answer before my
          deadline approaches :(

          [Non-text portions of this message have been removed]





          [Non-text portions of this message have been removed]
        • Francis Hemsher
          If you create an svg ... To create the Z-order in svg is to use MyG.appendChild(element) where you can control the stacking of elements. The
          Message 4 of 6 , May 29, 2013
          • 0 Attachment
            If you create an svg <g id="MyG" /> ...

            To create the 'Z-order' in svg is to use MyG.appendChild(element) where you can control the stacking of elements. The last element is visually on top.
            You can also use the MyG.insertBefore(topElement,childTargetElement)to accomplish more sophisticated stacking.
            Hope this helps,
            Francis
          • krellksa100
            Thanks for your reply, it seems to be what I am after. What s the best way to create the MyG element and use it from the xml file? A code snippet would be
            Message 5 of 6 , Jun 10, 2013
            • 0 Attachment
              Thanks for your reply, it seems to be what I am after.

              What's the best way to create the MyG element and use it from the xml file? A code snippet would be useful as not familiar with this.

              Also, how does one close the MyG (</g>) ?

              And how would I create a path (line) within the g element? Sorry for all the questions :)

              Thanks a lot.

              --- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@...> wrote:
              >
              > If you create an svg <g id="MyG" /> ...
              >
              > To create the 'Z-order' in svg is to use MyG.appendChild(element) where you can control the stacking of elements. The last element is visually on top.
              > You can also use the MyG.insertBefore(topElement,childTargetElement)to accomplish more sophisticated stacking.
              > Hope this helps,
              > Francis
              >
            • krellksa100
              OK, thanks David.
              Message 6 of 6 , Jun 10, 2013
              • 0 Attachment
                OK, thanks David.

                --- In svg-developers@yahoogroups.com, "David Dailey" <ddailey@...> wrote:
                >
                > The SVG Primer at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
                > explains how to do that sort of thing in JavaScript. I would assume that
                > Java methods for manipulating SVG DOM would be similar.
                >
                >
                >
                > The Apache Batik project at http://xmlgraphics.apache.org/batik/ probably
                > has information a bit more closely matched to your needs.
                >
                >
                >
                > Good luck
                >
                > David
                >
                >
                >
                > From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
                > On Behalf Of krell Krellis
                > Sent: Tuesday, May 28, 2013 12:56 PM
                > To: svg-developers@yahoogroups.com
                > Subject: [svg-developers] How to manipulate SVG DOM tree: locate items &
                > insert nodes?
                >
                >
                >
                >
                >
                > I have a specific requirement to add a label to an SVG component that is on
                > the canvas within an SVG editor tool.
                > And not being a DOM / SVG expert, I have got a bit stuck.
                >
                > The flow I am trying to achieve is this:
                > - user drops a component onto the canvas (derived from a rectangle-type item
                > from an SVG file)
                > - user selects the component with the mouse
                > - user clicks on 'Add Label' toolbar button
                > - code is invoked to add the label to the component
                >
                > The
                > label will consist of a simple line with a disc (filled circle) fixed
                > to one end of the line, and the disc should sit underneath a text
                > element representing the label text to be shown: a simple numeric
                > sequence number from one upwards. The disc, text and end of the line
                > underneath should be able to be dragged into another position by the
                > user.
                >
                > The other end of the line should appear underneath the
                > centre-point of the selected component, and this end should remain fixed
                > at that position and never move.
                >
                > Think of 'call-out'
                > lines/labels in the old 'Haynes' car maintenance manuals (or Bosch power
                > tool technical sheets), and this is what I'm trying to achieve.
                > The numbers shown on the discs map to a table showing the part number the
                > label/call-out is attached to.
                >
                > I have mocked this up in Adobe Illustrator and it all seems to work ok.
                > In
                > the mock up, after setting the Z-order/layer positions as I want them, I
                > grouped all the items, including the label elements and the main
                > component itself.
                > Then, to move the disc end of the line, I selected
                > the 'Direct selection tool' in Illustrator, dragged over the disc and
                > label text, and part of the line, but not the over the component.
                > This worked and I could drag the disc end anywhere I wanted.
                > One
                > point that I
                > noticed was that in Illustrator when moving the line near the centre of
                > the component to which it refers to, the word 'anchor' was displayed,
                > but I don't know if this is relevant, as I suspect this may not be
                > relevant. I think the grouping of the items, combined with the use of
                > the direct selection tool to select the disc end of the line, was the
                > signifant factor in allowing the line/disc/label to be moved.
                >
                > Now
                > I want to traverse the DOM document programmatically from Java (not
                > javascript), identify the selected component, then wrap it in a
                > '<g>' (group?) element, along with the line, the disc and the text
                > label in the correct order, and then insert the final closing
                > '</g>' node to mark the end of the grouping, to mimic the
                > behaviour in the Illustrator mock up.
                >
                > If anyone can help with
                > this, I would be more than grateful, as I have an approaching deadline a
                > few days from now, which cannot be moved.
                >
                > See more details in the
                > attached image, as it should help understand what I'm trying to do.
                >
                > Thanks a lot, and I just hope someone knowledgeable can answer before my
                > deadline approaches :(
                >
                > [Non-text portions of this message have been removed]
                >
                >
                >
                >
                >
                > [Non-text portions of this message have been removed]
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.