fix:优化双击事件
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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(){
|
||||||
|
|||||||
Reference in New Issue
Block a user