diff --git a/index.js b/index.js
index 398ea4c..faa9e9c 100644
--- a/index.js
+++ b/index.js
@@ -71,7 +71,7 @@ const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT
svg.viewBox.baseVal;
const COLUMN_COUNT = 33,
- ROW_COUNT = 25,
+ ROW_COUNT = 51,
HORZ_POINT_DISTANCE = 1.005,
VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2,
ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2,
@@ -368,29 +368,27 @@ 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 vb = document.getElementById('debug-view-box');
+ // const pt = svg.createSVGPoint();
+ const pt = new DOMPoint(e.clientX, e.clientY);
- let boundingRect = el.getBoundingClientRect();
- // let boundingRect = vb.getBoundingClientRect();
- let pointerX = e.clientX - boundingRect.left;
- let pointerY = e.clientY - boundingRect.top;
+ // pt.x = e.clientX;
+ // pt.y = e.clientY;
- let { x, y, width, height } = el.viewBox.baseVal;
- // let [x, y, width, height] = [vb.x, vb.y, vb.width, vb.height].map(v => v.baseVal.value);
+ const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
+
+ let { x, y, width, height } = svg.viewBox.baseVal;
let widthDelta = width * 0.25;
let heightDelta = height * 0.25;
- let xChange = pointerX / boundingRect.width * widthDelta;
- let widthChange = (1 - (pointerX / boundingRect.width)) * widthDelta;
+ let xChange = (svgP.x - x) / width * widthDelta;
+ let yChange = (svgP.y - y) / height * heightDelta;
- let yChange = pointerY / boundingRect.height * heightDelta;
- let heightChange = (1 - (pointerY / boundingRect.height)) * heightDelta;
+ let widthChange = (1 - ((svgP.x - x) / width)) * widthDelta;
+ let heightChange = (1 - ((svgP.y - y) / height)) * heightDelta;
let newX = e.deltaY < 0 ? x + xChange : x - xChange;
let newWidth = e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange;
@@ -400,86 +398,25 @@ svg.addEventListener('wheel', e => {
console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y);
console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT);
- // console.log('VIEWBOX_WIDTH - newX', VIEWBOX_WIDTH - newX);
-
- let myNewX, myNewY, myNewWidth, myNewHeight;
-
- 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;
+ // if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) {
+ // newWidth = VIEWBOX_WIDTH;
+ // newX = VIEWBOX_X;
+ // } else if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X) {
+ // let diff = newWidth + newX - VIEWBOX_WIDTH - VIEWBOX_X;
+ // 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;
+ // }
- el.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
-
- // let vb = [
- // newViewBoxX,
- // newViewBoxY,
- // newViewBoxWidth,
- // newViewBoxHeight,
- // ].join(' ');
+ // newX = newX < VIEWBOX_X ? VIEWBOX_X : newX;
+ // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY;
- // el.setAttributeNS(null, 'viewBox', vb);
+ svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
}, { passive: false });
\ No newline at end of file
diff --git a/style.css b/style.css
index 5ea3cd0..9603e1a 100644
--- a/style.css
+++ b/style.css
@@ -1,14 +1,39 @@
+body {
+ margin: 0;
+ max-height: 100vh;
+ display: flex;
+ overflow: hidden;
+}
+
svg {
background-color: darkgray;
flex-basis: 100%;
+ /* transform: rotate(-90deg);
+ transform-origin: center; */
+ /* max-height: 50vh; */
+ /* max-height: 100vw; */
}
div#content {
flex-basis: 0;
+ /* overflow: scroll; */
}
-body {
- margin: 0;
+#record-sheet {
+ max-height: 100vh;
+ overflow: auto;
+ /* display: flex; */
+ /* display: none; */
+}
+
+#record-sheet > div {
+ padding: 0 2px;
+}
+
+#record-sheet > div > div {
+ border: 1px solid black;
+ margin: 2px 0;
+ padding: 2px;
}
circle#point {
@@ -86,6 +111,7 @@ line.ruler {
.soldier-record {
display: inline-block;
+ position: relative;
white-space: nowrap;
}
@@ -94,7 +120,7 @@ image#img1 {
/* opacity: 0.33; */
}
-image#img2 {
+image.map-scans {
transform: scale(1.39, 1.407) rotate(0.07deg);
/* opacity: 0.33; */
}
@@ -117,21 +143,6 @@ image#img2 {
font-size: 30;
}
-#record-sheet {
- display: flex;
- /* display: none; */
-}
-
-#record-sheet > div {
- padding: 0 2px;
-}
-
-#record-sheet > div > div {
- border: 1px solid black;
- margin: 2px 0;
- padding: 2px;
-}
-
img.logo {
width: 100px;
margin: 0 auto;
--
cgit v1.2.3