2 Replies Latest reply on Jun 10, 2009 10:42 PM by maestro91

    Really strange behavior with updateDisplayList drawing extended Image


      It's two days i'm stuck over this srtange problem: i'm writing a simple class called UserImage that extends Image and implements IFocusManagerComponent.

      My aim is having an image draggable and resizable, dragging the edges, into a canvas.

      Seen that there can be multiple instance of UserImage into the same canvas, i want the currently used image, the last clicked, to be bordered.

      Now everything works until I

      1. select the image, clicking, and the border shows correctly

      2. drag the image, and the image keeps the correctly the border

      3. resize the image, now the border resizes correctly BUT gets both XY offsets equal to the last drag (2nd point)

      Please, there is someone there that could help me out? From my low experience with Flex, it's two days I'm googling for nothing


      Here is the IMO relevant code:


      the code in generator.as, relative to the canvas where the drag and resize occours


      // Called when the user moves the drag proxy onto the drop target.
              private function dragEnterHandler(event:DragEvent):void {
                  trace("DragEnter initiator: " + UserImage(event.dragInitiator).x + " " + UserImage(event.dragInitiator).y);
                  // Get the drop target component from the event object.
                  var dropTarget:Canvas=event.currentTarget as Canvas;
                  // Accept the drop.
              // Called if the target accepts the dragged object and the user
              // releases the mouse button while over the Canvas container.
              private function dragDropHandler(event:DragEvent):void {
                  // Compensate for the mouse pointer's location in the title bar.
                  var newX:uint = event.currentTarget.mouseX - UserImage(event.dragInitiator).offsetX;       
                  var newY:uint = event.currentTarget.mouseY - UserImage(event.dragInitiator).offsetY;
                  if (event.dragSource.hasFormat("drag")) {
                      trace("Drop initiator: " + UserImage(event.dragInitiator).x + " " + UserImage(event.dragInitiator).y);
                      trace("Drop newxy: " + newX + " " + newY);
                  } else if (event.dragSource.hasFormat("resize")) {
                      trace("Drop initiator: " + UserImage(event.dragInitiator).x + " " + UserImage(event.dragInitiator).y);                   
                      event.dragInitiator.width = UserImage(event.dragInitiator).width + newX - UserImage(event.dragInitiator).x;
                      event.dragInitiator.height = UserImage(event.dragInitiator).height + newY - UserImage(event.dragInitiator).y;


      this is UserImage.as, the class of the draggabel end resizable image


      package com.lutek.components
          import flash.display.Shape;
          import flash.events.*;
          import mx.controls.Image;
          import mx.core.DragSource;
          import mx.events.*;
          import mx.managers.CursorManager;
          import mx.managers.DragManager;
          import mx.managers.IFocusManagerComponent;
          public class UserImage extends Image implements IFocusManagerComponent
              //descriptive field
              public var description:String = new String;


              // Embed the cursor symbols
              private var dragCursorSymbol:Class;
              private var resizeCursorSymbol:Class;  
              //needed to calculate offset between point clicked and image position
              public var offsetX:uint;
              public var offsetY:uint;       
              //Image state
              public var isClicked: Boolean = false;


              //shape shown when clicked
              private var square:Shape = new Shape();
              // Define a variable to hold the cursor ID.
              private var cursorID:Number = 0;
              //tells if the image is visible
              //public var isOnStage:Boolean = false;


              override protected function updateDisplayList(w:Number, h:Number):void {
                  super.updateDisplayList(w, h);
                  square.graphics.lineStyle(2, 0x00ff00);
                  square.graphics.drawRect(this.x, this.y, this.width, this.height);
              public function UserImage()
                  addEventListener(flash.events.FocusEvent.FOCUS_IN, FocusInImage)
                  addEventListener(flash.events.FocusEvent.FOCUS_OUT, FocusOutImage);
                  addEventListener(flash.events.MouseEvent.MOUSE_MOVE, MoveImage);
                  addEventListener(flash.events.MouseEvent.MOUSE_OVER, OverImage);
                  addEventListener(flash.events.MouseEvent.MOUSE_OUT, OutImage);
                  addEventListener(flash.events.MouseEvent.CLICK, ClickImage);
                  addEventListener(flash.events.MouseEvent.DOUBLE_CLICK, DblClickImage);
                  addEventListener("creationComplete", completeImage);
                  addEventListener("updateComplete", resizeImage);
                  square.graphics.lineStyle(2, 0x00ff00);
                  square.graphics.drawRect(this.x, this.y, this.width, this.height);
              private function resizeImage(event:Event):void {
              private function completeImage(event:Event):void {
              private function FocusInImage(event:FocusEvent):void {
                  // show a square to the display list.
              private function FocusOutImage(event:FocusEvent):void {
                  // hide a square to the display list.
                  this.isClicked = false;
              private function OverImage(event:MouseEvent):void {
              private function OutImage(event:MouseEvent):void {


              private function ClickImage(event:MouseEvent):void {
                  this.isClicked = true;
              private function DblClickImage(event:MouseEvent):void {
              private function MoveImage(event:MouseEvent):void {
                  var action:String = "";
                  if (this.isClicked) {
                      if (this.width - event.localX <= 10 && this.height - event.localY <= 10) {
                          // Set resize cursor
                          if (cursorID == 0) {
                              cursorID = CursorManager.setCursor(resizeCursorSymbol);
                          } else {
                              cursorID = CursorManager.setCursor(resizeCursorSymbol);
                          action = "resize";
                  else {
                          if (cursorID == 0) {
                              cursorID = CursorManager.setCursor(dragCursorSymbol);
                          } else {
                              cursorID = CursorManager.setCursor(dragCursorSymbol);
                          action = "drag";                   
                  // Save offsets to object
                  this.offsetX = event.localX;
                  this.offsetY = event.localY;
                  // Get the drag initiator component from the event object.
                  var dragInitiator:UserImage= event.target as UserImage;
                  // Create a DragSource object.
                  var ds:DragSource = new DragSource();


                  // Add the data to the object.
                  ds.addData(dragInitiator, action);
                  // Call the DragManager doDrag() method to start the drag.
                  DragManager.doDrag(dragInitiator, ds, event);