fix:优化双击事件

This commit is contained in:
zhangyu
2020-12-18 11:51:43 +08:00
parent 737d1dc6b2
commit 299489faa6
2 changed files with 20 additions and 19 deletions

View File

@@ -452,10 +452,12 @@
}, },
hexagonSvgScale(center,item1,data,group,e){ hexagonSvgScale(center,item1,data,group,e){
window.event? window.event.cancelBubble = true:e.stopPropagation(); window.event? window.event.cancelBubble = true:e.stopPropagation();
if(this.timer){
clearTimeout(this.timer);
this.timer=null;
}
this.group=group; this.group=group;
setTimeout(()=>{
this.group.on('dblclick',this.hexagonSvgClearScale); this.group.on('dblclick',this.hexagonSvgClearScale);
},300);
if(!this.pan&&this.isClickRate){ if(!this.pan&&this.isClickRate){
getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{x:center[0],y:center[1]}); getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{x:center[0],y:center[1]});
if(this.infoShow){ if(this.infoShow){
@@ -479,7 +481,9 @@
if(this.infoHide){ if(this.infoHide){
this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText) this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
} }
this.timer=setTimeout(()=>{
this.isShowHover=true; this.isShowHover=true;
},100)
window.getSelection().empty();//取消选中文字 window.getSelection().empty();//取消选中文字
} }
}, },
@@ -516,9 +520,9 @@
setTimeout(()=>{ // 设置延时 解决移动后的缩放问题 setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
this.pan=false; this.pan=false;
},100) },100)
if(this.isShowHover&&getHexagon(this.hexagonSvgID).hexagonSvg){ // if(this.isShowHover&&getHexagon(this.hexagonSvgID).hexagonSvg){ // 记录移动位置 对双击事件有一定影响 暂时关闭 后续优化
this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox'); // this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox');
} // }
}, },
borderHex(){//外层边框 数组点 borderHex(){//外层边框 数组点
let length=this.allHexagon.length; let length=this.allHexagon.length;

View File

@@ -112,13 +112,13 @@
if(str.length>=10){ if(str.length>=10){
str=str.slice(0,6)+"..." str=str.slice(0,6)+"..."
} }
let text0=group.text(str).attr({x:0,y:0}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600}); let text0=group.text(str).attr({x:0,y:0,style:'cursor:text'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'text'});
textPaddingWidth=(that.hexagonEdge+20)-(text0.bbox().width); textPaddingWidth=(that.hexagonEdge+20)-(text0.bbox().width);
textPaddingHeight=(that.hexagonEdge/3)-(text0.bbox().height); textPaddingHeight=(that.hexagonEdge/3)-(text0.bbox().height);
text0.attr({ text0.attr({
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
y: data.center[1]-that.hexagonEdge + textPaddingHeight/2-4, y: data.center[1]-that.hexagonEdge + textPaddingHeight/2-4,
}).hide() }).hide();
allHexagonRect.push(rect0); allHexagonRect.push(rect0);
allHexagonText.push(text0); allHexagonText.push(text0);
text0.on('mousedown',textMouseDown); text0.on('mousedown',textMouseDown);
@@ -135,13 +135,13 @@
if(str.length>=10){ if(str.length>=10){
str=str.slice(0,6)+"..." str=str.slice(0,6)+"..."
} }
let text1=group.text(str).attr({x:0,y:0}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600}); let text1=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
textPaddingWidth=(that.hexagonEdge+20)-(text1.bbox().width); textPaddingWidth=(that.hexagonEdge+20)-(text1.bbox().width);
textPaddingHeight=(that.hexagonEdge/3)-(text1.bbox().height); textPaddingHeight=(that.hexagonEdge/3)-(text1.bbox().height);
text1.attr({ text1.attr({
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
y: data.center[1]-that.hexagonEdge/2-7.5 +textPaddingHeight/2-4, y: data.center[1]-that.hexagonEdge/2-7.5 +textPaddingHeight/2-4,
}).hide() }).hide();
@@ -159,13 +159,13 @@
if(str.length>=10){ if(str.length>=10){
str=str.slice(0,6)+"..." str=str.slice(0,6)+"..."
} }
let text2=group.text(str).attr({x:0,y:0}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600}); let text2=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
textPaddingWidth=(that.hexagonEdge+20)-(text2.bbox().width); textPaddingWidth=(that.hexagonEdge+20)-(text2.bbox().width);
textPaddingHeight=(that.hexagonEdge/3)-(text2.bbox().height); textPaddingHeight=(that.hexagonEdge/3)-(text2.bbox().height);
text2.attr({ text2.attr({
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 + 0.5+textPaddingHeight/2-4, y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 + 0.5+textPaddingHeight/2-4,
}).hide() }).hide();
allHexagonRect.push(rect2); allHexagonRect.push(rect2);
allHexagonText.push(text2); allHexagonText.push(text2);
@@ -181,16 +181,13 @@
if(str.length>=10){ if(str.length>=10){
str=str.slice(0,6)+"..." str=str.slice(0,6)+"..."
} }
let text3=group.text(str).attr({ let text3=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
x: data.center[0]-5,
y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3})
.font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600});
textPaddingWidth=(that.hexagonEdge+20)-(text3.bbox().width); textPaddingWidth=(that.hexagonEdge+20)-(text3.bbox().width);
textPaddingHeight=(that.hexagonEdge/3)-(text3.bbox().height); textPaddingHeight=(that.hexagonEdge/3)-(text3.bbox().height);
text3.attr({ text3.attr({
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 +5.5+textPaddingHeight/2-4, y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 +5.5+textPaddingHeight/2-4,
}).hide() }).hide();
allHexagonRect.push(rect3); allHexagonRect.push(rect3);
allHexagonText.push(text3); allHexagonText.push(text3);
@@ -211,7 +208,7 @@
item.fill({ color: `rgba(${rgbColor},0)`}) item.fill({ color: `rgba(${rgbColor},0)`})
}); });
allHexagonText.forEach(item=>{ allHexagonText.forEach(item=>{
item.fill({ opacity:0}).hide() item.fill({ opacity:0}).hide();
}); });
}, },
endLoading(){ endLoading(){