Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-08-09 10:18:51 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-08-09 10:24:25 -0700
commit33b0a75df147dcfbee98a635f71dcce2e3081453 (patch)
treecc89d5ca24c03ca1b6521529eaa3ee35a03e0a29
parent00c092210ba62aa85ff082bbbc21380bfe5cb976 (diff)
Refactor programmatic pan code
Diffstat
-rw-r--r--index.js2
-rw-r--r--src/modules/pan.js56
2 files changed, 29 insertions, 29 deletions
diff --git a/index.js b/index.js
index ab80f47..c0afa1b 100644
--- a/index.js
+++ b/index.js
@@ -1,2 +1,2 @@
-export { default as pan, manualPan } from './src/modules/pan.js';
+export { default as pan, programmaticPan } from './src/modules/pan.js';
export { default as zoom } from './src/modules/zoom.js';
diff --git a/src/modules/pan.js b/src/modules/pan.js
index 4fcb416..4e6485c 100644
--- a/src/modules/pan.js
+++ b/src/modules/pan.js
@@ -10,7 +10,7 @@ function distanceBetween({ x: x1, y: y1 }, { x: x2, y: y2 }) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
-function minDistanceThresholdIsMet(startPt, endPt) {
+function exceedsMinDistanceThreshhold(startPt, endPt) {
return distanceBetween(startPt, endPt) >= minDistanceThreshold;
}
@@ -24,47 +24,49 @@ function getTranslateMatrix(startPt, movePt) {
return translateMatrix.translate(movePt.x - startPt.x, movePt.y - startPt.y);
}
-export function manualPan(gb, counter) {
- const mtx = getComputedTransformMatrix(gb);
- const inverseScreenCTM = gb.getScreenCTM().inverse();
+function getTransformMatrices(el) {
+ return {
+ computed: getComputedTransformMatrix(el),
+ inverseScreen: el.getScreenCTM().inverse()
+ };
+}
- const counterRect = counter.getBoundingClientRect();
- const mapRect = document.querySelector('object').getBoundingClientRect();
+function clientToSvgPt({ clientX, clientY }, { inverseScreen }, pt = new DOMPoint()) {
+ pt.x = clientX;
+ pt.y = clientY;
+ return pt.matrixTransform(inverseScreen);
+}
- let startPt = new DOMPoint(counterRect.x + counterRect.width / 2, counterRect.y + counterRect.height / 2);
- let movePt = new DOMPoint(mapRect.width / 2, mapRect.height / 2);
+function setPanTransform(el, { computed }, startPt, endPt) {
+ el.style.transform = computed.multiply(getTranslateMatrix(startPt, endPt));
+}
- startPt = startPt.matrixTransform(inverseScreenCTM);
- movePt = movePt.matrixTransform(inverseScreenCTM);
+export function programmaticPan(el, from, to) {
+ const matrices = getTransformMatrices(el);
+ const startPt = clientToSvgPt(from, matrices);
+ const endPt = clientToSvgPt(to, matrices);
- gb.style.transition = 'transform 0.5s';
- gb.style.transform = mtx.multiply(getTranslateMatrix(startPt, movePt));
- gb.addEventListener('transitionend', () => gb.style.transition = '', { once: true });
+ el.style.transition = 'transform 0.5s';
+ setPanTransform(el, matrices, startPt, endPt);
+ el.addEventListener('transitionend', () => el.style.transition = '', { once: true });
}
export default function (el) {
- let mtx, inverseScreenCTM, startPt, movePt, isPanning;
+ let matrices, startPt, movePt, isPanning;
function pointerMove(e) {
movePt.x = e.clientX;
movePt.y = e.clientY;
- if (!isPanning && minDistanceThresholdIsMet(startPt, movePt)) {
+ if (!isPanning && exceedsMinDistanceThreshhold(startPt, movePt)) {
isPanning = true;
-
- startPt.x = e.clientX;
- startPt.y = e.clientY;
- startPt = startPt.matrixTransform(inverseScreenCTM);
-
+ startPt = clientToSvgPt(e, matrices, startPt);
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));
+ movePt = clientToSvgPt(e, matrices, movePt);
+ setPanTransform(el, matrices, startPt, movePt);
}
}
@@ -74,9 +76,7 @@ export default function (el) {
e.target.setPointerCapture(e.pointerId);
isPanning = false;
- mtx = getComputedTransformMatrix(el);
- inverseScreenCTM = el.getScreenCTM().inverse();
-
+ matrices = getTransformMatrices(el);
startPt = new DOMPoint(e.clientX, e.clientY);
movePt = new DOMPoint();