From faa9eedee439c93c2bd0b6fd67ebd3dd2dc0f6a8 Mon Sep 17 00:00:00 2001 From: dlozic Date: Tue, 1 Aug 2023 09:23:28 +0200 Subject: [PATCH 1/4] New: Add zoom and recenter functions --- src/views/orb-map-view.ts | 11 +++++++++++ src/views/orb-view.ts | 24 ++++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/src/views/orb-map-view.ts b/src/views/orb-map-view.ts index 5bc4d45..0a1a7f2 100644 --- a/src/views/orb-map-view.ts +++ b/src/views/orb-map-view.ts @@ -198,6 +198,11 @@ export class OrbMapView implements IOr onRendered?.(); } + zoomIn(onRendered?: () => void) { + this._leaflet.zoomIn(); + onRendered?.(); + } + recenter(onRendered?: () => void) { const view = this._graph.getBoundingBox(); const topRightCoordinate = this._leaflet.layerPointToLatLng([view.x, view.y]); @@ -206,6 +211,11 @@ export class OrbMapView implements IOr onRendered?.(); } + zoomOut(onRendered?: () => void) { + this._leaflet.zoomOut(); + onRendered?.(); + } + destroy() { this._renderer.removeAllListeners(); this._leaflet.off(); @@ -240,6 +250,7 @@ export class OrbMapView implements IOr private _initLeaflet() { const leaflet = L.map(this._map, { doubleClickZoom: false, + zoomControl: false, }).setView([0, 0], this._settings.map.zoomLevel); leaflet.on('zoomstart', () => { diff --git a/src/views/orb-view.ts b/src/views/orb-view.ts index e44a812..4a1f16f 100644 --- a/src/views/orb-view.ts +++ b/src/views/orb-view.ts @@ -300,6 +300,18 @@ export class OrbView implements IOrbVi onRendered?.(); } + zoomIn(onRendered?: () => void) { + select(this._canvas) + .transition() + .duration(this._settings.zoomFitTransitionMs) + .ease(easeLinear) + .call(this._d3Zoom.scaleBy, 1.2) + .call(() => { + this._renderer.render(this._graph); + onRendered?.(); + }); + } + recenter(onRendered?: () => void) { const fitZoomTransform = this._renderer.getFitZoomTransform(this._graph); @@ -314,6 +326,18 @@ export class OrbView implements IOrbVi }); } + zoomOut(onRendered?: () => void) { + select(this._canvas) + .transition() + .duration(this._settings.zoomFitTransitionMs) + .ease(easeLinear) + .call(this._d3Zoom.scaleBy, 0.8) + .call(() => { + this._renderer.render(this._graph); + onRendered?.(); + }); + } + destroy() { this._renderer.removeAllListeners(); this._simulator.terminate(); From 54d87c6b495dd46ab08ffbbb3da2b2ba7ab56c9d Mon Sep 17 00:00:00 2001 From: dlozic Date: Tue, 1 Aug 2023 14:16:03 +0200 Subject: [PATCH 2/4] Fix: reuse this.render --- src/views/orb-view.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/views/orb-view.ts b/src/views/orb-view.ts index 4a1f16f..a85cf7a 100644 --- a/src/views/orb-view.ts +++ b/src/views/orb-view.ts @@ -307,8 +307,7 @@ export class OrbView implements IOrbVi .ease(easeLinear) .call(this._d3Zoom.scaleBy, 1.2) .call(() => { - this._renderer.render(this._graph); - onRendered?.(); + this.render(onRendered); }); } @@ -321,8 +320,7 @@ export class OrbView implements IOrbVi .ease(easeLinear) .call(this._d3Zoom.transform, fitZoomTransform) .call(() => { - this._renderer.render(this._graph); - onRendered?.(); + this.render(onRendered); }); } From e6d5802a21a925d9d089f67e2d057a10f9620cad Mon Sep 17 00:00:00 2001 From: dlozic Date: Thu, 3 Aug 2023 11:16:27 +0200 Subject: [PATCH 3/4] Fix: Remove excessive recenterings --- src/views/orb-map-view.ts | 1 - src/views/orb-view.ts | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/views/orb-map-view.ts b/src/views/orb-map-view.ts index 0a1a7f2..50aa528 100644 --- a/src/views/orb-map-view.ts +++ b/src/views/orb-map-view.ts @@ -460,7 +460,6 @@ export class OrbMapView implements IOr if (this._renderer.isInitiallyRendered) { this._leaflet.invalidateSize(false); this._renderer.render(this._graph); - this.recenter(); } } diff --git a/src/views/orb-view.ts b/src/views/orb-view.ts index a85cf7a..8acbf92 100644 --- a/src/views/orb-view.ts +++ b/src/views/orb-view.ts @@ -166,7 +166,6 @@ export class OrbView implements IOrbVi this._simulator.on(SimulatorEventType.SIMULATION_END, (data) => { this._graph.setNodePositions(data.nodes); this.render(); - this.recenter(); // this._isSimulating = false; this._onSimulationEnd?.(); this._onSimulationEnd = undefined; @@ -618,7 +617,6 @@ export class OrbView implements IOrbVi this._renderer.height = containerSize.height; if (this._renderer.isInitiallyRendered) { this._renderer.render(this._graph); - this.recenter(); } } From 001007068bbfd7d86c7ccf13ac974d4b3bf10839 Mon Sep 17 00:00:00 2001 From: dlozic Date: Thu, 3 Aug 2023 12:44:11 +0200 Subject: [PATCH 4/4] Fix: Remove unused code --- src/views/orb-view.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/views/orb-view.ts b/src/views/orb-view.ts index 8acbf92..ebab284 100644 --- a/src/views/orb-view.ts +++ b/src/views/orb-view.ts @@ -211,16 +211,9 @@ export class OrbView implements IOrbVi const edgePositions = this._graph.getEdgePositions(edgeFilter); this._simulator.mergeData({ nodes: nodePositions, edges: edgePositions }); - // this._simulator.simulate(); }, onRemoveData: (data) => { this._simulator.deleteData(data); - /* - const nodePositions = this._graph.getNodePositions(); - const edgePositions = this._graph.getEdgePositions(); - this._simulator.updateData({ nodes: nodePositions, edges: edgePositions }); - this.render(); - */ }, }); }