mehanix/arcada

📐 react & pixi.js interior design software / floor plan creator

Introduction

Even had to redesign a room, a floor, or your entire house, and you spent hours drawing floor plans by hand, on graph paper, trying to make sure your sofa will fit next to the dresser? I certainly have, and it's a frustrating experience. I think we can do better than that.

As the vast majority of floor planner apps are available as part of a paid service, or too complicated to use for my needs, I decided to write my own. Enter Arcada, an open-source floor planner app.

Features

👷‍♀️ Add walls

⚒️ Edit walls

🛋️ Add/edit furniture

🚪 Add doors/windows

📏 Measure tool

🌟 Accurate to scale

🌟 Multiple floor support

🌟 Print your designs

🌟 Save/load support

🌟 Component library with plenty of options

🌟 Cross-platform

Tech stack and docs

Client built using React, Pixi.js, Zustand, with Mantine as the component library for the UI. The floor plan engine is custom built.

Server-side powered by Express.js, using MongoDB with Mongoose as ODM.

Quick setup

Clone this repo and the arcada-backend repo. Run the following:

npm i 
npm run start

Launch the back-end using node app.js.

Demo

If you want to run the app for yourself the easiest way to to is to use the following docker-compose setup. Have fun!

arcada's Issues

Scrolling over the grid is hard

Scrolling/moving over the grid is hard. Sometimes I can using two fingers on the touchpad sometimes not.

Keep notification pop-ups with tool instructions visible at all times

When I pressed on the "draw walls" button, a notification popped up explaining how to use this tool. However, after clicking around for a bit, the notification disappeared and I forgot what I had to do to exit the tool 😅

I think it would be more helpful to keep this notification (or some similar info display) visible at all times while using the tool, so the user doesn't have to remember what was initially written on the popup.

Right clicking the page and opening the browser's context menu breaks the app

I've accidentally right-clicked the app's UI and opened a context menu:

And that seems to have broken the app, since I cannot move the screen or zoom in/out anymore in View mode, nor does Edit mode do anything 😅

Relationship between WallNodes and WallnodeLinks

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!

Project license?

Hi there 👋 could you clarify the license terms under which this project is published? I couldn't find anything in the usual locations (package.json or LICENSE.md). Thanks in advance!

Missing constant variable import

Getting an error when trying to run this project.

In the Handle.ts file showing Cannot find name 'WALL_THICKNESS'

Already I fixed it.

Cert date error

When trying to add doors or windows:

Error when trying to "Load from local save" with no existent data

I've pressed on the "Load from local save" button but it gave me an error. I'm guessing it was because I didn't have any local data to load: