GoJS Floorplanner (in Svelte)

Furniture Palette
Selected Node Information
Overview
Picked: select

This GoJS Floorplanner sample demonstrates the GoJS diagramming library used in a simple Svelte app. The demo contains:

  • A custom Diagram class, called Floorplan, which attempts to determine rooms and compute their sizes based on the walls in the diagram.
  • A Palette in a component to drag and drop furniture items onto the main Diagram.
  • A Node Information box that updates based on the current selection
  • An Overview in a component to view a mini-map of the Floorplan Diagram. This is chiefly to demonstrate passing the Diagram to another component.
  • Several other customizations specific to floor planning:
    1. A custom tool to build new wall nodes and another one to reshape them.
    2. Drag computation functions for window and doors, to keep them inside walls.
    3. Selection adornments to visualize the size of windows, doors, and walls.

Because of this sample's complexity, it is meant as a demonstration of several GoJS features and a demonstration of GoJS alongside Svelte, rather than a starting point for your own project. We are happy to help you begin a proof-of-concept for your own project, regardless of your needs. Contact us for more information.

The GoJS-Floorplanner project source code can be found here.

gojs.net - see all GoJS samples