From da86834fc9d4330b4dd3c61ca5de316a970e0396 Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Tue, 31 Mar 2020 10:34:43 +0800 Subject: [PATCH] fix: resolve conflict --- src/behavior/drag-node-with-group.ts | 4 ++-- src/graph/controller/customGroup.ts | 8 ++++---- src/graph/controller/item.ts | 3 --- src/graph/tree-graph.ts | 2 +- src/shape/edge.ts | 4 ++-- src/shape/edges/polyline.ts | 12 ++++++------ src/shape/node.ts | 6 +++--- src/shape/shapeBase.ts | 8 ++++---- src/types/index.ts | 22 ++++------------------ stories/Shape/component/default-shape.tsx | 5 +++-- stories/Tree/component/file-system.tsx | 5 +++-- 11 files changed, 32 insertions(+), 47 deletions(-) diff --git a/src/behavior/drag-node-with-group.ts b/src/behavior/drag-node-with-group.ts index 257328852f..a80dbd422a 100644 --- a/src/behavior/drag-node-with-group.ts +++ b/src/behavior/drag-node-with-group.ts @@ -1,4 +1,4 @@ -import { IG6GraphEvent, Item, G6Event } from '../types'; +import { IG6GraphEvent, Item, G6Event, NodeConfig } from '../types'; /* * @Author: moyee @@ -167,7 +167,7 @@ export default { const { graph } = this; const { item } = evt; - const model = item.getModel(); + const model = item.getModel() as NodeConfig; // 节点所在的GroupId const { groupId, id } = model; diff --git a/src/graph/controller/customGroup.ts b/src/graph/controller/customGroup.ts index 2ab243ff01..2362132c02 100644 --- a/src/graph/controller/customGroup.ts +++ b/src/graph/controller/customGroup.ts @@ -11,7 +11,7 @@ import ShapeBase from '@antv/g-canvas/lib/shape/base'; import { Point } from '@antv/g-canvas/lib/types'; import deepMix from '@antv/util/lib/deep-mix'; import isString from '@antv/util/lib/is-string'; -import { GraphData, IG6GraphEvent, Item } from '../../types'; +import { GraphData, IG6GraphEvent, Item, NodeConfig } from '../../types'; import { IGraph } from '../../interface/graph'; import { IEdge, INode } from '../../interface/item'; import { traverseTree } from '../../util/graphic'; @@ -634,7 +634,7 @@ export default class CustomGroup { // 隐藏群组中的所有节点 nodesInGroup.forEach(nodeId => { const node = graph.findById(nodeId); - const model = node.getModel(); + const model = node.getModel() as NodeConfig; const { groupId } = model; if (groupId && groupId !== id) { // 存在群组，则隐藏 @@ -812,7 +812,7 @@ export default class CustomGroup { setTimeout(() => { nodesInGroup.forEach(nodeId => { const node = graph.findById(nodeId); - const model = node.getModel(); + const model = node.getModel() as NodeConfig; const { groupId } = model; if (groupId && groupId !== id) { // 存在群组，则显示 @@ -1224,7 +1224,7 @@ export default class CustomGroup { public dynamicChangeGroupSize(evt: IG6GraphEvent, currentGroup: IGroup, keyShape: ShapeBase) { const { item } = evt; - const model = item.getModel(); + const model = item.getModel() as NodeConfig; // 节点所在的GroupId const { groupId } = model; diff --git a/src/graph/controller/item.ts b/src/graph/controller/item.ts index 9c1392ba5c..f7fdc10e8f 100644 --- a/src/graph/controller/item.ts +++ b/src/graph/controller/item.ts @@ -12,9 +12,6 @@ import Combo from '../../item/combo'; import { EdgeConfig, Item, ITEM_TYPE, ModelConfig, NodeConfig, NodeMap, ComboTree, ComboConfig } from '../../types'; import Graph from '../graph'; -import { mix } from '@antv/util'; -import { IGraph } from '../../interface/graph'; -import { IGroup } from '@antv/g-base'; import { IEdge, INode, ICombo } from '../../interface/item'; import { traverseTreeUp, traverseTree, getComboBBox } from '../../util/graphic'; diff --git a/src/graph/tree-graph.ts b/src/graph/tree-graph.ts index 2df8d05de3..4f21980b46 100644 --- a/src/graph/tree-graph.ts +++ b/src/graph/tree-graph.ts @@ -345,7 +345,7 @@ export default class TreeGraph extends Graph implements ITreeGraph { return; } - const parentModel = self.findById(parent).getModel(); + const parentModel = self.findById(parent).getModel() as NodeConfig; const current = self.findById(data.id); diff --git a/src/shape/edge.ts b/src/shape/edge.ts index 99bc6e41b8..fa08d84433 100644 --- a/src/shape/edge.ts +++ b/src/shape/edge.ts @@ -173,7 +173,7 @@ const singleEdge: ShapeOptions = { if (cfg.startPoint!.x === cfg.endPoint!.x && cfg.startPoint!.y === cfg.endPoint!.y) { style.x = cfg.startPoint!.x + offsetX; style.y = cfg.startPoint!.y + offsetY; - style.text = cfg.label; + style.text = cfg.label as string; return style; } @@ -189,7 +189,7 @@ const singleEdge: ShapeOptions = { style.y = offsetStyle.y; style.rotate = offsetStyle.rotate; style.textAlign = this._getTextAlign!(labelPosition as string, offsetStyle.angle as number); - style.text = cfg.label; + style.text = cfg.label as string; return style; }, getLabelBgStyleByPosition( diff --git a/src/shape/edges/polyline.ts b/src/shape/edges/polyline.ts index 68aa88286a..9c2df77b57 100644 --- a/src/shape/edges/polyline.ts +++ b/src/shape/edges/polyline.ts @@ -1,7 +1,7 @@ import { Point } from '@antv/g-base/lib/types'; import Group from '@antv/g-canvas/lib/group'; -import { mix, each, isNumber, isArray, isString } from '@antv/util'; -import { ModelConfig, ShapeStyle } from '../../types'; +import { mix, each, isArray, isString } from '@antv/util'; +import { ShapeStyle, EdgeConfig } from '../../types'; import { pointsToPolygon } from '../../util/path'; import Global from '../../global'; import Shape from '../shape'; @@ -33,7 +33,7 @@ Shape.registerEdge( shapeType: 'polyline', // 文本位置 labelPosition: 'center', - drawShape(cfg: ModelConfig, group: Group) { + drawShape(cfg: EdgeConfig, group: Group) { const shapeStyle = (this as any).getShapeStyle(cfg); const keyShape = group.addShape('path', { className: 'edge-shape', @@ -42,8 +42,8 @@ Shape.registerEdge( }); return keyShape; }, - getShapeStyle(cfg: ModelConfig): ShapeStyle { - const { style: defaultStyle } = this.options as ModelConfig; + getShapeStyle(cfg: EdgeConfig): ShapeStyle { + const { style: defaultStyle } = this.options as EdgeConfig; const strokeStyle: ShapeStyle = { stroke: cfg.color, @@ -71,7 +71,7 @@ Shape.registerEdge( routeCfg = { source, target, offset: style.offset, radius: style.radius }; } let path = (this as any).getPath(points, routeCfg); - if ((isArray(path) && path.length <=1) || (isString(path) && path.indexOf('L') === -1)) { + if ((isArray(path) && path.length <= 1) || (isString(path) && path.indexOf('L') === -1)) { path = 'M0 0, L0 0'; } if (isNaN(startPoint.x) || isNaN(startPoint.y) || isNaN(endPoint.x) || isNaN(endPoint.y)) { diff --git a/src/shape/node.ts b/src/shape/node.ts index 6c1aa559b8..ece25dfed2 100644 --- a/src/shape/node.ts +++ b/src/shape/node.ts @@ -53,7 +53,7 @@ const singleNode: ShapeOptions = { // 默认的位置（最可能的情形），所以放在最上面 if (labelPosition === 'center') { - return { x: 0, y: 0, text: cfg!.label }; + return { x: 0, y: 0, text: cfg!.label as string }; } let { offset } = labelCfg; @@ -330,9 +330,9 @@ const singleNode: ShapeOptions = { (this as any).updateIcon(cfg, item); } }, - updateIcon(cfg: ModelConfig, item: Item) { + updateIcon(cfg: NodeConfig, item: Item) { const group = item.getContainer(); - const { icon: defaultIcon } = this.options as ModelConfig; + const { icon: defaultIcon } = this.options as NodeConfig; const icon = mix({}, defaultIcon, cfg.icon); const { show } = cfg.icon ? cfg.icon : { show: undefined }; const iconShape = group.find(element => element.get('className') === `${this.type}-icon`); diff --git a/src/shape/shapeBase.ts b/src/shape/shapeBase.ts index 8dc9d6eaeb..f6146a3fef 100644 --- a/src/shape/shapeBase.ts +++ b/src/shape/shapeBase.ts @@ -5,10 +5,10 @@ import GGroup from '@antv/g-canvas/lib/group'; import { IShape, IElement } from '@antv/g-canvas/lib/interfaces'; import { ShapeOptions, ILabelConfig } from '../interface/shape'; -import { IPoint, Item, LabelStyle, ShapeStyle, ModelConfig } from '../types'; +import { IPoint, Item, LabelStyle, ShapeStyle, ModelConfig, EdgeConfig } from '../types'; import Global from '../global'; import { mat3, transform } from '@antv/matrix-util'; -import { deepMix, each, mix, isString, isBoolean, isPlainObject, clone, indexOf } from '@antv/util'; +import { deepMix, each, mix, isBoolean, isPlainObject, clone } from '@antv/util'; const CLS_SHAPE_SUFFIX = '-shape'; const CLS_LABEL_SUFFIX = '-label'; @@ -125,7 +125,7 @@ export const shapeBase: ShapeOptions = { return rect; }, getLabelStyleByPosition(cfg: ModelConfig, labelCfg?: ILabelConfig, group?: GGroup): LabelStyle { - return { text: cfg.label }; + return { text: cfg.label as string }; }, getLabelBgStyleByPosition( label: IElement, @@ -415,7 +415,7 @@ export const shapeBase: ShapeOptions = { * @param {Object} cfg 节点、边的配置项 * @return {Array|null} 控制点的数组,如果为 null，则没有控制点 */ - getControlPoints(cfg: ModelConfig): IPoint[] | undefined { + getControlPoints(cfg: EdgeConfig): IPoint[] | undefined { return cfg.controlPoints; }, /** diff --git a/src/types/index.ts b/src/types/index.ts index 5b73cd480d..1c4c020b5c 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -334,6 +334,7 @@ export interface ModelConfig extends ModelStyle { export interface NodeConfig extends ModelConfig { id: string; groupId?: string; + comboId?: string; children?: TreeGraphData[]; description?: string; descriptionCfg?: { @@ -416,21 +417,6 @@ export interface ComboConfig extends ModelConfig { }> } -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; @@ -442,8 +428,8 @@ export interface EdgeConfig extends ModelConfig { controlPoints?: IPoint[]; curveOffset?: number; // loop edge config - loopCfg: LoopConfig; - labelCfg: ILabelConfig; + loopCfg?: LoopConfig; + labelCfg?: ILabelConfig; } export type EdgeData = EdgeConfig & { @@ -506,7 +492,7 @@ export interface TreeGraphData { export interface ComboTree { id: string; - label?: string; + label?: string | LabelStyle; children?: ComboTree[]; depth?: number; parentId?: string; diff --git a/stories/Shape/component/default-shape.tsx b/stories/Shape/component/default-shape.tsx index e305eff171..f7f23aaef5 100644 --- a/stories/Shape/component/default-shape.tsx +++ b/stories/Shape/component/default-shape.tsx @@ -1,13 +1,14 @@ import React, { useEffect } from 'react'; import G6 from '../../../src'; import { IGraph } from '../../../src/interface/graph'; +import { NodeConfig, EdgeConfig } from '../../../src/types'; let graph: IGraph = null; G6.registerNode( 'file-node', { - draw(cfg, group) { + draw(cfg: NodeConfig, group) { const keyShape = group.addShape('rect', { attrs: { x: cfg.x - 4, @@ -69,7 +70,7 @@ G6.registerNode( G6.registerEdge( 'step-line', { - getControlPoints: function getControlPoints(cfg) { + getControlPoints: function getControlPoints(cfg: EdgeConfig) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; return [ diff --git a/stories/Tree/component/file-system.tsx b/stories/Tree/component/file-system.tsx index efb935e061..14f74581ff 100644 --- a/stories/Tree/component/file-system.tsx +++ b/stories/Tree/component/file-system.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from 'react'; import G6 from '../../../src'; import { IGraph } from '../../../src/interface/graph'; +import { NodeConfig, EdgeConfig } from '../../../src/types'; let graph: IGraph = null; @@ -9,7 +10,7 @@ const MoveViewPort = () => { useEffect(() => { if (!graph) { G6.registerNode('file-node', { - draw: function draw(cfg, group) { + draw: function draw(cfg: NodeConfig, group) { const keyShape = group.addShape('rect', { attrs: { x: cfg.x - 4, @@ -60,7 +61,7 @@ const MoveViewPort = () => { G6.registerEdge( 'step-line', { - getControlPoints: function getControlPoints(cfg) { + getControlPoints: function getControlPoints(cfg: EdgeConfig) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; return [