feat: update map anchor for station and desciprtion search

src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx

@@ -364,8 +364,20 @@ const computeViewTransform = (
   return { scale, translation };
 };
 
+const getAnchorFromOffset = (
+  offsetX: number,
+  offsetY: number
+): { x: number; y: number } => {
+  const length = Math.hypot(offsetX, offsetY);
+
+  const nx = offsetX / length;
+  const ny = offsetY / length;
+
+  return { x: (1 - nx) / 2, y: (1 - ny) / 2 };
+};
+
 const backgroundColor = toColor(BACKGROUND_COLOR);
-// Override route & station color to ED1C24
+
 const pathColor = toColor(0xed1c24);
 
 export const WebGLRouteMapPrototype = observer(() => {
@@ -395,6 +407,7 @@ export const WebGLRouteMapPrototype = observer(() => {
   const transformRef = useRef<Transform | null>(null);
   const lastTransformRef = useRef<Transform | null>(null);
   const [transformState, setTransformState] = useState<Transform | null>(null);
+
   const clampTransformScale = useCallback((transform: Transform): Transform => {
     const { min, max } = scaleLimitsRef.current;
     const clampedScale = clamp(transform.scale, min, max);
@@ -1904,6 +1917,11 @@ export const WebGLRouteMapPrototype = observer(() => {
             const labelY =
               (rotatedY + offsetY) * camera.scale + camera.translation.y;
 
+            const anchor = getAnchorFromOffset(offsetX, offsetY);
+            const transformCss = `translate(${-anchor.x * 100}%, ${
+              -anchor.y * 100
+            }%)`;
+
             const dpr = Math.max(1, window.devicePixelRatio || 1);
             const cssX = labelX / dpr;
             const cssY = labelY / dpr;
@@ -1919,8 +1937,10 @@ export const WebGLRouteMapPrototype = observer(() => {
             const fontSizePercent =
               routeData?.font_size ?? originalRouteData?.font_size ?? 100;
             const fontScale = fontSizePercent / 100;
+
             const primaryFontSize = 16 * fontScale;
             const secondaryFontSize = 13 * fontScale;
+
             const secondaryMarginTop = 5 * fontScale;
 
             const backendAlign = station.align;
@@ -1972,7 +1992,7 @@ export const WebGLRouteMapPrototype = observer(() => {
                   position: "absolute",
                   left: cssX,
                   top: cssY,
-                  transform: "translate(0, -50%)",
+                  transform: transformCss,
                   color: "#fff",
                   fontFamily: "Roboto, sans-serif",
                   textAlign: "left",