SVG Unit Display Tool - Part 1

In the world of real estate, architecture, and interior design, visualizing space is crucial. Interactive floor plans allow users to explore layouts, understand dimensions, and get a feel for the space before setting foot inside a building. In this article, I’ll walk you through how I built a simple yet effective interactive floor plan viewer using React.

1. The Concept

The goal was to create an application where users could click on different units within a floor plan and view detailed information about each selected unit in a sidebar. This feature is particularly useful for real estate listings, where prospective buyers or renters can get a better understanding of available spaces.

2. Breaking Down the Components

App Component

The "App.tsx" component is the heart of the application. It manages the state of the selected unit and orchestrates how data flows between the "FloorPlan.tsx" and "Sidebar.tsx" components.

import { useState } from 'react';
import FloorPlan from './components/FloorPlan';
import Sidebar from './components/Sidebar';
import './App.css';

interface UnitData {
  x: number;
  y: number;
  width: number;
  height: number;
  label: string;
  id: number;
  size: string;
}

const unitsData: UnitData[] = [
  { id: 1, label: 'Unit 1', x: 10, y: 20, width: 50, height: 50, size: '50m2' },
  { id: 2, label: 'Unit 2', x: 100, y: 100, width: 80, height: 80, size: '80m2' },
  { id: 3, label: 'Unit 3', x: 230, y: 180, width: 100, height: 100, size: '100m2' },
];

function App() {
  const [selectedUnit, setSelectedUnit] = useState<UnitData | null>(null);

  const handleUnitClick = (unit: UnitData) => {
    setSelectedUnit(prevUnit => prevUnit?.id === unit.id ? null : unit);
  };

  return (
    <div className="App">
      <Sidebar unit={selectedUnit} />
      <FloorPlan
        units={unitsData}
        onUnitClick={handleUnitClick}
        selectedUnitId={selectedUnit?.id ?? null}
      />
    </div>
  );
}

export default App;        

FloorPlan Component

The "FloorPlan.tsx" component renders the units on an SVG canvas. Each unit is represented as a rectangle that can be clicked to select or deselect it. The selected unit is highlighted in green.

import React from 'react';
import Unit from './Unit';

interface UnitData {
  x: number;
  y: number;
  width: number;
  height: number;
  label: string;
  id: number;
  size: string;
}

interface FloorPlanProps {
  units: UnitData[];
  onUnitClick: (unit: UnitData) => void;
  selectedUnitId: number | null;
}

const FloorPlan: React.FC<FloorPlanProps> = ({ units, onUnitClick, selectedUnitId }) => {
  return (
    <svg width="400" height="300" style={{ backgroundColor: '#bff2bf' }}>
      {units.map(unit => (
        <Unit
          key={unit.id}
          unit={unit}
          onClick={() => onUnitClick(unit)}
          selected={unit.id === selectedUnitId}
        />
      ))}
    </svg>
  );
};

export default FloorPlan;        

Unit Component

Each "Unit.tsx" component is a simple rectangle that changes color when selected. This visual feedback is crucial for user interaction.

import React from 'react';

interface UnitData {
  x: number;
  y: number;
  width: number;
  height: number;
  label: string;
}

interface UnitProps {
  unit: UnitData;
  onClick: () => void;
  selected: boolean;
}

const Unit: React.FC<UnitProps> = ({ unit, onClick, selected }) => {
  return (
    <rect
      x={unit.x}
      y={unit.y}
      width={unit.width}
      height={unit.height}
      fill={selected ? 'green' : 'lightgreen'}
      stroke="black"
      onClick={onClick}
      style={{ cursor: 'pointer' }}
    >
      <title>{unit.label}</title>
    </rect>
  );
};

export default Unit;        

Sidebar Component

The Sidebar.tsx" component displays detailed information about the selected unit. If no unit is selected, it prompts the user to select one.

import React from 'react';

interface UnitData {
  x: number;
  y: number;
  label: string;
  id: number;
  size: string;
}

interface SidebarProps {
  unit: UnitData | null;
}

const Sidebar: React.FC<SidebarProps> = ({ unit }) => {
  if (!unit) {
    return <div className="sidebar">No unit selected. <br /> Please select one</div>;
  }

  return (
    <div className="sidebar">
      <section className="sidebar-details">
        <h2>{unit.label}</h2>
        <p>ID: {unit.id}</p>
        <p>Size: {unit.size}</p>
        <p>Coordinates: ({unit.x}, {unit.y})</p>
      </section>
    </div>
  );
};

export default Sidebar;        

3. Why This Approach?

This component-based structure in React ensures that the application is modular and easy to maintain. Each part of the floor plan viewer has a clear responsibility, making it easy to extend or modify the application in the future.

4. Potential Use Cases

This application can be expanded into various domains:

• Real Estate: Provide an interactive experience for prospective buyers or renters.
• Event Planning: Help organizers plan layouts for conferences, weddings, etc.
• Architecture and Interior Design: Assist designers in showcasing different layout options to clients.

5. Future Enhancements

Some possible enhancements to consider:

• Zoom and Pan: Allow users to zoom in and out of the floor plan for better detail.
• Detailed Tooltips: Provide more interactive tooltips with images or additional data.
• Customization: Let users customize the floor plan by adding or removing units.

Conclusion

Building an interactive floor plan viewer in React is a rewarding project that combines visual and functional aspects of web development. With its modular design, this application can be easily expanded and adapted to various use cases, making it a versatile tool for industries where space visualization is key.