WIP: Fix pan-zoom for webkit

src/index.js

@@ -131,7 +131,7 @@ async function buildScenario(req) {
     });
   });
 
-  scenario.querySelectorAll('use.mapsheet').forEach(el => gb.prepend(svg.ownerDocument.importNode(el, true)));
+  scenario.querySelectorAll('use.mapsheet').forEach(el => gb.querySelector('#background').after(svg.ownerDocument.importNode(el, true)));
   if (startLocs) grid.before(svg.ownerDocument.importNode(startLocs, true));
 
   const scenarioGrid = scenario.querySelector('.grid');
@@ -174,6 +174,12 @@ async function buildScenario(req) {
   panzoom.start(svg);
   gameboard.start(svg);
   recordSheet.start(startLocs, gameboard.getUnits());
+
+  const mapContainer = document.querySelector('#map-container');
+  const mapContainerRect = mapContainer.getBoundingClientRect();
+
+  console.log('mapContainer', mapContainer);
+  console.log('mapContainerRect', mapContainerRect);
 }
 
 function updateTurnCounter() {

src/modules/pan-zoom.js

@@ -12,8 +12,13 @@ function restorePanZoomVal(svg) {
 }
 
 function addEventListeners(svg) {
-  svg.addEventListener('wheel', e => zoom(svg, e, zoomFactor), { passive: false });
-  svg.addEventListener('pointerdown', e => pan(svg, e), { passive: false });
+  // svg.addEventListener('wheel', e => zoom(svg, e, zoomFactor), { passive: false });
+  // svg.addEventListener('pointerdown', e => pan(svg, e), { passive: false });
+
+  const group = svg.querySelector('.gameboard');
+
+  svg.addEventListener('wheel', e => zoom(group, e, zoomFactor), { passive: false });
+  svg.addEventListener('pointerdown', e => pan(svg, group, e), { passive: false });
 }
 
 function storePanZoomVal(transformMatrix) {

src/modules/record_sheet.js

@@ -194,6 +194,8 @@ export function start(startLoc, units) {
 
   Observable.subscribe('select', select);
   Observable.subscribe('endmove', endMove);
+
+  console.log('records created');
 }
 
 export function stop() {