Web Dev Solutions

Catalin Mititiuc

From 90fe01caaf5b8e0488aef15eb5c76f1e87145797 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Fri, 9 Aug 2024 10:22:44 -0700 Subject: Extract programmatic pan coord calculations into gameboard module --- node_modules/pan-zoom/index.js | 2 - node_modules/pan-zoom/src/modules/pan.js | 82 -------------------------------- 2 files changed, 84 deletions(-) delete mode 100644 node_modules/pan-zoom/index.js delete mode 100644 node_modules/pan-zoom/src/modules/pan.js (limited to 'node_modules') 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 } - ); -} -- cgit v1.2.3