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

package/src/components/side-panel/layer-panel/color-dimension-scale-selector.js

@@ -0,0 +1,33 @@
+// 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 {injectIntl} from 'react-intl';
+
+ColorDimensionScaleSelectorFactory.deps = [];
+function ColorDimensionScaleSelectorFactory() {
+  const ColorDimensionScaleSelector = () => {
+    return <div>Component replaced by cloud native</div>;
+  };
+
+  return injectIntl(ColorDimensionScaleSelector);
+}
+
+export default ColorDimensionScaleSelectorFactory;

package/src/components/side-panel/layer-panel/color-palette.js

@@ -0,0 +1,90 @@
+// 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';
+
+const propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  height: PropTypes.number,
+  className: PropTypes.string,
+  isSelected: PropTypes.bool,
+  isReversed: PropTypes.bool,
+  children: PropTypes.node,
+  rootProps: PropTypes.object
+};
+
+const defaultProps = {
+  height: 10,
+  colors: [],
+  className: '',
+  isSelected: false,
+  isReversed: false
+};
+
+const PaletteWrapper = styled.div.attrs({
+  className: 'color-range-palette__inner'
+})`
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: space-between;
+  overflow: hidden;
+`;
+
+const PaletteContainer = styled.div.attrs({
+  className: 'color-range-palette'
+})`
+  display: flex;
+  flex-grow: 1;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.isSelected ? '#FFFFFF' : 'transparent')};
+  padding: 4px;
+  border-radius: 4px;
+`;
+
+const StyledColorBlock = styled.div.attrs({
+  className: 'color-range-palette__block'
+})`
+  flex-grow: 1;
+`;
+
+const ColorPalette = ({colors, height, className, isSelected, isReversed, children, rootProps}) => (
+  <PaletteContainer
+    className={className}
+    isSelected={isSelected}
+    {...(Boolean(rootProps) && rootProps)}
+  >
+    <PaletteWrapper style={{height, transform: `scale(${isReversed ? -1 : 1}, 1)`}}>
+      {colors.map((color, index) => (
+        <StyledColorBlock key={`${color}-${index}`} style={{backgroundColor: color}} />
+      ))}
+    </PaletteWrapper>
+    {Boolean(children) && children}
+  </PaletteContainer>
+);
+
+ColorPalette.propTypes = propTypes;
+ColorPalette.defaultProps = defaultProps;
+
+export default ColorPalette;

package/src/components/side-panel/layer-panel/color-range-selector.js

@@ -0,0 +1,322 @@
+// 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 uniq from 'lodash.uniq';
+import styled from 'styled-components';
+import {createSelector} from 'reselect';
+
+import ItemSelector from 'components/common/item-selector/item-selector';
+import {PanelLabel, Button, Tooltip} from 'components/common/styled-components';
+import Switch from 'components/common/switch';
+import ColorPalette from './color-palette';
+import CustomPalette from './custom-palette';
+import {COLOR_RANGES} from 'constants/color-ranges';
+import {numberSort} from 'utils/data-utils';
+import {reverseColorRange} from 'utils/color-utils';
+import {FormattedMessage} from 'localization';
+import {SwapHorizontal} from 'components/common/icons';
+
+export const ALL_TYPES = uniq([
+  'all',
+  ...COLOR_RANGES.map(c => c.type).filter(ctype => ctype),
+  'custom'
+]);
+
+export const ALL_STEPS = uniq(COLOR_RANGES.map(d => d.colors.length)).sort(numberSort);
+
+const StyledColorConfig = styled.div`
+  padding: 12px 12px 0 12px;
+`;
+
+const StyledColorRangeSelector = styled.div.attrs({
+  className: 'color-range-selector'
+})`
+  padding-bottom: 12px;
+`;
+
+const StyledPaletteConfig = styled.div`
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .color-palette__config__label {
+    flex-grow: 1;
+  }
+  .color-palette__config__select {
+    flex-grow: 1;
+  }
+  .item-selector .item-selector__dropdown {
+    ${props => props.theme.secondaryInput};
+  }
+  .color-palette__config__button {
+    svg {
+      margin: 0;
+    }
+  }
+`;
+
+const CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE = 'custom-reversed-button';
+
+const CONFIG_SETTINGS = {
+  type: {
+    type: 'select',
+    options: ALL_TYPES
+  },
+  steps: {
+    type: 'select',
+    options: ALL_STEPS
+  },
+  reversed: {
+    type: CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE,
+    options: [true, false]
+  }
+};
+
+ColorRangeSelectFactory.deps = [ColorPaletteGroupFactory, PaletteConfigFactory];
+export default function ColorRangeSelectFactory(ColorPaletteGroup, PaletteConfig) {
+  class ColorRangeSelect extends Component {
+    static propTypes = {
+      colorPaletteUI: PropTypes.object.isRequired,
+      selectedColorRange: PropTypes.object.isRequired,
+      onSelectColorRange: PropTypes.func.isRequired,
+      setColorPaletteUI: PropTypes.func.isRequired,
+      // optional
+      colorRanges: PropTypes.arrayOf(PropTypes.any)
+    };
+
+    static defaultProps = {
+      colorRanges: COLOR_RANGES,
+      onSelectColorRange: () => {},
+      setColorPaletteUI: () => {}
+    };
+
+    colorRangesSelector = props => props.colorRanges;
+    configTypeSelector = props => props.colorPaletteUI.colorRangeConfig.type;
+    configStepSelector = props => props.colorPaletteUI.colorRangeConfig.steps;
+    filteredColorRange = createSelector(
+      this.colorRangesSelector,
+      this.configTypeSelector,
+      this.configStepSelector,
+      (colorRanges, type, steps) => {
+        return colorRanges.filter(colorRange => {
+          const isType = type === 'all' || type === colorRange.type;
+          const isStep = Number(steps) === colorRange.colors.length;
+
+          return isType && isStep;
+        });
+      }
+    );
+
+    _updateConfig = ({key, value}) => {
+      this._setColorRangeConfig({
+        [key]: value,
+        ...(key === 'type' && {custom: value === 'custom'})
+      });
+    };
+
+    _onSetCustomPalette = config => {
+      this.props.setColorPaletteUI({
+        customPalette: config
+      });
+    };
+
+    _setColorRangeConfig = newConfig => {
+      this.props.setColorPaletteUI({
+        colorRangeConfig: newConfig
+      });
+    };
+
+    _onCustomPaletteCancel = newConfig => {
+      this.props.setColorPaletteUI({
+        showSketcher: false,
+        colorRangeConfig: {custom: false}
+      });
+    };
+
+    _onToggleSketcher = val => {
+      this.props.setColorPaletteUI({
+        showSketcher: val
+      });
+    };
+
+    render() {
+      const {customPalette, showSketcher, colorRangeConfig} = this.props.colorPaletteUI;
+      const filteredColorRanges = this.filteredColorRange(this.props);
+
+      return (
+        <StyledColorRangeSelector>
+          <StyledColorConfig className="color-range-selector__config">
+            {Object.keys(colorRangeConfig)
+              .filter(
+                key =>
+                  Boolean(CONFIG_SETTINGS[key]) && (colorRangeConfig.custom ? key === 'type' : true)
+              )
+              .map(key => {
+                return (
+                  <PaletteConfig
+                    key={key}
+                    label={CONFIG_SETTINGS[key].label || key}
+                    config={CONFIG_SETTINGS[key]}
+                    value={colorRangeConfig[key]}
+                    onChange={value => this._updateConfig({key, value})}
+                  />
+                );
+              })}
+          </StyledColorConfig>
+
+          {colorRangeConfig.custom ? (
+            <CustomPalette
+              customPalette={customPalette}
+              showSketcher={showSketcher}
+              selected={this.props.selectedColorRange}
+              onApply={this.props.onSelectColorRange}
+              onToggleSketcher={this._onToggleSketcher}
+              setCustomPalette={this._onSetCustomPalette}
+              onCancel={this._onCustomPaletteCancel}
+            />
+          ) : (
+            <ColorPaletteGroup
+              colorRanges={filteredColorRanges}
+              onSelect={this.props.onSelectColorRange}
+              selected={this.props.selectedColorRange}
+              reversed={colorRangeConfig.reversed}
+              configTypeSelector={() => this.props.colorPaletteUI.colorRangeConfig.type}
+              configStepSelector={() => this.props.colorPaletteUI.colorRangeConfig.steps}
+            />
+          )}
+        </StyledColorRangeSelector>
+      );
+    }
+  }
+
+  return ColorRangeSelect;
+}
+
+export function PaletteConfigFactory() {
+  class PaletteConfig extends Component {
+    render() {
+      const {
+        label,
+        value,
+        config: {type, options},
+        onChange
+      } = this.props;
+
+      return (
+        <StyledPaletteConfig
+          className={`color-palette__config color-palette__config--${label}`}
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="color-palette__config__label">
+            {type !== CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE && (
+              <PanelLabel>
+                <FormattedMessage id={`color.${label}`} />
+              </PanelLabel>
+            )}
+          </div>
+          {type === 'select' && (
+            <div className="color-palette__config__select">
+              <ItemSelector
+                selectedItems={value}
+                options={options}
+                multiSelect={false}
+                searchable={false}
+                onChange={onChange}
+              />
+            </div>
+          )}
+          {type === 'switch' && (
+            <Switch
+              checked={value}
+              id={`${label}-toggle`}
+              onChange={() => onChange(!value)}
+              secondary
+            />
+          )}
+          {type === CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE && (
+            <Button
+              className={`color-palette__config__button ${
+                value ? 'color-palette__config__button--active' : ''
+              }`}
+              data-tip
+              data-for={`${label}-tooltip`}
+              {...(!value && {link: true})}
+              onClick={() => onChange(!value)}
+            >
+              <SwapHorizontal />
+              <Tooltip id={`${label}-tooltip`} effect="solid" place="top">
+                {label}
+              </Tooltip>
+            </Button>
+          )}
+        </StyledPaletteConfig>
+      );
+    }
+  }
+  return PaletteConfig;
+}
+
+const StyledColorRange = styled.div.attrs({
+  className: 'color-palette-outer'
+})`
+  padding: 0 8px;
+  :hover {
+    background-color: ${props => props.theme.panelBackgroundHover};
+    cursor: pointer;
+  }
+`;
+
+export function ColorPaletteGroupFactory() {
+  class ColorPaletteGroup extends Component {
+    render() {
+      const {reversed, onSelect, selected, colorRanges, title} = this.props;
+      return (
+        <div className="color-palette__group">
+          {title && title}
+          {colorRanges.map((colorRange, i) => (
+            <StyledColorRange
+              key={`${colorRange.name}-${i}`}
+              onClick={e =>
+                onSelect(reversed ? reverseColorRange(true, colorRange) : colorRange, e)
+              }
+            >
+              <ColorPalette
+                colors={colorRange.colors}
+                isReversed={reversed}
+                isSelected={colorRange.name === selected.name}
+                rootProps={{
+                  'data-tip': true,
+                  'data-for': `color-range-${i}-tooltip`
+                }}
+              >
+                <Tooltip id={`color-range-${i}-tooltip`} effect="solid" place="top">
+                  {colorRange.name}
+                </Tooltip>
+              </ColorPalette>
+            </StyledColorRange>
+          ))}
+        </div>
+      );
+    }
+  }
+  return ColorPaletteGroup;
+}

package/src/components/side-panel/layer-panel/color-selector.js

@@ -0,0 +1,193 @@
+// 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, createRef} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {rgbToHex} from 'utils/color-utils';
+import ColorPalette from 'components/side-panel/layer-panel/color-palette';
+import {StyledPanelDropdown} from 'components/common/styled-components';
+import onClickOutside from 'react-onclickoutside';
+import SingleColorPaletteFactory from 'components/side-panel/layer-panel/single-color-palette';
+import ColorRangeSelectFactory from './color-range-selector';
+
+export const ColorBlock = styled.div`
+  width: 32px;
+  height: 18px;
+  border-radius: 1px;
+  background-color: ${props => `rgb(${props.color.slice(0, 3).join(',')})`};
+`;
+
+export const ColorSelectorInput = styled.div`
+  ${props => (props.inputTheme === 'secondary' ? props.theme.secondaryInput : props.theme.input)};
+  height: ${props => props.theme.inputBoxHeight};
+
+  .color-selector__selector__label {
+    text-transform: capitalize;
+    font-size: 12px;
+    text-align: center;
+    color: ${props => props.theme.inputPlaceholderColor};
+  }
+`;
+
+export const InputBoxContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  .color-select__input-group {
+    flex-grow: 1;
+  }
+  .color-select__input-group:nth-child(2) {
+    margin-left: 12px;
+  }
+`;
+
+ColorSelectorFactory.deps = [SingleColorPaletteFactory, ColorRangeSelectFactory];
+
+function ColorSelectorFactory(SingleColorPalette, ColorRangeSelector) {
+  class ColorSelector extends Component {
+    static propTypes = {
+      colorSets: PropTypes.arrayOf(
+        PropTypes.shape({
+          selectedColor: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
+          setColor: PropTypes.func.isRequired,
+          isRange: PropTypes.bool,
+          label: PropTypes.string
+        })
+      ),
+      colorUI: PropTypes.shape({
+        customPalette: PropTypes.object,
+        showSketcher: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+        showDropdown: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+        colorRangeConfig: PropTypes.object
+      }),
+      inputTheme: PropTypes.string,
+      disabled: PropTypes.bool,
+      setColorUI: PropTypes.func
+    };
+
+    static defaultProps = {
+      colorSets: []
+    };
+
+    state = {
+      showDropdown: false
+    };
+
+    node = createRef();
+
+    handleClickOutside = e => {
+      if (this.props.colorUI && Number.isInteger(this.props.colorUI.showSketcher)) {
+        // if sketcher is open, let sketch to close itself first
+        return;
+      }
+      this._closePanelDropdown();
+    };
+
+    _getEditing = () => {
+      return this.props.colorUI ? this.props.colorUI.showDropdown : this.state.showDropdown;
+    };
+
+    _closePanelDropdown = () => {
+      if (this._getEditing() === false) {
+        return;
+      }
+      if (this.props.setColorUI) {
+        this.props.setColorUI({showDropdown: false, showSketcher: false});
+      } else {
+        this.setState({showDropdown: false});
+      }
+    };
+
+    _onSelectColor = (color, e) => {
+      e?.stopPropagation();
+      const editing = this._getEditing();
+      if (this.props.colorSets[editing]) {
+        this.props.colorSets[editing].setColor(color);
+      }
+    };
+
+    _showDropdown = (e, i) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (this.props.setColorUI) {
+        this.props.setColorUI({showDropdown: i});
+      } else {
+        this.setState({showDropdown: i});
+      }
+    };
+
+    render() {
+      const {colorSets, disabled, inputTheme, colorUI} = this.props;
+
+      const editing = this._getEditing();
+      const currentEditing = colorSets[editing] && typeof colorSets[editing] === 'object';
+      return (
+        <div className="color-selector" ref={this.node}>
+          <InputBoxContainer>
+            {colorSets.map((cSet, i) => (
+              <div className="color-select__input-group" key={i}>
+                <ColorSelectorInput
+                  className="color-selector__selector"
+                  active={editing === i}
+                  disabled={disabled}
+                  inputTheme={inputTheme}
+                  onMouseDown={e => this._showDropdown(e, i)}
+                >
+                  {cSet.isRange ? (
+                    <ColorPalette colors={cSet.selectedColor.colors} />
+                  ) : (
+                    <ColorBlock
+                      className="color-selector__selector__block"
+                      color={cSet.selectedColor}
+                    />
+                  )}
+                  {cSet.label ? (
+                    <div className="color-selector__selector__label">{cSet.label}</div>
+                  ) : null}
+                </ColorSelectorInput>
+              </div>
+            ))}
+          </InputBoxContainer>
+          {currentEditing ? (
+            <StyledPanelDropdown className="color-selector__dropdown">
+              {colorSets[editing].isRange ? (
+                <ColorRangeSelector
+                  selectedColorRange={colorSets[editing].selectedColor}
+                  onSelectColorRange={this._onSelectColor}
+                  setColorPaletteUI={this.props.setColorUI}
+                  colorPaletteUI={colorUI}
+                />
+              ) : (
+                <SingleColorPalette
+                  selectedColor={rgbToHex(colorSets[editing].selectedColor)}
+                  onSelectColor={this._onSelectColor}
+                />
+              )}
+            </StyledPanelDropdown>
+          ) : null}
+        </div>
+      );
+    }
+  }
+  return onClickOutside(ColorSelector);
+}
+
+export default ColorSelectorFactory;