@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/side-panel/layer-panel/vis-config-switch.js

@@ -0,0 +1,87 @@
+// Copyright (c) 2022 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 PropTypes from 'prop-types';
+import styled from 'styled-components';
+import InfoHelperFacotry from 'components/common/info-helper';
+import Switch from 'components/common/switch';
+import {SidePanelSection, PanelLabel} from 'components/common/styled-components';
+import {capitalizeFirstLetter} from 'utils/utils';
+import {FormattedMessage} from 'localization';
+
+const propTypes = {
+  layer: PropTypes.object.isRequired,
+  property: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func]),
+  description: PropTypes.string,
+  disabled: PropTypes.bool
+};
+
+const StyledVisConfigSwitch = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  .vis-config-switch__title {
+    display: flex;
+  }
+`;
+
+VisConfigSwitchFactory.deps = [InfoHelperFacotry];
+function VisConfigSwitchFactory(InfoHelper) {
+  const VisConfigSwitch = ({
+    layer: {id, config},
+    property,
+    onChange,
+    label,
+    description,
+    disabled
+  }) => (
+    <SidePanelSection disabled={Boolean(disabled)}>
+      <StyledVisConfigSwitch className="vis-config-switch">
+        <div className="vis-config-switch__title">
+          {label ? (
+            <PanelLabel>
+              {(label && <FormattedMessage id={label} />) || capitalizeFirstLetter(property)}
+            </PanelLabel>
+          ) : null}
+          {description ? (
+            <div>
+              <InfoHelper description={description} id={`${id}-${property}-description`} />
+            </div>
+          ) : null}
+        </div>
+        <div className="vis-config-switch__switch">
+          <Switch
+            type="checkbox"
+            checked={config.visConfig[property]}
+            id={`${id}-${property}-switch`}
+            onChange={() => onChange({[property]: !config.visConfig[property]})}
+          />
+        </div>
+      </StyledVisConfigSwitch>
+    </SidePanelSection>
+  );
+
+  VisConfigSwitch.propTypes = propTypes;
+  return VisConfigSwitch;
+}
+export default VisConfigSwitchFactory;

package/src/components/side-panel/map-manager.js

@@ -0,0 +1,114 @@
+// Copyright (c) 2022 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 {Button, SidePanelSection} from 'components/common/styled-components';
+import MapStyleSelectorFactory from 'components/side-panel/map-style-panel/map-style-selector';
+import LayerGroupSelectorFactory from 'components/side-panel/map-style-panel/map-layer-selector';
+
+import {Add} from 'components/common/icons';
+import {createSelector} from 'reselect';
+import {injectIntl} from 'react-intl';
+import {FormattedMessage} from 'localization';
+import ColorSelectorFactory from './layer-panel/color-selector';
+
+MapManagerFactory.deps = [MapStyleSelectorFactory, LayerGroupSelectorFactory, ColorSelectorFactory];
+
+function MapManagerFactory(MapStyleSelector, LayerGroupSelector, ColorSelector) {
+  class MapManager extends Component {
+    static propTypes = {
+      mapStyle: PropTypes.object.isRequired,
+      mapStyleActions: PropTypes.object.isRequired,
+      showAddMapStyleModal: PropTypes.func.isRequired
+    };
+
+    state = {
+      isSelecting: false
+    };
+
+    buildingColorSelector = props => props.mapStyle.threeDBuildingColor;
+    setColorSelector = props => props.mapStyleActions.set3dBuildingColor;
+
+    _toggleSelecting = () => {
+      this.setState({isSelecting: !this.state.isSelecting});
+    };
+
+    _selectStyle = val => {
+      const {mapStyleActions} = this.props;
+      const {mapStyleChange} = mapStyleActions;
+      mapStyleChange(val);
+      this._toggleSelecting();
+    };
+
+    render() {
+      const {mapStyle, intl, mapStyleActions, showAddMapStyleModal} = this.props;
+      const currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};
+      const editableLayers = (currentStyle.layerGroups || []).map(lg => lg.slug);
+      const hasBuildingLayer = mapStyle.visibleLayerGroups['3d building'];
+      const colorSetSelector = createSelector(
+        this.buildingColorSelector,
+        this.setColorSelector,
+        (selectedColor, setColor) => [
+          {
+            selectedColor,
+            setColor,
+            isRange: false,
+            label: intl.formatMessage({id: 'mapManager.3dBuildingColor'})
+          }
+        ]
+      );
+
+      const colorSets = colorSetSelector(this.props);
+
+      return (
+        <div className="map-style-panel">
+          <div>
+            <MapStyleSelector
+              mapStyle={mapStyle}
+              isSelecting={this.state.isSelecting}
+              onChange={this._selectStyle}
+              toggleActive={this._toggleSelecting}
+            />
+            {editableLayers.length ? (
+              <LayerGroupSelector
+                layers={mapStyle.visibleLayerGroups}
+                editableLayers={editableLayers}
+                topLayers={mapStyle.topLayerGroups}
+                onChange={mapStyleActions.mapConfigChange}
+              />
+            ) : null}
+            <SidePanelSection>
+              <ColorSelector colorSets={colorSets} disabled={!hasBuildingLayer} />
+            </SidePanelSection>
+            <Button className="add-map-style-button" onClick={showAddMapStyleModal} secondary>
+              <Add height="12px" />
+              <FormattedMessage id={'mapManager.addMapStyle'} />
+            </Button>
+          </div>
+        </div>
+      );
+    }
+  }
+  return injectIntl(MapManager);
+}
+
+export default MapManagerFactory;

package/src/components/side-panel/map-style-panel/map-layer-selector.js

@@ -0,0 +1,128 @@
+// Copyright (c) 2022 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 PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
+import {EyeSeen, EyeUnseen, Upload} from 'components/common/icons';
+
+import {
+  PanelLabel,
+  PanelContent,
+  PanelLabelBold,
+  PanelLabelWrapper,
+  CenterFlexbox
+} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+import {camelize} from 'utils/utils';
+
+const StyledInteractionPanel = styled.div`
+  padding-bottom: 12px;
+`;
+
+const StyledLayerGroupItem = styled.div`
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .layer-group__visibility-toggle {
+    margin-right: 12px;
+  }
+`;
+
+const LayerLabel = styled(PanelLabelBold)`
+  color: ${props => (props.active ? props.theme.textColor : props.theme.labelColor)};
+`;
+
+LayerGroupSelectorFactory.deps = [PanelHeaderActionFactory];
+
+function LayerGroupSelectorFactory(PanelHeaderAction) {
+  const defaultActionIcons = {
+    visible: EyeSeen,
+    hidden: EyeUnseen
+  };
+  const LayerGroupSelector = ({
+    layers,
+    editableLayers,
+    onChange,
+    topLayers,
+    actionIcons = defaultActionIcons
+  }) => (
+    <StyledInteractionPanel className="map-style__layer-group__selector">
+      <div className="layer-group__header">
+        <PanelLabel>
+          <FormattedMessage id={'mapLayers.title'} />
+        </PanelLabel>
+      </div>
+      <PanelContent className="map-style__layer-group">
+        {editableLayers.map(slug => (
+          <StyledLayerGroupItem className="layer-group__select" key={slug}>
+            <PanelLabelWrapper>
+              <PanelHeaderAction
+                className="layer-group__visibility-toggle"
+                id={`${slug}-toggle`}
+                tooltip={layers[slug] ? 'tooltip.hide' : 'tooltip.show'}
+                onClick={() =>
+                  onChange({
+                    visibleLayerGroups: {
+                      ...layers,
+                      [slug]: !layers[slug]
+                    }
+                  })
+                }
+                IconComponent={layers[slug] ? actionIcons.visible : actionIcons.hidden}
+                active={layers[slug]}
+                flush
+              />
+              <LayerLabel active={layers[slug]}>
+                <FormattedMessage id={`mapLayers.${camelize(slug)}`} />
+              </LayerLabel>
+            </PanelLabelWrapper>
+            <CenterFlexbox className="layer-group__bring-top">
+              <PanelHeaderAction
+                id={`${slug}-top`}
+                tooltip="tooltip.moveToTop"
+                disabled={!layers[slug]}
+                IconComponent={Upload}
+                active={topLayers[slug]}
+                onClick={() =>
+                  onChange({
+                    topLayerGroups: {
+                      ...topLayers,
+                      [slug]: !topLayers[slug]
+                    }
+                  })
+                }
+              />
+            </CenterFlexbox>
+          </StyledLayerGroupItem>
+        ))}
+      </PanelContent>
+    </StyledInteractionPanel>
+  );
+
+  return LayerGroupSelector;
+}
+
+export default LayerGroupSelectorFactory;

package/src/components/side-panel/map-style-panel/map-style-selector.js

@@ -0,0 +1,111 @@
+// Copyright (c) 2022 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 classnames from 'classnames';
+import {ArrowDown} from 'components/common/icons';
+import PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
+
+import {
+  PanelHeaderContent,
+  PanelHeaderTitle,
+  PanelLabel,
+  StyledPanelHeader
+} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+
+const StyledMapDropdown = styled(StyledPanelHeader)`
+  height: 48px;
+  margin-bottom: 5px;
+  opacity: 1;
+  position: relative;
+  transition: opacity 0.05s ease-in, height 0.25s ease-out;
+
+  &.collapsed {
+    height: 0;
+    margin-bottom: 0;
+    opacity: 0;
+  }
+
+  :hover {
+    cursor: pointer;
+    background-color: ${props => props.theme.panelBackgroundHover};
+  }
+
+  .map-title-block img {
+    margin-right: 12px;
+  }
+
+  .map-preview {
+    border-radius: 3px;
+    height: 30px;
+    width: 40px;
+  }
+`;
+MapStyleSelectorFactory.deps = [PanelHeaderActionFactory];
+
+function MapStyleSelectorFactory(PanelHeaderAction) {
+  const defaultActionIcons = {
+    arrowDown: ArrowDown
+  };
+  const MapStyleSelector = ({
+    mapStyle,
+    onChange,
+    toggleActive,
+    isSelecting,
+    actionIcons = defaultActionIcons
+  }) => (
+    <div>
+      <PanelLabel>
+        <FormattedMessage id={'mapManager.mapStyle'} />
+      </PanelLabel>
+      {Object.keys(mapStyle.mapStyles).map(op => (
+        <StyledMapDropdown
+          className={classnames('map-dropdown-option', {
+            collapsed: !isSelecting && mapStyle.styleType !== op
+          })}
+          key={op}
+          onClick={isSelecting ? () => onChange(op) : toggleActive}
+        >
+          <PanelHeaderContent className="map-title-block">
+            <img className="map-preview" src={mapStyle.mapStyles[op].icon} />
+            <PanelHeaderTitle className="map-preview-name">
+              {mapStyle.mapStyles[op].label}
+            </PanelHeaderTitle>
+          </PanelHeaderContent>
+          {!isSelecting ? (
+            <PanelHeaderAction
+              className="map-dropdown-option__enable-config"
+              id="map-enable-config"
+              IconComponent={actionIcons.arrowDown}
+              tooltip={'tooltip.selectBaseMapStyle'}
+              onClick={toggleActive}
+            />
+          ) : null}
+        </StyledMapDropdown>
+      ))}
+    </div>
+  );
+
+  return MapStyleSelector;
+}
+
+export default MapStyleSelectorFactory;

package/src/components/side-panel/panel-dropdown.js

@@ -0,0 +1,53 @@
+// Copyright (c) 2022 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 {StyledPanelDropdown} from 'components/common/styled-components';
+import listensToClickOutside from 'react-onclickoutside';
+
+class ClickOutsideCloseDropdown extends Component {
+  static propTypes = {
+    onClose: PropTypes.func,
+    show: PropTypes.bool,
+    type: PropTypes.string
+  };
+
+  static defaultProps = {
+    show: true,
+    type: 'dark'
+  };
+
+  handleClickOutside = e => {
+    if (typeof this.props.onClose === 'function' && this.props.show) {
+      this.props.onClose(e);
+    }
+  };
+
+  render() {
+    return (
+      <StyledPanelDropdown type={this.props.type} className={this.props.className}>
+        {this.props.children}
+      </StyledPanelDropdown>
+    );
+  }
+}
+
+export default listensToClickOutside(ClickOutsideCloseDropdown);

package/src/components/side-panel/panel-header-action.js

@@ -0,0 +1,106 @@
+// Copyright (c) 2022 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 classnames from 'classnames';
+import styled from 'styled-components';
+import {FormattedMessage} from 'localization';
+import {Tooltip} from 'components/common/styled-components';
+
+const HeaderActionWrapper = styled.div`
+  margin-left: ${props => (props.flush ? 0 : 8)}px;
+  display: flex;
+  align-items: center;
+  color: ${props =>
+    props.active ? props.theme.panelHeaderIconActive : props.theme.panelHeaderIcon};
+
+  :hover {
+    cursor: pointer;
+    color: ${props =>
+      props.hoverColor ? props.theme[props.hoverColor] : props.theme.panelHeaderIconHover};
+  }
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.3;
+  }
+`;
+
+PanelHeaderActionFactory.deps = [];
+// Need to use react class to access props.component
+export default function PanelHeaderActionFactory() {
+  class PanelHeaderAction extends Component {
+    static propTypes = {
+      id: PropTypes.string,
+      flush: PropTypes.bool,
+      tooltip: PropTypes.string,
+      onClick: PropTypes.func,
+      active: PropTypes.bool,
+      disabled: PropTypes.bool,
+      hoverColor: PropTypes.string,
+      className: PropTypes.string,
+      tooltipType: PropTypes.string
+    };
+
+    static defaultProps = {
+      onClick: () => {},
+      hoverColor: null,
+      active: false
+    };
+
+    render() {
+      const {
+        onClick,
+        tooltip,
+        id,
+        active,
+        flush,
+        hoverColor,
+        tooltipType,
+        disabled,
+        className
+      } = this.props;
+      return (
+        <HeaderActionWrapper
+          className={classnames('panel--header__action', {disabled, [className]: className})}
+          active={active}
+          hoverColor={hoverColor}
+          flush={flush}
+        >
+          <this.props.IconComponent
+            data-tip
+            data-for={`${tooltip}_${id}`}
+            height="16px"
+            onClick={onClick}
+          />
+          {tooltip ? (
+            <Tooltip id={`${tooltip}_${id}`} effect="solid" delayShow={500} type={tooltipType}>
+              <span>
+                <FormattedMessage id={tooltip} />
+              </span>
+            </Tooltip>
+          ) : null}
+        </HeaderActionWrapper>
+      );
+    }
+  }
+  return PanelHeaderAction;
+}