@nocobase/plugin-map 0.11.1-alpha.5 → 0.12.0-alpha.2

package/src/client/components/GoogleMaps/Map.tsx

@@ -1,470 +0,0 @@
-import { SyncOutlined } from '@ant-design/icons';
-import { useFieldSchema } from '@formily/react';
-import { Loader } from '@googlemaps/js-api-loader';
-import { css, useAPIClient, useCollection } from '@nocobase/client';
-import { useMemoizedFn } from 'ahooks';
-import { Alert, App, Button, Spin } from 'antd';
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { defaultImage } from '../../constants';
-import { useMapConfiguration } from '../../hooks';
-import { useMapTranslation } from '../../locale';
-import { MapEditorType } from '../../types';
-import { Search } from './Search';
-import { getCurrentPosition, getIcon } from './utils';
-
-export type OverlayOptions = google.maps.PolygonOptions & google.maps.MarkerOptions & google.maps.PolylineOptions;
-
-export const getDrawingMode = (type: MapEditorType) => {
-  if (type === 'point') {
-    return 'marker';
-  } else if (type === 'lineString') {
-    return 'polyline';
-  }
-  return type;
-};
-
-const methodMapping = {
-  point: {
-    propertyKey: 'position',
-    overlay: 'Marker',
-  },
-  polygon: {
-    propertyKey: 'paths',
-    overlay: 'Polygon',
-  },
-  lineString: {
-    propertyKey: 'path',
-    overlay: 'Polyline',
-  },
-  circle: {
-    transformOptions(value) {
-      return {
-        center: new google.maps.LatLng(value[1], value[0]),
-        radius: value[2],
-      } as google.maps.CircleOptions;
-    },
-    overlay: 'Circle',
-  },
-};
-
-export interface GoogleMapsComponentProps {
-  value?: any;
-  onChange?: (value: number[]) => void;
-  disabled?: boolean;
-  mapType: string;
-  /**
-   * only ReadPretty
-   */
-  readonly: string;
-  zoom: number;
-  type: MapEditorType;
-  style?: React.CSSProperties;
-  overlayCommonOptions?: OverlayOptions;
-  block?: boolean;
-}
-
-export interface GoogleMapForwardedRefProps {
-  setOverlay: (t: MapEditorType, v: any, o?: OverlayOptions) => google.maps.MVCObject;
-  getOverlay: (t: MapEditorType, v: any, o?: OverlayOptions) => google.maps.MVCObject;
-  setFitView: (overlays: google.maps.MVCObject[]) => void;
-  createDraw: (onlyCreate?: boolean, additionalOptions?: OverlayOptions) => any;
-  map: google.maps.Map;
-  overlay: google.maps.MVCObject;
-  drawingManager: google.maps.drawing.DrawingManager;
-  errMessage?: string;
-}
-
-export const GoogleMapsComponent = React.forwardRef<GoogleMapForwardedRefProps, GoogleMapsComponentProps>(
-  (props, ref) => {
-    const { value, onChange, block = false, readonly, disabled = block, zoom = 13, overlayCommonOptions } = props;
-    const { accessKey } = useMapConfiguration(props.mapType) || {};
-    const { t } = useMapTranslation();
-    const { getField } = useCollection();
-    const fieldSchema = useFieldSchema();
-    const drawingManagerRef = useRef<google.maps.drawing.DrawingManager>();
-    const map = useRef<google.maps.Map>();
-    const overlayRef = useRef<google.maps.Marker | google.maps.Polygon | google.maps.Polyline | google.maps.Circle>();
-    const [needUpdateFlag, forceUpdate] = useState([]);
-    const [errMessage, setErrMessage] = useState('');
-    const api = useAPIClient();
-    const { modal } = App.useApp();
-
-    const type = useMemo<MapEditorType>(() => {
-      if (props.type) return props.type;
-      const collectionField = getField(fieldSchema?.name);
-      return collectionField?.interface;
-    }, [props?.type, fieldSchema?.name]);
-
-    const drawingMode = useRef(getDrawingMode(type) as google.maps.drawing.OverlayType);
-
-    const [commonOptions] = useState<OverlayOptions>({
-      strokeWeight: 5,
-      strokeColor: '#4e9bff',
-      fillColor: '#4e9bff',
-      strokeOpacity: 1,
-      editable: !disabled,
-      draggable: !disabled,
-      ...overlayCommonOptions,
-    });
-
-    const navigate = useNavigate();
-    const mapContainerRef = useRef<HTMLDivElement>();
-    const cleanupOverlayListenersRef = useRef<Set<() => void>>(new Set());
-
-    const onAndOffListenOverlay = useMemoizedFn((target: typeof overlayRef.current) => {
-      cleanupOverlayListenersRef.current.forEach((cb) => {
-        cleanupOverlayListenersRef.current.delete(cb);
-      });
-
-      if ('getPath' in target) {
-        const mvcArray = target.getPath();
-        ['insert_at', 'remove_at', 'set_at'].forEach((event) => {
-          cleanupOverlayListenersRef.current.add(
-            mvcArray.addListener(event, () => {
-              onMapChange(target, true);
-            }).remove,
-          );
-        });
-      } else if (target instanceof google.maps.Circle) {
-        ['center_changed', 'radius_changed'].forEach((event) => {
-          cleanupOverlayListenersRef.current.add(
-            target.addListener(event, () => {
-              onMapChange(target, true);
-            }).remove,
-          );
-        });
-      }
-    });
-
-    const toRemoveOverlay = useMemoizedFn(() => {
-      if (overlayRef.current) {
-        overlayRef.current.unbindAll();
-        overlayRef.current.setMap(null);
-      }
-      if (type !== 'point') {
-        drawingManagerRef.current?.setDrawingMode(null);
-      }
-    });
-
-    const toCenter = useMemoizedFn((position) => {
-      if (map.current) {
-        map.current.setCenter(position);
-        map.current.setZoom(zoom);
-      }
-    });
-
-    const setupOverlay = useMemoizedFn((nextOverlay: typeof overlayRef.current) => {
-      toRemoveOverlay();
-      onAndOffListenOverlay(nextOverlay);
-      overlayRef.current = nextOverlay;
-    });
-
-    const setFitView = useMemoizedFn((overlays: google.maps.MVCObject[]) => {
-      const bounds = new google.maps.LatLngBounds();
-
-      overlays.forEach((overlay) => {
-        if (overlay instanceof google.maps.Marker) {
-          bounds.extend(overlay.getPosition());
-        } else if (overlay instanceof google.maps.Polyline || overlay instanceof google.maps.Polygon) {
-          const path = overlay.getPath();
-          for (let i = 0; i < path.getLength(); i++) {
-            bounds.extend(path.getAt(i));
-          }
-        } else if (overlay instanceof google.maps.Circle) {
-          bounds.union(overlay.getBounds());
-        }
-      });
-
-      map.current.setCenter(bounds.getCenter());
-    });
-
-    const onFocusOverlay = () => {
-      if (overlayRef.current) {
-        setFitView([overlayRef.current]);
-      }
-    };
-
-    const onMapChange = useMemoizedFn((target: typeof overlayRef.current, onlyChange = false) => {
-      let nextValue = null;
-
-      if (type === 'point') {
-        const { lat, lng } = (target as google.maps.Marker).getPosition();
-        nextValue = [lng(), lat()];
-      } else if (type === 'polygon' || type === 'lineString') {
-        nextValue = (target as google.maps.Polyline)
-          .getPath()
-          .getArray()
-          .map((item) => [item.lng(), item.lat()]);
-        if (nextValue.length < 2) {
-          return;
-        }
-      } else if (type === 'circle') {
-        const center = (target as google.maps.Circle).getCenter();
-        const radius = (target as google.maps.Circle).getRadius();
-        nextValue = [center.lng(), center.lat(), radius];
-      }
-
-      if (!onlyChange) {
-        setupOverlay(target);
-      }
-      onChange?.(nextValue);
-    });
-
-    const createDraw = useMemoizedFn((onlyCreate = false, additionalOptions?: OverlayOptions) => {
-      const currentOptions = {
-        ...commonOptions,
-        ...additionalOptions,
-        map: map.current,
-      };
-      drawingManagerRef.current = new google.maps.drawing.DrawingManager({
-        drawingMode: drawingMode.current,
-        drawingControl: false,
-        markerOptions: { ...currentOptions, icon: getIcon(defaultImage) },
-        polygonOptions: currentOptions,
-        polylineOptions: currentOptions,
-        circleOptions: currentOptions,
-        map: map.current,
-      });
-
-      if (!onlyCreate) {
-        drawingManagerRef.current.addListener('overlaycomplete', (event: { type: string; overlay: unknown }) => {
-          const overlay = event.overlay as google.maps.Marker;
-          onMapChange(overlay);
-        });
-      }
-      return drawingManagerRef.current;
-    });
-
-    const getOverlay = useMemoizedFn((t = type, v = value, o?: OverlayOptions) => {
-      const mapping = methodMapping[t];
-      if (!mapping) {
-        return;
-      }
-      const options = { ...commonOptions, icon: getIcon(defaultImage), ...o };
-
-      if ('transformOptions' in mapping) {
-        Object.assign(options, mapping.transformOptions(v));
-      } else if ('propertyKey' in mapping) {
-        options[mapping.propertyKey] = Array.isArray(v[0])
-          ? v.map((item) => {
-              return new google.maps.LatLng(item[1], item[0]);
-            })
-          : new google.maps.LatLng(v[1], v[0]);
-      }
-
-      const overlay = new google.maps[mapping.overlay](options);
-      return overlay;
-    });
-
-    const setOverlay = useMemoizedFn((t = type, v = value, o?: OverlayOptions) => {
-      if (!map.current) return;
-      const nextOverlay = getOverlay(t, v, {
-        ...o,
-        map: map.current,
-      }) as google.maps.Polyline;
-      return nextOverlay;
-    });
-
-    // edit mode
-    useEffect(() => {
-      if (!map.current) return;
-      if (!value || (!readonly && overlayRef.current)) {
-        return;
-      }
-      const nextOverlay = setOverlay();
-      setupOverlay(nextOverlay);
-      // Focus on the overlay
-      setFitView([nextOverlay]);
-    }, [value, needUpdateFlag, type, disabled, readonly, setOverlay, setFitView, setupOverlay]);
-
-    useEffect(() => {
-      if (!accessKey || map.current || !mapContainerRef.current) return;
-      let loader: Loader;
-      try {
-        loader = new Loader({
-          apiKey: accessKey,
-          version: 'weekly',
-          language: api.auth.getLocale(),
-        });
-      } catch (err) {
-        setErrMessage(t('Load google maps failed, Please check the Api key and refresh the page'));
-        return;
-      }
-
-      // google maps api error
-      const error = console.error;
-      console.error = (err, ...args) => {
-        if (err?.includes('InvalidKeyMapError')) {
-          setErrMessage(t('Load google maps failed, Please check the Api key and refresh the page'));
-        }
-        error(err, ...args);
-      };
-
-      Promise.all([loader.importLibrary('drawing'), loader.importLibrary('core'), loader.importLibrary('geometry')])
-        .then(async (res) => {
-          const center = await getCurrentPosition();
-          map.current = new google.maps.Map(mapContainerRef.current, {
-            zoom,
-            center,
-            mapTypeId: google.maps.MapTypeId.ROADMAP,
-            zoomControl: false,
-            streetViewControl: false,
-            panControl: false,
-            mapTypeControl: false,
-            fullscreenControl: false,
-          });
-          setErrMessage('');
-          forceUpdate([]);
-        })
-        .catch((err) => {
-          if (err instanceof Error) {
-            setErrMessage(err.message);
-            return;
-          }
-        });
-
-      return () => {
-        map.current?.unbindAll();
-        map.current = null;
-        drawingManagerRef.current?.unbindAll();
-      };
-    }, [accessKey, api.auth, type, zoom]);
-
-    useEffect(() => {
-      if (!map.current || !type || disabled || drawingManagerRef.current) return;
-      createDraw();
-    }, [createDraw, disabled, needUpdateFlag, type]);
-
-    useImperativeHandle(ref, () => ({
-      setOverlay,
-      getOverlay,
-      setFitView,
-      createDraw,
-      map: map.current,
-      overlay: overlayRef.current,
-      drawingManager: drawingManagerRef.current,
-      errMessage,
-    }));
-
-    const onReset = useMemoizedFn(() => {
-      const ok = () => {
-        toRemoveOverlay();
-        drawingManagerRef.current.setDrawingMode(drawingMode.current);
-        onChange?.(null);
-      };
-      modal.confirm({
-        title: t('Clear the canvas'),
-        content: t('Are you sure to clear the canvas?'),
-        okText: t('Confirm'),
-        cancelText: t('Cancel'),
-        onOk() {
-          ok();
-        },
-      });
-    });
-
-    if (!accessKey || errMessage) {
-      return (
-        <Alert
-          action={
-            <Button type="primary" onClick={() => navigate('/admin/settings/map/configuration?tab=google')}>
-              {t('Go to the configuration page')}
-            </Button>
-          }
-          message={errMessage || t('Please configure the Api key first')}
-          type="error"
-        />
-      );
-    }
-
-    return (
-      <div
-        className={css`
-          position: relative;
-          height: 500px;
-        `}
-      >
-        {!map.current && (
-          <div
-            className={css`
-              position: absolute;
-              inset: 0;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            `}
-          >
-            <Spin />
-          </div>
-        )}
-        {!disabled ? (
-          <>
-            {map.current && <Search toCenter={toCenter} mapRef={map} />}
-            <div
-              className={css`
-                position: absolute;
-                bottom: 80px;
-                right: 20px;
-                z-index: 10;
-              `}
-            >
-              <Button
-                onClick={onFocusOverlay}
-                disabled={!overlayRef.current}
-                type="primary"
-                shape="round"
-                size="large"
-                icon={<SyncOutlined />}
-              ></Button>
-            </div>
-            {type === 'lineString' || type === 'polygon' ? (
-              <div
-                className={css`
-                  position: absolute;
-                  bottom: 20px;
-                  left: 10px;
-                  z-index: 2;
-                  pointer-events: none;
-                `}
-              >
-                <Alert
-                  message={t('Click to select the starting point and double-click to end the drawing')}
-                  type="info"
-                />
-              </div>
-            ) : null}
-            <div
-              className={css`
-                position: absolute;
-                bottom: 20px;
-                right: 20px;
-                z-index: 2;
-              `}
-            >
-              <Button
-                disabled={!value}
-                style={{
-                  height: '40px',
-                }}
-                onClick={onReset}
-                type="primary"
-                danger
-              >
-                {t('Clear')}
-              </Button>
-            </div>
-          </>
-        ) : null}
-        <div
-          ref={mapContainerRef}
-          className={css`
-            width: 100%;
-            height: 100%;
-          `}
-          style={props?.style}
-        ></div>
-      </div>
-    );
-  },
-);

package/src/client/components/GoogleMaps/Search.tsx

@@ -1,107 +0,0 @@
-import { css } from '@nocobase/client';
-import { useDebounceFn } from 'ahooks';
-import { message, Select } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
-import { useMapTranslation } from '../../locale';
-
-interface SearchProps {
-  toCenter: (p: any) => void;
-  mapRef: React.RefObject<google.maps.Map>;
-}
-
-export const Search = (props: SearchProps) => {
-  const { toCenter, mapRef } = props;
-  const { t } = useMapTranslation();
-  const placeSearchRef = useRef<google.maps.places.AutocompleteService>();
-  const [options, setOptions] = useState([]);
-
-  useEffect(() => {
-    google.maps
-      .importLibrary('places')
-      .then((places: google.maps.PlacesLibrary) => {
-        placeSearchRef.current = new places.AutocompleteService();
-      })
-      .catch(() => {
-        message.error('Please configure the Google API Key correctly');
-      });
-  }, [mapRef]);
-
-  const { run: onSearch } = useDebounceFn(
-    (keyword) => {
-      if (!placeSearchRef.current) {
-        return;
-      }
-      placeSearchRef.current.getPlacePredictions(
-        {
-          input: keyword || ' ',
-        },
-        (result, status) => {
-          if (status === google.maps.places.PlacesServiceStatus.OK) {
-            setOptions(
-              result.map((item: any) => {
-                const structured = item.structured_formatting;
-                return {
-                  ...item,
-                  label: `${structured.main_text}${structured.secondary_text ? ' ' + structured.secondary_text : ''}`,
-                  value: item.place_id,
-                };
-              }),
-            );
-          } else {
-            setOptions([]);
-            return;
-          }
-        },
-      );
-    },
-    {
-      wait: 300,
-    },
-  );
-
-  const onSelect = (value) => {
-    const place = options.find((o) => {
-      return o.value === value;
-    });
-    const service = new google.maps.places.PlacesService(mapRef.current);
-    service.getDetails(
-      {
-        placeId: place.place_id,
-        fields: ['geometry'],
-      },
-      (result, status) => {
-        if (status === google.maps.places.PlacesServiceStatus.OK) {
-          toCenter(result.geometry.location);
-        }
-      },
-    );
-  };
-
-  return (
-    <div
-      className={css`
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        z-index: 10;
-        width: calc(100% - 20px);
-      `}
-    >
-      <Select
-        id="google-map-search"
-        showSearch
-        allowClear
-        style={{
-          background: 'rgba(255, 255, 255, 0.8)',
-        }}
-        placeholder={t('Enter keywords to search')}
-        filterOption={false}
-        onSearch={onSearch}
-        onSelect={onSelect}
-        options={options}
-      ></Select>
-    </div>
-  );
-};
-
-export default Search;

package/src/client/components/GoogleMaps/index.ts

@@ -1,2 +0,0 @@
-export * from './Block';
-export * from './Map';

package/src/client/components/GoogleMaps/utils.ts

@@ -1,33 +0,0 @@
-export const getIcon = (url) => {
-  return {
-    url,
-    scaledSize: {
-      width: 19,
-      height: 32,
-    },
-    labelOrigin: new google.maps.Point(19 / 2, 32 + 10),
-  } as google.maps.Icon;
-};
-
-export const getCurrentPosition: () => Promise<{ lat: number; lng: number }> = () => {
-  return new Promise((resolve) => {
-    const defaultLatLng = () => {
-      // google company lat and lng
-      resolve({ lat: 37.4224764, lng: -122.0842499 });
-    };
-
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          const { latitude, longitude } = position.coords;
-          resolve({ lat: latitude, lng: longitude });
-        },
-        () => {
-          defaultLatLng();
-        },
-      );
-    } else {
-      defaultLatLng();
-    }
-  });
-};

package/src/client/components/Map.tsx

@@ -1,33 +0,0 @@
-import { connect, mapReadPretty } from '@formily/react';
-import { css } from '@nocobase/client';
-import React from 'react';
-import { AMapComponentProps } from './AMap';
-import Designer from './Designer';
-import { MapComponent } from './MapComponent';
-import ReadPretty from './ReadPretty';
-
-type MapProps = AMapComponentProps;
-
-const InternalMap = connect((props: MapProps) => {
-  return (
-    <div
-      className={css`
-        height: 100%;
-        border: 1px solid transparent;
-        .ant-formily-item-error & {
-          border: 1px solid #ff4d4f;
-        }
-      `}
-    >
-      <MapComponent {...props} />
-    </div>
-  );
-}, mapReadPretty(ReadPretty));
-
-const Map = InternalMap as typeof InternalMap & {
-  Designer: typeof Designer;
-};
-
-Map.Designer = Designer;
-
-export { Map };

package/src/client/components/MapBlock.tsx

@@ -1,24 +0,0 @@
-import React, { useMemo } from 'react';
-import { useMapTranslation } from '../locale';
-import { AMapBlock } from './AMap';
-import { GoogleMapsBlock } from './GoogleMaps';
-
-const MapBlocks = {
-  amap: AMapBlock,
-  google: GoogleMapsBlock,
-};
-
-export const MapBlockComponent: React.FC<any> = (props) => {
-  const { t } = useMapTranslation();
-  const { mapType } = props;
-
-  const Component = useMemo(() => {
-    return MapBlocks[mapType];
-  }, [mapType]);
-
-  if (!Component) {
-    return <div>{t(`The ${mapType} cannot found`)}</div>;
-  }
-
-  return <Component {...props} />;
-};

package/src/client/components/MapComponent.tsx

@@ -1,23 +0,0 @@
-import React, { useMemo } from 'react';
-import { useMapTranslation } from '../locale';
-import { AMapComponent } from './AMap';
-import { GoogleMapsComponent } from './GoogleMaps';
-
-const MapComponents = {
-  amap: AMapComponent,
-  google: GoogleMapsComponent,
-};
-
-export const MapComponent = React.forwardRef<any, any>((props, ref) => {
-  const { t } = useMapTranslation();
-  const { mapType } = props;
-  const Component = useMemo(() => {
-    return MapComponents[mapType];
-  }, [mapType]);
-
-  if (!Component) {
-    return <div>{t(`The ${mapType} cannot found`)}</div>;
-  }
-
-  return <Component ref={ref} {...props} />;
-});