vue-flowchart

A Mobile-friendly drag and pinchable flowchart components in Vue.js.

demo

This is a demo application combined with BootstrapVue. https://vue-flowchart.ichi-dev.info/

Usage

Install via npm

npm install @yosichikaw/vue-flowchart

Add to your application

import Vue from 'vue';
import VueFlowchart from "@yosichikaw/vue-flowchart";

Vue.use(VueFlowchart);

Example code

<template>
  <div id="app">
    <VueFlowchart
      :flow="flow"
      :selected_node_ids="selectedNodeIds"
      :options="options"
      @onTouch="onTouch"
    />
</template>
<script>
export default {
  data() {
    return {
      flow: {
        nodes: [
          {id: 1, title: "title1", bodies: ["item1", "item2"], x: 10, y:500},
          {id: 1, title: "title2", bodies: ["item3"], x: 200, y:700},
        ],
        links: [
          { from: 1, index: 1, to: 2 },
        ],
      },
      selected_nodes: [],
      options:{},
    };
  },
  computed: {
    selectedNodeIds() {
      return this.selected_nodes.map((n) => n.id);
    },
  },
  methods: {
    onTouch({node_id}){
      // do something
    },
  }
};
</script>

Parameters

|Parameter|Default|Type|Description| |---|---|---|---| |id|"vue-flowchart"|String| The ID of SVG element.| |flow|see below|Object|Flowchart display data.| |selected_node_ids|[]|Array|List of IDs of selected nodes.| |options|see below|Object|Options.|

Define the default Parameters. https://github.com/IchikawaYoshihiro/vue-flowchart/blob/master/src/const.js

flow

|Parameter|Type|Default|Description| |---|---|---|---| |nodes|Array|[]|| |nodes..id|String, Number|null|| |nodes..title|String|""|| |nodes..bodies|Array|[]|| |nodes..bodies.*|String|""|Message| |nodes..x|Number|0|| |nodes..y|Number|0|| |liks|Array|[]|| |liks..from|String,Number|0|ID of the source node.| |liks..index|Number|0|The index of the bodies of the linking source node.| |liks.*.to|String,Number|0|ID of the linked node.|

selected_node_ids

ID array of the selected node.

options

|Parameter|Type|Default|Description| |---|---|---|---| |draggable|Boolean|true|The value of whether the background can be dragged.| |pinchable|Boolean|true|| |enable_grid|Boolean|true|The value to display the grid.| |enable_filter|Boolean|true|Value whether to apply shadow filter, if true, drawing performance will be reduced on low specs.| |canvas.scale|Number|0.75|| |canvas.grid|Number|10|| |canvas.grid_color|String|"#bbb"|| |node.draggable|Boolean|true|The value of whether the node can be dragged.| |node.fit_grid|Boolean|true|The value to align to the grid when the node is moved.| |node.bgcolor|String|"#fff"|| |node.border_color|String|"#40b883"|| |node.border_width|Number|1.5|| |node.max_width|Number|300|| |node.font_size.title|Number|16|| |node.font_size.body|Number|12|| |node.default_text.title|String|"No title"|| |node.default_text.body|String|"No message"|| |node.text_color.title|String|"#111"|| |node.text_color.body|String|"#000"|| |link.border_color|String|"#40b883"|| |link.border_width|Number|1.5|| |link.type|line, key_line, curve|"line"|| |control.detect_double_touch_msec|Number|500|The value of how many milliseconds it is judged to be a double touch when it is touched twice.| |control.detect_long_touch_msec|Number|500|The value of how many milliseconds or more of continuous touch is judged to be long touch.| |control.detect_move_px|Number|10|The range of whether you are tapping the same spot. If you make it too small, a slight shift of your finger will be judged as a move and the long tap will not fire.| |control.drag_fps|Number|60|Drag event firing frequency. If you set it above 120, all movement events will fire, which may result in a performance degradation.|

Events

|Event|Argments|Description| |---|---|---| |onTouch|{ node_id }|When touched.| |onLongTouch|{ node_id }|When long-touched.| |onDoubleTouch|{ node_id }|When touched twice.| |onTouchEnd|{ node_id }|When the touch is over.| |onDrag|{ dx, dy }|When draggable is enabled and the cursor is moved.| |onBackgroundDrag|{ dx, dy }|When draggable is enabled and the cursor is moved in a blank space.| |onPinch|{ dr, dh, dv, dl, cx, cy }|When pinching or mouse wheel is used.dr: Rotation angle. dh, dv : Difference between horizontal and vertical movement.dl: Difference in touch distance or wheel travel distance. cx,cy: Touch intermediate coordinates or wheeled coordinates.|

Slots

grid

Custom grids can be added. If enable_grid is disabled, it is not visible. The ID of the pattern element must be specified as "grid".

Example

Dotted Grid.

<VueFlowchart>
  <template v-slot:grid="{ options, gridScale }">
    <defs>
      <pattern
        id="grid"
        x="0"
        y="0"
        :width="gridScale.x"
        :height="gridScale.y"
      >
        <circle cx="0" cy="0" r="1" :stroke="options.canvas.grid_color" />
      </pattern>
    </defs>
  </template>
</VueFlowchart>

filter

Allows you to add a custom filter. Not visible if enable_filter is disabled. The ID of the pattern element must be specified as "filter".

Example

An embossable filter sample.

<VueFlowchart>
  <template v-slot:filter">
    <defs>
      <filter id="filter">
        <feConvolveMatrix order="3 3" kernelMatrix="3 0 0 0 1 0 0 0 -3" />
      </filter>
    </defs>
  </template>
</VueFlowchart>

Change Log

CHANGELOG.md