- 移动端手势缩放优化: 按线性关系进行缩放,双指位移可以调整画布位置;
- 拖动画布优化: 只读模式拖拽画布时点击在子元素上时无法拖动问题处理(只读模式拖拽,鼠标中键拖拽,移动端拖拽)
This commit is contained in:
parent
86b184d5c1
commit
13f3c2c20c
@ -388,7 +388,7 @@ class Node {
|
|||||||
if (this.isRoot && e.which === 3 && !this.mindMap.opt.readonly) {
|
if (this.isRoot && e.which === 3 && !this.mindMap.opt.readonly) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
}
|
}
|
||||||
if (!this.isRoot && !this.mindMap.opt.readonly) {
|
if (!this.isRoot && e.which !== 2 && !this.mindMap.opt.readonly) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
}
|
}
|
||||||
// 多选和取消多选
|
// 多选和取消多选
|
||||||
@ -414,7 +414,7 @@ class Node {
|
|||||||
this.mindMap.emit('node_mousedown', this, e)
|
this.mindMap.emit('node_mousedown', this, e)
|
||||||
})
|
})
|
||||||
this.group.on('mouseup', e => {
|
this.group.on('mouseup', e => {
|
||||||
if (!this.isRoot && !this.mindMap.opt.readonly) {
|
if (!this.isRoot && e.which !== 2 && !this.mindMap.opt.readonly) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
}
|
}
|
||||||
this.mindMap.emit('node_mouseup', this, e)
|
this.mindMap.emit('node_mouseup', this, e)
|
||||||
|
|||||||
@ -163,7 +163,7 @@ class RichText {
|
|||||||
let scaleX = rect.width / originWidth
|
let scaleX = rect.width / originWidth
|
||||||
let scaleY = rect.height / originHeight
|
let scaleY = rect.height / originHeight
|
||||||
// 内边距
|
// 内边距
|
||||||
const paddingX = 6
|
const paddingX = 14
|
||||||
const paddingY = 4
|
const paddingY = 4
|
||||||
if (!this.textEditNode) {
|
if (!this.textEditNode) {
|
||||||
this.textEditNode = document.createElement('div')
|
this.textEditNode = document.createElement('div')
|
||||||
@ -195,6 +195,11 @@ class RichText {
|
|||||||
this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
|
this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
|
||||||
this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
|
this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
|
||||||
this.textEditNode.style.transformOrigin = 'left top'
|
this.textEditNode.style.transformOrigin = 'left top'
|
||||||
|
this.textEditNode.style.borderRadius = (node.style.merge('borderRadius') || 5) + 'px'
|
||||||
|
if(node.style.merge('shape') == 'roundedRectangle'){
|
||||||
|
this.textEditNode.style.borderRadius = '50px';
|
||||||
|
}
|
||||||
|
|
||||||
if (!node.nodeData.data.richText) {
|
if (!node.nodeData.data.richText) {
|
||||||
// 还不是富文本的情况
|
// 还不是富文本的情况
|
||||||
let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
|
let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
|
||||||
|
|||||||
@ -33,6 +33,7 @@ class TouchEvent {
|
|||||||
// 手指按下事件
|
// 手指按下事件
|
||||||
onTouchstart(e) {
|
onTouchstart(e) {
|
||||||
this.touchesNum = e.touches.length
|
this.touchesNum = e.touches.length
|
||||||
|
this.touchScaleViewBefore = false;
|
||||||
if (this.touchesNum === 1) {
|
if (this.touchesNum === 1) {
|
||||||
let touch = e.touches[0]
|
let touch = e.touches[0]
|
||||||
this.singleTouchstartEvent = touch
|
this.singleTouchstartEvent = touch
|
||||||
@ -57,14 +58,23 @@ class TouchEvent {
|
|||||||
let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY)
|
let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY)
|
||||||
let cx = (touch1ClientX + touch2ClientX) / 2
|
let cx = (touch1ClientX + touch2ClientX) / 2
|
||||||
let cy = (touch1ClientY + touch2ClientY) / 2
|
let cy = (touch1ClientY + touch2ClientY) / 2
|
||||||
if (distance > this.doubleTouchmoveDistance) {
|
|
||||||
// 放大
|
// 手势缩放,基于最开始的位置进行缩放(基于前一个位置缩放不是线性关系); 缩放同时支持位置拖动
|
||||||
this.mindMap.view.enlarge(cx, cy, true)
|
var view = this.mindMap.view;
|
||||||
} else {
|
if(!this.touchScaleViewBefore){
|
||||||
// 缩小
|
this.touchScaleViewBefore = {distance:distance,scale:view.scale,x:view.x,y:view.y,cx:cx,cy:cy};
|
||||||
this.mindMap.view.narrow(cx, cy, true)
|
return;
|
||||||
}
|
}
|
||||||
this.doubleTouchmoveDistance = distance
|
|
||||||
|
var viewBefore = this.touchScaleViewBefore;
|
||||||
|
var scale = viewBefore.scale * (distance / viewBefore.distance);
|
||||||
|
if(Math.abs(distance - viewBefore.distance) <= 10){scale = viewBefore.scale;}
|
||||||
|
var ratio = (1 - scale / viewBefore.scale);
|
||||||
|
view.scale = scale < 0.1 ? 0.1 : scale;
|
||||||
|
view.x = viewBefore.x + (cx - viewBefore.x) * ratio + (cx - viewBefore.cx)*scale;
|
||||||
|
view.y = viewBefore.y + (cy - viewBefore.y) * ratio + (cy - viewBefore.cy)*scale;
|
||||||
|
view.transform();
|
||||||
|
this.mindMap.emit('scale',scale);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,6 +102,7 @@ class TouchEvent {
|
|||||||
this.touchesNum = 0
|
this.touchesNum = 0
|
||||||
this.singleTouchstartEvent = null
|
this.singleTouchstartEvent = null
|
||||||
this.doubleTouchmoveDistance = 0
|
this.doubleTouchmoveDistance = 0
|
||||||
|
this.touchScaleViewBefore = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 发送鼠标事件
|
// 发送鼠标事件
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user