如何让组件在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); 
       
      frame.addComponentListener(new ComponentAdapter() { 
            public void componentMoved(ComponentEvent e) { 
                network.adjustComponentPosition(frame); 
            } 
        });       
       
      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>