WIP: think I got zoom working?
This commit is contained in:
Catalin Mititiuc
parent
42428e3643
commit
77bbf5b826
@ -101,10 +101,6 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
debug margin
|
||||
</div>
|
||||
|
||||
<svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
|
||||
@ -131,8 +127,7 @@
|
||||
<image id="img2" href="scans/map1.jpg" width="2284" height="1518" />
|
||||
<g id="firing-arcs"></g>
|
||||
<rect id="map" x="0" y="0" width="34in" height="23in" />
|
||||
<rect id="view-box" x="-100" y="-100" width="3450" height="2400" />
|
||||
<!-- <rect id="view-box" x1="-100" y1="-100" x2="3450" y2="2400" /> -->
|
||||
<!-- <rect id="debug-view-box" x="-100" y="-100" width="3450" height="2400" /> -->
|
||||
</svg>
|
||||
|
||||
<div id="content">
|
||||
|
||||
116
index.js
116
index.js
@ -368,27 +368,23 @@ 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 el = document.getElementById('view-box');
|
||||
let el = document.querySelector('svg');
|
||||
// let vb = document.getElementById('debug-view-box');
|
||||
|
||||
let boundingRect = el.getBoundingClientRect();
|
||||
// let boundingRect = vb.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);
|
||||
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);
|
||||
|
||||
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 widthDelta = width * 0.25;
|
||||
let heightDelta = height * 0.25;
|
||||
|
||||
let xChange = pointerX / boundingRect.width * widthDelta;
|
||||
let widthChange = (1 - (pointerX / boundingRect.width)) * widthDelta;
|
||||
@ -396,26 +392,94 @@ svg.addEventListener('wheel', e => {
|
||||
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);
|
||||
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);
|
||||
|
||||
el.setAttributeNS(null, 'y', newY < VIEWBOX_Y ? VIEWBOX_Y : newY);
|
||||
el.setAttributeNS(null, 'height', newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight);
|
||||
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;
|
||||
// }
|
||||
|
||||
|
||||
el.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`);
|
||||
|
||||
// let vb = [
|
||||
// newViewBoxX,
|
||||
// newViewBoxY,
|
||||
// newViewBoxWidth,
|
||||
// newViewBoxHeight,
|
||||
// ].join(' ');
|
||||
|
||||
// el.setAttributeNS(null, 'viewBox', vb);
|
||||
}, { passive: false });
|
||||
13
style.css
13
style.css
@ -53,6 +53,9 @@ text.counter {
|
||||
rect#map {
|
||||
fill: black;
|
||||
opacity: 0;
|
||||
/* fill-opacity: 0;
|
||||
stroke: red;
|
||||
stroke-width: 4px; */
|
||||
}
|
||||
|
||||
polygon.firing-arc {
|
||||
@ -116,8 +119,8 @@ image#img2 {
|
||||
}
|
||||
|
||||
#record-sheet {
|
||||
/* display: flex; */
|
||||
display: none;
|
||||
display: flex;
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
#record-sheet > div {
|
||||
@ -140,9 +143,9 @@ div.soldier-record.selected {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
rect#view-box {
|
||||
stroke: red;
|
||||
stroke-width: 20px;
|
||||
rect#debug-view-box {
|
||||
/* stroke: red;
|
||||
stroke-width: 20px; */
|
||||
fill: blue;
|
||||
fill-opacity: 0.2;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user