Able to draw polygons

Signed-off-by: Giuseppe Macri <[email protected]>

docs/user-guides/b-kepler-gl-workflow/a-add-data-to-the-map.md

@@ -37,6 +37,7 @@ CSV file should contain header row and multiple columns. Each row should be 1 fe
 | b | 31.2311 | -127.30231 | 11 | 2019-08-01 12:05
 | c | 31.2334 | -127.30238 | 9 | 2019-08-01 11:55
 
+
 #### 1. Data type detection
 
 Because CSV file content is uploaded as strings, kepler.gl will attempt to detect column data type by parsing a sample of data in each column. kepler.gl can detect
@@ -139,7 +140,7 @@ id,geometry
             ]
         },
         "properties": {
-          "prop0": "value0",
+          "prop0": "value0"
         }
     }]
   }

examples/demo-app/webpack.config.js

@@ -69,7 +69,8 @@ const CONFIG = {
   plugins: [
     new webpack.EnvironmentPlugin([
       'MapboxAccessToken',
-      'DropboxClientId'
+      'DropboxClientId',
+      'MapboxExportToken'
     ])
   ]
 };

package.json

@@ -108,6 +108,7 @@
     "react-json-pretty": "^1.7.9",
     "react-lifecycles-compat": "^3.0.4",
     "react-map-gl": "^5.0.3",
+    "react-map-gl-draw": "0.14.8",
     "react-markdown": "^4.0.6",
     "react-modal": "^3.8.1",
     "react-onclickoutside": "^6.7.1",

src/actions/actions.js

@@ -156,7 +156,7 @@ export const receiveMapConfig = createAction(
  * @param {Boolean} payload.mapStylesReplaceDefault - mapStylesReplaceDefault to be saved to mapStyle reducer
  * @public
  */
-export const keplerGlInit =  createAction(
+export const keplerGlInit = createAction(
   ActionTypes.INIT,
   ({mapboxApiAccessToken, mapboxApiUrl, mapStylesReplaceDefault} = {}) => ({mapboxApiAccessToken, mapboxApiUrl, mapStylesReplaceDefault})
 );

src/actions/ui-state-actions.js

@@ -252,6 +252,31 @@ export const setExportHTMLMapMode = createAction(
   payload => payload
 );
 
+/** Set the map mode
+ * @memberof main
+ * @param {string} mode one of EDITOR_MODES
+ * @public
+ * @example
+ * import {setMapMode} from 'kepler.gl/actions';
+ * import {EDITOR_MODES} from 'kepler.gl/constants';
+ *
+ * this.props.dispatch(setMapMode(EDITOR_MODES.DRAW_POLYGON));
+ */
+export const setEditorMode = createAction(
+  ActionTypes.SET_EDITOR_MODE,
+  mode => mode
+);
+
+export const setSelectedFeature = createAction(
+  ActionTypes.SET_SELECTED_FEATURE,
+  ({selectedFeatureId}) => selectedFeatureId
+);
+
+export const deleteFeature = createAction(
+  ActionTypes.DELETE_FEATURE,
+  featureId => featureId
+);
+
 /**
  * This declaration is needed to group actions in docs
  */

src/actions/vis-state-actions.js

@@ -485,7 +485,7 @@ export function loadFiles(files) {
  * Trigger loading file error
  * @memberof visStateActions
  * @param {*} error
- * @returns {{type: ActionTypes.LOAD_FILES_ERR, error: *}}
+ * @returns {{type: ActionTypes.LOAD_FILES_ERR, error: Object}}
  * @public
  */
 export function loadFilesErr(error) {
@@ -495,6 +495,19 @@ export function loadFilesErr(error) {
   };
 }
 
+/**
+ * Store features to state
+ * @memberof visStateActions
+ * @param {Array<Object>} features
+ * @returns {{type: ActionTypes.SET_FEATURES, features: Object}}
+ */
+export function setFeatures(features) {
+  return {
+    type: ActionTypes.SET_FEATURES,
+    features
+  }
+}
+
 /**
  * This declaration is needed to group actions in docs
  */

src/components/common/action-panel.js

@@ -0,0 +1,162 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import {
+  ArrowRight
+} from 'components/common/icons';
+import Checkbox from 'components/common/switch';
+
+const StyledItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 8px;
+  height: ${props => props.theme.actionPanelHeight}px;
+  text-transform: capitalize;
+  background-color: ${props => props.theme.dropdownListBgd};
+  width: ${props => props.theme.actionPanelWidth}px;
+  position: relative;
+  ${props => props.color ? `border-left: 3px solid rgb(${props.color});` : ''}
+  
+  :hover {
+    cursor: pointer;
+    color: ${props => props.theme.textColorHl};
+    .nested-group {
+      display: block;
+    }
+  }
+  
+  .label {
+    margin-left: 8px;
+  }
+  
+  .label-icon {
+    margin-left: auto;
+  }
+  
+  .nested-group {
+    width: 110px;
+    display: none;
+    color: ${props => props.theme.textColor};
+    position: absolute;
+    left: 110px;
+    top: 0px;
+    padding-left: 4px;
+  }
+`;
+
+const StyledCheckedbox = styled(Checkbox)`
+  label {
+    margin-bottom: 0;
+    color: ${props => props.theme.textColor};
+    padding-left: 20px;
+    line-height: 12px;
+    &:before {
+      width:  12px;
+      height: 12px;
+      background-color: ${props => props.theme.dropdownListBgd};
+    }
+    &:hover {
+      color: ${props => props.theme.textColorHl};
+    }
+  }
+`;
+
+const renderChildren = (child, index) => React.cloneElement(child, {
+  onClick: () => {
+    if (React.isValidElement(child)) {
+      if (child.props.onClick) {
+        child.props.onClick(index);
+      }
+    }
+  },
+  className: 'action-panel-item'
+});
+
+export const ActionPanelItem = React.memo(({
+  children,
+  color,
+  className,
+  Icon,
+  label,
+  onClick,
+  isSelection,
+  style}) => (
+  <StyledItem style={style} className={className} onClick={!isSelection ? onClick : null} color={color}>
+    {Icon ? (
+      <div className="icon">
+        <Icon height="16px"/>
+      </div>
+      ) : null}
+    {isSelection ? (
+      <StyledCheckedbox
+        type="checkbox"
+        checked={false}
+        id={`switch-${label}`}
+        onChange={onClick}
+        secondary
+        label={label}
+      />
+    ) : (
+      <span className="label">{label}</span>
+    )}
+    {children && children.length ? ( <div className="label-icon">
+      <ArrowRight height="16px" />
+    </div>) : null}
+    {children && children.length ? (
+      <div className="nested-group">
+        {React.Children.map(children, renderChildren)}
+      </div>
+    ) : null}
+  </StyledItem>
+));
+
+ActionPanelItem.displayName = 'ActionPanelItem';
+
+const StyledActionPanel = styled.div`
+  display: flex;
+  flex-direction: ${props => props.direction};
+  box-shadow: ${props => props.theme.dropdownListShadow};
+  transition: ${props => props.theme.transitionSlow};
+  color: ${props => props.theme.textColor};
+
+  .action-panel-item {
+    ${props => props.direction === 'column' ?
+      `border-bottom: 1px solid ${props.theme.panelHeaderIcon}`
+      :
+      `border-right: 1px solid ${props.theme.panelHeaderIcon}`
+    }
+  }
+`;
+
+// React compound element https://medium.com/@Dane_s/react-js-compound-components-a6e54b5c9992
+const ActionPanel = ({children, className, direction = 'column', onClick}) => (
+  <StyledActionPanel className={className} direction={direction}>
+    {React.Children.map(children, renderChildren)}
+  </StyledActionPanel>
+);
+
+ActionPanel.displayName = 'ActionPanel';
+
+export default ActionPanel;

src/components/common/checkbox.js

@@ -22,6 +22,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import pick from 'lodash.pick';
+import classnames from 'classnames';
 
 function noop() {}
 
@@ -100,7 +101,7 @@ export default class Checkbox extends Component {
 
     const LabelElement = this.props.type === 'checkbox' ? StyledCheckboxInput : StyledSwitchInput;
     return (
-      <StyledCheckbox className="kg-checkbox">
+      <StyledCheckbox className={classnames('kg-checkbox', this.props.className)}>
         <HiddenInput {...inputProps} />
         <LabelElement className="kg-checkbox__label" {...labelProps}>
           {this.props.label}

src/components/common/datagrid.js

@@ -172,7 +172,7 @@ function DataGridFactory(
 
     _cellRenderer = ({columnIndex, key, rowIndex, style}) => {
       const {columns, rows} = this.props;
-      const isLast = columnIndex === columns.length - 1
+      const isLast = columnIndex === columns.length - 1;
       const type = columns[columnIndex].type;
 
       // rowIndex -1 because data rows start rendering at index 1 and we normalize back using the -1 param
@@ -227,7 +227,7 @@ function DataGridFactory(
   DataGrid.displayName = 'DataGrid';
 
   // Wrapping the component using withTheme because we need to
-  // access variables outside sytled-components context
+  // access variables outside styled-components context
   return withTheme(DataGrid);
 }
 

src/components/common/icons/base.js

@@ -51,15 +51,18 @@ export default class Base extends Component {
     width: null,
     viewBox: '0 0 64 64',
     predefinedClassName: '',
-    className: ''
+    className: '',
+    style: {
+      fill: 'currentColor'
+    }
   };
 
   render() {
     const {
       height,
       width,
       viewBox,
-      style = {},
+      style,
       children,
       predefinedClassName,
       className,
@@ -69,7 +72,6 @@ export default class Base extends Component {
     } = this.props;
     const svgHeight = height;
     const svgWidth = width || svgHeight;
-    style.fill = 'currentColor';
 
     const fillStyle =
       Array.isArray(colors) &&

src/components/common/icons/draw-polygon.js

@@ -0,0 +1,56 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from './base';
+
+export default class DrawPolygon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    predefinedClassName: PropTypes.string,
+    viewBox: PropTypes.string,
+    style: PropTypes.object
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'data-ex-icons-draw-polygon',
+    viewBox: '0 0 24 25'
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <path fillRule="evenodd" clipRule="evenodd" d="M5 6L13 2L22 9L21 23L2 17L5 6Z" stroke="currentColor" fill="transparent" strokeWidth="1.5"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M10 11C10.5523 11 11 10.5523 11 10C11 9.44772 10.5523 9 10 9C9.44772 9 9 9.44772 9 10C9 10.5523 9.44772 11 10 11Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M11.5 16C12.3284 16 13 15.3284 13 14.5C13 13.6716 12.3284 13 11.5 13C10.6716 13 10 13.6716 10 14.5C10 15.3284 10.6716 16 11.5 16Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M15.5 12C16.3284 12 17 11.3284 17 10.5C17 9.67157 16.3284 9 15.5 9C14.6716 9 14 9.67157 14 10.5C14 11.3284 14.6716 12 15.5 12Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M22 11C23.1046 11 24 10.1046 24 9C24 7.89543 23.1046 7 22 7C20.8954 7 20 7.89543 20 9C20 10.1046 20.8954 11 22 11Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M21 25C22.1046 25 23 24.1046 23 23C23 21.8954 22.1046 21 21 21C19.8954 21 19 21.8954 19 23C19 24.1046 19.8954 25 21 25Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M2 19C3.10457 19 4 18.1046 4 17C4 15.8954 3.10457 15 2 15C0.89543 15 0 15.8954 0 17C0 18.1046 0.89543 19 2 19Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M13 4C14.1046 4 15 3.10457 15 2C15 0.89543 14.1046 0 13 0C11.8954 0 11 0.89543 11 2C11 3.10457 11.8954 4 13 4Z"/>
+        <path fillRule="evenodd" clipRule="evenodd" d="M5 8C6.10457 8 7 7.10457 7 6C7 4.89543 6.10457 4 5 4C3.89543 4 3 4.89543 3 6C3 7.10457 3.89543 8 5 8Z"/>
+      </Base>
+    );
+  }
+}
+

src/components/common/icons/index.js

@@ -71,4 +71,7 @@ export {default as VertThreeDots} from './vert-three-dots';
 export {default as IconWrapper} from './base';
 export {default as CodeAlt} from './code-alt';
 export {default as Warning} from './warning';
+export {default as DrawPolygon} from './draw-polygon';
+export {default as Polygon} from './polygon';
+export {default as Rectangle} from './rectangle';