@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
------------------------------------
-----
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/
