12 Replies Latest reply on Aug 7, 2009 10:40 AM by paul.williams

    Detect Overlapping Children

    flCoder74

      I don't even know where to start with this. I need a Canvas container where children can be added programatically and draged and dropped inside of the Canvas container. The problem I'm going to have is that items can be dropped on top of other items. The children will be of varying heights, and the y values will be wherever the user drops it. What I need to figure out is how to detect if any of the children are overlapping, and then divide the available space between the 2, 3 or however many items are overlapping.

       

      Any example code or suggestions on how to do this, would be greatly appreciated, as I'm at a complete loss on how to do this.

        • 1. Re: Detect Overlapping Children
          flCoder74 Level 1

          I need some help with this. I was playing with the mouseOver eventListener, but it doesn't seem to consistently track 1-2 pixels of movement, so there could be overlap, but the event doesn't fire. Any ideas???

          • 2. Re: Detect Overlapping Children
            Gregory Lafrance Level 6

            I'm not sure what you mean by "divide the available space between the 2, 3 or however many items are overlapping".

             

            Are you saying you want to ensure they are not overlapping? I assume they cannot extend outside their container?

             

            What if the user drags an object and if they were to drop it the position would put part of the object overlapping or outside the container and there is not enough room to adjust the objects? Return the object where it was?

            • 3. Re: Detect Overlapping Children
              Pedro Varela

              May this could works for you. Flex physics.

              http://dougmccune.com/360Flex_ATL/PhysicsContainer/

              • 4. Re: Detect Overlapping Children
                flCoder74 Level 1

                The canvas container has a fixed width, say 200 pixels. User drops child 1 into the container, width=200 pixels. User drops a second child in that partially overlaps child 1, width for both items=100. User drops a third child that overlaps 1 and 2, width for all items is roughly 66.6 pixels. User drops a 4 child that doesn't overlap anything, it's width would be 200. As children are added to the container and dragged and dropped within the container, I need to arrange the children left to right and adjust their width to make the best use of the available space, while retaining their vertical y value and height.

                 

                What I'm struggling with is how to effeciently determine that child 1 and 2, for example, are overlapping and need their widths adjusted. This has to be very efficient as their could be 50 or more children in the canvas container.

                 

                If the child is dropped outside of the container, it should go back to where it was originally.

                • 5. Re: Detect Overlapping Children
                  flCoder74 Level 1

                  See the attached JPG image for an example of one of the more complicated layouts I need to figure out. In the image, the child labeled "Test 5" is the oddity. You end up with gaps. Normally, child 5 would only have 1 overlapping item, and would be set to 50% width, when it really needs to be about 66.7%. The question is, how to do this most efficiently????

                  • 6. Re: Detect Overlapping Children
                    flCoder74 Level 1

                    Any thoughts, ideas, suggestions? I'm truly stumped!!

                    • 7. Re: Detect Overlapping Children
                      Pedro Varela Level 1

                      nop bro.. sorry I thought the link gave you could help, but after reading your replies seems it won't.

                      • 8. Re: Detect Overlapping Children
                        Ciro Durán

                        Why not use an HBox?

                        • 9. Re: Detect Overlapping Children
                          flCoder74 Level 1

                          The main issue with an HBox is that I can't set the y value of children inside of it. If I only needed to layout children from left to right with all children along the top of the container, an HBox would probably work, but I have to lay out the children left to right and top to bottom.

                          • 10. Re: Detect Overlapping Children
                            paul.williams Level 4

                            If I understand your problem correctly you'll only ever have to check a

                            new object against each of the objects already in the container. For up

                            to 50 objects you'll only have up to 50 intersection tests. So why not

                            just use a loop? Whether two rectangles overlap can be determined with

                            Rectangle.intersects().

                             

                            Have you tried this and found it to be too slow?

                            • 11. Re: Detect Overlapping Children
                              flCoder74 Level 1

                              Rectangle.intersects() doesn't appear to work with controls, but I have considered hitTestObject, and it will help me identify those items who are not overlapping, but I haven't figured out how it would help me actually determine the width and x position of the children that overlapping. For example, in the picture below, looping through the container children using hitTestObject for child "Test 1" would give me a count of 4, but it only needs to have its width set to the container width divided by 3. hitTestObject for child "Test 5" would give me a count of 2 or 50% of the width, when it needs to have a width of 66.67%.childLayout.jpg

                              • 12. Re: Detect Overlapping Children
                                paul.williams Level 4

                                You can easily populate a Rectangle object with the position and size of

                                a display object. The intersection method will give you the area of

                                overlap.

                                 

                                As for actually redistributing the objects within the container, I'd

                                need a full list of layout rules and a bit of context about the

                                application you are building. Otherwise its just guesswork.