初始化目录图层列表

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>
   );
 };

src/editor/Catalog/style.less

@@ -3,3 +3,14 @@
   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;
+  }
+}

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;
-// };

src/store/selectors.ts

@@ -0,0 +1,3 @@
+import { editorAction, IEditorState } from "@store";
+
+export const mapStateSelector = (state: IEditorState) => state.map;