Skip to content

Commit c05c7b9

Browse files
author
fanyang
committed
docs: 官网基础模块 - 实例&节点页优化
- 1. 补充节点properties属性demo - 2. 优化和修正概念解释 - 3. 添加项目模块命名空间,可以单独往某个模块添加依赖 - 4. 矩形、椭圆、多边形、菱形、圆可在properties.style设置样式属性
1 parent d7bc3b0 commit c05c7b9

File tree

30 files changed

+408
-139
lines changed

30 files changed

+408
-139
lines changed

‎examples/demo.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,14 @@
1111

1212
<link rel="stylesheet" href="../packages/core/dist/index.css" />
1313
</head>
14-
<body>
14+
<body
15+
style="
16+
display: flex;
17+
height: 100vh;
18+
justify-content: center;
19+
align-items: center;
20+
"
21+
>
1522
<!-- 创建容器 -->
1623
<div id="container"></div>
1724
<script src="../packages/core/dist/index.min.js"></script>
@@ -25,7 +32,7 @@
2532
id: '21',
2633
type: 'rect',
2734
x: 100,
28-
y: 200,
35+
y: 100,
2936
text: 'rect node',
3037
},
3138
{

‎examples/feature-examples/src/pages/graph/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ const data = {
8888
properties: {
8989
width: 80,
9090
height: 120,
91+
style: {
92+
radius: 20,
93+
},
9194
},
9295
},
9396
{

‎package.json

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,5 +133,14 @@
133133
"engines": {
134134
"node": ">=16.0.0",
135135
"pnpm": ">=9.0.0"
136-
}
136+
},
137+
"workspaces": [
138+
"examples",
139+
"packages/core",
140+
"packages/engine",
141+
"packages/extension",
142+
"packages/react-node-registry",
143+
"packages/vue-node-registry",
144+
"sites/docs"
145+
]
137146
}

‎packages/core/src/event/eventEmitter.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default class EventEmitter {
7777
emit(evts: string, eventArgs: EventCallback) {
7878
evts?.split(',').forEach((evt) => {
7979
const events = this._events[evt] || []
80-
// TODO: 这是什么？？？
80+
// TODO: 这是什么？？？ +1
8181
const wildcardEvents = this._events[WILDCARD] || []
8282
// 实际的处理 emit 方法
8383
const doEmit = (es: EventType[]) => {

‎packages/core/src/model/node/CircleNodeModel.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,12 @@ export class CircleNodeModel extends BaseNodeModel {
4141
setAttributes() {
4242
super.setAttributes()
4343

44-
const { r } = this.properties
44+
const { r, style } = this.properties
4545
if (r) {
4646
this.r = r
4747
}
48+
// style 需挂载到实例上: 可以通过properties设置每个节点样式属性
49+
if (style) this.style = cloneDeep(style)
4850
}
4951

5052
getNodeStyle() {

‎packages/core/src/model/node/DiamondNodeModel.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@ export class DiamondNodeModel extends BaseNodeModel {
3737
setAttributes() {
3838
super.setAttributes()
3939

40-
const { rx, ry } = this.properties
40+
const { rx, ry, style } = this.properties
4141
if (rx) {
4242
this.rx = rx
4343
}
4444
if (ry) {
4545
this.ry = ry
4646
}
47+
// style 需挂载到实例上: 可以通过properties设置每个节点样式属性
48+
if (style) this.style = cloneDeep(style)
4749
}
4850

4951
getNodeStyle() {

‎packages/core/src/model/node/EllipseNodeModel.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,15 @@ export class EllipseNodeModel extends BaseNodeModel {
3535
setAttributes() {
3636
super.setAttributes()
3737

38-
const { rx, ry } = this.properties
38+
const { rx, ry, style } = this.properties
3939
if (rx) {
4040
this.rx = rx
4141
}
4242
if (ry) {
4343
this.ry = ry
4444
}
45+
// style 需挂载到实例上: 可以通过properties设置每个节点样式属性
46+
if (style) this.style = cloneDeep(style)
4547
}
4648

4749
getNodeStyle() {

‎packages/core/src/model/node/PolygonNodeModel.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export class PolygonNodeModel extends BaseNodeModel {
4848
setAttributes() {
4949
super.setAttributes()
5050

51-
const { points, width, height } = this.properties
51+
const { points, width, height, style } = this.properties
5252
// DONE: 如果设置了 points，又设置了节点的宽高，则需要做如下操作
5353
// 1. 将 points 的位置置零，即将图形向原点移动（找到 points 中 x,y 的最小值，所有坐标值减掉该值）
5454
// 2. 按宽高的比例重新计算最新的 points
@@ -57,6 +57,8 @@ export class PolygonNodeModel extends BaseNodeModel {
5757
// }
5858
const nextPoints = points || this.points
5959
this.points = normalizePolygon(nextPoints, width, height)
60+
// style 需挂载到实例上: 可以通过properties设置每个节点样式属性
61+
if (style) this.style = cloneDeep(style)
6062
}
6163

6264
getNodeStyle() {

‎packages/core/src/model/node/RectNodeModel.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,22 @@ export class RectNodeModel extends BaseNodeModel {
2121

2222
constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
2323
super(data, graphModel)
24-
this.properties = data.properties || {}
2524

25+
// Todo：类字段初始化会覆盖 super、setAttributes 中设置的属性
26+
this.properties = data.properties || {}
2627
this.setAttributes()
2728
}
2829

2930
setAttributes() {
3031
super.setAttributes()
3132

32-
const { width, height } = this.properties
33+
const { width, height, style } = this.properties
3334
if (width) this.width = width
3435
if (height) this.height = height
36+
// style 需挂载到实例上: 可以通过properties设置每个节点样式属性
37+
if (style) this.style = cloneDeep(style)
38+
// 矩形特有
39+
if (style?.radius) this.radius = style.radius
3540
}
3641

3742
getDefaultAnchor() {

‎sites/docs/docs/api/index.en-US.md

Lines changed: 88 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,37 +17,38 @@ table td:first-of-type {
1717

1818
All node instance operations on the flowchart, as well as events, and behavioral listening are performed on the `LogicFlow` instance.
1919

20-
`LogicFlow` configuration items: [constructor](detail/constructor)
20+
`LogicFlow` configuration items: [constructor](./detail/constructor.en-US.md)
2121

2222
## method
2323

2424
### Register Related
2525

2626
| Option | Description |
2727
|:----------------------|-------------------------|
28-
| [register](detail#register) | Register custom nodes, edges. |
29-
| [batchRegister](detail#batchregister) | Batch register. |
28+
| [register](./detail/index.en-US.md#register) | Register custom nodes, edges. |
29+
| [batchRegister](./detail/index.en-US.md#batchregister) | Batch register. |
3030

3131
### Node Related
3232

3333
| Option | Description |
3434
|:-----------------------|-------------------------|
35-
| [addNode](detail#addnode) | Add nodes to the graph. |
36-
| [deleteNode](detail#deletenode) | Deletes a node on the graph, and if there is a line attached to this node, then also deletes the line. |
37-
| [cloneNode](detail#clonenode) | Clone a node. |
38-
| [changeNodeId](detail#changenodeid) | Modify the id of the node, if no new id is passed, one will be created internally automatically. |
39-
| [changeNodeType](detail#changenodetype) | Modify node type. |
40-
| [getNodeModelById](detail#getnodemodelbyid) | Get the `model` of the node |
41-
| [getNodeDataById](detail#getnodedatabyid) | Get the `model` data of a node. |
42-
| [getNodeIncomingEdge](detail#getnodeincomingedge) | Get all the edges that `end` at this node.|
43-
| [getNodeOutgoingEdge](detail#getnodeoutgoingedge) | Get all the edges that `start` at this node. |
44-
| [getNodeIncomingNode](detail#getnodeincomingnode) | Get all parent nodes of the node. |
45-
| [getNodeOutgoingNode](detail#getnodeoutgoingnode) | Get all the next-level nodes of the node. |
35+
| [addNode](./detail/index.en-US.md#addnode) | Add nodes to the graph. |
36+
| [deleteNode](./detail/index.en-US.md#deletenode) | Deletes a node on the graph, and if there is a line attached to this node, then also deletes the line. |
37+
| [cloneNode](./detail/index.en-US.md#clonenode) | Clone a node. |
38+
| [changeNodeId](./detail/index.en-US.md#changenodeid) | Modify the id of the node, if no new id is passed, one will be created internally automatically. |
39+
| [changeNodeType](./detail/index.en-US.md#changenodetype) | Modify node type. |
40+
| [getNodeModelById](./detail/index.en-US.md#getnodemodelbyid) | Get the `model` of the node |
41+
| [getNodeDataById](./detail/index.en-US.md#getnodedatabyid) | Get the `model` data of a node. |
42+
| [getNodeIncomingEdge](./detail/index.en-US.md#getnodeincomingedge) | Get all the edges that `end` at this node.|
43+
| [getNodeOutgoingEdge](./detail/index.en-US.md#getnodeoutgoingedge) | Get all the edges that `start` at this node. |
44+
| [getNodeIncomingNode](./detail/index.en-US.md#getnodeincomingnode) | Get all parent nodes of the node. |
45+
| [getNodeOutgoingNode](./detail/index.en-US.md#getnodeoutgoingnode) | Get all the next-level nodes of the node. |
4646

4747
### Edge Related
4848

4949
| Option | Description |
5050
|:-----------------------|-------------------------|
51+
<<<<<<< HEAD
5152
| [setDefaultEdgeType](detail#setdefaultedgetype) | Set the type of edge, i.e. set the type of linkage drawn directly by the user at the node.|
5253
| [addEdge](detail#addedge) | Create an edge connecting two nodes. |
5354
| [getEdgeDataById](detail#getedgedatabyid) | Get edge data by `id`. |
@@ -58,11 +59,24 @@ All node instance operations on the flowchart, as well as events, and behavioral
5859
| [deleteEdge](detail#deleteedge) | Delete an edge based on its id. |
5960
| [deleteEdgeByNodeId](detail#deleteedgebynodeid) | Deletes an edge of the specified type, based on the start and end points of the edge, and can pass only one of them. |
6061
| [getNodeEdges](detail#getnodeedges) | Get the model of all edges connected by the node. |
62+
=======
63+
| [setDefaultEdgeType](./detail/index.en-US.md#setdefaultedgetype) | Set the type of edge, i.e. set the type of linkage drawn directly by the user at the node.|
64+
| [addEdge](./detail/index.en-US.md#addedge) | Create an edge connecting two nodes. |
65+
| [getEdgeDataById](./detail/index.en-US.md#getedgedatabyid) | Get edge data by `id`. |
66+
| [getEdgeModelById](./detail/index.en-US.md#getedgemodelbyid) | Get the model of the edge based on the its `id`. |
67+
| [getEdgeModels](./detail/index.en-US.md#getedgemodels) | Get the model of the edge that satisfies the condition. |
68+
| [changeEdgeId](./detail/index.en-US.md#changeedgeid) | Modify the edge id. If a new id is not passed, one will be created internally automatically. |
69+
| [changeEdgeType](./detail/index.en-US.md#changeedgetype) | Switch type of the edge. |
70+
| [deleteEdge](./detail/index.en-US.md#deleteedge) | Delete an edge based on its id. |
71+
| [deleteEdgeByNodeId](./detail/index.en-US.md#deleteedgebynodeid) | Deletes an edge of the specified type, based on the start and end points of the edge, and can pass only one of them. |
72+
| [getNodeEdges](./detail/index.en-US.md#getnodeedges) | Get the model of all edges connected by the node. |
73+
>>>>>>> df47bfe0 (docs: 官网基础模块 - 实例&节点页优化)
6174
6275
### Element Related
6376

6477
| Option | Description |
6578
|:-----------------------|-------------------------|
79+
<<<<<<< HEAD
6680
| [addElements](detail#addelements) | Batch add nodes and edges. |
6781
| [selectElementById](detail#selectelementbyid) | Select the graph. |
6882
| [getSelectElements](detail#getselectelements) | Get all elements selected. |
@@ -76,21 +90,43 @@ All node instance operations on the flowchart, as well as events, and behavioral
7690
| [getProperties](detail#getproperties) | Get the custom properties of a node or an edge. |
7791
| [deleteProperty](detail#deleteproperty) | Delete node attributes. |
7892
| [updateAttributes](detail#updateattributes) | Modifies an attribute in the corresponding element model, which is called graphModel inside the method. |
93+
=======
94+
| [addElements](./detail/index.en-US.md#addelements) | Batch add nodes and edges. |
95+
| [selectElementById](./detail/index.en-US.md#selectelementbyid) | Select the graph. |
96+
| [getSelectElements](./detail/index.en-US.md#getselectelements) | Get all elements selected. |
97+
| [clearSelectElements](./detail/index.en-US.md#clearselectelements) | Uncheck all elements. |
98+
| [getModelById](./detail/index.en-US.md#getmodelbyid) | Get the `model` of a node or edge based on its `id`. |
99+
| [getDataById](./detail/index.en-US.md#getdatabyid) | Get the `data` of a node or edge based on its `id`. |
100+
| [deleteElement](./detail/index.en-US.md#deleteelement) | Delete the element by id. |
101+
| [setElementZIndex](./detail/index.en-US.md#setelementzindex) | Set the `zIndex` of the element.|
102+
| [getAreaElement](./detail/index.en-US.md#getareaelement) | Gets all the elements in the specified region, which must be a DOM layer. |
103+
| [setProperties](./detail/index.en-US.md#setproperties) | Set the custom properties of nodes or edges. |
104+
| [getProperties](./detail/index.en-US.md#getproperties) | Get the custom properties of a node or an edge. |
105+
| [deleteProperty](./detail/index.en-US.md#deleteproperty) | Delete node attributes. |
106+
>>>>>>> df47bfe0 (docs: 官网基础模块 - 实例&节点页优化)
79107
80108
### Text Related
81109

82110
| Option | Description |
83111
|:-----------------------|-------------------------|
112+
<<<<<<< HEAD
84113
| [editText](detail#edittext) | Show text editing box for nodes and edges, entering edit mode, equivalent to [graphModel.editText](api/graph-model-api#edittext). |
85114
| [updateText](detail#updatetext) | Update the node or edge text. |
86115
| [updateEditConfig](detail#updateeditconfig) | Update the basic configuration of the flow editor. |
87116
| [getEditConfig](detail#geteditconfig) | Get the basic configuration of the flow editor. |
117+
=======
118+
| [editText](./detail/index.en-US.md#edittext) | Show text editing box for nodes and edges, entering edit mode, equivalent to [graphModel.editText](api/graph-model-api#edittext). |
119+
| [updateText](./detail/index.en-US.md#updatetext) | Update the node or edge text. |
120+
| [updateEditConfig](./detail/index.en-US.md#updateeditconfig) | Update the basic configuration of the flow editor. |
121+
| [getEditConfig](./detail/index.en-US.md#geteditconfig) | Get the basic configuration of the flow editor. |
122+
>>>>>>> df47bfe0 (docs: 官网基础模块 - 实例&节点页优化)
88123
89124
### Graph Related
90125

91126
| Option | Description |
92127
|:-----------------------|-------------------------|
93128
| [setTheme](api/theme-api) | Set the theme. |
129+
<<<<<<< HEAD
94130
| [focusOn](detail#focuson) | Position to the center of the canvas viewport. |
95131
| [resize](detail#resize) | Adjusts the width and height of the canvas, if the width or height is not passed, the width and height of the canvas will be calculated automatically. |
96132
| [toFront](detail#tofront) | Places an element to the top. |
@@ -100,18 +136,35 @@ All node instance operations on the flowchart, as well as events, and behavioral
100136
| [clearData](detail#cleardata) | Clear the canvas. |
101137
| [renderRawData](detail#renderrawdata) | Rendering of the raw graph data. The difference with render is that after using `adapter`, you can use this method if you still want to render the data in logicflow format. |
102138
| [render](detail#render) | Render graph data. |
139+
=======
140+
| [focusOn](./detail/index.en-US.md#focuson) | Position to the center of the canvas viewport. |
141+
| [resize](./detail/index.en-US.md#resize) | Adjusts the width and height of the canvas, if the width or height is not passed, the width and height of the canvas will be calculated automatically. |
142+
| [toFront](./detail/index.en-US.md#tofront) | Places an element to the top. |
143+
| [getPointByClient](./detail/index.en-US.md#getpointbyclient) | Get the coordinates of the event location relative to the top left corner of the canvas. |
144+
| [getGraphData](./detail/index.en-US.md#getgraphdata) | Get flow graphing data. |
145+
| [getGraphRawData](./detail/index.en-US.md#getgraphrawdata) | Get the raw data of the flow graph. The difference with getGraphData is that the data obtained by this method is not affected by the `adapter`. |
146+
| [clearData](./detail/index.en-US.md#cleardata) | Clear the canvas. |
147+
| [renderRawData](./detail/index.en-US.md#renderrawdata) | Rendering of the raw graph data. The difference with render is that after using `adapter`, you can use this method if you still want to render the data in logicflow format. |
148+
| [render](./detail/index.en-US.md#render) | Render graph data. |
149+
>>>>>>> df47bfe0 (docs: 官网基础模块 - 实例&节点页优化)
103150
104151
### History Related
105152

106153
| Option | Description |
107154
|:-----------------------|-------------------------|
155+
<<<<<<< HEAD
108156
| [undo](detail#undo) | History operation - Back to previous step.|
109157
| [redo](detail#redo) | History operation - Resume next.|
158+
=======
159+
| [undo](./detail/index.en-US.md#undo) | History operation - Back to previous step.|
160+
| [redo](./detail/index.en-US.md#redo) | History operation - Resume next.|
161+
>>>>>>> df47bfe0 (docs: 官网基础模块 - 实例&节点页优化)
110162
111163
### Resize Related
112164

113165
| Option | Description |
114166
|:-----------------------|-------------------------|
167+
<<<<<<< HEAD
115168
| [zoom](detail#zoom) | Zoom in or out on the canvas. |
116169
| [resetZoom](detail#resetzoom) | Reset the zoom ratio of the drawing to the default, which is 1. |
117170
| [setZoomMiniSize](detail#setzoomminisize) | Sets the minimum number of times the graph can be scaled when it is reduced. The parameter takes values from 0 to 1. Default 0. |
@@ -123,12 +176,32 @@ All node instance operations on the flowchart, as well as events, and behavioral
123176
| [fitView](detail#fitview) | Reduce the entire flowchart to a size where the entire canvas can be displayed. |
124177
| [openEdgeAnimation](detail#openedgeanimation) | Enable edge animations. |
125178
| [closeEdgeAnimation](detail#closeedgeanimation) | Disable edge animations. |
179+
=======
180+
| [zoom](./detail/index.en-US.md#zoom) | Zoom in or out on the canvas. |
181+
| [resetZoom](./detail/index.en-US.md#resetzoom) | Reset the zoom ratio of the drawing to the default, which is 1. |
182+
| [setZoomMiniSize](./detail/index.en-US.md#setzoomminisize) | Sets the minimum number of times the graph can be scaled when it is reduced. The parameter takes values from 0 to 1. Default 0. |
183+
| [setZoomMaxSize](./detail/index.en-US.md#setzoommaxsize) | Set the maximum zoom scale when zooming in; default is 16. |
184+
| [getTransform](./detail/index.en-US.md#gettransform) | Get the zoom in/out value of the current canvas.|
185+
| [translate](./detail/index.en-US.md#translate) | Panning graph. |
186+
| [resetTranslate](./detail/index.en-US.md#resettranslate) | Restore the graph to its original position. |
187+
| [translateCenter](./detail/index.en-US.md#translatecenter) | Graphics canvas centering. |
188+
| [fitView](./detail/index.en-US.md#fitview) | Reduce the entire flowchart to a size where the entire canvas can be displayed. |
189+
| [openEdgeAnimation](./detail/index.en-US.md#openedgeanimation) | Enable edge animations. |
190+
| [closeEdgeAnimation](./detail/index.en-US.md#closeedgeanimation) | Disable edge animations. |
191+
>>>>>>> df47bfe0 (docs: 官网基础模块 - 实例&节点页优化)
126192
127193
### Event System Related
128194

129195
| Option | Description |
130196
|:-----------------------|-------------------------|
197+
<<<<<<< HEAD
131198
| [on](detail#on) | Event listener for the graph; see [Events](api/event-center-api) for more events. |
132199
| [off](detail#off) | Remove event listener. |
133200
| [once](detail#once) | Event listener that triggers only once. |
134-
| [emit](detail#emit) | Trigger an event. |
201+
| [emit](detail#emit) | Trigger an event. |
202+
=======
203+
| [on](./detail/index.en-US.md#on) | Event listener for the graph; see [Events](api/event-center-api) for more events. |
204+
| [off](./detail/index.en-US.md#off) | Remove event listener. |
205+
| [once](./detail/index.en-US.md#once) | Event listener that triggers only once. |
206+
| [emit](./detail/index.en-US.md#emit) | Trigger an event. |
207+
>>>>>>> df47bfe0 (docs: 官网基础模块 - 实例&节点页优化)

‎sites/docs/docs/api/index.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ table td:first-of-type {
7575
| [setProperties](./detail/index.md#setproperties) | 设置节点或者边的自定义属性。 |
7676
| [getProperties](./detail/index.md#getproperties) | 获取节点或者边的自定义属性。 |
7777
| [deleteProperty](./detail/index.md#deleteproperty) | 删除节点属性。 |
78-
| [updateAttributes](./detail/index.md#updateattributes) | 修改对应元素 `model` 中的属性。 |
7978

8079
### Text 相关
8180

0 commit comments

Comments
 (0)