From 1b1a809178ecb4e4ae0f2204c441f4c2921b7785 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 8 Jun 2024 11:17:40 -0700
Subject: WIP: Fix pan-zoom for webkit
---
package-lock.json | 4 ++--
package.json | 2 +-
public/assets/css/map.css | 4 ----
public/assets/css/style.css | 7 ++++++-
public/assets/images/scenario_template.svg | 4 ++--
src/index.js | 8 +++++++-
src/modules/pan-zoom.js | 9 +++++++--
src/modules/record_sheet.js | 2 ++
8 files changed, 27 insertions(+), 13 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 8f631c8..f0c7265 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 9c26357..105f2c9 100644
--- a/package.json
+++ b/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",
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 476560a..3d532ed 100644
--- a/public/assets/css/map.css
+++ b/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;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 582e118..649b425 100644
--- a/public/assets/css/style.css
+++ b/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;
+ }
}
diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg
index 8f8b5f7..3a6045a 100644
--- a/public/assets/images/scenario_template.svg
+++ b/public/assets/images/scenario_template.svg
@@ -45,9 +45,9 @@
-
-
+
+
diff --git a/src/index.js b/src/index.js
index 87c9bfb..c7e040a 100644
--- a/src/index.js
+++ b/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() {
diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js
index 86f6727..3818444 100644
--- a/src/modules/pan-zoom.js
+++ b/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) {
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index f786112..132a7dd 100644
--- a/src/modules/record_sheet.js
+++ b/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() {
--
cgit v1.2.3