fix(map-plugin): some data is incorrect (#1717)

* fix: data is incorrect

* fix: the data is incorrect when switch page at details

* feat: improve map configuration

* fix: shouldn't display tip when type = point

* fix: cache

packages/plugins/map/src/client/block/MapBlock.tsx

@@ -14,14 +14,13 @@ const defaultImage =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA/CAYAAACM5Lr9AAAFkklEQVR42s3VaWxUVRjG8ddiEKPRxAQTCVSWLnZaWmjpTgulpYUBExP9Agou4IKAogUKAgItlNJCgUIXINFPfsFoDCjibkQRI0QIICAQWUpZugKtpcv0+DxyYqaTe2/vTLf58Etu7znnPf+0k44opQw5i5qsjIFs2APHoBZatFq+02vZeq94yyKs0dOjsAzOTCtuVtNKWtX0UpeaXqHU07tgt4ZnvuMa93Avz/CsniE2WIQV3iEaCDnQ8F/MTgZ4h2d4ljNgmZ4pFszDpmIRIuFP57YWDMcFu7uHMziLMyEKxJBl2MbbM6DZub2NQ3sUZ3K2vkMMGIdNKbi1ADqcZe1q2i7VKzibd8BCEE8GUQ3PQ4ez3KWcGNCbeAfv0neKm85hWRvqo+Hu1LJ2HuwTvAt3tkAciKbDIDO/7iE4l7X9rpqCA30pa3uLwt3nYRAIuIfV5mcWN6msnapf8G405IGQMGry+prB0DiloqPfwng3G3SLDltXnTt5S6PK3NnRr9jAFhDJyLsZAJcz8SGcjOr+xAa0XGGTpOfeSMrYUKcyKlx+gS1oSkbY9VXpm2+rjHKXX2ALm2TS2qq96duaVHp5u19gC5skbc3V05N23FWT8NIfsIVNkra6siGttE2llbX7h9JWhaZ6mfj+lfaJZW3Kn6DJJRNWXWqbgN+Y39jRqtDUKKkrL15PxfdjammrfyhpVmiqlNQVfx9KwX/cFJT6A7awSVLeu1CeUlinxu9o8QsphbUKTWUyfvn5Wcm511QSXvoDtrBJkpedewzaE/E58wdsYZMopSQ55+z+pKK6fo9KKqpXaDkAIgxLWnomK3H1JZVQ0tyv2ICW6XAvLHHJ6QD4K6GgRsVjQ3/g3WzQLffCKGHJqfHgisOXaNy2f/oU7+TdukGIUW5xJ0vic6+oWGzsS7yTd4NoncPiF594GC7FFlSrcVub+gTv4p36btE6h1Fc9nFn7IpzKmZrY5/gXbwTxI0O8xD77rGPYtZeVtE42Jt4B+8C8WAcNu6dPwZDzVh8PYzdcqdXcDbvgMdBPDHEOG7R0Xkxqy6oKAzpDZzNO0AMmIfFvH1kABwZk1epIotv9yjOxOyj+g4xYB4W/dbvlAAdozGsJ3Gmni0mzMPGLvyN6IMo/NojNt/qEZyFmR+CWLAIW3CYaDDUR+D/TTgGdwdncJaeKRbMw8bM/9XdosjlZ5VjU0O3cAZngXTBPCzqzV/cPQAXHeuqVBgu8IVj/TXFGXqWdME8LHLez55mRSw9qUI31fuEZzFjNogNFmFvHPQUACfC8IUbUlTvlbDcSsWzeobYYB42+vWfjDwbnn3c6zCewdnnQGwyD4t47UcjAXA2JO+qCi6ss4V7eUafFZuswn4wM8ex+LgKwqV2cC/OzAXxgnlY+KvfmxkIVaPyr6tRhbWWuId79RnxgnmYY+53VlaHLj2lRm6stRSSc0ph7xoQL1mEzfnWyhPQNrKgGgE1hrjGPTAExEvmYWGvfNOVPUErz6vhiDDCNez5GMQHVmFfd2Vq6MLD6smCGkNc4x4QH5iHPfXyV125H64NX1eFkOpO+I5reo/4wDws9KUDdhSPxFdNIGLc8R3XQHxkFfalHYnB8w6qYRuqO+E7roH4yDws5MX9dtwHlYF5lQi6qYjPfKfXxEcWYbO/sKtsBP50QxFFI/D/De8qQLrBPCwYizY9M2r+of/D+Mx3ID6zDJv1uaVwGfAIBDqGJsbhZ9eQ/BuK+OwYlhzPNe7hXh9Yhe0zwqBB4IAYouCZn1wIXH5GEZ/d1sjBMzzrBfOwoBf2GWFYBMS4C03JWRA087OaoBmf3uCz5zrP8Kx9lmF7jXiE2RbBs95ghB0MIo8/pS0OeJAzvOBLmKY//BAGURBN+jmMa3qPkLdh/wKOL8SpLbnYFgAAAABJRU5ErkJggg==';
 
 export const MapBlock = (props) => {
-  const { fieldNames, dataSource = [], fixedBlock, zoom, selectedRecordKeys, setSelectedRecordKeys } = useProps(props);
+  const { fieldNames, dataSource = [], fixedBlock, zoom, setSelectedRecordKeys } = useProps(props);
   const { getField, getPrimaryKey } = useCollection();
   const field = getField(fieldNames?.field);
   const [isMapInitialization, setIsMapInitialization] = useState(false);
   const mapRef = useRef<AMapForwardedRefProps>();
   const geometryUtils: AMap.IGeometryUtil = mapRef.current?.aMap?.GeometryUtil;
   const [record, setRecord] = useState();
-  const [visible, setVisible] = useState(false);
   const [selectingMode, setSelecting] = useState('');
   const { t } = useMapTranslation();
   const compile = useCompile();
@@ -166,7 +165,6 @@ export const MapBlock = (props) => {
         }
 
         if (data) {
-          setVisible(true);
           setRecord(data);
         }
       };
@@ -241,9 +239,7 @@ export const MapBlock = (props) => {
           ) : null}
         </Space>
       </div>
-      <RecordProvider record={record}>
-        <MapBlockDrawer visible={visible} setVisible={setVisible} record={null} />
-      </RecordProvider>
+      <MapBlockDrawer record={record} setVisible={setRecord} />
       <AMap
         {...field?.uiSchema?.['x-component-props']}
         ref={mapRefCallback}
@@ -261,7 +257,7 @@ export const MapBlock = (props) => {
 };
 
 const MapBlockDrawer = (props) => {
-  const { visible, setVisible } = props;
+  const { setVisible, record } = props;
   const fieldSchema = useFieldSchema();
   const schema: Schema = useMemo(
     () =>
@@ -276,8 +272,10 @@ const MapBlockDrawer = (props) => {
 
   return (
     schema && (
-      <ActionContext.Provider value={{ visible, setVisible }}>
+      <ActionContext.Provider value={{ visible: !!record, setVisible }}>
+        <RecordProvider record={record}>
           <RecursionField schema={schema} name={schema.name} />
+        </RecordProvider>
       </ActionContext.Provider>
     )
   );

packages/plugins/map/src/client/components/AMap.tsx

@@ -19,6 +19,10 @@ export interface AMapComponentProps {
   onChange?: (value: number[]) => void;
   disabled?: boolean;
   mapType: string;
+  /**
+   * only ReadPretty
+   */
+  readonly: string;
   zoom: number;
   type: MapEditorType;
   style?: React.CSSProperties;
@@ -80,7 +84,7 @@ export interface AMapForwardedRefProps {
 
 const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps>((props, ref) => {
   const { accessKey, securityJsCode } = useMapConfiguration(props.mapType) || {};
-  const { value, onChange, block = false, disabled = block, zoom = 13, overlayCommonOptions } = props;
+  const { value, onChange, block = false, readonly, disabled = block, zoom = 13, overlayCommonOptions } = props;
   const { t } = useMapTranslation();
   const fieldSchema = useFieldSchema();
   const aMap = useRef<any>();
@@ -252,7 +256,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
   // 编辑时
   useEffect(() => {
     if (!aMap.current) return;
-    if (!value || overlay.current) {
+    if (!value || (!readonly && overlay.current)) {
       return;
     }
 
@@ -260,10 +264,11 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
     // 聚焦在编辑的位置
     map.current.setFitView([nextOverlay]);
     overlay.current = nextOverlay;
-
+    if (!disabled) {
       createEditor();
       setTarget();
-  }, [value, needUpdateFlag, type, commonOptions]);
+    }
+  }, [value, needUpdateFlag, type, commonOptions, disabled, readonly]);
 
   // 当在编辑时，关闭 mouseTool
   useEffect(() => {
@@ -285,6 +290,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
     createEditor();
   }, [disabled, needUpdateFlag, type]);
 
+  // 当值变更时，toggle mouseTool
   useEffect(() => {
     if (!mouseTool.current || !editor.current) return;
     const target = editor.current.getTarget();
@@ -310,7 +316,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
       plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.PolylineEditor', 'AMap.CircleEditor'],
     })
       .then((amap) => {
-        setTimeout(() => {
+        requestIdleCallback(() => {
           map.current = new amap.Map(id.current, {
             resizeEnable: true,
             zoom,
@@ -318,7 +324,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
           aMap.current = amap;
           setErrMessage('');
           forceUpdate([]);
-        }, Math.random() * 300);
+        });
       })
       .catch((err) => {
         if (err.includes('多个不一致的 key')) {
@@ -393,6 +399,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
               icon={<SyncOutlined />}
             ></Button>
           </div>
+          {type !== 'point' ? (
             <div
               className={css`
                 position: absolute;
@@ -402,8 +409,13 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
                 pointer-events: none;
               `}
             >
-            <Alert message={t('Click to select the starting point and double-click to end the drawing')} type="info" />
+              <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;

packages/plugins/map/src/client/components/Configuration.tsx

@@ -3,7 +3,7 @@ import { useBoolean } from 'ahooks';
 import { Button, Card, Form, Input, message, Tabs } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import { MapTypes } from '../constants';
-import { MapConfigurationResourceKey, useMapConfiguration } from '../hooks';
+import { MapConfigurationResourceKey, getSSKey, useMapConfiguration } from '../hooks';
 import { useMapTranslation } from '../locale';
 
 const AMapConfiguration = ({ type }) => {
@@ -30,6 +30,7 @@ const AMapConfiguration = ({ type }) => {
         type,
       })
       .then((res) => {
+        sessionStorage.removeItem(getSSKey(type));
         message.success(t('Saved successfully'));
       })
       .catch((err) => {

packages/plugins/map/src/client/components/ReadPretty.tsx

@@ -1,5 +1,5 @@
 import { useField, useFieldSchema, useForm } from '@formily/react';
-import { EllipsisWithTooltip, useCollection, useTableBlockContext } from '@nocobase/client';
+import { EllipsisWithTooltip, useCollection } from '@nocobase/client';
 import React, { useEffect } from 'react';
 import AMapComponent from './AMap';
 
@@ -10,8 +10,7 @@ const ReadPretty = (props) => {
   const collectionField = getField(fieldSchema.name);
   const mapType = props.mapType || collectionField?.uiSchema['x-component-props']?.mapType;
   const field = useField();
-  const form = useForm()
-
+  const form = useForm();
   useEffect(() => {
     if (!field.title && collectionField?.uiSchema?.title) {
       field.title = collectionField.uiSchema.title;
@@ -28,7 +27,7 @@ const ReadPretty = (props) => {
     );
   }
 
-  return mapType === 'amap' ? <AMapComponent mapType={mapType} {...props}></AMapComponent> : null;
+  return mapType === 'amap' ? <AMapComponent readonly mapType={mapType} {...props}></AMapComponent> : null;
 };
 
 export default ReadPretty;

packages/plugins/map/src/client/hooks/useMapConfiguration.ts

@@ -1,15 +1,38 @@
-import { useRequest } from "@nocobase/client";
+import { useRequest } from '@nocobase/client';
+import { useMemo } from 'react';
 
 export const MapConfigurationResourceKey = 'map-configuration';
+export const getSSKey = (type) => {
+  return `NOCOBASE_PLUGIN_MAP_CONFIGURATION_${type}`;
+};
 
 export const useMapConfiguration = (type: string) => {
-  return useRequest({
+  // cache
+  const config = useMemo(() => {
+    const d = sessionStorage.getItem(getSSKey(type));
+    if (d) {
+      return JSON.parse(d);
+    }
+    return d;
+  }, [type]);
+
+  if (config) return config;
+
+  return useRequest(
+    {
       resource: MapConfigurationResourceKey,
       action: 'get',
       params: {
         type,
       },
-  }).data?.data;
-}
-
-
+    },
+    {
+      onSuccess(data) {
+        sessionStorage.setItem(getSSKey(type), JSON.stringify(data?.data));
+      },
+      refreshOnWindowFocus: false,
+      refreshDeps: [],
+      manual: config ? true : false,
+    },
+  ).data?.data;
+};