From 354cf7840226876e8235a1b93e094a16bfa5c6b3 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Tue, 18 Aug 2020 15:08:47 +0800 Subject: [PATCH] doc: update minimap plugin docs. --- CHANGELOG.md | 5 +- docs/api/Plugins.en.md | 40 ++++++++++++++++ docs/api/Plugins.zh.md | 28 ++++++++++- docs/manual/middle/Plugins.en.md | 29 +++++++++++- docs/manual/middle/Plugins.zh.md | 25 ++++++++++ src/plugins/fisheye/index.ts | 47 +++++++++++++++---- .../Interaction/component/fisheye-lens.tsx | 6 +-- 7 files changed, 164 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bb09a90f7..ba3f856bde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/docs/api/Plugins.en.md b/docs/api/Plugins.en.md index bb7f054e6c..f85e26d32c 100644 --- a/docs/api/Plugins.en.md +++ b/docs/api/Plugins.en.md @@ -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 +}); +``` diff --git a/docs/api/Plugins.zh.md b/docs/api/Plugins.zh.md index 6dc5dde999..f61740e505 100644 --- a/docs/api/Plugins.zh.md +++ b/docs/api/Plugins.zh.md @@ -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, + // ... +}) +``` + ### 用法 diff --git a/docs/manual/middle/Plugins.en.md b/docs/manual/middle/Plugins.en.md index ea8318fe70..993fc134e1 100644 --- a/docs/manual/middle/Plugins.en.md +++ b/docs/manual/middle/Plugins.en.md @@ -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 }); ``` diff --git a/docs/manual/middle/Plugins.zh.md b/docs/manual/middle/Plugins.zh.md index 1735dfff14..cdf132bc20 100644 --- a/docs/manual/middle/Plugins.zh.md +++ b/docs/manual/middle/Plugins.zh.md @@ -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, + // ... +}) +``` ### 用法 diff --git a/src/plugins/fisheye/index.ts b/src/plugins/fisheye/index.ts index 9095ec22c7..63b49a97a8 100644 --- a/src/plugins/fisheye/index.ts +++ b/src/plugins/fisheye/index.ts @@ -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); }); diff --git a/stories/Interaction/component/fisheye-lens.tsx b/stories/Interaction/component/fisheye-lens.tsx index 340af1be04..3fdbb97043 100644 --- a/stories/Interaction/component/fisheye-lens.tsx +++ b/stories/Interaction/component/fisheye-lens.tsx @@ -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')