@rasir/x6-arch v1.2.10

AUTH

作者：rasir 源码地址 文档地址

前言

这是一款基于antv/x6的用于系统架构设计可视化的一款工具。

效果图

快速上手

说明

本组件是在react框架下的前端组件，推荐react@16.8以上版本。推荐使用umijs@3.x脚手架。其他必要依赖见下文。

目前，作品还有很多需要完善的地方，有些兼容没有处理，推荐使用 mac + 谷歌最新浏览器。这样能体验到更好的滚动效果。

安装方式

通过 npm 安装 npm i @rasir/x6-arch -S

必要依赖

  "dependencies": {
    "@antv/x6": "^1.33.1",
    "ahooks": "^3.7.0"
  },
  "peerDependencies": {
    "antd": ">=4.x",
    "react": ">=16.14.0",
    "react-dom": ">=16.14.0"
  },

使用方式

import React from 'react';
import ReactDOM from 'react-dom';
// 自定义的节点配置组件
import AppModule from './AppModule';
import moduleConfig from './moduleConfig';
import Arch from '../src';
import registerList from './register';
import 'antd/dist/antd.css';
import './index.less';

import appIcon from './icon/app.png';
....
import bmsIcon from './icon/bms.png';

const data = {
  "lanes": [
    { "id": "user", "name": "用户层", "height": 120 },
    { "id": "access", "name": "接入层", "height": 150 },
    { "id": "app", "name": "应用逻辑层", "height": 200 },
    { "id": "store", "name": "存储层", "height": 150 }
  ],
  "nodes": [
    {
      "id": "1",
      "x": 100,
      "y": 180,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "bmr",
      "preId": "access"
    },
    {
      "id": "2",
      "x": 100,
      "y": 380,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "tidb",
      "preId": "app"
    },
    {
      "id": "3",
      "x": 300,
      "y": 380,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "browser",
      "preId": "app"
    },
    {
      "id": "4",
      "x": 300,
      "y": 30,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "app",
      "preId": "user"
    },
    {
      "moduleType": "jetty",
      "name": "ceshi2222",
      "x": 450,
      "y": 380,
      "preId": "app",
      "id": "1flj7sg14",
      "label": "Jetty",
      "icon": "jetty",
      "value": "jetty",
      "type": "node",
      "image": "jettyModule",
      "bgImage": "innerSystem"
    },
    {
      "moduleType": "jetty",
      "name": "ceshi11111",
      "x": 600,
      "y": 380,
      "preId": "app",
      "id": "1flj7sg1422",
      "label": "Jetty",
      "icon": "jetty",
      "value": "jetty",
      "type": "node",
      "image": "jettyModule",
      "bgImage": "innerSystem"
    },
  ],
  "links": [{ "source": "1", "target": "2" }]
}
const config: ModuleConfig = {
  search: {
    placeholder: '请输入组件名称',
  },
  options: [
    {
      label: '用户层组件',
      value: 'userLayer',
      children: [
        {
          label: 'USER',
          icon: 'user',
          moduleType: 'user',
          moduleImage: 'user',
          value: 'user',
          target: ['user'],
          moduleProp: () =>
            [
              {
                type: 'INPUT',
                label: '用户名称',
                name: 'name',
                inputProps: {
                  allowClear: true,
                  placeholder: '请输入用户名称',
                  className: 'search-input',
                },
                rules: [
                  {
                    required: true,
                    message: '请选择使用时长',
                  },
                ],
              },
            ] as ModuleFormItem[],
        },
        {
          label: 'APP',
          icon: 'app',
          value: 'app',
          moduleProp: (data, form) =>
          (<AppModule form={form} data={data} />),
        },
      ],
    },
    {
      label: '云主机',
      value: 'clound',
      children: [
        {
          label: 'Jetty',
          icon: 'jetty',
          value: 'jetty',
          moduleProp: [],
        },
        {
          label: 'Nginx',
          icon: 'nginx',
          value: 'nginx',
          moduleProp: [],
        },
        {
          label: 'Other',
          icon: 'other',
          value: 'other',
          moduleProp: [],
        },
      ],
    },
    {
      label: '裸金属',
      value: 'mate',
      children: [
        {
          label: 'BMS',
          icon: 'bms',
          value: 'bms',
          moduleProp: [],
        },
      ],
    },
    {
      label: 'K8S容器',
      value: 'k8s',
      children: [
        {
          label: 'Dubbo',
          icon: 'dubbo',
          value: 'dubbo',
          moduleProp: [],
        },
        {
          label: 'SpringBoot',
          icon: 'springboot',
          value: 'springboot',
          moduleProp: [],
        },
        {
          label: 'NODEJS',
          icon: 'nodejs',
          value: 'nodejs',
          moduleProp: [],
        },
        {
          label: 'PYTHON',
          icon: 'python',
          value: 'python',
          moduleProp: [],
        },
        {
          label: 'Jetty',
          icon: 'jetty',
          value: 'jetty',
          moduleProp: [],
        },
        {
          label: 'Nginx',
          icon: 'nginx',
          value: 'nginx',
          moduleProp: [],
        },
      ],
    },
    {
      label: '中间件',
      value: 'middelwear',
      children: [
        {
          label: 'Redis',
          icon: 'redis',
          value: 'redis',
          moduleProp: [],
        },
        {
          label: 'Kafka',
          icon: 'kafka',
          value: 'kafka',
          moduleProp: [],
        },
        {
          label: 'Zookeeper',
          icon: 'zookeeper',
          value: 'zookeeper',
          moduleProp: [],
        },
      ],
    },
    {
      label: '数据库',
      value: 'database',
      children: [
        {
          label: 'MySQL',
          icon: 'mysql',
          value: 'mysql',
          moduleProp: [],
        },
      ],
    },
  ],
};
const assets = {
    appIcon,
    bmsIcon,
    ....
}

const App = () => {
  const onCreateNode = (nodeData) => {
    const { name } = nodeData;
    return Promise.resolve({
      id: '100',
      name,
      moduleType: 'user',
      systemType: 'inner',
      preId: 'user',
      shape: 'arch-node',
    });
  };
  return (
    <Arch
      data={data}
      moduleConfig={moduleConfig}
      assets={assets}
      appendActions={<div>hello</div>}
      registerList={registerList}
      defaultNodeShape="arch-node"
      onCreateNode={onCreateNode}
      cache={false}
    />
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

自定义抽屉中的内容

import { Form, Input } from 'antd';
import { FormInstance } from 'antd/es/form/Form';
import React, { useEffect } from 'react';

interface AppModuleProps {
  data?: any;
  form: FormInstance;
  [key: string]: any;
}

const { Item: FormItem } = Form;

const AppModule: React.FC<AppModuleProps> = function (props) {
  const { form, data } = props;

  useEffect(() => {
    if (data) {
      form?.setFieldsValue(data);
    } else {
      form?.resetFields();
    }
  }, [data]);

  return (
    <Form form={form}>
      <FormItem
        name="name"
        label="APP名称"
        rules={[
          {
            required: true,
            message: '请填写app名称',
          },
        ]}
      >
        <Input placeholder="请填写app名称"></Input>
      </FormItem>
    </Form>
  );
};

export default AppModule;

注意

iconfont 不再需要另外引入

功能说明

• 生成节点，拖拽左侧组件到右侧，会有弹窗让用户填写相关信息然后生成节点。
• 调整节点尺寸，单击节点，出现工具端口，拖动端口调整节点尺寸。
• 右键删除节点 右键点击节点，在右键菜单中点击删除。触发 onRemoveNode
• 右键编辑节点 右键单击节点，在右键菜单中点击编辑，在弹窗中对数据进行编辑。但是节点层级和组件类型不能编辑，触发 onUpdateNode
• 调整层级高度，鼠标移入层级下侧拖拽线，点击鼠标左键进行拖动对层级高度进行调整。
• 生成连线，在画布中从源端节点的端口拖拽连线到目标节点的端口。相同两个节点不能有重复的连线，生成节点前会调用 onAddLink
• 删除连线，鼠标移入链接出现删除按钮。点击按钮会触发 onRemoveLink
• 组件过滤，在左侧搜索框中输入内容，对下面的组件模版进行过滤
• 撤销重做，画布上的操作都可以通过撤销重做来操作。会触发 onUndoOrRedo 回调
• 放大 最多放大到当前画布的 1.5 倍
• 缩小 最小缩小到当前画布的 0.5 倍
• 全屏 展开整个编辑器到全屏操作
• 取消全屏
• 本地导入数据 在弹窗中拖入 ArchData 结构的 .json 文件
• 本地导出数据 生成 ArchData 结果的.json 文件
• 本地导出图片 将画布区域生成 png 图片
• 上传数据 触发 onSave
• 复制节点 左键单击节点，再点击复制节点按钮，节点信息将放入剪贴板中
• 粘贴节点 点击粘贴节点按钮，将触发 onCreateNode
• 删除节点 左键单击节点，再点击删除节点按钮。触发 onRemoveNode
• 清理缓存 点击清理缓存，将清除缓存数据，并触发 reload ，而使用 data 传入的数据

快捷键

• 复制节点到剪贴板 ctrl+c/commond+c
• 粘贴节点 ctrl+v/commond+v
• 撤销 ctrl+z/commond+z
• 重做 ctrl+shift+z/commond+shift+z
• 删除节点 backspace/backspace
• 放大 ctrl+1/commond+1
• 缩小ctrl+2/commond+2
• 清理缓存 ctrl+e/commond+e

API

ArchData 输入数据结构

NodeData 数据结构

ActionTypes

type ActionTypes = 'RE_UN_DO' | 'ZOOM' | 'EXPORT_DATA' | 'IMPORT_DATA' | 'EXPORT_IMG'| 'SUBMIT' | 'COPY' | 'PASTE' | 'DELETE' | 'CLEAR'

Register

NODE 是节点；EDGE是线条 type Register = { name: string; options: any; type: 'NODE' | 'EDGE'; handler: NodeHanlder; };

LinkData 数据结构

ModuleConfig 左侧组件类型定义

ModuleGropuItem

ModuleConfigItem

ModulePropItem

V1.1.0 修改

1. 修改了 iconfont 引入方式，不再需要手动引入。
2. 增加了功能键的可选，可以只使用部分功能键。
3. 删除预置的内部系统和外部系统图标。
4. 去除内置节点样式，让用户自定义节点样式，保留默认边。
5. 可自定义泳道样式

V1.2.0 新增功能

1. 新增 onChange 事件，节点和连线发生变化时都将出发 onChange。
2. 可以通过鼠标滚动或拖拽画布空白处调整当前视窗。不兼容 IE