1 files changed, 28 insertions, 91 deletions
diff --git a/index.js b/index.js
index 398ea4c..faa9e9c 100644
--- a/index.js
+++ b/index.js
@@ -71,7 +71,7 @@ const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT
   svg.viewBox.baseVal;
 
 const COLUMN_COUNT = 33,
-      ROW_COUNT = 25,
+      ROW_COUNT = 51,
       HORZ_POINT_DISTANCE = 1.005,
       VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2,
       ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2,
@@ -368,29 +368,27 @@ document.querySelectorAll('.clear-firing-arcs').forEach(el =>
   )
 );
 
-// document.getElementById('debug-view-box').addEventListener('wheel', e => {
 svg.addEventListener('wheel', e => {
   e.preventDefault();
 
-  let el = document.querySelector('svg');
-  // let vb = document.getElementById('debug-view-box');
+  // const pt = svg.createSVGPoint();
+  const pt = new DOMPoint(e.clientX, e.clientY);
 
-  let boundingRect = el.getBoundingClientRect();
-  // let boundingRect = vb.getBoundingClientRect();
-  let pointerX = e.clientX - boundingRect.left;
-  let pointerY = e.clientY - boundingRect.top;
+  // pt.x = e.clientX;
+  // pt.y = e.clientY;
 
-  let { x, y, width, height } = el.viewBox.baseVal;
-  // let [x, y, width, height] = [vb.x, vb.y, vb.width, vb.height].map(v => v.baseVal.value);
+  const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
+
+  let { x, y, width, height } = svg.viewBox.baseVal;
 
   let widthDelta = width * 0.25;
   let heightDelta = height * 0.25;
 
-  let xChange = pointerX / boundingRect.width * widthDelta;
-  let widthChange = (1 - (pointerX / boundingRect.width)) * widthDelta;
+  let xChange = (svgP.x - x) / width * widthDelta;
+  let yChange = (svgP.y - y) / height * heightDelta;
 
-  let yChange = pointerY / boundingRect.height * heightDelta;
-  let heightChange = (1 - (pointerY / boundingRect.height)) * heightDelta;
+  let widthChange = (1 - ((svgP.x - x) / width)) * widthDelta;
+  let heightChange = (1 - ((svgP.y - y) / height)) * heightDelta;
 
   let newX = e.deltaY < 0 ? x + xChange : x - xChange;
   let newWidth = e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange;
@@ -400,86 +398,25 @@ svg.addEventListener('wheel', e => {
 
   console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y);
   console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT);
-  // console.log('VIEWBOX_WIDTH - newX', VIEWBOX_WIDTH - newX);
-
-  let myNewX, myNewY, myNewWidth, myNewHeight;
-
-  myNewX = newX < VIEWBOX_X ? VIEWBOX_X : newX;
-  myNewY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY;
-  myNewWidth = newWidth + newX > VIEWBOX_WIDTH ? VIEWBOX_WIDTH - newX : newWidth;
-  // myNewHeight = newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight;
-  myNewHeight = newHeight;
-
-  console.log('newWidth + newX', newWidth + newX)
-
-  if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) {
-    // console.log("left and right sides would both exceed margins")
-    newWidth = VIEWBOX_WIDTH;
-    newX = VIEWBOX_X;
-  } else if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X) {
-    // console.log("right side only would exceed margin")
-    // console.log('newWidth + newX', newWidth + newX)
-    // console.log('VIEWBOX_WIDTH - 100', VIEWBOX_WIDTH - 100)
-    let diff = newWidth + newX - VIEWBOX_WIDTH - VIEWBOX_X;
-    console.log('diff', diff);
-    newX = newX - diff;
-  }
 
-  if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y && newY < VIEWBOX_Y) {
-    newHeight = VIEWBOX_HEIGHT;
-    newY = VIEWBOX_Y;
-  } else if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y) {
-    let diff = newHeight + newY - VIEWBOX_HEIGHT - VIEWBOX_Y;
-    newY = newY - diff;
-  }
-
-  newX = newX < VIEWBOX_X ? VIEWBOX_X : newX;
-  newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY;
-
-  // console.log('newX', 'newY', newX, newY);
-  // console.log('newWidth', 'newHeight', newWidth, newHeight);
-
-  // console.log('myNewX', 'myNewY', myNewX, myNewY);
-  // console.log('myNewWidth', 'myNewHeight', myNewWidth, myNewHeight);
-
-  // console.log('newWidth + newX', newWidth + newX);
-
-  // vb.setAttributeNS(null, 'x', newX);
-  // vb.setAttributeNS(null, 'y', newY);
-  // vb.setAttributeNS(null, 'width', newWidth);
-  // vb.setAttributeNS(null, 'height', newHeight);
-
-  // let newViewBox = [
-  //   newX < VIEWBOX_X ? VIEWBOX_X : newX,
-  //   newY < VIEWBOX_Y ? VIEWBOX_Y : newY,
-  //   newWidth + newX > VIEWBOX_WIDTH ? VIEWBOX_WIDTH - newX : newWidth,
-  //   newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight
-  // ]
-
-  // newViewBoxX = newX < VIEWBOX_X ? VIEWBOX_X : newX;
-  // newViewBoxY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY;
-  // newViewBoxWidth = newWidth + newX > VIEWBOX_WIDTH ? VIEWBOX_WIDTH - newX : newWidth;
-  // newViewBoxHeight = newHeight + newY > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT - newY: newHeight;
-
-  // if (newWidth + newX > VIEWBOX_WIDTH) {
-  //   newViewBoxWidth = VIEWBOX_WIDTH - newX;
-  //   let newWidthRatio = newWidth / newViewBoxWidth;
-  //   let widthRatio = VIEWBOX_WIDTH / VIEWBOX_HEIGHT;
-  //   newViewBoxHeight =
-  // } else {
-  //   newViewBoxWidth = newWidth;
-  //   newViewBoxHeight = newHeight;
+  // if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) {
+  //   newWidth = VIEWBOX_WIDTH;
+  //   newX = VIEWBOX_X;
+  // } else if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X) {
+  //   let diff = newWidth + newX - VIEWBOX_WIDTH - VIEWBOX_X;
+  //   newX = newX - diff;
   // }
 
+  // if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y && newY < VIEWBOX_Y) {
+  //   newHeight = VIEWBOX_HEIGHT;
+  //   newY = VIEWBOX_Y;
+  // } else if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y) {
+  //   let diff = newHeight + newY - VIEWBOX_HEIGHT - VIEWBOX_Y;
+  //   newY = newY - diff;
+  // }
 
-  el.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
-
-  // let vb = [
-  //   newViewBoxX,
-  //   newViewBoxY,
-  //   newViewBoxWidth,
-  //   newViewBoxHeight,
-  // ].join(' ');
+  // newX = newX < VIEWBOX_X ? VIEWBOX_X : newX;
+  // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY;
 
-  // el.setAttributeNS(null, 'viewBox', vb);
+  svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
 }, { passive: false });
 \ No newline at end of file