This project is a Nuxt.js application with a canvas feature where users can drag and drop pre-defined components onto a canvas, resize them, and connect them with curved lines. The state management is handled using Pinia.
- Drag and drop components such as circle, squre, star, note, triangle into a canvas.
- Enable to drag or resize the components.
- Double click the components to connect them with curved lines.
- Save and load canvas state using localStorage.
- Clear the canvas.
- Clone the repository:
git clone https://github.com/wannamakeudance/nust-canvas.git- Navigate to the project directory:
cd nuxt-canvas/-
Make sure node version >= 18
-
Install dependencies:
yarn install- Start the development server:
yarn dev- Open your browser and navigate to
http://localhost:3000.
nuxt-canvas-project
├── components
│ ├── Toolbar.vue
│ ├── Canvas.vue
│ ├── Sidebar.vue
│ └── Node.vue
├── stores
│ └── canvas.js
│── plugins
├── public
├── nuxt.config.js
└── package.jsonSidebar.vue contains a list of draggable items that can be added to the canvas.
Canvas.vue handles the main canvas area where users can drag and drop components, resize them, and connect them with lines.
Node.vue represents individual nodes that can be dragged and resized.
Toolbar.vue provides a toolbar with buttons to save, load, and clear the canvas.
The project uses Pinia for state management. The store is defined in stores/canvas.js and handles the state for nodes and connections, including actions for saving, loading, and clearing the canvas.
This project is licensed under the MIT License.