Numbering the Panels in a canvas according to its position from left to right - actionscript-3

i am having a canvas which contains panels that are created dynamicaly.That panels are draggable.So that an user can drag any panel and keep it anywhere in the canvas.
My requirement is when we click a button ,we have to change the panel numbers according to its position,that is from left to right.
How to find out where the panel is present in canvas and number them in ascending order according to its position.

One way to do it would be to add the panels to an Array as they are created. Then, when the button is clicked, you can do a sort on the array by x property:
panelArray.sortOn("x", Array.Numeric);
Once the array has been sorted, you can loop over it and adjust the panel numbers based on their position in the array.

Related

Obtaining drag rectangle in isValidDropTarget

In mxgraph,a cell must be dragged onto another cell (its parent), but the location should be restricted. In particular, I want to avoid that cells dragged into the parent overlap each other.
I have overriden isValidDropTarget() and wrote my own version.
Here I want to check for the droptarget, if the area that is to be occupied by the cell to be dropped is free/not occupied by some other cell.
It is possible to find the coordinates and height/width of the cells in the parent, but I need to have to coordinates of the cell to be included. Specifically, I want to have the coordinates of the dragging rectangle
In isValidDropTarget() function you should have access to event from which you can get x,y poistion, and convert it to position on diagram, there is even helper for that:
convertPoint():
Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.
var pt = mxUtils.convertPoint(graph.container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));

jquery-ui sortable - programmatically set item being dragged

I have a list of items I want to make sortable. I would like to make that list scrollable, but at the same time I want the handle to pop out to the side of the list.
When clicking on an list item, I can have the pop out show outside the list (at this point, I know which li they have selected), and when they mousedown on a button in the popout, I create the sortable.
Can I create the sortable with the current li as the item being dragged?
The core issue here that I'm trying to work around is that I can make the pop out the handle IF it is a descendant of the item. But if I make the list scrollable, it will clip the handle so I can't pop it out to the right.
IF the pop out is not a descendant of the li, I can position it exactly where I want (to the right of the selected li) but now it cannot be used as the handle for the sortable (since it is not a descendant).
I am wondering if I can programatically create the sortable with the selected li as the item being dragged???

Panel to be autopositioned inside a canvas in Flex

I am developing a flex screen, in which i have a canvas, above to that there will be a button, by clicking that button we can create panels dynamically.My problem is if a panel was manually dragged and kept in the position where new panel to be created then new panel have to be created somewhere else that means not above any other panels.
How to achieve this..Pls give me any solution.Thanks
my first idea is that you keep array of created panels. while creating new panel, you should check in this list if any panel colides with the one you created (get x and y position and width, height and check if it kolides or not)
tou can also create new component based on canvas and override its addChild method.

as3: Making an animation

I am playing with animation in AS3 and flex4, and I've come into a problem. My application is a game board (like a chess board), where each field is a border container added to some position.
Also I am adding a child element (shape), to this container on mouse click. What I want to achieve is to be able to move shapes smoothly from one field to another. But it appears that the shape goes behind the neighbor field this way http://screencast.com/t/iZ3DCdobs.
I believe this happens because shape is a child of specific border container, and to make it visible over every other container, I would need to use layers somehow....
I would be happy if anybody could suggest a solution
Yes you're right on that. You should add the movable objects to a different layer.
As there are no typical layers in AS, you could try to drop the fields in one sprite and any other objects to a different an than place them on each other, so that when you will move a object it won't go behind other objects.
If you place both sprites in the same position you will still have accurate x,y positions between movable objects and fields.
You have two options:
First one is to have different layers for your DisplayObjects: as an example, the bottom layer would hold all the boards, and the upper layer would hold all the pieces.
Second option is to manipulate the index of the objects with swapChildren(), swapChildrenAt(), and setChildIndex(). So to bring a MovieClip to the topmost front, you would do MovieClip(parent).setChildIndex(this, 0);
If the situation is that always the shape object gets hidden behind the next ( right side ) grid container, the I suggest you create your grid in reverse.
Suppose you are creating a chess grid. that is a 8x8 grid. Normally you would create your grid using 2 for loops, looping from 0 to 8 with say the x and y points starting at 0,0 for the first grid and going on till the end. What I suggest you to do is to create from 8,8 to 0,0.
Display objects in flash are stacked on top of each other based on their child index.
For example: If you create two objects. Rectangle and Circle as follows
var rect:Rectangle = new Rectangle();
this.addChild(rect);
var circ:Circle = new Circle();
this.addChild(circ);
The circle will always be on top of the rectangle in this scenario because the circle was added after the rectangle to the display list.
So if you reverse the order of creation of your grid, the right grid cell will be added to the display list first and so the grid cells to the left will always be on top of the right ones. Hence, the problem that you are facing will not occur.

Flex 3 custom components positioning - popups

I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.