Link two JPanel's with a line

[Jeronimo Backes]

It is possible to display two or more JPanel's in a JFrame, in random positions, and display a line linking them? The line should end at the center of the JPanel, but can't appear over the panel.

To be brief: It should look like a diagram of movable and resizable JPanel's.

A resizer and mover of components I've already made. The only problem is to display the links between them as lines.

Anyone has any idea of how to do that?

[Craig Wood]

Draw the line in the container that is parent to the panels. If it is a content pane or a JPanel you can override the 'paintComponent' method. To get the end points for the lines you can try:

    Rectangle r1 = panel1.getBounds();
    Rectangle r2 = panel2.getBounds();
    g.drawLine(r1.getCenterX(), r1.getCenterY(),
               r2.getCenterX(), r2.getCenterY());

[Jeronimo Backes]

Thanks for the reply man. I already did that, but I was doing that with the paint() method. But here goes the worst problem: How to move the panels and update the line?

Don't be scared with the size of the code here. It is just to allow you (and anybody else) to run and test, and then be able to give a answer. You will be interested just in the PanelTest class, and only in the minor methods. I just need a answer to that:

How can I show the line moving with the panels when one of them is dragged?

 import java.awt.*;
import java.awt.event.*;
 
import javax.swing.*;
import javax.swing.border.*;
 
public class PanelTest extends JPanel {

private JPanel p1;
private JPanel p2;

public PanelTest(JPanel p1, JPanel p2) {
this.setLayout(null);
this.p1 = p1;
p1.setBorder(new BevelBorder(BevelBorder.LOWERED));
ComponentResizer r1 = new ComponentResizer(p1);
r1.setResizeLimits(50, 50, 200, 200);
p1.addMouseListener(r1);
p1.addMouseMotionListener(r1);
this.add(p1);

this.p2 = p2;
p2.setBorder(new BevelBorder(BevelBorder.RAISED));
ComponentResizer r2 = new ComponentResizer(p2);
r2.setResizeLimits(50, 50, 200, 200);
p2.addMouseListener(r2);
p2.addMouseMotionListener(r2);
this.add(p2);

p1.setBounds(100, 100, 100, 100);
p2.setBounds(500, 400, 100, 100);
}

private void paintLine(Graphics g) {
Rectangle r1 = p1.getBounds();
Rectangle r2 = p2.getBounds();
g.drawLine(r1.x + r1.width/2, r1.y + r1.height/2,
           r2.x + r2.width/2, r2.y + r2.height/2);
}

public void paintComponent(Graphics g) {
super.paintComponent(g);
paintLine(g);
}

public static void main(String[] args) {
JFrame tmp = new JFrame("TEST");
Dimension dimension = new Dimension(800, 600);
tmp.setSize(dimension);
tmp.setPreferredSize(dimension);
tmp.setMinimumSize(dimension);
tmp.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
tmp.setLayout(new BorderLayout());
tmp.setBounds(generateCenter(800, 600));

tmp.add(new PanelTest(new JPanel(), new JPanel()));

tmp.setVisible(true);
}

public static Rectangle generateCenter(int width, int height){
Rectangle bounds = new Rectangle();
Dimension resolution = Toolkit.getDefaultToolkit().getScreenSize();

bounds.x = (resolution.width - width) / 2;
bounds.y = (resolution.height - height) / 2;
bounds.width = width;
bounds.height = height;

return bounds;
}
}
 
class ComponentResizer implements MouseMotionListener, MouseListener{
protected Component component;
private boolean north = false;
private boolean south = false;
private boolean east = false;
private boolean west = false;

private Point lastPosXY = null;
private Point lastPosWH = null;

private boolean mouseReleased = true;

private boolean isMoving = false;
private int resizableBorder = 5;

private final Cursor DEFAULT_CURSOR = new Cursor(Cursor.DEFAULT_CURSOR);
private final Cursor MOVE_CURSOR = new Cursor(Cursor.MOVE_CURSOR);

private final Cursor RESIZE_SOUTH_CURSOR = new Cursor(Cursor.S_RESIZE_CURSOR);
private final Cursor RESIZE_SOUTHEAST_CURSOR = new Cursor(Cursor.SE_RESIZE_CURSOR);
private final Cursor RESIZE_SOUTHWEST_CURSOR = new Cursor(Cursor.SW_RESIZE_CURSOR);

private final Cursor RESIZE_NORTH_CURSOR = new Cursor(Cursor.N_RESIZE_CURSOR);
private final Cursor RESIZE_NORTHEAST_CURSOR = new Cursor(Cursor.NE_RESIZE_CURSOR);
private final Cursor RESIZE_NORTHWEST_CURSOR = new Cursor(Cursor.NW_RESIZE_CURSOR);

private final Cursor RESIZE_EAST_CURSOR = new Cursor(Cursor.E_RESIZE_CURSOR);
private final Cursor RESIZE_WEST_CURSOR = new Cursor(Cursor.W_RESIZE_CURSOR);

private boolean resizable = true;
private boolean movable = true;

private int heightInferiorLimit = 0;
private int widthInferiorLimit = 0;
private int heightSuperiorLimit = 0;
private int widthSuperiorLimit = 0;

private boolean resizableByNorth = true;
private boolean resizableBySouth = true;
private boolean resizableByEast = true;
private boolean resizableByWest = true;

public ComponentResizer(Component c) {
this.component = c;
}
 
public void mouseClicked(MouseEvent e) {
}
 
public void mouseEntered(MouseEvent e) {
if(this.mouseReleased) {
component.setCursor(this.MOVE_CURSOR);
}
this.lastPosXY = e.getPoint();
lastPosWH = lastPosXY;
}
 
public void mouseExited(MouseEvent e) {
}
 
public void mousePressed(MouseEvent e) {
}
 
public void mouseReleased(MouseEvent e) {
component.setCursor(this.DEFAULT_CURSOR);
this.mouseReleased = true;
}
 
public void mouseDragged(MouseEvent e) {
mouseReleased = false;

int w = component.getWidth();
int h = component.getHeight();
int x = component.getX();
int y = component.getY();
Point p = e.getPoint();

int XYx = (p.x - lastPosXY.x);
int XYy = (p.y - lastPosXY.y);
int WHw = (p.x - lastPosWH.x);
int WHh = (p.y - lastPosWH.y);

boolean southOrEastMoved = false;

if(isMoving) {
x += XYx;
y += XYy;
} else if(north) {
//move northwards
y += XYy;
//expand/shrink height
h -= XYy;
} else if(south) {
southOrEastMoved = true;
h += WHh;

}
if(west) {
x += XYx;
w -= XYx;
} else if (east){
southOrEastMoved = true;
w += WHw;
}


if(this.widthInferiorLimit > 0) {
if(w < this.widthInferiorLimit) {
if(!southOrEastMoved) {
/*THIS SHOULD NOT BE NEEDED!! WHAT A HACK! 
*Remove that return statement and Resize by north or west to see what *happens. 
*This only happens when inferior or superior limits are determined*/
return;
}
w = this.widthInferiorLimit;
x = component.getX();
}
}
if(this.widthSuperiorLimit > 0) {
if (w > this.widthSuperiorLimit) {
if(!southOrEastMoved) {
return;
}
w = this.widthSuperiorLimit;
x = component.getX();
}
}

if(this.heightInferiorLimit > 0) {
if(h < this.heightInferiorLimit) {
if(!southOrEastMoved) {
return;
}
h = this.heightInferiorLimit;
y = component.getY();
}
}

if(this.heightSuperiorLimit > 0) {
if(h > this.heightSuperiorLimit) {
if(!southOrEastMoved) {
return;
}
h = this.heightSuperiorLimit;
y = component.getY();
}
}

component.setBounds(x, y, w, h);
lastPosWH = p;
component.update(component.getGraphics());
}
 
public void mouseMoved(MouseEvent e) {
Point p = e.getPoint();

int x = 0;
int y = 0;
int w = component.getWidth();
int h = component.getHeight();

west  = (p.x <= x + this.resizableBorder) && resizable && resizableByWest;
east  = (p.x >= w - this.resizableBorder) && resizable && resizableByEast;
north = (p.y <= y + this.resizableBorder) && resizable && resizableByNorth;
south = (p.y >= h - this.resizableBorder) && resizable && resizableBySouth;

this.isMoving = false;

if(north) {
if(west) {
component.setCursor(RESIZE_NORTHWEST_CURSOR);
} else if(east) {
component.setCursor(RESIZE_NORTHEAST_CURSOR);
} else {
component.setCursor(RESIZE_NORTH_CURSOR);
}
} else if(south) {
if(west) {
component.setCursor(RESIZE_SOUTHWEST_CURSOR);
} else if(east) {
component.setCursor(RESIZE_SOUTHEAST_CURSOR);
} else {
component.setCursor(RESIZE_SOUTH_CURSOR);
}
} else if(west) {
component.setCursor(RESIZE_WEST_CURSOR);
} else if (east){
component.setCursor(RESIZE_EAST_CURSOR);
} else {
if(this.mouseReleased) {
if(this.movable) {
component.setCursor(MOVE_CURSOR);
} else {
component.setCursor(DEFAULT_CURSOR);
}
}
this.isMoving = true && this.movable;
}
lastPosXY = lastPosWH = p; 
}
public int getHeightInferiorLimit() {
return heightInferiorLimit;
}
 
public void setHeightInferiorLimit(int heightLimit) {
this.heightInferiorLimit = heightLimit;
}
 
public boolean isMovable() {
return movable;
}
 
public void setMovable(boolean movable) {
this.movable = movable;
}
 
public boolean isResizable() {
return resizable;
}
 
public void setResizable(boolean resizable) {
this.resizable = resizable;
}
 
public int getResizableBorder() {
return resizableBorder;
}
 
public void setResizableBorder(int resizableBorder) {
this.resizableBorder = resizableBorder;
}
 
public int getWidthInferiorLimit() {
return widthInferiorLimit;
}
 
public void setWidthInferiorLimit(int widthLimit) {
this.widthInferiorLimit = widthLimit;
}

public int getHeightSuperiorLimit() {
return heightSuperiorLimit;
}
 
public void setHeightSuperiorLimit(int heightSuperiorLimit) {
this.heightSuperiorLimit = heightSuperiorLimit;
}
 
public int getWidthSuperiorLimit() {
return widthSuperiorLimit;
}
 
public void setWidthSuperiorLimit(int widthSuperiorLimit) {
this.widthSuperiorLimit = widthSuperiorLimit;
}

public void setResizeInferiorLimit(int width, int height){
this.widthInferiorLimit = width;
this.heightInferiorLimit = height;
}

public void setResizeInferiorLimit(Dimension limit){
this.setResizeInferiorLimit(limit.width, limit.height);
}

public void setResizeSuperiorLimit(int width, int height){
this.widthSuperiorLimit = width;
this.heightSuperiorLimit = height;
}

public void setResizeSuperiorLimit(Dimension limit){
this.setResizeSuperiorLimit(limit.width, limit.height);
}

public void setResizeLimits(int iwidth, int iheight, int swidth, int sheight) {
this.setResizeInferiorLimit(iwidth, iheight);
this.setResizeSuperiorLimit(swidth, sheight);
}

public void setResizeLimits(Dimension iLimit, Dimension sLimit) {
this.setResizeInferiorLimit(iLimit);
this.setResizeSuperiorLimit(sLimit);
}

public boolean isResizableByEast() {
return resizableByEast;
}
 
public void setResizableByEast(boolean resizeEast) {
this.resizableByEast = resizeEast;
}
 
public boolean isResizableByNorth() {
return resizableByNorth;
}
 
public void setResizableByNorth(boolean resizeNorth) {
this.resizableByNorth = resizeNorth;
}
 
public boolean isResizableBySouth() {
return resizableBySouth;
}
 
public void setResizableBySouth(boolean resizeSouth) {
this.resizableBySouth = resizeSouth;
}
 
public boolean isResizableByWest() {
return resizableByWest;
}
 
public void setResizableByWest(boolean resizeWest) {
this.resizableByWest = resizeWest;
}

public void setResizeDirections(boolean resizeNorth, boolean resizeSouth, boolean resizeEast, boolean resizeWest) {
this.setResizableByNorth(resizeNorth);
this.setResizableBySouth(resizeSouth);
this.setResizableByEast(resizeEast);
this.setResizableByWest(resizeWest);
}
 
public Component getComponent() {
return component;
}
} 

PS: the code posted here can be used and modified as you wish. The resizer class needed some hacks to work right

[ August 09, 2005: Message edited by: Jer�nimo Backes ]
[ August 09, 2005: Message edited by: Jer�nimo Backes ]

[Gregg Bolinger]

You know, there is a library called JGraph that already does all this for you. If you are doing this to learn then great, but if you need something that already works, go with JGraph.

[Craig Wood]

    public void mouseDragged(MouseEvent e) { 
        ...
        component.setBounds(x, y, w, h); 
        lastPosWH = p;
//        component.update(component.getGraphics()); 
        component.getParent().repaint();
    }

[Jeronimo Backes]

Originally posted by Gregg Bolinger:
You know, there is a library called JGraph that already does all this for you. If you are doing this to learn then great, but if you need something that already works, go with JGraph.

Yep, I know. But the manual costs 50 bucks. And you can't add JComponents to a graph of JGraph. I need to display a graph in a canvas, and every node MUST display a JTree (with information about the node), a JComboBox and a JToggleButton.

I don't know much of JGraph, but I'm almost certain that you can't do this sort of thing with it.