I have clicked on a coordinates and remove with the help of MouseEvent clientY and ClientX value. I have some coordinates in database and I want to hit them same as it clicked as event. I have used bellow code.
const pixel = map.getPixelFromCoordinate(coordinates);
event = {}
event.clientX = pixel[0];
event.clientY = pixel[1];
simulateSingleClick(map, event);
But not able to click because event's clientY and above clientY value has lot of different.
The map viewport is a viewport within the client viewport https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect so unless you have a full page map you will need to add the left and top offsets of that
const vpClient = map.getViewport().getBoundingClientRect();
const pixel = map.getPixelFromCoordinate(coordinates);
event = {}
event.clientX = vpClient.left + pixel[0];
event.clientY = vpClient.top + pixel[1];
simulateSingleClick(map, event);
Related
I have d3 line chart with two lines full with events and made a html tooltip to show some data from these events on mousemove. Its working fine until the moment when you switch to show only one line, than the tooltip doesnt receive any data. Ive log the data and it is coming to the tooltip, but tooltip is not receiving it for some reason. Check the code bellow:
const tooltip = d3.select('.Tooltip')
.style('visibility', 'hidden')
.style('pointer-events', 'none')
function mousemove (event) {
// recover coordinate we need
const mouse = d3.pointer(event, this)
const [xm, ym] = (mouse)
const mouseWindows = d3.pointer(event, d3.select(this))
const [xmw, ymw] = (mouseWindows)
const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)) // closest point
path.style('stroke-width', ([z]) => Z[i] === z ? strokeWidthHovered : strokeWidth).filter(([z]) => Z[i] === z).raise()
dot.attr('transform', `translate(${xScale(X[i])},${yScale(Y[i])})`)
// console.log(O[i]) <-- this is the data for the current selected event and its fine after
changing the line shown
tooltip
.data([O[i]])
.text(d => console.log(d)) <-- here i log what is coming from data and doesn`t return anything
.style('left', `${tooltipX(xScale(X[i]), offSetX)}px `)
.style('top', `${tipY}px`)
.style('visibility', 'visible')
.attr('class', css.tooltipEvent)
.html(d => chartConfig.options.tooltip.pointFormat(d))
When you call tooltip.data([0[i]]), d3 returns a selection of elements already associated with your data, which does not make sense for your tooltip. If you already computed the value you want to show (I assume it is O[i]), then simply set the text or the html of the tooltip:
tooltip.html(chartConfig.options.tooltip.pointFormat(O[i]);
I am using react with typescript. I have a canvas and I am trying to draw a rectangle inside the canvas based on mouseup and mousedown event. I don't know what I am doing wrong here my rectangles are drawn but in different positions.
This is how my code looks like:
const Home = () => {
const divRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
let paint = false;
let StartClientXCord: any;
let StartClientYCord: any;
let FinishedClientXCord: any;
let FinishedClientYCord: any;
function startPosition(e:any){
paint = true;
StartClientXCord = e.clientX;
StartClientYCord = e.clientY;
}
function finishPosition(e:any){
FinishedClientXCord = e.clientX;
FinishedClientYCord = e.clientY;
paint = false;
}
function draw(e: any){
if(!paint){
return
}
if(divRef.current){
const canvas = divRef.current.getContext('2d');
if(canvas){
canvas?.rect(StartClientXCord, StartClientYCord, FinishedClientXCord - StartClientXCord, FinishedClientYCord - StartClientYCord);
canvas.fillStyle = 'rgba(100,100,100,0.5)';
canvas?.fill();
canvas.strokeStyle = "#ddeadd";
canvas.lineWidth = 1;
canvas?.stroke();
}
}
}
if(divRef.current){
divRef.current.addEventListener("mousedown", startPosition);
divRef.current.addEventListener("mouseup", finishPosition);
divRef.current.addEventListener("mousemove", draw);
}
})
return (
<canvas className='canvas' style={{height: height, width: width}} ref={divRef}>
</canvas>
)
}
I am drawing on a different position box is drawing on a different position. Here I attached the screenshot as well
I believe it's because you are using clientX and clientY, which MDN defines as:
The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
This is the absolute position on the entire page. What you want is the is the position reative to the top left corner of the canvas. You want offsetX and offsetY which MDN defines as:
The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
So give this a try:
StartClientXCord = e.offsetX;
StartClientYCord = e.offsetY;
I have FabricJs canvas. And I have multiple objects outside canvas. When I click on object, it appears in Canvas. I am not doing anything else with this object programmatically.
Here is part of code that add image to Canvas (it is React code):
const { state, setState } = React.useContext(Context);
const { canvas } = state;
...
const handleElementAdd = (event, image) => {
const imageSize = event.target.childNodes[0].getBoundingClientRect();
const imageUrl = `/storage/${image.src}`;
new fabric.Image.fromURL(imageUrl, img => {
var scale = 1;
if (img.width > 100) {
scale = 100/img.width;
}
var oImg = img.set({
left: state.width / 2 - img.width * scale,
top: state.height / 2 - img.height * scale,
angle: 0})
.scale(scale);
canvas.add(oImg).renderAll.bind(canvas);
canvas.setActiveObject(oImg);
});
};
...
<div
key={img.name}
onClick={(e) => handleElementAdd(e, img)}
className={buttonClass}
>
It appears, I can drag and drop, resize, select it. However, when my object is placed in top left corner of canvas, it is not clickable, resizable etc. I can select larger area and then object is selected, but it doesn't respond to any events like resize, select etc.
Not sure where to look at.
I read that if coordinates are changed programmatically object.setCoord() to object can help, but in this case I do not understand where to put it.
You have to put (call) object.setCoords() each time you have modified the object, or moved the object. So, you can call it on mouseUp event of the canvas.
You can write a function naming "moveObject" in which you get the object you are trying to move/moved/updated. And then just selectedObject.setCoords().
Then call that function inside canvas.on('selection:updated', e => {----})
I'm trying to do a web app on React to write guitar tabs, i'm doing the tabs with SVG. I think i know how to get the coords but the problem is i don't know how to put that text tag with a value, because it doesn't have a value attribute (i think so)
my function:
// Doesn't work
// Suppose that i want to add a 2
const clicked = (evt) =>{
const { currentTarget: svg, pageX, pageY } = evt
const coords = svg.getBoundingClientRect() //<----- get the coords
const text = document.createElementNS('http://www.w3.org/2000/svg','text') //<--- create the svg
text.setAttribute('x', `$pageX - coords.x`) //<----- set the attributes X and Y with the mouse coords
text.setAttribute('y', `$pagey - coords.y`)
text.setAttribute('value', "2") //<----- It doesn't work
svg.appendChild(text)
}
heres other function, but to put circles:
//IT WORKS
clicked(evt) {
const {currentTarget: svg, pageX, pageY} = evt;
const coords = svg.getBoundingClientRect();
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', `${pageX - coords.x}`);
circle.setAttribute('cy', `${pageY - coords.y}`);
circle.setAttribute('r', '5');
svg.appendChild(circle);
}
Text is not an attribute, it's content so you want to replace
text.setAttribute('value', "2")
with
text.appendChild(document.createTextNode("2"))
I am using react Chartjs's scatter chart to plot a line chart for a set of X,Y points.
I am trying to get the X and Y points when user right clicks anywhere on the chart by passing following function to onClick.
options={
...
onClick: function(event) {
let activeElement = Ref.current.chartInstance.getElementAtEvent(
event
);
let res =
Ref.current.chartInstance.data.datasets[
activeElement[0]._datasetIndex
].data[activeElement[0]._index];
}
}
But this only works when I click on plotted line on the existing point and not when I click anywhere in the chart. If I click anywhere else other the line, returned activeElement will be empty list.
How can I get X and Y regardless of where I click in chart area?
onClick: (e) => {
const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
// replace .x. and .y. with the id of your axes below
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
},