How to draw a line from a jpanel to another jpanel

Question

I have two JPanels and i want to click on the first panel then on the second and a straight line to be drawn between the two panels. Also the line must persist between the two panels after it is placed. Can someone give me a tip where to start from ? The two panels are placed on a third panel they are the blue rectangles on the image below. Thank you in advance. // Parent JPanels

import javax.swing.*;
import java.awt.*;
import java.util.ArrayList;


            class WorkflowPanel extends JPanel {
                private volatile int screenX = 0;
                private volatile int screenY = 0;
                private static final int RADIUS = 35;
                private int radius = RADIUS;
                private ArrayList<ModelView> relationship;
                WorkflowPanel() {
                    relationship = new ArrayList<>();
                    relationship.add(new ModelView());
                    relationship.add(new ModelView());
                    add(relationship.get(0));
                    add(relationship.get(1));
                    setLayout(null);
                    setVisible(true);
                }

                @Override
                protected void paintChildren(Graphics g) {
                        for (int i = 0; i < relationship.size(); i += 2) {
                        ModelView one = relationship.get(i);
                        ModelView two = relationship.get(i + 1);
                        Point p1 = new Point(one.getLocation().x + one.getWidth() / 2, one.getLocation().y + one.getHeight() / 2);
                        Point p2 = new Point(two.getLocation().x + two.getWidth() / 2, two.getLocation().y + two.getHeight() / 2);
                        g.drawLine(p1.x, p1.y, p2.x, p2.y);
                        this.repaint();
                    }
                    super.paintChildren(g);
                }


                public ArrayList<ModelView> getRelationship() {
                    return relationship;
                }
            }

    // Draggable Jpanels

    import javax.swing.*;
    import javax.swing.border.*;
    class ModelView extends JPanel {
            private volatile int screenX = 0;
            private volatile int screenY = 0;
            private volatile int myX = 0;
            private volatile int myY = 0;
            private JLabel modelLbl;


            public ModelView() {
                setBorder(new LineBorder(new Color(128, 149, 255), 2));
                setBackground(Color.WHITE);
                setBounds(0, 0, 150, 75);
                setOpaque(false);


                GridBagConstraints gbc = new GridBagConstraints();
                gbc.anchor = GridBagConstraints.FIRST_LINE_START;
                gbc.fill = GridBagConstraints.HORIZONTAL;

                modelLbl = getLabel("DecisionTree");



                addMouseMotionListener(new MouseMotionListener() {
                    @Override
                    public void mouseDragged(MouseEvent e) {

                    }

                    @Override
                    public void mouseMoved(MouseEvent e) {

                    }
                });

                addMouseListener(new MouseListener() {

                    @Override
                    public void mouseClicked(MouseEvent e) { }

                    @Override
                    public void mousePressed(MouseEvent e) {
                        screenX = e.getXOnScreen();
                        screenY = e.getYOnScreen();

                        myX = getX();
                        myY = getY();
                    }

                    @Override
                    public void mouseReleased(MouseEvent e) {

                    }

                    @Override
                    public void mouseEntered(MouseEvent e) { }

                    @Override
                    public void mouseExited(MouseEvent e) { }

                });
                addMouseMotionListener(new MouseMotionListener() {

                    @Override
                    public void mouseDragged(MouseEvent e) {
                        int deltaX = e.getXOnScreen() - screenX;
                        int deltaY = e.getYOnScreen() - screenY;

                        setLocation(myX + deltaX, myY + deltaY);
                        e.getComponent().repaint();   
                        // Repaint the parent component
                        workflowPanel.repaint();
                    }



                    @Override
                    public void mouseMoved(MouseEvent e) { }

                });
            }

            private JLabel getLabel(String labelText) {

                JLabel label = new JLabel(labelText);
                label.setFont(new Font("Verdana", Font.PLAIN, 10));
                return label;
            }

            public JPanel getPanel() {
                return this;
            }
        }

Answer 1

Can someone give me a tip where to start from ?

The parent panel needs to know the relationships between the child panels.

One way is to keep an ArrayList to track the relationships between pairs of components. Then you would need to override the paintChildren(...) method of the parent panel to draw a line between the two children.

You define the ArrayList in your parent panel class:

private ArrayList<Component> relationships = new ArrayList<Component>();

Then you add pairs of components to the ArrayList as needed:

relationships.add( component1a );
relationships.add( component1b );

The basic painting code would be:

@Override
protected void paintChildren(Graphics g)
{
    for (int i = 0; i < relationships.size(); i += 2)
    {
        Component one = relationships.get(i);
        Component two = relationships.get(i + 1);
        Point p1 = //calculate the center of component one
        Point p2 = //calculate the center of component two
        g.drawline(p1.x, p1.y, p2.x, p2.y);
    }

    super.paintChildren(g);
}

So the above code should draws lines between the center point of each pair of components you add to the ArrayList. The child panels will then be drawn on top of the lines so the lines look like they come out of the edges of each component.

Check out trashgod's GraphPanel example. This example supports dragging of the shapes and the lines will follow the shapes.