1. Project Overview

yft-design

Multi-page image design based on fabric.js, built with Vue3 + TypeScript + Fabric.js + Element-Plus. Supports the most commonly used element types, including text, images, shapes, lines, QR codes, and barcodes. Each element offers extensive editing capabilities. Features include thumbnail previews, templates, and export to JSON, SVG, and image files.

2. Open Source License

Licensed under MIT

3. Screenshots

PSD Parsing

Color Preview

4. Feature Overview

Function List

Core Features

• History (Undo and Redo)

• Keyboard shortcuts

• Right-click context menu

• Import PDF (Preserves the original formatting perfectly; image cropping is not supported during import)

• Import PSD (Preserves the original formatting perfectly; special effects are not supported)

• Import SVG (tspan fonts are not supported)

• Export Local Files (SVG, Images, PDF (TODO))

Page Editing

• Add and Delete Pages

• Reorder Pages

• Copy and Paste Pages (TODO)

• Background Settings (Solid Color, Gradient, Image)

• Set Canvas Dimensions

• Grid Lines (TODO)

• Rulers

• Canvas Zooming and Panning

• Page Templates

• Selection Panel (Hide Elements, Adjust Layer Order, Rename Elements) (TODO)

Element Editing

• Add and Delete Elements

• Copy and Paste Elements

• Drag and Move Elements

• Rotate Elements

• Resize Elements

• Multiple Element Selection (Box Selection and Click Selection)

• Group Multiple Elements

• Batch Editing of Multiple Elements (TODO)

• Lock Elements (TODO)

• Element Snapping and Alignment (During Moving and Resizing)

• Adjust Element Layer Order

• Align Elements to the Canvas

• Set Element Coordinates, Dimensions, and Rotation Angle

Text

• Text Editing (Color, Highlight, Font, Font Size, Bold, Italic, Underline, Strikethrough, Alignment, Bulleted Lists, Indentation, Clear Formatting)

• Line Height

• Letter Spacing

• Paragraph Spacing

• Fill Color

• Shadow

• Opacity

Image

• Filters

• Colorization (Mask)

• Flip

• Border

• Shadow

• Crop

Shape

• Fill Color

• Border

• Shadow

• Opacity

• Flip

• Edit Text

Line

• Color

• Width

• Styles

5. Tech Stack

Project Execution

node >= 16+
npm install
npm run dev
npm run build

Project Structure

├── app                           // Static Assets
│   ├── fabricCanvas              // FabricCanvas
│   ├── fabricControls            // Selectors
│   ├── fabricRuler               // Rulers
│   ├── fabricTool                // Dragging
│   ├── guideLines                // Guides
│   ├── hoverBorders              // Preselection
│   └── wheelScroll               // Zooming
├── assets                        // Static Assets
│   ├── fonts                     // Online Font Files
│   └── styles                    // Styles
├── components                    // General-purpose components unrelated to business logic
├── configs                       // Configuration files, such as colors and fonts.
├── hooks                         // Hooks methods shared by multiple components (modules)
├── extension                     // Custom fabirc objects
│   ├── controls                  // Image cropping controls
│   ├── mixins                    // Image cropping mixins
│   └── object                    // Custom element objects
├── mocks                         // Mock data
├── plugins                       // Custom Vue plugins
├── types                         // Type definition files
├── store                         // Pinia store, reference:https://pinia.vuejs.org/
├── utils                         // General-purpose utility methods
├── views                         // Business components directory.
│    ├── Canvas                   // Editor object
│    └── Editor                   // Editor modules
└── worker                        // web worker