1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import getComputedTransformMatrix from './utils.js';
const minDistanceThreshold = 5;
function distanceBetween({ x: x1, y: y1 }, { x: x2, y: y2 }) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
function minDistanceThresholdIsMet(startPt, endPt) {
return distanceBetween(startPt, endPt) >= minDistanceThreshold;
}
function stopEventPropagationToChildren(el, type) {
el.addEventListener(type, e => e.stopPropagation(), { capture: true, once: true });
}
function getTranslateMatrix(startPt, movePt) {
const translateMatrix = new DOMMatrix();
return translateMatrix.translate(movePt.x - startPt.x, movePt.y - startPt.y);
}
export function manualPan(gb, counter) {
const mtx = getComputedTransformMatrix(gb),
inverseScreenCTM = gb.getScreenCTM().inverse();
const counterRect = counter.getBoundingClientRect();
const mapRect = document.querySelector('object').getBoundingClientRect();
let startPt = new DOMPoint(counterRect.x, counterRect.y);
let movePt = new DOMPoint(mapRect.width / 2, mapRect.height / 2);
startPt = startPt.matrixTransform(inverseScreenCTM);
movePt = movePt.matrixTransform(inverseScreenCTM);
gb.style.transition = 'transform 0.5s';
gb.style.transform = mtx.multiply(getTranslateMatrix(startPt, movePt));
gb.addEventListener('transitionend', () => gb.style.transition = '');
}
export default function (svg, el, e) {
e.preventDefault();
const mtx = getComputedTransformMatrix(el),
inverseScreenCTM = el.getScreenCTM().inverse();
let startPt = new DOMPoint(e.clientX, e.clientY),
movePt = new DOMPoint(),
isPanning = false;
function pointerMove(e) {
movePt.x = e.clientX;
movePt.y = e.clientY;
if (!isPanning && minDistanceThresholdIsMet(startPt, movePt)) {
isPanning = true;
//e.target.setPointerCapture(e.pointerId);
startPt.x = e.clientX;
startPt.y = e.clientY;
startPt = startPt.matrixTransform(inverseScreenCTM);
stopEventPropagationToChildren(el, 'click');
}
if (isPanning) {
movePt.x = e.clientX;
movePt.y = e.clientY;
movePt = movePt.matrixTransform(inverseScreenCTM);
el.style.transform = mtx.multiply(getTranslateMatrix(startPt, movePt));
}
}
svg.addEventListener('pointermove', pointerMove);
svg.addEventListener(
'pointerup',
() => {
svg.removeEventListener('pointermove', pointerMove);
const t1Rect = t1.getBoundingClientRect();
console.log('trooper1 DOM x,y', t1Rect.x, t1Rect.y);
},
{ once: true }
);
}
|