refactor(radar): Delegate event binding (#3542)

Event binding done unefficiently and called whenever redraws happens. Make event binding done in delegation mode.
naver · Dec 1, 2023 · a2939c0 · a2939c0
1 parent f9c5b75
commit a2939c0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -207,7 +207,8 @@ export default {
 				screenX: x,
 				screenY: y,
 				clientX: x,
-				clientY: y
+				clientY: y,
+				bubbles: hasRadar // radar type needs to bubble up event
 			};
 
 			emulateEvent[/^(mouse|click)/.test(type) ? "mouse" : "touch"](

diff --git a/src/ChartInternal/shape/radar.ts b/src/ChartInternal/shape/radar.ts
@@ -51,6 +51,8 @@ export default {
 				.attr("class", $SHAPE.shapes);
 
 			current.dataMax = config.radar_axis_max || $$.getMinMaxData().max[0].value;
+
+			config.interaction_enabled && config.radar_axis_text_show && $$.bindRadarEvent();
 		}
 	},
 
@@ -289,59 +291,54 @@ export default {
 					return `translate(${posX} ${posY})`;
 				});
 		}
-
-		$$.bindRadarEvent();
 	},
 
 	bindRadarEvent(): void {
 		const $$ = this;
-		const {config, state, $el: {radar, svg}} = $$;
+		const {state, $el: {radar, svg}} = $$;
 		const focusOnly = $$.isPointFocusOnly();
 		const {inputType, transiting} = state;
+		const isMouse = inputType === "mouse";
 
-		if (config.interaction_enabled) {
-			const isMouse = inputType === "mouse";
+		const hide = event => {
+			state.event = event;
 
-			const hide = event => {
-				state.event = event;
+			// const index = getIndex(event);
 
-				// const index = getIndex(event);
+			const index = $$.getDataIndexFromEvent(event);
+			const noIndex = isUndefined(index);
 
-				const index = $$.getDataIndexFromEvent(event);
-				const noIndex = isUndefined(index);
+			if (isMouse || noIndex) {
+				$$.hideTooltip();
 
-				if (isMouse || noIndex) {
-					$$.hideTooltip();
+				focusOnly ?
+					$$.hideCircleFocus() :
+					$$.unexpandCircles();
 
-					focusOnly ?
-						$$.hideCircleFocus() :
-						$$.unexpandCircles();
-
-					if (isMouse) {
-						$$.setOverOut(false, index);
-					} else if (noIndex) {
-						$$.callOverOutForTouch();
-					}
+				if (isMouse) {
+					$$.setOverOut(false, index);
+				} else if (noIndex) {
+					$$.callOverOutForTouch();
 				}
-			};
+			}
+		};
 
-			radar.axes.selectAll("text")
-				.on(isMouse ? "mouseover " : "touchstart", event => {
-					if (transiting) { // skip while transiting
-						return;
-					}
+		radar.axes
+			.on(isMouse ? "mouseover " : "touchstart", event => {
+				if (transiting) { // skip while transiting
+					return;
+				}
 
-					state.event = event;
-					const index = $$.getDataIndexFromEvent(event);
+				state.event = event;
+				const index = $$.getDataIndexFromEvent(event);
 
-					$$.selectRectForSingle(svg.node(), index);
-					isMouse ? $$.setOverOut(true, index) : $$.callOverOutForTouch(index);
-				})
-				.on("mouseout", isMouse ? hide : null);
+				$$.selectRectForSingle(svg.node(), index);
+				isMouse ? $$.setOverOut(true, index) : $$.callOverOutForTouch(index);
+			})
+			.on("mouseout", isMouse ? hide : null);
 
-			if (!isMouse) {
-				svg.on("touchstart", hide);
-			}
+		if (!isMouse) {
+			svg.on("touchstart", hide);
 		}
 	},