首先,不启用X6默认的拖动。
fixedTouch(graph, container);
function fixedTouch(graph: Graph, touchArea: HTMLDivElement) {
let startPoint: any = null;
let isLandscape = true;
touchArea.addEventListener('touchstart', (e: any) => {
# 节点上不拖动
if (e.target.className.baseVal !== 'x6-graph-svg') {return false;}
startPoint = { x: e.touches[0].clientX, y: e.touches[0].clientY };
isLandscape = window.innerHeight < window.innerWidth;
});
touchArea.addEventListener('touchmove', (e) => {
if (startPoint) {
/**
* 处理 强制横屏后拖动方向是反的 ———— START
*/
const dx = isLandscape
? e.touches[0].clientX - startPoint.x
: e.touches[0].clientY - startPoint.y;
const dy = !isLandscape
? e.touches[0].clientX - startPoint.x
: e.touches[0].clientY - startPoint.y;
/**
* 处理 强制横屏后拖动方向是反的 ———— END
*/
/**
* 仅横向 ———— START
*/
const dx = isLandscape
? e.touches[0].clientX - startPoint.x
: e.touches[0].clientY - startPoint.y;
const dy = 0;
/**
* 仅横向 ———— END
*/
/**
* 仅纵向 ———— START
*/
const dx = 0;
const dy = !isLandscape
? e.touches[0].clientX - startPoint.x
: e.touches[0].clientY - startPoint.y;
/**
* 仅纵向 ———— END
*/
graph.translateBy(dx, dy);
startPoint = { x: e.touches[0].clientX, y: e.touches[0].clientY };
}
});
touchArea.addEventListener('touchend', (e) => {
startPoint = null;
});
}