overlayIcon选中效果

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@finevis/emitter": "^1.0.4",
     "antd": "^4.16.13",
+    "classnames": "^2.3.1",
     "immer": "^9.0.7",
     "less": "^4.1.2",
     "lodash": "^4.17.21",

src/editor/Plot/Tools/index.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from "antd";
-import { useDispatch } from "react-redux";
-import { editorAction } from "@store";
+import { useDispatch, useSelector } from "react-redux";
+import classnames from "classnames";
+import { editorAction, OverlayNamePrefixs, mapStateSelector } from "@store";
 import { OverlayTypes } from "@types";
 
 type IconWithTipProps = {
@@ -8,6 +9,7 @@ type IconWithTipProps = {
   text: string;
   onClick?: () => void;
   placement?: "top" | "right";
+  selected?: boolean;
 };
 
 const IconWithTip = ({
@@ -15,36 +17,44 @@ const IconWithTip = ({
   text,
   onClick = () => {},
   placement = "top",
+  selected,
 }: IconWithTipProps) => {
   return (
     <Tooltip title={text} placement={placement}>
-      <span className={`icon icon-${type}`} onClick={onClick}></span>
+      <span
+        className={classnames("icon", `icon-${type}`, {
+          "icon-selected": selected,
+        })}
+        onClick={onClick}
+      ></span>
     </Tooltip>
   );
 };
 
-const Tools = () => {
+type OverlayToolProps = {
+  type: OverlayTypes;
+};
+
+const OverlayTool = (props: OverlayToolProps) => {
   const dispatch = useDispatch();
+  const { type } = props;
+  const text = OverlayNamePrefixs[type];
 
-  const createOverlay = (type: OverlayTypes) => () =>
-    dispatch(editorAction.createOverlay(type));
+  const { overlayType } = useSelector(mapStateSelector);
+  const selected = type === overlayType;
 
-  const createRectangle = createOverlay(OverlayTypes.Rectangle);
-  const createPolygon = createOverlay(OverlayTypes.Polygon);
-  const createPolyline = createOverlay(OverlayTypes.Polyline);
-  const createCircle = createOverlay(OverlayTypes.Circle);
+  const onClick = () => dispatch(editorAction.createOverlay(type));
+  return <IconWithTip {...{ text, onClick, type, selected }} />;
+};
 
+const Tools = () => {
   return (
     <>
       <div className="marker-tools">
-        <IconWithTip type="rect" text="矩形工具" onClick={createRectangle} />
-        <IconWithTip type="polygon" text="多边形工具" onClick={createPolygon} />
-        <IconWithTip
-          type="polyline"
-          text="多段线工具"
-          onClick={createPolyline}
-        />
-        <IconWithTip type="circle" text="圆形工具" onClick={createCircle} />
+        <OverlayTool type={OverlayTypes.Rectangle} />
+        <OverlayTool type={OverlayTypes.Polygon} />
+        <OverlayTool type={OverlayTypes.Polyline} />
+        <OverlayTool type={OverlayTypes.Circle} />
       </div>
       <div className="common-tools">
         <div className="tools-group">

src/editor/Plot/index.less

@@ -19,7 +19,7 @@
   position: relative;
   z-index: 10;
   .marker-tools {
-    background-color: rgb(105, 105, 105);
+    background-color: #b7b7b7;
     border-radius: 4px;
     display: inline-block;
     color: #fff;

src/icon.less

@@ -66,14 +66,14 @@
 .icon-location:after {
   content: "\e793";
 }
-.icon-rect:after {
+.icon-rectangle:after {
   content: "\e604";
 }
 .icon-circle:after {
   content: "\edf8";
 }
 .icon-selected {
-  color: rgb(31, 107, 206);
+  color: #14aad7;
 }
 .icon-disable {
   color: rgb(155, 155, 155);

src/store/constants.ts

@@ -0,0 +1,8 @@
+import { OverlayTypes } from "@types";
+
+export const OverlayNamePrefixs: Record<OverlayTypes, string> = {
+  [OverlayTypes.Rectangle]: "矩形",
+  [OverlayTypes.Polygon]: "多边形",
+  [OverlayTypes.Polyline]: "多段线",
+  [OverlayTypes.Circle]: "圆形",
+};

src/store/index.ts

@@ -6,6 +6,7 @@ import { EditorAction } from "./actions";
 
 export * from "./type";
 export * from "./selectors";
+export * from "./constants";
 
 type IStore = Store<IEditorState, Action>;
 const store: IStore = createStore(reducer);

src/store/reducers/map/index.ts

@@ -1,15 +1,8 @@
 import produce from "immer";
 import { initState } from "../../initState";
-import { IOverlay } from "@store";
+import { IOverlay, OverlayNamePrefixs } from "@store";
 import { OverlayTypes } from "@types";
 
-const OverlayNamePrefixs: Record<OverlayTypes, string> = {
-  [OverlayTypes.Rectangle]: "矩形",
-  [OverlayTypes.Polygon]: "多边形",
-  [OverlayTypes.Polyline]: "多段线",
-  [OverlayTypes.Circle]: "圆形",
-};
-
 export function createOverlay(state = initState, payload: any) {
   return produce(state, (draft) => {
     draft.map.status = "createOverlay";