Detect "whitespace" click on JSVGCanvas?

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Detect "whitespace" click on JSVGCanvas?

Ted.Clement
I have a JSVGCanvas (with a DOM representaion) of an imported SVG file.
This file basically contains a plain white grid with several rectangles in
it.
I need to detect if the user has clicked in a "whitespace" area (ie. not in
a rectangle "Element").

I have a Event listener on each rectangle, so I can detect a "click" within
the rectangle itself.
Attempts to put an Event  listener on the "whole document" like this have
failed:

     Element elt = theDocument.getDocumentElement();
     EventTarget t = (EventTarget)elt;
     t.addEventListener("click",     new WhiteSpaceClickAction(),
false);

I can detect ALL mouse events on the JSVGCanvas itself using Mouse
Listeners,
 (ie. MouseListener, MouseMotionListener)  but this still doesn't help,
since I can't tell if the
X, Y coordinates are "in" a rectangle or not.

Is there a "standard" way to do this?
Is there an API call to query if a coordinate is within an Element?

Thanks for any help.
Ted


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Detect "whitespace" click on JSVGCanvas?

Andres Toussaint
In this case, you should add a "Glasspane" object as your background
and attach a mouseclick listener to it.

Since your "Rectangle Elements" will be on top of this "Background
glasspane (fill:none, mouseevents:fill)" the mouse event only applies
to the topmost visible element.

So your Background will react only if the click is over it, and it will
not react if the click is over any other element. I use this approach
to provide a "De-select" option.

Andres.


On May 11, 2005, at 9:57 AM, [hidden email] wrote:

> I have a JSVGCanvas (with a DOM representaion) of an imported SVG file.
> This file basically contains a plain white grid with several
> rectangles in
> it.
> I need to detect if the user has clicked in a "whitespace" area (ie.
> not in
> a rectangle "Element").
>
> I have a Event listener on each rectangle, so I can detect a "click"
> within
> the rectangle itself.
> Attempts to put an Event  listener on the "whole document" like this
> have
> failed:
>
>      Element elt = theDocument.getDocumentElement();
>      EventTarget t = (EventTarget)elt;
>      t.addEventListener("click",     new WhiteSpaceClickAction(),
> false);
>
> I can detect ALL mouse events on the JSVGCanvas itself using Mouse
> Listeners,
>  (ie. MouseListener, MouseMotionListener)  but this still doesn't help,
> since I can't tell if the
> X, Y coordinates are "in" a rectangle or not.
>
> Is there a "standard" way to do this?
> Is there an API call to query if a coordinate is within an Element?
>
> Thanks for any help.
> Ted
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail:
> [hidden email]
>
>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Detect "whitespace" click on JSVGCanvas?

Ted.Clement
Andres,

I have tried a dozen ways to implement a "glasspane" over the last few
days.
All attempts have been unsuccessful.
I don't know what is wrong. I don't know what else to try.

In my svg file, I added this rectangle:

    <g id="top">
      <g transform="translate(50,30)" style="fill:none; mouseevents:fill">
        <rect x="0" y="0" width="400" style="stroke:none;" height="400" />
    </g>

In my (Java) code, I register eventlisteners with the this "top" element:

   public void registerRootListener() {
     Element elt = theDocument.getElementById("top");

     if (elt!= null){
         EventTarget t = (EventTarget)elt;
         try{
             // Add mouse event listeners
             t.addEventListener("click",      new OnRootClickAction(),
false);
             t.addEventListener("mouseenter", new
OnRootMouseEnterAction(),false);
         }
         catch (Exception e){
               System.out.println("Exception in registerRootListener()");
              e.printStackTrace();
         }
     }else{
       System.out.println("registerRootListener FAILED");
     }
 }

 public class OnRootClickAction implements EventListener {
     public void handleEvent(Event evt) {
       System.out.println("ROOT Click ACTION.");
 }
 }

     public class OnRootMouseEnterAction implements EventListener {
       public void handleEvent(Event evt) {
         System.out.println("ROOT MouseEnter ACTION.");
   }
  }




                                                                           
             Andres Toussaint                                              
             <andres@onemileup                                            
             .com>                                                      To
                                       [hidden email]  
             05/12/2005 11:17                                           cc
             AM                                                            
                                                                   Subject
                                       Re: Detect "whitespace" click on    
             Please respond to         JSVGCanvas?                        
             batik-users@xmlgr                                            
             aphics.apache.org                                            
                                                                           
                                                                           
                                                                           
                                                                           




In this case, you should add a "Glasspane" object as your background
and attach a mouseclick listener to it.

Since your "Rectangle Elements" will be on top of this "Background
glasspane (fill:none, mouseevents:fill)" the mouse event only applies
to the topmost visible element.

So your Background will react only if the click is over it, and it will
not react if the click is over any other element. I use this approach
to provide a "De-select" option.

Andres.


On May 11, 2005, at 9:57 AM, [hidden email] wrote:

> I have a JSVGCanvas (with a DOM representaion) of an imported SVG file.
> This file basically contains a plain white grid with several
> rectangles in
> it.
> I need to detect if the user has clicked in a "whitespace" area (ie.
> not in
> a rectangle "Element").
>
> I have a Event listener on each rectangle, so I can detect a "click"
> within
> the rectangle itself.
> Attempts to put an Event  listener on the "whole document" like this
> have
> failed:
>
>      Element elt = theDocument.getDocumentElement();
>      EventTarget t = (EventTarget)elt;
>      t.addEventListener("click",     new WhiteSpaceClickAction(),
> false);
>
> I can detect ALL mouse events on the JSVGCanvas itself using Mouse
> Listeners,
>  (ie. MouseListener, MouseMotionListener)  but this still doesn't help,
> since I can't tell if the
> X, Y coordinates are "in" a rectangle or not.
>
> Is there a "standard" way to do this?
> Is there an API call to query if a coordinate is within an Element?
>
> Thanks for any help.
> Ted
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail:
> [hidden email]
>
>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]




---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Detect "whitespace" click on JSVGCanvas?

Andres Toussaint
Hi Ted:

I have created a simple tutorial depicting this kind of situation, and
i have posted it in the batik wiki:
http://wiki.apache.org/xmlgraphics-batik/BackgroundGlassPaneTutorial

Hope this small tutorial is of some help for you.

Andres.


On May 17, 2005, at 1:39 PM, [hidden email] wrote:

> Andres,
>
> I have tried a dozen ways to implement a "glasspane" over the last few
> days.
> All attempts have been unsuccessful.
> I don't know what is wrong. I don't know what else to try.
>
> In my svg file, I added this rectangle:
>
>     <g id="top">
>       <g transform="translate(50,30)" style="fill:none;
> mouseevents:fill">
>         <rect x="0" y="0" width="400" style="stroke:none;"
> height="400" />
>     </g>
>
> In my (Java) code, I register eventlisteners with the this "top"
> element:
>
>    public void registerRootListener() {
>      Element elt = theDocument.getElementById("top");
>
>      if (elt!= null){
>          EventTarget t = (EventTarget)elt;
>          try{
>              // Add mouse event listeners
>              t.addEventListener("click",      new OnRootClickAction(),
> false);
>              t.addEventListener("mouseenter", new
> OnRootMouseEnterAction(),false);
>          }
>          catch (Exception e){
>                System.out.println("Exception in
> registerRootListener()");
>               e.printStackTrace();
>          }
>      }else{
>        System.out.println("registerRootListener FAILED");
>      }
>  }
>
>  public class OnRootClickAction implements EventListener {
>      public void handleEvent(Event evt) {
>        System.out.println("ROOT Click ACTION.");
>  }
>  }
>
>      public class OnRootMouseEnterAction implements EventListener {
>        public void handleEvent(Event evt) {
>          System.out.println("ROOT MouseEnter ACTION.");
>    }
>   }
>
>
>
>
>
>              Andres Toussaint
>              <andres@onemileup
>              .com>                                                    
>  To
>                                        
> [hidden email]
>              05/12/2005 11:17                                          
>  cc
>              AM
>                                                                    
> Subject
>                                        Re: Detect "whitespace" click on
>              Please respond to         JSVGCanvas?
>              batik-users@xmlgr
>              aphics.apache.org
>
>
>
>
>
>
>
>
> In this case, you should add a "Glasspane" object as your background
> and attach a mouseclick listener to it.
>
> Since your "Rectangle Elements" will be on top of this "Background
> glasspane (fill:none, mouseevents:fill)" the mouse event only applies
> to the topmost visible element.
>
> So your Background will react only if the click is over it, and it will
> not react if the click is over any other element. I use this approach
> to provide a "De-select" option.
>
> Andres.
>
>
> On May 11, 2005, at 9:57 AM, [hidden email] wrote:
>
>> I have a JSVGCanvas (with a DOM representaion) of an imported SVG
>> file.
>> This file basically contains a plain white grid with several
>> rectangles in
>> it.
>> I need to detect if the user has clicked in a "whitespace" area (ie.
>> not in
>> a rectangle "Element").
>>
>> I have a Event listener on each rectangle, so I can detect a "click"
>> within
>> the rectangle itself.
>> Attempts to put an Event  listener on the "whole document" like this
>> have
>> failed:
>>
>>      Element elt = theDocument.getDocumentElement();
>>      EventTarget t = (EventTarget)elt;
>>      t.addEventListener("click",     new WhiteSpaceClickAction(),
>> false);
>>
>> I can detect ALL mouse events on the JSVGCanvas itself using Mouse
>> Listeners,
>>  (ie. MouseListener, MouseMotionListener)  but this still doesn't
>> help,
>> since I can't tell if the
>> X, Y coordinates are "in" a rectangle or not.
>>
>> Is there a "standard" way to do this?
>> Is there an API call to query if a coordinate is within an Element?
>>
>> Thanks for any help.
>> Ted
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail:
>> [hidden email]
>>
>>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail:
> [hidden email]
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail:
> [hidden email]
>
>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Detect "whitespace" click on JSVGCanvas?

Ted.Clement
Thanks Andres!

Looks like the main problem was incorrect  placement of the "glasspane"
rectangle within the canvas.

Executing the addGlassPane() method from the new tutorial and dumping the
resulting
SVG file showed me exactly what I was doing wrong.

A nice clear, concise additon to the batik wiki !

Thanks again,
Ted


                                                                           
             Andres Toussaint                                              
             <andres@onemileup                                            
             .com>                                                      To
                                       [hidden email]  
             05/18/2005 11:12                                           cc
             AM                                                            
                                                                   Subject
                                       Re: Detect "whitespace" click on    
             Please respond to         JSVGCanvas?                        
             batik-users@xmlgr                                            
             aphics.apache.org                                            
                                                                           
                                                                           
                                                                           
                                                                           




Hi Ted:

I have created a simple tutorial depicting this kind of situation, and
i have posted it in the batik wiki:
http://wiki.apache.org/xmlgraphics-batik/BackgroundGlassPaneTutorial

Hope this small tutorial is of some help for you.

Andres.


On May 17, 2005, at 1:39 PM, [hidden email] wrote:

> Andres,
>
> I have tried a dozen ways to implement a "glasspane" over the last few
> days.
> All attempts have been unsuccessful.
> I don't know what is wrong. I don't know what else to try.
>
> In my svg file, I added this rectangle:
>
>     <g id="top">
>       <g transform="translate(50,30)" style="fill:none;
> mouseevents:fill">
>         <rect x="0" y="0" width="400" style="stroke:none;"
> height="400" />
>     </g>
>
> In my (Java) code, I register eventlisteners with the this "top"
> element:
>
>    public void registerRootListener() {
>      Element elt = theDocument.getElementById("top");
>
>      if (elt!= null){
>          EventTarget t = (EventTarget)elt;
>          try{
>              // Add mouse event listeners
>              t.addEventListener("click",      new OnRootClickAction(),
> false);
>              t.addEventListener("mouseenter", new
> OnRootMouseEnterAction(),false);
>          }
>          catch (Exception e){
>                System.out.println("Exception in
> registerRootListener()");
>               e.printStackTrace();
>          }
>      }else{
>        System.out.println("registerRootListener FAILED");
>      }
>  }
>
>  public class OnRootClickAction implements EventListener {
>      public void handleEvent(Event evt) {
>        System.out.println("ROOT Click ACTION.");
>  }
>  }
>
>      public class OnRootMouseEnterAction implements EventListener {
>        public void handleEvent(Event evt) {
>          System.out.println("ROOT MouseEnter ACTION.");
>    }
>   }
>
>
>
>
>
>              Andres Toussaint
>              <andres@onemileup
>              .com>
>  To
>
> [hidden email]
>              05/12/2005 11:17
>  cc
>              AM
>
> Subject
>                                        Re: Detect "whitespace" click on
>              Please respond to         JSVGCanvas?
>              batik-users@xmlgr
>              aphics.apache.org
>
>
>
>
>
>
>
>
> In this case, you should add a "Glasspane" object as your background
> and attach a mouseclick listener to it.
>
> Since your "Rectangle Elements" will be on top of this "Background
> glasspane (fill:none, mouseevents:fill)" the mouse event only applies
> to the topmost visible element.
>
> So your Background will react only if the click is over it, and it will
> not react if the click is over any other element. I use this approach
> to provide a "De-select" option.
>
> Andres.
>
>
> On May 11, 2005, at 9:57 AM, [hidden email] wrote:
>
>> I have a JSVGCanvas (with a DOM representaion) of an imported SVG
>> file.
>> This file basically contains a plain white grid with several
>> rectangles in
>> it.
>> I need to detect if the user has clicked in a "whitespace" area (ie.
>> not in
>> a rectangle "Element").
>>
>> I have a Event listener on each rectangle, so I can detect a "click"
>> within
>> the rectangle itself.
>> Attempts to put an Event  listener on the "whole document" like this
>> have
>> failed:
>>
>>      Element elt = theDocument.getDocumentElement();
>>      EventTarget t = (EventTarget)elt;
>>      t.addEventListener("click",     new WhiteSpaceClickAction(),
>> false);
>>
>> I can detect ALL mouse events on the JSVGCanvas itself using Mouse
>> Listeners,
>>  (ie. MouseListener, MouseMotionListener)  but this still doesn't
>> help,
>> since I can't tell if the
>> X, Y coordinates are "in" a rectangle or not.
>>
>> Is there a "standard" way to do this?
>> Is there an API call to query if a coordinate is within an Element?
>>
>> Thanks for any help.
>> Ted
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail:
>> [hidden email]
>>
>>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail:
> [hidden email]
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail:
> [hidden email]
>
>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]




---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]