I am looking for something like FlDraw, to allow me to draw floor plans or shopping malls, offices, industrial plants and the like.
The catch is that I want the parts of the floorplan to be identifiable. That is, I will embed the floorplan in a webpage and when, the user clicks, I want to be able to identify the store, office, room, etc where they clicked, preferably using AngularJs, but plain old JS will do in a pinch.
In fact, this _might_ be a two part question – one to draw the floor plans, and - the trickier part - a program to split the image into segments (imagine taking a map of the USA and delineating the states) in such a way that (Angular) JS can determine when one is clicked.
I prefer a Windows app, but am also open to Linux.
[Update] I require SVG, with each room delineated by a separate SVG path
[Update++] I only want 2D, not 3D, and I only want to draw walls, doors, stairs & the like. What I do not want are lots of options for sofas, filling cabinets, potted plants & the like. This is for shopping malls & industrial plants. I suppose I don’t object of there are some icons toilets, emergency exists, but I can live without those if I have to.
Black & white is just fine. I can add colo(u)r later, in the HTML, if I want it.
The most important thing is that each room is a separate SVG path, so two adjoin rooms really need to two touching but separate” walls” between them, not just a single line. This is so that I can enclosed each room in an SVG path and detect clicks within the room.
Bad ascii art follows
+--------------------++--------------------+
| || |
| Room 1 || Room 2 | <----- like this
| || |
| / || / |
+--/ ------------++-/ ----------+
+--------------------+--------------------+
| | |
| Room 1 | Room 2 | <----- NOT like this
| | |
| / | / |
+--/ ------------+-/ ----------+
isPointInPath()
to detect clicks