SimplePlan

Web-basiertes Aufmaßzeichnungs-Tool für architektonische und technische Zeichnungen.

Übersicht

SimplePlan ist eine React-basierte Canvas-Anwendung mit Grid-basiertem Multi-Panel-Layout für technische Zeichnungen. Der Fokus liegt auf architektonischer Sauberkeit und Skalierbarkeit mit lokaler Speicherung (IndexedDB) und Vorbereitung für zukünftige Datenbank-Integration.

Features

• ✅ Clean Architecture: Domain-driven Design mit klarer Schichttrennung
• ✅ Objekttypen: Wände, Pfosten/Säulen, Sparren mit editierbaren Eigenschaften
• 🚧 Multi-View System: Grid-basiertes Layout wie A4-Blätter nebeneinander
• 🚧 Snapping & Grid: 1 Unit = 10 cm (konfigurierbar) mit Gitter- und Objektkanten-Snapping
• 🚧 Canvas Engine: HTML5 Canvas mit Pan/Zoom-Funktionalität
• 🚧 Export: PNG-Export mit SimplePlan Branding
• 🚧 Speicherung: IndexedDB für lokale Persistierung

Projektstruktur

src/
  domain/                 → Business-Entities und Interfaces
    entities/             → Wall, Post, Beam, View, Drawing
    interfaces/           → IRepository, IRenderer, ISnapEngine
    value-objects/        → Point, Dimension, Angle
    
  application/            → Use Cases und Services (TODO)
    use-cases/            → CreateWall, EditObject, ExportPlan, etc.
    services/             → DrawingService, ViewManager, SnapEngine
    
  infrastructure/         → Externe Systeme & Repositories (TODO)
    repositories/         → IndexedDbDrawingRepository
    canvas/               → CanvasRenderer, CanvasEngine
    export/               → PngExporter
    
  ui/                     → React Components (TODO)
    components/           → Toolbar, Sidebar, DrawingCanvas
    hooks/                → useDrawing, useSelection, useCanvas
    pages/                → Main Page
    
  shared/                 → Shared Utilities
    constants/            → DEFAULT_SCALE, GRID_SIZE, etc.
    utils/                → Math helpers, Validation

Tech Stack

• Frontend: React 19 + TypeScript
• Build Tool: Vite
• Canvas: HTML5 Canvas API
• Storage: IndexedDB (geplant)
• Styling: TBD (CSS-in-JS oder Tailwind)
• Linting: ESLint + TypeScript ESLint

Getting Started

Prerequisites

• Node.js 18+
• npm oder yarn

Installation

npm install

Development

npm run dev

Build

npm run build

Linting

npm run lint

Development Status

✅ Phase 1: Projektstruktur - Abgeschlossen

• React + TypeScript + Vite Setup
• Clean Architecture Verzeichnisstruktur
• ESLint & TypeScript Konfiguration

✅ Phase 2: Domain Layer - Abgeschlossen

• Value Objects (Point, Dimension, Angle)
• Basis-Interfaces (IDrawableObject, IRenderer, ISnapEngine, etc.)
• Entities (Wall, Post, Beam, Drawing)
• Shared utilities und constants

✅ Phase 3: Canvas Engine - Abgeschlossen

• Canvas Renderer mit Pan/Zoom
• Grid System
• Snapping Engine (Grid + Object Snapping)
• Maus-Interaktion (Pan mit mittlerer Maustaste, Zoom mit Mausrad)

✅ Application Layer - Abgeschlossen

• DrawingService für Business-Logik
• Use Cases (CreateWall, CreatePost, CreateBeam, DeleteObject)
• PNG Export Service

✅ UI Layer - Basis - Abgeschlossen

• DrawingCanvas Component
• useDrawing Hook
• Grundlegende Interaktion

🚧 Phase 4: Zeichenlogik - In Planung

• Tools zum Zeichnen von Wänden, Pfosten, Sparren
• Properties Panel
• Toolbar

Für weitere Details siehe PLAN.md.

License

Proprietary - SimplePlan © 2026

// eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ])