fix: 图层显示顺序

antvis · Oct 28, 2023 · d13ac9e · d13ac9e
1 parent e2080aa
commit d13ac9e
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 26 deletions.
diff --git a/packages/li-editor/src/services/editor-service.ts b/packages/li-editor/src/services/editor-service.ts
@@ -72,7 +72,7 @@ class EditorService {
     if (!layers.length) return;
 
     this.editorState.setState((draft) => {
-      draft.layers.unshift(...layers);
+      draft.layers.push(...layers);
 
       const index = draft.widgets.findIndex((w) => w.type === layerPopup.type);
       if (index !== -1) {

diff --git a/packages/li-editor/src/utils/spec.ts b/packages/li-editor/src/utils/spec.ts
@@ -249,6 +249,8 @@ const AutoCreateLayersMap = new Map<string, (params: AutoCreateLayerParams) => L
 const getLayersSchemaByDataset = (dataset: EditorDataset) => {
   const colorField = getDefaultColorField(dataset);
   const layersSchema: LayerSchema[] = Array.from(AutoCreateLayersMap.values())
+    // 反转顺序，以面线点的叠加顺序（地图上），生成可视化图层
+    .reverse()
     .map((handler) => handler({ dataset, colorField }))
     .flat();
 

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/AddDataset/index.tsx
@@ -30,8 +30,7 @@ const AddDataset = ({ visible, onClose }: AddDatasetProps) => {
     updateState((draft) => {
       layers.forEach((layer) => {
         if (!draft.layers.find((item) => item.id === layer.id)) {
-          // 新增图层放在最上面
-          draft.layers.unshift(layer);
+          draft.layers.push(layer);
         }
       });
     });

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.tsx
@@ -1,16 +1,16 @@
-import React, { useCallback } from 'react';
 import classNames from 'classnames';
+import React, { useCallback } from 'react';
 import type { DropResult } from 'react-beautiful-dnd';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import './index.less';
 
-interface DragListProps<P> {
+interface DragListProps<P extends Record<string, any>> {
   itemStyle?: React.CSSProperties | ((dataset: P) => React.CSSProperties);
   itemClassName?: string | ((item: P) => string);
   dragIcon?: JSX.Element;
-  items: Record<string, any>[];
+  items: P[];
   onItemClick?: (item: P) => void;
-  onDrag: (newItems: any[]) => void;
+  onDrag: (newItems: P[]) => void;
   children: (item: P, icon: JSX.Element) => JSX.Element;
   keyField?: string;
 }
@@ -33,11 +33,11 @@ function DragList<P extends Record<string, any>>({ children, itemStyle, items, o
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId="dropable" direction="vertical">
-        {(provided: any) => (
+        {(provided) => (
           <div className="li-drag-list" ref={provided.innerRef} {...provided.droppableProps}>
-            {items.map((item: any, index) => (
+            {items.map((item, index) => (
               <Draggable key={item.id} draggableId={item.id} index={index}>
-                {(itemProvided: any, itemSnapshot: any) => {
+                {(itemProvided, itemSnapshot) => {
                   return (
                     <div
                       {...itemProvided.draggableProps}
@@ -46,7 +46,7 @@ function DragList<P extends Record<string, any>>({ children, itemStyle, items, o
                         'li-drag-list__item': itemSnapshot.isDragging,
                       })}
                       style={{
-                        ...(itemStyle instanceof Function ? itemStyle?.(item) : {}),
+                        ...(itemStyle instanceof Function ? itemStyle(item) : itemStyle),
                         ...(itemProvided.draggableProps.style ?? {}),
                       }}
                       key={item.id}

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.tsx
@@ -62,10 +62,10 @@ const LayerItem = ({ layer, dragIcon, onClickLayer }: LayerItemProps) => {
     updateState((draft) => {
       const originalIndex = draft.layers.findIndex((l) => l.id === _layer.id);
       if (originalIndex !== -1) {
-        // 复制图层放在最上面
-        draft.layers.splice(originalIndex, 0, copyLayer);
+        // 复制的图层插入进去
+        draft.layers.splice(originalIndex + 1, 0, copyLayer);
       } else {
-        draft.layers.unshift(copyLayer);
+        draft.layers.push(copyLayer);
       }
     });
     messageApi.success('复制成功');

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerList/index.tsx
@@ -3,7 +3,7 @@ import type { LayerSchema } from '@antv/li-sdk';
 import { Empty } from 'antd';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash-es';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useEditorState } from '../../../hooks';
 import DragList from './DragList';
 import './index.less';
@@ -18,16 +18,29 @@ const LayerList: React.FC<LayersPanelProps> = (props) => {
   const { onClickLayer } = props;
   const { state, updateState } = useEditorState();
 
+  // 以图层在地图上的层级从高到低的（地图上）排列，以方便用户从 UI 上理解图层列表。
+  // - 新增的图层，在最上面；
+  // - 最上面的图层，在地图上的层级越高；
+
+  // 从原始数据，反转顺序
+  const layers = useMemo(() => state.layers.slice().reverse(), [state.layers]);
+
   const onDragEnd = (newLayerList: LayerSchema[]) => {
-    updateState((draft) => {
-      draft.layers = newLayerList.map((item, index) => ({
+    const lastIndex = newLayerList.length - 1;
+    const newLayerListWithZindex = newLayerList
+      .map((item, index) => ({
         ...item,
-        visConfig: { ...item.visConfig, zIndex: index },
-      }));
+        // 设置 zIndex，图层的 zIndex 从大到小排列
+        visConfig: { ...item.visConfig, zIndex: lastIndex - index },
+      }))
+      // 反转顺序，反转为原始数据，
+      .reverse();
+    updateState((draft) => {
+      draft.layers = newLayerListWithZindex;
     });
   };
 
-  if (isEmpty(state.layers)) {
+  if (isEmpty(layers)) {
     return (
       <Empty
         className="li-layer-list__empty"
@@ -39,10 +52,8 @@ const LayerList: React.FC<LayersPanelProps> = (props) => {
 
   return (
     <div className={classNames('li-layer-list', props.className)}>
-      <DragList items={state.layers} onDrag={onDragEnd} dragIcon={<HolderOutlined />}>
-        {(layer: LayerSchema, icon: JSX.Element) => (
-          <LayerItem dragIcon={icon} layer={layer} onClickLayer={onClickLayer} />
-        )}
+      <DragList items={layers} onDrag={onDragEnd} dragIcon={<HolderOutlined />}>
+        {(layer, icon) => <LayerItem dragIcon={icon} layer={layer} onClickLayer={onClickLayer} />}
       </DragList>
     </div>
   );

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayersPanel.tsx b/packages/li-editor/src/widgets/LayersPanel/LayersPanel.tsx
@@ -33,8 +33,7 @@ const LayersPanel: React.FC<LayersPanelProps> = (props) => {
   const handleSubmit = (name: string, datasetId: string) => {
     const config = getDefaultLayerAttr(name, datasetId);
     updateState((draft) => {
-      // 新增图层放在最上面
-      draft.layers.unshift(config);
+      draft.layers.push(config);
     });
     setAddLayerPanelOpen(false);
     onAttributesOpen(config);