Update polygon style

Signed-off-by: Giuseppe Macri <[email protected]>
keplergl · Jul 8, 2019 · 9a5d7fd · 9a5d7fd
1 parent 2cd8868
commit 9a5d7fd
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 32 deletions.
diff --git a/src/components/common/toolbar-item.js b/src/components/common/toolbar-item.js
@@ -30,7 +30,8 @@ const StyledDiv = styled.div`
 const ToolbarItem = React.memo(({active, className, icon, label, onClick}) => (
   <StyledDiv active={active} className="save-export-dropdown__item" onClick={(e) => {
     e.stopPropagation();
-    onClick();
+    e.preventDefault();
+    onClick(e);
   }}>
     {icon}
     <div className="save-export-dropdown__title">{label}</div>

diff --git a/src/components/draw/constants.js b/src/components/draw/constants.js
@@ -34,6 +34,7 @@ export const RENDER_TYPE = {
 
 export const COLORS = {
   PRIMARY: '#26B5F2',
-  SECONDARY: '#ffff00'
+  SECONDARY: '#ffff00',
+  TERTIARY: '#6c6c6c'
 };
 
diff --git a/src/components/draw/feature-styles.js b/src/components/draw/feature-styles.js
@@ -25,18 +25,18 @@ export const DEFAULT_RADIUS = 4;
 export const DEFAULT_STATE_STYLE_STROKE = COLORS.PRIMARY;
 
 export const STATE_STYLES_STROKE = {
-  [RenderStates.INACTIVE]: DEFAULT_STATE_STYLE_STROKE,
-  [RenderStates.UNCOMMITTED]: COLORS.PRIMARY,
+  [RenderStates.INACTIVE]: COLORS.PRIMARY,
+  [RenderStates.UNCOMMITTED]: COLORS.TERTIARY,
   [RenderStates.SELECTED]: COLORS.PRIMARY,
   [RenderStates.HOVERED]: COLORS.PRIMARY
 };
 
 export const DEFAULT_STATE_STYLE_FILL = '#000';
 
 export const STATE_STYLES_FILL = {
-  [RenderStates.INACTIVE]: COLORS.PRIMARY,
+  [RenderStates.INACTIVE]: COLORS.TERTIARY,
   [RenderStates.UNCOMMITTED]: COLORS.PRIMARY,
-  [RenderStates.SELECTED]: COLORS.SECONDARY,
+  [RenderStates.SELECTED]: COLORS.PRIMARY,
   [RenderStates.HOVERED]: COLORS.PRIMARY
 };
 

diff --git a/src/components/draw/index.js b/src/components/draw/index.js
@@ -20,6 +20,7 @@
 
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import {Editor} from 'react-map-gl-draw';
 import window from 'global/window';
 
@@ -34,6 +35,7 @@ import {
 const DEFAULT_EDIT_HANDLE_SHAPE = 'circle';
 
 const DELETE_KEY_EVENT_CODE = 8;
+const ESCAPE_KEY_EVENT_CODE = 27;
 
 class Draw extends Component {
   static propTypes = {
@@ -49,6 +51,10 @@ class Draw extends Component {
     clickRadius: DEFAULT_RADIUS
   };
 
+  state = {
+    showActions: false
+  };
+
   componentDidMount() {
     window.addEventListener('keydown', this._onKeyPressed);
   }
@@ -65,34 +71,39 @@ class Draw extends Component {
       return;
     }
 
-    if (
-      event.which === DELETE_KEY_EVENT_CODE &&
-      selectedFeature
-    ) {
-      this.props.onDeleteFeature((selectedFeature || {}).id)
+    switch (event.which) {
+      case DELETE_KEY_EVENT_CODE:
+        this.props.onDeleteFeature((selectedFeature || {}).id);
+        break;
+      default: break;
     }
   };
 
   _getEditHandleShape = () => {
     return DEFAULT_EDIT_HANDLE_SHAPE;
   };
 
+  _onSelect = feature => {
+    this.props.onSelect(feature);
+  };
+
   render() {
     const {clickRadius, editor, features} = this.props;
     const {selectedFeature = {}} = editor;
 
     return (
-      <div>
+      <div className="editor">
         <Editor
           clickRadius={clickRadius}
           mode={editor.mode}
           features={features}
           selectedFeatureId={(selectedFeature || {}).id}
-          onSelect={this.props.onSelect}
+          onSelect={this._onSelect}
           onUpdate={this.props.onUpdate}
           getEditHandleShape={this._getEditHandleShape}
           getFeatureStyle={getFeatureStyle}
           getEditHandleStyle={getEditHandleStyle}
+          style={{zIndex: 1}}
         />
       </div>
     );

diff --git a/src/components/map-container.js b/src/components/map-container.js
@@ -67,15 +67,15 @@ MapContainerFactory.deps = [
 export default function MapContainerFactory(MapPopover, MapControl) {
   /* eslint-disable complexity */
   const MapTooltip = React.memo(({
-                                   mapState,
-                                   hoverInfo,
-                                   clicked,
-                                   datasets,
-                                   interactionConfig,
-                                   layers,
-                                   mapLayers,
-                                   mousePos: {mousePosition, coordinate, pinned}
-                                 }) => {
+                             mapState,
+                             hoverInfo,
+                             clicked,
+                             datasets,
+                             interactionConfig,
+                             layers,
+                             mapLayers,
+                             mousePos: {mousePosition, coordinate, pinned}
+                           }) => {
     if (!mousePosition) {
       return null;
     }
@@ -460,6 +460,7 @@ export default function MapContainerFactory(MapPopover, MapControl) {
               <Editor
                 editor={uiState.editor}
                 features={visState.editor.features}
+                isEnabled={isEdit}
                 onDeleteFeature={uiStateActions.deleteFeature}
                 onSelect={uiStateActions.setSelectedFeature}
                 onUpdate={visStateActions.setFeatures}

diff --git a/src/components/map/map-control.js b/src/components/map/map-control.js
@@ -313,25 +313,19 @@ const MapDrawPanel = React.memo(({editor, isActive, onToggleMenuPanel, onSetEdit
       {isActive ? (
         <StyledToolBar show={isActive} direction="column">
           <ToolbarItem
-            onClick={() => {
-              onSetEditorMode(EDITOR_MODES.EDIT_VERTEX);
-            }}
+            onClick={() => onSetEditorMode(EDITOR_MODES.EDIT_VERTEX)}
             label="select"
             icon={(<CursorClick height="22px"/>)}
             active={editor.mode === EDITOR_MODES.EDIT_VERTEX}
           />
           <ToolbarItem
-            onClick={() => {
-              onSetEditorMode(EDITOR_MODES.DRAW_POLYGON);
-            }}
+            onClick={() => onSetEditorMode(EDITOR_MODES.DRAW_POLYGON)}
             label="polygon"
             icon={(<Polygon height="22px"/>)}
             active={editor.mode === EDITOR_MODES.DRAW_POLYGON}
           />
           <ToolbarItem
-            onClick={() => {
-              onSetEditorMode(EDITOR_MODES.DRAW_RECTANGLE);
-            }}
+            onClick={() => onSetEditorMode(EDITOR_MODES.DRAW_RECTANGLE)}
             label="rectangle"
             icon={(<Rectangle height="22px"/>)}
             active={editor.mode === EDITOR_MODES.DRAW_RECTANGLE}

diff --git a/src/reducers/vis-state-updaters.js b/src/reducers/vis-state-updaters.js
@@ -124,6 +124,7 @@ const visStateUpdaters = null;
  * @property {boolean} fileLoading
  * @property {*} fileLoadingErr
  * @property {Array} splitMaps - a list of objects of layer availabilities and visibilities for each map
+ * @property {Object} editor
  * @public
  */
 export const INITIAL_VIS_STATE = {
@@ -945,7 +946,6 @@ export const mapClickUpdater = (state) => {
 };
 
 export const mouseMoveUpdater = (state, {evt}) => {
-
   if (Object.values(state.interactionConfig).some(config => config.enabled)) {
     return {
       ...state,