feat(Events-ZoomDomain.CHANGE): add type ('in' | 'out' | 'reset' | 'manual') (#2035)

Author: theiliad

packages/core/src/components/axes/grid-brush.ts

@@ -104,19 +104,24 @@ export class ChartBrush extends Component {
 				const xScale = scaleTime().range([0, width]).domain(zoomDomain)
 
 				let newDomain = [xScale.invert(startPoint), xScale.invert(endPoint)]
+				let zoomType: 'in' | 'out' | 'reset' | 'manual' = 'manual'
+
 				// if selected start time and end time are the same
 				// reset to default full range
 				if (newDomain[0].valueOf() === newDomain[1].valueOf()) {
 					// same as d3 behavior and zoom bar behavior: set to default full range
 					newDomain = this.services.zoom.getDefaultZoomBarDomain()
+					zoomType = 'reset'
+				} else {
+					zoomType = 'manual'
 				}
 
 				// only if zoomDomain needs update
 				if (
 					zoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
 					zoomDomain[1].valueOf() !== newDomain[1].valueOf()
 				) {
-					this.services.zoom.handleDomainChange(newDomain)
+					this.services.zoom.handleDomainChange(newDomain, { dispatchEvent: true, type: zoomType })
 				}
 			}
 

packages/core/src/components/axes/zoom-bar.ts

@@ -317,6 +317,21 @@ export class ZoomBar extends Component {
 				event.sourceEvent.type === 'touchmove' ||
 				event.sourceEvent.type === 'touchend')
 		) {
+			// Determine zoom type for manual zoom bar operations
+			let zoomType: 'in' | 'out' | 'reset' | 'manual' = 'manual'
+			if (zoomDomain && zoomDomain[0] && zoomDomain[1]) {
+				// Check if it's a reset to full range
+				const defaultDomain = this.services.zoom.getDefaultZoomBarDomain()
+				if (
+					newDomain[0].valueOf() === defaultDomain[0].valueOf() &&
+					newDomain[1].valueOf() === defaultDomain[1].valueOf()
+				) {
+					zoomType = 'reset'
+				} else {
+					zoomType = 'manual'
+				}
+			}
+
 			// only if zoomDomain is never set or needs update
 			if (
 				zoomDomain === undefined ||
@@ -326,7 +341,8 @@ export class ZoomBar extends Component {
 				// don't dispatch event for all event types
 				// let the following code to dispatch necessary events
 				this.services.zoom.handleDomainChange(newDomain, {
-					dispatchEvent: false
+					dispatchEvent: false,
+					type: zoomType
 				})
 			}
 
@@ -340,7 +356,8 @@ export class ZoomBar extends Component {
 				zoomBarEventType = Events.ZoomBar.SELECTION_END
 				// only dispatch zoom domain change event for triggering api call when event type equals to end
 				this.services.events.dispatchEvent(Events.ZoomDomain.CHANGE, {
-					newDomain
+					newDomain,
+					type: zoomType
 				})
 			}
 			this.services.events.dispatchEvent(zoomBarEventType, {

packages/core/src/services/zoom.ts

@@ -71,11 +71,15 @@ export class Zoom extends Service {
 		)
 	}
 
-	handleDomainChange(newDomain: any, configs = { dispatchEvent: true }) {
+	handleDomainChange(
+		newDomain: any,
+		configs = { dispatchEvent: true, type: 'manual' as 'in' | 'out' | 'reset' | 'manual' }
+	) {
 		this.model.set({ zoomDomain: newDomain }, { animate: false })
 		if (configs.dispatchEvent) {
 			this.services.events?.dispatchEvent(Events.ZoomDomain.CHANGE, {
-				newDomain
+				newDomain,
+				type: configs.type
 			})
 		}
 	}
@@ -148,7 +152,7 @@ export class Zoom extends Service {
 			currentZoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
 			currentZoomDomain[1].valueOf() !== newDomain[1].valueOf()
 		) {
-			this.handleDomainChange(newDomain)
+			this.handleDomainChange(newDomain, { dispatchEvent: true, type: 'in' })
 		}
 	}
 
@@ -181,7 +185,7 @@ export class Zoom extends Service {
 			currentZoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
 			currentZoomDomain[1].valueOf() !== newDomain[1].valueOf()
 		) {
-			this.handleDomainChange(newDomain)
+			this.handleDomainChange(newDomain, { dispatchEvent: true, type: 'out' })
 		}
 	}
 
@@ -195,7 +199,7 @@ export class Zoom extends Service {
 			currentZoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
 			currentZoomDomain[1].valueOf() !== newDomain[1].valueOf()
 		) {
-			this.handleDomainChange(newDomain)
+			this.handleDomainChange(newDomain, { dispatchEvent: true, type: 'reset' })
 		}
 	}