mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 19:58:46 +08:00
feat: combo interface
This commit is contained in:
baizn
Yanyan Wang
parent
9e3d5bca83
commit
71076b7355
@ -3,6 +3,7 @@ export default {
|
||||
rootContainerClassName: 'root-container',
|
||||
nodeContainerClassName: 'node-container',
|
||||
edgeContainerClassName: 'edge-container',
|
||||
comboContainerClassName: 'combo-container',
|
||||
customGroupContainerClassName: 'custom-group-container',
|
||||
delegateContainerClassName: 'delegate-container',
|
||||
defaultShapeFillColor: '#C6E5FF',
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import each from '@antv/util/lib/each';
|
||||
import isString from '@antv/util/lib/is-string';
|
||||
import { IStates } from '../../interface/graph';
|
||||
import { Item } from '../../types';
|
||||
import { Item, IStates } from '../../types';
|
||||
import Graph from '../graph';
|
||||
import { INode } from '../../interface/item';
|
||||
|
||||
|
||||
@ -17,9 +17,9 @@ import {
|
||||
IGraph,
|
||||
IModeOption,
|
||||
IModeType,
|
||||
IStates,
|
||||
IStates
|
||||
} from '../interface/graph';
|
||||
import { IEdge, INode } from '../interface/item';
|
||||
import { IEdge, INode, ICombo } from '../interface/item';
|
||||
import {
|
||||
EdgeConfig,
|
||||
GraphData,
|
||||
@ -32,6 +32,7 @@ import {
|
||||
NodeMap,
|
||||
Padding,
|
||||
TreeGraphData,
|
||||
ComboConfig
|
||||
} from '../types';
|
||||
import { getAllNodeInGroups } from '../util/group';
|
||||
import { move, translate } from '../util/math';
|
||||
@ -69,6 +70,8 @@ export interface PrivateGraphOption extends GraphOptions {
|
||||
|
||||
groups: GroupConfig[];
|
||||
|
||||
combos: ComboConfig[];
|
||||
|
||||
itemMap: NodeMap;
|
||||
|
||||
callback: () => void;
|
||||
@ -194,6 +197,11 @@ export default class Graph extends EventEmitter implements IGraph {
|
||||
className: Global.nodeContainerClassName,
|
||||
});
|
||||
|
||||
const comboGroup: IGroup = group.addGroup({
|
||||
id: `${id}-combo`,
|
||||
className: Global.comboContainerClassName
|
||||
})
|
||||
|
||||
const delegateGroup: IGroup = group.addGroup({
|
||||
id: `${id}-delegate`,
|
||||
className: Global.delegateContainerClassName,
|
||||
@ -207,7 +215,7 @@ export default class Graph extends EventEmitter implements IGraph {
|
||||
|
||||
customGroup.toBack();
|
||||
|
||||
this.set({ nodeGroup, edgeGroup, customGroup, delegateGroup });
|
||||
this.set({ nodeGroup, edgeGroup, customGroup, delegateGroup, comboGroup });
|
||||
}
|
||||
this.set('group', group);
|
||||
}
|
||||
@ -372,6 +380,8 @@ export default class Graph extends EventEmitter implements IGraph {
|
||||
* group 数据
|
||||
*/
|
||||
groups: [],
|
||||
|
||||
combos: [],
|
||||
/**
|
||||
* group样式
|
||||
*/
|
||||
@ -455,6 +465,16 @@ export default class Graph extends EventEmitter implements IGraph {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置各个 combo 的配置
|
||||
* @param comboFn
|
||||
*/
|
||||
public combo(comboFn: (config: ComboConfig) => Partial<ComboConfig>): void {
|
||||
if (typeof comboFn === 'function') {
|
||||
this.set('comboMapper', comboFn)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 ID 查询图元素实例
|
||||
* @param id 图元素 ID
|
||||
@ -1162,6 +1182,22 @@ export default class Graph extends EventEmitter implements IGraph {
|
||||
return this.get('edges');
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图中所有的 combo 实例
|
||||
*/
|
||||
public getCombos(): ICombo[] {
|
||||
return this.get('combos')
|
||||
}
|
||||
|
||||
// TODO 待实现getComboNodes方法
|
||||
/**
|
||||
* 获取指定 Combo 中所有的节点
|
||||
* @param comboId combo ID
|
||||
*/
|
||||
public getComboNodes(comboId: string): INode[] {
|
||||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 graph 上的 animateCfg 进行视图中节点位置动画接口
|
||||
*/
|
||||
@ -1579,6 +1615,24 @@ export default class Graph extends EventEmitter implements IGraph {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO 待实现 collapse 方法
|
||||
/**
|
||||
* 收起指定的 combo
|
||||
* @param comboId combo ID
|
||||
*/
|
||||
public collapse(comboId: string): void {
|
||||
|
||||
}
|
||||
|
||||
// TODO 待实现 expand 方法
|
||||
/**
|
||||
* 展开指定的 combo
|
||||
* @param comboId Combo ID
|
||||
*/
|
||||
public expand(comboId: string): void {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 收起分组
|
||||
* @param {string} groupId 分组ID
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import EventEmitter from '@antv/event-emitter';
|
||||
import { AnimateCfg, Point } from '@antv/g-base/lib/types';
|
||||
import { Point, AnimateCfg } from '@antv/g-base/lib/types';
|
||||
import Graph from '../graph/graph';
|
||||
import {
|
||||
EdgeConfig,
|
||||
GraphData,
|
||||
IG6GraphEvent,
|
||||
Item,
|
||||
ITEM_TYPE,
|
||||
ModelConfig,
|
||||
@ -13,9 +12,14 @@ import {
|
||||
ShapeStyle,
|
||||
TreeGraphData,
|
||||
LayoutConfig,
|
||||
ModelStyle,
|
||||
GraphOptions,
|
||||
IModeOption,
|
||||
IModeType,
|
||||
ComboConfig,
|
||||
IG6GraphEvent,
|
||||
ModelStyle
|
||||
} from '../types';
|
||||
import { IEdge, INode } from './item';
|
||||
import { IEdge, INode, ICombo } from './item';
|
||||
import PluginBase from '../plugins/base';
|
||||
|
||||
export interface IModeOption {
|
||||
@ -134,13 +138,13 @@ export interface GraphOptions {
|
||||
color?: string;
|
||||
} & ModelStyle;
|
||||
|
||||
nodeStateStyles?: {
|
||||
nodeStateStyles?: {
|
||||
[key: string]: ShapeStyle | {
|
||||
[key: string]: ShapeStyle
|
||||
}
|
||||
};
|
||||
|
||||
edgeStateStyles?: {
|
||||
edgeStateStyles?: {
|
||||
[key: string]: ShapeStyle | {
|
||||
[key: string]: ShapeStyle
|
||||
}
|
||||
@ -244,7 +248,7 @@ export interface IGraph extends EventEmitter {
|
||||
* 仅画布重新绘制
|
||||
*/
|
||||
paint(): void;
|
||||
|
||||
|
||||
/**
|
||||
* 自动重绘
|
||||
*/
|
||||
@ -350,6 +354,17 @@ export interface IGraph extends EventEmitter {
|
||||
*/
|
||||
getEdges(): IEdge[];
|
||||
|
||||
/**
|
||||
* 获取当前图中所有 combo 的实例
|
||||
*/
|
||||
getCombos(): ICombo[];
|
||||
|
||||
/**
|
||||
* 获取指定 combo 中所有的节点
|
||||
* @param comboId Combo ID
|
||||
*/
|
||||
getComboNodes(comboId: string): INode[];
|
||||
|
||||
/**
|
||||
* 获取当前视口伸缩比例
|
||||
* @return {number} 比例
|
||||
@ -458,6 +473,13 @@ export interface IGraph extends EventEmitter {
|
||||
* @param {function} edgeFn 指定每个边的样式,用法同 node
|
||||
*/
|
||||
edge(edgeFn: (config: EdgeConfig) => Partial<EdgeConfig>): void;
|
||||
|
||||
/**
|
||||
* 设置每个 combo 的配置
|
||||
* @param comboFn 指定每个 combo 的配置
|
||||
*/
|
||||
combo(comboFn: (config: ComboConfig) => Partial<ComboConfig>): void;
|
||||
|
||||
/**
|
||||
* 平移画布到某点
|
||||
* @param {number} x 水平坐标
|
||||
@ -504,7 +526,7 @@ export interface IGraph extends EventEmitter {
|
||||
* 导出包含全图的图片
|
||||
* @param {String} name 图片的名称
|
||||
*/
|
||||
downloadFullImage(name?: string, imageConfig?: { backgroundColor?: string, padding?: number | number[]}): void;
|
||||
downloadFullImage(name?: string, imageConfig?: { backgroundColor?: string, padding?: number | number[] }): void;
|
||||
|
||||
// TODO 需要添加布局配置类型
|
||||
/**
|
||||
@ -532,6 +554,18 @@ export interface IGraph extends EventEmitter {
|
||||
*/
|
||||
removePlugin(plugin: PluginBase): void;
|
||||
|
||||
/**
|
||||
* 收起指定的 Combo
|
||||
* @param comboId combo ID
|
||||
*/
|
||||
collapse(comboId: string): void;
|
||||
|
||||
/**
|
||||
* 展开指定的 Combo
|
||||
* @param comboId combo ID
|
||||
*/
|
||||
expand(comboId: string): void;
|
||||
|
||||
/**
|
||||
* 收起分组
|
||||
* @param {string} groupId 分组ID
|
||||
|
||||
@ -283,3 +283,48 @@ export interface INode extends IItemBase {
|
||||
|
||||
unlock(): void;
|
||||
}
|
||||
|
||||
export interface ICombo extends INode {
|
||||
/**
|
||||
* 获取 Combo 中所有的子元素，包括 Combo、Node 及 Edge
|
||||
*/
|
||||
getChildrens: () => ICombo[] | IEdge[];
|
||||
|
||||
/**
|
||||
* 获取 Combo 中所有节点
|
||||
*/
|
||||
getComboNodes: () => INode[];
|
||||
|
||||
/**
|
||||
* 获取 Combo 的 BBox
|
||||
*/
|
||||
getBBox: () => IBBox;
|
||||
|
||||
/**
|
||||
* 向 Combo 中增加 combo
|
||||
* @param combo Combo ID 或 Combo实例
|
||||
* @return boolean 添加成功返回 true，否则返回 false
|
||||
*/
|
||||
addCombo: (combo: string | ICombo) => boolean;
|
||||
|
||||
/**
|
||||
* 从 Combo 中移除指定的 combo
|
||||
* @param combo Combo ID 或 Combo实例
|
||||
* @return boolean 移除成功返回 true，否则返回 false
|
||||
*/
|
||||
removeCombo: (combo: string | ICombo) => boolean;
|
||||
|
||||
/**
|
||||
* 向 Combo 中添加节点
|
||||
* @param node 节点ID或实例
|
||||
* @return boolean 添加成功返回 true，否则返回 false
|
||||
*/
|
||||
addNode: (node: string | INode) => boolean;
|
||||
|
||||
/**
|
||||
* 向 Combo 中移除指定的节点
|
||||
* @param node 节点ID或实例
|
||||
* @return boolean 移除成功返回 true，否则返回 false
|
||||
*/
|
||||
removeNode: (node: string | INode) => boolean;
|
||||
}
|
||||
|
||||
70
src/item/combo.ts
Normal file
70
src/item/combo.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import { ICombo, INode, IEdge } from '../interface/item'
|
||||
import Node from './node'
|
||||
import { IBBox } from '../types';
|
||||
|
||||
export default class Combo extends Node implements ICombo {
|
||||
public getDefaultCfg() {
|
||||
return {
|
||||
type: 'combo',
|
||||
nodes: [],
|
||||
edges: []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 Combo 中所有的子元素，包括 Combo、Node 及 Edge
|
||||
*/
|
||||
public getChildrens(): ICombo[] | IEdge[] {
|
||||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 Combo 中所有节点
|
||||
*/
|
||||
getComboNodes(): INode[] {
|
||||
return []
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 Combo 的 BBox
|
||||
*/
|
||||
getBBox(): IBBox {
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* 向 Combo 中增加 combo
|
||||
* @param combo Combo ID 或 Combo实例
|
||||
* @return boolean 添加成功返回 true，否则返回 false
|
||||
*/
|
||||
addCombo(combo: string | ICombo): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 Combo 中移除指定的 combo
|
||||
* @param combo Combo ID 或 Combo实例
|
||||
* @return boolean 移除成功返回 true，否则返回 false
|
||||
*/
|
||||
removeCombo(combo: string | ICombo): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 向 Combo 中添加节点
|
||||
* @param node 节点ID或实例
|
||||
* @return boolean 添加成功返回 true，否则返回 false
|
||||
*/
|
||||
addNode(node: string | INode): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 向 Combo 中移除指定的节点
|
||||
* @param node 节点ID或实例
|
||||
* @return boolean 移除成功返回 true，否则返回 false
|
||||
*/
|
||||
removeNode(node: string | INode): boolean {
|
||||
return true
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
import GraphEvent from '@antv/g-base/lib/event/graph-event';
|
||||
import { BBox } from '@antv/g-base/lib/types';
|
||||
import { BBox, AnimateCfg } from '@antv/g-base/lib/types';
|
||||
import Canvas from '@antv/g-canvas/lib/canvas';
|
||||
import ShapeBase from '@antv/g-canvas/lib/shape/base';
|
||||
import Node from '../item/node';
|
||||
import { IGraph } from '../interface/graph';
|
||||
import { IEdge, INode } from '../interface/item';
|
||||
import { IEdge, INode, ICombo } from '../interface/item';
|
||||
import { ILabelConfig } from '../interface/shape';
|
||||
|
||||
// Math types
|
||||
@ -91,6 +91,190 @@ export type LoopConfig = Partial<{
|
||||
clockwise: boolean;
|
||||
}>;
|
||||
|
||||
export interface LayoutConfig {
|
||||
type?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
|
||||
export interface GraphAnimateConfig extends AnimateCfg {
|
||||
/**
|
||||
* 回调函数，用于自定义节点运动路径。
|
||||
*/
|
||||
onFrame?: (item: Item, ratio: number, data?: GraphData, originAttrs?: ShapeStyle) => unknown;
|
||||
}
|
||||
|
||||
export interface IModeOption {
|
||||
type: string;
|
||||
delegate?: boolean;
|
||||
delegateStyle?: object;
|
||||
updateEdge?: boolean;
|
||||
trigger?: string;
|
||||
enableDelegate?: boolean;
|
||||
maxZoom?: number;
|
||||
minZoom?: number;
|
||||
enableOptimize?: boolean;
|
||||
optimizeZoom?: number;
|
||||
multiple?: boolean;
|
||||
selectedState?: string;
|
||||
includeEdges?: boolean;
|
||||
direction?: 'x' | 'y';
|
||||
shouldUpdate?: (e: IG6GraphEvent) => boolean;
|
||||
shouldBegin?: (e: IG6GraphEvent) => boolean;
|
||||
shouldEnd?: (e: IG6GraphEvent) => boolean;
|
||||
onChange?: (item?: Item, judge?: boolean) => unknown;
|
||||
onSelect?: (selectedNodes?: Item[], selectedEdges?: Item[]) => unknown;
|
||||
onDeselect?: (selectedNodes?: Item[], selectedEdges?: Item[]) => unknown;
|
||||
formatText?: (data: { [key: string]: unknown }) => string;
|
||||
}
|
||||
|
||||
export type IModeType = string | IModeOption;
|
||||
|
||||
export interface IMode {
|
||||
default?: IModeType[];
|
||||
[key: string]: IModeType[] | undefined;
|
||||
}
|
||||
|
||||
// Graph 配置项中 state 的类型
|
||||
export interface IStates {
|
||||
[key: string]: INode[];
|
||||
}
|
||||
|
||||
export interface GraphOptions {
|
||||
/**
|
||||
* 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象
|
||||
*/
|
||||
container: string | HTMLElement;
|
||||
/**
|
||||
* 指定画布宽度，单位为 'px'
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* 指定画布高度，单位为 'px'
|
||||
*/
|
||||
height: number;
|
||||
/**
|
||||
* renderer canvas or svg
|
||||
*/
|
||||
renderer?: string,
|
||||
|
||||
fitView?: boolean;
|
||||
|
||||
layout?: LayoutConfig;
|
||||
|
||||
/**
|
||||
* 图适应画布时，指定四周的留白。
|
||||
* 可以是一个值, 例如：fitViewPadding: 20
|
||||
* 也可以是一个数组，例如：fitViewPadding: [20, 40, 50,20]
|
||||
* 当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应 上，右，下，左四边的边距。
|
||||
*/
|
||||
fitViewPadding?: Padding;
|
||||
/**
|
||||
* 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。
|
||||
* 默认值：true
|
||||
*/
|
||||
groupByTypes?: boolean;
|
||||
|
||||
// 是否有向图
|
||||
directed?: boolean;
|
||||
|
||||
groupStyle?: {
|
||||
style?: {
|
||||
[key: string]: ShapeStyle;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。
|
||||
* 默认值：true
|
||||
*/
|
||||
autoPaint?: boolean;
|
||||
|
||||
/**
|
||||
* 设置画布的模式。详情可见G6中的Mode文档。
|
||||
*/
|
||||
modes?: IMode;
|
||||
|
||||
/**
|
||||
* 默认状态下节点的配置，比如 type, size, color。会被写入的 data 覆盖。
|
||||
*/
|
||||
defaultNode?: {
|
||||
shape?: string;
|
||||
type?: string;
|
||||
size?: number | number[];
|
||||
color?: string;
|
||||
} & ModelStyle;
|
||||
|
||||
/**
|
||||
* 默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖。
|
||||
*/
|
||||
defaultEdge?: {
|
||||
shape?: string;
|
||||
type?: string;
|
||||
size?: number | number[];
|
||||
color?: string;
|
||||
} & ModelStyle;
|
||||
|
||||
/**
|
||||
* Combo 默认配置
|
||||
*/
|
||||
defaultCombo?: Partial<{
|
||||
type: string;
|
||||
size: number | number[];
|
||||
color: string;
|
||||
}> & ModelStyle;
|
||||
|
||||
nodeStateStyles?: {
|
||||
[key: string]: ShapeStyle | {
|
||||
[key: string]: ShapeStyle
|
||||
}
|
||||
};
|
||||
|
||||
edgeStateStyles?: {
|
||||
[key: string]: ShapeStyle | {
|
||||
[key: string]: ShapeStyle
|
||||
}
|
||||
};
|
||||
|
||||
// Combo 状态样式
|
||||
comboStateStyles?: {
|
||||
[key: string]: ShapeStyle | {
|
||||
[key: string]: ShapeStyle
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 向 graph 注册插件。插件机制请见：plugin
|
||||
*/
|
||||
plugins?: any[];
|
||||
/**
|
||||
* 是否启用全局动画。
|
||||
*/
|
||||
animate?: boolean;
|
||||
|
||||
/**
|
||||
* 动画配置项，仅在animate为true时有效。
|
||||
*/
|
||||
animateCfg?: GraphAnimateConfig;
|
||||
/**
|
||||
* 最小缩放比例
|
||||
* 默认值 0.2
|
||||
*/
|
||||
minZoom?: number;
|
||||
/**
|
||||
* 最大缩放比例
|
||||
* 默认值 10
|
||||
*/
|
||||
maxZoom?: number;
|
||||
|
||||
groupType?: string;
|
||||
|
||||
/**
|
||||
* Edge 是否连接到节点中间
|
||||
*/
|
||||
linkCenter?: boolean;
|
||||
}
|
||||
|
||||
// model types (node edge group)
|
||||
export type ModelStyle = Partial<{
|
||||
[key: string]: unknown;
|
||||
@ -108,7 +292,7 @@ export type ModelStyle = Partial<{
|
||||
};
|
||||
// loop edge config
|
||||
loopCfg: LoopConfig;
|
||||
labelCfg?: ILabelConfig;
|
||||
labelCfg: ILabelConfig;
|
||||
}>;
|
||||
|
||||
export type LabelStyle = Partial<{
|
||||
@ -246,6 +430,21 @@ export interface NodeConfig extends ModelConfig {
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface ComboConfig {
|
||||
id: string;
|
||||
parentId?: string;
|
||||
// Combo 类型，默认 rect，值为定义的 combo 的名称
|
||||
type: string;
|
||||
// Combo 标题
|
||||
title: string | LabelStyle;
|
||||
style: ShapeStyle;
|
||||
stateStyles: {
|
||||
[key: string]: ShapeStyle | {
|
||||
[key: string]: ShapeStyle
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export interface EdgeConfig extends ModelConfig {
|
||||
id?: string;
|
||||
source?: string;
|
||||
@ -293,6 +492,7 @@ export interface GraphData {
|
||||
nodes?: NodeConfig[];
|
||||
edges?: EdgeConfig[];
|
||||
groups?: GroupConfig[];
|
||||
combos?: ComboConfig[];
|
||||
}
|
||||
|
||||
export interface TreeGraphData {
|
||||
@ -398,10 +598,10 @@ export interface IG6GraphEvent extends GraphEvent {
|
||||
target: Item & Canvas;
|
||||
}
|
||||
|
||||
// Node Edge 实例或ID
|
||||
export type Item = INode | IEdge;
|
||||
// Node Edge Combo 实例
|
||||
export type Item = INode | IEdge | ICombo;
|
||||
|
||||
export type ITEM_TYPE = 'node' | 'edge' | 'group';
|
||||
export type ITEM_TYPE = 'node' | 'edge' | 'combo' | 'group';
|
||||
|
||||
export type NodeIdxMap = {
|
||||
[key: string]: number;
|
||||
@ -416,8 +616,3 @@ export interface ViewPortEventParam {
|
||||
export interface Indexable<T> {
|
||||
[key: string]: T;
|
||||
}
|
||||
|
||||
export interface LayoutConfig {
|
||||
type?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ModeController } from '../../../../src/graph/controller';
|
||||
import Graph from '../../../../src/graph/graph';
|
||||
import { GraphOptions, IGraph, IModeOption } from '../../../../src/interface/graph';
|
||||
import { GraphOptions, IModeOption } from '../../../../src/types'
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.id = 'graph-spec';
|
||||
|
||||
@ -91,7 +91,7 @@ describe('graph', () => {
|
||||
).toBe(true);
|
||||
|
||||
const children = inst.get('group').get('children');
|
||||
expect(children.length).toBe(4);
|
||||
expect(children.length).toBe(5);
|
||||
expect(children[1].get('className')).toEqual('edge-container');
|
||||
expect(children[0].get('className')).toEqual('custom-group-container');
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@ describe('graph', () => {
|
||||
it('invalid container', () => {
|
||||
expect(() => {
|
||||
// eslint-disable-next-line no-new
|
||||
new Graph({} as any);
|
||||
new Graph({} as any);
|
||||
}).toThrowError('invalid container');
|
||||
});
|
||||
|
||||
@ -94,7 +94,7 @@ describe('graph', () => {
|
||||
).toBe(true);
|
||||
|
||||
const children = inst.get('group').get('children');
|
||||
expect(children.length).toBe(4);
|
||||
expect(children.length).toBe(5);
|
||||
expect(children[1].get('className')).toEqual('edge-container');
|
||||
expect(children[0].get('className')).toEqual('custom-group-container');
|
||||
|
||||
@ -1319,7 +1319,7 @@ describe('behaviors', () => {
|
||||
graph.emit('node:click', { item: item2 });
|
||||
expect(itemKeyShape.attr('fill')).toBe('#f00');
|
||||
expect(item2KeyShape.attr('fill')).toBe('#f00');
|
||||
|
||||
|
||||
graph.emit('canvas:click');
|
||||
expect(itemKeyShape.attr('fill')).toBe('#C6E5FF');
|
||||
expect(item2KeyShape.attr('fill')).toBe('#C6E5FF');
|
||||
@ -1357,16 +1357,16 @@ describe('behaviors', () => {
|
||||
expect(evt.selectedItems.nodes.length).toBe(0);
|
||||
});
|
||||
|
||||
graph.emit('canvas:click', { })
|
||||
graph.emit('canvas:click', {})
|
||||
expect(itemKeyShape.attr('fill')).toBe('#C6E5FF');
|
||||
expect(item2KeyShape.attr('fill')).toBe('#C6E5FF');
|
||||
});
|
||||
|
||||
it('drag-node', () => {
|
||||
graph.emit('node:dragstart', { item, target: item, x: 0, y: 0});
|
||||
graph.emit('node:drag', { item, target: item, x: 50, y: 150});
|
||||
graph.emit('node:drag', { item, target: item, x: 50, y: 250});
|
||||
graph.emit('node:dragend', { item, target: item, x: 50, y: 250});
|
||||
graph.emit('node:dragstart', { item, target: item, x: 0, y: 0 });
|
||||
graph.emit('node:drag', { item, target: item, x: 50, y: 150 });
|
||||
graph.emit('node:drag', { item, target: item, x: 50, y: 250 });
|
||||
graph.emit('node:dragend', { item, target: item, x: 50, y: 250 });
|
||||
expect(item.getModel().x).toBe(100);
|
||||
expect(item.getModel().y).toBe(300);
|
||||
const edge = graph.getEdges()[0];
|
||||
@ -1377,9 +1377,9 @@ describe('behaviors', () => {
|
||||
const item2 = graph.getNodes()[1];
|
||||
graph.setItemState(item, 'selected', true);
|
||||
graph.setItemState(item2, 'selected', true);
|
||||
graph.emit('node:dragstart', { item, target: item, x: 0, y: 0});
|
||||
graph.emit('node:drag', { item, target: item, x: 50, y: 50});
|
||||
graph.emit('node:dragend', { item, target: item, x: 50, y: 50});
|
||||
graph.emit('node:dragstart', { item, target: item, x: 0, y: 0 });
|
||||
graph.emit('node:drag', { item, target: item, x: 50, y: 50 });
|
||||
graph.emit('node:dragend', { item, target: item, x: 50, y: 50 });
|
||||
expect(item.getModel().x).toBe(150);
|
||||
expect(item.getModel().y).toBe(350);
|
||||
expect(item2.getModel().x).toBe(130);
|
||||
@ -1629,7 +1629,7 @@ describe('layouts', () => {
|
||||
});
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
|
||||
|
||||
graph.updateLayout({
|
||||
type: 'force'
|
||||
});
|
||||
@ -1653,11 +1653,11 @@ describe('layouts', () => {
|
||||
node.label = node.id;
|
||||
});
|
||||
const subdata = {
|
||||
nodes: [ data.nodes[0], data.nodes[1], data.nodes[2] ],
|
||||
edges: [ data.edges[0], data.edges[1] ]
|
||||
nodes: [data.nodes[0], data.nodes[1], data.nodes[2]],
|
||||
edges: [data.edges[0], data.edges[1]]
|
||||
};
|
||||
const gridLayout = new Layout['circular']({
|
||||
center: [ 250, 250 ]
|
||||
center: [250, 250]
|
||||
});
|
||||
gridLayout.init(subdata);
|
||||
gridLayout.execute();
|
||||
@ -1762,7 +1762,7 @@ describe('built-in items', () => {
|
||||
],
|
||||
};
|
||||
data.nodes.forEach((node: any, i) => {
|
||||
node.label = `node-${i+1}`
|
||||
node.label = `node-${i + 1}`
|
||||
});
|
||||
|
||||
const graph = new Graph({
|
||||
@ -1864,13 +1864,13 @@ describe('built-in items', () => {
|
||||
|
||||
const polyline = graph.getEdges()[7];
|
||||
graph.updateItem(polyline.getSource(), {
|
||||
anchorPoints: [[ 0, 1 ]]
|
||||
anchorPoints: [[0, 1]]
|
||||
});
|
||||
graph.updateItem(polyline.getTarget(), {
|
||||
anchorPoints: [[ 1, 0.5 ]]
|
||||
anchorPoints: [[1, 0.5]]
|
||||
});
|
||||
graph.updateItem(polyline, {
|
||||
controlPoints: [ { x: 315, y: 300 } ],
|
||||
controlPoints: [{ x: 315, y: 300 }],
|
||||
sourceAnchor: 0,
|
||||
targetAnchor: 0,
|
||||
style: {
|
||||
@ -2062,7 +2062,7 @@ describe('plugins', () => {
|
||||
setTimeout(() => {
|
||||
const minimapGroup = minimap2.get('canvas').get('children')[0];
|
||||
expect(minimapGroup.get('children').length).toBe(10);
|
||||
|
||||
|
||||
const viewport = minimap2.get('viewport');
|
||||
expect(viewport.style.width).toBe('99.3377px');
|
||||
expect(viewport.style.height).toBe('99.3377px');
|
||||
@ -2097,7 +2097,7 @@ describe('plugins', () => {
|
||||
setTimeout(() => {
|
||||
const minimapGroup = minimap.get('canvas').get('children')[0];
|
||||
expect(minimapGroup.get('children').length).toBe(10);
|
||||
|
||||
|
||||
const viewport = minimap.get('viewport');
|
||||
|
||||
expect(viewport.style.width).toBe('99.6678px');
|
||||
@ -2506,7 +2506,7 @@ describe('plugins', () => {
|
||||
graph.data(bundlingData);
|
||||
graph.render();
|
||||
bundling.bundling(bundlingData);
|
||||
|
||||
|
||||
graph.destroy();
|
||||
});
|
||||
|
||||
@ -2542,17 +2542,17 @@ describe('plugins', () => {
|
||||
conextMenuContainer.style.left = `${evt.x + 20}px`;
|
||||
conextMenuContainer.style.top = `${evt.y}px`;
|
||||
});
|
||||
|
||||
|
||||
graph.on('node:mouseleave', () => {
|
||||
conextMenuContainer.style.left = '-150px';
|
||||
});
|
||||
|
||||
|
||||
const item = graph.getNodes()[1];
|
||||
graph.emit('node:contextmenu', {
|
||||
graph.emit('node:contextmenu', {
|
||||
x: item.getModel().x,
|
||||
y: item.getModel().y
|
||||
});
|
||||
|
||||
|
||||
graph.destroy();
|
||||
});
|
||||
it('grid', () => {
|
||||
@ -2569,7 +2569,7 @@ describe('plugins', () => {
|
||||
});
|
||||
graph.data(data2);
|
||||
graph.render();
|
||||
|
||||
|
||||
const gridDom = document.getElementsByClassName('g6-grid')[0] as HTMLElement;
|
||||
expect(gridDom).not.toBe(undefined);
|
||||
const minZoom = graph.get('minZoom');
|
||||
@ -2636,10 +2636,10 @@ describe('custom group', () => {
|
||||
height: 500,
|
||||
renderer: 'svg',
|
||||
modes: {
|
||||
default: [ {
|
||||
default: [{
|
||||
type: 'collapse-expand-group',
|
||||
trigger: 'click'
|
||||
}, 'drag-node-with-group', 'drag-group' ],
|
||||
}, 'drag-node-with-group', 'drag-group'],
|
||||
},
|
||||
});
|
||||
|
||||
@ -2737,7 +2737,7 @@ describe('custom group', () => {
|
||||
expect(delegateGroup.get('children').length).toBe(1);
|
||||
expect(node3.getModel().x).toBe(node3OriX);
|
||||
expect(node3.getModel().y).toBe(node3OriY);
|
||||
|
||||
|
||||
graph.emit('node:dragend', {
|
||||
target: node3,
|
||||
item: node3,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user