Skip to content

Commit

Permalink
feat: add onwheel in delegate
Browse files Browse the repository at this point in the history
  • Loading branch information
@ColinChen2
ColinChen2 committed Sep 19, 2023
1 parent bbab869 commit 7f7a435
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 64 deletions.
93 changes: 46 additions & 47 deletions packages/g6/src/stdlib/plugin/edgeFilterLens/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import { IG6GraphEvent } from '../../../types/event';
import { ShapeStyle } from '../../../types/item';
import { distance } from '../../../util/point';

const DELTA = 0.05;

const DELTA = 0.01;
interface EdgeFilterLensConfig extends IPluginBaseConfig {
trigger?: 'mousemove' | 'click' | 'drag';
r?: number;
Expand All @@ -26,7 +25,7 @@ const lensDelegateStyle = {
strokeOpacity: 0.8,
lineWidth: 2,
fillOpacity: 0.1,
fill: '#ccc',
fill: '#fff',
};

export class EdgeFilterLens extends Base {
Expand Down Expand Up @@ -59,6 +58,7 @@ export class EdgeFilterLens extends Base {
let events = {
pointerdown: this.onPointerDown,
pointerup: this.onPointerUp,
wheel: this.onWheel,
} as {
[key: string]: any;
};
Expand Down Expand Up @@ -124,8 +124,22 @@ export class EdgeFilterLens extends Base {
this.dragging = true;
}

// Determine whether it is dragged in the delegate
protected isInLensDelegate(lensDelegate, pointer): boolean {
const { cx: lensX, cy: lensY, r: lensR } = lensDelegate.style;
if (
pointer.x >= lensX - lensR &&
pointer.x <= lensX + lensR &&
pointer.y >= lensY - lensR &&
pointer.y <= lensY + lensR
) {
return true;
}
return false;
}

protected moveDelegate(e) {
if (this.dragging) {
if (this.isInLensDelegate(this.delegate, { x: e.canvas.x, y: e.canvas.y })) {
const center = {
x: e.canvas.x - this.delegateCenterDiff.x,
y: e.canvas.y - this.delegateCenterDiff.y,
Expand All @@ -134,43 +148,37 @@ export class EdgeFilterLens extends Base {
}
}

protected onWheel(e: IG6GraphEvent) {
const { delegate: lensDelegate, options } = this;
const { scaleRBy } = options;
if (!lensDelegate || lensDelegate.destroyed) return;
if (scaleRBy !== 'wheel') return;
if (this.isInLensDelegate(lensDelegate, { x: e.canvas.x, y: e.canvas.y })) {
if (scaleRBy === 'wheel') {
this.scaleRByWheel(e);
}
}
}

/**
* Scale the range by wheel
* @param e mouse wheel event
*/
protected scaleRByWheel(e: IG6GraphEvent) {
const self = this;
if (!e || !e.originalEvent) return;
if (e.preventDefault) e.preventDefault();
const graph: IGraph = self.graph;
let ratio;
const lensDelegate = self.delegate;
const lensCenter = lensDelegate
? {
x: lensDelegate.attr('x'),
y: lensDelegate.attr('y'),
}
: undefined;
const mousePos = lensCenter || graph.getPointByClient(e.clientX, e.clientY);
if ((e.originalEvent as any).wheelDelta < 0) {
ratio = 1 - DELTA;
} else {
ratio = 1 / (1 - DELTA);
}
const maxR = self.options.maxR;
const minR = self.options.minR;
let r = self.options.r;
const { graph, options } = this;
const graphCanvasEl = graph.canvas.context.config.canvas;
const graphHeight = graphCanvasEl?.scrollHeight;
if (
(r > (maxR || graphHeight) && ratio > 1) ||
(r < (minR || graphHeight * 0.05) && ratio < 1)
) {
ratio = 1;
}
r *= ratio;
this.options.r = r;
self.filter(e, mousePos);
const graphHeight = graphCanvasEl?.height || 500;
let maxR = options.maxR ? Math.min(options.maxR, graphHeight) : graphHeight;

Check failure on line 173 in packages/g6/src/stdlib/plugin/edgeFilterLens/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-build-g6 

'maxR' is never reassigned. Use 'const' instead
let minR = options.minR ? Math.max(options.minR, graphHeight * DELTA) : graphHeight * DELTA;

Check failure on line 174 in packages/g6/src/stdlib/plugin/edgeFilterLens/index.ts

View workflow job for this annotation

GitHub Actions / lint-and-build-g6 

'minR' is never reassigned. Use 'const' instead

const scale = 1 + (e.originalEvent as any).deltaY * -1 * DELTA;
let r = options.r * scale;
r = Math.min(r, maxR);
r = Math.max(r, minR);
options.r = r;
this.filter(e);
}

/**
Expand All @@ -179,20 +187,21 @@ export class EdgeFilterLens extends Base {
*/
protected filter(e: IG6GraphEvent, mousePos?) {
const { graph, options, showNodeLabel, showEdgeLabel, cachedTransientNodes, cachedTransientEdges } = this;
const nodes = graph.getAllNodesData();
const hitNodesMap = {};
const r = options.r;
const showType = options.showType;
const shouldShow = options.shouldShow;
const fCenter = mousePos || { x: e.canvas.x, y: e.canvas.y };
this.updateDelegate(fCenter, r);
const shouldShow = options.shouldShow;

const nodes = graph.getAllNodesData();
const hitNodesMap = {};
nodes.forEach((node) => {
const { data, id } = node;
if (distance({ x: data.x, y: data.y }, fCenter) < r) {
hitNodesMap[id] = node;
}
});

const edges = graph.getAllEdgesData();
const hitEdges = [];
edges.forEach((edge) => {
Expand Down Expand Up @@ -243,7 +252,7 @@ export class EdgeFilterLens extends Base {
});
}
});

cachedTransientEdges.forEach((id) => {
graph.drawTransient('edge', id, { action: 'remove' });
});
Expand Down Expand Up @@ -309,16 +318,6 @@ export class EdgeFilterLens extends Base {
...attrs,
},
});

if (options.trigger !== 'drag') {
// 调整范围 r 的监听
if (options.scaleRBy === 'wheel') {
// 使用滚轮调整 r
lensDelegate.on('mousewheel', (evt) => {
this.scaleRByWheel(evt);
});
}
}
} else {
lensDelegate.attr({
cx: mCenter.x,
Expand Down
37 changes: 20 additions & 17 deletions packages/g6/tests/demo/plugins/edgeFilterLens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ export default async () => {
scaleRByWheel.innerHTML = 'wheel';
configScaleRBy.appendChild(scaleRByWheel);
const scaleRByUnset = document.createElement('option');
scaleRByUnset.value = undefined;
scaleRByUnset.innerHTML = 'undefined';
scaleRByUnset.value = 'unset';
scaleRByUnset.innerHTML = 'unset';
configScaleRBy.appendChild(scaleRByUnset);
buttonContainer.appendChild(configScaleRBy);

Expand Down Expand Up @@ -164,24 +164,26 @@ export default async () => {
},
});

// swithButton.addEventListener('click', (e) => {
// if (swithButton.value === 'Disable') {
// swithButton.value = 'Enable';
// graph.removePlugins(filterLensPlugin);
// } else {
// swithButton.value = 'Disable';
// filterLensPlugin = new Extensions.EdgeFilterLens(filterLens);
// graph.addPlugins(filterLensPlugin);
// }
// });
// configScaleRBy.addEventListener('change', (e) => {
// filterLensPlugin.updateParams({ scaleRBy: e.target.value });
// graph.updatePlugin(filterLensPlugin);
// });
swithButton.addEventListener('click', (e) => {
if (swithButton.value === 'Disable') {
swithButton.value = 'Enable';
graph.removePlugins(['filterLens1']);
} else {
swithButton.value = 'Disable';
graph.addPlugins([filterLens]);
}
});
configScaleRBy.addEventListener('change', (e) => {
filterLens = {
...filterLens,
scaleRBy: e.target.value
}
graph.updatePlugin(filterLens);
});
configTrigger.addEventListener('change', (e) => {
filterLens = {
...filterLens,
trigger: e.target.value
trigger: e.target.value
}
graph.updatePlugin(filterLens);
});
Expand All @@ -195,6 +197,7 @@ export default async () => {
label: 'a'
};
});

graph.read(data);
graph.zoom(0.6);
});
Expand Down

0 comments on commit 7f7a435

Please sign in to comment.