React Window Frame Designer

A React component library for designing window frames with recursive divisions. This library provides a powerful and intuitive interface for creating complex window frame designs with support for horizontal and vertical divisions, different frame types, and precise measurements.

Features

• Interactive canvas-based window frame designer
• Support for recursive horizontal and vertical divisions
• Multiple frame types (empty, single sash, double sash)
• Real-time measurements in pixels and millimeters
• Undo/redo functionality
• Customizable frame colors and thickness
• Built with React, Konva, and TypeScript

Installation

npm install @anouar_sbia/window-frame-designer

Usage

import { WindowDesigner } from "@anouar_sbia/window-frame-designer";
import type { WindowDesign } from "@anouar_sbia/window-frame-designer";

function App() {
  const handleDesignChange = (design: WindowDesign) => {
    console.log("Design updated:", design);
  };

  return (
    <WindowDesigner
      initialWidth={700}
      initialHeight={500}
      initialColor="#4a5568"
      initialThickness={10}
      onChange={handleDesignChange}
    />
  );
}

Props

| Prop | Type | Default | Description | | ---------------- | ------------------------------ | --------- | ---------------------------------- | | initialWidth | number | 700 | Initial width of the window frame | | initialHeight | number | 500 | Initial height of the window frame | | initialColor | string | '#4a5568' | Initial color of the frame | | initialThickness | number | 10 | Initial thickness of the frame | | className | string | '' | Additional CSS classes | | onChange | (design: WindowDesign) => void | undefined | Callback when design changes |

Types

interface WindowDesign {
  frame: Frame;
}

interface Frame {
  id: string;
  position: Point;
  size: Size;
  color: string;
  thickness: number;
  children: Frame[];
  selected: boolean;
  frameType: FrameType;
}

type FrameType = "empty" | "sash" | "double-sash";

interface Point {
  x: number;
  y: number;
}

interface Size {
  width: number;
  height: number;
}

interface DivisionConfig {
  count: number;
  gap: number;
}

License

MIT