flowy
Notifications Star 7.9k Fork 544
Code Issues 26 Pull requests 6 Actions Projects 0 Security Insights
Code Issues Pull requests Actions Projects Security Insights
Open with travelhome.vn Desktop Download ZIP
Launching travelhome.vn Desktop
If nothing happens, download travelhome.vn Desktop and try again.
Đang xem: Flowy
Go back
Launching travelhome.vn Desktop
If nothing happens, download travelhome.vn Desktop and try again.
Go back
Launching Visual Studio
If nothing happens, download the travelhome.vn extension for Visual Studio and try again.
Go back
Flowy
A javascript library to create pretty flowcharts with ease ✨
Dribbble | Twitter | Live demo
Flowy makes creating WebApps with flowchart functionality an incredibly simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by implementing the library into your project.
Xem thêm: Những Biệt Thự Ở Ninh Bình, Lâu Đài Nghìn Tỷ Đồng Của Đại Gia Ninh Bình
Made by Alyssa X
Table of contents
Features Installation Running Flowy Initialization Example Callbacks On grab On release On snap On rearrange Methods Get the flowchart data Import the flowchart data Delete all blocks
Features
Currently, Flowy supports the following:
Responsive drag and drop Automatic snapping Automatic scrolling Block rearrangement Delete blocks Automatic block centering Conditional snapping Conditional block removal Import saved files Mobile support Vanilla javascript (no dependencies) npm install
You can suggest new features here
Installation
Adding Flowy to your WebApp is incredibly simple:
Link flowy.min.js and flowy.min.css to your project. Through jsDelivr:
< 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 >
Create a canvas element that will contain the flowchart (for example, <div id=”canvas”></div>) Create the draggable blocks with the .create-flowy class (for example, <div class=”create-flowy”>Grab me</div>)
Running Flowy
Initialization
flowy ( canvas , ongrab , onrelease , onsnap , onrearrange , spacing_x , spacing_y ) ;
Parameter Type Description canvas javascript DOM element The element that will contain the blocks ongrab function (optional) Function that gets triggered when a block is dragged onrelease function (optional) Function that gets triggered when a block is released onsnap function (optional) Function that gets triggered when a block snaps with another one onrearrange function (optional) Function that gets triggered when blocks are rearranged spacing_x integer (optional) Horizontal spacing between blocks (default 20px) spacing_y integer (optional) Vertical spacing between blocks (default 80px)
To define the blocks that can be dragged, you need to add the class .create-flowy
Example
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 ) function onRelease ( ) function onSnap ( block , first , parent ) function onRearrange ( block , parent )
Callbacks
In order to use callbacks, you need to add the functions when initializing Flowy, as explained before.
On grab
function onGrab ( block )
Gets triggered when a user grabs a block with the class create-flowy
Parameter Type Description block javascript DOM element The block that has been grabbed
On release
function onRelease ( )
Gets triggered when a user lets go of a block, regardless of whether it attaches or even gets released in the canvas.
On snap
function onSnap ( block , first , parent )
Gets triggered when a block can attach to another parent block. You can either prevent the attachment, or allow it by using return true;
Parameter Type Description block javascript DOM element The block that has been grabbed first boolean If true, the block that has been dragged is the first one in the canvas parent javascript DOM element The parent the block can attach to
On rearrange
function onRearrange ( block , parent )
Gets triggered when blocks are rearranged and are dropped anywhere in the canvas, without a parent to attach to. You can either allow the blocks to be deleted, or prevent it and thus have them re-attach to their previous parent using return true;
Parameter Type Description block javascript DOM element The block that has been grabbed parent javascript DOM element The parent the block can attach to
Methods
Get the flowchart data
// As an object flowy . output ( ) ; // As a JSON string JSON . stringify ( flowy . output ( ) ) ;
The JSON object that gets outputted looks like this:
>, ” attr” : < > } > }
Here”s what each property means:
Key Value type Description html string Contains the canvas data blockarr array Contains the block array generated by the library (for import purposes) blocks array Contains the readable block array id integer Unique value that identifies a block parent integer The id of the parent a block is attached to (-1 means the block has no parent) data array of objects An array of all the inputs within a certain block name string The name attribute of the input value string The value attribute of the input attr array of objects Contains all the data attributes of a certain block
Import the flowchart data
flowy . import ( output )
Allows you to import entire flowcharts initially exported using the previous method, flowy.output()
Parameter Type Description output javascript DOM element The data from flowy.output() Warning
This method accepts raw HTML and does not sanitize it, therefore this method is vulnerable to XSS. The only safe use for this method is when the input is absolutely trusted, if the input is not to be trusted the use this method can introduce a vulnerability in your system.
Xem thêm: sáng kiến kinh nghiệm trong quản lý dự án
Delete all blocks
To remove all blocks at once use:
flowy . deleteBlocks ( )
Currently there is no method to individually remove blocks. The only way to go about it is by splitting branches manually.
Feel free to reach out to me through email at hi
Bình luận