master

分支 (1)

管理

管理

master

jointjs-demo
/
test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <link type="text/css" rel="stylesheet" href="css/joint.css" />
  	<!--jointjs 依赖库start -->
  <script src="js/jquery/jquery.js"></script>
  <script src="js/jointjs/lodash.js"></script>
  <script src="js/jointjs/backbone.js"></script>
  <script src="js/jointjs/joint.js"></script>
  <!-- jointjs依赖库end -->
</head>
<style>
    .svgEleOperate{
        position: absolute;
        width: 140px;
        padding: 10px;
        border: 1px solid #000;
        background-color: #16fb09;
    }
    .svgEleOperate span{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 100%;
        border: 1px solid #000;
        border-radius: 15px;
        text-align: center;
        margin: 10px 0;
    }
    .svgEleOperate span:hover{
        background-color: dodgerblue;
        color: #fff;
    }
</style>
<body>
<div id="paper" class="paper"></div>
</body>
<script type="text/javascript">
    var graph = new joint.dia.Graph();

    var ElementView = joint.dia.ElementView.extend({
        pointerdown: function () {
            this._click = true;
            joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
        },
        pointermove: function(evt, x, y) {
            this._click = false;
            joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
        },
        pointerup: function (evt, x, y) {
            if (this._click) {
                // triggers an event on the paper and the element itself
                this.notify('cell:click', evt, x, y);
            } else {
                joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
            }
        }
    });
    var LinkView = joint.dia.LinkView.extend({
        addVertex: function(evt, x, y) {},
        removeVertex: function(endType) {},
        pointerdown:function(evt, x, y) {}
    });

    //定义画布
    var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 1200,
        height: 600,
        gridSize: 1,
        model: graph,
        elementView: ElementView,
        linkView:LinkView
    });
    //paper.$el.css('pointer-events', 'none')//去除默认样式，使所有事件不可用
    //定义形状
    var state = function(x, y, shape, background, text){
        var cell;
        if(shape==="rect"){
            cell = new joint.shapes.basic.Rect({
                position: { x: x, y: y },//坐标
                size: { width: 140, height: 30 },//宽高
                attrs: {
                    rect: {
                        rx:10,
                        ry:30,
                        // fill: {
                        //     type: 'linearGradient',
                        //     stops: [
                        //         { offset: '0%', color: background },//渐变开始
                        //         { offset: '100%', color: background }//渐变结束
                        //     ],
                        //     attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' },
                        // },
                        fill:background,
                        stroke: background,//边框颜色
                        'stroke-width': 1//边框大小
                    },
                    text: { text: text ,fill:'#fff'} //显示文字
                }
            });
        } else if(shape==="ellipse"){
            cell = new joint.shapes.basic.Ellipse({
                position: { x: x, y: y },//坐标
                size: { width: 140, height: 40 },//宽高
                attrs: {
                    ellipse: {
                        fill: {
                            type: 'linearGradient',
                            stops: [
                                { offset: '0%', color: background },//渐变开始
                                { offset: '100%', color: '#FFFFFF' }//渐变结束
                            ],
                            attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
                        },
                        stroke: background,//边框颜色
                        'stroke-width': 1//边框大小
                    },
                    text: { text: text } //显示文字
                }
            });
        }
        graph.addCell(cell);
        return cell;
    };


    //定义连线
    function link(source, target, label){
        var cell2 = new joint.dia.Link({
            source: { id: source.id },
            target: { id: target.id },
            labels: [{ position: 0.5, attrs: { text: { text: label || '', 'font-weight': 'bold' } } }],
            router: { name: 'manhattan' },//设置连线弯曲样式 manhattan直角
            toolMarkup:'<g></g>', // 去掉tool，包括红色x
            arrowheadMarkup:"<g></g>", //去掉两头的箭头
            attrs: {
                '.connection': {
                    stroke: '#333333',//连线颜色
                    'stroke-width': 2//连线粗细
                },
                '.marker-target': {
                    fill: '#333333',//箭头颜色
                    // d: 'M 10 0 L 0 5 L 10 10 z'//箭头样式
                }
            }
        });
        graph.addCell(cell2);
        return cell2;
    }

    //创建元素
    var start = state(100,100,"rect","#3989ff", "消费贷款分期");


    //创建连线
    // var line = link(start, state1);

    //给所有连接添加点击事件
    paper.on('link:pointerclick',function(e,d) {
        console.log(e)
        console.log(d)

    })


    //绑定一个标记，判段点击的位置是在哪里，在元素外就remove()弹窗
    var isRemovePopup = true;
    //给所有元素添加点击事件
    paper.on('cell:click',function(e,d) {
        var start = null;
        var startObj = null;
        for(var i=0;i<cellArr.length;i++){
            if(e.model.id == cellArr[i].self.id){
                start = cellArr[i].self;
                startObj = cellArr[i];
                break;
            }
        }

        var positionMsg = e.options.model.attributes.position;
        newPop(positionMsg.x,positionMsg.y+30,startObj);
        e.haveOperate = true;

    });


    var cellArr = [{
        self:start,
        sign:1000
    }];
    var linkArr = [];

    //生成弹窗函数
    function newPop(x,y,startObj) {
        var e = startObj.self;  //当前元素，连接的源
        var sign = startObj.sign;   //当前元素的标记，为了好改变位置
        console.log(x,y);
        $('.svgEleOperate').remove();
        var html = "<div class=\"svgEleOperate\">\n" +
            "    <span class=\"one\">一个</span>\n" +
            "    <span class=\"two\">两个</span>\n" +
            "    <span class=\"three\">三个</span>\n" +
            "</div>";
        $('body').append(html);
        if(x){
            $('.svgEleOperate').css({
                left:x
            })
        }
        if(y){
            $('.svgEleOperate').css({
                top:y
            })
        }

        var stateX = x + 200,
            stateY = y - 30;

        $(".one").one('click',function () {
            var start1 = state(stateX,stateY,"rect","#3989ff", "消费贷款分期1");
            var obj = {
                self:start1,
                sign:sign
            };
            cellArr.push(obj);
            var line1 = link(e, start1);
            $('.svgEleOperate').remove();
        });
        $(".two").one('click',function () {
            var start1 = state(stateX,stateY,"rect","#3989ff", "消费贷款分期1");
            var start2 = state(stateX,stateY,"rect","#3989ff", "消费贷款分期2");
            //生成两个时，判断标记比第一个小的都减少1，之后位置下降50
            for(var i=0;i<cellArr.length;i++){
                var dis = sign - cellArr[i].sign;
                if(dis>0){
                    cellArr[i].sign -=1;
                }
            }
            var obj = {
                self:start1,
                sign:sign
            };
            cellArr.push(obj);
            var obj2 = {
                self:start2,
                sign:sign-1
            };
            cellArr.push(obj2);
            var line1 = link(e, start1);
            var line2 = link(e, start2);
            $('.svgEleOperate').remove();
            adjustPosition(sign,stateY);
        });
        $(".three").one('click',function () {
            var start1 = state(stateX,stateY,"rect","#3989ff", "消费贷款分期1");
            var start2 = state(stateX,stateY,"rect","#3989ff", "消费贷款分期2");
            var start3 = state(stateX,stateY,"rect","#3989ff", "消费贷款分期3");
            //生成三个时，判断标记比第一个小的都减少1，之后位置下降50
            for(var i=0;i<cellArr.length;i++){
                var dis = sign+1 - cellArr[i].sign;
                if(dis>1){
                    cellArr[i].sign -=2;
                }else if( dis>0){
                    cellArr[i].sign -=1;
                }
            }
            var obj = {
                self:start1,
                sign:sign
            };
            cellArr.push(obj);
            var obj2 = {
                self:start2,
                sign:sign-1
            };
            cellArr.push(obj2);
            var obj3 = {
                self:start3,
                sign:sign-2
            };
            cellArr.push(obj3);
            var line1 = link(e, start1);
            var line2 = link(e, start2);
            var line3 = link(e, start3);
            $('.svgEleOperate').remove();
            adjustPosition(sign,stateY);
        });
    }

    //调整位置函数
    function adjustPosition(sign,stateY) {
        for(var i=0;i<cellArr.length;i++){
            var dis = sign - cellArr[i].sign;
            if(dis>0){
                var x = cellArr[i].self.position().x;
                cellArr[i].self.position(x,stateY+dis * 50);
            }
        }

        //扩大纸张
        var maxX = 0,
            maxY = 0;
        for(var j=0;j<cellArr.length;j++){
            if(cellArr[j].self.attributes.position.x>maxX){
                maxX = cellArr[j].self.attributes.position.x;
            }
            if(cellArr[j].self.attributes.position.y>maxY){
                maxY = cellArr[j].self.attributes.position.y;
            }
        }
        maxX+=200;
        maxY+=100;
        //如果大于纸张了，扩大纸张
        console.log(paper.options)
        if(maxX>paper.options.width){
            paper.$el.css({
                width:maxX
            })
        }
        if(maxX>paper.options.height){
            paper.$el.css({
                height:maxY
            })
        }
    }

    //一下为初始化时执行一次
    $(document).on('click','.svgEleOperate',function (e) {
        e.stopPropagation();
    });
    $(document).on('click','.joint-cell',function (e) {
        e.stopPropagation();
    });
    $(document).click(function () {
        $('.svgEleOperate').remove();
    });

</script>

<script>


		window.onload = function(){
			setTimeout(function(){
				let t = performance.timing
				console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
				console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
				console.log('request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0))
				console.log('解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0))
				console.log('白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0))
				console.log('domready时间 ：' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
				console.log('onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0))

				if(t = performance.memory){
					console.log('js内存使用占比 ：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
				}
			})
		}
		</script>
</html>