fix: 修复切换选中覆盖物名称不变的问题

src/editor/Catalog/index.tsx

@@ -63,28 +63,31 @@ const Catalog = () => {
   });
 
   return (
-    <div className="catalog-wrapper">
-      <Collapse
-        defaultActiveKey={["1", "2", "3", "4", "5"]}
-        expandIconPosition="right"
-      >
-        <Panel header="矩形" key={1}>
-          <OverlayList overlays={rectangles} />
-        </Panel>
-        <Panel header="多边形" key={2}>
-          <OverlayList overlays={polygons} />
-        </Panel>
-        <Panel header="多段线" key={3}>
-          <OverlayList overlays={polylines} />
-        </Panel>
-        <Panel header="圆形" key={4}>
-          <OverlayList overlays={circles} />
-        </Panel>
-        <Panel header="标记点" key={5}>
-          <OverlayList overlays={points} />
-        </Panel>
-      </Collapse>
-    </div>
+    <>
+      <div className="pane-title">覆盖物</div>
+      <div className="catalog-wrapper">
+        <Collapse
+          defaultActiveKey={["1", "2", "3", "4", "5"]}
+          expandIconPosition="right"
+        >
+          <Panel header="矩形" key={1}>
+            <OverlayList overlays={rectangles} />
+          </Panel>
+          <Panel header="多边形" key={2}>
+            <OverlayList overlays={polygons} />
+          </Panel>
+          <Panel header="多段线" key={3}>
+            <OverlayList overlays={polylines} />
+          </Panel>
+          <Panel header="圆形" key={4}>
+            <OverlayList overlays={circles} />
+          </Panel>
+          <Panel header="标记点" key={5}>
+            <OverlayList overlays={points} />
+          </Panel>
+        </Collapse>
+      </div>
+    </>
   );
 };
 

src/editor/Catalog/style.less

@@ -19,6 +19,6 @@
   background-color: #e5e6e7;
 }
 .catalog-wrapper{
-  height: 100%;
+  height: calc(100% - 36px);
   overflow-y: scroll;
 }

src/editor/Property/FineInput.tsx

@@ -1,5 +1,5 @@
 import { Input } from "antd";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export type FineInputProps = {
   value: string | number;
@@ -7,7 +7,11 @@ export type FineInputProps = {
 };
 
 export const FineInput = (props: FineInputProps) => {
-  const [value, setValue] = useState(props.value);
+  const [value, setValue] = useState<string | number>("");
+
+  useEffect(() => {
+    setValue(props.value);
+  }, [props]);
 
   return (
     <Input

src/editor/Property/index.tsx

@@ -18,7 +18,12 @@ const { Option } = Select;
 const Property = () => {
   const selectedIds = useSelector(selectedIdsSelector);
   const { overlays } = useSelector(mapOptionsSelector);
-  if (!selectedIds?.length) return <></>;
+  if (!selectedIds?.length)
+    return (
+      <>
+        <div className="pane-title">覆盖物</div>
+      </>
+    );
   const [id] = selectedIds;
   const overlay = overlays.find((overlay) => overlay.id === id)!;
   const { lngLat = [0, 0] } = overlay;
@@ -69,40 +74,43 @@ const Property = () => {
   );
 
   return (
-    <div className="property-area">
-      <Form size="small">
-        <Form.Item label="名称">
-          <FineInput
-            value={overlay.name}
-            onChange={(value) =>
-              updateOverlayProps({
-                id: overlay.id,
-                name: value,
-              })
-            }
-          />
-        </Form.Item>
-        {overlay.type === OverlayTypes.Point ? positionPane : categoryPane}
-        {overlay.category === OverlayCategory.Building ? (
-          <Form.Item label="高度">
+    <>
+      <div className="pane-title">覆盖物</div>
+      <div className="property-area">
+        <Form size="small">
+          <Form.Item label="名称">
             <FineInput
-              value={overlay.height || 0}
+              value={overlay.name}
               onChange={(value) =>
                 updateOverlayProps({
                   id: overlay.id,
-                  height: +value,
+                  name: value,
                 })
               }
             />
           </Form.Item>
-        ) : null}
-        {overlay.type === OverlayTypes.Rectangle ? (
-          <Form.Item label="背景">
-            <OverlayBackground overlay={overlay} />
-          </Form.Item>
-        ) : null}
-      </Form>
-    </div>
+          {overlay.type === OverlayTypes.Point ? positionPane : categoryPane}
+          {overlay.category === OverlayCategory.Building ? (
+            <Form.Item label="高度">
+              <FineInput
+                value={overlay.height || 0}
+                onChange={(value) =>
+                  updateOverlayProps({
+                    id: overlay.id,
+                    height: +value,
+                  })
+                }
+              />
+            </Form.Item>
+          ) : null}
+          {overlay.type === OverlayTypes.Rectangle ? (
+            <Form.Item label="背景">
+              <OverlayBackground overlay={overlay} />
+            </Form.Item>
+          ) : null}
+        </Form>
+      </div>
+    </>
   );
 };
 

src/editor/index.less

@@ -66,6 +66,12 @@ body ::-webkit-scrollbar-thumb {
 body ::-webkit-scrollbar-corner {
   background-color: #eee;
 }
+.pane-title{
+  line-height: 24px;
+  padding:6px 12px;
+  background-color: #dbd8d8;
+  // color: #fff;
+}
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */

src/store/actions/index.ts

@@ -115,11 +115,16 @@ export class EditorAction {
   selectOverlay(id: string, reset = true) {
     const { selectedIds } = this.store.getState();
     if (selectedIds.indexOf(id) >= 0 && reset) {
-      this.mapEditor?.selectOverlays();
+      if (reset) {
+        this.mapEditor?.selectOverlays();
+        this.dispatch(StoreAction.selectOverlay());
+      } else {
+        this.dispatch(StoreAction.selectOverlay(id));
+      }
     } else {
       this.mapEditor?.selectOverlays([id]);
+      this.dispatch(StoreAction.selectOverlay(id));
     }
-    this.dispatch(StoreAction.selectOverlay(id));
   }
 
   updateOverlay(props: Partial<IOverlay>) {