magnetic effect to attach window dialog or frame to another

Question

I have to windows (JFrame and non-modal JDialog) and I want to attach the JDialog to the JFrame, so that when I move the JFrame the JDialog is also moved. The synchronous movement itself is NOT the problem. I realized it via ComponentListener.componentMoved(.).

But the attachment should not be fixed. The user should have the possibility to detach the JDialog by moving it away from JFrame. Only when JDialog is placed directly to the JFrame border it should be attached.

To help the user place the JDialog exactly next to the JFrame (attach it) I want to implement a "magnetic effect": If the JDialog is moved nearer than 10px to the JFrames border the JDialog should automatically be places exactly next to the JFrame. Detecting this situation in ComponentListener.componentMoved(.) is also not the problem, but setting the new JDialog location:

When I set the new location by JDialog.setLocation(.) first the JDialog is placed correctly. But when I finish the dialog dragging (release the mouse button) the JDialog is placed back at the prior location (10px away from JFrame).

I think this is because at the end of the drag, "the system" also calls setLocation(.). Any ideas how I can prevent this behavior? E.g. remove any following mouse movement or mouse released events from event queue?

Answer 1

I was interested i this question and decided to make my own little program that will create an main frame/dock and other dockable containers. These containers will follow the main frame in order to remain in their positions.

So although answered I'd like to share my example.

As for why the OPs code was not working perfectly I think it was due to the fact componentMoved would refire on each move thus something went wrong during the movings of dockables.

Here is a small example right now you can add dockables to North, East, South and/or West of main frame. The way the dockables keep in their location is managed by layouts like - Sticky, Magnetic and Follow Layout.

Sticky Layout moves with main frame, whereas Follow calls dockables to move into main frames position and Magnetic does as the name assumes attracts all dockables within a certain distance it should be noted though each dockable i.e east is only attracted to the main dock if its within the given distance from its specified final/docked point (eastly top of main frame) on the main frame.

It uses a ComponentAdapter/Listener and Swing Timer with Component#setLocation(int x,int y) to achieve the outcome.

The below screen shot is of 4 dockables (north, west, east and south) the center screen is the main frame. The Docker class has a getDockToolbar which allows us the ability to add a toolbar which has prebuilt dock and un-dock buttons.

Here is the code (the below shows Magnetic layout):

import java.awt.BorderLayout;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.Point;
import java.awt.Window;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.ComponentAdapter;
import java.awt.event.ComponentEvent;
import java.util.HashMap;
import java.util.Map;
import javax.swing.AbstractAction;
import javax.swing.JButton;
import javax.swing.JDialog;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.Timer;

public class MagneticFrameAndDialog {

    public MagneticFrameAndDialog() {
        createAndShowGUI();

    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new MagneticFrameAndDialog();
            }
        });
    }

    private void createAndShowGUI() {
        JFrame frame = new JFrame("JFrame (The Docks)");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        Docker docker = new Docker();
        docker.registerDock(frame);
        docker.setLayout(Docker.MAGNETIC_LAYOUT);
        //docker.setMagneticFieldSize(250);//default is 150
        docker.setComponentMovedReactTime(50);//default is 100

        JDialog d1 = createAndShowDialog(300, 300);
        d1.setTitle("East Dockable");
        JDialog d2 = createAndShowDialog(300, 100);
        d2.setTitle("South Dockable");
        JDialog d3 = createAndShowDialog(100, 300);
        d3.setTitle("West Dockable");
        JDialog d4 = createAndShowDialog(300, 100);
        d4.setTitle("North Dockable");

        docker.registerDockee(d1, Docker.EAST_DOCKED);
        docker.registerDockee(d2, Docker.SOUTH_DOCKED);
        docker.registerDockee(d3, Docker.WEST_DOCKED);
        docker.registerDockee(d4, Docker.NORTH_DOCKED);

        frame.add(docker.getDockToolbar(), BorderLayout.SOUTH);

        frame.pack();
        frame.setVisible(true);
    }

    private JDialog createAndShowDialog(final int w, final int h) {
        JDialog dialog = new JDialog() {
            @Override
            public Dimension getPreferredSize() {
                return new Dimension(w, h);
            }
        };
        dialog.setTitle("Dockable Dialog");
        dialog.setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE);
        dialog.pack();
        dialog.setVisible(true);
        return dialog;
    }
}

class Docker {

    public static final String NORTH_DOCKED = "dock north", SOUTH_DOCKED = "dock south", WEST_DOCKED = " dock west", EAST_DOCKED = "dock east";
    public static final String FOLLOW_LAYOUT = "layout follow", STICKY_LAYOUT = "layout sticky", MAGNETIC_LAYOUT = "layout magnetic";
    private HashMap<Component, String> dockees = new HashMap<>();
    private Timer dockeeMoveTimer;
    private ComponentAdapter caDock, caDockee;
    private Component dock;
    private String layout = STICKY_LAYOUT;
    private int MAGNETIC_FIELD_SIZE = 150, movedReactTime = 100;

    public Docker() {
        initTimers();
        initComponentAdapters();
    }

    public void setLayout(String layout) {
        this.layout = layout;
    }

    void setComponentMovedReactTime(int milis) {
        movedReactTime = milis;
    }

    private void initComponentAdapters() {
        caDockee = new ComponentAdapter() {
            @Override
            public void componentMoved(ComponentEvent ce) {
                super.componentMoved(ce);
                if (layout.equals(MAGNETIC_LAYOUT)) {
                    createDockeeMovedTimer();
                } else {
                    iterateDockables();
                }
            }

            private void createDockeeMovedTimer() {
                if (dockeeMoveTimer.isRunning()) {
                    dockeeMoveTimer.restart();
                } else {
                    dockeeMoveTimer.start();
                }
            }
        };
        caDock = new ComponentAdapter() {
            @Override
            public void componentMoved(ComponentEvent ce) {
                super.componentMoved(ce);
                iterateDockables();
            }

            @Override
            public void componentResized(ComponentEvent ce) {
                super.componentResized(ce);
                iterateDockables();
            }
        };
    }

    private void initTimers() {
        dockeeMoveTimer = new Timer(movedReactTime, new AbstractAction() {
            @Override
            public void actionPerformed(ActionEvent ae) {
                iterateDockables();
            }
        });
        dockeeMoveTimer.setRepeats(false);
    }

    private void iterateDockables() {
        //System.out.println("Dock will call for Dockees to come");
        for (Map.Entry<Component, String> entry : dockees.entrySet()) {
            Component component = entry.getKey();
            String pos = entry.getValue();
            if (!isDocked(component, pos)) {
                dock(component, pos);
            }
        }
    }

    void registerDock(Component dock) {
        this.dock = dock;
        dock.addComponentListener(caDock);
    }

    void registerDockee(Component dockee, String pos) {
        dockee.addComponentListener(caDockee);
        dockees.put(dockee, pos);
        caDock.componentResized(new ComponentEvent(dock, 1));//not sure about the int but w dont use it so its fine for now
    }

    void deregisterDockee(Component dockee) {
        dockee.removeComponentListener(caDockee);
        dockees.remove(dockee);
    }

    void setMagneticFieldSize(int sizeInPixels) {
        MAGNETIC_FIELD_SIZE = sizeInPixels;
    }

    private boolean isDocked(Component comp, String pos) {
        switch (pos) {
            case EAST_DOCKED:
                int eastDockedX = dock.getX() + dock.getWidth();
                int eastDockedY = dock.getY();
                if (layout.equals(MAGNETIC_LAYOUT)) {
                    if (comp.getLocation().distance(new Point(eastDockedX, eastDockedY)) <= MAGNETIC_FIELD_SIZE) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    if (comp.getX() == eastDockedX && comp.getY() == eastDockedY) {
                        // System.out.println("is eastly docked");
                        return true;
                    }
                }
                break;
            case SOUTH_DOCKED:
                int southDockedX = dock.getX();
                int southDockedY = dock.getY() + dock.getHeight();
                if (layout.equals(MAGNETIC_LAYOUT)) {
                    if (comp.getLocation().distance(new Point(southDockedX, southDockedY)) <= MAGNETIC_FIELD_SIZE) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    if (comp.getX() == southDockedX && comp.getY() == southDockedY) {
                        // System.out.println("is southly docked");
                        return true;
                    }
                }
                break;
            case WEST_DOCKED:
                int westDockedX = dock.getX() - comp.getWidth();
                int westDockedY = dock.getY();
                if (layout.equals(MAGNETIC_LAYOUT)) {
                    if (comp.getLocation().distance(new Point(westDockedX + comp.getWidth(), westDockedY)) <= MAGNETIC_FIELD_SIZE) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    if (comp.getX() == westDockedX && comp.getY() == westDockedY) {
                        // System.out.println("is southly docked");
                        return true;
                    }
                }
                break;
            case NORTH_DOCKED:
                int northDockedX = dock.getX() + comp.getHeight();
                int northDockedY = dock.getY() - comp.getHeight();
                if (layout.equals(MAGNETIC_LAYOUT)) {
                    if (comp.getLocation().distance(new Point(northDockedX - comp.getHeight(), northDockedY + comp.getHeight())) <= MAGNETIC_FIELD_SIZE) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    if (comp.getX() == northDockedX && comp.getY() == northDockedY) {
                        // System.out.println("is southly docked");
                        return true;
                    }
                }
                break;
        }
        return false;
    }
    private Timer eastTimer = null, southTimer = null, westTimer = null, northTimer = null;

    private void dock(final Component comp, String pos) {
        //System.out.println("Snapping Dockee back to the dock");
        switch (pos) {
            case EAST_DOCKED:
                int eastDockedX = dock.getX() + dock.getWidth();
                int eastDockedY = dock.getY();
                if (eastTimer == null) {
                    eastTimer = getTimer(comp, eastDockedX, eastDockedY);
                    eastTimer.start();
                } else {
                    if (!eastTimer.isRunning()) {
                        eastTimer = getTimer(comp, eastDockedX, eastDockedY);
                        eastTimer.start();
                    }
                }
                break;
            case SOUTH_DOCKED:
                int southDockedX = dock.getX();
                int southDockedY = dock.getY() + dock.getHeight();
                if (southTimer == null) {
                    southTimer = getTimer(comp, southDockedX, southDockedY);
                    southTimer.start();
                } else {
                    if (!southTimer.isRunning()) {
                        southTimer = getTimer(comp, southDockedX, southDockedY);
                        southTimer.start();
                    }
                }
                break;
            case WEST_DOCKED:
                int westDockedX = dock.getX() - comp.getWidth();
                int westDockedY = dock.getY();
                if (westTimer == null) {
                    westTimer = getTimer(comp, westDockedX, westDockedY);
                    westTimer.start();
                } else {
                    if (!westTimer.isRunning()) {
                        westTimer = getTimer(comp, westDockedX, westDockedY);
                        westTimer.start();
                    }
                }
                break;
            case NORTH_DOCKED:
                int northDockedX = dock.getX();
                int northDockedY = dock.getY() - comp.getHeight();
                if (northTimer == null) {
                    northTimer = getTimer(comp, northDockedX, northDockedY);
                    northTimer.start();
                } else {
                    if (!northTimer.isRunning()) {
                        northTimer = getTimer(comp, northDockedX, northDockedY);
                        northTimer.start();
                    }
                }
                break;
        }
    }

    private Timer getTimer(final Component comp, int finalX, int finalY) {
        Timer t = null;
        switch (layout) {
            case STICKY_LAYOUT:
                t = stickyDockableTimer(comp, finalX, finalY);
                break;
            case FOLLOW_LAYOUT:
                t = followDockableTimer(comp, finalX, finalY);
                break;
            case MAGNETIC_LAYOUT:
                t = followDockableTimer(comp, finalX, finalY);
                break;
        }
        return t;
    }

    private Timer followDockableTimer(final Component comp, final int finalX, final int finalY) {
        Timer t = new Timer(1, new AbstractAction() {
            int INCREMENT = 1, DECREMENT = 1;
            int x = comp.getX(), y = comp.getY();

            @Override
            public void actionPerformed(ActionEvent ae) {
                //System.out.println(finalX + "," + finalY);
                if (x < finalX) {
                    x += INCREMENT;
                } else if (x > finalX) {
                    x -= DECREMENT;
                }
                if (y < finalY) {
                    y += INCREMENT;
                } else if (y > finalY) {
                    y -= DECREMENT;
                }
                comp.setLocation(x, y);
                if (x == finalX && y == finalY) {
                    if (comp instanceof Window) {
                        ((Window) comp).toFront();
                    }
                    ((Timer) ae.getSource()).stop();
                }
            }
        });
        return t;
    }

    public JPanel getDockToolbar() {
        JPanel panel = new JPanel();
        for (Map.Entry<Component, String> entry : dockees.entrySet()) {
            final Component component = entry.getKey();
            String pos = entry.getValue();
            Docker.MyButton jtb = new Docker.MyButton("un-dock" + pos.replace("dock", ""), component, pos);
            panel.add(jtb);
            jtb.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent ae) {
                    Docker.MyButton jtb = (Docker.MyButton) ae.getSource();
                    String tmp = jtb.getText();
                    if (tmp.contains("un-dock")) {
                        jtb.setText(tmp.replace("un-dock", "dock"));
                        deregisterDockee(jtb.getComponent());
                    } else {
                        jtb.setText(tmp.replace("dock", "un-dock"));
                        registerDockee(jtb.getComponent(), jtb.getDockablePosition());
                    }
                }
            });
        }
        return panel;
    }

    private Timer stickyDockableTimer(final Component comp, final int finalX, final int finalY) {
        Timer t = new Timer(1, new AbstractAction() {
            @Override
            public void actionPerformed(ActionEvent ae) {
                comp.setLocation(finalX, finalY);
            }
        });
        t.setRepeats(false);
        return t;
    }

    private class MyButton extends JButton {

        private final Component c;
        private final String pos;

        public MyButton(String text, Component c, String pos) {
            super(text);
            this.c = c;
            this.pos = pos;
        }

        public Component getComponent() {
            return c;
        }

        public String getDockablePosition() {
            return pos;
        }
    }
}