Re: Efficient way of "selecting" an element?

[Andres Toussaint]

You can do the following to retrieve the element that triggered the action:

<x-tad-bigger>Element trigger = (Element)evt.getTarget();

The SVGLocatable gives you access to matrix information about the specific Element. (to transform from screen coordinates to SVG coordinates)

You do not need to check for your elements unless you have "live" and "sleeping" elements in the same group that has the listener, if not, only when you are over an element within the group, the event will be triggered.

The Listener will listen for events within its scope (a listener in a G element will only listen for events that happen to its children) so if there is no object indicated as background, no event will be triggered.

Some case scenario, in case you want to capture DE-SELECT click also:

Sample SVG snippet (not well formed):

<svg ...>
<rect x=0 y=0 width=100% height=100% fill=red /> -- May be a background inert object
<g id=selectableItems onmouseover activated via DOM>
<rect id=background </x-tad-bigger><x-tad-bigger>x=0 y=0 width=100% height=100% fill=none pointer-events=fill />
<rect id=object1 ... />
<rect id=object2 ... />
<rect id=object2 ... />
</g>
</svg>

</x-tad-bigger><x-tad-bigger>public class OnClickAction implements EventListener {
public void handleEvent(Event evt) {
Element theActionEvent = (Element)evt.getTarget();


if (theActionEvent.getAttribute("id")="background") {

//The user clicked on the "background" object, perform
//Deselect options
} else {

// Convert the screen coordinates into SVG coordinate space
SVGLocatable thisNode = (SVGLocatable)evt.getTarget();

DOMMouseEvent elEvt = (DOMMouseEvent)evt;
int nowToX = elEvt.getClientX();
int nowToY = elEvt.getClientY();

// Convert Screen coordinates to Document Coordinates.
SVGOMPoint pt = new SVGOMPoint(nowToX, nowToY);
SVGMatrix mat = thisNode.getScreenCTM(); // elem -> screen
mat = mat.inverse(); // screen -> elem
initialDragPoint = (SVGOMPoint)pt.matrixTransform(mat);

//initialDragPoint has the mouseEvent coordinates in the SVG
//coordinate space.

// At this point you can do whatever you what with your selected
// Element, for instance, change its opacity, to denote the selection:
theActionEvent.setAttribute("opacity","0.5");
}
}


</x-tad-bigger>
regards,

Andres.



On Oct 24, 2005, at 2:23 PM, Bishop, Michael W. CONTR J9C880 wrote:

OK, well thanks to the two of you, I'm on the path to implementing this
functionality. I do use ALWAYS_DYNAMIC for my document since I'm
consistently adding and removing elements from it. I do have one
question about this tutorial at:

http://wiki.apache.org/xmlgraphics-batik/DragTutorial

How do I get which Element I'm clicking in? There's a commented area
that says "This is where you set your selected element, validate, etc."
but I don't know how to do that.

If I click on a JSVGCanvas, I need to know if I'm inside one of my
Elements. If I am, I can drag it, if I'm not (i.e. a blank piece of
JSVGCanvas), there's nothing to drag.

I think this is based on the SVGLocatable which is defined as
"thisNode", but how do I get from it to an Element? What happens if
there is no element where I click? Is there documentation I can read
about this? There is none in the JavaDoc for SVGLocatable, so
understanding precisely what that object is, is my stumbling block.

Michael Bishop

-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Monday, October 24, 2005 1:51 PM
To: batik-users@xmlgraphics.apache.org
Cc: batik-users@xmlgraphics.apache.org
Subject: RE: Efficient way of "selecting" an element?

Hi Michael,

"Bishop, Michael W. CONTR J9C880" <[EMAIL PROTECTED]> wrote on

10/24/2005 01:46:18 PM:

Just to be clear, I?m doing this in Java, not the SVG-supported

JavaScript.

Nonetheless, this drag tutorial seems to be precisely what I?m looking

for.

Does it require JavaScript (or anything else extra) to be present in

the
document?

All of the dynamic stuff is fully available in Java as well as in
JavaScript
(EcmaScript). If you don't have any obvious dynamic elements in your
document
then you need to inform Batik to treat your document as dynamic, using
JSVGComponent.setDocumentState(ALWAYS_DYNAMIC).

You will have to add your listeners using the DOM interfaces
(addEventListener) instead of using the event attributes
(on click etc).

From: Andres Toussaint [mailto:[EMAIL PROTECTED]
Sent: Monday, October 24, 2005 1:19 PM
To: batik-users@xmlgraphics.apache.org
Subject: Re: Efficient way of "selecting" an element?

SVG has the ability to dispatch events based on mouse actions, and the

event

holds the object that triggered the event (which is not necessarily

the
object

holding the listener, in case it is a group), for example:

<g onMouseClick="doEvent(evt)" >
<rect id="object 1" ...../>
<rect id="object 2" ...../>
<rect id="object 3" ...../>
<rect id="object 4" ...../>
</g>

the event will be activated and dispatched only when the click is

inside
any

of the rect objects, and the evt.target will tell you what is the

clicked object.

You may also see the dragTutorial in the batik wiki to see how to add
listeners in the code:
http://wiki.apache.org/xmlgraphics-batik/DragTutorial

regards,
Andres.

p.s. the same is true for all other mouse events.

On Oct 24, 2005, at 1:04 PM, Bishop, Michael W. CONTR J9C880 wrote:

I have a scenario where I?d like to click in the JSVGCanvas and

?select?
the

SVG element I?m clicking inside of. Short of iterating through the

document

and creating Java2D objects in which to check to see if my clicked

point
is

?inside? of, is there a way in Batik to see which elements a point

resides in?

Michael Bishop

---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]

---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]