Refer - Visual Reference Collection Tool

中文版本 | English

English

A modern web-based visual reference collection tool for designers, artists, and creative professionals. Organize, manage, and reference images in an intuitive canvas-based interface.

✨ Features

Core Functionality

• 🖼️ Multi-format Image Support - Drag & drop images from your computer, web pages, or paste from clipboard
• 🎨 Canvas-based Interface - Infinite canvas with smooth zoom, pan, and navigation
• 📁 File Management - Save, load, import, and export your reference collections
• ⏮️ Undo/Redo - Full history support for all operations
• 🔍 Smart View Controls - Auto-fit images, zoom controls, and element navigation

Image Operations

• 📋 Clipboard Integration - Paste images directly from system clipboard
• 🖱️ Drag & Drop Support - Drop files from file explorer or drag images from web pages
• 📐 Scaling & Positioning - Resize, move, and arrange images freely on canvas
• 🎯 Element Selection - Click to select, automatic z-order management
• 👆 Touch-friendly - Responsive design works on tablets and touch devices

Advanced Features

• 💾 Auto-save - Automatic saving to local storage
• 🗂️ Recent Files - Quick access to recently used collections
• 🎛️ Property Panel - Fine-tune image properties and positioning
• 🔄 Canvas Adaptation - Auto-resize canvas to fit content
• ⚡ Performance Optimized - Smooth performance even with many images

🚀 Live Demo

Visit the live application: zhengsk.github.io/refer

📱 Usage

Adding Images

1. From File System: Drag files from your computer onto the canvas
2. From Web: Drag images directly from web pages
3. From Clipboard: Copy an image (Cmd/Ctrl+C) and paste (Cmd/Ctrl+V) onto the canvas
4. Duplicate: Copy existing canvas elements with Cmd/Ctrl+C, Cmd/Ctrl+V

Navigation & View

• Pan Canvas: Space + Mouse drag or Middle mouse button drag
• Zoom: Mouse wheel or keyboard shortcuts
• Fit to View: Press 1 to fit all content, 0 to reset zoom
• Navigate Elements: Use arrow keys to cycle through images with auto-fit

File Operations

• Save: Cmd/Ctrl+Shift+S to save your collection
• Open: Cmd/Ctrl+O to load a saved collection
• Export Image: Cmd/Ctrl+Shift+C to copy current view to clipboard

⌨️ Keyboard Shortcuts

View Controls

Shortcut	Action
F	Fit selected element to canvas
G	Cycle to next element with auto-fit
1	Fit all content to canvas
0	Reset canvas zoom
↑↓←→	Navigate between elements

File Operations

Shortcut	Action
Cmd+Shift+S	Save/Export collection
Cmd+O	Open/Import collection
Cmd+Shift+C	Copy current image to clipboard

Element Operations

Shortcut	Action
Delete / Backspace	Delete selected elements
Cmd+A	Select all elements
Cmd+Z	Undo
Cmd+Shift+Z	Redo
- / =	Scale elements or canvas

🛠️ Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

# Clone the repository
git clone <repository-url>
cd refer

# Install dependencies
npm install

# Start development server
npm run dev

Build

# Build for production
npm run build

# Preview production build
npm run preview

🏗️ Tech Stack

• Frontend: React 18 + TypeScript
• Canvas: Fabric.js with custom extensions
• Build Tool: Vite
• Database: Dexie (IndexedDB)
• Styling: Less
• File APIs: browser-fs-access for modern file operations

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

---

中文版本

一个现代化的网页版视觉参考素材收集工具，专为设计师、艺术家和创意专业人士打造。通过直观的画布界面组织、管理和参考图片。

✨ 功能特色

核心功能

• 🖼️ 多格式图片支持 - 从电脑、网页拖拽图片或从剪贴板粘贴
• 🎨 画布式界面 - 无限画布，支持流畅缩放、平移和导航
• 📁 文件管理 - 保存、加载、导入和导出参考素材集合
• ⏮️ 撤销重做 - 完整的操作历史记录支持
• 🔍 智能视图控制 - 自动适配图片、缩放控制和元素导航

图片操作

• 📋 剪贴板集成 - 直接从系统剪贴板粘贴图片
• 🖱️ 拖拽支持 - 从文件管理器拖拽文件或从网页拖拽图片
• 📐 缩放与定位 - 在画布上自由调整图片大小、移动和排列
• 🎯 元素选择 - 点击选择，自动层级管理
• 👆 触控友好 - 响应式设计，支持平板和触控设备

高级功能

• 💾 自动保存 - 自动保存到本地存储
• 🗂️ 最近文件 - 快速访问最近使用的素材集合
• 🎛️ 属性面板 - 精细调整图片属性和位置
• 🔄 画布自适应 - 自动调整画布大小以适应内容
• ⚡ 性能优化 - 即使处理大量图片也能保持流畅性能

🚀 在线体验

访问在线应用：zhengsk.github.io/refer

📱 使用方法

添加图片

1. 从文件系统：将文件从电脑拖拽到画布上
2. 从网页：直接从网页拖拽图片
3. 从剪贴板：复制图片（Cmd/Ctrl+C）然后粘贴（Cmd/Ctrl+V）到画布
4. 复制元素：用 Cmd/Ctrl+C、Cmd/Ctrl+V 复制现有画布元素

导航与视图

• 平移画布：空格键+鼠标拖拽 或 鼠标中键拖拽
• 缩放：鼠标滚轮 或 键盘快捷键
• 适配视图：按 1 适配所有内容，0 重置缩放
• 元素导航：使用方向键循环浏览图片并自动适配

文件操作

• 保存：Cmd/Ctrl+Shift+S 保存素材集合
• 打开：Cmd/Ctrl+O 加载已保存的集合
• 导出图片：Cmd/Ctrl+Shift+C 复制当前视图到剪贴板

⌨️ 快捷键

视图控制

快捷键	功能
F	选中元素适配画布
G	切换到下一个元素并自动适配
1	所有内容适配画布
0	重置画布缩放
↑↓←→	在元素间导航

文件操作

快捷键	功能
Cmd+Shift+S	保存/导出集合
Cmd+O	打开/导入集合
Cmd+Shift+C	复制当前图片到剪贴板

元素操作

快捷键	功能
Delete / Backspace	删除选中元素
Cmd+A	全选元素
Cmd+Z	撤销
Cmd+Shift+Z	重做
- / =	缩放元素或画布

🛠️ 开发

环境要求

• Node.js 18+
• npm 或 yarn

设置

# 克隆仓库
git clone <repository-url>
cd refer

# 安装依赖
npm install

# 启动开发服务器
npm run dev

构建

# 生产环境构建
npm run build

# 预览生产构建
npm run preview

🏗️ 技术栈

• 前端：React 18 + TypeScript
• 画布：Fabric.js 及自定义扩展
• 构建工具：Vite
• 数据库：Dexie (IndexedDB)
• 样式：Less
• 文件 API：browser-fs-access 提供现代文件操作

🤝 贡献

欢迎贡献代码！请随时提交 Pull Request。

📄 许可证

本项目是开源项目，基于 MIT 许可证 发布。