| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-20 19:34:06 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-23 10:09:51 -0700 |
| commit | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (patch) | |
| tree | a072ea398ce00b68dd0e5e670b32ac5ee1a812ad /src/modules/pan.js | |
| parent | 263201d869956b94660d4efa8297e89dadbe36a8 (diff) | |
Use CSS transformations instead of manipulating the viewBox
Diffstat (limited to 'src/modules/pan.js')
| -rw-r--r-- | src/modules/pan.js | 62 |
1 files changed, 23 insertions, 39 deletions
diff --git a/src/modules/pan.js b/src/modules/pan.js index 9faae0a..201c2f1 100644 --- a/src/modules/pan.js +++ b/src/modules/pan.js @@ -1,5 +1,14 @@ +import getComputedTransformMatrix from './utils.js'; + const minDistanceThreshold = 5; +function setToCurrentPointerCoords(point, e) { + point.x = e.clientX; + point.y = e.clientY; + + return point; +} + function distanceBetween({ x: x1, y: y1 }, { x: x2, y: y2 }) { return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); } @@ -8,46 +17,21 @@ function minDistanceThresholdIsMet(startPt, endPt) { return distanceBetween(startPt, endPt) >= minDistanceThreshold; } -function getPositionChangeInLocalCoords(svg, startPt, endPt) { - const matrix = svg.getScreenCTM().inverse(), - localStartPt = startPt.matrixTransform(matrix), - localEndPt = endPt.matrixTransform(matrix); - - return { - x: localStartPt.x - localEndPt.x, - y: localStartPt.y - localEndPt.y - }; -} - -function stopEventPropagationToChildren(svg, type) { - svg.addEventListener(type, e => e.stopPropagation(), { capture: true, once: true }); -} - -function setToCurrentPointerCoords(point, e) { - point.x = e.clientX; - point.y = e.clientY; - - return point; +function stopEventPropagationToChildren(el, type) { + el.addEventListener(type, e => e.stopPropagation(), { capture: true, once: true }); } -function getPanCoords(svg, startPt, movePt, initialPos) { - const posChange = getPositionChangeInLocalCoords(svg, startPt, movePt); +function getTranslateMatrix(startPt, movePt) { + const translateMatrix = new DOMMatrix(); - return { - x: initialPos.x + posChange.x, - y: initialPos.y + posChange.y - }; + return translateMatrix.translate(movePt.x - startPt.x, movePt.y - startPt.y); } -function setViewBoxPosition(svg, { x, y }) { - const { width, height } = svg.viewBox.baseVal; - - svg.setAttributeNS(null, 'viewBox', `${x} ${y} ${width} ${height}`); -} +export default function (el, e) { + e.preventDefault(); -export default function (svg, e) { - const { x, y } = svg.viewBox.baseVal, - startPt = setToCurrentPointerCoords(new DOMPoint(), e), + const mtx = getComputedTransformMatrix(el), + startPt = new DOMPoint(e.clientX, e.clientY), movePt = new DOMPoint(); let isPanning = false; @@ -59,19 +43,19 @@ export default function (svg, e) { isPanning = true; e.target.setPointerCapture(e.pointerId); setToCurrentPointerCoords(startPt, e); - stopEventPropagationToChildren(svg, 'click'); + stopEventPropagationToChildren(el, 'click'); } if (isPanning) { - setViewBoxPosition(svg, getPanCoords(svg, startPt, movePt, { x, y })); + el.style.transform = getTranslateMatrix(startPt, movePt).multiply(mtx); } } - svg.addEventListener('pointermove', pointerMove); + el.addEventListener('pointermove', pointerMove); - svg.addEventListener( + el.addEventListener( 'pointerup', - () => svg.removeEventListener('pointermove', pointerMove), + () => el.removeEventListener('pointermove', pointerMove), { once: true } ); } |