jointjs3 -- 加强小demo

最新推荐文章于 2024-05-10 17:09:09 发布
最新推荐文章于 2024-05-10 17:09:09 发布
阅读量1.7k 收藏
点赞数
文章标签： jointjs js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40285497/article/details/81233607
版权

根据传进来的数据，生成相应的树图，点击节点，出现弹窗，可以对节点进行增删和增加一条线，同事改变了数据，后台需要的数据直接传sharingMsg，这个数据是图当前的状态。效果图和代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <link type="text/css" rel="stylesheet" href="assets/css/joint.css" />
    <script type="text/javascript" src="jquery-1.12.4.js" ></script>
    <script type="text/javascript" src="lodash.js" ></script>
    <script type="text/javascript" src="assets/js/backbone-min.js" ></script>
    <script type="text/javascript" src="assets/js/joint.js" ></script>
    <style>
        .treeOperate{
            position: absolute;
            width: 100px;
            height: 40px;
            padding: 20px;
            background: url("login_bg.jpg") no-repeat center/100% 100% content-box;
        }
        .treeOperate a{
            position: absolute;
        }
        .treeOperate .addEle{
            bottom: 0;
            left: 0;
        }
        .treeOperate .addLink{
            bottom: 0;
            right: 0;
        }
        .treeOperate .deleteEle{
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div id="paper" class="paper"></div>
</body>
<script>

    //删除一个节点，要知道到父亲节点，删除父亲节点中相应childrenMsg中的元素以及linkMsg中相应元素。
    //然后在用找到这个节点以及他的所有子节点，删除

    //新增一个节点，要给sharingMsg中相应元素增加id，childrenMsg，linkMsg等信息
    //还要insideMsg中增加相应内容

    let graph = new joint.dia.Graph;

    let paper = new joint.dia.Paper({
        el: document.getElementById('paper'),
        model: graph,
        width: 600,
        gridSize: 10,
        drawGrid: true,
        background: {
            color: 'rgba(0, 255, 0, 0.3)'
        }
    });

    //生成节点,obj = {left,top,text}
    function createEle(obj) {
        let rect = new joint.shapes.standard.Rectangle();
        rect.position(obj.left, obj.top); //位置
        rect.resize(100, 40);   //大小
        rect.attr({
            body: {
                fill: 'blue',
                rx:20,  //rx,ry设置圆角
                ry:20,
            },
            label: {
                text: obj.text,
                fill: 'white'
            }
        });
        return rect;
    }

    //生成线 根据位置
    // custom link definition
    let CustomLink = joint.dia.Link.define('examples.CustomLink', {
        defaultLabel: {
            // attrs: { text: { text: '*' } }
        },
        smooth: true
    });
    //obj = {x1,y1,x2,y2}  obj ={source,x2,y2}
    function createLink(obj) {
        let link = new CustomLink({
            // source: { x: obj.x1, y: obj.y1 },
            source: { id: obj.source.id },
            target: { x: obj.x2, y: obj.y2 },
            // router: { name: 'manhattan' },
        });
        return link;
    }

    //根据起始元素生成的线
    function createLinkEle(source, target){
        let link = new CustomLink({
            source: { id: source.id },
            target: { id: target.id },
            // router: { name: 'manhattan' },
        });
        return link;
    }

    // graph.addCell();

    //定义一个装删除元素id的数组，每当删除元素时，存入id，每当生成元素时，先取这里面的值作为id
    //为空时取sharingMsg的length作为id
    let hadDelEles = [];

    //这个信息是接收来自后台的数据,其中的cid，parentID都是会变的，不是固定的，只起到判断父子节点的作用
    let sharingMsg = [
        {
            id:1,
            text:'第一规则',
            sign:1000,  //sign判断元素所在行，越上面的越大，确定元素所在y轴的位置
            layer:1,    //layer表示元素所在层级，确定元素所在x轴的位置
            parentID:null,
            childrenMsg:[2,3,4],
            //连接信息，判断
            linkMsg:['通过','拒绝','人工复核']
        },
        {
            id:2,
            parentID:1,
            text:'第2规则',
            sign:999,
            layer:2,
            childrenMsg:[5,6],
            linkMsg:['通过','拒绝']
        },
        {
            id:3,
            parentID:1,
            text:'第3规则',
            sign:1000,
            layer:2,
            childrenMsg:[],
            linkMsg:[]
        },
        {
            id:4,
            parentID:1,
            text:'第4规则',
            sign:1001,
            layer:2,
            childrenMsg:[],
            linkMsg:[]
        },
        {
            id:5,
            parentID:2,
            text:'第5规则',
            sign:998,
            layer:3,
            childrenMsg:[],
            linkMsg:[]
        },
        {
            id:6,
            parentID:2,
            text:'第6规则',
            sign:999,
            layer:3,
            childrenMsg:[],
            linkMsg:[]
        }
    ];
    //定义一个存放被删除元素id的数组，当新建时，从这里找，如果这个数组有，就从这个数组中取，如果没有，就从
    //设为sharingMsg的length

    //这个数组存放界面中存在的节点
    let insideMsg = [];

    //调整画布大小函数，返回一个对象，包含树的最大最小层，包含输的最大最小sign
    function adjustPaperSize() {
        //根据下面的值，判断画布大小，元素位置
        let maxSign = 0,
            minSign = sharingMsg[0].sign,
            maxLayer = 0,
            minLayer = sharingMsg[0].layer;
        for(let i=0;i<sharingMsg.length;i++){
            if(sharingMsg[i].layer<minLayer){
                minLayer = sharingMsg[i].layer;
            }
            if(sharingMsg[i].layer>maxLayer){
                maxLayer = sharingMsg[i].layer;
            }
            if(sharingMsg[i].sign<minSign){
                minSign = sharingMsg[i].sign;
            }
            if(sharingMsg[i].sign>maxSign){
                maxSign = sharingMsg[i].sign;
            }
        }
        paper.$el.css({
            width:(maxSign - minSign + 1) * 150 +50,
            height:(maxLayer - minLayer + 1) * 100 + 40
        });
        return {
            maxSign:maxSign,
            minSign:minSign,
            maxLayer:maxLayer,
            minLayer:minLayer
        }
    }

    //打开界面时渲染生成树图
    function newTreeChart() {
        //调整画布大小
        let tempSize = adjustPaperSize();
        let  minSign = tempSize.minSign,
            minLayer = tempSize.minLayer;
        //生成元素
        for(let i=0;i<sharingMsg.length;i++){
            //一个元素长100，宽40，水平间隔50，第一个距离左侧50，垂直距离20，最上一个距离上边30；
            let left = (sharingMsg[i].sign - minSign) * 150 + 50;
            let top = (sharingMsg[i].layer - minLayer) * 100 + 30;
            let obj = {
                left:left,
                top:top,
                text:sharingMsg[i].text
            };
            let ele = createEle(obj);
            insideMsg.push({
                self:ele,
            });
            //下面这句该变sharingMsg相应节点的cid，为了之后的操作
            sharingMsg[i].cid = ele.cid;
            graph.addCell(ele)
        }

        //生成线
        //遍历每个节点，判断是否要生成线
        sharingMsg.forEach(function (item) {
            //如果节点存在孩子，进一步操作
            if(item.childrenMsg.length>0){
                //存在子元素，需要连线，先找到来源元素source
                let source = null;
                //insideMsg里面才存有真正的节点
                for(let i=0;i<insideMsg.length;i++){
                    if(item.cid == insideMsg[i].self.cid){
                        source = insideMsg[i].self;
                        break;
                    }
                }
                console.log(source);

                let nowItem = item;
                //利用当前节点的childrenMsg中的子元素id从sharingMsg中找到相应点
                item.childrenMsg.forEach(function (item,index) {
                    console.log(3);
                    //设置目标元素
                    let target = null;
                    let tempTarget = null;
                    //设置线条颜色
                    let color = nowItem.linkMsg[index];
                    for(let i=0;i<sharingMsg.length;i++){
                        if(item == sharingMsg[i].id){
                            tempTarget = sharingMsg[i];
                            //获取真正的target
                            for(let j=0;j<insideMsg.length;j++){
                                if(tempTarget.cid == insideMsg[j].self.cid){
                                    target = insideMsg[i].self;
                                    let link = createLinkEle(source,target);
                                    if(color == '通过'){
                                        link.attr({
                                            '.connection': { stroke: 'green'},
                                        });
                                    }
                                    if(color == '拒绝'){
                                        link.attr({
                                            '.connection': { stroke: 'red',},
                                        });
                                    }
                                    if(color == '人工复核'){
                                        link.attr({
                                            '.connection': { stroke: 'blue',},
                                        });
                                    }
                                    graph.addCell(link);
                                    break;
                                }
                            }
                        }
                    }
                })
            }
        });
    }
    newTreeChart();

    //元素点击事件
    paper.on('cell:pointerclick',function (e,d) {
        console.log(e);
        console.log(d);
        let target = null;
        for(let i=0;i<insideMsg.length;i++){
            if(e.model.cid == insideMsg[i].self.cid){
                target = insideMsg[i].self;
            }
        }
        newTreeOperate(target);
        d.stopPropagation();
    });

    //生成
    function newTreeOperate(obj) {
        let html = '<div class="treeOperate">\n' +
            '    <a href="javascript:;" class="deleteEle">del</a>\n' +
            '    <a href="javascript:;" class="addEle">ele</a>\n' +
            '    <a href="javascript:;" class="addLink">link</a>\n' +
            '</div>';
        $('body').append(html);
        $('.treeOperate').css({
            //因为操作弹窗的直接父元素是body，$("body").append()所以位置要微调。
            //因为操作弹窗的直接父元素是body，$("body").append()所以位置要微调。
            left:obj.attributes.position.x - 12,
            top:obj.attributes.position.y - 12
        });
        $('body').on('click',function () {
            $('.treeOperate').remove();
        });
        $('.addEle').on('click',function () {
            let tempObj = {
                left:obj.attributes.position.x + 150,
                top:obj.attributes.position.y,
                text:'请选择规则',
            };
            let cell = createEle(tempObj);
            cell.attr('text/fill','black');
            cell.attr('rect/fill','#fff');
            //新增节点后要给sharingMsg中这个节点的父亲的childrenMsg中加入此节点id
            //要在sharingMsg中加入此节点相应信息，在insideMsg中加入此节点相应信息
            insideMsg.push({
                self:cell
            });
            let tempId = 0;
            if(hadDelEles.length>0){
                tempId = hadDelEles.pop();
            }else{
                tempId = sharingMsg.length;
            }
            let tempParentID = 0,
                tempSign = 0,
                tempLayer = 0;
            //找到此节点的父亲节点，为父亲节点加上孩子节点（该节点）的信息（id）
            sharingMsg.forEach(function (item) {
                if(item.cid == obj.cid){
                    tempParentID = item.id;
                    item.childrenMsg.push(tempId);
                    tempSign = item.sign + 1;
                    tempLayer = item.layer;
                }
            });
            sharingMsg.push({
                id:tempId,
                cid:cell.cid,   //绑定和真正元素的联系
                parentID:tempParentID, //这个id也要改
                text:'请选择规则',
                sign:tempSign,
                layer:tempLayer,
                childrenMsg:[],
                linkMsg:[]
            });
            graph.addCell(cell);
            let link = createLinkEle(obj, cell);
            graph.addCell(link);
            adjustPaperSize();
        });

        $('.addLink').on('click',function () {
            let tempObj = {
                source:obj,
                x2:obj.attributes.position.x + 150,
                y2:obj.attributes.position.y + 10
            };
            let link = createLink(tempObj);
            graph.addCell(link);
        });

        $('.deleteEle').on('click',function () {
            //删除元素时，在sharingMsg中先删除父亲节点中childrenMsg中相应id，在删除该节点以及他的子节点，删除的节点先存入一个数组nowDel
            //根据nowDel数组中的节点，在insideMdg这个真正存在节点的数组中删除相应节点。
            //这个a为需要删除的节点，
            let a = null;
            console.log(sharingMsg);
            for(let i=0;i<sharingMsg.length;i++){
                if(obj.cid == sharingMsg[i].cid){   //真正的节点和sharingMsg是靠cid来绑定相关的
                    a = sharingMsg[i]
                }
            }
            console.log(1111);
            //在父元素中删除该子节点的id
            sharingMsg.forEach(function(item){
                if(item.id == a.parentID){
                    let tempIndex = item.childrenMsg.indexOf(a.id);
                    item.childrenMsg.splice(tempIndex,1);
                }
            });

            let nowDel = [a];
            function fn(f) {
                //这里应该是可以优化的，push到nowDel的可以删除掉
                f.childrenMsg.forEach(function(item,index,array){
                    let ThisItem = item;
                    sharingMsg.forEach(function (item, index, array) {
                        if(ThisItem == item.id){
                            nowDel.push(item);
                            fn(item);
                        }
                    })
                });
            }
            fn(a);
            nowDel.forEach(function(item,index){
                for(let i=insideMsg.length-1;i>=0;i--){
                    if(item.cid == insideMsg[i].self.cid){
                        console.log(22);
                        insideMsg[i].self.remove();
                        insideMsg.splice(i,1);
                    }
                }
                for(let i=sharingMsg.length-1;i>=0;i--){
                    if(item.id == sharingMsg.id){
                        sharingMsg.splice(i,1);
                    }
                }
            })

        });
    }
</script>
</html>
一叶知秋9307
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JointJS Demo
11-16
JointJS 结合Rappid Demo
jointjs 例子 左边组件框 选则 可以在右边进行流程组合
12-03
jointjs 例子 左边组件框 选则 可以在右边进行流程组合 jointjs 组件框 例子 jointjs例子 流程组合
JointJS+ v3.7 crack
q2315702359的博客
05-31 665
　　Improved support for foreign object (HTML) - Foreign objects have become a standard in web development, and JointJS+ has now introduced comprehensive and fully-featured support for foreign objects within SVG context. This means that you can now display H
JointJS简单小例子
qq_40858865的博客
09-29 1867
JointJS是一个HTML5的JavaScript库，用于创建完全互动式的图表，它极易上手且操作简单，并且支持所有的现代浏览器，对于时间紧迫的我们非常有利。我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，它具有SVG的所有优点，但是我们却不必在意SVG的那些元素是怎么定义的，不用在意那些标签规则，我们更注重的是逻辑，只...
【数据流图】用JointJs实现数据流图（二）
最新发布
VVVVV
05-10 312
JointJS基本使用教程
JointJS动态流程图
热门推荐
前端恶霸
05-28 1万+
    最近公司有个导航项目需要做个流程图比较复杂的那种，作为一个前端小菜也是很蒙的，要求就两条一：动态加载流程图；二：动态连线；这两点要求也是难住了一阵呢，最后选择了jointJS，选着原因官网API很详细，代码量比较少封装起来使用也很便捷，进阶文档基础略过，没接触过得可以去在官网先学习一下，废话不多少直接上硬菜。     我这块写了两个一个是节点型流程图和关系行流程图。（源码在下一篇文章可以...
vue工作流bpmn-js-----demo
09-07
由于公司前段时间在打造一个开发平台，而我主要负责工作流模块，于是就接触到了`bpmn-js`。但众所周知，`bpmn-js` 文档是全英的，相关资料少，填坑的人更少，所以开发起来并没有那么好上手。于是我研究了一段时间，...
js-xlsx-demo
08-05
js-xlsx的演示案例，非常的简单。容易操作，直接上手，不明白的可以 加我，打疑。哈哈希望大家多多评论。谢谢了。
萤石视频demo ezuikit-js
01-19
萤石视频Demo是针对开发者的一款基于EzUIkit-js的示例项目，旨在帮助程序员快速理解和集成萤石视频相关的功能到自己的应用中。EzUIkit-js是一个专门为萤石视频服务设计的JavaScript库，它提供了丰富的API接口和组件...
jointjs_demo.rar
12-17
在"jointjs_demo.rar"压缩包中包含的两个案例，分别展示了JointJS的基本用法和进阶应用： 1. **基础案例**：这个案例通常会演示如何创建基本图形和连接线，以及如何响应用户的交互操作。通过实例代码，我们可以学习...
jointjs-haxe-demo:haXe中jointjs的沙盒演示
06-18
Jointjs-haxe-demo 在haXe 中的jointjs 沙盒演示。 设置 取决于 m3.jq.JQ m3.util.LambdaX 符号链接 haxe/m3 目录在 /haxe/src/m3 编译haxe： cd /haxe haxe build.hxml
jointjs.zip
07-16
jointjs.zip
前端项目-jointjs.zip
09-02
前端项目-jointjs,JavaScript diagramming library
Ajax在实时绘制SVG图表中的应用研究及实例详解
05-21
Ajax在实时绘制SVG图表中的应用研究及实例详解
类似UML可拖拽图形插件JointJS
07-11
前些日子公司让做一个因子和关系的项目，要求从数据库中取出因子和关系，然后生成可拖拽的图形，拖拽至后可以动态保存坐标到数据库，找了很久终于找到这个插件，其中里面还有很多UML类型的图，生成各种图和箭头等很方面
jointJS(四）--关于node的左击与右击
joyce_yjh的博客
11-29 1304
正如标题，关于node的左击右击。 左击paper.$el.on('click', function (evt) { evt.stopPropagation(); evt.preventDefault(); var cellView = paper.findView(evt.target); if (cellView) { ... } })右
使用JointJS绘制流程图1
路过君的博客
07-16 910
JointJS官网 依赖：jquery，lodash，backbone 如果使用自动排版，需要添加依赖：dagre，graphlib 文中样例使用的资源文件 样例 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.min.js
JointJS 根据内容调整画布尺寸
路过君的博客
07-20 408
用法 paper.fitToContent({ padding: 20, // 内容周围留白大小 allowNewOrigin: 'any' // 注意此配置如果不填，padding的top和left属性不会生效 }) 源码 fitToContent: function(gridWidth, gridHeight, padding, opt) { // alternatively function(opt) if (isObject$1(gridWidth)) {
JointJS
p656456564545的专栏
08-06 5816
JointJS介绍 时间 2014-03-03 15:21:24  GroovyQ 原文  http://www.groovyq.net/node/733 主题 SVG JavaScript 最近因项目需要，要在页面实现可操作的流程图——根据状态量的不同演示对应流程，这就不是单单加载一个图片的问题了，还存在控制与元素变化，用什么实现怎么实现，是个让人头疼的问题。
在linux中如何通过fork函数构造父子进程树 demo3---demo3---demo3---demo3---demo3---demo3---demo3---demo3---demo3---demo3
04-10
在Linux中，可以使用fork函数来创建父子进程树。fork函数会创建一个新的进程，该进程是调用fork函数的进程的副本。以下是通过fork函数构造父子进程树的示例代码： ```c #include <stdio.h> #include <unistd.h> void create_process(int level) { if (level == 0) { printf("demo3\n"); return; } pid_t pid = fork(); if (pid < 0) { printf("Fork failed\n"); return; } else if (pid == 0) { create_process(level - 1); return; } else { wait(NULL); printf("demo3\n"); return; } } int main() { int level = 10; create_process(level); return 0; } ``` 在上述代码中，create_process函数用于递归地创建父子进程。当level为0时，打印出"demo3"；否则，通过fork函数创建一个子进程，并在子进程中再次调用create_process函数。父进程会等待子进程执行完毕后再打印出"demo3"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值