turfjs / turf-node-example Goto Github PK

import turfSimplify from '@turf/simplify';
import turf from '@turf/turf';
import { useEffect, useState } from 'react';

import { computeChanges } from '../../../helpers/google-maps';
import {
  ColorPaletteStateNumber,
  DataPolygon,
  PALETTE,
  Polygon,
  polygonToJstsPolygon,
} from './commons';

export type UseGoogleMapsPolygonsType = {
  readonly dataPolygons: DataPolygon[];
};

export type UseGoogleMapsPolygonsCreateType = {
  mapInstance: google.maps.Map<Element> | null;
  onPolygonClicked?(polygon: Polygon): void;
  polygons?: Polygon[];
};

const getPolygonColor = (polygon: Polygon): string => {
  const palette = polygon.colorPalette
    ? PALETTE[polygon.colorPalette]
    : PALETTE.default;
  if (polygon.highlight) return palette.highlight;
  if (polygon.disabled) return palette.disabled;
  return palette.normal;
};

const getPolygonNumber = (
  polygon: Polygon,
  field: ColorPaletteStateNumber,
): number => {
  const palette = polygon.colorPalette
    ? PALETTE[polygon.colorPalette]
    : PALETTE.default;
  return palette[field];
};

export const useGoogleMapsPolygons = ({
  mapInstance,
  onPolygonClicked,
  polygons,
}: UseGoogleMapsPolygonsCreateType): UseGoogleMapsPolygonsType => {
  const [dataPolygons, setDataPolygons] = useState<DataPolygon[]>([]);

  useEffect(() => {
    if (polygons) {
      const result = computeChanges<Polygon, DataPolygon>(
        polygons,
        dataPolygons,
      );

      if (result.hasChanges()) {
        const newDataPolygons: DataPolygon[] = [];
        dataPolygons.forEach(dataPolygon => {
          if (result.idsToRemove.includes(dataPolygon.targetId)) {
            dataPolygon.mapPolygon.setMap(null);
          } else {
            window.google.maps.event.clearListeners(
              dataPolygon.mapPolygon,
              'click',
            );
            if (onPolygonClicked) {
              dataPolygon.mapPolygon.addListener('click', () =>
                onPolygonClicked(dataPolygon.data),
              );
            }
            newDataPolygons.push(dataPolygon);
          }
        });

        result.itemsToUpdate.forEach(item => {
          const dataPolygon = dataPolygons.find(
            searchItem => searchItem.targetId === item.id,
          );
          if (dataPolygon) {
            dataPolygon.data = item;
            dataPolygon.lastModified = item.lastModified;
            dataPolygon.mapPolygon.setOptions({
              paths: item.coordinates,
              strokeColor: getPolygonColor(item),
              strokeOpacity: getPolygonNumber(item, 'strokeOpacity'),
              strokeWeight: 3,
              fillColor: getPolygonColor(item),
              fillOpacity: getPolygonNumber(item, 'fillOpacity'),
              zIndex: 1000,
            });
            dataPolygon.jstsPolygon = polygonToJstsPolygon(
              dataPolygon.mapPolygon,
            );
            dataPolygon.mapPolygon.setMap(mapInstance);
          }
        });

        result.itemsToAdd.forEach(item => {
          const mapPolygon = new window.google.maps.Polygon({
            paths: turf.simplify(item.coordinates),
            strokeColor: getPolygonColor(item),
            strokeOpacity: getPolygonNumber(item, 'strokeOpacity'),
            strokeWeight: 3,
            fillColor: getPolygonColor(item),
            fillOpacity: getPolygonNumber(item, 'fillOpacity'),
          });
          mapPolygon.setMap(mapInstance);
          if (onPolygonClicked) {
            mapPolygon.addListener('click', () => onPolygonClicked(item));
          }
          newDataPolygons.push({
            targetId: item.id,
            lastModified: item.lastModified,
            data: item,
            mapPolygon,
            jstsPolygon: polygonToJstsPolygon(mapPolygon),
          });
        });
        setDataPolygons(newDataPolygons);
      } else {
        dataPolygons.forEach(dataPolygon => {
          window.google.maps.event.clearListeners(
            dataPolygon.mapPolygon,
            'click',
          );
          if (onPolygonClicked) {
            dataPolygon.mapPolygon.addListener('click', () =>
              onPolygonClicked(dataPolygon.data),
            );
          }
          dataPolygon.mapPolygon.setMap(mapInstance);
        });
      }
    } else {
      dataPolygons.forEach(dataPolygon => dataPolygon.mapPolygon.setMap(null));
    }

    // atribuir o mapa para nulo no unmount estava causando "piscadas" do mapa
    // nós não precisamos atribuir para nulo de fato, uma vez que criamos
    // uma instância de mapa em cada um dos componentes
    // também não parece que haverá vazamento de memória não fazendo a atribuição
    // o mesmo acontece para os marcadores
    /* return () =>
      dataPolygons.forEach(dataPolygon => dataPolygon.mapPolygon.setMap(null)); */
  }, [polygons, dataPolygons, mapInstance, onPolygonClicked]);

  return {
    dataPolygons,
  };
};