6 Replies Latest reply on Jul 12, 2007 2:48 AM by JabbyPandaUA

    container scaling bug - HELP

    miragevideo Level 1
      I have built an app that has a zoom control. The zomm factor sets the width of a Canvas within a Canvas within a VBox in the appliaction. When the width gets large, somewhere greater than 10000 pixels problems occur. All containers have maxWidth set to 500000. The error only appears if the inner most Canvas has a x position value set to any value. The problem is seen as the inner Canvas not rendering correctly. When scrolled, the rendering appears correctly for certain scroll positions, for example near the center of the scroll.

      here is the MXML within the app: (this is a small part of a much larger app, so this is why this is complicated. I have simplified it down just to the offending areas. The button is jsut for some content within the container.) See a sample HERE

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" horizontalScrollPolicy="off" borderThickness="4">
      <mx:VBox id="holder" height="100%" width="100%" verticalScrollPolicy = "off" horizontalScrollPolicy="off" maxWidth="500000" >

      <mx:Canvas id="middleContainer" height="100%" verticalScrollPolicy = "off" horizontalScrollPolicy="off" width="100%" maxWidth="500000">
      <mx:Canvas id="gridSub" height="500" width="500" creationComplete="setProps()" x="10" maxWidth="500000">
      <mx:Button x="10" y="174" label="Button" width="122"/>
      </mx:Canvas>
      </mx:Canvas>

      <!-- this contains the zoom control and the scroll bar if needed -->
      <mx:ApplicationControlBar id="controlArea" height="30" width="100%" >
      <mx:ComboBox id="zoomBox" change="updateZoom(event)" selectedIndex="1" />
      <mx:HScrollBar id="bar" width="100%" minScrollPosition="0" maxScrollPosition="10" scroll="myScroll(event);" />
      </mx:ApplicationControlBar>

      </mx:VBox>

      The assocaited script is as follows:
      <mx:Script>
      <![CDATA[
      import mx.controls.VScrollBar;
      import mx.controls.scrollClasses.ScrollBar;
      import mx.events.ItemClickEvent;
      import mx.rpc.events.ResultEvent;
      import mx.events.ListEvent;
      import mx.events.ScrollEvent;

      protected var rangeStart:Date = new Date();
      protected var rangeEnd:Date;
      protected var _zoomState:int = 1;
      protected static var scaleFactor:Array = [1.0/3.0, 1.0, 4.0, 12.0, 52.0];
      protected var pixelsPerDay:Number;
      protected var _leftOffset:int = 8;
      public static const millisecondsPerDay:Number = 60 * 60 * 24 * 1000;
      protected var windowWidth:int;
      protected var dayDiff:int;

      private function updateZoom(event:ListEvent):void{
      // save new zoomState
      zoomState = event.currentTarget.selectedIndex;
      updateScale();
      }

      private function setProps():void{
      // all containers can now be updated
      windowWidth = width;
      // called once at astart up
      zoomBox.dataProvider = [".333x","1x","4x", "12x","52x"];
      zoomBox.selectedIndex = 1;
      zoomState = 1;

      rangeEnd = new Date(rangeStart.fullYear+1, rangeStart.month, 1);
      dayDiff = getDifferenceInDays(rangeEnd, rangeStart);

      middleContainer.width = pixelsPerDay *dayDiff ;
      gridSub.setStyle("backgroundColor", "0xffff00");
      middleContainer.setStyle("backgroundColor", "0xff0000");
      updateScale();
      }


      private function updateScale():void{

      // called with each change of scale
      var newWidth:Number = (pixelsPerDay * dayDiff );
      gridSub.width = newWidth;
      middleContainer.width = newWidth;
      holder.width = (windowWidth - 2*getStyle("borderThickness"));
      bar.setScrollProperties (50,0, newWidth - (windowWidth - 2*getStyle("borderThickness")) ,100);
      controlArea.width = windowWidth - 2*getStyle("borderThickness") - 50;

      trace("zoomState= " + zoomState + " new width = " + newWidth + " windowWidth= " + windowWidth);
      }

      private function myScroll(event:ScrollEvent):void{
      middleContainer.x = -event.currentTarget.scrollPosition;
      }

      private function set zoomState(val:int):void{
      _zoomState = val;
      zoomBox.selectedIndex = _zoomState;
      // we make and assumption here that the default width for each unit of measure is 200 pixels
      var defaultUnit:int = 500;
      switch (_zoomState){
      case 0:pixelsPerDay = defaultUnit/(365.0*3) ; break; // 3 years 200/(365*3)
      case 1:pixelsPerDay = defaultUnit/365.0; break; // 1 year ->200 pixels = 1 year or ppd = 200/365
      case 2:pixelsPerDay = defaultUnit/90.0; break; // quarter -> 200 pixels = 1 qtr or ppd = 200/90
      case 3:pixelsPerDay = defaultUnit/30.0; break; // month ppd = 200/30
      case 4:pixelsPerDay = defaultUnit/7.0; break; // weeks ppd = 200/7
      }
      }

      private function get zoomState():int {
      return _zoomState;
      }

      public function getDifferenceInDays(d1:Date, d2:Date):Number {
      return (d1.time - d2.time)/millisecondsPerDay;
      }
      ]]>
      </mx:Script>
      </mx:Application>[