Drag and Drop

[SamuelReinfelder]

Hi, thank you for this great project. Is there any work done for drag&drop items and move them around?

My test case would be:

• Draw a rectangle
• Add a line
• Move the line around with the mouse
• Intersect the line with the rectangle and calculate the intersections
• Add text with the intersection points

I am not so sure if the moving around part is feasable or if I should better use a different project?

Kind regards, Samuel

[danmarshall]

Hi @SamuelReinfelder, this library is primarily concerned with modeling drawings, and can run "server-side" without any UI. So there is no built-in concept of HTML, DOM, mouse, etc. Having said that, it will still play nicely with any UI library of your choice.

Can you provide any further info on what your app will do beyond what you already described? It might help me to recommend this or a different library.

[SamuelReinfelder]

The idea is to define a 2D object (rectangle) and let the user modify it. These modifications could be two things: 1.) A part of the rectangle is cut of (straight line). The user must therefore be able to select two points on the rectangle and the new form should be displayed (a pentagon to be precise) 2.) A circle should be placed somewhere intersecting with the rectangle. The circle should be substracted from the rectangle and the new form shown.

It would be great if the user could press "Add circle" and a circle is shown. Now the user can pull the circle around to place it where he/she wants it. (Same for the line)

I could image doing this without UI-elements, but it would be a much better quality if the user could do this with drag/drop.

I am grateful for any advice. Do you have any UI library in mind?

Best regards, Samuel

[danmarshall]

@SamuelReinfelder I would try to do this using the raw DOM API. A quick search will show you the basics. What's your level of expertise in development? I'm also wanting to create an app with some of these features, perhaps we could collaborate if our ideas overlap enough.

The app I'd like to create would have some of the drag & drop features you describe, but my primary desire is for this UI to output JavaScript code. So I'm thinking that the app would be a quickstart for a design, then you continue with coding when the UI becomes too complicated.

[ysraelJMM]

It's just what I'm doing. I have a small library for the management and SVG elements with javascript. Run well, I made a small text editor and what it generated was an XML file, but I realized that it is more convenient to create a file directly dxf, looking for that I got here. Could we do a collaboration?   You can see the example here: https://www.youtube.com/watch?v=owlhhAZl9Tg

[danmarshall]

@ysraelJMM that is a great implementation! Thank you for adding the video. Is it open source?

[ysraelJMM]

This project does not, but the library with which it is made yes. As you can see, I have to use inkscape to convert to dxf, which I could avoid if I created the file directly with javascript.

[danmarshall]

@ysraelJMM let me know what I can do to help you integrate Maker.js 👍

[ysraelJMM]

Thank you. My question would be: What is the syntax to use your library ?, that is, I already have the SVG file created, where the texts are, normal and circular. These already contain the data of the font size, font, etc. To be able to generate a dxf file. For my part I have been reviewing the demo: https://maker.js.org/playground/?script=makerjs-wrap-text And I'm understanding. Let me give you some advice; since you work with SVG for graphics. You should better use the format for SVG texts directly, and leave the calculation of the paths for the results. So the editor would run much faster.

[danmarshall]

@ysraelJMM if your laser cutter application can use SVG text, then yes you should probably use that; you might exclude Text models when you export to SVG. But, if you are converting to DXF, you may want to use the calculated paths of Text models. It all depends on your application.

[DanDaHahn]

Hi Dan. I hope that this problem fits in this thread. For the time being I did not want to open a new one. I would like to be able to select the svg elements respectively make them clickable. I know there is already a way to select the elements by clicking at the pathnames. But I want to make that happend just by clicking at the element directly. I didn’t manage to select the elements with DOM API until now. It seems like that i cant get trough the layers where the svg-elements are. Using the z-index and pointer-events property didn’t do the trick for me. Do you have any suggestions?

Best regards

[danmarshall]

Hi @DanDaHahn - take a look at the SVG export document: https://maker.js.org/docs/exporting/#SVG Try using "path only" mode. In the document, it explains that the output SVG has the same structure as your model- models become <g> elements, which contain <line>, <circle> etc. So you should be able to traverse it the same as you would your model. Hope that makes sense.

[danmarshall]

@DanDaHahn - re-reading your question. There is a div called touch-shield that prevents elements from receiving events when the mouse is down. You can eliminate the div here or you can remove the css here.

It is activated here.

[DanDaHahn]

I already removed the touch-shield before and it didn't work. But after you mentioned it here I did it again and it worked.... Thank you again.

[danmarshall]

Closing this issue for now, as I probably won't be implementing it here. Please re-open the issue if you have any further questions.