Skip to content

Commit d2f1d30

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:graph): support standalone component (#8251)
1 parent 208652c commit d2f1d30

12 files changed

+181
-164
lines changed

‎components/graph/doc/index.en-US.md

Lines changed: 77 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { NzGraphModule } from 'ng-zorro-antd/graph';
2626
### Import Style
2727

2828
```less
29-
@import "node_modules/ng-zorro-antd/graph/style/entry.less";
29+
@import 'node_modules/ng-zorro-antd/graph/style/entry.less';
3030
```
3131

3232
## API
@@ -37,96 +37,97 @@ Dependencies:
3737
npm install dagre-compound dagre d3-transition d3-zoom d3-selection d3-shape d3-drag @types/d3
3838
```
3939

40-
### nz-graph
41-
| Parameter | Description | Type | Default |
42-
| --- | --- | --- | --- |
43-
| `[nzGraphData]` | Data source | `NzGraphData(data: NzGraphDataDef?)` | `` |
44-
| `[nzRankDirection]` | Graph Direction | `TB` \| `BT` \| `LR` \| `RL` | `LR` |
45-
| `[nzAutoSize]` | Whether to automatically adjust the height of the node, the default equal height | `boolean` | `false` |
46-
| `[nzGraphLayoutConfig]` | Global config of graph | `NzGraphLayoutConfig` | `` |
40+
### nz-graph:standalone
41+
42+
| Parameter | Description | Type | Default |
43+
| ----------------------- | -------------------------------------------------------------------------------- | ------------------------------------ | ------- |
44+
| `[nzGraphData]` | Data source | `NzGraphData(data: NzGraphDataDef?)` | `` |
45+
| `[nzRankDirection]` | Graph Direction | `TB` \| `BT` \| `LR` \| `RL` | `LR` |
46+
| `[nzAutoSize]` | Whether to automatically adjust the height of the node, the default equal height | `boolean` | `false` |
47+
| `[nzGraphLayoutConfig]` | Global config of graph | `NzGraphLayoutConfig` | `` |
4748

4849
#### Methods
4950

50-
| Method | Description |
51-
| --- | --- |
51+
| Method | Description |
52+
| ------------- | ----------------------------------------------------------------------- |
5253
| `fitCenter()` | Move graph to center(use `nz-graph-zoom` instead if zooming is enabled) |
5354

54-
### [nz-graph-zoom]
55+
### [nz-graph-zoom]:standalone
5556

56-
| Parameter | Description | Type | Default |
57-
| --- | --- | --- | --- |
58-
| `[(nzZoom)]` | Default zoom scale | `number` | `1` |
59-
| `[nzMinZoom]` | Minimum zoom scale | `number` | `0.1` |
60-
| `[nzMaxZoom]` | Maximum zoom scale | `number` | `10` |
61-
| `(nzTransformEvent)` | Event of zooming | `() => NzZoomTransform` | `` |
62-
| `(fitCenter)` | Move graph to center | `() => void` | `void` |
63-
| `(focus)` | Move target node to center | `(e: SVGGElement, duration: number) => void` | `void` |
57+
| Parameter | Description | Type | Default |
58+
| -------------------- | -------------------------- | -------------------------------------------- | ------- |
59+
| `[(nzZoom)]` | Default zoom scale | `number` | `1` |
60+
| `[nzMinZoom]` | Minimum zoom scale | `number` | `0.1` |
61+
| `[nzMaxZoom]` | Maximum zoom scale | `number` | `10` |
62+
| `(nzTransformEvent)` | Event of zooming | `() => NzZoomTransform` | `` |
63+
| `(fitCenter)` | Move graph to center | `() => void` | `void` |
64+
| `(focus)` | Move target node to center | `(e: SVGGElement, duration: number) => void` | `void` |
6465

6566
#### NzGraphData
6667

67-
| Method | Description | Type |
68-
| --- | --- | --- |
69-
| `setData` | set data source | `(data: NzGraphDataDef) => void` |
70-
| `toggle` | toggle group node | `(nodeName: string) => void` |
71-
| `expand` | expand group node | `(nodeName: string) => void` |
72-
| `expandAll` | expand all group nodes | `(nodeName: string) => void` |
73-
| `collapse` | collapse group node | `(nodeName: string) => void` |
74-
| `isExpand` | get if expanded of node | `(nodeName: string) => boolean` |
75-
| `expansionModel` | model of expanded nodes' info | `SelectionModel<string>` |
68+
| Method | Description | Type |
69+
| ---------------- | ----------------------------- | -------------------------------- |
70+
| `setData` | set data source | `(data: NzGraphDataDef) => void` |
71+
| `toggle` | toggle group node | `(nodeName: string) => void` |
72+
| `expand` | expand group node | `(nodeName: string) => void` |
73+
| `expandAll` | expand all group nodes | `(nodeName: string) => void` |
74+
| `collapse` | collapse group node | `(nodeName: string) => void` |
75+
| `isExpand` | get if expanded of node | `(nodeName: string) => boolean` |
76+
| `expansionModel` | model of expanded nodes' info | `SelectionModel<string>` |
7677

7778
### NzGraphLayoutConfig
78-
| Method | Description | Type |
79-
| --- | --- | --- |
80-
| `layout` | graph layout config | `{ nodeSep: number; rankSep: number; edgeSep: number; }` |
81-
| `subScene` | group node config | `{ paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; labelHeight: number; }` |
82-
| `defaultCompoundNode` | group node size | `{ width: number; height: number; maxLabelWidth: number; }` |
83-
| `defaultNode` | default node size | `{ width: number; height: number; labelOffset: number; maxLabelWidth: number; }` |
8479

80+
| Method | Description | Type |
81+
| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- |
82+
| `layout` | graph layout config | `{ nodeSep: number; rankSep: number; edgeSep: number; }` |
83+
| `subScene` | group node config | `{ paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; labelHeight: number; }` |
84+
| `defaultCompoundNode` | group node size | `{ width: number; height: number; maxLabelWidth: number; }` |
85+
| `defaultNode` | default node size | `{ width: number; height: number; labelOffset: number; maxLabelWidth: number; }` |
8586

8687
#### NzGraphDataDef
8788

88-
| Parameter | Description | Type | Default |
89-
| --- | --- | --- | --- |
90-
| `nodes` | nodes | `Array<{ id: number\|string; label?: string; width?: number; height?: number; [key: string]: any; }>` | `[]` |
91-
| `edges` | edges | `Array<{ v: number\|string; w: number\|string; [key: string]: any; }>` | `[]` |
92-
| `compound` | group | `{ [parent: string]: string[]; }` | `null` |
89+
| Parameter | Description | Type | Default |
90+
| ---------- | ----------- | ----------------------------------------------------------------------------------------------------- | ------- |
91+
| `nodes` | nodes | `Array<{ id: number\|string; label?: string; width?: number; height?: number; [key: string]: any; }>` | `[]` |
92+
| `edges` | edges | `Array<{ v: number\|string; w: number\|string; [key: string]: any; }>` | `[]` |
93+
| `compound` | group | `{ [parent: string]: string[]; }` | `null` |
9394

9495
#### NzGraphNode
9596

96-
| Parameter | Description | Type |
97-
| --- | --- | --- |
98-
| `id` | id | `number\|string` |
99-
| `label?` | node content | `string` |
100-
| `name` | node name | `number\|string` |
101-
| `type` | node type(group: 0, node: 1) | `number` |
102-
| `parentNodeName` | parentNode name | `string` |
103-
| `coreBox` | coreBox | `{ width: number; height: number; }` |
104-
| `xOffset` | x-offset | `number` |
105-
| `yOffset` | y-offset | `number` |
106-
| `width` | width | `number` |
107-
| `height` | height | `number` |
108-
| `[key: string]`| user inputs | `any` |
109-
97+
| Parameter | Description | Type |
98+
| ---------------- | ---------------------------- | ------------------------------------ |
99+
| `id` | id | `number\|string` |
100+
| `label?` | node content | `string` |
101+
| `name` | node name | `number\|string` |
102+
| `type` | node type(group: 0, node: 1) | `number` |
103+
| `parentNodeName` | parentNode name | `string` |
104+
| `coreBox` | coreBox | `{ width: number; height: number; }` |
105+
| `xOffset` | x-offset | `number` |
106+
| `yOffset` | y-offset | `number` |
107+
| `width` | width | `number` |
108+
| `height` | height | `number` |
109+
| `[key: string]` | user inputs | `any` |
110110

111111
#### NzGraphEdge
112112

113-
| Parameter | Description | Type |
114-
| --- | --- | --- |
115-
| `id` | id | `string` |
116-
| `v` | source node | `number\|string` |
117-
| `w` | target node | `number\|string` |
118-
| `label?` | edge content | `string` |
119-
| `points` | points | `Array<{ x: number; y: number; }>` |
113+
| Parameter | Description | Type |
114+
| --------- | ------------ | ---------------------------------- |
115+
| `id` | id | `string` |
116+
| `v` | source node | `number\|string` |
117+
| `w` | target node | `number\|string` |
118+
| `label?` | edge content | `string` |
119+
| `points` | points | `Array<{ x: number; y: number; }>` |
120120

121121
#### NzGraphGroupNode
122122

123-
| Parameter | Type |
124-
| --- | --- |
125-
| `expanded` | `boolean` |
126-
| `nodes` | `Array<NzGraphNode\|NzGraphGroupNode>` |
127-
| `edges` | `NzGraphEdge[]` |
123+
| Parameter | Type |
124+
| ---------- | -------------------------------------- |
125+
| `expanded` | `boolean` |
126+
| `nodes` | `Array<NzGraphNode\|NzGraphGroupNode>` |
127+
| `edges` | `NzGraphEdge[]` |
128128

129129
### [nzGraphNode]
130+
130131
Customize the graph node template
131132

132133
```html
@@ -138,6 +139,7 @@ Customize the graph node template
138139
```
139140

140141
### [nzGraphGroupNode]
142+
141143
Customize the graph group-node template
142144

143145
```html
@@ -149,6 +151,7 @@ Customize the graph group-node template
149151
```
150152

151153
### [nzGraphEdge]
154+
152155
Customize the graph edge template
153156

154157
```html
@@ -167,15 +170,16 @@ The Component styles only contain the necessary positional properties and simple
167170

168171
- `.nz-graph` `nz-graph` The `nz-graph` component namespace
169172
- `.nz-graph-nodes` The class name of container covered all nodes
170-
* `.nz-graph-node` The class name of `nz-graph-node`
171-
* `.nz-graph-node-expanded` The class name of expanded node
172-
* `.nz-graph-group-node` The class name of group node
173-
* `.nz-graph-base-node` The class name of leaf(OP) node
173+
- `.nz-graph-node` The class name of `nz-graph-node`
174+
- `.nz-graph-node-expanded` The class name of expanded node
175+
- `.nz-graph-group-node` The class name of group node
176+
- `.nz-graph-base-node` The class name of leaf(OP) node
174177
- `.nz-graph-edges` The class name of container covered edges in the target node
175-
* `.nz-graph-edge` The class name of edge
176-
* `path.nz-graph-edge-line` The class name of svg:path element
177-
* `.nz-graph-edge-text` The class name of svg:text element
178+
- `.nz-graph-edge` The class name of edge
179+
- `path.nz-graph-edge-line` The class name of svg:path element
180+
- `.nz-graph-edge-text` The class name of svg:text element
178181

179182
## More
183+
180184
- [dagre-compound](https://www.npmjs.com/package/dagre-compound): Dagre-based nested layout calculation library
181-
- [SelectionModel](https://github.com/angular/components/blob/master/src/cdk/collections/selection-model.ts)
185+
- [SelectionModel](https://github.com/angular/components/blob/master/src/cdk/collections/selection-model.ts)

0 commit comments

Comments
 (0)