p-kuen / vue-flowy Goto Github PK

Growing FlowChart component for vuejs

TypeScript 7.22% Vue 92.78%

vue-flowy's Introduction

vue-flowy

⚠️ WARNING: this package is deprecated! Please use the Dagre D3 renderer directly, as this is/was just a wrapper (badly bundled). See the example folder for usage in Vue.

Smart flowchart creation based on Vue and Dagre.

Works with Vue 2.*

Installation

Install via NPM

$ npm install vue-flowy --save

Install via yarn

$ yarn add vue-flowy

Register as Component

import { VueFlowy } from "vue-flowy";

export default {
  name: "App",

  components: {
    VueFlowy,
  },
};

Register as plugin

import Vue from "vue";
import { VueFlowy } from "vue-flowy";

Vue.component(VueFlowy);

Usage

Quick example

See a demo on CodeSandbox

<template>
  <VueFlowy :chart="chart"></VueFlowy>
</template>

<script>
import { VueFlowy, FlowChart } from "vue-flowy";

export default {
  name: "App",

  components: {
    VueFlowy,
  },

  data: () => ({
    chart: new FlowChart(),
  }),
  mounted() {
    const idea = this.chart.addElement("idea");
    const A = this.chart.addElement("A", { label: "vscode" });
    const B = this.chart.addElement("B", { label: "github" });
    const C = this.chart.addElement("C", { label: "npm" });
    idea.leadsTo(A).leadsTo(B);
    A.leadsTo(C);

    A.on("click", function () {
      console.log("click!");
    });
  },
};
</script>

Props

Props	Description	Required	Type	Default
chart	The Chart data (type of FlowChart)	true	FlowChart	-

API

Every FlowChart starts by creating a new FlowChart instance with the FlowChart class:

FlowChart

data() { return { chart: new FlowChart() } }

The creation currently allows the following options: |option|Description|Type|Default| |------|-----------|----|-------| |direction|The direction in which the chart is built. Can be LR, TB, BT, RL|string|LR|

Now you can work with the new chart variable

<FlowChart>.addElement(id, [options])

Used to add nodes to the chart. Every node needs an id, so this field is required. returns class FlowElement

Available options are:

option	Description	Type	Default
label	A label which shows up on the node	string	id

FlowElement

A FlowElement is returned by <FlowChart>.addElement. It represents one node

<FlowElement>.leadsTo(<FlowElement>, [options])

Used to connect two elements with an edge.

Available options are:

option	Description	Type	Default
label	A label which shows up on the edge	string	''

<FlowElement>.on(event, callback)

Used to add events to FlowElements. Can be any event.

License

Vue-Flowy is open-sourced software licensed under the MIT license

Contributing

As my time is limited, I would be happy if someone contributes to this project. Simply clone the repo and start developing. At the end run yarn build to build the package to test it.

Then link the package using yarn link As vue is a peer dependency, I also had to link vue for development and testing:

cd node_modules/vue
yarn link
cd ../../

Now go into the example directory and use the links there

cd example
yarn link "vue-flowy"
yarn link "vue"

Now run the app to test it out

yarn serve

Support

Hello, I'm Patrick the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me with pull requests. Thanks 😃

vue-flowy's People

Contributors

Stargazers

Watchers

Forkers

carloslema adambissonnette pulzze jamescostian fazendadosoftware p101drs sachdevm tomv mymail4blogs nishantn1992 massimiliano76 chennemann zodiacwind nadilas chander-prakash jacksn2014 elsiosanchez alfonsorv simbaninja917

vue-flowy's Issues

Customising the FlowyElement

Hi,

Loving this library!

Just wonder if there is a way to have custom element using vue-flowy. If so, where about is it possible to inject the HTML of specific HTML element can be done.

Thanks for the help!

Mark

Arrow direction wrong way round

When trying to link an element back to a previous the arrows direction is the wrong way round.

In this example I've linked C -> B so the arrow should be point from C back to B.

https://codesandbox.io/s/vue-flowy-example-spkod?fontsize=14&hidenavigation=1&theme=dark

Way to Find out if Node Exists on Map Already & Obtain Existing Node

The Ask

Hi there! I was wondering if it would be possible to place a method in the FlowElement.ts to tell the user whether or not a node exists in the client or not, and another method to return a node if it exists (if not just throw an exception, probably). It could be as simple as

private isRegistered() {
    if ( flowElementsById[this.id]) {
      return true;
    }
    return false;
}
private getRegisteredNode(id: number) {
    if ( flowElementsById[id]) {
      return flowElementsById[id];
    }
    throw new Exception("You can't do that!");
}

Explanation

I really love this library. Mostly because it was written in TS, but also because it works really well and is extremely simple to use.

Currently I'm dynamically populating a flowchart() element in the mount() method of one of my components by traversing a dictionary of items linked together. I get this dictionary from an outside source and don't have a say in how the data gets delivered.

For example, my dictionary might look like this:
1 => [2, 3]
2 => [6, 7]
3 => [4]
4 => [5]

The resulting tree would look like this:

The fact is though that sometimes these lists can get a little messy, and lines might need to lead to a node that's already been created. In the image shown, for example, what if, instead of 4 mapping to [5], 4 mapped to [5, 7]? Then my recursive method to create nodes and place them on the tree will break, because the node for 7 will have already been created (based on how I am traversing--I think officially my traversal strategy is called a left traversal, basically just going to the leftmost leafnode and working my way from there).

Having a convenience method to let me know if a node has already been created would enable me to forgo the creation of a duplicate node, and the second proposed method would enable me to grab that node if necessary.

This might be unclear, so if you have any questions or need specific code snippets please let me know! Again, fabulous work on this tool.

---- UPDATE ---

I decided to do a workaround just in case. What I tried was maintaining my own collection (map) of nodes keyed off nodeID, and checking my internal map before adding nodes (so basically keeping my own partial copy of flowElementsById).
This....sort of worked. It worked really well for small cases (like my example, above):

But for bigger data sets....well, um...didn't.

This picture might make it hard to tell, but basically it looks like the SVG underlying element starts placing shapes outside of its viewport? I'm not 100% sure on this, and this issue is probably beyond the scope of what's fixable in a short amount of time.

Neverthelss--any idea?

Interactive nodes

Hi Patric

I was wondering what the simplest way is to make to the nodes interactive, for example, clicking on a node opens a dialogue?

Also maybe an option to make it top down instead of left to right

Is it a bug or just a consequence of inappropriate library usage? If so, what should I do, if I need to have FlowChart with element_ids that were used before:

Steps To Reproduce:

Draw FlowChart with elements [12, 13, 14, 15];
Leave Page -> Go to new Page;
Draw FlowChart with elements [12, 19, 20, 21];