From 40ec624eb37aaa49d81bfb8ad5fd8865b2f7a022 Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Thu, 24 Feb 2022 20:17:55 +0800
Subject: [PATCH] =?UTF-8?q?overlayIcon=E9=80=89=E4=B8=AD=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    |  1 +
 src/editor/Plot/Tools/index.tsx | 46 ++++++++++++++++++++-------------
 src/editor/Plot/index.less      |  2 +-
 src/icon.less                   |  4 +--
 src/store/constants.ts          |  8 ++++++
 src/store/index.ts              |  1 +
 src/store/reducers/map/index.ts |  9 +------
 7 files changed, 42 insertions(+), 29 deletions(-)
 create mode 100644 src/store/constants.ts

diff --git a/package.json b/package.json
index 8d53b21..772367f 100644
--- a/package.json
+++ b/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",
diff --git a/src/editor/Plot/Tools/index.tsx b/src/editor/Plot/Tools/index.tsx
index 4948529..b2599f9 100644
--- a/src/editor/Plot/Tools/index.tsx
+++ b/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">
diff --git a/src/editor/Plot/index.less b/src/editor/Plot/index.less
index 452b61e..8e81732 100644
--- a/src/editor/Plot/index.less
+++ b/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;
diff --git a/src/icon.less b/src/icon.less
index 7f5090b..18982d4 100644
--- a/src/icon.less
+++ b/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);
diff --git a/src/store/constants.ts b/src/store/constants.ts
new file mode 100644
index 0000000..5eae8a7
--- /dev/null
+++ b/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]: "圆形",
+};
diff --git a/src/store/index.ts b/src/store/index.ts
index 025b589..5a16286 100644
--- a/src/store/index.ts
+++ b/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);
diff --git a/src/store/reducers/map/index.ts b/src/store/reducers/map/index.ts
index 314b0e3..f1352a3 100644
--- a/src/store/reducers/map/index.ts
+++ b/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";