代码取自 https://github.com/mjf1310/workflow_web.git 的代码片段。
如下：
_this.drawStart = function(eleM,x,y,r){
var svg;
if(eleM&&eleM.length>0){
svg = d3.select(eleM);
}else{
return false;
}
var startDataObj = _DrawDataObjFactory.createDrawDataObj("startCircle",x,y,x+r,y+r,r,0,0,0,0,0,0);
_DrawDataObjFactory.saveDataNode(startDataObj);
var g = svg.append("g");
var startObj = g.append("circle");
startObj.attr("id",startDataObj.id)
.attr("name",startDataObj.name)
.attr("cx", x+r)
.attr("cy", y+r)
.attr("r", r)
.attr("opacity","0.5")
.attr("fill","#F0E68C")
.attr('stroke','blue')
.attr('stroke-width',1);
startObj.on("mouseup",function(e){
_this.graphMouseUp(e);
});
startObj.on("mousedown",function(e){
_this.graphMouseDown(e);
});
_this.dynamicCreateContextMenu(startDataObj.id);
var startTextDataObj = _DrawDataObjFactory.createDrawDataObj("startText",x+r/2,y+r,x,y,r,0,0,0,0,0,0);
g.append("text")
.attr("id",startTextDataObj.id)
.attr("name",startTextDataObj.name)
.attr("x",x+r/2)
.attr("y",y+r)
.attr("font-family","STSong")
.attr("font-size","30")
.attr("fill","blue")
.attr("stroke","black")
.text("开始")
.call(_this.dragText());
return g.node();
};
以下为事件监听代码，但是mouseup事件的代码不能触发执行。
startObj.on("mouseup",function(e){
_this.graphMouseUp(e);
});
startObj.on("mousedown",function(e){
_this.graphMouseDown(e);
});
以下为事件监听函数
_this.graphMouseDown = function(e){
if (d3.event.button != 0 && d3.event.buttons!=1){
return false;
}
/**
* mouseup事件失效的解决方案
*/
_this.d3PauseEvent(e);
var drawId = _this.param.drawId;
/**var self = $(e.currentTarget);**/
var self = d3.select(d3.event.currentTarget);
var id = self.attr("id");
if(drawId && drawId.length>0){
/**var offsetX = e.offsetX;
var offsetY = e.offsetY;
var x = e.pageX;
var y = e.pageY;**/
var e1 = d3.event;
var offsetX = e1.offsetX;
var offsetY = e1.offsetY;
var x = e1.x;
var y = e1.y;
var drawDataObj;
if('arrow'==drawId){
drawDataObj = _DrawDataObjFactory.createDrawDataObj("arrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+50,y+80);
}else if('horitionalArrow'==drawId){
drawDataObj = _DrawDataObjFactory.createDrawDataObj("horitionalArrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+85,y+85);
}else if('verticalArrow'==drawId){
drawDataObj = _DrawDataObjFactory.createDrawDataObj("verticalArrow",x,y,x+50,y+45,0,w,h,x+50,y+10,x+85,y+80);
}else{
return;
}
var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
drawDataObj.preId = drawDataObjVal.id;
drawDataObj.preObj = drawDataObjVal;
drawDataObjVal.nextId = drawDataObj.id;
drawDataObjVal.nextObj = drawDataObj;
_this.edge.prefObj = drawDataObjVal;
}
_this.edge.drawDataObj = drawDataObj;
_this.edge.currentObj = drawDataObj;
_this.edge.pathData = [];
var data = [];
data.push(x);
data.push(y);
_this.edge.pathData.push(data);
var path = d3.path();
path.moveTo(x,y);
_this.edge.path = path;
}
};
_this.graphMouseUp = function(e){
if (d3.event.button != 0 && d3.event.buttons!=1){
return false;
}
/**var self = $(e.currentTarget);**/
var self = d3.select(d3.event.currentTarget);
var id = self.attr("id");
var drawId = _this.param.drawId;
if(drawId && drawId.length>0){
var svg = d3.select("#drawMainDiv svg[id=draw_bg_svg]");
if('arrow'==drawId){
var g = svg.append("g");
var pathObj = g.append("path");
_this.edge.path.closePath();
pathObj.attr("id",_this.edge.drawDataObj.id)
.attr("name",_this.edge.drawDataObj.name)
.attr("d", _this.edge.path)
.attr("fill","none")
.attr("stroke","#00FF00")
.attr("stroke-width",3)
//.call(_this.addZoomTransform())
.call(_this.dragPath());
pathObj.on("mousedown",function(e){
_this.addClick(e);
});
_this.edge.drawDataObj.path = _this.edge.path;
var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
_DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj);
_DrawDataObjFactory.updateDataNode(_this.edge.prefObj);
_this.edge.nextObj = drawDataObjVal;
_this.edge.drawDataObj.nextId = drawDataObjVal.id;
_this.edge.drawDataObj.nextObj = drawDataObjVal;
_DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj);
drawDataObjVal.preId = _this.edge.drawDataObj.id;
drawDataObjVal.preObj = _this.edge.drawDataObj;
_DrawDataObjFactory.updateDrawDataObj(drawDataObjVal);
_DrawDataObjFactory.updateDataNode(drawDataObjVal);
}
_DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj);
//pathObj.call(_this.addZoomTransform());
return g.node();
}
if('horitionalArrow'==drawId){
var g = svg.append("g");
var pathObj = g.append("path");
_this.edge.path.closePath();
pathObj.attr("id",_this.edge.drawDataObj.id)
.attr("name",_this.edge.drawDataObj.name)
.attr("d", _this.edge.path)
.attr("fill","none")
.attr("stroke","#00FF00")
.attr("stroke-width",3)
//.call(_this.addZoomTransform())
.call(_this.dragPath());
pathObj.on("mousedown",function(e){
_this.addClick(e);
});
var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
_DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj);
_DrawDataObjFactory.updateDataNode(_this.edge.prefObj);
_this.edge.nextObj = drawDataObjVal;
_this.edge.drawDataObj.nextId = drawDataObjVal.id;
_this.edge.drawDataObj.nextObj = drawDataObjVal;
_DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj);
drawDataObjVal.preId = _this.edge.drawDataObj.id;
drawDataObjVal.preObj = _this.edge.drawDataObj;
_DrawDataObjFactory.updateDrawDataObj(drawDataObjVal);
_DrawDataObjFactory.updateDataNode(drawDataObjVal);
}
_this.edge.drawDataObj.path = _this.edge.path;
_DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj);
//pathObj.call(_this.addZoomTransform());
return g.node();
}
if('verticalArrow'==drawId){
var g = svg.append("g");
var pathObj = g.append("path");
_this.edge.path.closePath();
pathObj.attr("id",_this.edge.drawDataObj.id)
.attr("name",_this.edge.drawDataObj.name)
.attr("d", _this.edge.path)
.attr("fill","none")
.attr("stroke","#00FF00")
.attr("stroke-width",3)
//.call(_this.addZoomTransform())
.call(_this.dragPath());
pathObj.on("mousedown",function(e){
_this.addClick(e);
});
var drawDataObjVal = _DrawDataObjFactory.getDrawDataObjById(id);
if(drawDataObjVal && typeof(drawDataObjVal)=="object"){
_DrawDataObjFactory.updateDrawDataObj(_this.edge.prefObj);
_DrawDataObjFactory.updateDataNode(_this.edge.prefObj);
_this.edge.nextObj = drawDataObjVal;
_this.edge.drawDataObj.nextId = drawDataObjVal.id;
_this.edge.drawDataObj.nextObj = drawDataObjVal;
_DrawDataObjFactory.updateDrawDataObj(_this.edge.drawDataObj);
drawDataObjVal.preId = _this.edge.drawDataObj.id;
drawDataObjVal.preObj = _this.edge.drawDataObj;
_DrawDataObjFactory.updateDrawDataObj(drawDataObjVal);
_DrawDataObjFactory.updateDataNode(drawDataObjVal);
}
_this.edge.drawDataObj.path = _this.edge.path;
_DrawDataObjFactory.saveDataLine(_this.edge.drawDataObj);
//pathObj.call(_this.addZoomTransform());
return g.node();
}
}
};
mouseup事件监听出问题了。
