Birdeye RaVis Modification: Adding zoom on MouseWheel

26. January 2009 13:14

Using the BirdEyeZoom tool is cool, however I hate having to click buttons so I modified the BirdEyeZoom component this morning to add functionality for zooming on an external mousewheel event.  I also noticed that when the scale of the graph is at the minimum or maximum, any further reduction or increase in scale causes the graph to fall off the bottom of the component.  I have added a couple checks to handle this case as well.

To add this functionality, I modified the updateVScale() method in the org.un.cava.birdeye.ravis.components.ui.controls.vgraph.controls.birdEyeZoom component to read:



/* update the scale of the VGraph, thus creating a BirdEye zoom effect */       
            public function updateVScale(event:MouseEvent=null):void {
                if(bzoom == null) {
                    return;
                }
               
                if(_vgraph == null) {
                    LogUtil.warn(_LOG, "BirdEyeZoom NOT changed, no valid vgraph!");
                    return;
                }
                // Handle the update for mousewheel events outside the component
                if(event != null)
                {
                    if(event.delta != 0)
                    {   
                       
                        // this handles the case where the user tries to zoom out beyond the minimum value
                            if(bzoom.value == bzoom.minimum)
                        {
                            if(event.delta > 0)
                            {
                                bzoom.value = bzoom.value+(event.delta*0.01);
                                _vgraph.scale = bzoom.value;
                            }
                        }
                        // this handles the case where the user tries to zoom in beyond the maximum value
                            else if(bzoom.value == bzoom.maximum)
                        {
                            if(event.delta < 0)
                            {
                                bzoom.value = bzoom.value+(event.delta*0.01);
                                _vgraph.scale = bzoom.value;
                            }
                        }
                        else
                        {
                            bzoom.value = bzoom.value+(event.delta*0.01);
                            _vgraph.scale = bzoom.value;
                        }
                    }
                }
                // Handle the update for the zoom buttons
                else
                {
                    // this handles the case where the user tries to zoom out beyond the minimum value
                            if(bzoom.value <= bzoom.minimum)
                    {   
                        bzoom.value = bzoom.minimum;
                        return;                   
                    }
                    else
                    {
                        _vgraph.scale = bzoom.value;
                    }
                    // this handles the case where the user tries to zoom in beyond the maximum value
                            if(bzoom.value >= bzoom.maximum)
                    {
                        bzoom.value = bzoom.maximum;
                        return;
                    }
                    else
                    {
                        _vgraph.scale = bzoom.value;
                    }
                }
               
            }

 


To implement, just add an event listener to listen for the MouseEvent.MOUSE_WHEEL where your component is used and then in the event handler, pass the event to the component.  In my example, I did something like this:

// This is called on my initialize event or whenever you want
// (creationComplete/applicationComplete work well too)

private function initApp():void   {
       this.addEventListener(MouseEvent.MOUSE_WHEEL, wheelhandler);
  }
private function wheelhandler(event:MouseEvent):void   {
      beZoom.updateVScale(event);
  }

...

<ns2:BirdEyeZoom id="beZoom" left="10" vgraph="{vGraph}"> </ns2:BirdEyeZoom>

Hope this helps.

Currently rated 4.5 by 2 people

  • Currently 4.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comments


Log in