1 files changed, 24 insertions, 16 deletions
diff --git a/index.js b/index.js
index dd6599e..ca8f618 100644
--- a/index.js
+++ b/index.js
@@ -294,10 +294,11 @@ if (recVis == 'false') {
 
 let info = document.getElementById('status');
 
-// Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
-[].forEach(fieldset => {
+Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
+// [].forEach(fieldset => {
+  const identityMtx = [1, 0, 0, 1, 0, 0];
   const target = document.getElementById(fieldset.name);
-  const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g);
+  const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx;
   const inputs = fieldset.querySelectorAll('input');
 
   if (transform) {
@@ -310,7 +311,8 @@ let info = document.getElementById('status');
     const scaleY = Math.sqrt(b**2 + d**2);
 
     let values = {
-      scale: Math.round(scaleX * 10) / 10,
+      scaleX: Math.round(scaleX * 1000) / 1000,
+      scaleY: Math.round(scaleY * 1000) / 1000,
       translateX: e,
       translateY: f,
       rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10
@@ -323,12 +325,13 @@ let info = document.getElementById('status');
     input.addEventListener('pointerenter', e => e.target.focus());
 
     input.addEventListener('input', e => {
-      let { scale, translateX, translateY, rotate} = Object.values(inputs).reduce((acc, input) => {
-        acc[input.name] = input.value;
-        return acc;
-      }, {});
+      let { translateX, translateY, rotate, scaleX, scaleY } =
+        Object.values(inputs).reduce((acc, input) => {
+          acc[input.name] = input.value;
+          return acc;
+        }, {});
 
-      let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scale})`;
+      let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
       target.style.transform = transform;
     });
 
@@ -888,11 +891,14 @@ svg.addEventListener('wheel', e => {
 
   let vb = `${newX} ${newY} ${newWidth} ${newHeight}`
 
+  // TODO attribute change event?
   localStorage.setItem('viewBox', vb);
   svg.setAttributeNS(null, 'viewBox', vb);
 });
 
 svg.addEventListener('pointerdown', e => {
+  e.preventDefault();
+
   const minPanDistanceThreshold = 5;
 
   let dist, ctm,
@@ -904,16 +910,19 @@ svg.addEventListener('pointerdown', e => {
   function pointerMove(e) {
     movePt.x = e.clientX;
     movePt.y = e.clientY;
-    dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
 
-    if (!pan && dist >= minPanDistanceThreshold) {
-      pan = true;
-      startPt.x = e.clientX;
-      startPt.y = e.clientY;
+    if (!pan) {
+      dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
+
+      if (dist >= minPanDistanceThreshold) {
+        pan = true;
+        svg.setPointerCapture(e.pointerId);
+        startPt.x = e.clientX;
+        startPt.y = e.clientY;
+      }
     }
 
     if (pan) {
-      svg.setPointerCapture(e.pointerId);
       ctm = svg.getScreenCTM().inverse();
 
       const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),
@@ -928,7 +937,6 @@ svg.addEventListener('pointerdown', e => {
   }
 
   function pointerUp(e) {
-    svg.releasePointerCapture(e.pointerId);
     svg.removeEventListener('pointermove', pointerMove);
     svg.removeEventListener('pointerup', pointerUp);
   }