@whalecloud/fishtopo-flow

fishTopoFlow 库，支持 react

Install

npm i @whalecloud/fishtopo-flow

Usage

import { FishTopoFlow } from '@whalecloud/fishtopo-flow';
import { Image, Rect } from '@whalecloud/fishtopo-flow/lib/node';
import { Curve } from '@whalecloud/fishtopo-flow/lib/link';

this.fishtopo = new FishTopoFlow(document.getElementById("flowIns"), {
  deleteShow: true,
  linkShow: true,
  linkModify: true,
  roam: false
});

const imageNode = new Image({
  style: {
    image: "https://fish.iwhalecloud.com/fish-topo-develop/examples/flow/img/network/4_cloud.svg",
    width:120,
    height:70,
    text:"server",
    textPosition:"bottom"
  },
  position:[10,10]
});

const rect = new Rect({
  shape: { width: 100, height: 60 },
  position: [300, 300],
  tooltip: "矩形",
  hoverStyle: { fill: "#FF0000" }
});

const newCurveLink = (startNode, endNode, text, direction, dashedPattern) => {
  return new Curve(startNode, endNode, {
    style: {
      lineDash: [dashedPattern]
    },
    text: {
      text: text
    },
    pos: direction
  })
}

const link = newCurveLink(rect, imageNode, '曲线', "bottom, left", 2);
this.fishtopo.add(imageNode);
this.fishtopo.add(rect);
this.fishtopo.add(link);