test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

doc: update minimap plugin docs.

Browse Source
This commit is contained in:
Yanyan-Wang 2020-08-18 15:08:47 +08:00 committed by Yanyan Wang
parent e3a9ba0ec3
commit 354cf78402
7 changed files with 164 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -3,7 +3,10 @@
#### 3.6.2
- fix: polyline with rect and radius=0 problem;
- chore: update hierarchy to solve the children ordering problem for indented tree layout.
- chore: update hierarchy to solve the children ordering problem for indented tree layout;
- feat: fisheye with dragging;
- feat: fisheye with scaling range and d;
- chore: extract the public calculation to enhance the performance of fisheye.
#### 3.6.1-beta

40
docs/api/Plugins.en.md
View File

@ -534,5 +534,45 @@ Fisheye is designed for focus_context exploration, it keeps the context and the
| r | Number | false | 300 | The radius of the focus area |
| delegateStyle | Object | false | { stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' } | The style of the lens's delegate |
| showLabel | Boolean | false | false | If the label is hidden, whether to show the label of nodes inside the focus area |
| scaleRByWheel | Boolean | false | Whether to enable scaling the magnifying radius by mouse wheeling |
| maxR | Number | The height of the graph | The maximum radius scaled by the wheel |
| minR | Number | 0.05 * The height of the graph | The minimum radius scaled by the wheel |
| maxD | Number | 5 | when `trigger` is `'mousemove'` or `'click'`, minimap allow users to adjust the magnifying coefficient `d` by dragging left / right on the lens. `maxD` is the maximum magnifying coefficient that limits this interaction. The suggested range for `maxD` is [0, 5]. Note that updating the configurations by `minimap.updateParam` will not be limited by `maxD` |
| minD | Number | 0 | when `trigger` is `'mousemove'` or `'click'`, minimap allow users to adjust the magnifying coefficient `d` by dragging left / right on the lens. `minD` is the minimum magnifying coefficient that limits this interaction. The suggested range for `minD` is [0, 5]. Note that updating the configurations by `minimap.updateParam` will not be limited by `minD` |
### Member Function
#### updateParams(cfg)
Update partial of the configurations of the minimap instance, including `trigger`, `d`, `r`, `maxR`, `minR`, `maxD`, and `minD`. E.g.
```
const fisheye = new G6.Fisheye({
trigger: 'mousemove'
});
... // Other operations
fisheye.updateParams({
d: 2,
r: 500,
// ...
})
```
### Usage
```
const fisheye = new G6.Fisheye({
trigger: 'mousemove',
d: 1.5,
r: 300,
delegateStyle: clone(lensDelegateStyle),
showLabel: false
});
const graph = new G6.Graph({
//... Other graph configurations
plugins: [fisheye], // configuring fisheye plugin
});
```

28
docs/api/Plugins.zh.md
View File

@ -538,11 +538,37 @@ Fisheye 鱼眼放大镜是为 focus+context 的探索场景设计的，它能够
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| trigger | 'mousemove' / 'click' | 'mousemove' | 放大镜的触发事件 |
| trigger | 'mousemove' / 'click' / 'drag' | 'mousemove' | 放大镜的触发事件 |
| d | Number | 1.5 | 放大系数，数值越大，放大程度越大 |
| r | Number | 300 | 放大区域的范围半径 |
| delegateStyle | Object | { stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' } | 放大镜蒙层样式 |
| showLabel | Boolean | false | 若 label 默认被隐藏，是否在关注区域内展示 label |
| scaleRByWheel | Boolean | false | 是否在放大镜上使用滚轮调整缩放范围 |
| maxR | Number | 图的高度 | 滚轮调整缩放范围的最大半径 |
| minR | Number | 0.05 * 图的高度 | 滚轮调整缩放范围的最小半径 |
| maxD | Number | 5 | `trigger` 为 `'mousemove'` / `'click'` 时，可以在放大镜上左右拖拽调整缩放系数。maxD 指定了这种调整方式的最大缩放系数，建议取值范围 [0, 5]。若使用 `minimap.updateParam` 更新参数不受该系数限制 |
| minD | Number | 0 | `trigger` 为 `'mousemove'` / `'click'` 时，可以在放大镜上左右拖拽调整缩放系数。maxD 指定了这种调整方式的最小缩放系数，建议取值范围 [0, 5]。若使用 `minimap.updateParam` 更新参数不受该系数限制 |
### 成员函数
#### updateParams(cfg)
用于更新该 minimap 的部分配置项，包括 `trigger`，`d`，`r`，`maxR`，`minR`，`maxD`，`minD`。例如：
```
const fisheye = new G6.Fisheye({
trigger: 'mousemove'
});
... // 其他操作
fisheye.updateParams({
d: 2,
r: 500,
// ...
})
```
### 用法

29
docs/manual/middle/Plugins.en.md
View File

@ -477,6 +477,31 @@ Fisheye is designed for focus_context exploration, it keeps the context and the
| r | Number | false | 300 | The radius of the focus area |
| delegateStyle | Object | false | { stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' } | The style of the lens's delegate |
| showLabel | Boolean | false | false | If the label is hidden, whether to show the label of nodes inside the focus area |
| scaleRByWheel | Boolean | false | Whether to enable scaling the magnifying radius by mouse wheeling |
| maxR | Number | The height of the graph | The maximum radius scaled by the wheel |
| minR | Number | 0.05 * The height of the graph | The minimum radius scaled by the wheel |
| maxD | Number | 5 | when `trigger` is `'mousemove'` or `'click'`, minimap allow users to adjust the magnifying coefficient `d` by dragging left / right on the lens. `maxD` is the maximum magnifying coefficient that limits this interaction. The suggested range for `maxD` is [0, 5]. Note that updating the configurations by `minimap.updateParam` will not be limited by `maxD` |
| minD | Number | 0 | when `trigger` is `'mousemove'` or `'click'`, minimap allow users to adjust the magnifying coefficient `d` by dragging left / right on the lens. `minD` is the minimum magnifying coefficient that limits this interaction. The suggested range for `minD` is [0, 5]. Note that updating the configurations by `minimap.updateParam` will not be limited by `minD` |
### Member Function
#### updateParams(cfg)
Update partial of the configurations of the minimap instance, including `trigger`, `d`, `r`, `maxR`, `minR`, `maxD`, and `minD`. E.g.
```
const fisheye = new G6.Fisheye({
trigger: 'mousemove'
});
... // Other operations
fisheye.updateParams({
d: 2,
r: 500,
// ...
})
```
### Usage
@ -490,7 +515,7 @@ const fisheye = new G6.Fisheye({
});
const graph = new G6.Graph({
//... Other configurations
plugins: [fisheye], // Use fisheye plugin
//... Other graph configurations
plugins: [fisheye], // configuring fisheye plugin
});
```

25
docs/manual/middle/Plugins.zh.md
View File

@ -477,6 +477,31 @@ Fisheye 鱼眼放大镜是为 focus+context 的探索场景设计的，它能够
| r | Number | 300 | 放大区域的范围半径 |
| delegateStyle | Object | { stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' } | 放大镜蒙层样式 |
| showLabel | Boolean | false | 若 label 默认被隐藏，是否在关注区域内展示 label |
| scaleRByWheel | Boolean | false | 是否在放大镜上使用滚轮调整缩放范围 |
| maxR | Number | 图的高度 | 滚轮调整缩放范围的最大半径 |
| minR | Number | 0.05 * 图的高度 | 滚轮调整缩放范围的最小半径 |
| maxD | Number | 5 | `trigger` 为 `'mousemove'` / `'click'` 时，可以在放大镜上左右拖拽调整缩放系数。maxD 指定了这种调整方式的最大缩放系数，建议取值范围 [0, 5]。若使用 `minimap.updateParam` 更新参数不受该系数限制 |
| minD | Number | 0 | `trigger` 为 `'mousemove'` / `'click'` 时，可以在放大镜上左右拖拽调整缩放系数。maxD 指定了这种调整方式的最小缩放系数，建议取值范围 [0, 5]。若使用 `minimap.updateParam` 更新参数不受该系数限制 |
### 成员函数
#### updateParams(cfg)
用于更新该 minimap 的部分配置项，包括 `trigger`，`d`，`r`，`maxR`，`minR`，`maxD`，`minD`。例如：
```
const fisheye = new G6.Fisheye({
trigger: 'mousemove'
});
... // 其他操作
fisheye.updateParams({
d: 2,
r: 500,
// ...
})
```
### 用法

47
src/plugins/fisheye/index.ts
View File

@ -11,9 +11,11 @@ interface FisheyeConfig {
r?: number;
delegateStyle?: ShapeStyle;
showLabel?: boolean;
wheelScaleRange?: boolean;
scaleRByWheel?: boolean;
maxR?: number;
minR?: number;
maxD?: number;
minD?: number
}
const lensDelegateStyle = {
@ -31,6 +33,8 @@ export default class Fisheye extends Base {
r: 300,
delegateStyle: clone(lensDelegateStyle),
showLabel: false,
maxD: 5,
minD: 0
};
}
@ -63,6 +67,8 @@ export default class Fisheye extends Base {
self.set('cachedMagnifiedModels', []);
self.set('cachedOriginPositions', {});
self.set('r2', r * r);
const d = self.get('d');
self.set('molecularParam', (d + 1) * r);
}
protected createDelegate(e: IG6GraphEvent) {
@ -79,7 +85,7 @@ export default class Fisheye extends Base {
lensDelegate.on('drag', evt => {
self.magnify(evt);
});
if (this.get('wheelScaleRange')) {
if (this.get('scaleRByWheel')) {
lensDelegate.on('mousewheel', evt => {
self.scaleRange(evt);
});
@ -112,6 +118,8 @@ export default class Fisheye extends Base {
r *= ratio;
self.set('r', r);
self.set('r2', r * r);
const d = self.get('d');
self.set('molecularParam', (d + 1) * r);
self.magnify(e, mousePos);
}
@ -129,6 +137,7 @@ export default class Fisheye extends Base {
const r = self.get('r');
const r2 = self.get('r2');
const d = self.get('d');
const molecularParam = self.get('molecularParam');
const nodes = graph.getNodes();
const nodeLength = nodes.length;
let mCenter = mousePos ? { x: mousePos.x, y: mousePos.y } : { x: e.x, y: e.y };
@ -145,11 +154,12 @@ export default class Fisheye extends Base {
const model = nodes[i].getModel();
const { x, y } = model;
if (isNaN(x) || isNaN(y)) continue;
// the square of the distance between the node and the magnified center
const dist2 = (x - mCenter.x) * (x - mCenter.x) + (y - mCenter.y) * (y - mCenter.y);
if (!isNaN(dist2) && dist2 < r2 && dist2 !== 0) {
const dist = Math.sqrt(dist2);
const param = dist / r;
const magnifiedDist = (r * (d + 1) * param) / (d * param + 1);
//(r * (d + 1) * (dist / r)) / (d * (dist / r) + 1);
const magnifiedDist = molecularParam * dist / (d * dist + r);
const cos = (x - mCenter.x) / dist;
const sin = (y - mCenter.y) / dist;
model.x = cos * magnifiedDist + mCenter.x;
@ -209,7 +219,7 @@ export default class Fisheye extends Base {
*/
public updateParams(cfg: FisheyeConfig) {
const self = this;
const { r, d, trigger } = cfg;
let { r, d, trigger, minD, maxD, minR, maxR } = cfg;
if (!isNaN(cfg.r)) {
self.set('r', r);
self.set('r2', r * r);
@ -217,6 +227,21 @@ export default class Fisheye extends Base {
if (!isNaN(d)) {
self.set('d', d);
}
if (!isNaN(maxD)) {
self.set('maxD', maxD);
}
if (!isNaN(minD)) {
self.set('minD', minD);
}
if (!isNaN(maxR)) {
self.set('maxR', maxR);
}
if (!isNaN(minR)) {
self.set('minR', minR);
}
d = self.get('d');
r = self.get('r');
self.set('molecularParam', (d + 1) * r);
if (trigger === 'mousemove' || trigger === 'click' || trigger === 'drag') {
self.set('trigger', trigger);
}
@ -259,16 +284,20 @@ export default class Fisheye extends Base {
const delta = e.x - dragPrePos.x > 0 ? 0.1 : -0.1;
const d = self.get('d');
const newD = d + delta;
if (newD < 10 && newD > 0) {
self.set('d', d + delta);
this.magnify(e);
const maxD = self.get('maxD');
const minD = self.get('minD');
if (newD < maxD && newD > minD) {
self.set('d', newD);
r = self.get('r');
self.set('molecularParam', (newD + 1) * r);
self.magnify(e);
}
self.set('dragPrePos', { x: e.x, y: e.y });
});
lensDelegate.on('dragend', e => {
self.set('dragging', false)
});
if (this.get('wheelScaleRange')) {
if (this.get('scaleRByWheel')) {
lensDelegate.on('mousewheel', evt => {
self.scaleRange(evt);
});

6
stories/Interaction/component/fisheye-lens.tsx
View File

@ -9,8 +9,8 @@ const FishEye = () => {
const fisheye = new G6.Fisheye({
r: 200,
showLabel: true,
trigger: 'drag',
wheelScaleRange: true
// trigger: 'drag',
scaleRByWheel: true
});
const colors = [
'#8FE9FF',
@ -36,7 +36,7 @@ const FishEye = () => {
preventOverlap: true,
},
modes: {
default: ['drag-canvas', 'zoom-canvas'],
// default: ['drag-canvas', 'zoom-canvas'],
},
});
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')