Create an endless grid while panning

Question

I'm writing an application that has a "Drawing area" where the user is to place components. The drawing area contains a grid that the components will snap to, but and it works fine when I resize the window and such ; but when I pan the area, the grid does not redraw itself.

How would I go about drawing the new area and repainting? I create the grid when I override paintComponent(...) by looping through the x and y space in the window and using g.drawLine(...) every 10 units. Based on this example, I pan using a MouseMotionListener in the constructor for my Drawing class which extends JPanel.

public final class Drawing extends JPanel {

    private int spacing;
    private Point origin = new Point(0,0);
    private Point mousePt;

    /**
     * Default Constructor for Drawing Object. Calls JPanel default constructor.
     */
    public Drawing() {
        super();

        spacing = 10;
        setBackground(new Color(255, 255, 255));
        setBorder(BorderFactory.createLineBorder(new Color(0, 0, 0)));

        GroupLayout workspacePanelLayout = new GroupLayout(this);
        setLayout(workspacePanelLayout);
        workspacePanelLayout.setHorizontalGroup(workspacePanelLayout.createParallelGroup(GroupLayout.Alignment.LEADING).addGap(0, 343, Short.MAX_VALUE));
        workspacePanelLayout.setVerticalGroup(workspacePanelLayout.createParallelGroup(GroupLayout.Alignment.LEADING).addGap(0, 400, Short.MAX_VALUE));

        this.addMouseListener(new MouseAdapter() {
            @Override
            public void mousePressed(MouseEvent evt) {
                // this stuff is mainly for debugging....
                mousePt = evt.getPoint();
                System.out.println((mousePt.x - origin.x) + "," + (mousePt.y - origin.
                System.out.println(origin.x + ", " + origin.y);
            }
        });
        this.addMouseMotionListener(new MouseMotionAdapter() {
            //this is what is more important.
            @Override
            public void mouseDragged(MouseEvent evt) {
                if (evt.getButton() == MouseEvent.BUTTON2 || xorlogic.Window.cursorState == 1) {
                    int dx = evt.getX() - mousePt.x;
                    int dy = evt.getY() - mousePt.y;
                    origin.setLocation(origin.x+dx, origin.y+dy);
                    mousePt = evt.getPoint();
                    repaint();
                }
            }
        });
    }

and the paintComponent(...) which is implemented later:

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    g.drawLine(0, origin.y, getWidth(), origin.y);
    g.drawLine(origin.x, 0, origin.x, getHeight());
    // set up grid
    int x = 0;
    int y = 0;
    g.setColor(new Color(220, 220, 220));
    while (x < getWidth()) {
        g.drawLine(origin.x + x, 0, origin.x + x, getHeight());
        x += getSpacing();
    }
    while (y < getHeight()) {
        g.drawLine(0, origin.y + y, getWidth(), origin.y + y);
        y += getSpacing();
    }
}

I really appreciate your help. Thanks!

Answer 1

The best way to pan is to use Graphics2D.scale that way you can (a) avoid complicated logic in your paintComponent and (b) make panning a reusable feature, as shown here

https://sourceforge.net/p/tus/code/HEAD/tree/tjacobs/ui/drag/Zoomable.java#l58