WIP: Fix pan-zoom for webkit

package-lock.json

@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "pan-zoom": "github:webdevcat-me/pan-zoom"
+        "pan-zoom": "github:webdevcat-me/pan-zoom#transform-descendant"
       },
       "devDependencies": {
         "esbuild": "^0.20.2",
@@ -3820,7 +3820,7 @@
     },
     "node_modules/pan-zoom": {
       "version": "0.1.0",
-      "resolved": "git+ssh://git@github.com/webdevcat-me/pan-zoom.git#2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf"
+      "resolved": "git+ssh://git@github.com/webdevcat-me/pan-zoom.git#d40c81c2c6aade48ca2de4376bd4f2bd7c3e56b3"
     },
     "node_modules/parent-module": {
       "version": "1.0.1",

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "dependencies": {
-    "pan-zoom": "github:webdevcat-me/pan-zoom"
+    "pan-zoom": "github:webdevcat-me/pan-zoom#transform-descendant"
   },
   "devDependencies": {
     "esbuild": "^0.20.2",

public/assets/css/map.css

@@ -210,10 +210,6 @@ g.selected use.primary-weapon {
   fill: red;
 }
 
-.gameboard {
-  transform: translate(19px, 31px) scale(4);
-}
-
 /* Inradius and circumradius values come from the hexagon */
 .grid, g.start-locations {
   --inradius: 8.66px;

public/assets/css/style.css

@@ -155,7 +155,7 @@ button.set-firing-arc img {
 }
 
 .soldier-record {
-  display: inline-block;
+  display: block;
   position: relative;
   white-space: nowrap;
   background-color: white;
@@ -260,6 +260,7 @@ div#content {
   max-height: 100vh;
   flex-direction: column;
   position: relative;
+  min-width: 340px;
 }
 
 #content > div:first-of-type {
@@ -452,4 +453,8 @@ div#dice {
   #record-sheet > div:last-of-type > div {
     margin-left: 1px;
   }
+
+  div#content {
+    min-width: 680px;
+  }
 }

public/assets/images/scenario_template.svg

@@ -45,9 +45,9 @@
     <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
   </defs>
 
+  <g class="gameboard">
     <rect id="background"/>
 
-  <g class="gameboard">
     <rect id="dots" fill="url(#asterisk)"/>
 
     <g id="firing-arcs">

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() {