fix: 初始化图层类型未触发更新情况

antvis · Nov 28, 2023 · bb93dbe · bb93dbe
1 parent fed3b6b
commit bb93dbe
Show file tree

Hide file tree

Showing 24 changed files with 86 additions and 83 deletions.
diff --git a/packages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/index.ts b/packages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/index.ts
@@ -45,7 +45,6 @@ const toValues = (config: LayerRegisterFormResultType<ChinaAdminLayerStyleAttrib
  */
 const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<ChinaAdminLayerStyleAttributeValue> => {
   const sourceConfig = {
-    parser: { type: 'json' },
     countryAdConfig: {
       countryGranularity: values.countryGranularity,
       countryAdType: values.countryAdType,

diff --git a/packages/li-analysis-assets/src/layers/FlowLayer/register-form/index.ts b/packages/li-analysis-assets/src/layers/FlowLayer/register-form/index.ts
@@ -30,7 +30,6 @@ const toValues = (config: LayerRegisterFormResultType<FlowLayerStyleAttributeVal
 const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<FlowLayerStyleAttributeValue> => {
   const sourceConfig = {
     parser: {
-      type: 'json',
       x: values.longitude,
       y: values.latitude,
       x1: values.targetLongitude,

diff --git a/packages/li-analysis-assets/src/widgets/PropertiesPanel/registerForm.ts b/packages/li-analysis-assets/src/widgets/PropertiesPanel/registerForm.ts
@@ -56,7 +56,7 @@ const getPropertiesFieldsFormSchemas = (props: WidgetRegisterFormProps) => {
   const { layers } = props;
   const layerSchemaList = layers.map((item) => {
     return {
-      [`items.${item.id}.${item.sourceConfig?.datasetId}`]: {
+      [`items.${item.id}.${item.sourceConfig.datasetId}`]: {
         title: item.metadata.name,
         type: 'boolean',
         'x-decorator': 'FormItem',

diff --git a/packages/li-core-assets/src/layers/ArcLayer/register-form/index.ts b/packages/li-core-assets/src/layers/ArcLayer/register-form/index.ts
@@ -28,7 +28,6 @@ const toValues = (config: LayerRegisterFormResultType<LineLayerStyleAttributeVal
 const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<LineLayerStyleAttributeValue> => {
   const sourceConfig = {
     parser: {
-      type: 'json',
       x: values.longitude,
       y: values.latitude,
       x1: values.targetLongitude,

diff --git a/packages/li-core-assets/src/layers/BubbleLayer/register-form/index.ts b/packages/li-core-assets/src/layers/BubbleLayer/register-form/index.ts
@@ -28,7 +28,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Bu
   const pointCoordinate = values.geometry ? { geometry: values.geometry } : { x: values.longitude, y: values.latitude };
   const sourceConfig = {
     parser: {
-      type: 'json',
       ...pointCoordinate,
     },
   };

diff --git a/packages/li-core-assets/src/layers/ChoroplethLayer/register-form/index.ts b/packages/li-core-assets/src/layers/ChoroplethLayer/register-form/index.ts
@@ -22,7 +22,6 @@ const toValues = (config: LayerRegisterFormResultType<ChoroplethLayerStyleAttrib
 const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<ChoroplethLayerStyleAttributeValue> => {
   const sourceConfig = {
     parser: {
-      type: 'json',
       geometry: values.geometry,
     },
   };

diff --git a/packages/li-core-assets/src/layers/GridLayer/register-form/index.ts b/packages/li-core-assets/src/layers/GridLayer/register-form/index.ts
@@ -35,7 +35,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Gr
 
   const sourceConfig = {
     parser: {
-      type: 'json',
       ...pointCoordinate,
     },
     transforms: [

diff --git a/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts b/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts
@@ -47,7 +47,6 @@ const toValues = (config: LayerRegisterFormResultType<ChoroplethLayerStyleAttrib
 const fromValues = (style: Record<string, any>): LayerRegisterFormResultType<ChoroplethLayerStyleAttributeValue> => {
   const sourceConfig = {
     parser: {
-      type: 'json',
       hexagonId: style.hexagonId,
     },
   };

diff --git a/packages/li-core-assets/src/layers/HeatmapLayer/register-form/index.ts b/packages/li-core-assets/src/layers/HeatmapLayer/register-form/index.ts
@@ -28,7 +28,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<He
   const pointCoordinate = values.geometry ? { geometry: values.geometry } : { x: values.longitude, y: values.latitude };
   const sourceConfig = {
     parser: {
-      type: 'json',
       ...pointCoordinate,
     },
   };

diff --git a/packages/li-core-assets/src/layers/HexbinLayer/register-form/index.ts b/packages/li-core-assets/src/layers/HexbinLayer/register-form/index.ts
@@ -35,7 +35,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<He
 
   const sourceConfig = {
     parser: {
-      type: 'json',
       ...pointCoordinate,
     },
     transforms: [

diff --git a/packages/li-core-assets/src/layers/IconLayer/register-form/index.ts b/packages/li-core-assets/src/layers/IconLayer/register-form/index.ts
@@ -25,7 +25,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Ic
   const pointCoordinate = values.geometry ? { geometry: values.geometry } : { x: values.longitude, y: values.latitude };
   const sourceConfig = {
     parser: {
-      type: 'json',
       ...pointCoordinate,
     },
   };

diff --git a/packages/li-core-assets/src/layers/LineLayer/register-form/index.ts b/packages/li-core-assets/src/layers/LineLayer/register-form/index.ts
@@ -36,7 +36,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Li
 
   const sourceConfig = {
     parser: {
-      type: 'json',
       ...coordinate,
     },
   };

diff --git a/packages/li-core-assets/src/widgets/LayerPopup/registerForm.ts b/packages/li-core-assets/src/widgets/LayerPopup/registerForm.ts
@@ -67,7 +67,7 @@ const getLayerFieldsFormSchemas = (props: WidgetRegisterFormProps) => {
   const layerSchemaList = layers
     .filter((item) => !['GridLayer', 'HexbinLayer', 'HeatmapLayer'].includes(item.type))
     .map((item) => {
-      const dataset = datasets.find((items) => items.id === item.sourceConfig?.datasetId);
+      const dataset = datasets.find((items) => items.id === item.sourceConfig.datasetId);
       if (dataset === undefined || !isLocalOrRemoteDataset(dataset)) return undefined;
 
       const columns = dataset?.columns || [];

diff --git a/packages/li-editor/src/utils/spec.ts b/packages/li-editor/src/utils/spec.ts
@@ -280,7 +280,7 @@ const getFieldsToLayerPopupShow = (dataset: EditorDataset, maxDefaultTooltips: n
  */
 export const getAutoFindLayerPopup = (layers: LayerSchema[], datasets: EditorDataset[], maxDefaultTooltips = 6) => {
   const items = layers.map((layer) => {
-    const dataset = datasets.find((d) => d.id === layer.sourceConfig?.datasetId);
+    const dataset = datasets.find((d) => d.id === layer.sourceConfig.datasetId);
     return {
       layerId: layer.id,
       fields: dataset ? getFieldsToLayerPopupShow(dataset, maxDefaultTooltips) : [],
@@ -308,8 +308,8 @@ export const getAutoFindLayerPopup = (layers: LayerSchema[], datasets: EditorDat
 };
 
 const getPointLayerBounds = (dataset: EditorDataset, layer: LayerSchema) => {
-  if (layer.sourceConfig === undefined) return null;
-  const { x, y, geometry } = layer.sourceConfig?.parser;
+  if (layer.sourceConfig?.parser === undefined) return null;
+  const { x, y, geometry } = layer.sourceConfig.parser;
   const sampleData = dataset.getSampleData();
 
   // 经纬度情况
@@ -337,8 +337,8 @@ const LayersBoundsMap = new Map<string, (dataset: EditorDataset, layer: LayerSch
   [
     'LineLayer',
     (dataset: EditorDataset, layer: LayerSchema) => {
-      if (layer.sourceConfig === undefined) return null;
-      const { x, y, x1, y1, geometry } = layer.sourceConfig?.parser;
+      if (layer.sourceConfig?.parser === undefined) return null;
+      const { x, y, x1, y1, geometry } = layer.sourceConfig.parser;
       const sampleData = dataset.getSampleData();
 
       // 起点终点情况
@@ -366,8 +366,8 @@ const LayersBoundsMap = new Map<string, (dataset: EditorDataset, layer: LayerSch
   [
     'ArcLayer',
     (dataset: EditorDataset, layer: LayerSchema) => {
-      if (layer.sourceConfig === undefined) return null;
-      const { x, y, x1, y1 } = layer.sourceConfig?.parser;
+      if (layer.sourceConfig?.parser === undefined) return null;
+      const { x, y, x1, y1 } = layer.sourceConfig.parser;
       const sampleData = dataset.getSampleData();
 
       // 起点终点情况
@@ -391,8 +391,8 @@ const LayersBoundsMap = new Map<string, (dataset: EditorDataset, layer: LayerSch
   [
     'ChoroplethLayer',
     (dataset: EditorDataset, layer: LayerSchema) => {
-      if (layer.sourceConfig === undefined) return null;
-      const { geometry } = layer.sourceConfig?.parser;
+      if (layer.sourceConfig?.parser === undefined) return null;
+      const { geometry } = layer.sourceConfig.parser;
       const sampleData = dataset.getSampleData(10000);
 
       // geometry 情况
@@ -408,8 +408,8 @@ const LayersBoundsMap = new Map<string, (dataset: EditorDataset, layer: LayerSch
   [
     'H3HexagonLayer',
     (dataset: EditorDataset, layer: LayerSchema) => {
-      if (layer.sourceConfig === undefined) return null;
-      const { hexagonId } = layer.sourceConfig?.parser;
+      if (layer.sourceConfig?.parser === undefined) return null;
+      const { hexagonId } = layer.sourceConfig.parser;
       const sampleData = dataset.getSampleData(10000);
 
       if (hexagonId) {
@@ -437,7 +437,7 @@ const LayersBoundsMap = new Map<string, (dataset: EditorDataset, layer: LayerSch
  */
 export const getLayersBounds = (layers: LayerSchema[], datasets: EditorDataset[]): LayerBounds | null => {
   const boundsList = layers.map((layer) => {
-    const dataset = datasets.find((d) => d.id === layer.sourceConfig?.datasetId);
+    const dataset = datasets.find((d) => d.id === layer.sourceConfig.datasetId);
     const getLayerBounds = LayersBoundsMap.get(layer.type);
     if (!dataset || !getLayerBounds) return null;
 

diff --git a/packages/li-editor/src/utils/validator.ts b/packages/li-editor/src/utils/validator.ts
@@ -83,11 +83,6 @@ export const isValidLayer = (layer: LayerSchema) => {
     return false;
   }
 
-  const resetSourceConfig = omit(layer.sourceConfig, 'datasetId');
-  if (isEmpty(resetSourceConfig)) {
-    return false;
-  }
-
   return true;
 };
 

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx
@@ -60,13 +60,13 @@ const DatasetItem = (props: DatasetItemProps) => {
   };
 
   const getDelLayersCount = (dataSourceID: string) => {
-    return state.layers.filter((layer) => layer.sourceConfig?.datasetId === dataSourceID).length;
+    return state.layers.filter((layer) => layer.sourceConfig.datasetId === dataSourceID).length;
   };
 
   const onDeleteDataset = () => {
     updateState((draft) => {
       const delDataIndex = draft.datasets.findIndex((source) => source.id === datasetSchema.id);
-      draft.layers = draft.layers.filter((layer) => layer.sourceConfig?.datasetId !== datasetSchema.id);
+      draft.layers = draft.layers.filter((layer) => layer.sourceConfig.datasetId !== datasetSchema.id);
       draft.datasets.splice(delDataIndex, 1);
     });
   };

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/StyleForm.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/StyleForm.tsx
@@ -3,18 +3,18 @@ import {
   ColorRangeSelector,
   FieldSelect,
   FormCollapse,
-  IconSelector,
   IconScaleSelector,
+  IconSelector,
   Offset,
-  ScaleSelector,
   ResterScaleSelector,
+  ScaleSelector,
   Slider,
   SliderRange,
 } from '@antv/li-p2';
 import type { DatasetFieldWithMeta, ImplementLayer, LayerRegisterFormResultType, LayerSchema } from '@antv/li-sdk';
 import { Form, FormItem, Input, NumberPicker, Radio, Select, Switch } from '@formily/antd-v5';
 import type { Form as FormInstance } from '@formily/core';
-import { createForm, onFormValuesChange } from '@formily/core';
+import { createForm, onFormMount, onFormValuesChange } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import { useMemoizedFn } from 'ahooks';
 import { debounce } from 'lodash-es';
@@ -67,18 +67,20 @@ const StyleForm: React.FC<StyleFormProps> = (props) => {
     [registerForm.components],
   );
 
-  const handleFormValuesChange = useMemoizedFn((formInstance: FormInstance<Record<string, any>>) => {
-    formInstance
-      .submit<Record<string, any>>()
-      .then((values) => {
-        const formatValues = (registerForm.fromValues ? registerForm.fromValues(values) : values) as LayerConfig;
+  const handleFormValuesChange = useMemoizedFn(
+    debounce((formInstance: FormInstance<Record<string, any>>) => {
+      formInstance
+        .submit<Record<string, any>>()
+        .then((values) => {
+          const formatValues = (registerForm.fromValues ? registerForm.fromValues(values) : values) as LayerConfig;
 
-        onChange(formatValues);
-      })
-      .catch((values) => {
-        // console.log('submit rejected', values);
-      });
-  });
+          onChange(formatValues);
+        })
+        .catch((values) => {
+          // console.log('submit rejected', values);
+        });
+    }),
+  );
 
   // 坐标配置和样式配置表单
   // 更新可视化类型时重新生成新的表单，避免 values 重复
@@ -91,7 +93,9 @@ const StyleForm: React.FC<StyleFormProps> = (props) => {
       initialValues: _initialValues,
       effects() {
         // 数据实时变化
-        onFormValuesChange(debounce(handleFormValuesChange, 150));
+        onFormValuesChange(handleFormValuesChange);
+        // 表单初始化时，触发一次提交，检查一下必填项
+        onFormMount(handleFormValuesChange);
       },
     });
 

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx
@@ -11,20 +11,23 @@ import BaseFormSchemaField from '../BaseFormSchemaField';
 import './index.less';
 import StyleForm from './StyleForm';
 
+export type LayerFormValue = Pick<LayerSchema, 'type' | 'sourceConfig' | 'visConfig'>;
+type LayerStyleFormValue = Pick<LayerSchema, 'sourceConfig' | 'visConfig'>;
+
 type LayerFormProps = {
   className?: string;
   config: LayerSchema;
-  onChange: (config: Pick<LayerSchema, 'type' | 'sourceConfig' | 'visConfig'>) => void;
+  onChange: (config: LayerFormValue) => void;
 };
 
 const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) => {
   const { state } = useEditorState();
   const [visType, setVisType] = useState(config.type);
-  const [datasetId, setDatasetId] = useState(config?.sourceConfig?.datasetId);
-  const editorDataset = useEditorDataset(datasetId!);
+  const [datasetId, setDatasetId] = useState(config.sourceConfig.datasetId);
+  const editorDataset = useEditorDataset(datasetId);
   const columns = useMemo(() => (editorDataset ? editorDataset.columns : []), [editorDataset]);
 
-  const [initialValues, setInitialValues] = useState<Pick<LayerSchema, 'sourceConfig' | 'visConfig'>>(
+  const [initialStyleValue, setInitialStyleValue] = useState<LayerStyleFormValue>(
     pick(config, ['sourceConfig', 'visConfig']),
   );
 
@@ -51,17 +54,34 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>
     });
   }, [datasetFields, editorDataset?.data]);
 
-  const handleFormValuesChange = useMemoizedFn((styleConfig: Pick<LayerSchema, 'sourceConfig' | 'visConfig'>) => {
-    if (styleConfig.sourceConfig && datasetId) {
-      styleConfig.sourceConfig.datasetId = datasetId;
+  const onFormValuesChange = (visType_: string, datasetId_: string, styleConfig: LayerStyleFormValue) => {
+    if (styleConfig.sourceConfig && datasetId_) {
+      styleConfig.sourceConfig.datasetId = datasetId_;
     }
 
-    const layerConfig: Pick<LayerSchema, 'type' | 'sourceConfig' | 'visConfig'> = {
-      type: visType,
+    const layerConfig: LayerFormValue = {
+      type: visType_,
       ...styleConfig,
     };
 
     onChange(layerConfig);
+  };
+
+  const handleVisTypeChange = useMemoizedFn((type: string) => {
+    const defaultVisConfig = appService.getImplementLayerDefaultVis(type);
+    const _initialStyleValue: LayerStyleFormValue = {
+      sourceConfig: { datasetId },
+      visConfig: defaultVisConfig,
+    };
+
+    // 更新可视化类型
+    setVisType(type);
+    // 设置表单默认值
+    setInitialStyleValue(_initialStyleValue);
+  });
+
+  const handleStyleFormValuesChange = useMemoizedFn((styleConfig: LayerStyleFormValue) => {
+    onFormValuesChange(visType, datasetId, styleConfig);
   });
 
   // 基础配置表单
@@ -71,20 +91,13 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>
       effects() {
         // 数据集更新时，同步更新表数据字段
         onFieldValueChange('datasetId', (field) => {
-          setDatasetId(field?.value);
+          const id = field?.value;
+          setDatasetId(id);
         });
         // 可视化类型更新时，同步更新可视化图层表单
         onFieldValueChange('visType', (field) => {
           const type = field.value;
-          const defaultVisConfig = appService.getImplementLayerDefaultVis(type);
-          const values = {
-            sourceConfig: {} as LayerSchema['sourceConfig'],
-            visConfig: defaultVisConfig,
-          };
-          // 更新可视化类型
-          setVisType(type);
-          // 设置表单默认值
-          setInitialValues(values);
+          handleVisTypeChange(type);
         });
       },
     });
@@ -110,10 +123,10 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>
       {/* 坐标配置和样式配置 */}
       {implementLayer && (
         <StyleForm
-          initialValues={initialValues}
+          initialValues={initialStyleValue}
           implementLayer={implementLayer}
           datasetFields={datasetFieldList}
-          onChange={handleFormValuesChange}
+          onChange={handleStyleFormValuesChange}
         />
       )}
     </div>

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.tsx
@@ -8,6 +8,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import LayerName from '../../../components/EditName';
 import { useEditorService, useEditorState } from '../../../hooks';
 import './index.less';
+import type { LayerFormValue } from './LayerForm';
 import LayerForm from './LayerForm';
 
 type LayerAttributeProps = {
@@ -49,7 +50,7 @@ const LayerAttribute: React.FC<LayerAttributeProps> = (props) => {
     onBack();
   };
 
-  const handleValuesChange = useCallback((layerConfig: Pick<LayerSchema, 'type' | 'sourceConfig' | 'visConfig'>) => {
+  const handleValuesChange = useCallback((layerConfig: LayerFormValue) => {
     updateState((draft) => {
       const index = draft.layers.findIndex((item) => item.id === layerIdRef.current);
       if (index !== -1) {