WIP: think I got zoom working?

index.html

@@ -101,10 +101,6 @@
       </p>
     </template>
 
-    <div>
-      debug margin
-    </div>
-
     <svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
@@ -131,8 +127,7 @@
       <image id="img2" href="scans/map1.jpg" width="2284" height="1518" />
       <g id="firing-arcs"></g>
       <rect id="map" x="0" y="0" width="34in" height="23in" />
-      <rect id="view-box" x="-100" y="-100" width="3450" height="2400" />
+      <!-- <rect id="debug-view-box" x="-100" y="-100" width="3450" height="2400" /> -->
-      <!-- <rect id="view-box" x1="-100" y1="-100" x2="3450" y2="2400" /> -->
     </svg>
 
     <div id="content">

index.js

@@ -368,27 +368,23 @@ 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 el = document.querySelector('svg');
-  let el = document.getElementById('view-box');
+  // let vb = document.getElementById('debug-view-box');
 
   let boundingRect = el.getBoundingClientRect();
+  // let boundingRect = vb.getBoundingClientRect();
   let pointerX = e.clientX - boundingRect.left;
   let pointerY = e.clientY - boundingRect.top;
 
-  // let { x, y, width, height } = el.viewBox.baseVal;
+  let { x, y, width, height } = el.viewBox.baseVal;
-  let { x, y, width, height } = el;
+  // let [x, y, width, height] = [vb.x, vb.y, vb.width, vb.height].map(v => v.baseVal.value);
-  [x, y, width, height] = [x, y, width, height].map(el => el.baseVal.value);
 
-  console.log(
+  let widthDelta = width * 0.25;
-    'horz pointer ratio, vert pointer ratio',
+  let heightDelta = height * 0.25;
-    pointerX / boundingRect.width, pointerY / boundingRect.height
-  );
-
-  let widthDelta = width * 0.1;
-  let heightDelta = height * 0.1;
 
   let xChange = pointerX / boundingRect.width * widthDelta;
   let widthChange = (1 - (pointerX / boundingRect.width)) * widthDelta;
@@ -396,26 +392,94 @@ svg.addEventListener('wheel', e => {
   let yChange = pointerY / boundingRect.height * heightDelta;
   let heightChange = (1 - (pointerY / boundingRect.height)) * heightDelta;
 
-  console.log('widthDelta', 'heightDelta', widthDelta, heightDelta);
-  console.log('x change', xChange);
-  console.log('width change', widthChange);
-
-  // console.log('viewbox new ratio', (width * 0.98) / (height * 0.98));
-
-  // let vb = `${x} ${y} ${parseInt(width * 0.98)} ${parseInt(height * 0.98)}`;
-
-  // el.setAttributeNS(null, 'viewBox', vb)
-
   let newX = e.deltaY < 0 ? x + xChange : x - xChange;
   let newWidth = e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange;
 
   let newY = e.deltaY < 0 ? y + yChange : y - yChange;
   let newHeight = e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange;
 
-  el.setAttributeNS(null, 'x', newX < VIEWBOX_X ? VIEWBOX_X : newX);
+  console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y);
-  el.setAttributeNS(null, 'width', newWidth > VIEWBOX_WIDTH ? VIEWBOX_WIDTH : newWidth);
+  console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT);
+  // console.log('VIEWBOX_WIDTH - newX', VIEWBOX_WIDTH - newX);
 
-  el.setAttributeNS(null, 'y', newY < VIEWBOX_Y ? VIEWBOX_Y : newY);
+  let myNewX, myNewY, myNewWidth, myNewHeight;
-  el.setAttributeNS(null, 'height', newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight);
 
+  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;
+  // }
+
+
+  el.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
+
+  // let vb = [
+  //   newViewBoxX,
+  //   newViewBoxY,
+  //   newViewBoxWidth,
+  //   newViewBoxHeight,
+  // ].join(' ');
+
+  // el.setAttributeNS(null, 'viewBox', vb);
 }, { passive: false });

style.css

@@ -53,6 +53,9 @@ text.counter {
 rect#map {
   fill: black;
   opacity: 0;
+  /* fill-opacity: 0;
+  stroke: red;
+  stroke-width: 4px; */
 }
 
 polygon.firing-arc {
@@ -116,8 +119,8 @@ image#img2 {
 }
 
 #record-sheet {
-  /* display: flex; */
+  display: flex;
-  display: none;
+  /* display: none; */
 }
 
 #record-sheet > div {
@@ -140,9 +143,9 @@ div.soldier-record.selected {
   background-color: lightgray;
 }
 
-rect#view-box {
+rect#debug-view-box {
-  stroke: red;
+  /* stroke: red;
-  stroke-width: 20px;
+  stroke-width: 20px; */
   fill: blue;
   fill-opacity: 0.2;
 }