0 Replies Latest reply on May 17, 2011 10:11 AM by Ace_Frehley

    How to create viewport/dragging for canvas

    Ace_Frehley

      Hello. I have drag/drop implemented for a canvas, whereby shapes can be dragged onto the canvas, and then the shapes in turn can also be dragged around on the canvas itself after they have been dropped. The shapes can then be connected via lines on the canvas in a flowchart-type context... What I would like to be able to do now is drag the canvas itself over (aka - with a "grabbing hand") after the user runs out of room on the canvas, so that they can drag/drop more shapes onto "open canvas space" (after the visible canvas starts to run out of real estate). The visible canvas space would be contained within a static window (viewport), and the dragging canvas would reside underneath this viewport.

       

      So far, in my research, I believe I need a mask of some sort to be the viewport "window" on top of the canvas. One big problem is that since the shapes themselves are draggable on the canvas, it is difficult to control the mouse events in such a way that I can drag the shapes around at certain times, and then drag the entire canvas background around at a different time when the user runs out of space.. Has anybody done anything like this, or know of an example online? Is the solution to the shape/canvas mouse event detection problem solved by adding/removing events during the drag operations of the opposing component (i.e - when I drag the shape, disable the canvas drag - when I drop the shape, enable the canvas drag... something like that??)

       

      Thanks in advance for any advice/examples on implementing masks and/or distinguishing/enabling the drag (mouse) events between the shapes and the canvas.