1 files changed, 56 insertions, 40 deletions
diff --git a/index.js b/index.js
index 93072c8..dfab442 100644
--- a/index.js
+++ b/index.js
@@ -1,42 +1,3 @@
-class SoldierRecordBlock extends HTMLDivElement {
-  constructor() {
-    super();
-
-    let template = document.getElementById('soldier-record-block');
-    let templateContent = template.content;
-
-    const shadowRoot = this.attachShadow({ mode: "open" });
-    shadowRoot.appendChild(templateContent.cloneNode(true));
-
-    this.shadowRoot
-      .querySelectorAll('p:has(input[type="number"]), .physical-status-track')
-      .forEach(el => el.addEventListener('click', e => e.stopPropagation()))
-      ;
-  }
-}
-
-customElements.define(
-  'damage-block',
-  class extends HTMLSpanElement {
-    constructor() {
-      super();
-
-      let template = document.getElementById('damage-block');
-      let templateContent = template.content;
-
-      const shadowRoot = this.attachShadow({ mode: "open" });
-      shadowRoot.appendChild(templateContent.cloneNode(true));
-    }
-  },
-  { extends: 'span' }
-);
-
-customElements.define(
-  'soldier-record-block',
-  SoldierRecordBlock,
-  { extends: 'div'}
-);
-
 function isEven(n) {
   return n % 2 === 0;
 }
@@ -106,6 +67,9 @@ let svgns = "http://www.w3.org/2000/svg",
     svg = document.querySelector('svg'),
     map = document.querySelector('rect#map');
 
+const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } =
+  svg.viewBox.baseVal;
+
 const COLUMN_COUNT = 33,
       ROW_COUNT = 25,
       HORZ_POINT_DISTANCE = 1.005,
@@ -402,4 +366,56 @@ document.querySelectorAll('.clear-firing-arcs').forEach(el =>
       .querySelectorAll(`.firing-arc[data-troop-allegiance="${allegiance}"]`)
       .forEach(el => el.remove())
   )
-);
-\ No newline at end of file
+);
+
+svg.addEventListener('wheel', e => {
+  e.preventDefault();
+
+  // let el = document.querySelector('svg');
+  let el = document.getElementById('view-box');
+
+  let boundingRect = el.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;
+  [x, y, width, height] = [x, y, width, height].map(el => el.baseVal.value);
+
+  console.log(
+    'horz pointer ratio, vert pointer ratio',
+    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;
+
+  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);
+  el.setAttributeNS(null, 'width', newWidth > VIEWBOX_WIDTH ? VIEWBOX_WIDTH : newWidth);
+
+  el.setAttributeNS(null, 'y', newY < VIEWBOX_Y ? VIEWBOX_Y : newY);
+  el.setAttributeNS(null, 'height', newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight);
+
+}, { passive: false });
+\ No newline at end of file