Merge pull request #38 from freenowtech/feat/add-redo-undo-icons

Feat: Add Redo and Undo icons and PolygonEditor gif to README

README.md

@@ -43,7 +43,19 @@ You can also link the css style from a CDN in your index.html
 
 ##### PolygonDraw
 
-**Props**
+![Editing Polygon](docs/polygon-editor.gif)
+
+**Editing functionalities:**
+- Undo: undoes the last action
+- Redo: redoes the last action
+- Pen: adds small points between each vertex to enable editing the polygon shape and creating more vertexes.
+- Delete: deletes selected vertex(es)
+- Import: enables the import of a polygon with GeoJSON format
+- Export: exports the polygon in GEOJson, JTS, or LtnLng formats
+- Focus: refocuses the map to the selected polygon
+
+
+**Component Props**
 
 -   **polygon**: _Coordinate[] | Coordinate[][]_ (Single or list of polygons to render)
 -   **activeIndex**?: _number_ (index of currently active polygon, can be omitted when only one polygon exists. **Default value: 0**)
@@ -60,7 +72,7 @@ You can also link the css style from a CDN in your index.html
 The initialCenter and initialZoom props are applicable only when both the polygon and the boundary coordinates are empty.
 This flow explains which parameters are used to focus the map:
 
-![Focus flow](map_focus_flow.png)
+![Focus flow](docs/map_focus_flow.png)
 
 For more details, have a look at the Component definition in [PolygonDraw](src/PolygonDraw/PolygonDraw.tsx)
 

src/ActionBar/ActionBar.tsx

@@ -50,10 +50,10 @@ export const ActionBar: FunctionComponent<Props> = ({
     onUndo,
 }) => (
     <Container>
-        <ActionButton onClick={onUndo} icon={ActionButtonIcons.IMPORT} disabled={!isUndoable} inactive={!isUndoable}>
+        <ActionButton onClick={onUndo} icon={ActionButtonIcons.UNDO} disabled={!isUndoable} inactive={!isUndoable}>
             {LABELS.UNDO}
         </ActionButton>
-        <ActionButton onClick={onRedo} icon={ActionButtonIcons.EXPORT} disabled={!isRedoable} inactive={!isRedoable}>
+        <ActionButton onClick={onRedo} icon={ActionButtonIcons.REDO} disabled={!isRedoable} inactive={!isRedoable}>
             {LABELS.REDO}
         </ActionButton>
         {editable && (

src/ActionBar/ActionButton.tsx

@@ -1,26 +1,31 @@
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 
-import { AUTHENTIC_BLUE_900, AUTHENTIC_BLUE_200, ACTION_BLUE_900, WHITE } from '../common/colors';
+import { ACTION_BLUE_900, AUTHENTIC_BLUE_200, AUTHENTIC_BLUE_900, WHITE } from '../common/colors';
 
+import { Export } from './Icons/Export';
 import { Frame } from './Icons/Frame';
+import { Import } from './Icons/Import';
+import { Redo } from './Icons/Redo';
 import { Trashcan } from './Icons/Trashcan';
+import { Undo } from './Icons/Undo';
 import { VectorMode } from './Icons/VectorMode';
-import { Export } from './Icons/Export';
-import { Import } from './Icons/Import';
 
 export enum ActionButtonIcons {
     TRASHCAN = 'TRASHCAN',
     FRAME = 'FRAME',
     VECTOR_MODE = 'VECTOR_MODE',
     EXPORT = 'EXPORT',
     IMPORT = 'IMPORT',
+    UNDO = 'UNDO',
+    REDO = 'REDO',
 }
 
 interface ContainerProps {
     disabled?: boolean;
 }
-const Container = styled('button').attrs(() => ({type: 'button'}))<ContainerProps>`
+
+const Container = styled('button').attrs(() => ({ type: 'button' }))<ContainerProps>`
     position: relative;
     width: 42px;
     height: 42px;
@@ -71,6 +76,12 @@ const renderIcon = (icon: ActionButtonIcons, inactive?: boolean, activeIconColor
         case ActionButtonIcons.IMPORT: {
             return <Import {...props} />;
         }
+        case ActionButtonIcons.REDO: {
+            return <Redo {...props} />;
+        }
+        case ActionButtonIcons.UNDO: {
+            return <Undo {...props} />;
+        }
         default:
             return null;
     }

src/ActionBar/Icons/Export.tsx

@@ -1,12 +1,7 @@
-import React, { SVGProps } from 'react';
-
 import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Export: React.FC<Props> = ({ iconColor = AUTHENTIC_BLUE_900, ...props }) => (
+export const Export = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg viewBox="0 0 24 24" {...props}>
         <path
             d="M19 19v2H5v-2h14zM13 3v10.436l5-4.445v2.676L12 17l-6-5.333V8.991l5 4.445V3h2z"

src/ActionBar/Icons/Frame.tsx

@@ -1,10 +1,7 @@
-import { FunctionComponent, SVGProps } from 'react';
+import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Frame: FunctionComponent<Props> = ({ iconColor, ...props }) => (
+export const Frame = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg width={24} height={24} viewBox="0 0 24 24" {...props}>
         <path
             fill={iconColor}

src/ActionBar/Icons/Import.tsx

@@ -1,12 +1,7 @@
-import React, { SVGProps } from 'react';
-
 import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Import: React.FC<Props> = ({ iconColor = AUTHENTIC_BLUE_900, ...props }) => (
+export const Import = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg viewBox="0 0 24 24" {...props}>
         <path
             d="M19 19v2H5v-2h14zM12 3l6 5.333v2.675l-5-4.444V17h-2V6.564l-5 4.445V8.334L12 3z"

src/ActionBar/Icons/Redo.tsx

@@ -0,0 +1,12 @@
+import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
+
+export const Redo = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
+    <svg viewBox="0 0 24 24" height="1em" width="1em" {...props}>
+        <path
+            d="M9 18h3v-2H9c-1.654 0-3-1.346-3-3s1.346-3 3-3h6v3l5-4-5-4v3H9c-2.757 0-5 2.243-5 5s2.243 5 5 5z"
+            fill={iconColor}
+            fillRule="nonzero"
+        />
+    </svg>
+);

src/ActionBar/Icons/Trashcan.tsx

@@ -1,12 +1,7 @@
-import { FunctionComponent, SVGProps } from 'react';
-
 import { AUTHENTIC_BLUE_900 } from '../../common/colors';
+import { IconProps } from './types';
 
-interface Props extends SVGProps<SVGSVGElement> {
-    iconColor?: string;
-}
-
-export const Trashcan: FunctionComponent<Props> = ({ iconColor = AUTHENTIC_BLUE_900, ...props }) => (
+export const Trashcan = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
     <svg width={24} height={24} viewBox="4 4 19 19" {...props}>
         <path
             fill={iconColor}

src/ActionBar/Icons/Undo.tsx

@@ -0,0 +1,12 @@
+import { AUTHENTIC_BLUE_900 } from '../../common/colors'
+import { IconProps } from './types'
+
+export const Undo = ({ iconColor = AUTHENTIC_BLUE_900, ...props }: IconProps): React.ReactElement => (
+    <svg viewBox="0 0 24 24" height="1em" width="1em" {...props}>
+        <path
+            d="M9 10h6c1.654 0 3 1.346 3 3s-1.346 3-3 3h-3v2h3c2.757 0 5-2.243 5-5s-2.243-5-5-5H9V5L4 9l5 4v-3z"
+            fill={iconColor}
+            fillRule="nonzero"
+        />
+    </svg>
+);

src/ActionBar/Icons/types.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+    iconColor?: string;
+}