MCPcopy Index your code
hub / github.com/Shitanshukumar607/Drawspace

github.com/Shitanshukumar607/Drawspace @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
82 symbols 152 edges 22 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Drawspace

A modern, interactive vector drawing application built with Next.js and Konva.

Features

  • Vector Tools: Create rectangles, ellipses, lines, and arrows with precision.
  • Freehand Drawing: Sketch freely on the canvas.
  • Shape Manipulation: Select, move, and transform existing shapes.
  • Customization: Adjustable tool settings via a dedicated sidebar.
  • Responsive Canvas: Automatically adapts to window size.

Tech Stack

  • Framework: Next.js 15 (App Router)
  • Library: React 19
  • Language: TypeScript
  • Canvas Engine: Konva / React-Konva
  • Styling: Tailwind CSS
  • State Management: Zustand
  • Icons: Lucide React

Getting Started

  1. Clone the repository.
  2. Install dependencies: bash npm install
  3. Start the development server: bash npm run dev
  4. Open http://localhost:3000 in your browser.

Extension points exported contracts — how you extend this code

FreeDrawingLine (Interface)
(no doc)
types/types.ts
ShapeRefRegistry (Interface)
(no doc)
components/CanvasShapeRenderers.tsx
PenProperties (Interface)
(no doc)
context/toolPropertiesStore.ts
CanvasState (Interface)
(no doc)
context/historyStore.ts
StateStore (Interface)
(no doc)
context/stateStore.ts
LineShape (Interface)
(no doc)
types/types.ts
RectangleShapesProps (Interface)
(no doc)
components/CanvasShapeRenderers.tsx
EraserProperties (Interface)
(no doc)
context/toolPropertiesStore.ts

Core symbols most depended-on inside this repo

getPointerPositionRelativeToStage
called by 10
hooks/getPointerPosition.ts
getDefaultForTool
called by 7
context/toolPropertiesStore.ts
createShapeId
called by 5
hooks/createShapeId.ts
buildInitialProperties
called by 2
context/toolPropertiesStore.ts
mergeWithDefaults
called by 2
context/toolPropertiesStore.ts
handleResize
called by 1
components/CanvasComponent.tsx
getCursorForTool
called by 1
components/CanvasComponent.tsx
handleStageDragMove
called by 1
components/CanvasComponent.tsx

Shape

Function 62
Interface 20

Languages

TypeScript100%

Modules by API surface

components/CanvasComponent.tsx18 symbols
context/toolPropertiesStore.ts10 symbols
components/CanvasShapeRenderers.tsx10 symbols
types/types.ts5 symbols
hooks/DrawRectangleTool.ts5 symbols
hooks/DrawLineTool.ts5 symbols
hooks/DrawEllipseTool.ts5 symbols
hooks/DrawArrowTool.ts5 symbols
hooks/FreeDrawingTool.ts4 symbols
context/historyStore.ts3 symbols
components/ToolSettingsSidebar.tsx3 symbols
components/FloatingToolbar.tsx2 symbols

For agents

$ claude mcp add Drawspace \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact