feat: 编辑器支持替换数据集

antvis · Sep 17, 2023 · aae5959 · aae5959
1 parent e610cd0
commit aae5959
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 68 deletions.
diff --git a/packages/li-editor/src/types/widget.ts b/packages/li-editor/src/types/widget.ts
@@ -18,6 +18,8 @@ export type AddDataset =
   | Optional<RasterTileDatasetSchema, 'id'>;
 
 export interface ImplementEditorAddDatasetWidgetProps extends ImplementEditorWidgetProps {
+  // TODO: 区分新增数据集还是替换数据集
+  // mode: 'add' | 'replace';
   onSubmit: (addDatasets: AddDataset[], layers?: LayerSchema[]) => void;
   onCancel: () => void;
 }

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/AddDatasetModal.tsx b/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/AddDatasetModal.tsx
@@ -0,0 +1,53 @@
+import type { LayerSchema } from '@antv/li-sdk';
+import { Modal, Segmented } from 'antd';
+import React, { useState } from 'react';
+import { useEditorContext } from '../../../hooks/internal';
+import type { AddDataset as AddDatasetType } from '../../../types';
+
+type AddDatasetModalProps = {
+  title: string;
+  visible: boolean;
+  onClose: () => void;
+  onSubmit: (datasets: AddDatasetType[], layers?: LayerSchema[]) => void;
+};
+
+const AddDatasetModal = ({ title, visible, onClose, onSubmit }: AddDatasetModalProps) => {
+  const { containerSlotMap } = useEditorContext();
+  const addWidgets = containerSlotMap.Datasets?.addDataset || [];
+  const defaultSegmentedValue = addWidgets[0].metadata.name;
+
+  const [segmentedValue, setSegmentedValue] = useState(defaultSegmentedValue);
+
+  const segmentedOptions = addWidgets.map((widget) => ({
+    label: widget.metadata.displayName,
+    value: widget.metadata.name,
+  }));
+  const AddWidget = addWidgets.find((widget) => widget.metadata.name === segmentedValue)!.component;
+
+  return (
+    <Modal
+      title={title}
+      width="min-content"
+      style={{ minWidth: 1000 }}
+      destroyOnClose
+      open={visible}
+      footer={null}
+      bodyStyle={{ paddingBottom: 0 }}
+      onCancel={onClose}
+    >
+      {segmentedOptions.length > 1 && (
+        <Segmented
+          options={segmentedOptions}
+          onChange={(val) => {
+            setSegmentedValue(val as string);
+          }}
+          defaultValue={segmentedValue}
+          style={{ marginBottom: 20 }}
+        />
+      )}
+      <AddWidget onCancel={onClose} onSubmit={onSubmit} />
+    </Modal>
+  );
+};
+
+export default AddDatasetModal;
diff --git a/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/helper.ts b/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/helper.ts
@@ -0,0 +1,22 @@
+import type { DatasetSchema } from '@antv/li-sdk';
+import { getDatasetColumns } from '@antv/li-sdk';
+import type { AddDataset } from '../../../types';
+import { validateDataset } from '../../../utils';
+
+export const getAddDatasetSchema = (ddataset: AddDataset, id: string): DatasetSchema => {
+  let datasetSchema: DatasetSchema;
+  if (ddataset.type === 'local') {
+    datasetSchema = {
+      ...ddataset,
+      id,
+      columns: ddataset.data?.length ? getDatasetColumns(ddataset.data[0]) : [],
+    };
+  } else {
+    datasetSchema = {
+      ...ddataset,
+      id,
+    };
+  }
+
+  return validateDataset(datasetSchema);
+};
diff --git a/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/index.tsx
@@ -1,12 +1,10 @@
-import { validateDataset } from '@antv/li-editor';
-import type { DatasetSchema, LayerSchema } from '@antv/li-sdk';
-import { getDatasetColumns, getUniqueId } from '@antv/li-sdk';
-import { Modal, Segmented } from 'antd';
-import type { WritableDraft } from 'immer/dist/internal';
-import React, { useState } from 'react';
+import type { LayerSchema } from '@antv/li-sdk';
+import { getUniqueId } from '@antv/li-sdk';
+import React from 'react';
 import { useEditorService, useEditorState } from '../../../hooks';
-import { useEditorContext } from '../../../hooks/internal';
 import type { AddDataset as AddDatasetType } from '../../../types';
+import AddDatasetModal from './AddDatasetModal';
+import { getAddDatasetSchema } from './helper';
 
 type AddDatasetProps = {
   visible: boolean;
@@ -15,44 +13,16 @@ type AddDatasetProps = {
 
 const AddDataset = ({ visible, onClose }: AddDatasetProps) => {
   const { appService } = useEditorService();
-  const { containerSlotMap } = useEditorContext();
-  const addWidgets = containerSlotMap.Datasets?.addDataset || [];
-  const defaultSegmentedValue = addWidgets[0].metadata.name;
-
-  const [segmentedValue, setSegmentedValue] = useState(defaultSegmentedValue);
   const { updateState } = useEditorState();
 
-  const segmentedOptions = addWidgets.map((widget) => ({
-    label: widget.metadata.displayName,
-    value: widget.metadata.name,
-  }));
-  const AddWidget = addWidgets.find((widget) => widget.metadata.name === segmentedValue)!.component;
-
   // 新增 datasets
   const onAddDatasets = (datasets: AddDatasetType[]) => {
     updateState((draft) => {
-      datasets.forEach((dataSource) => {
-        const id = dataSource.id ?? getUniqueId(dataSource.metadata.name);
-
-        let newDataset: DatasetSchema = (() => {
-          if (dataSource.type === 'remote' || dataSource.type === 'vector-tile' || dataSource.type === 'raster-tile') {
-            return {
-              ...dataSource,
-              id,
-            };
-          } else {
-            return {
-              ...dataSource,
-              id,
-              columns: dataSource.data?.length ? getDatasetColumns(dataSource.data[0]) : [],
-              type: 'local', // 兼容 type: 'json'
-            };
-          }
-        })();
-
-        newDataset = validateDataset(newDataset);
-        if (!draft.datasets.find((item) => item.id === dataSource.id)) {
-          draft.datasets.push(newDataset as WritableDraft<DatasetSchema>);
+      datasets.forEach((dataset) => {
+        const id = dataset.id ?? getUniqueId(dataset.metadata.name);
+        const newDataset = getAddDatasetSchema(dataset, id);
+        if (!draft.datasets.find((item) => item.id === dataset.id)) {
+          draft.datasets.push(newDataset);
         }
       });
     });
@@ -79,30 +49,7 @@ const AddDataset = ({ visible, onClose }: AddDatasetProps) => {
     onClose();
   };
 
-  return (
-    <Modal
-      title="添加数据集"
-      width="min-content"
-      style={{ minWidth: 1000 }}
-      destroyOnClose
-      open={visible}
-      footer={null}
-      bodyStyle={{ paddingBottom: 0 }}
-      onCancel={onClose}
-    >
-      {segmentedOptions.length > 1 && (
-        <Segmented
-          options={segmentedOptions}
-          onChange={(val) => {
-            setSegmentedValue(val as string);
-          }}
-          defaultValue={segmentedValue}
-          style={{ marginBottom: 20 }}
-        />
-      )}
-      <AddWidget onCancel={onClose} onSubmit={onSubmit} />
-    </Modal>
-  );
+  return <AddDatasetModal title="新增数据集" visible={visible} onSubmit={onSubmit} onClose={onClose} />;
 };
 
 export default AddDataset;
diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx
@@ -13,18 +13,23 @@ import './index.less';
 
 export type DatasetItemProps = {
   className?: string;
+  onReplaceDataset: (datasetId: string) => void;
   onPreviewDataset: (datasetId: string) => void;
   dataset: DatasetSchema;
 };
 
 const DatasetItem = (props: DatasetItemProps) => {
-  const { dataset: datasetSchema, onPreviewDataset, className } = props;
+  const { dataset: datasetSchema, onReplaceDataset, onPreviewDataset, className } = props;
   const { state, updateState } = useEditorState();
   const [isEditName, setIsEditName] = useState(false);
   const [dataset] = useEditorDatasets([datasetSchema.id]);
   const isLocalOrRemoteDataSource = dataset && isLocalOrRemoteDataset(dataset);
   const [messageApi, messageContextHolder] = message.useMessage();
 
+  const replaceDataset = () => {
+    onReplaceDataset(datasetSchema.id);
+  };
+
   const copyDataset = () => {
     const copyData: DatasetSchema = {
       ...datasetSchema,
@@ -68,6 +73,13 @@ const DatasetItem = (props: DatasetItemProps) => {
   };
 
   const dropDownItems: MenuProps['items'] = [
+    {
+      key: 'replaceDataset',
+      label: <>替换数据集</>,
+      onClick() {
+        replaceDataset();
+      },
+    },
     {
       key: 'copyDataset',
       label: <>复制数据集</>,

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.tsx
@@ -8,6 +8,7 @@ import './index.less';
 
 export type DatasetListProps = {
   className?: string;
+  onReplaceDataset: (datasetId: string) => void;
   onPreviewDataset: (datasetId: string) => void;
 };
 
@@ -22,7 +23,14 @@ export default function DatasetList(props: DatasetListProps) {
   return (
     <div className={classnames('li-dataset-list', props.className)}>
       {datasets.map((item) => {
-        return <DatasetItem key={item.id} dataset={item} onPreviewDataset={props.onPreviewDataset} />;
+        return (
+          <DatasetItem
+            key={item.id}
+            dataset={item}
+            onReplaceDataset={props.onReplaceDataset}
+            onPreviewDataset={props.onPreviewDataset}
+          />
+        );
       })}
     </div>
   );

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.tsx
@@ -8,6 +8,7 @@ import AddDataset from './AddDataset';
 import DatasetList from './DatasetList';
 import './DatasetsPanel.less';
 import PreviewDataset from './PreviewDataset';
+import ReplaceDataset from './ReplaceDataset';
 
 interface DatasetsPanelProps extends ImplementEditorWidgetProps {
   className?: string;
@@ -17,7 +18,9 @@ const DatasetsPanel: React.FC<DatasetsPanelProps> = (props: DatasetsPanelProps)
   const { className } = props;
   const { state } = useEditorState();
   const [addDatasetVisible, setAddDatasetVisible] = useState(false);
-  const [previewdatasetId, setPreviewDatasetId] = useState<string>('');
+  const [replaceDatasetId, setReplaceDatasetId] = useState<string>('');
+  const [replaceDatasetVisible, setReplaceDatasetVisible] = useState(false);
+  const [previewDatasetId, setPreviewDatasetId] = useState<string>('');
   const [previewDatasetVisible, setPreviewDatasetVisible] = useState(false);
 
   return (
@@ -39,18 +42,27 @@ const DatasetsPanel: React.FC<DatasetsPanelProps> = (props: DatasetsPanelProps)
 
       <DatasetList
         className="li-datasets-panel__dataset-list"
+        onReplaceDataset={(datasetId) => {
+          setReplaceDatasetId(datasetId);
+          setReplaceDatasetVisible(true);
+        }}
         onPreviewDataset={(datasetId) => {
           setPreviewDatasetId(datasetId);
           setPreviewDatasetVisible(true);
         }}
       />
 
       <AddDataset visible={addDatasetVisible} onClose={() => setAddDatasetVisible(false)} />
+      <ReplaceDataset
+        datasetId={replaceDatasetId}
+        visible={replaceDatasetVisible}
+        onClose={() => setReplaceDatasetVisible(false)}
+      />
       {previewDatasetVisible && (
         <PreviewDataset
+          datasetId={previewDatasetId}
           visible={previewDatasetVisible}
           onClose={() => setPreviewDatasetVisible(false)}
-          datasetId={previewdatasetId}
         />
       )}
     </div>

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/ReplaceDataset/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/ReplaceDataset/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useEditorState } from '../../../hooks';
+import type { AddDataset as AddDatasetType } from '../../../types';
+import AddDatasetModal from '../AddDataset/AddDatasetModal';
+import { getAddDatasetSchema } from '../AddDataset/helper';
+
+type ReplaceDatasetProps = {
+  datasetId: string;
+  visible: boolean;
+  onClose: () => void;
+};
+
+const ReplaceDataset = ({ datasetId, visible, onClose }: ReplaceDatasetProps) => {
+  const { updateState } = useEditorState();
+
+  //  替换 dataset
+  const onReplaceDataset = (dataset: AddDatasetType) => {
+    updateState((draft) => {
+      const index = draft.datasets.findIndex((item) => item.id === datasetId);
+      if (index !== -1) {
+        const replaceDataset = getAddDatasetSchema(dataset, datasetId);
+        draft.datasets[index] = replaceDataset;
+      }
+    });
+  };
+
+  const onSubmit = (datasets: AddDatasetType[]) => {
+    const dataset = datasets[0];
+    if (dataset) {
+      onReplaceDataset(dataset);
+    }
+    onClose();
+  };
+
+  return <AddDatasetModal title="替换数据集" visible={visible} onSubmit={onSubmit} onClose={onClose} />;
+};
+
+export default ReplaceDataset;