change marker scaling logic to reduce jank

armada-ths · Nov 17, 2024 · a5d0430 · a5d0430
1 parent 4aa3ccf
commit a5d0430
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/app/student/map/_components/BoothMarker.tsx b/src/app/student/map/_components/BoothMarker.tsx
@@ -11,7 +11,9 @@ export function BoothMarker({ booth, scale }: { booth: Booth; scale: number }) {
       key={booth.id}
       longitude={booth.center[0]}
       latitude={booth.center[1]}>
-      <div className="cursor-default" style={{ transform: `scale(${scale})` }}>
+      <div
+        className="cursor-default transition"
+        style={{ transform: `scale(${scale})` }}>
         {logoSrc ? (
           <div className="flex size-[60px]">
             <Image

diff --git a/src/app/student/map/_components/MapComponent.tsx b/src/app/student/map/_components/MapComponent.tsx
@@ -69,7 +69,6 @@ export function MapComponent({
       const { pathname } = window.location
       window.history.replaceState(null, "", pathname)
     }, 300)
-    setMarkerScale(0.6)
     return () => clearTimeout(timeout)
   }, [location])
 
@@ -162,8 +161,10 @@ export function MapComponent({
   function onZoomChange() {
     const zoom = mapRef.current?.getZoom()
     if (zoom === undefined) return
-    const scale = Math.max(0.2, Math.min(1, 1 + (zoom - 20) * 0.5))
-    setMarkerScale(scale)
+
+    if (zoom < 18.5) setMarkerScale(0.2)
+    else if (zoom < 20.5) setMarkerScale(0.5)
+    else setMarkerScale(1.0)
   }
 
   return (

diff --git a/src/app/student/map/editor/EditorMapComponent.tsx b/src/app/student/map/editor/EditorMapComponent.tsx
@@ -212,7 +212,6 @@ export default function EditorMapComponent({
           [18.079, 59.35]
         ]}
         mapStyle="https://api.maptiler.com/maps/376fa556-c405-4a91-8e9e-15be82eb3a58/style.json?key=mgMcr2yF2fWUHzf27ygv">
-
         {/** Order sensitive! */}
         <Source
           id="buildings"

diff --git a/src/app/student/map/lib/config.ts b/src/app/student/map/lib/config.ts
@@ -53,7 +53,7 @@ const style = {
   routeHintColor: "#F3ECC3",
   routeHintWidth: 1,
 
-  roomBackgroundColor: "#1f2b24",
+  roomBackgroundColor: "#1f2b24"
 } as const
 
 export enum LineType {