@nocobase/plugin-map 0.9.1-alpha.1 → 0.9.2-alpha.1

package/src/client/components/AMap.tsx

@@ -6,20 +6,28 @@ import { useFieldSchema } from '@formily/react';
 import { useCollection } from '@nocobase/client';
 import { useMemoizedFn } from 'ahooks';
 import { Alert, Button, Modal } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useCallback, useRef, useState, useMemo, useImperativeHandle } from 'react';
 import { useHistory } from 'react-router';
 import { useMapConfiguration } from '../hooks';
 import { useMapTranslation } from '../locale';
 import Search from './Search';
 
-interface AMapComponentProps {
-  accessKey: string;
-  securityJsCode: string;
-  value: any;
-  onChange: (value: number[]) => void;
+export type MapEditorType = 'point' | 'polygon' | 'lineString' | 'circle';
+
+export interface AMapComponentProps {
+  value?: any;
+  onChange?: (value: number[]) => void;
   disabled?: boolean;
   mapType: string;
+  /**
+   * only ReadPretty
+   */
+  readonly: string;
   zoom: number;
+  type: MapEditorType;
+  style?: React.CSSProperties;
+  overlayCommonOptions?: AMap.PolylineOptions & AMap.PolygonOptions;
+  block?: boolean;
 }
 
 const methodMapping = {
@@ -53,9 +61,30 @@ const methodMapping = {
   },
 };
 
-const AMapComponent: React.FC<AMapComponentProps> = (props) => {
+export interface AMapForwardedRefProps {
+  setOverlay: (t: MapEditorType, v: any, o?: AMap.PolylineOptions & AMap.PolygonOptions & AMap.MarkerOptions) => any;
+  getOverlay: (t: MapEditorType, v: any, o?: AMap.PolylineOptions & AMap.PolygonOptions & AMap.MarkerOptions) => any;
+  createMouseTool: (type: MapEditorType) => void;
+  createEditor: (type: MapEditorType) => void;
+  executeMouseTool: (type: MapEditorType) => void;
+
+  aMap: any;
+  map: AMap.Map;
+  editor: () => {
+    getTarget: () => AMap.Polygon;
+    setTarget: (o: any) => void;
+    close: () => void;
+    on: (event: string, callback: (e: any) => void) => void;
+  };
+  mouseTool: () => {
+    close: (clear?: boolean) => void;
+  };
+  overlay: AMap.Polygon;
+}
+
+const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps>((props, ref) => {
   const { accessKey, securityJsCode } = useMapConfiguration(props.mapType) || {};
-  const { value, onChange, disabled, zoom = 13 } = props;
+  const { value, onChange, block = false, readonly, disabled = block, zoom = 13, overlayCommonOptions } = props;
   const { t } = useMapTranslation();
   const fieldSchema = useFieldSchema();
   const aMap = useRef<any>();
@@ -64,9 +93,13 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
   const [needUpdateFlag, forceUpdate] = useState([]);
   const [errMessage, setErrMessage] = useState('');
   const { getField } = useCollection();
-  const collectionField = getField(fieldSchema.name);
-  const type = collectionField?.interface;
-  const overlay = useRef<any>();
+  const type = useMemo<MapEditorType>(() => {
+    if (props.type) return props.type;
+    const collectionField = getField(fieldSchema?.name);
+    return collectionField?.interface;
+  }, [props?.type, fieldSchema?.name]);
+
+  const overlay = useRef<AMap.Polygon>();
   const editor = useRef(null);
   const history = useHistory();
   const id = useRef(`nocobase-map-${type}-${Date.now().toString(32)}`);
@@ -76,16 +109,17 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
     strokeColor: '#4e9bff',
     fillColor: '#4e9bff',
     strokeOpacity: 1,
+    ...overlayCommonOptions,
   });
 
   const toRemoveOverlay = useMemoizedFn(() => {
     if (overlay.current) {
-      map.current?.remove(overlay.current);
+      overlay.current.remove();
     }
   });
 
   const setTarget = useMemoizedFn(() => {
-    if (!disabled && type !== 'point' && editor.current) {
+    if ((!disabled || block) && type !== 'point' && editor.current) {
       editor.current.setTarget(overlay.current);
       editor.current.open();
     }
@@ -113,25 +147,38 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
       overlay.current = target;
       setTarget();
     }
-    onChange(nextValue);
+    onChange?.(nextValue);
   });
 
-  const createEditor = useMemoizedFn(() => {
-    const mapping = methodMapping[type as keyof typeof methodMapping];
+  const createEditor = useMemoizedFn((curType = type) => {
+    const mapping = methodMapping[curType];
     if (mapping && 'editor' in mapping && !editor.current) {
-      editor.current = new aMap.current[mapping.editor](map.current);
+      editor.current = new aMap.current[mapping.editor](map.current, null, {
+        createOptions: commonOptions,
+        editOptions: commonOptions,
+        controlPoint: {
+          ...commonOptions,
+          strokeWeight: 3,
+        },
+        midControlPoint: {
+          ...commonOptions,
+          strokeWeight: 2,
+          fillColor: '#fff',
+        },
+      });
       editor.current.on('adjust', function ({ target }) {
         onMapChange(target, true);
       });
       editor.current.on('move', function ({ target }) {
         onMapChange(target, true);
       });
+      return editor.current;
     }
   });
 
-  const executeMouseTool = useMemoizedFn(() => {
+  const executeMouseTool = useMemoizedFn((curType = type) => {
     if (!mouseTool.current || editor.current?.getTarget()) return;
-    const mapping = methodMapping[type as keyof typeof methodMapping];
+    const mapping = methodMapping[curType];
     if (!mapping) {
       return;
     }
@@ -140,15 +187,13 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
     } as AMap.PolylineOptions);
   });
 
-  const createMouseTool = useMemoizedFn(() => {
+  const createMouseTool = useMemoizedFn((curType: MapEditorType = type) => {
     if (mouseTool.current) return;
-
     mouseTool.current = new aMap.current.MouseTool(map.current);
     mouseTool.current.on('draw', function ({ obj }) {
       onMapChange(obj);
     });
-
-    executeMouseTool();
+    executeMouseTool(curType);
   });
 
   const toCenter = (position, imm?: boolean) => {
@@ -164,7 +209,7 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
         editor.current.setTarget();
         editor.current.close();
       }
-      onChange(null);
+      onChange?.(null);
     };
     Modal.confirm({
       title: t('Clear the canvas'),
@@ -183,33 +228,47 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
     }
   };
 
+  const getOverlay = useCallback(
+    (t = type, v = value, o?: AMap.PolylineOptions & AMap.PolygonOptions) => {
+      const mapping = methodMapping[t];
+      if (!mapping) {
+        return;
+      }
+      const options = { ...commonOptions, ...o } as AMap.MarkerOptions;
+      if ('transformOptions' in mapping) {
+        Object.assign(options, mapping.transformOptions(v));
+      } else if ('propertyKey' in mapping) {
+        options[mapping.propertyKey] = v;
+      }
+
+      return new aMap.current[mapping.overlay](options);
+    },
+    [commonOptions],
+  );
+
+  const setOverlay = (t = type, v = value, o?: AMap.PolylineOptions & AMap.PolygonOptions) => {
+    if (!aMap.current) return;
+    const nextOverlay = getOverlay(t, v, o);
+    nextOverlay.setMap(map.current);
+    return nextOverlay;
+  };
+
   // 编辑时
   useEffect(() => {
     if (!aMap.current) return;
-    if (!value || overlay.current) {
+    if (!value || (!readonly && overlay.current)) {
       return;
     }
-    const mapping = methodMapping[type as keyof typeof methodMapping];
-    if (!mapping) {
-      return;
-    }
-    const options = { ...commonOptions };
-    if ('transformOptions' in mapping) {
-      Object.assign(options, mapping.transformOptions(value));
-    } else if ('propertyKey' in mapping) {
-      options[mapping.propertyKey] = value;
-    }
-    const nextOverlay = new aMap.current[mapping.overlay](options);
 
+    const nextOverlay = setOverlay();
     // 聚焦在编辑的位置
     map.current.setFitView([nextOverlay]);
-
-    nextOverlay.setMap(map.current);
     overlay.current = nextOverlay;
-
-    createEditor();
-    setTarget();
-  }, [value, needUpdateFlag, type, commonOptions]);
+    if (!disabled) {
+      createEditor();
+      setTarget();
+    }
+  }, [value, needUpdateFlag, type, commonOptions, disabled, readonly]);
 
   // 当在编辑时，关闭 mouseTool
   useEffect(() => {
@@ -231,6 +290,7 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
     createEditor();
   }, [disabled, needUpdateFlag, type]);
 
+  // 当值变更时，toggle mouseTool
   useEffect(() => {
     if (!mouseTool.current || !editor.current) return;
     const target = editor.current.getTarget();
@@ -256,7 +316,7 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
       plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.PolylineEditor', 'AMap.CircleEditor'],
     })
       .then((amap) => {
-        setTimeout(() => {
+        requestIdleCallback(() => {
           map.current = new amap.Map(id.current, {
             resizeEnable: true,
             zoom,
@@ -264,7 +324,7 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
           aMap.current = amap;
           setErrMessage('');
           forceUpdate([]);
-        }, Math.random() * 300);
+        });
       })
       .catch((err) => {
         if (err.includes('多个不一致的 key')) {
@@ -283,6 +343,19 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
     };
   }, [accessKey, type, securityJsCode]);
 
+  useImperativeHandle(ref, () => ({
+    setOverlay,
+    getOverlay,
+    createMouseTool,
+    createEditor,
+    executeMouseTool,
+    aMap: aMap.current,
+    map: map.current,
+    overlay: overlay.current,
+    mouseTool: () => mouseTool.current,
+    editor: () => editor.current,
+  }));
+
   if (!accessKey || errMessage) {
     return (
       <Alert
@@ -301,44 +374,48 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
     <div
       className={css`
         position: relative;
+        height: 500px;
       `}
       id={id.current}
-      style={{
-        height: '500px',
-      }}
+      style={props?.style}
     >
-      {/* bottom: 20px; right: 50%; transform: translateX(50%); z-index: 2; */}
-      <div
-        className={css`
-          position: absolute;
-          bottom: 80px;
-          right: 20px;
-          z-index: 10;
-        `}
-      >
-        <Button
-          onClick={onFocusOverlay}
-          disabled={!overlay.current}
-          type="primary"
-          shape="round"
-          size="large"
-          icon={<SyncOutlined />}
-        ></Button>
-      </div>
       {!disabled ? (
         <>
           <Search toCenter={toCenter} aMap={aMap.current} />
           <div
             className={css`
               position: absolute;
-              bottom: 20px;
-              left: 10px;
-              z-index: 2;
-              pointer-events: none;
+              bottom: 80px;
+              right: 20px;
+              z-index: 10;
             `}
           >
-            <Alert message={t('Click to select the starting point and double-click to end the drawing')} type="info" />
+            <Button
+              onClick={onFocusOverlay}
+              disabled={!overlay.current}
+              type="primary"
+              shape="round"
+              size="large"
+              icon={<SyncOutlined />}
+            ></Button>
           </div>
+          {type !== 'point' ? (
+            <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;
@@ -363,6 +440,6 @@ const AMapComponent: React.FC<AMapComponentProps> = (props) => {
       ) : null}
     </div>
   );
-};
+});
 
 export default AMapComponent;

package/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) => {

package/src/client/components/Map.tsx

@@ -1,14 +1,17 @@
 import { connect, mapReadPretty } from '@formily/react';
 import React from 'react';
-import AMapComponent from './AMap';
+import AMapComponent, { AMapComponentProps } from './AMap';
 import ReadPretty from './ReadPretty';
 import { css } from '@emotion/css';
 import Designer from './Designer';
 
-const InternalMap = connect((props) => {
+interface MapProps extends AMapComponentProps {}
+
+const InternalMap = connect((props: MapProps) => {
   return (
     <div
       className={css`
+        height: 100%;
         border: 1px solid transparent;
         .ant-formily-item-error & {
           border: 1px solid #ff4d4f;

package/src/client/components/ReadPretty.tsx

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

package/src/client/fields/schema.ts

@@ -41,17 +41,14 @@ export const commonSchema = {
       },
       'x-disabled': '{{ isOverride || !createOnly }}',
       default: 'amap',
-      enum: MapTypes
-    }
+      enum: MapTypes,
+    },
   },
-  schemaInitialize(schema: ISchema, { readPretty, block }) {
+  schemaInitialize(schema: ISchema, { block }) {
     if (block === 'Form') {
       Object.assign(schema, {
-        'x-component-props': {
-          readOnly: readPretty ? true : false
-        },
         'x-designer': 'Map.Designer',
       });
     }
   },
-}
+};

package/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({
-    resource: MapConfigurationResourceKey,
-    action: 'get',
-    params: {
-      type,
-    },
-  }).data?.data;
-}
+  // 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,
+      },
+    },
+    {
+      onSuccess(data) {
+        sessionStorage.setItem(getSSKey(type), JSON.stringify(data?.data));
+      },
+      refreshOnWindowFocus: false,
+      refreshDeps: [],
+      manual: config ? true : false,
+    },
+  ).data?.data;
+};

package/src/client/index.tsx

@@ -2,21 +2,23 @@ import {
   CollectionManagerContext,
   CurrentAppInfoProvider,
   SchemaComponentOptions,
-  SettingsCenterProvider
+  SettingsCenterProvider,
 } from '@nocobase/client';
 import React, { useContext } from 'react';
+import { MapBlockOptions } from './block';
 import Configuration from './components/Configuration';
 import Map from './components/Map';
 import { interfaces } from './fields';
-import { Initialize } from './initialize';
+import { MapInitializer } from './initialize';
 import { useMapTranslation } from './locale';
+import './locale';
 
 export default React.memo((props) => {
   const ctx = useContext(CollectionManagerContext);
   const { t } = useMapTranslation();
   return (
     <CurrentAppInfoProvider>
-      <Initialize>
+      <MapInitializer>
         <SettingsCenterProvider
           settings={{
             map: {
@@ -32,12 +34,14 @@ export default React.memo((props) => {
           }}
         >
           <SchemaComponentOptions components={{ Map }}>
-            <CollectionManagerContext.Provider value={{ ...ctx, interfaces: { ...ctx.interfaces, ...interfaces } }}>
-              {props.children}
-            </CollectionManagerContext.Provider>
+            <MapBlockOptions>
+              <CollectionManagerContext.Provider value={{ ...ctx, interfaces: { ...ctx.interfaces, ...interfaces } }}>
+                {props.children}
+              </CollectionManagerContext.Provider>
+            </MapBlockOptions>
           </SchemaComponentOptions>
         </SettingsCenterProvider>
-      </Initialize>
+      </MapInitializer>
     </CurrentAppInfoProvider>
   );
 });

package/src/client/initialize.tsx

@@ -1,8 +1,8 @@
 import { registerField, registerGroup, useCurrentAppInfo } from '@nocobase/client';
 import React, { useEffect } from 'react';
 import { fields } from './fields';
-import './locale';
 import { generateNTemplate } from './locale';
+import './locale';
 
 export const useRegisterInterface = () => {
   const { data } = useCurrentAppInfo() || {};
@@ -26,7 +26,7 @@ export const useRegisterInterface = () => {
   }, [data]);
 };
 
-export const Initialize: React.FC = (props) => {
+export const MapInitializer: React.FC = (props) => {
   useRegisterInterface();
   return <React.Fragment>{props.children}</React.Fragment>;
 };

package/src/client/locale/index.ts

@@ -1,11 +1,12 @@
 import { i18n } from '@nocobase/client';
 import { useTranslation } from 'react-i18next';
-
+import enUS from './en-US';
+import zhCN from './zh-CN';
 
 export const NAMESPACE = 'map';
 
-// i18n.addResources('zh-CN', NAMESPACE, zhCN);
-// i18n.addResources('en-US', NAMESPACE, enUS);
+i18n.addResources('zh-CN', NAMESPACE, zhCN);
+i18n.addResources('en-US', NAMESPACE, enUS);
 
 export function lang(key: string) {
   return i18n.t(key, { ns: NAMESPACE });

package/src/client/locale/pt-BR.ts

@@ -0,0 +1,49 @@
+const locale = {
+    'Map-based geometry': 'Geometria baseada em mapa',
+    'Map type': 'Tipo de mapa',
+    Point: 'Ponto',
+    Line: 'Linha',
+    Circle: 'Círculo',
+    Polygon: 'Polígono',
+    'Access key': 'Chave de acesso',
+    'securityJsCode or serviceHost': 'securityJsCode ou serviceHost',
+    AMap: 'AMap',
+    'Google Maps': 'Google Maps',
+    Clear: 'Limpar',
+    'Click to select the starting point and double-click to end the drawing': 'Clique para selecionar o ponto de partida e dê um duplo clique para terminar a criação',
+    'Clear the canvas': 'Limpar a tela',
+    'Are you sure to clear the canvas?': 'Tem certeza de que deseja limpar a tela?',
+    Confirm: 'Confirmar',
+    Cancel: 'Cancelar',
+    'Enter keywords to search': 'Digite palavras-chave para buscar',
+    'The AccessKey is incorrect, please check it': 'A chave de acesso está incorreta, por favor verifique',
+    'Please configure the AMap securityCode or serviceHost correctly': 'Por favor, configure o securityCode ou serviceHost do AMap corretamente',
+    'Map Manager': 'Gerenciador de Mapa',
+    Configuration: 'Configuração',
+    'Saved successfully': 'Salvo com sucesso',
+    'Saved failed': 'Falha ao salvar',
+    Edit: 'Editar',
+    Save: 'Salvar',
+    'Please configure the AccessKey and SecurityJsCode first': 'Por favor, configure a AccessKey e o SecurityJsCode primeiro',
+    'Go to the configuration page': 'Ir para a página de configuração',
+    Zoom: 'Zoom',
+    'Set default zoom level': 'Definir nível de zoom padrão',
+    'The default zoom level of the map': 'O nível de zoom padrão do mapa',
+    // Designer
+    'Edit field title': 'Editar título do campo',
+    'Field title': 'Título do campo',
+    'Edit tooltip': 'Editar dica de ferramenta',
+    'Delete field': 'Excluir campo',
+    Required: 'Obrigatório',
+    Pattern: 'Padrão',
+    "Operator": "Operador",
+    Editable: 'Editável',
+    Readonly: 'Somente leitura',
+    'Easy-reading': 'Apenas leitura (Modo de Leitura)',
+    'Edit description': 'Editar descrição',
+    'Map field': 'Campo de mapa',
+    'Marker field': 'Campo de marcador',
+  };
+  
+  export default locale;
+