联系作者:qq1476466395(MEISNULL)

访问网站:http://115.190.106.125:8555/#/

使用cyf-flow

1.安装

npm i cyf-flow

2.在vue中引入

import cyfFlow from 'cyf-flow'
import 'cyf-flow/dist/index.css'
const app = createApp(App)
app.use(cyfFlow)

3.api介绍

//node里面的x y width height 一定要是数字 number类型
type Props = {
  isPview: boolean//预览模式
  isPanning: boolean //是否正在拖动
  isZoom: boolean//是否缩放
  bg: string //背景图片
  isConnectionType: boolean //是否开启连线
  nodeTypes: NodeType[] //节点类型
  canvasSize: {
    width: number
    height: number
  }//画布的宽高
  connections: any[] //连接线数据
  isShowConfig:boolean //是否显示配置面板
  isCzsm: boolean//是否显示操作说明
  isRightConfig: boolean//是否显示右侧配置面板（自定义--选择单独节点后显示自定义配置面板）
  nodesValue: {//节点数据
    type: Array
    default: () => []
  }
}
type Emit = {
    delNodes:()=>void//删除节点触发
    editNode:()=>void// 双击节点
    handleDragMove:()=>void//节点移动的时候触发
    getcanvasSize:()=>void//获取画布大小
    getConnectionsValue:()=>void//获取连线数据
    getNodesValue:()=>void//获取nodes节点数据
    copyNode:()=>void//复制节点触发
}
//通过ref调用比如 CflowEditorLoaderRef.value.setNodesConfig(id,key,value)
type DefineExpose = {
    startDrag:(event,node)=>void, //将节点放置在画布上
    setNodesConfig:(id,key,value)=>void//设置节点的里面的值
    getNodesConfig:(id)=>void //根据id获取节点
    canvasInit:()=>void //画布初始化
}

4.api使用示例

const nodeTypes =[
     {
        type: "start",
        label: "节点",
        width: 50,
        height: 50,
        color: "green"
    },
    {
        type: "slot",
        label: "自定义",
        width: 50,
        height: 50,
        color: "#000",
        slotName: "slotName",
    },
    {
        type: "html",
        label: "html",
        width: 50,
        height: 50,
        color: "",
        target: `<h1>HTML</h1>`,
    },
]
//这里主要是通过回显节点
const nodesValue = [
    {
      id: "node-1755669869169",
      type: "slot",
      label: "自定义",
      width: 50,
      height: 50,
      color: "#000",
      slotName: "slotName",
      x: 221.828125,
      y: 172.796875,
      obj: {},
    },
  ];
  
//这里主要是通过回显连线
const connections = [
    {
      id: "conn-1755670065311",
      source: "node-1755670062977",
      target: "node-1755670063769",
    },
  ];

5. FlowPview预览组件--迁移到了编辑组件加了个isPview属性-弃用

type Props = {
  bg: string //背景图片
  connections: Array<any> //连接线数据
  canvasSize: any //画布的宽高
  nodesValue: {// 节点数据
    type: Array
    default: () => []
  }
}
defineExpose({
  setNodesConfig, //设置节点的里面的值
  canvasInit //画布初始化
  setZindex//设置节点的层级setZindex(id,zindex)
  setCanvasOffset // 设置画布的偏移量setCanvasOffset({ x: 0, y: 0 })
})