Fw: Create a "glasspane" programmatically?

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

Fw: Create a "glasspane" programmatically?

Ted.Clement

Would a better approach to this problem be to create a big rectangle (ie. a
"glasspane") add it
 to the SVGDoc and register this element as an Event listener?

Are there any examples of how to create one of these programatically?

====================================================================================
> 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: Fw: Create a "glasspane" programmatically?

thomas.deweese
Hi Ted,

    IIRC my ApacheCON 2003 presentation had something on this:

http://people.apache.org/~deweese/ac2003/



[hidden email] wrote:

> Would a better approach to this problem be to create a big rectangle (ie. a
> "glasspane") add it
>  to the SVGDoc and register this element as an Event listener?
>
> Are there any examples of how to create one of these programatically?
>
> ====================================================================================
>
>>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: Fw: Create a "glasspane" programmatically?

Ted.Clement
Thomas,

This presentaion was good (thanks!) , but contained only the basics of
registering
event listeners on an Element.  The original problem remains.

I have been trying to solve this problem for several days now, with no
success.
I have tried to implement Andreas' "glasspane" solution with no luck.

Do you have any other suggestions ?  Any example code?
An example SVG file?

Here is the prototype svg file I am using.
Is there something semantically incorrect here?
(Element "top" is one attempt at a "glasspane"; I can't get any Events from
it.
 Element "TedsRectangle" receives all events correctly)

?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1;
color-rendering:auto; color-interpolation:auto; text-rendering:auto;
stroke:black; stroke-linecap:square; stroke-miterlimit:10;
shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none;
font-weight:normal; stroke-width:1; font-family:&apos;sansserif&apos;;
font-style:normal; stroke-linejoin:miter; font-size:12;
stroke-dashoffset:0; image-rendering:auto;"
xmlns="http://www.w3.org/2000/svg">
  <!--Generated by the Batik Graphics2D SVG Generator-->
  <defs id="genericDefs" />
  <g >
    <g id="floor-tiles">
      <g transform="translate(50,30)" style="fill:silver; font-size:11;
font-family:&apos;Arial&apos; stroke:silver;">
        <line x1="0" x2="0" y1="0" style="fill:none;" y2="820" />
        <line x1="36" x2="36" y1="0" style="fill:none;" y2="820" />
        <line x1="72" x2="72" y1="0" style="fill:none;" y2="820" />
        <line x1="108" x2="108" y1="0" style="fill:none;" y2="820" />
        <line x1="144" x2="144" y1="0" style="fill:none;" y2="820" />
        <line x1="180" x2="180" y1="0" style="fill:none;" y2="820" />
        <line x1="216" x2="216" y1="0" style="fill:none;" y2="820" />
        <line x1="252" x2="252" y1="0" style="fill:none;" y2="820" />
        <line x1="288" x2="288" y1="0" style="fill:none;" y2="820" />
        <line x1="324" x2="324" y1="0" style="fill:none;" y2="820" />
        <line x1="360" x2="360" y1="0" style="fill:none;" y2="820" />
        <line x1="396" x2="396" y1="0" style="fill:none;" y2="820" />
        <line x1="432" x2="432" y1="0" style="fill:none;" y2="820" />
        <line x1="468" x2="468" y1="0" style="fill:none;" y2="820" />
        <line x1="504" x2="504" y1="0" style="fill:none;" y2="820" />
        <line x1="540" x2="540" y1="0" style="fill:none;" y2="820" />
        <line x1="576" x2="576" y1="0" style="fill:none;" y2="820" />
        <line x1="612" x2="612" y1="0" style="fill:none;" y2="820" />
        <line x1="648" x2="648" y1="0" style="fill:none;" y2="820" />
        <line x1="684" x2="684" y1="0" style="fill:none;" y2="820" />
        <line x1="720" x2="720" y1="0" style="fill:none;" y2="820" />
        <line x1="756" x2="756" y1="0" style="fill:none;" y2="820" />
        <line x1="792" x2="792" y1="0" style="fill:none;" y2="820" />
        <line x1="828" x2="828" y1="0" style="fill:none;" y2="820" />
        <line x1="864" x2="864" y1="0" style="fill:none;" y2="820" />
        <line x1="900" x2="900" y1="0" style="fill:none;" y2="820" />
        <line x1="936" x2="936" y1="0" style="fill:none;" y2="820" />
        <line x1="972" x2="972" y1="0" style="fill:none;" y2="820" />
        <line x1="1008" x2="1008" y1="0" style="fill:none;" y2="820" />
        <line x1="1044" x2="1044" y1="0" style="fill:none;" y2="820" />
        <line x1="0" x2="1047" y1="0" style="fill:none;" y2="0" />
        <line x1="0" x2="1047" y1="36" style="fill:none;" y2="36" />
        <line x1="0" x2="1047" y1="72" style="fill:none;" y2="72" />
        <line x1="0" x2="1047" y1="108" style="fill:none;" y2="108" />
        <line x1="0" x2="1047" y1="144" style="fill:none;" y2="144" />
        <line x1="0" x2="1047" y1="180" style="fill:none;" y2="180" />
        <line x1="0" x2="1047" y1="216" style="fill:none;" y2="216" />
        <line x1="0" x2="1047" y1="252" style="fill:none;" y2="252" />
        <line x1="0" x2="1047" y1="288" style="fill:none;" y2="288" />
        <line x1="0" x2="1047" y1="324" style="fill:none;" y2="324" />
        <line x1="0" x2="1047" y1="360" style="fill:none;" y2="360" />
        <line x1="0" x2="1047" y1="396" style="fill:none;" y2="396" />
        <line x1="0" x2="1047" y1="432" style="fill:none;" y2="432" />
        <line x1="0" x2="1047" y1="468" style="fill:none;" y2="468" />
        <line x1="0" x2="1047" y1="504" style="fill:none;" y2="504" />
        <line x1="0" x2="1047" y1="540" style="fill:none;" y2="540" />
        <line x1="0" x2="1047" y1="576" style="fill:none;" y2="576" />
        <line x1="0" x2="1047" y1="612" style="fill:none;" y2="612" />
        <line x1="0" x2="1047" y1="648" style="fill:none;" y2="648" />
        <line x1="0" x2="1047" y1="684" style="fill:none;" y2="684" />
        <line x1="0" x2="1047" y1="720" style="fill:none;" y2="720" />
        <line x1="0" x2="1047" y1="756" style="fill:none;" y2="756" />
        <line x1="0" x2="1047" y1="792" style="fill:none;" y2="792" />
      </g>
    </g>
    <g transform="translate(50,30)" style="fill:white; font-size:11;
font-family:&apos;Arial&apos;; stroke:white;">
      <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438
L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125
820.9979858398438 L1047.0059814453125 0 Z" style="fill:none;" />
      <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438
L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125
820.9979858398438 L1047.0059814453125 0 Z" style="stroke:none;" />
    </g>
    <g>
      <g transform="translate(50,30)" style="fill:silver; font-size:11;
font-family:&apos;Arial&apos;; stroke:silver;">
        <path d="M1047.0059814453125 0 L1047.0059814453125
820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10
810.9979858398438 L-10 830.9979858398438 L1057.0059814453125
830.9979858398438 L1057.0059814453125 810.9979858398438 L1057.0059814453125
-10 Z" style="stroke:none;" />
        <path d="M1047.0059814453125 0 L1047.0059814453125
820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10
810.9979858398438 L-10 830.9979858398438 L1057.0059814453125
830.9979858398438 L1057.0059814453125 810.9979858398438 L1057.0059814453125
-10 Z" style="fill:none; stroke:black;" />
      </g>
    </g>
    <g id="TedsRectangle">
      <g transform="translate(50,30)" style="font-size:11;
fill:rgb(230,230,245); font-family:&apos;Arial&apos;;
stroke:rgb(230,230,245); stroke-width:1.5;">
        <rect x="216" y="72" width="44.2494" style="stroke:none;"
height="63" />
        <rect x="216" y="72" width="44.2494" style="fill:none;
stroke:rgb(0,0,205);" height="63" />
        <text x="225.12469482421875" y="83" style="font-size:9; fill:black;
stroke:none;" xml:space="preserve">R4/Z1
        </text>
        <text x="222.12469482421875" y="101" style="font-size:8;
fill:black; stroke:none;" xml:space="preserve">W1:17.00
        </text>
        <text x="222.12469482421875" y="109" style="font-size:8;
fill:black; stroke:none;" xml:space="preserve">W2:23.00
        </text>
      </g>
    </g>
  <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>
  </g>
 </g>
</svg>


                                                                           
             Thomas DeWeese                                                
             <Thomas.DeWeese@K                                            
             odak.com>                                                  To
                                       [hidden email]  
             05/11/2005 10:05                                           cc
             PM                                                            
                                                                   Subject
                                       Re: Fw: Create a "glasspane"        
             Please respond to         programmatically?                  
             batik-users@xmlgr                                            
             aphics.apache.org                                            
                                                                           
                                                                           
                                                                           
                                                                           




Hi Ted,

    IIRC my ApacheCON 2003 presentation had something on this:

http://people.apache.org/~deweese/ac2003/



[hidden email] wrote:
> Would a better approach to this problem be to create a big rectangle (ie.
a
> "glasspane") add it
>  to the SVGDoc and register this element as an Event listener?
>
> Are there any examples of how to create one of these programatically?
>
>
====================================================================================

>
>>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: Fw: Create a "glasspane" programmatically?

thomas.deweese
Hi Ted,

    I think the problem is simple it's not 'mouseevents="fill"'
it's 'pointer-events="fill"'.  Read the SVG spec on events:

http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty

    As for an example it's fairly large and complex but it does
use a glasspane (actually a background event catcher but that
is what you want anyways):
        xml-batik/samples/solitaire/towers.svg


[hidden email] wrote:

> Thomas,
>
> This presentaion was good (thanks!) , but contained only the basics of
> registering
> event listeners on an Element.  The original problem remains.
>
> I have been trying to solve this problem for several days now, with no
> success.
> I have tried to implement Andreas' "glasspane" solution with no luck.
>
> Do you have any other suggestions ?  Any example code?
> An example SVG file?
>
> Here is the prototype svg file I am using.
> Is there something semantically incorrect here?
> (Element "top" is one attempt at a "glasspane"; I can't get any Events from
> it.
>  Element "TedsRectangle" receives all events correctly)
>
> ?xml version="1.0"?>
> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
> 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
> <svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1;
> color-rendering:auto; color-interpolation:auto; text-rendering:auto;
> stroke:black; stroke-linecap:square; stroke-miterlimit:10;
> shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none;
> font-weight:normal; stroke-width:1; font-family:&apos;sansserif&apos;;
> font-style:normal; stroke-linejoin:miter; font-size:12;
> stroke-dashoffset:0; image-rendering:auto;"
> xmlns="http://www.w3.org/2000/svg">
>   <!--Generated by the Batik Graphics2D SVG Generator-->
>   <defs id="genericDefs" />
>   <g >
>     <g id="floor-tiles">
>       <g transform="translate(50,30)" style="fill:silver; font-size:11;
> font-family:&apos;Arial&apos; stroke:silver;">
>         <line x1="0" x2="0" y1="0" style="fill:none;" y2="820" />
>         <line x1="36" x2="36" y1="0" style="fill:none;" y2="820" />
>         <line x1="72" x2="72" y1="0" style="fill:none;" y2="820" />
>         <line x1="108" x2="108" y1="0" style="fill:none;" y2="820" />
>         <line x1="144" x2="144" y1="0" style="fill:none;" y2="820" />
>         <line x1="180" x2="180" y1="0" style="fill:none;" y2="820" />
>         <line x1="216" x2="216" y1="0" style="fill:none;" y2="820" />
>         <line x1="252" x2="252" y1="0" style="fill:none;" y2="820" />
>         <line x1="288" x2="288" y1="0" style="fill:none;" y2="820" />
>         <line x1="324" x2="324" y1="0" style="fill:none;" y2="820" />
>         <line x1="360" x2="360" y1="0" style="fill:none;" y2="820" />
>         <line x1="396" x2="396" y1="0" style="fill:none;" y2="820" />
>         <line x1="432" x2="432" y1="0" style="fill:none;" y2="820" />
>         <line x1="468" x2="468" y1="0" style="fill:none;" y2="820" />
>         <line x1="504" x2="504" y1="0" style="fill:none;" y2="820" />
>         <line x1="540" x2="540" y1="0" style="fill:none;" y2="820" />
>         <line x1="576" x2="576" y1="0" style="fill:none;" y2="820" />
>         <line x1="612" x2="612" y1="0" style="fill:none;" y2="820" />
>         <line x1="648" x2="648" y1="0" style="fill:none;" y2="820" />
>         <line x1="684" x2="684" y1="0" style="fill:none;" y2="820" />
>         <line x1="720" x2="720" y1="0" style="fill:none;" y2="820" />
>         <line x1="756" x2="756" y1="0" style="fill:none;" y2="820" />
>         <line x1="792" x2="792" y1="0" style="fill:none;" y2="820" />
>         <line x1="828" x2="828" y1="0" style="fill:none;" y2="820" />
>         <line x1="864" x2="864" y1="0" style="fill:none;" y2="820" />
>         <line x1="900" x2="900" y1="0" style="fill:none;" y2="820" />
>         <line x1="936" x2="936" y1="0" style="fill:none;" y2="820" />
>         <line x1="972" x2="972" y1="0" style="fill:none;" y2="820" />
>         <line x1="1008" x2="1008" y1="0" style="fill:none;" y2="820" />
>         <line x1="1044" x2="1044" y1="0" style="fill:none;" y2="820" />
>         <line x1="0" x2="1047" y1="0" style="fill:none;" y2="0" />
>         <line x1="0" x2="1047" y1="36" style="fill:none;" y2="36" />
>         <line x1="0" x2="1047" y1="72" style="fill:none;" y2="72" />
>         <line x1="0" x2="1047" y1="108" style="fill:none;" y2="108" />
>         <line x1="0" x2="1047" y1="144" style="fill:none;" y2="144" />
>         <line x1="0" x2="1047" y1="180" style="fill:none;" y2="180" />
>         <line x1="0" x2="1047" y1="216" style="fill:none;" y2="216" />
>         <line x1="0" x2="1047" y1="252" style="fill:none;" y2="252" />
>         <line x1="0" x2="1047" y1="288" style="fill:none;" y2="288" />
>         <line x1="0" x2="1047" y1="324" style="fill:none;" y2="324" />
>         <line x1="0" x2="1047" y1="360" style="fill:none;" y2="360" />
>         <line x1="0" x2="1047" y1="396" style="fill:none;" y2="396" />
>         <line x1="0" x2="1047" y1="432" style="fill:none;" y2="432" />
>         <line x1="0" x2="1047" y1="468" style="fill:none;" y2="468" />
>         <line x1="0" x2="1047" y1="504" style="fill:none;" y2="504" />
>         <line x1="0" x2="1047" y1="540" style="fill:none;" y2="540" />
>         <line x1="0" x2="1047" y1="576" style="fill:none;" y2="576" />
>         <line x1="0" x2="1047" y1="612" style="fill:none;" y2="612" />
>         <line x1="0" x2="1047" y1="648" style="fill:none;" y2="648" />
>         <line x1="0" x2="1047" y1="684" style="fill:none;" y2="684" />
>         <line x1="0" x2="1047" y1="720" style="fill:none;" y2="720" />
>         <line x1="0" x2="1047" y1="756" style="fill:none;" y2="756" />
>         <line x1="0" x2="1047" y1="792" style="fill:none;" y2="792" />
>       </g>
>     </g>
>     <g transform="translate(50,30)" style="fill:white; font-size:11;
> font-family:&apos;Arial&apos;; stroke:white;">
>       <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438
> L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125
> 820.9979858398438 L1047.0059814453125 0 Z" style="fill:none;" />
>       <path d="M1047.0059814453125 0 L1047.0059814453125 820.9979858398438
> L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125
> 820.9979858398438 L1047.0059814453125 0 Z" style="stroke:none;" />
>     </g>
>     <g>
>       <g transform="translate(50,30)" style="fill:silver; font-size:11;
> font-family:&apos;Arial&apos;; stroke:silver;">
>         <path d="M1047.0059814453125 0 L1047.0059814453125
> 820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10
> 810.9979858398438 L-10 830.9979858398438 L1057.0059814453125
> 830.9979858398438 L1057.0059814453125 810.9979858398438 L1057.0059814453125
> -10 Z" style="stroke:none;" />
>         <path d="M1047.0059814453125 0 L1047.0059814453125
> 820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10
> 810.9979858398438 L-10 830.9979858398438 L1057.0059814453125
> 830.9979858398438 L1057.0059814453125 810.9979858398438 L1057.0059814453125
> -10 Z" style="fill:none; stroke:black;" />
>       </g>
>     </g>
>     <g id="TedsRectangle">
>       <g transform="translate(50,30)" style="font-size:11;
> fill:rgb(230,230,245); font-family:&apos;Arial&apos;;
> stroke:rgb(230,230,245); stroke-width:1.5;">
>         <rect x="216" y="72" width="44.2494" style="stroke:none;"
> height="63" />
>         <rect x="216" y="72" width="44.2494" style="fill:none;
> stroke:rgb(0,0,205);" height="63" />
>         <text x="225.12469482421875" y="83" style="font-size:9; fill:black;
> stroke:none;" xml:space="preserve">R4/Z1
>         </text>
>         <text x="222.12469482421875" y="101" style="font-size:8;
> fill:black; stroke:none;" xml:space="preserve">W1:17.00
>         </text>
>         <text x="222.12469482421875" y="109" style="font-size:8;
> fill:black; stroke:none;" xml:space="preserve">W2:23.00
>         </text>
>       </g>
>     </g>
>   <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>
>   </g>
>  </g>
> </svg>
>
>
>                                                                            
>              Thomas DeWeese                                                
>              <Thomas.DeWeese@K                                            
>              odak.com>                                                  To
>                                        [hidden email]  
>              05/11/2005 10:05                                           cc
>              PM                                                            
>                                                                    Subject
>                                        Re: Fw: Create a "glasspane"        
>              Please respond to         programmatically?                  
>              batik-users@xmlgr                                            
>              aphics.apache.org                                            
>                                                                            
>                                                                            
>                                                                            
>                                                                            
>
>
>
>
> Hi Ted,
>
>     IIRC my ApacheCON 2003 presentation had something on this:
>
> http://people.apache.org/~deweese/ac2003/
>
>
>
> [hidden email] wrote:
>
>>Would a better approach to this problem be to create a big rectangle (ie.
>
> a
>
>>"glasspane") add it
>> to the SVGDoc and register this element as an Event listener?
>>
>>Are there any examples of how to create one of these programatically?
>>
>>
>
> ====================================================================================
>
>
>>>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: Fw: Create a "glasspane" programmatically?

Ted.Clement
Thanks Thomas!

This was one part of the problem.
The other was incorrect  placement of the "glasspane"  rectangle within the
canvas.

Executing Andres' 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 by Andres Toussaint!

Thanks again,
Ted




                                                                           
             Thomas DeWeese                                                
             <Thomas.DeWeese@K                                            
             odak.com>                                                  To
                                       [hidden email]  
             05/17/2005 05:54                                           cc
             PM                                                            
                                                                   Subject
                                       Re: Fw: Create a "glasspane"        
             Please respond to         programmatically?                  
             batik-users@xmlgr                                            
             aphics.apache.org                                            
                                                                           
                                                                           
                                                                           
                                                                           




Hi Ted,

    I think the problem is simple it's not 'mouseevents="fill"'
it's 'pointer-events="fill"'.  Read the SVG spec on events:

http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty

    As for an example it's fairly large and complex but it does
use a glasspane (actually a background event catcher but that
is what you want anyways):
             xml-batik/samples/solitaire/towers.svg


[hidden email] wrote:

> Thomas,
>
> This presentaion was good (thanks!) , but contained only the basics of
> registering
> event listeners on an Element.  The original problem remains.
>
> I have been trying to solve this problem for several days now, with no
> success.
> I have tried to implement Andreas' "glasspane" solution with no luck.
>
> Do you have any other suggestions ?  Any example code?
> An example SVG file?
>
> Here is the prototype svg file I am using.
> Is there something semantically incorrect here?
> (Element "top" is one attempt at a "glasspane"; I can't get any Events
from

> it.
>  Element "TedsRectangle" receives all events correctly)
>
> ?xml version="1.0"?>
> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
> 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
> <svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1;
> color-rendering:auto; color-interpolation:auto; text-rendering:auto;
> stroke:black; stroke-linecap:square; stroke-miterlimit:10;
> shape-rendering:auto; stroke-opacity:1; fill:black;
stroke-dasharray:none;

> font-weight:normal; stroke-width:1; font-family:&apos;sansserif&apos;;
> font-style:normal; stroke-linejoin:miter; font-size:12;
> stroke-dashoffset:0; image-rendering:auto;"
> xmlns="http://www.w3.org/2000/svg">
>   <!--Generated by the Batik Graphics2D SVG Generator-->
>   <defs id="genericDefs" />
>   <g >
>     <g id="floor-tiles">
>       <g transform="translate(50,30)" style="fill:silver; font-size:11;
> font-family:&apos;Arial&apos; stroke:silver;">
>         <line x1="0" x2="0" y1="0" style="fill:none;" y2="820" />
>         <line x1="36" x2="36" y1="0" style="fill:none;" y2="820" />
>         <line x1="72" x2="72" y1="0" style="fill:none;" y2="820" />
>         <line x1="108" x2="108" y1="0" style="fill:none;" y2="820" />
>         <line x1="144" x2="144" y1="0" style="fill:none;" y2="820" />
>         <line x1="180" x2="180" y1="0" style="fill:none;" y2="820" />
>         <line x1="216" x2="216" y1="0" style="fill:none;" y2="820" />
>         <line x1="252" x2="252" y1="0" style="fill:none;" y2="820" />
>         <line x1="288" x2="288" y1="0" style="fill:none;" y2="820" />
>         <line x1="324" x2="324" y1="0" style="fill:none;" y2="820" />
>         <line x1="360" x2="360" y1="0" style="fill:none;" y2="820" />
>         <line x1="396" x2="396" y1="0" style="fill:none;" y2="820" />
>         <line x1="432" x2="432" y1="0" style="fill:none;" y2="820" />
>         <line x1="468" x2="468" y1="0" style="fill:none;" y2="820" />
>         <line x1="504" x2="504" y1="0" style="fill:none;" y2="820" />
>         <line x1="540" x2="540" y1="0" style="fill:none;" y2="820" />
>         <line x1="576" x2="576" y1="0" style="fill:none;" y2="820" />
>         <line x1="612" x2="612" y1="0" style="fill:none;" y2="820" />
>         <line x1="648" x2="648" y1="0" style="fill:none;" y2="820" />
>         <line x1="684" x2="684" y1="0" style="fill:none;" y2="820" />
>         <line x1="720" x2="720" y1="0" style="fill:none;" y2="820" />
>         <line x1="756" x2="756" y1="0" style="fill:none;" y2="820" />
>         <line x1="792" x2="792" y1="0" style="fill:none;" y2="820" />
>         <line x1="828" x2="828" y1="0" style="fill:none;" y2="820" />
>         <line x1="864" x2="864" y1="0" style="fill:none;" y2="820" />
>         <line x1="900" x2="900" y1="0" style="fill:none;" y2="820" />
>         <line x1="936" x2="936" y1="0" style="fill:none;" y2="820" />
>         <line x1="972" x2="972" y1="0" style="fill:none;" y2="820" />
>         <line x1="1008" x2="1008" y1="0" style="fill:none;" y2="820" />
>         <line x1="1044" x2="1044" y1="0" style="fill:none;" y2="820" />
>         <line x1="0" x2="1047" y1="0" style="fill:none;" y2="0" />
>         <line x1="0" x2="1047" y1="36" style="fill:none;" y2="36" />
>         <line x1="0" x2="1047" y1="72" style="fill:none;" y2="72" />
>         <line x1="0" x2="1047" y1="108" style="fill:none;" y2="108" />
>         <line x1="0" x2="1047" y1="144" style="fill:none;" y2="144" />
>         <line x1="0" x2="1047" y1="180" style="fill:none;" y2="180" />
>         <line x1="0" x2="1047" y1="216" style="fill:none;" y2="216" />
>         <line x1="0" x2="1047" y1="252" style="fill:none;" y2="252" />
>         <line x1="0" x2="1047" y1="288" style="fill:none;" y2="288" />
>         <line x1="0" x2="1047" y1="324" style="fill:none;" y2="324" />
>         <line x1="0" x2="1047" y1="360" style="fill:none;" y2="360" />
>         <line x1="0" x2="1047" y1="396" style="fill:none;" y2="396" />
>         <line x1="0" x2="1047" y1="432" style="fill:none;" y2="432" />
>         <line x1="0" x2="1047" y1="468" style="fill:none;" y2="468" />
>         <line x1="0" x2="1047" y1="504" style="fill:none;" y2="504" />
>         <line x1="0" x2="1047" y1="540" style="fill:none;" y2="540" />
>         <line x1="0" x2="1047" y1="576" style="fill:none;" y2="576" />
>         <line x1="0" x2="1047" y1="612" style="fill:none;" y2="612" />
>         <line x1="0" x2="1047" y1="648" style="fill:none;" y2="648" />
>         <line x1="0" x2="1047" y1="684" style="fill:none;" y2="684" />
>         <line x1="0" x2="1047" y1="720" style="fill:none;" y2="720" />
>         <line x1="0" x2="1047" y1="756" style="fill:none;" y2="756" />
>         <line x1="0" x2="1047" y1="792" style="fill:none;" y2="792" />
>       </g>
>     </g>
>     <g transform="translate(50,30)" style="fill:white; font-size:11;
> font-family:&apos;Arial&apos;; stroke:white;">
>       <path d="M1047.0059814453125 0 L1047.0059814453125
820.9979858398438
> L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125
> 820.9979858398438 L1047.0059814453125 0 Z" style="fill:none;" />
>       <path d="M1047.0059814453125 0 L1047.0059814453125
820.9979858398438

> L0 820.9979858398438 L0 820.9979858398438 L1047.0059814453125
> 820.9979858398438 L1047.0059814453125 0 Z" style="stroke:none;" />
>     </g>
>     <g>
>       <g transform="translate(50,30)" style="fill:silver; font-size:11;
> font-family:&apos;Arial&apos;; stroke:silver;">
>         <path d="M1047.0059814453125 0 L1047.0059814453125
> 820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10
> 810.9979858398438 L-10 830.9979858398438 L1057.0059814453125
> 830.9979858398438 L1057.0059814453125 810.9979858398438
L1057.0059814453125
> -10 Z" style="stroke:none;" />
>         <path d="M1047.0059814453125 0 L1047.0059814453125
> 820.9979858398438 L0 820.9979858398438 L0 0 ZM-10 -10 L-10
> 810.9979858398438 L-10 830.9979858398438 L1057.0059814453125
> 830.9979858398438 L1057.0059814453125 810.9979858398438
L1057.0059814453125

> -10 Z" style="fill:none; stroke:black;" />
>       </g>
>     </g>
>     <g id="TedsRectangle">
>       <g transform="translate(50,30)" style="font-size:11;
> fill:rgb(230,230,245); font-family:&apos;Arial&apos;;
> stroke:rgb(230,230,245); stroke-width:1.5;">
>         <rect x="216" y="72" width="44.2494" style="stroke:none;"
> height="63" />
>         <rect x="216" y="72" width="44.2494" style="fill:none;
> stroke:rgb(0,0,205);" height="63" />
>         <text x="225.12469482421875" y="83" style="font-size:9;
fill:black;

> stroke:none;" xml:space="preserve">R4/Z1
>         </text>
>         <text x="222.12469482421875" y="101" style="font-size:8;
> fill:black; stroke:none;" xml:space="preserve">W1:17.00
>         </text>
>         <text x="222.12469482421875" y="109" style="font-size:8;
> fill:black; stroke:none;" xml:space="preserve">W2:23.00
>         </text>
>       </g>
>     </g>
>   <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>
>   </g>
>  </g>
> </svg>
>
>
>

>              Thomas DeWeese

>              <Thomas.DeWeese@K

>              odak.com>
To
>                                        [hidden email]

>              05/11/2005 10:05
cc
>              PM

>
Subject
>                                        Re: Fw: Create a "glasspane"

>              Please respond to         programmatically?

>              batik-users@xmlgr

>              aphics.apache.org

>

>

>

>

>
>
>
>
> Hi Ted,
>
>     IIRC my ApacheCON 2003 presentation had something on this:
>
> http://people.apache.org/~deweese/ac2003/
>
>
>
> [hidden email] wrote:
>
>>Would a better approach to this problem be to create a big rectangle (ie.
>
> a
>
>>"glasspane") add it
>> to the SVGDoc and register this element as an Event listener?
>>
>>Are there any examples of how to create one of these programatically?
>>
>>
>
>
====================================================================================

>
>
>>>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]