mehanix / arcada

📐 react & pixi.js interior design software / floor plan creator
https://arcada.nicoleta.cc
Apache License 2.0
77 stars 23 forks source link

Relationship between WallNodes and WallnodeLinks #10

Open mariovde-IIO opened 6 months ago

mariovde-IIO commented 6 months ago

Hi

First of all: thank you so much to make this publicly available! When I was looking through the setup, I stumbled on this:

"wallNodes": [ { "id": 1, "x": 2200, "y": 2300 }, { "id": 2, "x": 2720, "y": 2300 }, { "id": 3, "x": 2720, "y": 2600 }, { "id": 4, "x": 2400, "y": 2770 }, { "id": 5, "x": 2470, "y": 2300 }, { "id": 6, "x": 2470, "y": 2500 } ], "wallNodeLinks": [ [1, [4, 5]], [2, [3, 5]], [3, [4]], [4, []], [5, [6]], [6, []] ]

Could you explain the relationship between the wallnodes and the wallnodelinks please? I drew room, with multiple angled walls, but now I am trying to figure out what the link is between wallnodelinks and wallnodes.

thanks!

mariovde-IIO commented 6 months ago

I figured it out! the wallnodelinks should be seen as this: for example : [1, [4, 5]], draw a line (wall) from the coordinates of item with id 1 from wallnodes, being this: { "id": 1, "x": 2200, "y": 2300 }, The second item in wallnodelinks is [4, 5]. Same logic as above: start from "x": 2200, "y": 2300 and draw a line to { "id": 4, "x": 2400, "y": 2770 }, and do the same for 5: start from { "id": 1, "x": 2200, "y": 2300 }, and draw to { "id": 5, "x": 2470, "y": 2300 }, Result 3 coordinates, and 2 lines(walls)

mehanix commented 6 months ago

Hi Mario,

really happy you are enjoying the tool! Yes you are right.

The way room drawing works is as follows:

The room is kept in memory as a directed graph. Wherever at least 2 walls meet, you will have "nodes" (connection points. I can't call them "corners" because you can have an unlimited amount of nodes that meet in the same spot). The edges of the graph are the walls. This allows for the nice dragging and resizing behavior you see in the app.

There is some documentation for this app here but it's unfortunately in my native language, this was my bachelor's thesis project actually: https://github.com/mehanix/arcada/blob/master/docs/Docs%20-%20Bachelor's%20thesis.pdf

I did not expect this project to gain any attention at all so i did not translate it. Maybe I should :D

Here are some pictures that explain it better, for a house with this layout: Screenshot from 2024-03-05 16-55-15

The in-memory graph structure actually looks like this:

image

All the round points A, B, C... are "wallNodes", all edges A->B, A->G etc. are "wallNodeLinks".

Hope this was helpful, and do let me know if i can help with anything else! ⭐