# nova-flow

**Repository Path**: nova-group/nova-flow

## Basic Information

- **Project Name**: nova-flow
- **Description**: nova-flow仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-25
- **Last Updated**: 2024-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 拓扑图编辑器

## 模块划分

### nova-flow

novaFlow的核心类是NovaFlow,使用方式是：

```typescript
import { NovaFlow } from '@nova-cbb/nova-flow'

new NovaFlow({
    /**
     * 图表数据，一般是字符串或者对象, 具体格式参考Gojs官网
     */
    modelData: data.layout_value,
    /**
     * 节点、分组、连线的点击事件，对于节点、分组、连线在gojs中可以统一称为part(部件)
     */
    onClick(e, data) {
      console.log('data', data);
    }
})

```

NovaFlow 只是基于gojs做了一层基本封装, gojs本身很多的交互逻辑以及数据逻辑都不完善，比如：节点的文本随画布缩放适应，节点的端口、resizeTool操作按钮无法随画布适应，模型数据的变更逻辑、右键菜单样式、创建节点时key如何通过uuid设置问题等等，

NovaFlow实例对外暴露了diagram实例，如果NovaFlow现有的功能不满足你，你可以参考gojs官网文档自己完善或者联系我们

#### 参数选项

```typescript
{
    /**
     * 内边距
     */
    padding?: number;
    /**
     * 背景样式
     */
    background?: string;
    /**
     * model数据支持json字符串和对象
     */
    modelData?: string | go.ObjectData;
    /**
     * 计算重塑，允许任意调整目标对象的纵横比
     * 默认: false
     */
    computeReshape?: boolean;
    /**
     * 画布上下文右键菜单(暂未实现)
     */
    diagramContextMenu?: Array<ContextMenuItem>;
    /**
     * 节点右键菜单(暂未实现)
     */
    nodeContextMenus?: Array<ContextMenuItem>;
    /**
     * 分组右键菜单(暂未实现)
     */
    groupContextMenus?: Array<ContextMenuItem>;
    /**
     * 初始化时自动适应画布
     */
    autoZoom?: boolean;
    /**
     * 是否只读
     */
    isReadOnly?: boolean;
    /**
     * 新增节点、分组、连线的附加值
     */
    extraPartObject?: {
        linkObj?: go.ObjectData;
        nodeObj?: go.ObjectData;
        groupObj?: go.ObjectData;
    };
    /**
     * 画布初始化后的回调
     */
    initial?: (diagram: go.Diagram) => void;
    /**
     * 节点点击触发
     */
    onClick?: (e: go.DiagramEvent, data: go.ObjectData) => void;
    /**
     * 节点选中触发
     */
    onSelection?: (e: go.DiagramEvent, data: go.ObjectData[]) => void;
    /**
     * 选择复制节点触发
     */
    onSelectionCopied?: (e: go.DiagramEvent) => void;
    /**
     * 移动、缩放视图时触发
     */
    onViewportBoundsChanged?: (e: go.DiagramEvent) => void;
    /**
     * 拖入新节点时触发
     */
    onExternalObjectsDropped?: (e: go.DiagramEvent) => void;
    /**
     * model数据变更时触发
     * 只有发送事务(diagram.commitTransaction)才会触发modelChange
     */
    onModelChange?: (modelData: string) => void;
}
    
```

具体参考声明文件

#### 方法

| 方法名 | 说明 | 参数 |
| ------ | ----- | ----- |
| use | 静态方法，用于注册插件 | - |
| setModelData | 设置画布数据模型，可以重新渲染画布数据 | modelData |
| highlightCollection | 设置节点、分组的高亮状态, 可以设置是否高亮所在分组 | keys、isHighlightParents |
| skipsUndo | 通常用于变更画布part属性时，跳过内置的历史记录 | fn |
| setPartData | 为part设置额外的数据对象，通常基于这些数据变更节点或者连线的样式 | data |
| destroy | 销毁画布实例，这个建议在当前组件销毁时执行 |  - |


### nova-flow-part

novaFlowPart是一个部件库，遵循novaFlow提供的注册机制, 内部包括node、group、link这些part的定制内容，以及为相关业务提供的nodeEffect和linkEffect的函数对象
如何注册novaFlowPart以及使用方式

```typescript
import { NovaFlow } from '@nova-cbb/nova-flow'
import NovaFlowPart from '@nova-cbb/nova-flow-part'

const novaFlowPartPlugin = NovaFlow.use(novaFlowPart, {
    nodeOption: {
        ...
    },
    groupOption: {
        ...
    },
    linkOption: {
        ...
    }
}) # use方法必须在实例化之前调用

new NovaFlow({
    /**
     * 图表数据，一般是字符串或者对象, 具体格式参考Gojs官网
     */
    modelData: data.layout_value,
    /**
     * 节点、分组、连线的点击事件，对于节点、分组、连线在gojs中可以统一称为part(部件)
     */
    onClick(e, data) {
      console.log('data', data);
    }
})

const novaFlowPartEffect = novaFlowPartPlugin(); // 获取install方法返回的对象，通常这些对象由插件内部提供

// 设置节点或者连线的状态
novaFlowPartEffect.nodeEffect.xxxx
novaFlowPartEffect.linkEffect.xxx
```

#### 参数选项

```typescript
{
  nodeOption?: {
    minSize?: go.Size;
    /**
     * 默认大小比例
     */
    scale?: number;
    /**
     * 获取节点的图标资源，当节点的对象值发生变更时会重新触发该方法回调，以下的get前缀方法同理
     */
    getNodeSource?: (nodeObj: go.Node) => string;
    /**
     * 节点图标资源加载完成后的函数回调
     */
    sourceSuccessFunction?: (picture: go.Picture, e: Event) => void;
  };
  groupOption?: {
    // 其他样式属性，这些属性是默认样式数据，如果需要监听数据的变化去变更分组节点的样式请用get前缀方法
    ...
    /**
     * 获取面板的样式, 当节点的对象值发生变更时会重新触发该方法回调，以下的get前缀方法同理
     */
    getPanelBindingStyle?: (node: go.Node) => GroupStyleOption | null;
    /**
     * 获取小分组面板的样式
     */
    getGroupBindingStyle?: (node: go.Node) => GroupStyleOption | null;
  };
  linkOption?: {
    // 其他样式属性，这些属性是默认样式数据，如果需要监听数据的变化去变更线条节点的样式请用get前缀方法
    ...
    /**
     * 获取线条的样式, 当节点的对象值发生变更时会重新触发该方法回调
     */
    getBindingStyle?: (link: go.Link) => LinkStyleOptions;
  };
  animationLinkOption?: {
    // 其他样式属性，这些属性是默认样式数据，如果需要监听数据的变化去变更线条节点的样式请用get前缀方法
    ...
    /**
     * 获取线条的样式, 当节点的对象值发生变更时会重新触发该方法回调
     */
    getBindingStyle?: (link: go.Link) => LinkStyleOptions;
  };
}
```

具体详情请参考声明文件

#### 方法对象

nodeEffect对象

| 方法名 | 说明 | 参数 |
| ------ | ----- | ----- |
| setHeart | 为节点添加一个心跳状态 | keys |
| setStatus | 为节点设置状态，这个状态会变更节点的样式 | keys、statusObj|
| setData | 为节点设置额外的数据对象 | keys、object |
| clear | 清除所有节点的心跳、状态值 | void |


linkEffect对象

| 方法名 | 说明 | 参数 |
| ------ | ----- | ----- |
| 方法名 | 说明 | 参数 |
| addAnimationLink | 为节点和节点之间设置一条动画连线 | fromToKeys |
| setExtraData | 为连线添加额外的数据对象 | object |