From 40180cbf818a0eeea15f5f49f88885f1669a2b46 Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Sun, 6 Mar 2022 19:52:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E8=A6=86?=
 =?UTF-8?q?=E7=9B=96=E7=89=A9=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Property/index.less   |  3 ++
 src/editor/Property/index.tsx    | 73 ++++++++++++++++++++++++++++++--
 src/map/type.ts                  | 11 ++++-
 src/store/actions/StoreAction.ts |  7 +++
 src/store/actions/index.ts       |  3 +-
 src/store/index.ts               |  2 +
 src/store/reducers/index.ts      | 11 +++++
 7 files changed, 103 insertions(+), 7 deletions(-)

diff --git a/src/editor/Property/index.less b/src/editor/Property/index.less
index e69de29..0789f7b 100644
--- a/src/editor/Property/index.less
+++ b/src/editor/Property/index.less
@@ -0,0 +1,3 @@
+.property-area{
+  padding: 8px;
+}
\ No newline at end of file
diff --git a/src/editor/Property/index.tsx b/src/editor/Property/index.tsx
index 2600cb3..dfb96ce 100644
--- a/src/editor/Property/index.tsx
+++ b/src/editor/Property/index.tsx
@@ -1,10 +1,75 @@
-import { useSelector } from "react-redux";
-import { selectedIdsSelector, mapOptionsSelector } from "@store";
+import { useDispatch, useSelector } from "react-redux";
+import { Form, Input, Select } from "antd";
+import { selectedIdsSelector, mapOptionsSelector, StoreAction } from "@store";
+import { OverlayCategory, IOverlay } from "@map";
+
+import "./index.less";
+import { OverlayTypes } from "@types";
+
+type CategoryItem = {
+  title: string;
+  value: OverlayCategory;
+};
+
+const { Option } = Select;
 
 const Property = () => {
   const selectedIds = useSelector(selectedIdsSelector);
-  // const {  } = useSelector(mapOptionsSelector);
-  return <h1>属性区域</h1>;
+  const { overlays } = useSelector(mapOptionsSelector);
+  const dispatch = useDispatch();
+  if (!selectedIds?.length) return <></>;
+  const [id] = selectedIds;
+  const overlay = overlays.find((overlay) => overlay.id === id)!;
+
+  const updateOverlayProps = (props: Partial<IOverlay>) => {
+    dispatch(StoreAction.updateOverlayProps(props));
+  };
+
+  const categorys: CategoryItem[] = [];
+  if (overlay.type === OverlayTypes.Polyline) {
+    categorys.push({ title: "道路", value: OverlayCategory.Road });
+  } else {
+    categorys.push(
+      { title: "建筑", value: OverlayCategory.Building },
+      { title: "河流", value: OverlayCategory.Water },
+      { title: "草地", value: OverlayCategory.Grass }
+    );
+  }
+
+  return (
+    <div className="property-area">
+      <Form size="small">
+        <Form.Item label="名称">
+          <Input
+            value={overlay.name}
+            onChange={(e) =>
+              updateOverlayProps({
+                id: overlay.id,
+                name: e.target.value,
+              })
+            }
+          />
+        </Form.Item>
+        <Form.Item label="类型">
+          <Select
+            value={overlay.category}
+            onChange={(category) =>
+              updateOverlayProps({
+                id: overlay.id,
+                category,
+              })
+            }
+          >
+            {categorys.map((item) => (
+              <Option key={item.title} value={item.value}>
+                {item.title}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </Form>
+    </div>
+  );
 };
 
 export default Property;
diff --git a/src/map/type.ts b/src/map/type.ts
index 65029b7..7d55525 100644
--- a/src/map/type.ts
+++ b/src/map/type.ts
@@ -13,6 +13,13 @@ export interface IMapEditor {
   getZoom(): number;
 }
 
+export enum OverlayCategory {
+  Building = "building",
+  Water = "water",
+  Road = "road",
+  Grass = "grass",
+}
+
 export interface IOverlay {
   id: string;
   name: string;
@@ -21,8 +28,8 @@ export interface IOverlay {
   path?: GeoJSON.Position[];
   radius?: number;
   backgroundImage?: string;
-  category?: string;
-  height?: string;
+  category?: OverlayCategory;
+  height?: number;
 }
 export interface IMapOptions {
   overlays: IOverlay[];
diff --git a/src/store/actions/StoreAction.ts b/src/store/actions/StoreAction.ts
index bb2e13d..ad5a6ed 100644
--- a/src/store/actions/StoreAction.ts
+++ b/src/store/actions/StoreAction.ts
@@ -8,6 +8,7 @@ export enum ActionTypes {
   DeleteOverlays = "deleteOverlays",
   ReplaceState = "replaceState",
   ClearOverlays = "clearOverlays",
+  UpdateOverlayProps = "updateOverlayProps",
 }
 
 type ActionCreator = (payload?: any) => {
@@ -51,4 +52,10 @@ export const StoreAction: Record<ActionTypes, ActionCreator> = {
       type: ActionTypes.ClearOverlays,
     };
   },
+  updateOverlayProps(payload: Partial<IOverlay>) {
+    return {
+      type: ActionTypes.UpdateOverlayProps,
+      payload,
+    };
+  },
 };
diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts
index 9c14b71..dc4b56b 100644
--- a/src/store/actions/index.ts
+++ b/src/store/actions/index.ts
@@ -10,7 +10,7 @@ import { StoreAction } from "./StoreAction";
 import { IStore } from "../type";
 import { initState } from "../initState";
 
-export { ActionTypes } from "./StoreAction";
+export { ActionTypes, StoreAction } from "./StoreAction";
 
 export class EditorAction {
   mapEditor: IMapEditor | null = null;
@@ -58,6 +58,7 @@ export class EditorAction {
           zoom: this.mapEditor?.getZoom(),
         })
       );
+      console.log("saved!");
     }, 10000);
   }
   // ---------- public methods -------------
diff --git a/src/store/index.ts b/src/store/index.ts
index fb3005c..3bd1e91 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -10,6 +10,8 @@ export * from "./type";
 export * from "./selectors";
 export * from "./constants";
 
+export { StoreAction } from "./actions";
+
 // export { EditorAction };
 
 declare global {
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
index 491655e..091fdfc 100644
--- a/src/store/reducers/index.ts
+++ b/src/store/reducers/index.ts
@@ -9,6 +9,8 @@ import {
   clearOverlays,
 } from "./map";
 
+import { IOverlay } from "@map";
+
 export type Action = {
   type: ActionTypes;
   payload?: any;
@@ -23,8 +25,17 @@ const actionReducers: Record<ActionTypes, ActionReducer> = {
   [ActionTypes.DeleteOverlays]: deleteOverlays,
   [ActionTypes.ReplaceState]: replaceState,
   [ActionTypes.ClearOverlays]: clearOverlays,
+  [ActionTypes.UpdateOverlayProps]: updateOverlayProps,
 };
 
+function updateOverlayProps(state = initState, payload: Partial<IOverlay>) {
+  return produce(state, (draft) => {
+    const { id, ...rest } = payload;
+    const overlay = draft.map.overlays.find((overlay) => overlay.id === id);
+    Object.assign(overlay, rest);
+  });
+}
+
 function replaceState(state = initState, payload: IEditorState) {
   return payload;
 }