diff --git a/src/editor/Catalog/index.tsx b/src/editor/Catalog/index.tsx index eb41e53..4cafd06 100644 --- a/src/editor/Catalog/index.tsx +++ b/src/editor/Catalog/index.tsx @@ -1,7 +1,8 @@ import { Collapse } from "antd"; import { useSelector } from "react-redux"; -import { IOverlay, editorAction, mapOptionsSelector } from "@store"; +import { editorAction, selectedIdsSelector, mapOptionsSelector } from "@store"; +import { IOverlay } from "@map"; import "./style.less"; import classNames from "classnames"; @@ -15,7 +16,7 @@ export type OverlayListProps = { const OverlayList = (props: OverlayListProps) => { const { overlays } = props; const onClick = (id: string) => () => editorAction.selectOverlay(id); - const { selectedIds } = useSelector(mapOptionsSelector); + const selectedIds = useSelector(selectedIdsSelector); return ( <> diff --git a/src/map/MapEditor.ts b/src/map/MapEditor.ts index 8ffbae4..aa8c949 100644 --- a/src/map/MapEditor.ts +++ b/src/map/MapEditor.ts @@ -28,6 +28,8 @@ type OverlayTemp = { target: AMap.MapOverlay; }; +const getOverlayOptions = (type: OverlayTypes) => + type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions; export class MapEditor extends Emitter implements IMapEditor { dom: HTMLDivElement; private _map: AMap.Map | undefined; @@ -103,6 +105,9 @@ export class MapEditor extends Emitter implements IMapEditor { type, target, }; + target.setOptions( + type === OverlayTypes.Polyline ? PolylineOptions : PolygonOptions + ); this.map.add(target); }; @@ -148,6 +153,10 @@ export class MapEditor extends Emitter implements IMapEditor { selectOverlays(ids?: string[]) { if (!ids?.length) return; + this.selectedIds.forEach((id) => { + const { target, type } = this.overlayMap[id]; + target.setOptions(getOverlayOptions(type)); + }); this.selectedIds = ids; ids.forEach((id) => { const { target } = this.overlayMap[id]; diff --git a/src/map/constants.ts b/src/map/constants.ts index 81bbab1..de3b429 100644 --- a/src/map/constants.ts +++ b/src/map/constants.ts @@ -29,4 +29,6 @@ export const PolylineOptions: OverlayOptions = { export const SelectedOptions: OverlayOptions = { strokeColor: SelectedStroke, + draggable: true, + cursor: "pointer", }; diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts index 7a1f270..c7b000e 100644 --- a/src/store/actions/index.ts +++ b/src/store/actions/index.ts @@ -89,7 +89,8 @@ export class EditorAction { } selectOverlay(id: string) { - // + this.mapEditor?.selectOverlays([id]); + this.dispatch(StoreAction.selectOverlay(id)); } saveProject() { diff --git a/src/store/initState.ts b/src/store/initState.ts index dd4383f..57119bb 100644 --- a/src/store/initState.ts +++ b/src/store/initState.ts @@ -3,6 +3,7 @@ import { IEditorState } from "./type"; export const initState: IEditorState = { status: null, overlayType: null, + selectedIds: [], map: { polygons: [], polylines: [], diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts index d5ff9e3..aab50b9 100644 --- a/src/store/reducers/index.ts +++ b/src/store/reducers/index.ts @@ -2,13 +2,7 @@ import produce from "immer"; import { IEditorState } from "../type"; import { initState } from "../initState"; import { ActionTypes } from "../actions"; -import { - createOverlay, - finishEditOverlay, - selectOverlay, - deleteOverlays, -} from "./map"; -import { Command } from "@types"; +import { createOverlay, finishEditOverlay, deleteOverlays } from "./map"; export type Action = { type: ActionTypes; @@ -27,10 +21,13 @@ const actionReducers: Record = { function replaceState(state = initState, payload: IEditorState) { return payload; - // return produce(payload, (draft) => { - // // draft.map.command = Command.OpenProject; - // retr - // }); +} + +export function selectOverlay(state = initState, payload: any) { + const id = payload as string; + return produce(state, (draft) => { + draft.selectedIds = [id]; + }); } export function reducer(state = initState, action: Action) { diff --git a/src/store/reducers/map/index.ts b/src/store/reducers/map/index.ts index 82a77d1..4a7000b 100644 --- a/src/store/reducers/map/index.ts +++ b/src/store/reducers/map/index.ts @@ -1,7 +1,8 @@ import produce from "immer"; import { initState } from "../../initState"; -import { IOverlay, OverlayNamePrefixs } from "@store"; +import { OverlayNamePrefixs } from "@store"; import { OverlayTypes, Status } from "@types"; +import { IOverlay } from "@map"; export function createOverlay(state = initState, payload: OverlayTypes) { return produce(state, (draft) => { @@ -50,10 +51,3 @@ export function finishEditOverlay(state = initState, payload: any) { draft.status = null; }); } - -export function selectOverlay(state = initState, payload: any) { - const id = payload as string; - return produce(state, (draft) => { - draft.map.selectedIds = [id]; - }); -} diff --git a/src/store/selectors.ts b/src/store/selectors.ts index 4a4cce4..e764c82 100644 --- a/src/store/selectors.ts +++ b/src/store/selectors.ts @@ -3,3 +3,4 @@ import { IEditorState } from "@store"; export const mapOptionsSelector = (state: IEditorState) => state.map; export const overlayTypeSelector = (state: IEditorState) => state.overlayType; export const statusSelector = (state: IEditorState) => state.status; +export const selectedIdsSelector = (state: IEditorState) => state.selectedIds; diff --git a/src/store/type.ts b/src/store/type.ts index 5d77330..93e2360 100644 --- a/src/store/type.ts +++ b/src/store/type.ts @@ -1,30 +1,13 @@ import { Store } from "redux"; import { Action } from "./reducers"; -import { OverlayTypes, Status, Command } from "@types"; +import { OverlayTypes, Status } from "@types"; import { IMapOptions } from "@map"; export type IStore = Store; -export interface IOverlay { - id: string; - name: string; - type: OverlayTypes; - lngLat?: GeoJSON.Position; - path?: GeoJSON.Position[]; - radius?: number; -} -export interface IMapState { - status: Status | null; - command: Command | null; - overlayType: OverlayTypes | null; - polygons: IOverlay[]; - polylines: IOverlay[]; - circles: IOverlay[]; - rectangles: IOverlay[]; - selectedIds?: string[]; -} export interface IEditorState { map: IMapOptions; status: Status | null; + selectedIds: string[]; overlayType: OverlayTypes | null; }