From 3b05f38b11157f623118b7d195b1c4986f204b99 Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Thu, 24 Feb 2022 16:00:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=82=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Catalog/index.tsx  | 38 ++++++++++++++++++++++++++++++-----
 src/editor/Catalog/style.less | 11 ++++++++++
 src/store/index.ts            | 24 ++--------------------
 src/store/selectors.ts        |  3 +++
 4 files changed, 49 insertions(+), 27 deletions(-)
 create mode 100644 src/store/selectors.ts

diff --git a/src/editor/Catalog/index.tsx b/src/editor/Catalog/index.tsx
index 4673222..2a916d4 100644
--- a/src/editor/Catalog/index.tsx
+++ b/src/editor/Catalog/index.tsx
@@ -1,20 +1,48 @@
 import { Collapse } from "antd";
+import { useSelector } from "react-redux";
+
+import { mapStateSelector } from "@store";
+import { IOverlay } from "@store";
 
 import "./style.less";
 
 const { Panel } = Collapse;
 
+export type OverlayListProps = {
+  overlays: IOverlay[];
+};
+
+const OverlayList = (props: OverlayListProps) => {
+  const { overlays } = props;
+
+  return (
+    <>
+      {overlays.map((overlay, index) => {
+        return (
+          <div key={index} className="overlay-item">
+            {overlay.name}
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
 const Catalog = () => {
-  const callback = (key: string | string[]) => console.log(key);
+  // const callback = (key: string | string[]) => console.log(key);
+  const { rectangles, polygons } = useSelector(mapStateSelector);
   return (
     <Collapse
       defaultActiveKey={["1"]}
-      onChange={callback}
+      // onChange={callback}
       expandIconPosition="right"
     >
-      <Panel header="矩形" key="1"></Panel>
-      <Panel header="多边形" key="2"></Panel>
-      <Panel header="线段" key="3"></Panel>
+      <Panel header="矩形" key={1}>
+        <OverlayList overlays={rectangles} />
+      </Panel>
+      <Panel header="多边形" key={2}>
+        <OverlayList overlays={polygons} />
+      </Panel>
     </Collapse>
   );
 };
diff --git a/src/editor/Catalog/style.less b/src/editor/Catalog/style.less
index 7d9a586..2031058 100644
--- a/src/editor/Catalog/style.less
+++ b/src/editor/Catalog/style.less
@@ -2,4 +2,15 @@
   padding: 6px 8px;
   font-size: 12px;
   background-color: #f7fafc;
+}
+.ant-collapse-content > .ant-collapse-content-box{
+  padding: 4px 12px;
+  font-size: 12px;
+}
+.overlay-item{
+  margin-bottom: 4px;
+  cursor: pointer;
+  &:hover, &[data-selected]{
+    background-color: #f7fafc;
+  }
 }
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index a9a29f0..025b589 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,10 +1,11 @@
 import { createStore, Store } from "redux";
-import { createContext, Context, useContext } from "react";
+import { createContext, Context } from "react";
 import { reducer, Action } from "./reducers";
 import { IEditorState } from "./type";
 import { EditorAction } from "./actions";
 
 export * from "./type";
+export * from "./selectors";
 
 type IStore = Store<IEditorState, Action>;
 const store: IStore = createStore(reducer);
@@ -13,29 +14,8 @@ const store: IStore = createStore(reducer);
 
 export { store };
 
-// export class Store {
-//   // editorState: IEditorState;
-//   // mapState: IMapState;
-
-//   constructor() {
-//     this.editorState = {};
-//     this.mapState = {
-//       polygons: [],
-//     };
-//   }
-
-//   addPolygon() {
-//     //
-//   }
-// }
-
 export const editorAction = new EditorAction();
 
 export const StoreContext = createContext<IStore | null>(
   null
 ) as Context<IStore>;
-
-// export const useStore = () => {
-//   const store = useReduxContext(StoreContext);
-//   return store;
-// };
diff --git a/src/store/selectors.ts b/src/store/selectors.ts
new file mode 100644
index 0000000..0fed680
--- /dev/null
+++ b/src/store/selectors.ts
@@ -0,0 +1,3 @@
+import { editorAction, IEditorState } from "@store";
+
+export const mapStateSelector = (state: IEditorState) => state.map;