EnarcUI ArtBoard 🎨

A powerful and versatile React drawing component with advanced shape manipulation capabilities

✨ Features

🎨 Rich Drawing Tools
- Freehand brush tool with adjustable size
- Shape tools: Circle, Rectangle, Arrow
- Selection tool for object manipulation
- Eraser tool
- Color picker with hex color support
🔄 Advanced Object Manipulation
- Select and move objects freely
- Resize objects using 8-point handles
- Rotate objects (coming soon)
- Delete selected objects
- Clear entire canvas
📐 Precise Controls
- Adjustable brush size (1-50px)
- Custom color selection
- Stroke width control
- Snap to grid (coming soon)
⏮️ History Management
- Unlimited undo/redo
- Full drawing history
- State persistence
💾 Export Options
- Export as PNG image
- Get base64 encoded data URL
- Save/load drawing state
🖼️ Background Support
- Load custom background images
- Auto-scaling and centering
- Maintain aspect ratio

🚀 Installation

npm install enarc-artboard
# or
yarn add enarc-artboard

📖 Basic Usage

import React, { useRef } from "react";
import ArtBoard, { ArtBoardRef } from "enarc-artboard";

const App = () => {
  const artBoardRef = useRef < ArtBoardRef > null;

  const handleExport = async () => {
    const imageData = await artBoardRef.current?.exportDrawing();
    console.log(imageData);
  };

  return (
    <div>
      <ArtBoard
        ref={artBoardRef}
        saveData="existing-drawing-data" // Optional
        imageSrc="background.jpg" // Optional
        width={400} //Optional
        height={600} //Optional
        controlsHeight={300} //Optional
      />
      <button onClick={handleExport}>Export Drawing</button>
    </div>
  );
};

🔧 Props

Prop	Type	Required	Default	Description
saveData	string	No	undefined	Serialized drawing data to initialize the canvas
imageSrc	string	No	undefined	Background image URL
width	number	No	800	Canvas width in pixels
height	number	No	600	Canvas height in pixels
controlsHeight	number	No	600	Controls height in pixels

📚 API Reference

Ref Methods

Method	Returns	Description
exportDrawing()	Promise	Returns drawing as base64 encoded PNG

🛠️ Development

Prerequisites:

Node.js >= 14
npm >= 7

git clone https://github.com/yourusername/enarc-artboard
cd enarc-artboard
npm install
npm run dev

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create your feature branch:

git checkout -b feature/YourFeature

Commit your changes:

git commit -m 'Add YourFeature'

Push to your branch:

git push origin feature/YourFeature

Submit a Pull Request

Development Guidelines

Write clean, documented TypeScript code
Follow the existing code style and ESLint rules
Add unit tests for new features
Update documentation as needed
Keep commits atomic and well-described
Ensure all tests pass before submitting PR

Setting Up Development Environment

# Install dependencies
npm install

# Run development server
npm run dev

# Run tests
npm test

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

🙏 Acknowledgments

Special thanks to:

React team for the incredible framework
All our contributors and community members
The open source community for inspiration and support