Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/node_modules
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-08-09 10:22:44 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-08-09 10:22:44 -0700
commit90fe01caaf5b8e0488aef15eb5c76f1e87145797 (patch)
tree8d4bdc49898ed8a3842468b93638400496891b6e /node_modules
parentca9ad3ac2a8a0b5709ae7f55dcff3a7473bb9203 (diff)
Extract programmatic pan coord calculations into gameboard module
Diffstat (limited to 'node_modules')
-rw-r--r--node_modules/pan-zoom/index.js2
-rw-r--r--node_modules/pan-zoom/src/modules/pan.js82
2 files changed, 0 insertions, 84 deletions
diff --git a/node_modules/pan-zoom/index.js b/node_modules/pan-zoom/index.js
deleted file mode 100644
index ab80f47..0000000
--- a/node_modules/pan-zoom/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as pan, manualPan } from './src/modules/pan.js';
-export { default as zoom } from './src/modules/zoom.js';
diff --git a/node_modules/pan-zoom/src/modules/pan.js b/node_modules/pan-zoom/src/modules/pan.js
deleted file mode 100644
index 98fc74b..0000000
--- a/node_modules/pan-zoom/src/modules/pan.js
+++ /dev/null
@@ -1,82 +0,0 @@
-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.width / 2, counterRect.y + counterRect.height / 2);
- 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 = '', { once: true });
-}
-
-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),
- { once: true }
- );
-}