美文网首页
18 工具Tools

18 工具Tools

作者: skoll | 来源:发表于2022-06-02 14:19 被阅读0次

    简介

    1 .工具是渲染在节点上/边上的小部件,用来增强节点/边的交互能力

    节点的相关工具

    1 .button
    2 .button-remove:
    3 .boundary:

    1 .vertices
    2 .segments
    3 .boundary
    4 .button
    5 .button-remove
    6 .sorce-arrowhead,target-arrowhead:

    1 .设置这俩就是可以在连接完毕好的线段,拖拽连接箭头,可以更换
    

    基础使用

    const rect2 = graph.addNode({
            x: 360,
            y: 40,
            width: 100,
            height: 40,
            label: 'Target',
            data:{},
            tools:[
                  {name:'boundary'},
                  //包围节点的矩形,用来增加交互感
                  //{name:'button'},
                  //button这个试不出来,但是目前有了删除这个感觉也够了
                  //{name:'button-remove'}
                  //这个remove按钮竟然还带着事件,直接删除
                  {
                    name:'button',
                    //需要一系列的配置才能生效
                    args:{
                        markup:[
                            {
                                tagName:'circle',
                                selector:'button',
                                attrs:{
                                    r:18,
                                    stroke:'#fe854f',
                                    fill:'white',
                                    cursor:'pointer',
                                }
                            },{
                                tagName:'text',
                                textContent:'按钮',
                                selector:'icon',
                                attrs:{
                                    fill:'#fe854f',
                                    fontSize:10,
                                    textAnchor:"middle",
                                    pointerEvents:'none',
                                    y:'0.3em'
                                }
                            }
                        ],
                        //样式
                        distance:40,
                        onClick(e){
                            console.log('按钮被点击',e)
                        }
                    }
                  },
                ]
            })
    
            graph.addEdge({
                source: rect1,
                target: rect2,
                labels: [
                  {
                    markup: [
                      {
                        tagName: 'rect',
                        selector: 'body',
                      },
                      {
                        tagName: 'text',
                        selector: 'label',
                      },
                    ],
                    attrs: {
                      label: {
                        cursor: 'pointer',
                        text: 'Eege',
                        textAnchor: 'middle',
                        textVerticalAnchor: 'middle',
                        fontSize: 12,
                        fill: 'black',
                      },
                      body: {
                        cursor: 'pointer',
                        ref: 'label',
                        refX: '-20%',
                        refY: '-20%',
                        refWidth: '140%',
                        refHeight: '140%',
                        fill: 'white',
                        stroke: 'black',
                        strokeWidth: 1,
                      },
                    },
                  },
                ],
                tools:[
                  {name:'vertices'},
                  //路径点工具:拖拽可以调节点的位置,基本没用
                  {name:'segments'},
                  //线段工具,拖拽可以改变线段的位置
                  {name:'boundary'},
                  //线段添加矩形选中框
                ]
            })
    

    交互hover才加这些工具,所有都要加这一套工具

     //鼠标hover上去,出现矩形选择框,并且出现可点击的删除的按钮
            //原来的逻辑是需要点击选中,然后在删除,什么的,现在好像少了一些步骤
    
            graph.on('cell:mouseenter',(e)=>{
                let cell=e.cell
                if(cell.isNode){
                    cell.addTools([
                        {
                            name:'boundary',
                            args:{
                                attrs:{
                                    fill:'#7c68fc',
                                    stroke:'#333',
                                    'stroke-width':1,
                                    'fill-opacity':0.2,
                                    //还可以自定义边框的样式
                                }
                            }
                        },
                        {
                            name:'button-remove',
                            args:{
                                x:0,
                                y:0,
                                offset:{
                                    x:10,y:10,
                                }
                            }
                        }
                    ])
                }else{
                    cell.addTools(['vertices','segments'])
                }
            })
    
            graph.on('cell:mouseleave',(e)=>{
                let cell=e.cell
                cell.removeTools()
            })
    

    node-editor

    1 .可以直接在节点上编辑节点文字,这里现在不会用,后面有要求再说吧
    2 .

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
    </head>
    <body>
        <div id="container">
            
        </div>
        <script>
            const graph=new X6.Graph({
                container:document.getElementById('container'),
                width:800,
                height:600,
                background:{
                    color:'#fffbe6'
                },
                grid:{
                    size:10,
                    visible:true
                },
                highlighting:{
                    //具体触发的样式
                    magnetAvailable:{
                        name: 'stroke',
                        args: {
                          padding: 3,
                          attrs: {
                            strokeWidth: 3,
                            stroke: '#52c41a',
                          },
                        },
                    }
                },
                //这个是放在外面的
                connecting:{
                    snap:true,
                    //允许自动吸附
                    allowBlank:false,
                    allowLoop:false,
                    allowNode:false,
                    highlight:true,
                    validateMagnet({magnet}){
                        console.log(magnet,'validateMagnet')
                        return magnet.getAttribute('port-group')!=='in'
                        //是否新增边的判断:第二个点连接的时候,只有拖拽起始点是in的桩子,才能拉线
                    },
                    validateConnection({sourceMagnet,targetMagnet}){
                        if(!sourceMagnet||sourceMagnet.getAttribute('port-group')==="in"){
                            return false
                        }
                        //只能从输出桩拉线
    
                        if(!targetMagnet||targetMagnet.getAttribute('port-group')==='out'){
                            return false
                        }
                        return true
                    },
                }
            })
    
            X6.Shape.Rect.config({
                attrs: {
                  body: {
                    magnet: false,
                  },
                },
                ports: {
                  groups: {
                    in: {
                      position: { name: 'top' },
                    },
                    out: {
                      position: { name: 'bottom' },
                    },
                  },
                },
                portMarkup: [
                  {
                    tagName: 'circle',
                    selector: 'portBody',
                    attrs: {
                      magnet: 'true',
                      r: 6,
                      fill: '#fff',
                      stroke: '#000',
                      'stroke-width': 2,
                    },
                  },
                ],
              })
    
              graph.addNode({
                x: 320,
                y: 120,
                width: 100,
                height: 40,
                label: 'Hello',
                ports: [
                  { id: 'in-1', group: 'in',label:{text:{text:'in-1'}} },
                  { id: 'out-1', group: 'out',label:{text:{text:'out-1'}} },
                ],
              })
    
    
              graph.addNode({
                x: 140,
                y: 240,
                width: 100,
                height: 40,
                label: 'Target',
                ports: [
                  { id: 'in-1', group: 'in' },
                  { id: 'out-1', group: 'out' },
                ],
              })
    
              graph.addNode({
                x: 40,
                y: 40,
                width: 100,
                height: 40,
                label: 'Source',
                ports: [
                  { id: 'in-1', group: 'in' },
                  { id: 'out-1', group: 'out' },
                ],
              })
    
    
              graph.on('edge:mouseenter',({cell})=>{
                  cell.addTools([
                    {
                        name:'source-arrowhead',
                        args:{
                            attrs:{
                                fill:"green"
                            }
                        }
                    },{
                        name:'target-arrowhead',
                        args:{
                            attrs:{
                                fill:'red'
                            }
                        }
                    }
                  ])
              })
    
    
              graph.on('edge:mouseleave',({cell})=>{
                  cell.removeTools()
              })
            
    
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:18 工具Tools

          本文链接:https://www.haomeiwen.com/subject/npeozltx.html