How to move figures when they are part of a connection

Question

I am working on a small graphical editor using the Draw2d library (without GEF). One requirement is, that you can move figures by dragging them with the mouse. This works fine as long as there is no (Polyline-) connection between the figures. When I added a connection, all is rendered correctly but it is impossible to move the figures.

Here is a code example that shows the problem:

public class Main {

    public static void main(String[] args) {
        Display d = new Display();
        final Shell shell = new Shell(d);
        shell.setSize(400, 400);
        shell.setText("Draw2d Test");
        LightweightSystem lws = new LightweightSystem(shell);
        Figure contents = new Figure();
        XYLayout contentsLayout = new XYLayout();
        contents.setLayoutManager(contentsLayout);

        // create figures
        Figure f1 = new TestFigure("Test 1");
        Figure f2 = new TestFigure("Test 2");

        MouseManager mm = new MouseManager();

        // register mouse listeners
        f1.addMouseMotionListener(mm);
        f1.addMouseListener(mm);
        f2.addMouseMotionListener(mm);
        f2.addMouseListener(mm);

        // set constraints to layout manager
        contentsLayout.setConstraint(f1, new Rectangle(10, 10, -1, -1));
        contentsLayout.setConstraint(f2, new Rectangle(200, 200, -1, -1));

        // add to layout manager
        contents.add(f1);
        contents.add(f2);

        // add connection
        // When uncommenting these lines, dragging works fine
        PolylineConnection c = new PolylineConnection();
        c.setSourceAnchor(new ChopboxAnchor(f1));
        c.setTargetAnchor(new ChopboxAnchor(f2));
        c.setConnectionRouter(new ManhattanConnectionRouter());
        contents.add(c);

        lws.setContents(contents);
        shell.open();
        while (!shell.isDisposed()) {
            while (!d.readAndDispatch()) {
                d.sleep();
            }
        }
    }
}

class MouseManager implements MouseMotionListener, MouseListener {
    Figure selection;
    private Point lastDragLocation;

    @Override
    public void mousePressed(MouseEvent me) {
        System.out.println("mouse pressed");
        selection = (Figure) me.getSource();
    }

    @Override
    public void mouseReleased(MouseEvent me) {
        System.out.println("mouse released");
        selection = null;
        lastDragLocation = null;
    }

    @Override
    public void mouseDragged(MouseEvent me) {
        if (lastDragLocation != null && selection != null) {
            int offsetX = me.getLocation().x - lastDragLocation.x;
            int offsetY = me.getLocation().y - lastDragLocation.y;
            int newX = selection.getLocation().x + offsetX;
            int newY = selection.getLocation().y + offsetY;
            System.out.println(String.format("NewX: %d, NewY: %d", newX, newY));
            selection.setBounds(selection.getBounds().getTranslated(offsetX,
                    offsetY));

        }
        lastDragLocation = me.getLocation();
    }

    // [removed empty implementations of the interface for this post]
}

class TestFigure extends RectangleFigure {
    public Color classColor;

    public TestFigure(String name) {
        ToolbarLayout layout = new ToolbarLayout();
        setLayoutManager(layout);
        setOpaque(true);

        classColor = new Color(null, 255, 255, 206);
        setBackgroundColor(classColor);

        Label lbl_name = new Label(name);
        add(lbl_name);
    }

    @Override
    protected void finalize() throws Throwable {
        classColor.dispose();
        super.finalize();
    }
}

Does anyone have an idea how to make dragging possible when there is a connection between the two figures (It is not neccessary to render the dragging of the connection)?

score 1 · Answer 1 · answered Jul 19 '12 at 09:08

Two problems:

In the mouseDragged function you are changing the Figure's bounds instead of changing the constraints of the figure in the parent container.
You are not revalidating the parent.

I made the following changes and it works:

public void mouseDragged(MouseEvent me) {
  if(lastDragLocation != null && selection != null) {
    int offsetX = me.getLocation().x - lastDragLocation.x;
    int offsetY = me.getLocation().y - lastDragLocation.y;
    int newX = selection.getLocation().x + offsetX;
    int newY = selection.getLocation().y + offsetY;
    System.out.println(String.format("NewX: %d, NewY: %d", newX, newY));
    // selection.setBounds(selection.getBounds().getTranslated(offsetX, offsetY)); <-- this does not work
    selection.getParent().getLayoutManager()
        .setConstraint(selection, selection.getBounds().getTranslated(offsetX, offsetY));
    selection.getParent().revalidate();

  }
  lastDragLocation = me.getLocation();
}

But I still think there is a problem with the implementation since if you move the mouse too fast somehow you can manage to get out of the figure and it stops moving. What I would do is listen to the mouse in the parent figure, capture when the mouse started moving on top of an inner figure (using the parents Figure.findFigureAt()) and then move the inner figure as the mouse moves.

How to move figures when they are part of a connection

1 Answers1