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