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..a85cf7a 100644 --- a/src/views/orb-view.ts +++ b/src/views/orb-view.ts @@ -300,6 +300,17 @@ 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.render(onRendered); + }); + } + recenter(onRendered?: () => void) { const fitZoomTransform = this._renderer.getFitZoomTransform(this._graph); @@ -308,6 +319,17 @@ export class OrbView implements IOrbVi .duration(this._settings.zoomFitTransitionMs) .ease(easeLinear) .call(this._d3Zoom.transform, fitZoomTransform) + .call(() => { + this.render(onRendered); + }); + } + + 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?.();