如何讓組件在NetWork的指定範圍內移動

如何讓組件在NetWork的指定範圍內移動 收藏
winner 寫道:
TNetWork放置在一個JPanel上，JPanel的大小設置爲(1000,1000)
TNetWork的大小設置爲(1000,1000)
TNetWork上放置一個父Grid,Grid大小設置爲(1000,1000)
在父Grid上的某個單元格放一個子Grid，爲什麼子Grid可以拉到(1000,1000)範圍以外，即不在父Grid之上。


nework是以下圖的結構，我們常說的拓撲其實指的是裏面的canvas部分，canvas是在scrollpane裏面的可以滾動到很大的任意區域，這個
demo.network.miscellaneous.game.GreedySnakeDemo例子就是將canvas從network中挖出來擺放到其他組件上，這樣就不會有滾動條的出現，還可以比較容易實現全透明化，子Grid的拖動是不不會受network的限制的，當然也可以再交換上做處理使其不超出1000,1000的區域，例如監聽interaction事件如果拖拽出了這個區域再設置回來即可，也不受父grid的限制，例如在編輯的情況下一個子Grid甚至可以從一個父親Grid拖拽到另一個父親Grid上，如果你不希望子Grid被拖拽操作也可以通過ResizableFilte和MovableFiler加以限制過濾，這樣用戶可以只能通過屬性頁上的rowindex和columnindex切換調節

view plaincopy to clipboardprint?
// handle x ...
if(node.getX()+node.getWidth() > 1000){
node.setLocation(1000- node.getWidth(), node.getY())
}
// handle y ...


private ResizableNode node = new ResizableNode();
private TDataBox box = new TDataBox();
private TNetwork network = new TNetwork(box);
private Rectangle limitBounds = new Rectangle(50, 50, 500, 400);

public LimitBoundDemo(){
this.add(this.network);
this.box.addElement(node);

this.network.addCanvasCushion(new CanvasCushion(){
public void paint(Graphics2D g) {
g.setColor(Color.yellow);
g.fillRect(limitBounds.x, limitBounds.y, limitBounds.width, limitBounds.height);
}
});

this.node.putCustomDraw(true);
this.node.putBorderVisible(false);
this.node.putCustomDrawShapeFactory(TWaverConst.SHAPE_RECTANGLE);
this.node.putCustomDrawGradientFactory(TWaverConst.GRADIENT_LINE_NW);
this.node.setSize(100, 50);
this.node.setLocation(limitBounds.x + 20, limitBounds.y + 20);

this.network.addInteractionListener(new InteractionListener(){
public void interactionPerformed(InteractionEvent event) {
if(event.getType() == InteractionEvent.ELEMENT_LEAP_MOVED
|| event.getType() == InteractionEvent.ELEMENT_SMOOTH_MOVED
|| event.getType() == InteractionEvent.ELEMENT_SMOOTH_MOVING){
Iterator it = box.getSelectionModel().selection();
while(it.hasNext()){
Element element = (Element)it.next();
if(element instanceof Node){
Node node = (Node)element;
if(node.getX() < limitBounds.x){
node.setLocation(limitBounds.x, node.getY());
}
if(node.getY() < limitBounds.y){
node.setLocation(node.getX(), limitBounds.y);
}
if(node.getX()+node.getWidth() > limitBounds.x+limitBounds.width){
node.setLocation(limitBounds.x+limitBounds.width-node.getWidth(), node.getY());
}
if(node.getY()+node.getHeight() > limitBounds.y+limitBounds.height){
node.setLocation(node.getX(), limitBounds.y+limitBounds.height-node.getHeight());
}
}
}
}
}
});
}


如果指的是組件的話，你可以試試鷹眼的效果，鷹眼也是默認拖不出去network的區域，其實這個也是TWaver內部做了工作不斷條件回來的

Overview裏面有如下邏輯

view plaincopy to clipboardprint?
//once this inner frame moved, adjust position avoid out of network view.
this.addComponentListener(new ComponentAdapter() {
public void componentMoved(ComponentEvent e) {
network.adjustComponentPosition(Overview.this);
}
});


你可以試試在TWaver Java Demo中完善一下demo.DemoUtil的createInternalFrame函數也會達到鷹眼一樣效果

view plaincopy to clipboardprint?
public class DemoUtil {

public static JInternalFrame createInternalFrame(String title, final TNetwork network, JComponent mainPane){
final JInternalFrame frame = new JInternalFrame();
frame.getContentPane().add(mainPane);
frame.setTitle(title);
frame.pack();
frame.setLocation(30, 30);
frame.setVisible(true);
network.getLayeredPane().add(frame, 0);

[color=#FF4000] frame.addComponentListener(new ComponentAdapter() {
public void componentMoved(ComponentEvent e) {
network.adjustComponentPosition(frame);
}
}); [/color]

return frame;
}


如果你需要指定的不僅是簡單的在network區域而是某個指定的bounds的話，你可以參考TWaver的adjustComponentPosition實現邏輯根據自己需求定製

view plaincopy to clipboardprint?
public static void adjustComponentPosition(TNetwork network, JComponent component) {
Point location = component.getLocation();
int x = location.x, y = location.y;
//avoid beyond view port.
JScrollPane canvasScrollPane = network.getCanvasScrollPane();
JViewport view = canvasScrollPane.getViewport();
JViewport columnHeader = canvasScrollPane.getColumnHeader();
JViewport rowHeader = canvasScrollPane.getRowHeader();
int yOffset = 0;
int xOffset = 0;
if (columnHeader != null) {
yOffset = columnHeader.getPreferredSize().height;
}
if (rowHeader != null) {
xOffset = rowHeader.getPreferredSize().width;
}
int xMax = view.getWidth() - component.getWidth() + xOffset;
int yMax = view.getHeight() - component.getHeight() + yOffset;
int xMin = 0, yMin = 0;
x = x > xMax ? xMax : x;
y = y > yMax ? yMax : y;
x = x < xMin ? xMin : x;
y = y < yMin ? yMin : y;
component.setLocation(x, y);
network.getCanvas().repaint();
}


view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex"
minWidth="1000" minHeight="1000" applicationComplete="init()">

<mx:Script>
<!--[CDATA[
import twaver.Consts;
import twaver.ElementBox;
import twaver.ILayer;
import twaver.Layer;
import twaver.LayerBox;
import twaver.Node;
import twaver.Styles;
private var elementbox:ElementBox = new ElementBox();

public function init():void{
network.elementBox = elementbox;
tree.dataBox = elementbox.layerBox;

var layer1:Layer = new Layer("layer1","Layer1");
var layer2:Layer = new Layer("layer2","Layer2");
var layer3:Layer = new Layer("layer3","Layer3");
elementbox.layerBox.add(layer1);
elementbox.layerBox.add(layer2);
elementbox.layerBox.add(layer3);

var node1:Node = new Node();
node1.setStyle(Styles.CONTENT_TYPE, Consts.CONTENT_TYPE_VECTOR);
node1.setStyle(Styles.VECTOR_SHAPE, Consts.SHAPE_CIRCLE);
node1.setStyle(Styles.VECTOR_FILL_ALPHA, 0.7);
node1.setStyle(Styles.VECTOR_FILL_COLOR, 0x0ff203);
node1.setSize(50,50);
node1.layerID = "layer1";
node1.name = "layer1";
node1.location = new Point(200,300);
elementbox.add(node1);

var node2:Node = new Node();
node2.setStyle(Styles.CONTENT_TYPE, Consts.CONTENT_TYPE_VECTOR);
node2.setStyle(Styles.VECTOR_SHAPE, Consts.SHAPE_RECTANGLE);
node2.layerID = "layer2";
node2.name = "layer2";
node2.location = new Point(200,350);
elementbox.add(node2);

var node3:Node = new Node();
node3.setStyle(Styles.CONTENT_TYPE, Consts.CONTENT_TYPE_VECTOR);
node3.setStyle(Styles.VECTOR_SHAPE, Consts.SHAPE_OVAL);
node3.setStyle(Styles.VECTOR_FILL_ALPHA, 0.7);
node3.setStyle(Styles.VECTOR_FILL_COLOR, 0x003322);
node3.layerID = "layer3";
node3.name = "layer3";
node3.location = new Point(200,370);
elementbox.add(node3);

var node4:Node = new Node();
node4.setStyle(Styles.CONTENT_TYPE, Consts.CONTENT_TYPE_VECTOR);
node4.setStyle(Styles.VECTOR_SHAPE, Consts.SHAPE_OVAL);
node4.setStyle(Styles.VECTOR_FILL_ALPHA, 0.7);
node4.setStyle(Styles.VECTOR_FILL_COLOR, 0x003322);
node4.name = "defaultLayer";
node4.location = new Point(400,370);
elementbox.add(node4);
network.elementBox.layerBox.defaultLayer.editable = false;
network.setEditInteractionHandlers();
}
]]-->
</mx:Script>

<mx:Panel width="100%" height="100%" title="Layer Demo" color="#E49305">
<mx:HDividedBox width="100%" height="100%">
<twaver:Tree id="tree" width="30%" height="100%"/>
<twaver:Network id="network" width="70%" height="100%"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>