1.0.1 • Published 6 years ago

@denysvuika/flowy v1.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

Flowy

Demo A javascript library to create pretty flowcharts with ease ✨

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.

Table of contents

Features

Currently, Flowy supports the following:

  • Responsive drag and drop
  • Automatic snapping
  • Block rearrangement
  • Delete blocks
  • Automatic block centering

You can try out the demo to see the library in action.

Installation

Adding Flowy to your WebApp is incredibly simple:

  1. Include jQuery to your project
  2. Link https://unpkg.com/@denysvuika/flowy to your project
<script src="https://unpkg.com/@denysvuika/flowy"></script>

Installing via NPM

With NPM:

npm install @denysvuika/flowy

With Yarn:

yarn add @denysvuika/flowy

Running Flowy

Initialization

flowy(canvas, ongrab, onrelease, onsnap, spacing_x, spacing_y);
ParameterTypeDescription
canvasjQuery objectThe element that will contain the blocks
ongrabfunction (optional)Function that gets triggered when a block is dragged
onreleasefunction (optional)Function that gets triggered when a block is released
onsnapfunction (optional)Function that gets triggered when a block snaps with another one
spacing_xinteger (optional)Horizontal spacing between blocks (default 20px)
spacing_Yinteger (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($('#canvas'), onGrab, onRelease, onSnap, spacing_x, spacing_y);

function onGrab() {
  // When the user grabs a block
}
function onRelease() {
  // When the user releases a block
}
function onSnap() {
  // When a block snaps with another one
}

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:

{
  "id": 1,
  "parent": 0,
  "data": [
    {
      "name": "blockid",
      "value": "1"
    }
  ]
}

Here's what each property means:

KeyValue typeDescription
idintegerUnique value that identifies a block
parentintegerThe id of the parent a block is attached to (-1 means the block has no parent)
dataarray of objectsAn array of all the inputs within the selected block
namestringThe name attribute of the input
valuestringThe value attribute of the input

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.

Developing

You can use the following scripts with npm run <script> or yarn <script> commands:

scriptdescription
buildbuild the library to the /dist output folder
startrun the demo app (requires build)
build-docsbuild the docs folder for the live demo
start-docsruns the live demo locally from the docs folder

License

MIT

Copyright for portions of project DenysVuika/flowy are held by Alyssa X, 2019 as part of project alyssaxuu/flowy.

All other copyright for project DenysVuika/flowy are held by Denys Vuika, 2019.