Slab Cut Editor

A modern web application for planning and visualizing cuts on slab materials. Upload your slab images, set real-world dimensions, and create cut regions with precise measurements.

Features

• Multi-Slab Support: Work with multiple slabs simultaneously
• Visual Cut Planning: Interactive canvas for drawing and positioning cut regions
• Nested Cuts: Create inner cuts within cut regions for complex layouts
• Real-World Dimensions: Set slab dimensions in feet and see accurate measurements
• Cut Overview Table: Hierarchical tree view of all cuts with position, size, and area calculations
• Zoom Controls: Zoom in/out for detailed work
• Customizable Display: Toggle dimension labels, names, and position indicators
• Color Coding: Customize colors for cut regions and inner cuts

Tech Stack

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Konva - 2D canvas library for interactive graphics
• Tailwind CSS - Styling
• Radix UI - Accessible component primitives
• Lucide React - Icons

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository:

git clone <repository-url>
cd slab_cut_editor

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 in your browser

Usage

1. Add a Slab: Click "Add Another Slab" to create a new slab workspace
2. Upload Image: Click the upload button to add a slab image
3. Set Dimensions: Enter the real-world width and height in feet
4. Create Cut Regions: Click and drag on the canvas to create cut regions
5. Add Inner Cuts: Right-click on a cut region to add inner cuts
6. View Overview: Check the Cuts Overview table for a complete list of all cuts with measurements

Project Structure

slab_cut_editor/
├── app/                    # Next.js app directory
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Main page component
│   └── globals.css        # Global styles
├── components/            # React components
│   ├── slab-cut-canvas.tsx    # Main canvas component
│   ├── cuts-tree-table.tsx    # Cuts overview table
│   └── ui/                # UI component library
├── hooks/                 # Custom React hooks
├── lib/                   # Utility functions
└── public/                # Static assets

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

License

This project is private and proprietary.

Author

Davi Borges