Flowy: Thư viện Javascript tối giản để tạo sơ đồ luồng

Flowy

Một thư viện javascript để tạo sơ đồ luồng dễ dàng và đẹp ✨

Flowy khiến việc tạo WebApps với chức năng sơ đồ luồng trở thành một nhiệm vụ đơn giản vô cùng. Xây dựng phần mềm tự động hóa, công cụ mind mapping hoặc các nền tảng lập trình đơn giản trong vài phút bằng cách tích hợp thư viện vào dự án của bạn.

Bạn có thể ủng hộ dự án này (và nhiều dự án khác) qua GitHub Sponsors! ❤️

Sản xuất bởi Alyssa X

Tính năng

Hiện tại, Flowy hỗ trợ các tính năng sau:

• Kéo và thả đáp ứng
• Tự động căn chỉnh
• Tự động cuộn
• Sắp xếp lại khối
• Xóa khối
• Tự động căn giữa khối
• Kéo và thả có điều kiện
• Xóa khối có điều kiện
• Nhập tệp đã lưu
• Hỗ trợ di động
• Javascript nguyên thuần (không phụ thuộc)
• npm install

Bạn có thể đề xuất các tính năng mới here

Cài đặt

Thêm Flowy vào WebApp của bạn cực kỳ đơn giản:

. Liên kết flowy.min.js và flowy.min.css vào dự án của bạn. Qua jsDelivr:
. Tạo một phần tử canvas sẽ chứa sơ đồ luồng (ví dụ, <div id="canvas"></div>)
. Tạo các khối có thể kéo với lớp .create-flowy (ví dụ, <div class="create-flowy">Kéo tôi</div>)

Chạy Flowy

Khởi tạo

flowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);

Để xác định các khối có thể kéo, bạn cần thêm lớp .create-flowy

Ví dụ

HTML

<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>

Javascript

var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
    // When the user grabs a block
}
function onRelease(){
    // When the user releases a block
}
function onSnap(block, first, parent){
    // When a block snaps with another one
}
function onRearrange(block, parent){
    // When a block is rearranged
}

Callbacks

Để sử dụng các hàm gọi lại (callbacks), bạn cần thêm các hàm khi khởi tạo Flowy, như đã giải thích trước đó.

Khi nắm giữ

function onGrab(block){
    // When the user grabs a block
}

Được kích hoạt khi người dùng nắm một khối có lớp create-flowy

Khi thả ra

function onRelease(){
    // When the user lets go of a block
}

Được kích hoạt khi người dùng thả một khối ra, bất kể khối đó có kết nối hoặc thậm chí được thả ra trên canvas.

Khi snap

function onSnap(block, first, parent){
    // When a block can attach to a parent
    return true;
}

Được kích hoạt khi một khối có thể kết nối với khối cha khác. Bạn có thể ngăn chặn việc kết nối hoặc cho phép nó bằng cách sử dụng return true;

Khi sắp xếp lại

function onRearrange(block, parent){
    // When a block is rearranged
    return true;
}

Được kích hoạt khi các khối được sắp xếp lại và được thả bất kỳ nơi nào trên canvas, mà không có khối cha để kết nối. Bạn có thể cho phép xóa các khối, hoặc ngăn chặn và có thể để chúng kết nối lại với khối cha trước bằng cách sử dụng return true;

Phương pháp

Lấy dữ liệu sơ đồ luồng

// As an object
flowy.output();
// As a JSON string
JSON.stringify(flowy.output());

Đối tượng JSON được xuất ra có dạng như sau:

{
    "html": "",
    "blockarr": [],
    "blocks": [
        {
            "id": 1,
            "parent": 0,
            "data": [
                {
                "name": "blockid",
                "value": "1"
                }
            ],
            "attr": [
                {
                "id": "block-id",
                "class": "block-class"
                }
            ]
        }
    ]
}

Dưới đây là ý nghĩa của từng thuộc tính:

Nhập dữ liệu sơ đồ luồng

flowy.import(output)

Cho phép bạn nhập toàn bộ sơ đồ luồng ban đầu được xuất ra bằng phương pháp trước đó, flowy.output()

Cảnh báo

Phương pháp này chấp nhận HTML nguyên thô và không làm sạch nó, do đó phương pháp này có thể bị tổn thương đối với XSS. Chỉ sử dụng an toàn cho phương pháp này là khi đầu vào tuyệt đối đáng tin cậy, nếu đầu vào không đáng tin cậy thì việc sử dụng phương pháp này có thể tạo ra một lỗ hổng trong hệ thống của bạn.

Xóa tất cả các khối

Để xóa tất cả các khối cùng một lúc, sử dụng:

flowy.deleteBlocks()

Cảm ơn bạn!
Hiện tại chưa có phương thức để loại bỏ từng khối riêng lẻ. Cách duy nhất để thực hiện điều này là bằng cách tách nhánh thủ công. # Đừng ngần ngại liên hệ với tôi qua email tại hi@alyssax.com hoặc on Twitter nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào! Hy vọng bạn sẽ thấy điều này hữu ích 💜

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> 
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>

Dribbble | Twitter | Live demo

Thông tin tải về:

Tác giả: Alyssaxuu
Mã nguồn: https://github.com/alyssaxuu/flowy
Giấy phép: MIT license

Cảm ơn bạn!