dragger | Make anything draggable for mobile and desktop | Widget library

It looks like the only way without editing their source code is using ConfigProvider to match your localization. I assume that's what you want to modify is convert the text to Spanish.

DEMO

The correct calculation is

There's a simple way to keep the arbitrary width of your image drawn onto the first canvas, when drawing on the second. Instead of making the ImageElement the source for both canvases, just use it for the distortion on the first canvas and actually use this distorted canvas as the source for your second canvas.

Here's an example:

Your update approach in StellarTest1 looks conceptually fine to me (I assume this 1000f factor is way to adjust the gravitational constant/mass of the bigger body). However, of you want some extra decay of the orbit, you need to add some fictitious velocity-dependent drag term to the acceleration. There is no need of StellarTest2, because you should get a comparable results while the calculation of cos and sin is slower and expensive, while the same components in StellarTest1 are calculated in a purely algebraic way (multiplication and division) which are much faster.

But to achieve some interesting orbit you need not only the two coordinates of the initial position of the smaller object, but also the two coordinates of the initial velocity of the smaller object! Without specifying the initial velocity or assuming it is zero you are not going to get a nice curved orbit. You need to choose initial velocity. Also, the orbits should not get nowhere near the center of the big object, because the Newtonian gravitational force-field has a singularity at the center of the bigger body, so the closer the smaller body gets to that singularity, the worse the orbit will look (and the numerical errors will blow out of proportion) and it is not surprising you are getting the smaller body shot out of the center of the bigger one.

In general there is a way to choose a velocity that will send the smaller body on an elliptic orbit with predefined orbital parameters: the length of the semi-major axis a, orbital eccentricity e, the angle omega between the semi-major axis and the horizontal x-axis and the angle f (called true anomaly) between the position vector from the bigger to the smaller body and the the semi-major axis.

I actually dove way too deep on this one, so bear with me.

The first part of the solution is actually similar to one I answered here. Dragging calculates the distance between the current dragged element and a container. Normally, that container is the parent node. However, if you move the parent node of the drag handle (like you do), then the container is offset against itself, which breaks. If you make the grandparent the container instead, using this.parentNode.parentNode, the varying output goes away.

All this actually happens within d3.pointer in d3.selection, where the function is called with a Touch event and the .container node. The node being the problem here, because it is equal to the node you're trying to move.

Now, that being solved, everything looked good. However, on my mobile simulator, the wiggling remained, even while the output was stable. The following image is the result of console.log(event.x, event.y, angle123). As you can see, the first two remain stable, but the last one wiggles.

The reason for that wiggling is that you're using d3.pointers(), which automatically calls d3.pointer() again. But this time, it uses the wrong node. So not the grandparent, but the parent. So instead of using d3.pointer, you can get the equivalent values yourself.

You can try add accept props to Dragger component.

Exp: If only allow image files

Files are actually stored on the element itself in the DOM, so to access it you must access the target of the event and then its files attribute. The MDN docs on files has more information, so just access event.target.files and you should be able to find your file. This is assuming you're handling React's Synthetic Event.

You forgot to set property Drag.active for your draggable target, e.g. put statement

The slot attribute is deprecated and it's replaced by v-slot:slotname for named slots and you should use it as follows :