Jointjs初认识

最近在研究Jointjs，这个做流程图、工作表、图标真的是很强大：

1、新建画板、画布

joint.setTheme('modern');                 //设置主题样式
var graph = new joint.dia.Graph();        //新建画板
var paper = new joint.dia.Paper({         //新建画布
    el: $('#paper'),
    width: 1200,
    height: 500,
    gridSize: 1,
    model: graph,
    perpendicularLinks: true,
    restrictTranslate: true //,
    //elementView: ElementView,
    //linkView:LinkView 
});

2、修改画布大小

paper.setDimensions(width, height);   

3、清除图标样式

  //清除原样式
  graph.clear();

4、自定义画图

var member = function(x,y,width,height,z_index,dataId,pid,background,color,value,graphtype) {
	debugger;
    var cell = new joint.shapes.org.Member({
    position: { x: x, y: y },                      //图在网页中的绝对位置
    size:{width:width,height:height},              //图的大小
    dataId:dataId,                                 //自定义属性
    id:dataId,                                     //自定义属性
    pid:pid,                                       //自定义属性
    graphType:graphtype,
    z:z_index,                                     //图表的显示层级
    attrs: {                                       //attrs下都是设置的样式
        '.card': { fill: background, stroke: color,'stroke-width': 1 ,rx:0, ry:0},   //改变图形形状
        '.name': {text: '', 'font-size': 9, 'text-decoration': 'none', 'ref-x': 0.5, 'ref-y': 0.4,'x-alignment': 'middle', 'word-spacing': '-1px', 'letter-spacing': 0 },
        '.name2': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
        '.rank': { fill: "black", text: '', 'ref-x': 0.95, 'ref-y': 0.05, 'font-family': 'Arial'  ,'text-decoration': 'none','font-size': 10 },
        '.name4': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
        '.name5': { fill: "red", text: '', 'ref-x': 0.95, 'ref-y': 0.7, 'font-family': 'Arial'  },
        '.name6': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
        '.name7': { fill: "red", text: '', 'ref-x': 0.95, 'ref-y': 0.7, 'font-family': 'Arial'  },
        '.name8': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
        '.name9': { fill: "red", text: '', 'ref-x': 0.95, 'ref-y': 0.7, 'font-family': 'Arial'  },
        '.name10': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
        '.btn.edit': { 'ref-dx': -80,'ref-y': 5, 'ref': '.card', event: 'element:edit' },
        '.btn>rect': { height: 20, width: 45, rx:0, ry:0, fill: 'transparent', 'stroke-width': 1 },    //给EDIT加的边框
        '.btn.edit>text': { fill: background,'font-size': 12, 'font-weight': 500, stroke: "#000", x: 50, y: 15, 'font-family': 'Sans Serif' }
    }
    }).on({                //设置修改的事件
        'change:name': function(cell, name) {
        		cell.attr('.name/text', joint.util.breakText(name, { width: 50, height: 45 }, cell.attr('.name')));
        },
       'change:name3': function(cell, name3) {
    	   if(name3>1){
            cell.attr('.rank/text', joint.util.breakText(name3, { width: 50, height: 45 }, cell.attr('.rank')));
    	   }else{
    		   cell.attr('.rank/text', joint.util.breakText('', { width: 50, height: 45 }, cell.attr('.rank')));
    	   }
        }
    }).set({                   //重新给定修改后的属性
        name: value[0],
        name2:value[1],
        name3:value[2],
        name4:value[3],
        name5:value[4],
        name6:value[5],
        name7:value[6],
        name8:value[7],
        name9:value[8],
        name10:value[9],
        name11:value[10] 
    });
    graph.addCell(cell);       //将图加入到画板中
    return cell;
};

5、自定义画线

function link(source, target, breakpoints) {
    var cell = new joint.dia.Link({
        source: { id: source.id },       //需要连接的起点
        target: { id: target.id },       //需要连接的终点
        vertices: breakpoints,           //折线
        attrs: {                         //设置样式
            '.connection': {
                'fill': 'none',
                'stroke-width': '2',
                'stroke': '#4b4a67'
            }
        }

    });
    graph.addCell(cell);
    return cell;
}

6、获取当前图标的对象

currentModel=elementView.model;      //elementView是画完图后的返回值

7、属性修改事件

function property(){
	currentData=findById(data,currentModel.attributes.id);
		 //右键隐藏
		  menu.style.visibility = "hidden";
		  joint.setTheme('material');
		    var inspector = new joint.ui.Inspector({      //创建对话框
		        cell: currentModel,                       //传入当前图标对应的对象
		        live:false,
		        inputs: {
		            'name': {                              
		                 type: 'text',
		                 label: '文档名称',
		                 index:1
		             },
		             'name2': {
		                 type: 'text',
		                 label: '活动配置',
		                 index: 2
		             },
		             'name3': {
		                 type: 'text',
		                 label: '数量',
		                 index: 3
		             },
		             'name4': {
		                 type: 'text',
		                 label: '编号',
		                 index: 4
		             },
		             'name5': {
		                 type: 'text',
		                 label: '图号',
		                 index: 5
		             },
		             'name6': {
		                 type: 'text',
		                 label: '规格型号',
		                 index: 6
		             },
		             'name7': {
		                 type: 'text',
		                 label: '名称',
		                 index: 7
		             },
		             'name8': {
		                 type: 'text',
		                 label: '来源',
		                 index: 8
		             },
		             'name9': {
		                 type: 'text',
		                 label: '备注',
		                 index: 9
		             },
		             'name10': {
		                 type: 'text',
		                 label: '下料长度',
		                 index: 10
		             },
		             'name11': {
		                 type: 'text',
		                 label: '底数',
		                 index: 11
		             }
		        } 
		    }); 
		    var dialog = new joint.ui.Dialog({
		        type: 'inspector-dialog',
		        width: 260,
		        title: 'Edit Member', 
		        closeButton: false,
		        content: inspector.render().el,
		        buttons: [{
		            content: 'Cancel',
		            action: 'cancel'
		        }, {
		            content: 'Apply',
		            action: 'apply'
		        }]
		        
		    });

		    dialog.on({                                   //对话框事件
		        'action:cancel': function() {
		            inspector.remove();
		            dialog.close();
		        },
		        'action:apply': function() {
		            //将当前graph的11个value值存在data中
		            inspector.updateCell();
		            inspector.remove();
		            dialog.close();
		            getDataByGraph();
		        }
		    });
		    dialog.open(); 
    //设置弹框的显示位置
    var pos=$(".joint-dialog.joint-theme-material .fg");       
    pos.css({'position':'absolute','left':currentModel.position().x,'top':currentModel.position().y+10});
}

8、设置对话框中inpu和label一行显示

.joint-inspector .text-field{
  padding: 10px;
}
.joint-inspector .text-field label{
  display: inline-block;
  width:60px;
  text-align: right;
}
.joint-inspector .text-field .input-wrapper{
  display: inline-block;
}

样式：

9、鼠标右键事件

paper.on('cell:contextmenu',function(elementView, evt, x, y){ 
	currentid=elementView.model.attributes.id;
	currentpid=elementView.model.attributes.pid;
	currentModel=elementView.model;
	currentType=elementView.model.attributes.graphType;
	pid=currentid;
	if(currentType=="part"){
		$("ul li").eq(0).css({"display":"none"});
	}else{
		$("ul li").eq(0).css({"display":"block"}); 
	}
	//阻止默认的右键事件
  evt.preventDefault();
  //新菜单位置跟随鼠标
   //新菜单位置跟随鼠标
  menu.style.left = x+"px";
  menu.style.top = y+"px";
  //显示菜单
  menu.style.visibility = "visible";
});