es6-flowy v2.1.0

ES6-Flowy

A JavaScript library to create responsive flowcharts with ease.

Table of contents

• Features
• Installation
• Running ES6-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, ES6-Flowy supports the following:

• Responsive drag and drop
• Automatic snapping
• Block rearrangement
• Delete blocks
• Automatic block centering
• Conditional snapping
• Import saved files
• Mobile support
• Vanilla JavaScript (no dependencies)
• npm install
• Conditional block removal

Installation

Adding ES6-Flowy to your WebApp is incredibly simple: 1. Link build/flowy.min.js to your project or run npm install es6-flowy --save 2. Create a canvas element that will contain the flowchart (for example, <div id="canvas"></div>) 3. Create the draggable blocks with the .create-flowy class (for example, <div class="create-flowy">Grab me</div>)

Running ES6-Flowy

Initialization

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

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

const spacing_x = 40;
const spacing_y = 100;

// Initialize ES6-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

In order to use callbacks, you need to add the functions when initializing ES6-Flowy, as explained before.

On grab

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

Gets triggered when a user grabs a block with the class create-flowy

On release

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

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) {
  // When a block can attach to a parent
  return true;
}

Gets triggered when a block can attach to another parent block. You can either prevent the attachment, or allow it by using return true;

On rearrange

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

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;

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:

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

Here's what each property means:

Import the flowchart data

flowy.import(output)

Allows you to import entire flowcharts initially exported using the previous method, flowy.output()

Delete all blocks

To remove all blocks at once use:

flowy.deleteBlocks()