Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2025-03-18 13:43:26 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2025-03-18 13:47:07 -0700
commit25eca15a3007c76c4e444b859683feb29edfa183 (patch)
treed0a867be54ab95f5e138cec9df662fa0ba450544 /src
parent99d137cc0937c0342fc1076eafe609c8aa370087 (diff)
WIP: translate an object to zoomed position without scalingcm-pan-not-zoom
Diffstat (limited to 'src')
-rw-r--r--src/app.js25
-rw-r--r--src/modules/pan.js6
-rw-r--r--src/modules/utils.js27
-rw-r--r--src/modules/zoom.js6
4 files changed, 50 insertions, 14 deletions
diff --git a/src/app.js b/src/app.js
index 9aac0bc..5e9a2e4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,27 +1,28 @@
import zoom from './modules/zoom';
import pan from './modules/pan';
-const optionalZoomFactor = 0.1,
- object = document.querySelector('object');
+const optionalZoomFactor = 0.1
+ //, object = document.querySelector('object')
+ ;
// If embedding an SVG using an <object> tag, it's necessary to wait until the
// page has loaded before querying its `contentDocument`, otherwise it will be
// `null`.
window.addEventListener('load', function () {
- const svg = object.contentDocument.querySelector('svg'),
- targetEl = svg.querySelector('g'),
- pointer = svg.querySelector('#pointer'),
+ const svg = document.querySelector('svg'),
+ targetEl = svg.querySelector('g.pan-zoom'),
+ //pointer = svg.querySelector('#pointer'),
options = { passive: false };
svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor), options);
svg.addEventListener('pointerdown', pan(targetEl), options);
- svg.addEventListener('pointermove', e => {
- const pt = new DOMPoint(e.clientX, e.clientY),
- svgP = pt.matrixTransform(targetEl.getScreenCTM().inverse());
-
- pointer.setAttributeNS(null, 'cx', svgP.x);
- pointer.setAttributeNS(null, 'cy', svgP.y);
- });
+ //svg.addEventListener('pointermove', e => {
+ // const pt = new DOMPoint(e.clientX, e.clientY),
+ // svgP = pt.matrixTransform(targetEl.getScreenCTM().inverse());
+ //
+ // pointer.setAttributeNS(null, 'cx', svgP.x);
+ // pointer.setAttributeNS(null, 'cy', svgP.y);
+ //});
});
diff --git a/src/modules/pan.js b/src/modules/pan.js
index bf842bd..8be3cb9 100644
--- a/src/modules/pan.js
+++ b/src/modules/pan.js
@@ -1,4 +1,4 @@
-import { default as getComputedTransformMatrix } from './utils';
+import { default as getComputedTransformMatrix, track, getTracked } from './utils';
const minDistanceThreshold = 5;
@@ -41,9 +41,13 @@ function setTransform(el, computedMtx, startPt, endPt) {
const translateMtx = getTranslateMatrix(startPt, endPt);
const transformMtx = computedMtx.multiply(translateMtx);
+ groups.forEach(([z, p]) => track(z, p, transformMtx));
+
el.style.transform = transformMtx;
}
+const groups = getTracked(document.querySelectorAll('svg g[class] use'));
+
export function programmaticPan(el, from, to) {
const matrices = getTransformMatrices(el);
const startPt = clientToSvgPt(from, matrices.inverseScreen);
diff --git a/src/modules/utils.js b/src/modules/utils.js
index e7f5c55..ae63b74 100644
--- a/src/modules/utils.js
+++ b/src/modules/utils.js
@@ -1,5 +1,32 @@
const digits = /-?\d+\.?\d*/g;
+export function extractNum(string) {
+ return string.replace(/\D/g,'');
+}
+
+export function getTracked(trackedAndTrackerEls) {
+ const sorted = [...trackedAndTrackerEls]
+ .sort((a, b) => a.id < b.id || extractNum(a.id) <= extractNum(b.id));
+
+ const groups = [];
+ const els = sorted.slice();
+
+ while (els.length) {
+ groups.push([els.pop(), els.pop()]);
+ }
+
+ return groups;
+}
+
+export function track(targetEl, trackingEl, transformMtx) {
+ let x = targetEl.getAttributeNS(null, 'x');
+ let y = targetEl.getAttributeNS(null, 'y');
+ let ptBefore = new DOMPoint(x, y);
+ let ptAfter = ptBefore.matrixTransform(transformMtx);
+ trackingEl.setAttributeNS(null, 'x', ptAfter.x);
+ trackingEl.setAttributeNS(null, 'y', ptAfter.y);
+}
+
export default function getComputedTransformMatrix(el) {
const matrixSequence = getComputedStyle(el).transform.match(digits),
identityMatrix = '';
diff --git a/src/modules/zoom.js b/src/modules/zoom.js
index 1455cb4..69652c0 100644
--- a/src/modules/zoom.js
+++ b/src/modules/zoom.js
@@ -1,4 +1,4 @@
-import { default as getComputedTransformMatrix } from './utils';
+import { default as getComputedTransformMatrix, extractNum, track, getTracked } from './utils';
function zoomIn(deltaY) {
return deltaY < 0;
@@ -24,9 +24,13 @@ function setTransform(el, computedMtx, translateMtx, scale) {
const transformMtx =
computedMtx.multiply(translateMtx).scale(scale).multiply(translateMtx.inverse());
+ groups.forEach(([z, p]) => track(z, p, transformMtx));
+
el.style.transform = transformMtx;
}
+const groups = getTracked(document.querySelectorAll('svg g[class] use'));
+
export default function (el, factor = 0.1) {
return e => {
e.preventDefault();