The following code presents the issue, when you click in the gray area a +
sign is added to #node-container
. Now if you zoom out using your mouse wheel or touch pad and then pan along x or y axis with click and drag and then try to click to place the +
the placement is very wrong.
I want to place the +
sign exactly at the mouse position
let canvas = document.getElementById('canvas');
let nodeContainer = document.getElementById('node-container');
let pz = {
offset: {
x: 0.0,
y: 0.0
},
zoom: 1
};
let isDragging = false;
let c = 0;
// pan and zoom
const updateDom = () => {
let x = pz.offset.x * pz.zoom +'px';
let y = pz.offset.y * pz.zoom +'px';
let z = pz.zoom;
nodeContainer.style.transform = `translate(${x}, ${y}) scale(${z})`
}
const handleMouseDown = () => {
isDragging = true;
};
const handleMouseUp = () => {
isDragging = false;
};
const handleMouseMove = (e) => {
if (!isDragging) {
return;
}
if (e.buttons !== 1) {
isDragging = false;
return;
}
pz.offset = {
x: pz.offset.x + e.movementX / pz.zoom,
y: pz.offset.y + e.movementY / pz.zoom
};
updateDom();
};
const handleWheel = (e) => {
e.preventDefault();
e.stopPropagation();
if (e.ctrlKey) {
const speedFactor =
(e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * 10;
const pinchDelta = -e.deltaY * speedFactor;
pz.zoom = Math.min(
1.3,
Math.max(0.1, pz.zoom * Math.pow(2, pinchDelta))
)
}
updateDom();
}
canvas.onwheel = handleWheel;
canvas.onmousedown = handleMouseDown;
canvas.onmouseup = handleMouseUp;
canvas.onmousemove = handleMouseMove;
canvas.addEventListener('click', (e) => {
let nc = nodeContainer.getBoundingClientRect();
let pzx = pz.offset.x / pz.zoom;
let pzy = pz.offset.y / pz.zoom;
let marker = document.createElement('span');
marker.innerText = '+'
marker.style.fontSize = '19pt';
marker.style.position = 'absolute';
let nx = (e.x/pz.zoom) + nc.x;
let ny = (e.y/pz.zoom) + nc.y;
marker.style.left = nx - pzx + 'px'
marker.style.top = ny - pzy + 'px'
nodeContainer.appendChild(marker);
});
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-2 divide-x">
<div id="canvas" class="relative h-screen bg-gray-100">
<div id="container" class="absolute origin-top-left w-0 h-0 overflow-visible">
<div id="node-container" class="absolute w-0 h-0 overflow-visible"></div> <!-- end of #node-container -->
</div> <!-- end of #container -->
</div> <!-- end of canvas & left col -->
<div>
</div> <!-- end of right col -->
</div>
2
Answers
In your code you added the nodeContainer’s x and y to your + , you can try removing it. like:
From:
to:
Try this and see if it works