feat: change toolbar UI

Author: yan1

public/icons/goback.png

@@ -26,18 +26,6 @@ class App extends React.Component<Props, State> {
         //   url: 'icons/comb.png',
         //   subTools: []
         // },
-        {
-          name: 'Repel',
-          type: 'png',
-          url: 'icons/repel.png',
-          subTools: []
-        },
-        {
-          name: 'Attract',
-          type: 'png',
-          url: 'icons/attract.png',
-          subTools: []
-        },
         {
           name: 'Transform',
           type: 'png',
@@ -48,7 +36,20 @@ class App extends React.Component<Props, State> {
           name: 'Drag',
           type: 'png',
           url: 'icons/drag.png',
-          subTools: []
+          subTools: [
+            {
+              name: 'Repel',
+              type: 'png',
+              url: 'icons/repel.png',
+              subTools: []
+            },
+            {
+              name: 'Attract',
+              type: 'png',
+              url: 'icons/attract.png',
+              subTools: []
+            }
+          ]
         },
         {
           name: 'Bend',
@@ -131,7 +132,7 @@ class App extends React.Component<Props, State> {
           ]
         },
         {
-          name: 'Text',
+          name: 'Adjust',
           type: 'png',
           url: 'icons/label.png',
           subTools: []

src/App.tsx

@@ -123,7 +123,7 @@ class MenuBar extends Component<Props, State> {
     this.state = {
       option: 0,
       toolIconUrl: '',
-      goBackIconUrl: 'icons/terminate_active.png'
+      goBackIconUrl: 'icons/goback.png'
     };
   }
 

src/components/menubar/index.tsx

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
-import { StateType } from '../../../types';
+import { StateType, DispatchType } from '../../../types';
+import { setTool } from '../../../store/actions';
 import { getSelectedVisualObjects } from '../../../store/selectors';
 import { Input, Slider, Popover, Menu, Dropdown, Button } from 'antd';
 import { PointText } from 'paper';
@@ -13,9 +14,16 @@ const mapStateToProps = (state: StateType) => {
   };
 };
 
+const mapDispatchToProps = (dispatch: DispatchType) => {
+  return {
+    activateTool: (name: string, use: boolean) => dispatch(setTool(name, use))
+  };
+};
+
 type Props = {
   xOffSet?: number;
-} & ReturnType<typeof mapStateToProps>;
+} & ReturnType<typeof mapStateToProps> &
+  ReturnType<typeof mapDispatchToProps>;
 
 type State = {
   fontFamily: string;
@@ -97,6 +105,14 @@ class FontBar extends Component<Props, State> {
     );
     return (
       <FontBar>
+        <Button
+          shape="circle"
+          onClick={() => {
+            this.props.activateTool('Text', true);
+          }}
+        >
+          文
+        </Button>
         <Dropdown overlay={menu} trigger={['click']}>
           <Button
             style={{
@@ -127,4 +143,4 @@ class FontBar extends Component<Props, State> {
   }
 }
 
-export default connect(mapStateToProps, null)(FontBar);
+export default connect(mapStateToProps, mapDispatchToProps)(FontBar);