<commit_before>import React, { useCallback, useEffect, useRef, useState } from "react";
import { ControlledSlippyMap } from "./ControlledSlippyMap";

const containerStyle = {
  position: "relative",
  height: "100%",
  minHeight: "1em",
  overflow: "hidden",
};

const zoomStyle = {
  position: "absolute",
  right: "10px",
  bottom: "10px",
};

const clamp = (min, max, val) => {
  let r = val;
  if (r > max) r = max;
  if (r < min) r = min;
  return r;
};

export const SlippyMap = ({
  minZoom = 2,
  maxZoom = 20,
  zoomStep = 0.1,
  defaultZoom = 16,
  defaultCenter = { latitude: 53.9049, longitude: 27.5609 },
  onAreaChange,
  onZoomChange,
  ...props
}) => {
  // Current size of the map's container element.
  const [containerSize, setContainerSize] = useState([0, 0]);

  // Current high-level state of the map.
  const [zoom, setZoom0] = useState(defaultZoom);
  const setZoom = (zoom) => {
    setZoom0(zoom);
    onZoomChange && onZoomChange(zoom);
  };
  const [center, setCenter] = useState(defaultCenter);

  const ignoreWheelUntil = useRef(0);
  const containerRef = useRef(null);

  useEffect(() => {
    const c = containerRef.current;
    // When the map is mounted, get its container and measure its size.
    //
    // This will trigger a rerender, but this is exactly what we need since the
    // first render returnes nothing because the container is still missing.
    setContainerSize([c.offsetWidth, c.offsetHeight]);
  }, [containerRef.current]);

  const $handleZoomChange = useCallback(
    (val) => {
      setZoom(clamp(minZoom, maxZoom, Math.round(val * 100) / 100));
    },
    [minZoom, maxZoom]
  );

  const [zoomSpeed, setZoomSpeed] = useState(0);

  useEffect(() => {
    if (Math.abs(zoomSpeed) < 0.001) {
      return;
    }
    const id = setTimeout(() => {
      setZoomSpeed(zoomSpeed * 0.9);
      setZoom(zoom + zoomSpeed * 10);
    }, 10);
    return () => clearTimeout(id);
  }, [zoomSpeed, zoom]);

  const $onWheel = useCallback(
    (event) => {
      // Throttle barrier
      if (
        ignoreWheelUntil.current &&
        event.timeStamp < ignoreWheelUntil.current
      ) {
        return;
      }
      let delay = 33 + zoomStep * 166;
      if (delay > 200) delay = 200;
      ignoreWheelUntil.current = event.timeStamp + delay;

      if (event.deltaY == 0) {
        return;
      }

      setZoomSpeed(event.deltaY > 0 ? zoomStep / 20 : -zoomStep / 20);
      // $handleZoomChange(event.deltaY > 0 ? zoom - zoomStep : zoom + zoomStep);
    },
    [ignoreWheelUntil.current, zoom, zoomStep]
  );

  const $onAreaChange = useCallback(
    (area) => {
      setCenter(area.center);
      if (onAreaChange) {
        onAreaChange(area);
      }
    },
    [onAreaChange]
  );

  return (
    <div style={containerStyle} ref={containerRef}>
      {containerRef.current && (
        <ControlledSlippyMap
          {...props}
          onAreaChange={$onAreaChange}
          center={center}
          onWheel={$onWheel}
          zoom={zoom}
          containerSize={containerSize}
          containerElement={containerRef.current}
        />
      )}
      <div style={zoomStyle}>
        ({zoom})
        <input
          type="range"
          min={minZoom}
          max={maxZoom}
          step={zoomStep}
          value={zoom}
          onChange={(e) => {
            $handleZoomChange(e.target.value);
          }}
        />
      </div>
    </div>
  );
};<commit_msg>Remove zoom animation<commit_after>import React, { useCallback, useEffect, useRef, useState } from "react";
import { ControlledSlippyMap } from "./ControlledSlippyMap";

const containerStyle = {
  position: "relative",
  height: "100%",
  minHeight: "1em",
  overflow: "hidden",
};

export const SlippyMap = ({
  zoom = 16,
  defaultCenter = { latitude: 53.9049, longitude: 27.5609 },
  onAreaChange,
  onWheel,
  ...props
}) => {
  // Current size of the map's container element.
  const [containerSize, setContainerSize] = useState([0, 0]);

  const [center, setCenter] = useState(defaultCenter);
  const containerRef = useRef(null);

  useEffect(() => {
    const c = containerRef.current;
    // When the map is mounted, get its container and measure its size.
    //
    // This will trigger a rerender, but this is exactly what we need since the
    // first render returnes nothing because the container is still missing.
    setContainerSize([c.offsetWidth, c.offsetHeight]);
  }, [containerRef.current]);

  const $onAreaChange = useCallback(
    (area) => {
      setCenter(area.center);
      if (onAreaChange) {
        onAreaChange(area);
      }
    },
    [onAreaChange]
  );

  return (
    <div style={containerStyle} ref={containerRef}>
      {containerRef.current && (
        <ControlledSlippyMap
          {...props}
          onAreaChange={$onAreaChange}
          center={center}
          onWheel={onWheel}
          zoom={zoom}
          containerSize={containerSize}
          containerElement={containerRef.current}
        />
      )}
    </div>
  );
};
{'fraction_non_alphanumeric': 0.13636363636363635, 'fraction_numerical': 0.017344497607655503, 'mean_word_length': 2.550601556970984, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 30, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1628749', 'n_tokens_mistral': 1643, 'n_tokens_neox': 1563, 'n_words': 383}