Draggable line with draggable points in ReactJS or plain JS? - javascript

I've been working on trying to create a draggable line with draggable points on my website. I'm working on a really simple proof of concept.
So far, I have been able to get two draggable points, and a line that gets drawn between the two points, but I am really stumped on how I can also make the line itself draggable and just have the lines move along with it. (Basically like the behavior in DrawIO for editing a plain line https://app.diagrams.net - draggable dots with a draggable line)
Here's some of the proof of concept code that I have so far: https://codesandbox.io/s/stupefied-fermat-qpigl
I'm thinking I might have to create my own listeners on the line and have it manually update the coordinates of the endpoints since I don't think I can get Drawable to work with both the line and the points without it exploding.
Anyone have options or tips on how I could get this working?
Update: I was able to get the whole line to move but only by kind of working around the issue. I made a midpoint between the two endpoints and made that midpoint draggable. Based on how much that midpoint was dragged, I also dragged the endpoints. The line will always be calculated to be drawn between the endpoints. It's still not ideal though, as I was hoping to make the whole line draggable itself. Still would appreciate ideas!
Updated sandbox: https://codesandbox.io/s/jovial-pascal-8s6x2

Related

How to click on a Cell object?

I'm using Javascript, p5.js, and Daniel Shiffman's tutorial to create a visual representation of an A* search algorithm.
An image of an example grid looks like this:
example grid
Is it possible to click on any cell of the grid, in order to print out it's attributes? Based on Daniel Shiffman's other tutorial on how to click on objects, I understand I have to create 2 functions that activate and execute respectively. I understand how to do this with a circle because a circle has a radius.
But, I don't understand how to do this with a cell because I only have it's coordinates. I can't see how to use coordinates as a metric to calculate length.
I'd appreciate any guidance to my thinking. Thank you so much in advance.
I wrote a tutorial on collision detection available here. That's for regular Processing, but everything is the same in P5.js. You're looking for rectangle-point collision.
Basically, you need to check whether the point is between the left and right edges of the rectangle and between the top and bottom edges of the rectangle. If both are true, then the point is inside the rectangle.
I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, try getting it working with a single hard-coded rectangle and point before you try it with multiple cells or with user input.

what is the algorithm for updating tile position in Gridster.js

Gridster.js allows to drag and drop tiles of variable size and rearrange tiles as we drag one tile.
Does anyone know the algorithm for rearranging the tiles?
I want to make this type of grid layout in action script and I am not much familiar with Javascript, I have already tried to read the code but don't understand most of the things, so if someone can give me the algorithm I will try to implement logic using action script.
i tired a little bit more and made a grid layout as per my requirement.
here is a demo link
i'll try to write an abstract algorithm for updating this type of tile layout,
As the time Drag is Started:
Calculate new drop location for the dragged item and move the drag item to the new location.
Check if their is any collision after moving.
if collision , fix the collision(i.e. move the collision tile down) go to step 2.
Update other tiles positions.(i.e check if any tile can be move upward if free space is available)

Draw links to a d3 circle pack layout

I need to be able to draw links between the circles in a circle pack layout, like {source: i, target: j}. I've seen some questions about how to combine this layout with the force layout that made me think It could be a way to achieve this but I haven't had any luck on that path, also what I need is something completely static. Thank you in advance for any suggestions.
I finally could draw lines between nodes by appending them to the svg and calculating each line position based on the radius of the nodes that each line were to connect, but the problem was that the pack layout that I'm using is zoomable, so when I tried to zoom by clicking the lines neither translate nor re-sized (of course, since there was no code performing such things), so I tried to implement a translation function for the lines so they would move along with the zoom, then I saw that it would take some serious geometry to achieve this, so since I'm a lazy programmer and not at all experienced with d3 I tried to come with something more simple... at last I decided to represent the links between the nodes with a different approach (without lines), I used the "mouseover" event so when the pointer is over a node it will highlight (changed circle stroke attribute color and width) the nodes connected to it. This way I achieved my goal and the view looks a lot cleaner without all the lines crossing over it (they were a lot). I know that some may think that this does not answer the original question, and I'm sure that this can be achieved by someone with more experience (and time and patience) using lines and implementing the right calculation, but in my case this solution solves my problem and maybe it could be of help to others.

How can I get this svg circle to appear above my d3 path and not below?

I wrote a d3 graph plugin that draws a graph based on real time data given to it. When you mouseover the graph, there is a tooltip that follows your mouse, showing data at that point. Part of this tooltip is a circle that appears on the path at the closest point to the cursor. The problem is that no matter what I try, I cannot get this circle to appear above the path line like it's suposed to. I have tried using z-index, changing the append order of elements, and some other really wacky attempts. Nothing has had an affect (besides breaking everything.) Here's a pastebin of the code. The element in question has the class "focusCircle". Any help would be greatly appreciated.
Your circle gets rendered before the "resize" function is called. The "resize" function calls the "draw" function, where 2 paths get appended. I think those are the ones above your circle.

Raphael Pie Chart

I am trying to create a pie chart and am customizing the example here: http://raphaeljs.com/pie.html
I need to draw lines from the labels to the slices but IE is giving me trouble and I'm not sure what to do about overlapping lines and labels.
Has anyone done this before?
this maybe useful to you:
Overlapping issues can usually be solved by using:
a) ".toFront()" on the raphael element, that should appear in foreground
b) ".getBBox()" at your label and use its parameters to figure out the starting point.
those functions can be looked up in the raphaeljs reference.
.getBBox() should be a good way to start, when you try to connect elements. you can easily figure out its meassurements and use those values (x,y,width,height) to calculate the entry point of your path
that makes it easier to avoid any overlapping at all. but keep in mind the end SVG elements are directly placed within the dom and therefor are meant to work in layers.
overlapping / partially hiding elements often offer you a great animation potential and are not really a bad thing to work with.

Categories