Question

I’m trying to build a user interface for a chess game. I’ve used a GridBagLayout filled with JLabels and the chess pieces are ImageIcons of the JLabels.

Now I would like to move the pieces by dragging it on the board. Is there a way to do this with ImageIcons? Or is there a better way to solve the problem?

EDIT: here is a sample code. you can notice that you can move the iconImage, but it doesn’t “drag” with the mouse.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.util.HashMap;

import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;




public class MainDebug extends JFrame implements MouseListener {

    private JPanel BoardPanel;


    private String buffercase_mousepressed;
    private String buffercase_mouseentered;

    private JLabel A8 = new JLabel("A8");
    private JLabel B8 = new JLabel("B8");

    private HashMap componentMap;

    private ImageIcon RookIcon = createImageIcon("50px-Rook.png", "Rook");



    public MainDebug(String name) {
        super(name);
        setResizable(true);

    }

    private ImageIcon createImageIcon(String path, String description) {

        java.net.URL imgURL = getClass().getResource(path);
            if (imgURL != null) {
                return new ImageIcon(imgURL, description);
            } else {
                System.err.println("Couldn't find file: " + path);
                return null;
            }
    }

    public void addComponentsToPane(final Container pane) {

        BoardPanel = new JPanel();
        BoardPanel.setLayout(new GridBagLayout());

        GridBagConstraints c = new GridBagConstraints();
        Dimension dim50 = new Dimension(50,50);

        A8.setOpaque(true);
        A8.setBackground(Color.white);
        A8.setPreferredSize(dim50);
        c.fill = GridBagConstraints.HORIZONTAL;
        c.gridx = 0;
        c.gridy = 0;
        BoardPanel.add(A8,c);
        A8.setName("A8");
        A8.addMouseListener(this);


        B8.setOpaque(true);
        B8.setBackground(Color.lightGray);
        B8.setPreferredSize(dim50);
        B8.setName("B8");
        c.gridx=1;
        BoardPanel.add(B8,c);
        B8.addMouseListener(this);

        A8.setIcon(RookIcon);

        pane.add(BoardPanel, BorderLayout.CENTER);

        createComponentMap();

    }

    private void createComponentMap() {
        componentMap = new HashMap<String,Component>();

        int max_components = BoardPanel.getComponentCount();
        //Component[] components = BoardPanel.getComponentCount();
        //Component[] components = BoardPanel.getContentPane().getComponents();
        for (int i=0; i < max_components; i++) {
                componentMap.put(BoardPanel.getComponent(i).getName(), BoardPanel.getComponent(i));
        }
    }

    public Component getComponentByName(String name) {
        if (componentMap.containsKey(name)) {
                return (Component) componentMap.get(name);
        }
        else return null;
}

    public void mousePressed(MouseEvent e) {

        buffercase_mousepressed = e.getComponent().getName();
    }

    public void mouseReleased(MouseEvent e) {

        moveIcon(buffercase_mousepressed,buffercase_mouseentered);
    }

    public void mouseEntered(MouseEvent e) {

        buffercase_mouseentered = e.getComponent().getName();
    }


    public void mouseExited(MouseEvent e) {

    }

    public void mouseClicked(MouseEvent e) {

    }


    public void moveIcon(String A, String B){

        if ((A != null) && (B != null)){

            JLabel Ja = (JLabel)getComponentByName(A);
            JLabel Jb = (JLabel)getComponentByName(B);

            Icon iconeA = Ja.getIcon();
            Icon iconeB = Jb.getIcon();

            if (iconeA != null && iconeB == null){

                Ja.setIcon(null);
                Jb.setIcon(iconeA);

            }

        }

        buffercase_mousepressed = null;
        buffercase_mouseentered = null;
    }

    private static void createAndShowGUI() {
        //Create and set up the window.
        MainDebug frame = new MainDebug("Test interface");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //Set up the content pane.
        frame.addComponentsToPane(frame.getContentPane());
        //Display the window.
        frame.pack();
        frame.setVisible(true);

    }

    public static void main(String[] args) {

        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });


    }

}

Answer 1

Okay, this is my little swing at you problem…

Now, rather then using a GridBagLayout, I’ve devised my own layout manager, which will allow me to specify the “grid” location a piece should be placed and allow the board and layout manager to calculate the physical location the piece will appear. Personally, I think you will find it easier than using a GridBagLayout.

The code has two modes. It has a “snap-to” mode, that will cause the piece to want to “snap” to the grid as it’s begin dragged and a “free” mode, that will allow the piece to “glide” across the board as you drag…

If you choice to continue to use the GridBagLayout, the basic drag process won’t change. You can use GridBagLayout#setConstraint to modify the constraints for a given component

public class Chess {

    public static void main(String[] args) {
        new Chess();
    }

    public Chess() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Test");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new Board());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }

        });
    }

    public static final int GRID_SIZE = 50;
    public static final boolean SNAP_TO_GRID = false;

    public class Board extends JPanel {

        private BufferedImage board;
        private Point highlightCell;

        public Board() {
            setLayout(new BoardLayoutManager());
            int width = GRID_SIZE * 8;
            int height = GRID_SIZE * 8;
            board = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            Graphics2D g2d = board.createGraphics();
            g2d.setColor(Color.WHITE);
            g2d.fill(new Rectangle(0, 0, width, height));
            g2d.setColor(Color.BLACK);
            for (int row = 0; row < 8; row++) {
                int xPos = (row % 2 == 0) ? GRID_SIZE : 0;
                for (int col = 0; col < 8; col += 2) {
                    g2d.fill(new Rectangle(xPos, row * GRID_SIZE, GRID_SIZE, GRID_SIZE));
                    xPos += (GRID_SIZE * 2);
                }
            }
            JLabel piece = new JLabel();
            try {
                piece.setIcon(new ImageIcon(ImageIO.read(getClass().getResource("/Luke.png"))));
            } catch (IOException ex) {
                piece.setBackground(new Color(255, 0, 0, 64));
                piece.setOpaque(true);
            }

            add(piece, new Point(0, 0));

            MouseHandler mouseHandler = new MouseHandler(this);
            addMouseListener(mouseHandler);
            addMouseMotionListener(mouseHandler);

        }

        protected Rectangle getBoardBounds() {
            return new Rectangle(getBoardOffset(), new Dimension(GRID_SIZE * 8, GRID_SIZE * 8));
        }

        public Point gridToPoint(Point grid) {
            Point p = new Point();
            if (grid != null) {
                Point offset = getBoardOffset();
                p.x = grid.x * GRID_SIZE + offset.x;
                p.y = grid.y * GRID_SIZE + offset.y;
            }
            return p;
        }

        public Point pointToGrid(Point p) {
            Point grid = null;
            Rectangle board = getBoardBounds();
            if (board.contains(p)) {
                p.x = p.x - board.x;
                p.y = p.y - board.y;

                grid = new Point();
                grid.x = p.x / GRID_SIZE;
                grid.y = p.y / GRID_SIZE;
            }
            return grid;
        }

        public void setPieceGrid(Component comp, Point grid) {
            ((BoardLayoutManager) getLayout()).setPieceGrid(comp, grid);
            invalidate();
            revalidate();
            repaint();
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(GRID_SIZE * 8, GRID_SIZE * 8);
        }

        protected Point getBoardOffset() {
            int width = getWidth();
            int height = getHeight();
            Point p = new Point();
            p.x = (width - board.getWidth()) / 2;
            p.y = (height - board.getHeight()) / 2;

            return p;
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            Point p = getBoardOffset();
            g2d.drawImage(board, p.x, p.y, this);
            if (highlightCell != null) {
                Point cell = gridToPoint(highlightCell);
                Rectangle bounds = new Rectangle(cell.x, cell.y, GRID_SIZE, GRID_SIZE);
                g2d.setColor(Color.RED);
                g2d.draw(bounds);
            }
            g2d.dispose();
        }

        public void setHightlightCell(Point p) {
            if (highlightCell != p) {
                highlightCell = p;
                repaint();
            }
        }

    }

    public class MouseHandler extends MouseAdapter {

        private Component dragComponent;
        private Board board;
        private Point dragOffset;

        public MouseHandler(Board board) {
            this.board = board;
        }

        public Board getBoard() {
            return board;
        }

        @Override
        public void mousePressed(MouseEvent e) {
            Component comp = getBoard().getComponentAt(e.getPoint());
            if (comp != null) {
                dragComponent = comp;
                dragOffset = new Point();
                dragOffset.x = e.getPoint().x - comp.getX();
                dragOffset.y = e.getPoint().y - comp.getY();
            }
        }

        @Override
        public void mouseReleased(MouseEvent e) {
            if (dragComponent != null) {
                Board board = getBoard();
                Point p = board.pointToGrid(e.getPoint());
                System.out.println(p);
                board.setPieceGrid(dragComponent, p);

                dragComponent = null;
                board.setHightlightCell(null);
            }
        }

        @Override
        public void mouseDragged(MouseEvent e) {
            if (dragComponent != null) {
                Board board = getBoard();
                Point grid = board.pointToGrid(e.getPoint());
                if (SNAP_TO_GRID) {
                    Point p = board.gridToPoint(grid);
                    dragComponent.setLocation(p);
                } else {
                    Point dragPoint = new Point();
                    dragPoint.x = e.getPoint().x - dragOffset.x;
                    dragPoint.y = e.getPoint().y - dragOffset.y;
                    dragComponent.setLocation(dragPoint);
                }
                board.setHightlightCell(grid);
            }
        }

    }

    public class BoardLayoutManager implements LayoutManager2 {

        private Map<Component, Point> mapGrid;

        public BoardLayoutManager() {
            mapGrid = new HashMap<>(25);
        }

        public void setPieceGrid(Component comp, Point grid) {
            mapGrid.put(comp, grid);
        }

        @Override
        public void addLayoutComponent(Component comp, Object constraints) {
            if (constraints instanceof Point) {
                mapGrid.put(comp, (Point) constraints);
            } else {
                throw new IllegalArgumentException("Unexpected constraints, expected java.awt.Point, got " + constraints);
            }
        }

        @Override
        public Dimension maximumLayoutSize(Container target) {
            return new Dimension(GRID_SIZE * 8, GRID_SIZE * 8);
        }

        @Override
        public float getLayoutAlignmentX(Container target) {
            return 0.5f;
        }

        @Override
        public float getLayoutAlignmentY(Container target) {
            return 0.5f;
        }

        @Override
        public void invalidateLayout(Container target) {
        }

        @Override
        public void addLayoutComponent(String name, Component comp) {
        }

        @Override
        public void removeLayoutComponent(Component comp) {
            mapGrid.remove(comp);
        }

        @Override
        public Dimension preferredLayoutSize(Container parent) {
            return new Dimension(GRID_SIZE * 8, GRID_SIZE * 8);
        }

        @Override
        public Dimension minimumLayoutSize(Container parent) {
            return new Dimension(GRID_SIZE * 8, GRID_SIZE * 8);
        }

        @Override
        public void layoutContainer(Container parent) {
            Point offset = ((Board) parent).getBoardOffset();
            for (Component comp : parent.getComponents()) {
                Point p = mapGrid.get(comp);
                if (p == null) {
                    comp.setBounds(0, 0, 0, 0); // Remove from sight :P
                } else {
                    int x = p.x * GRID_SIZE + offset.x;
                    int y = p.y * GRID_SIZE + offset.y;
                    comp.setBounds(x, y, GRID_SIZE, GRID_SIZE);
                }
            }
        }
    }    
}