X-Flowchart-Vue
Một trình chỉnh sửa đồ thị trực quan dựa trên G6 và Vue.
Xem trước
Ví dụ
# git clone https://github.com/OXOYO/X-Flowchart-Vue.git
# install dependencies
yarn install
### run dev
yarn run serve
Chức năng
Chức năng | Kích hoạt mặc định | Phím tắt | Thanh công cụ | Menu chuột phải | Ghi chú |
---|---|---|---|---|---|
logo | ✔ | ✔ | ✖ | Logo | |
undo | ✔ | ctrl + z | ✔ | ✔ | Hoàn tác |
clearLog | ✔ | ctrl + shift + l | ✔ | ✔ | Xóa lịch sử thao tác |
history | ✔ | ctrl + shift + h | ✔ | ✔ | Lịch sử thao tác |
redo | ✔ | ctrl + shift + z | ✔ | ✔ | Làm lại |
copy | ✔ | ctrl + c | ✔ | ✔ | Sao chép |
paste | ✔ | ctrl + v | ✔ | ✔ | Dán |
delete | ✔ | Delete | ✖ | ✔ | Xóa |
clear | ✔ | ctrl + shift + c | ✔ | ✔ | Xóa toàn bộ |
zoom | ✔ | ✔ | ✔ | Thu phóng | |
zoomIn | ✔ | ctrl + + | ✔ | ✔ | Phóng to |
zoomOut | ✔ | ctrl + – | ✔ | ✔ | Thu nhỏ |
fit | ✔ | ctrl + 0 | ✔ | ✔ | Hiển thị vừa màn hình |
actualSize | ✔ | ctrl + 1 | ✔ | ✔ | Kích thước thực tế |
canvasBackground | ✔ | ✔ | ✔ | Nền hộp | |
fill | ✔ | ✔ | ✔ | Màu nền | |
lineColor | ✔ | ✔ | ✔ | Màu đường | |
lineWidth | ✔ | ✔ | ✔ | Độ dày đường | |
lineDash | ✔ | ✔ | ✔ | Kiểu đường | |
lineType | ✔ | ✔ | ✔ | Loại đường | |
startArrow | ✔ | ✔ | ✔ | Điểm bắt đầu | |
endArrow | ✔ | ✔ | ✔ | Điểm kết thúc | |
toFront | ✔ | ✔ | ✔ | Đưa lên trên cùng | |
toBack | ✔ | ✔ | ✔ | Đưa xuống dưới cùng | |
selectAll | ✔ | ctrl + a | ✔ | ✔ | Chọn tất cả |
edit | ✔ | ✔ | ✔ | Chế độ chỉnh sửa | |
preview | ✔ | ✔ | ✔ | Chế độ xem trước | |
upload | ✔ | ✔ | ✔ | Tải lên | |
download | ✔ | ✔ | ✔ | Tải về | |
fullscreen | ✔ | ✔ | ✔ | Toàn màn hình | |
language | ✔ | ✔ | ✔ | Ngôn ngữ | |
github | ✖ | ✔ | ✔ | Github | |
feedback | ✖ | ✔ | ✔ | Phản hồi | |
help | ✔ | ✔ | ✔ | Trợ giúp | |
up | ✔ | up | ✖ | ✖ | Lên |
down | ✔ | down | ✖ | ✖ | Xuống |
left | ✔ | left | ✖ | ✖ | Trái |
right | ✔ | right | ✖ | ✖ | Phải |
Hướng dẫn sử dụng
Bắt đầu
Cài đặt
npm i @oxoyo/xfc --save
Thêm vào
import xfc from '@oxoyo/xfc'
import '@oxoyo/xfc/dist/xfc.css'
// 初始化
const xfcEditor = xfc({
el: '#xfc'
})
Cấu hình
Khi khởi tạo thể hiện xfc
, bạn có thể cấu hình các tham số.
props
Tham số | Mô tả | Kiểu dữ liệu | Các giá trị có thể | Giá trị mặc định |
---|---|---|---|---|
tools | Cấu hình toàn bộ công cụ, ghi đè thông tin công cụ mặc định của hệ thống, xem thông tin toàn bộ công cụ | Object | – | – |
enableTools | 【与tools互斥,配置后以此为主】设置要启用的系统工具项 | Mảng | – | – |
disableTools | 【与tools、enableTools互斥,配置后以此为主】设置要禁用的系统工具项 | Mảng | – | – |
shortcutMap | 【与tools互斥,配置后以此为主】设置自带的工具项的快捷键 | Đối tượng | – | – |
materials | Danh sách vật liệu cấu hình toàn bộ, ghi đè lên vật liệu mặc định của hệ thống, tùy chỉnh mức độ cao, không nên cấu hình mục này trừ khi cần thiết | Mảng | – | – |
enableMaterials | 【与materials互斥,配置后以此为主】设置要启用的系统物料 | Đối tượng | – | – |
system | Cấu hình thông tin hệ thống | Đối tượng | – | – |
storage | Cấu hình thông tin lưu trữ cục bộ | Đối tượng | – | – |
i18n | Cấu hình đa ngôn ngữ | Đối tượng | – | – |
infoPanel | Cấu hình bảng thông tin | Đối tượng | – | – |
### read (data, isActualSize) |
Nhận dữ liệu và thực hiện trình bày.
Tham số
Tên | Loại | Bắt buộc | Mô tả |
---|---|---|---|
data | Đối tượng | true | Dữ liệu biểu đồ khởi tạo, là một đối tượng bao gồm nodes và edges |
Sử dụng
const data = {
nodes: [
{
id: 'node1',
label: 'node1',
},
{
id: 'node2',
label: 'node2',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
xfcEditor.read(data)
save()
Lấy dữ liệu biểu đồ.
Phương thức này không có tham số.
Giá trị trả về
- Loại giá trị trả về: Đối tượng;
-
Giá trị trả về bao gồm tất cả các node và edge, cấu trúc dữ liệu như sau:
{
nodes: [],
edges: []
}
Sử dụng
xfcEditor.save()
type| 'image/png'
/ 'image/jpeg'
/ 'image/webp'
/ 'image/bmp'
| false| Loại ảnh. Áp dụng khi renderer
của biểu đồ là 'canvas'
, sẽ xuất ra ảnh theo loại đã chọn. Khi renderer
là 'svg'
, sẽ xuất ra tệp SVG.
backgroundColor| String| false| Màu nền của ảnh, tùy chọn. Nếu không truyền giá trị, ảnh sẽ có nền trong suốt.
Giá trị trả về
- Loại giá trị trả về: Chuỗi;
- Giá trị trả về đại diện cho URL của ảnh đã tạo.
Sử dụng
const dataURL = xfcEditor.toDataURL()
Tham khảo
Cảm ơn
Đóng góp
Cảm ơn tất cả những người đã đóng góp cho dự án này!
Giấy phép
Bản quyền (c) 2019-hiện tại, OXOYO
Liên hệ
Nhấp vào liên kết để tham gia nhóm 【Web Full Stack QQ Group 333765077】:https://jq.qq.com/?_wv=1027&k=53iWbrr
Lịch sử Star
Chi tiết tải về:
Tác giả: OXOYO
Nguồn: https://github.com/OXOYO/X-Flowchart-Vue
Giấy phép: MIT license