Circle drawn in a JPanel does not get drawn at the position of mouseClick

Question

I'm trying to create a program that lets the user move a circle in a JPanel, But I'm facing some problems.

My program:

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import javax.swing.border.Border;
import javax.swing.BorderFactory;

import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.FlowLayout;
import java.awt.BorderLayout;
import java.awt.GridLayout;

public class SixthProgram
{
    public static void main(String[] args)
    {
        GUI prog=new GUI("SixthProgram");
        prog.setBounds(350,250,500,250);
        prog.setVisible(true);
    }
}

class GUI extends JFrame implements MouseListener, MouseMotionListener, ActionListener
{
    JButton color1, color2, color3 ,color4 ,color5;
    JPanel mainPan, colorPan;
    Color color=Color.BLACK;

    int x=0,y=0;

    public GUI(String header)
    {
        super(header);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLayout(new BorderLayout());

        maker();

        addMouseListener(this);
        addMouseMotionListener(this);

        add(mainPan , BorderLayout.CENTER);
        add(colorPan, BorderLayout.PAGE_END);
    }

    public void maker()
    {
        colorPan = new JPanel();

        Border raisedbevel = BorderFactory.createRaisedBevelBorder();
        Border loweredbevel = BorderFactory.createLoweredBevelBorder();
        Border compound = BorderFactory.createCompoundBorder(raisedbevel, loweredbevel);
        colorPan.setBorder(compound);

        colorPan.setLayout(new GridLayout(1, 0));

        mainPan = new JPanel(){
            @Override
            public void paintComponent(Graphics g)
            {
                //g.setColor(Color.WHITE);
                //g.fillRect(0,0,getWidth(),getHeight());
                super.paintComponent(g); //Do the same thing as above(Clear JPanel)

                g.setColor(color);
                g.fillOval(x,y,50,50);
            }
        };

        color1 = new JButton();
        color2 = new JButton();
        color3 = new JButton();
        color4 = new JButton();
        color5 = new JButton();

        color1.setBackground(Color.WHITE);
        color2.setBackground(Color.GREEN);
        color3.setBackground(Color.RED);
        color4.setBackground(Color.BLUE);
        color5.setBackground(Color.BLACK);

        color1.addActionListener(this);
        color2.addActionListener(this);
        color3.addActionListener(this);
        color4.addActionListener(this);
        color5.addActionListener(this);

        colorPan.add(color1);
        colorPan.add(color2);
        colorPan.add(color3);
        colorPan.add(color4);
        colorPan.add(color5);

        colorPan.setBackground(Color.GREEN);

    }

    public void mouseExited(MouseEvent e) //MouseListener overrided methods
    {
        System.out.println("Exit");
    }

    public void mouseEntered(MouseEvent e)
    {
        System.out.println("Enter");
    }

    public void mouseReleased(MouseEvent e)
    {
        System.out.println("Release");
    }

    public void mousePressed(MouseEvent e)
    {
        System.out.println("Press");    

        if((e.getX()+50 <= getWidth())  &&
           (e.getY()+50 <= (getHeight() - colorPan.getHeight()))) // Preventing out of bounds
        {
            x=e.getX();
            y=e.getY();
            repaint();
        }
    }

    public void mouseClicked(MouseEvent e) //Press+Release=Click
    {
        System.out.println("Click");
    }

    public void mouseDragged(MouseEvent e) //MouseMotionListener overrided methods
    {
        //System.out.println("Dragged to ("+ e.getX() +","+ e.getY() +")");

        if((e.getX()>=0 && e.getY()>=0) && 
           (e.getX()+50 <= getWidth())  &&
           (e.getY()+50 <= (getHeight() - colorPan.getHeight())) )
        {
            x=e.getX();
            y=e.getY();
            repaint();
        }
    }

    public void mouseMoved(MouseEvent e)
    {
        //System.out.println("Moved to ("+ e.getX() +","+ e.getY() +")");
    }

    public void actionPerformed(ActionEvent e)
    {
        JButton button = (JButton)e.getSource();
        color = button.getBackground();
        repaint();
    }

}

The above code produces the expected output:

The problems are:

1. When I drag the circle around, the circle doesn't seem to be drawn at the position of the mouse:

   

   In the above screenshot, I'm dragging the mouse , but the circle seems to be drawn at a position below the mouse.

2. The circle gets drawn behind the colorchooser JPanel(colorPan):

   

   I would like the circle, not to enter colorPan's territory.

3. The circle get to move too far to the right:

   

   You can observe a part of the circle being outside the JPanel(mainPan).

I'm pretty sure there is something wrong with my mouseDragged method:

public void mouseDragged(MouseEvent e)
{
    //System.out.println("Dragged to ("+ e.getX() +","+ e.getY() +")");

    if((e.getX()>=0 && e.getY()>=0) && 
       (e.getX()+50 <= getWidth())  &&
       (e.getY()+50 <= (getHeight() - colorPan.getHeight())) )
    {
        x=e.getX();
        y=e.getY();
        repaint();
    }
}

but I can't seem to find the problem. Can anyone help me solve these problems?

Answer 1

You need to add MouseListener/MouseMotionListener to drawing panel instead of GUI like next :

  mainPan.addMouseListener(this);
  mainPan.addMouseMotionListener(this);

Or you can use SwingUtilities.convertPoint(...) method to convert point from one component to another, like next:

Point convertPoint = SwingUtilities.convertPoint(GUI.this, e.getPoint(), mainPan);
x=convertPoint.x;
y=convertPoint.y;