From c6c9af7099cbd9694b51e077dca1511a488e19f2 Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Sun, 17 Apr 2022 10:23:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E8=A6=86=E7=9B=96=E7=89=A9=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E4=B8=8D=E5=8F=98=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Catalog/index.tsx      | 47 ++++++++++++-----------
 src/editor/Catalog/style.less     |  2 +-
 src/editor/Property/FineInput.tsx |  8 +++-
 src/editor/Property/index.tsx     | 62 +++++++++++++++++--------------
 src/editor/index.less             |  6 +++
 src/store/actions/index.ts        |  9 ++++-
 6 files changed, 80 insertions(+), 54 deletions(-)

diff --git a/src/editor/Catalog/index.tsx b/src/editor/Catalog/index.tsx
index 0be61b7..7c3cc63 100644
--- a/src/editor/Catalog/index.tsx
+++ b/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>
+    </>
   );
 };
 
diff --git a/src/editor/Catalog/style.less b/src/editor/Catalog/style.less
index 1ec78d3..59f69fe 100644
--- a/src/editor/Catalog/style.less
+++ b/src/editor/Catalog/style.less
@@ -19,6 +19,6 @@
   background-color: #e5e6e7;
 }
 .catalog-wrapper{
-  height: 100%;
+  height: calc(100% - 36px);
   overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/src/editor/Property/FineInput.tsx b/src/editor/Property/FineInput.tsx
index 3298d5a..e549eb2 100644
--- a/src/editor/Property/FineInput.tsx
+++ b/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
diff --git a/src/editor/Property/index.tsx b/src/editor/Property/index.tsx
index 011559a..96da3c0 100644
--- a/src/editor/Property/index.tsx
+++ b/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>
+    </>
   );
 };
 
diff --git a/src/editor/index.less b/src/editor/index.less
index db53325..ff196fd 100644
--- a/src/editor/index.less
+++ b/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 */
diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts
index b5a66a1..b9fdbdd 100644
--- a/src/store/actions/index.ts
+++ b/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>) {