@krizaka/ui 3.33.1 → 3.35.0

package/dist/map.d.ts

@@ -321,9 +321,13 @@ type RouteProps = {
     replayKey?: string | number;
     /** `accent` or `soft`. Default `accent`. */
     tone?: "accent" | "soft";
+    /** The timing function of the drawing and of the trips: `ease-out`, `linear`, `ease-in-out`. Default: out for the drawing, in-out for a trip. */
+    easing?: "ease-out" | "linear" | "ease-in-out";
+    /** Holds the drawing and the trips where they are (a controlled pause, on top of the off-screen one). */
+    paused?: boolean;
 };
 /** A route on the map: a line that draws itself, and a courier that travels it. Under reduced motion the line is whole and the courier rests at the end. */
-declare function Route({ path, label, draw, duration, courier, tripDuration, repeatAfter, replayKey, tone }: RouteProps): null;
+declare function Route({ path, label, draw, duration, courier, tripDuration, repeatAfter, replayKey, tone, easing, paused }: RouteProps): null;
 type RadiusCircleProps = {
     /** Its centre. */
     center: LngLat;

package/dist/map.js

@@ -891,7 +891,12 @@ function Pulse({ position, label, size = 56, tone = "accent" }) {
   }, [m, lib, tone, size, position[0], position[1]]);
   return null;
 }
-function Route({ path, label, draw = true, duration = 1400, courier, tripDuration = 3200, repeatAfter, replayKey, tone = "accent" }) {
+var ROUTE_CURVES = {
+  linear: (t) => t,
+  "ease-out": (t) => 1 - (1 - t) ** 3,
+  "ease-in-out": (t) => t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
+};
+function Route({ path, label, draw = true, duration = 1400, courier, tripDuration = 3200, repeatAfter, replayKey, tone = "accent", easing, paused = false }) {
   const { map: m, lib, ready, reduce, places } = useMap();
   const id = `kz-route-${React2.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
   const animated = draw && !reduce;
@@ -908,11 +913,12 @@ function Route({ path, label, draw = true, duration = 1400, courier, tripDuratio
     { id: `${id}-casing`, type: "line", source: id, layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": c.accent, "line-width": 9, "line-opacity": tone === "soft" ? 0.08 : 0.16, "line-blur": 3 } },
     { id: `${id}-line`, type: "line", source: id, layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": c.accent, "line-width": tone === "soft" ? 2 : 3.5, "line-opacity": tone === "soft" ? 0.6 : 1 } }
   ]);
-  const [visible, setVisible] = React2.useState(() => typeof IntersectionObserver === "undefined");
+  const [seen, setSeen] = React2.useState(() => typeof IntersectionObserver === "undefined");
+  const visible = seen && !paused;
   React2.useEffect(() => {
     const el = m?.getContainer?.();
     if (!el || typeof IntersectionObserver === "undefined") return;
-    const io = new IntersectionObserver(([entry]) => setVisible(!!entry?.isIntersecting), { threshold: 0.25 });
+    const io = new IntersectionObserver(([entry]) => setSeen(!!entry?.isIntersecting), { threshold: 0.25 });
     io.observe(el);
     return () => io.disconnect();
   }, [m]);
@@ -923,13 +929,13 @@ function Route({ path, label, draw = true, duration = 1400, courier, tripDuratio
     const began = performance.now();
     const step = (now) => {
       const t = Math.min(1, (now - began) / Math.max(1, duration));
-      source?.setData?.(sliceLine(path, 1 - (1 - t) ** 3));
+      source?.setData?.(sliceLine(path, ROUTE_CURVES[easing ?? "ease-out"](t)));
       if (t < 1) frame = requestAnimationFrame(step);
       else setDoneFor(token);
     };
     frame = requestAnimationFrame(step);
     return () => cancelAnimationFrame(frame);
-  }, [m, ready, animated, drawn, visible, id, path, duration, token]);
+  }, [m, ready, animated, drawn, visible, id, path, duration, token, easing]);
   const [trip, setTrip] = React2.useState(0);
   React2.useEffect(() => {
     if (!courier || !m || !lib || !ready || !drawn) return;
@@ -943,7 +949,7 @@ function Route({ path, label, draw = true, duration = 1400, courier, tripDuratio
       const began = performance.now();
       const step = (now) => {
         const t = Math.min(1, (now - began) / Math.max(1, tripDuration));
-        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+        const eased = ROUTE_CURVES[easing ?? "ease-in-out"](t);
         marker.setLngLat([...pointAlong(path, eased).position]);
         if (t < 1) frame = requestAnimationFrame(step);
         else if (repeatAfter !== void 0) timer = setTimeout(() => setTrip((n) => n + 1), repeatAfter);
@@ -955,7 +961,7 @@ function Route({ path, label, draw = true, duration = 1400, courier, tripDuratio
       clearTimeout(timer);
       marker.remove();
     };
-  }, [courier, m, lib, ready, drawn, visible, reduce, path, tripDuration, repeatAfter, trip, token]);
+  }, [courier, m, lib, ready, drawn, visible, reduce, path, tripDuration, repeatAfter, trip, token, easing]);
   return null;
 }
 function useGeoLayer(id, data, layers2, source = {}) {