Skip to content

Commit 9edbf9a

Browse files
gaoligaoli
committed
feat: refactor the anchor point of the node
1 parent 0081196 commit 9edbf9a

File tree

26 files changed

+410
-729
lines changed

26 files changed

+410
-729
lines changed

‎examples/component-item-panel/index.tsx

+26-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import GGEditor, { Flow, Item, ItemPanel } from '@/index';
4+
import { GraphMode, AnchorPointState } from '@/common/constants';
45
import data from '../mock/flow.json';
56
import styles from './index.less';
67

@@ -12,7 +13,7 @@ class Index extends React.Component {
1213
<Item
1314
className={styles.item}
1415
model={{
15-
shape: 'circle',
16+
type: 'circle',
1617
size: 100,
1718
label: 'circle',
1819
}}
@@ -27,7 +28,7 @@ class Index extends React.Component {
2728
<Item
2829
className={styles.item}
2930
model={{
30-
shape: 'rect',
31+
type: 'rect',
3132
size: [100, 50],
3233
label: 'rect',
3334
}}
@@ -42,7 +43,7 @@ class Index extends React.Component {
4243
<Item
4344
className={styles.item}
4445
model={{
45-
shape: 'ellipse',
46+
type: 'ellipse',
4647
size: [100, 50],
4748
label: 'ellipse',
4849
}}
@@ -57,7 +58,7 @@ class Index extends React.Component {
5758
<Item
5859
className={styles.item}
5960
model={{
60-
shape: 'diamond',
61+
type: 'diamond',
6162
size: 100,
6263
label: 'diamond',
6364
}}
@@ -72,7 +73,7 @@ class Index extends React.Component {
7273
<Item
7374
className={styles.item}
7475
model={{
75-
shape: 'triangle',
76+
type: 'triangle',
7677
size: 100,
7778
label: 'triangle',
7879
}}
@@ -87,7 +88,7 @@ class Index extends React.Component {
8788
<Item
8889
className={styles.item}
8990
model={{
90-
shape: 'star',
91+
type: 'star',
9192
size: 100,
9293
label: 'star',
9394
}}
@@ -102,7 +103,7 @@ class Index extends React.Component {
102103
<Item
103104
className={styles.item}
104105
model={{
105-
shape: 'image',
106+
type: 'image',
106107
size: 100,
107108
label: 'image',
108109
}}
@@ -117,7 +118,7 @@ class Index extends React.Component {
117118
<Item
118119
className={styles.item}
119120
model={{
120-
shape: 'bizNode',
121+
type: 'bizNode',
121122
size: [112, 66],
122123
label: 'bizNode',
123124
center: 'topLeft',
@@ -136,12 +137,27 @@ class Index extends React.Component {
136137
data={data}
137138
graphConfig={{
138139
defaultNode: {
139-
shape: 'bizNode',
140+
type: 'bizFlowNode',
140141
},
141142
defaultEdge: {
142-
shape: 'bizFlowEdge',
143+
type: 'bizFlowEdge',
143144
},
144145
}}
146+
customModes={(mode, behaviors) => {
147+
if (mode === GraphMode.Default) {
148+
behaviors['drag-add-edge'] = {
149+
type: 'drag-add-edge',
150+
getAnchorPointStateOfSourceNode: (sourceNode, sourceAnchorPoint) => {
151+
return AnchorPointState.Enabled;
152+
},
153+
getAnchorPointStateOfTargetNode: (sourceNode, sourceAnchorPoint, targetNode, targetAnchorPoint) => {
154+
return AnchorPointState.Enabled;
155+
},
156+
};
157+
}
158+
159+
return behaviors;
160+
}}
145161
/>
146162
</GGEditor>
147163
);

‎examples/mock/flow.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
{
1818
"label": "Label",
1919
"source": "0",
20-
"target": "1"
20+
"sourceAnchor": 1,
21+
"target": "1",
22+
"targetAnchor": 0
2123
}
2224
]
2325
}

‎examples/plugin-context-menu/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ class Index extends React.Component {
1414
data={data}
1515
graphConfig={{
1616
defaultNode: {
17-
shape: 'bizNode',
17+
type: 'bizNode',
1818
},
1919
defaultEdge: {
20-
shape: 'bizFlowEdge',
20+
type: 'bizFlowEdge',
2121
},
2222
}}
2323
/>

‎examples/plugin-editable-label/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ class Index extends React.Component {
1313
data={data}
1414
graphConfig={{
1515
defaultNode: {
16-
shape: 'bizNode',
16+
type: 'bizNode',
1717
},
1818
defaultEdge: {
19-
shape: 'bizFlowEdge',
19+
type: 'bizFlowEdge',
2020
},
2121
}}
2222
/>

‎examples/plugin-item-popover/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ class Index extends React.Component {
1515
data={data}
1616
graphConfig={{
1717
defaultNode: {
18-
shape: 'bizNode',
18+
type: 'bizNode',
1919
},
2020
defaultEdge: {
21-
shape: 'bizFlowEdge',
21+
type: 'bizFlowEdge',
2222
},
2323
}}
2424
/>

‎examples/register-dom-node/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Index extends React.Component {
1111
<Flow
1212
className={styles.editorBd}
1313
data={data}
14-
graphConfig={{ renderer: 'svg', defaultNode: { shape: 'customDomNode' } }}
14+
graphConfig={{ renderer: 'svg', defaultNode: { type: 'customDomNode' } }}
1515
/>
1616
<RegisterNode
1717
name="customDomNode"
@@ -44,10 +44,10 @@ class Index extends React.Component {
4444
},
4545
getAnchorPoints() {
4646
return [
47-
[0, 0.5],
48-
[1, 0.5],
4947
[0.5, 0],
5048
[0.5, 1],
49+
[0, 0.5],
50+
[1, 0.5],
5151
];
5252
},
5353
}}

‎examples/register-node/index.tsx

+56-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import GGEditor, { Flow, RegisterNode, EditableLabel } from '@/index';
3+
import GGEditor, { Flow, RegisterNode, EditableLabel, setAnchorPointsState } from '@/index';
44
import data from '../mock/flow.json';
55
import styles from './index.less';
66

77
class Index extends React.Component {
88
render() {
99
return (
1010
<GGEditor className={styles.editor}>
11-
<Flow className={styles.editorBd} data={data} graphConfig={{ defaultNode: { shape: 'customNode' } }} />
11+
<Flow
12+
className={styles.editorBd}
13+
data={data}
14+
// graphConfig={{ defaultNode: { type: 'customNode' } }}
15+
// graphConfig={{ defaultNode: { type: 'customStartNode' } }}
16+
graphConfig={{ defaultNode: { type: 'customInternalNode', size: 50 } }}
17+
/>
1218
<RegisterNode
1319
name="customNode"
1420
config={{
@@ -40,11 +46,58 @@ class Index extends React.Component {
4046
};
4147
},
4248
getAnchorPoints() {
43-
return [[0.5, 1]];
49+
return [
50+
[0.5, 0],
51+
[0.5, 1],
52+
[0, 0.5],
53+
[1, 0.5],
54+
];
4455
},
4556
}}
4657
extend="bizFlowNode"
4758
/>
59+
<RegisterNode
60+
name="customInternalNode"
61+
config={{
62+
setState(name, value, item) {
63+
setAnchorPointsState.call(
64+
this,
65+
name,
66+
value,
67+
item,
68+
(item, anchorPoint) => {
69+
const { width, height } = item.getKeyShape().getBBox();
70+
71+
const [x, y] = anchorPoint;
72+
73+
return {
74+
x: width * x - width / 2,
75+
y: height * y - height / 2,
76+
};
77+
},
78+
(item, anchorPoint) => {
79+
const { width, height } = item.getKeyShape().getBBox();
80+
81+
const [x, y] = anchorPoint;
82+
83+
return {
84+
x: width * x - width / 2,
85+
y: height * y - height / 2,
86+
};
87+
},
88+
);
89+
},
90+
getAnchorPoints() {
91+
return [
92+
[0.5, 0],
93+
[0.5, 1],
94+
[0, 0.5],
95+
[1, 0.5],
96+
];
97+
},
98+
}}
99+
extend="circle"
100+
/>
48101
<EditableLabel />
49102
</GGEditor>
50103
);

‎examples/tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"target": "esnext",
77
"jsx": "react",
88
"noImplicitThis": true,
9+
"strictBindCallApply": true,
910
"baseUrl": "../",
1011
"paths": {
1112
"@/*": ["src/*"]

‎src/common/constants/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export enum ItemType {
1515

1616
export enum ItemState {
1717
Active = 'active',
18+
ActiveAnchorPoints = 'activeAnchorPoints',
1819
Selected = 'selected',
1920
HighLight = 'highLight',
2021
Error = 'error',
@@ -43,6 +44,11 @@ export enum LabelState {
4344
Show = 'show',
4445
}
4546

47+
export enum AnchorPointState {
48+
Enabled = 'enabled',
49+
Disabled = 'disabled',
50+
}
51+
4652
export enum EditorEvent {
4753
/** 调用命令之前触发 */
4854
onBeforeExecuteCommand = 'onBeforeExecuteCommand',

‎src/common/global/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class Global {
2626
/** 组件数据 */
2727
component: {
2828
itemPanel: {
29-
model: NodeModel;
29+
model: Partial<NodeModel>;
3030
delegateShapeClassName: string;
3131
};
3232
} = {

‎src/common/interfaces/index.ts

+8
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import IGGroup from '@antv/g-canvas/lib/group';
1313
import { IShape as IGShape } from '@antv/g-canvas/lib/interfaces';
1414
import { Graph as IGraph, TreeGraph as ITreeGraph } from '@antv/g6';
1515
import {
16+
IPoint,
17+
ShapeStyle as IShapeStyle,
1618
GraphData as IGraphData,
1719
TreeGraphData as ITreeGraphData,
1820
NodeConfig as INodeConfig,
@@ -30,6 +32,12 @@ export interface GGroup extends IGGroup {}
3032
export interface Graph extends IGraph {}
3133
export interface TreeGraph extends ITreeGraph {}
3234

35+
export interface AnchorPoint extends IPoint {
36+
index: number;
37+
}
38+
39+
export interface ShapeStyle extends IShapeStyle {}
40+
3341
export interface FlowData extends IGraphData {}
3442
export interface MindData extends ITreeGraphData {}
3543

‎src/components/Flow/behavior/activeEdge.ts

-50
This file was deleted.

0 commit comments

Comments
 (0)