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
属性区域
;
+ 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) => {
+ 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 (
+
+
+
+ updateOverlayProps({
+ id: overlay.id,
+ name: e.target.value,
+ })
+ }
+ />
+
+
+
+
+
+
+ );
};
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 = {
type: ActionTypes.ClearOverlays,
};
},
+ updateOverlayProps(payload: Partial) {
+ 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.DeleteOverlays]: deleteOverlays,
[ActionTypes.ReplaceState]: replaceState,
[ActionTypes.ClearOverlays]: clearOverlays,
+ [ActionTypes.UpdateOverlayProps]: updateOverlayProps,
};
+function updateOverlayProps(state = initState, payload: Partial) {
+ 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;
}