• JsPlumb在react的使用方法及介绍


    JsPlumbreact的使用方法及介绍

    一.相关资料来源:

    1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/           ———    一个翻译一半就不能打开的文档

    2.https://github.com/wangduanduan/jsplumb-chinese-tutorial          ———    一个事件方法很全的网站(推荐)

    3.https://wdd.js.org/jsplumb-chinese-tutorial/#/                                 ———    一个事件方法很全的网站(同上)

    4.https://www.cnblogs.com/Bryran/p/3950122.html        —————    jq ui 拖动

    二.引用库:

    版本:2.13.3

    库:https://github.com/jsplumb/jsplumb

    链接:https://pan.baidu.com/s/1EvftCI5gXRvoL6pNRenSpQ 

    提取码:z2t4

    React  vue :    npm   i   jsplumb

    注意:低版本需要引用jq 以及jq-ui,此版本不需要

    三.React使用方法:

    1. 在我的react项目中,分菜单栏和画布,菜单栏是可拖动子菜单,将菜单拖到画布上,在画布上进行对子菜单项目的操作,大概是这样:

    2. 在使用过程中,应为拖动事件,和画图事件都是要先有dom节点,所以,一定要有节点的时候再注册相应的监听事件:

            a.    React项目中要在 componentDidMount() 生命周期后开始操作,因为是单页面应用,要保证当前页面渲染完成后注册jsplumb实例,离开后要销毁实例所以

    let idePageJsPlumstance=’’;
        //初始化
        componentDidMount() {
            idePageJsPlumstance = jsPlumb.getInstance() //关键函数 注册jsplumb实例
            idePageJsPlumstance.setContainer ('flow-main')//设置面板
        },
        //离开
        componentWillUnmount() {
            if (idePageJsPlumstance) {
                idePageJsPlumstance.clear() //清空
            }
    },

             b.     在左侧子菜单渲染完后要注册拖拽事件,这里用的是jq ui 拖动 不熟悉的可以搜下jq ui  这里这样写的:

    //给span注册拖动事件
    $('#flow-btns').find('span').draggable({
                    helper: 'clone',//拖动样式
                    zIndex: 11,
                    scope: 'flowMainCanvas',//关键参数
                })

          Scope  //关键参数,被拖动子菜单和拖动到面板要对应相同

             c.   在面板中,要获取位置生成新的dom 对新dom注册事件, (此处以简写,具体方式根据实际项目来做)

    //样式
    let endAllPointStyle={
            endpoint: 'Dot', //端点的形状
            isSource: true, //是否可以拖动(作为连线起点)
            isTarget: true, //是否可以放置(连线终点)
    }
    //画图 $(
    '#flow-main').droppable ({ scope: 'flowMainCanvas', drop: function ( event, ui ) { let left = parseInt ( ui.offset.left) let top = parseInt ( ui.offset.top) let id = ‘node12’ let dom = “<span id=’+id+’ >’+ui.helper.context.dataset.text+’</span>” $ (this).append (dom) dom.css ('left', left).css ('top', top) idePageJsPlumstance.addEndpoint ( id, { anchor:"LeftMiddle" }, endAllPointStyle) //注册端点拖桶 idePageJsPlumstance.draggable ( id) //注册节点拖动 $ ('#' + id).draggable ({ containment:"parent", }) } })

             d.     同时要对线做一些事件,这里有

    //连接线的右键单击事件
     idePageJsPlumstance.bind ('contextmenu', function ( conn, e ) {
          e.preventDefault ()
          e.stopPropagation ()
         ///// ....
    })
    
    //连接线的单击事件
    idePageJsPlumstance.bind ('mousedown', function ( conn, e ) {
    ///// ....
    })
    
    //开始拖动新连接时
    idePageJsPlumstance.bind ('beforeDrag', function ( info )  {
    ///// ....
    })
    // 结束拖动新连接时
    idePageJsPlumstance.bind ('beforeDrop', function ( info )  {
    ///// ....
    }
    
    // 连接事件 注册线的参数
    idePageJsPlumstance.bind ('connection', function ( info ) {
    ///// ...
    })
    
    // 开始拖动现有连接
    idePageJsPlumstance.bind('beforeStartDetach',function (conn)  {
    ///// ....
    })
    
    //页面线的dom
    const connectors =idePageJsPlumstance.getAllConnections ()
    
    //删除点,线 节点
    idePageJsPlumstance.detach(con)
    idePageJsPlumstance.remove(id)
    idePageJsPlumstance.removeAllEndpoints(id)

    3.  储存和 回显 重新代码生成操作

      a .  储存的话,先将拖动的新增节点信息保存,比如left 、id、 top 固定信息保存

     再将线保存 线有五个参数 通过遍历idePageJsPlumstance.getAllConnections() //线数据获取,保存线的id、 sourceId、targetId 还有点锚点的起止位置参数

      b .  重新代码生成    还原节点后

    idePageJsPlumstance.ready (function () {
         idePageJsPlumstance.connect ({
                source: startKey,
                target:endKe,
                anchors: [sourcepoint, item.targetpoint ],
                endpoint: 'Dot',
                isSource: true,
                isTarget: true,
         })
    })

     再注册相应的拖拽事件

    四.总结:

    1. 代码回显时候显示连接线 jsPlumb.connect()
    2. 在项目中每个锚点是层级关系,层级叠加要处理好,
    3. 在拖拽事件中,生成点,再连线,注意好相关顺序,顺序不一样,影响不一样,
    4. 有些事件参数不起作用,需要代码控制。
    5. 自带zoom 要和位置等相结合使用,避免冒泡
  • 相关阅读:
    shiro密码的比对,密码的MD5加密,MD5盐值加密,多个Relme
    shiro权限配置的细节问题&认证
    shiro集成spring&工作流程&DelegatingFilterProxy
    shiro简单入门介绍
    springmvc小结(下)
    springmvc小结(上)
    springmvc(5)拦截器
    spring mvc(4)处理模型数据
    springmvc(3)注解
    深入理解javascript作用域系列第四篇——块作用域
  • 原文地址:https://www.cnblogs.com/wangyongping/p/13213179.html
Copyright © 2020-2023  润新知