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

package/src/components/common/action-panel.js

@@ -0,0 +1,177 @@
+// 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, {useCallback} from 'react';
+import styled from 'styled-components';
+import classnames from 'classnames';
+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;
+  min-height: ${props => props.theme.actionPanelHeight}px;
+  text-transform: capitalize;
+  background-color: ${props => props.theme.dropdownListBgd};
+  max-width: 200px;
+  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;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .label-icon {
+    margin-left: auto;
+  }
+
+  .nested-group {
+    max-width: 200px;
+    overflow: hidden;
+    display: none;
+    color: ${props => props.theme.textColor};
+    position: absolute;
+    left: 100%;
+    top: 0px;
+    padding-left: 4px;
+
+    label {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
+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: classnames('action-panel-item', child.props.className)
+  });
+
+/** @type {typeof import('./action-panel').ActionPanelItem} */
+export const ActionPanelItem = React.memo(
+  ({children, color, className, Icon, label, onClick, isSelection, isActive, style}) => {
+    const onClickCallback = useCallback(
+      event => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick?.();
+      },
+      [onClick]
+    );
+
+    return (
+      <StyledItem className={className} onClick={onClickCallback} color={color} style={style}>
+        {Icon ? (
+          <div className="icon">
+            <Icon height="16px" />
+          </div>
+        ) : null}
+        {isSelection ? (
+          <StyledCheckedbox
+            type="checkbox"
+            checked={Boolean(isActive)}
+            id={`switch-${label}`}
+            secondary
+            label={label}
+          />
+        ) : (
+          <span className="label">{label}</span>
+        )}
+        {children ? (
+          <div>
+            <div className="label-icon">
+              <ArrowRight height="16px" />
+            </div>
+            <div className="nested-group">{React.Children.map(children, renderChildren)}</div>
+          </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}`} &:last-of-type {
+      border-bottom: 0;
+    }
+  }
+`;
+
+// React compound element https://medium.com/@Dane_s/react-js-compound-components-a6e54b5c9992
+/** @type {typeof import('./action-panel').ActionPanel} */
+const ActionPanel = ({children, className, direction = 'column'}) => (
+  <StyledActionPanel className={className} direction={direction}>
+    {React.Children.map(children, renderChildren)}
+  </StyledActionPanel>
+);
+
+ActionPanel.displayName = 'ActionPanel';
+
+export default ActionPanel;

package/src/components/common/animation-control/animation-control.js

@@ -0,0 +1,155 @@
+// 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, {useCallback, useMemo} from 'react';
+import styled from 'styled-components';
+
+import Slider from 'components/common/slider/slider';
+import {BottomWidgetInner} from 'components/common/styled-components';
+import PlaybackControlsFactory from './playback-controls';
+import FloatingTimeDisplayFactory from './floating-time-display';
+import {snapToMarks, datetimeFormatter} from 'utils/data-utils';
+import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
+
+const SliderWrapper = styled.div`
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+  margin-right: 24px;
+  margin-left: 24px;
+`;
+
+const AnimationWidgetInner = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 32px;
+
+  .playback-controls {
+    margin-left: -8px;
+    margin-right: 16px;
+  }
+`;
+
+const StyledDomain = styled.div.attrs({
+  className: 'animation-control__time-domain'
+})`
+  color: ${props => props.theme.titleTextColor};
+  font-weight: 400;
+  font-size: 10px;
+`;
+
+AnimationControlFactory.deps = [PlaybackControlsFactory, FloatingTimeDisplayFactory];
+
+function AnimationControlFactory(PlaybackControls, FloatingTimeDisplay) {
+  const AnimationControl = ({
+    isAnimatable,
+    isAnimating,
+    resetAnimation,
+    toggleAnimation,
+    setLayerAnimationTime,
+    updateAnimationSpeed,
+    animationConfig
+  }) => {
+    const {
+      currentTime,
+      domain,
+      speed,
+      step,
+      timeSteps,
+      timeFormat,
+      timezone,
+      defaultTimeFormat
+    } = animationConfig;
+    const onSlider1Change = useCallback(
+      val => {
+        if (Array.isArray(timeSteps)) {
+          setLayerAnimationTime(snapToMarks(val, timeSteps));
+
+          // TODO: merge slider in to avoid this step
+        } else if (val >= domain[0] && val <= domain[1]) {
+          setLayerAnimationTime(val);
+        }
+      },
+      [domain, timeSteps, setLayerAnimationTime]
+    );
+
+    const dateFunc = useMemo(() => {
+      const hasUserFormat = typeof timeFormat === 'string';
+      const currentFormat = (hasUserFormat ? timeFormat : defaultTimeFormat) || DEFAULT_TIME_FORMAT;
+      return datetimeFormatter(timezone)(currentFormat);
+    }, [timeFormat, defaultTimeFormat, timezone]);
+
+    const timeStart = useMemo(() => (domain ? dateFunc(domain[0]) : ''), [domain, dateFunc]);
+    const timeEnd = useMemo(() => (domain ? dateFunc(domain[1]) : ''), [domain, dateFunc]);
+
+    return (
+      <BottomWidgetInner className="bottom-widget--inner">
+        <AnimationWidgetInner className="animation-widget--inner">
+          <PlaybackControls
+            className="animation-control-playpause"
+            startAnimation={toggleAnimation}
+            isAnimating={isAnimating}
+            pauseAnimation={toggleAnimation}
+            resetAnimation={resetAnimation}
+            speed={speed}
+            isAnimatable={isAnimatable}
+            updateAnimationSpeed={updateAnimationSpeed}
+          />
+          <StyledDomain className="domain-start">
+            <span>{timeStart}</span>
+          </StyledDomain>
+          <SliderWrapper className="animation-control__slider">
+            <Slider
+              showValues={false}
+              isRanged={false}
+              step={step}
+              minValue={domain ? domain[0] : 0}
+              maxValue={domain ? domain[1] : 1}
+              value1={currentTime}
+              onSlider1Change={onSlider1Change}
+              enableBarDrag={true}
+            />
+          </SliderWrapper>
+          <StyledDomain className="domain-end">
+            <span>{timeEnd}</span>
+          </StyledDomain>
+        </AnimationWidgetInner>
+        <FloatingTimeDisplay
+          currentTime={currentTime}
+          defaultTimeFormat={defaultTimeFormat}
+          timeFormat={timeFormat}
+          timezone={timezone}
+        />
+      </BottomWidgetInner>
+    );
+  };
+
+  AnimationControl.defaultProps = {
+    toggleAnimation: () => {},
+    updateAnimationSpeed: () => {},
+    animationControlProps: {},
+    animationConfig: {}
+  };
+
+  return AnimationControl;
+}
+
+export default AnimationControlFactory;

package/src/components/common/animation-control/animation-controller.js

@@ -0,0 +1,224 @@
+// 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 {Component} from 'react';
+import {bisectLeft} from 'd3-array';
+import {requestAnimationFrame, cancelAnimationFrame} from 'global/window';
+import Console from 'global/console';
+import {BASE_SPEED, FPS, ANIMATION_WINDOW} from 'constants/default-settings';
+
+function AnimationControllerFactory() {
+  /**
+   * 4 Animation Window Types
+   * 1. free
+   *  |->  |->
+   * Current time is a fixed range, animate a moving window that calls next animation frames continuously
+   * The increment id based on domain / BASE_SPEED * SPEED
+   *
+   * 2. incremental
+   * |    |->
+   * Same as free, current time is a growing range, only the max value of range increment during animation.
+   * The increment is also based on domain / BASE_SPEED * SPEED
+   *
+   * 3. point
+   * o -> o
+   * Current time is a point, animate a moving point calls next animation frame continuously
+   * The increment is based on domain / BASE_SPEED * SPEED
+   *
+   * 4. interval
+   * o ~> o
+   * Current time is a point. An array of sorted time steps are provided,
+   * animate a moving point jumps to the next step
+   */
+  class AnimationController extends Component {
+    // TODO: convert the entire component to use hooks in the next PR
+    static defaultProps = {
+      baseSpeed: BASE_SPEED,
+      speed: 1,
+      steps: null,
+      animationWindow: ANIMATION_WINDOW.free
+    };
+
+    state = {
+      isAnimating: false
+    };
+
+    componentDidMount() {
+      this._startOrPauseAnimation();
+    }
+
+    componentDidUpdate() {
+      this._startOrPauseAnimation();
+    }
+
+    componentWillUnmount() {
+      if (this._timer) {
+        cancelAnimationFrame(this._timer);
+      }
+    }
+
+    _timer = null;
+
+    _startOrPauseAnimation() {
+      const {isAnimating, speed} = this.props;
+      if (!this._timer && isAnimating && speed > 0) {
+        this._startAnimation();
+      } else if (this._timer && !isAnimating) {
+        this._pauseAnimation();
+      }
+    }
+
+    _animate = delay => {
+      this._startTime = new Date().getTime();
+
+      const loop = () => {
+        const current = new Date().getTime();
+        // @ts-ignore
+        const delta = current - this._startTime;
+
+        if (delta >= delay) {
+          this._nextFrame();
+          this._startTime = new Date().getTime();
+        } else {
+          this._timer = requestAnimationFrame(loop);
+        }
+      };
+
+      this._timer = requestAnimationFrame(loop);
+    };
+
+    _resetAnimationByDomain = () => {
+      const {domain, value, animationWindow} = this.props;
+      if (Array.isArray(value)) {
+        if (animationWindow === ANIMATION_WINDOW.incremental) {
+          this.props.updateAnimation([value[0], value[0] + 1]);
+        } else {
+          this.props.updateAnimation([domain[0], domain[0] + value[1] - value[0]]);
+        }
+      } else {
+        this.props.updateAnimation(domain[0]);
+      }
+    };
+
+    _resetAnimtionByTimeStep = () => {
+      // go to the first steps
+      this.props.updateAnimation([this.props.steps[0], 0]);
+    };
+
+    _resetAnimation = () => {
+      if (this.props.animationWindow === ANIMATION_WINDOW.interval) {
+        this._resetAnimtionByTimeStep();
+      } else {
+        this._resetAnimationByDomain();
+      }
+    };
+
+    _startAnimation = () => {
+      const {speed} = this.props;
+      this._clearTimer();
+      if (speed > 0) {
+        if (this.props.animationWindow === ANIMATION_WINDOW.interval) {
+          // animate by interval
+          // 30*600
+          const {steps} = this.props;
+          if (!Array.isArray(steps) || !steps.length) {
+            Console.warn('animation steps should be an array');
+            return;
+          }
+          // when speed = 1, animation should loop through 600 frames at 60 FPS
+          // calculate delay based on # steps
+          const delay = (BASE_SPEED * (1000 / FPS)) / steps.length / (speed || 1);
+          this._animate(delay);
+        } else {
+          this._timer = requestAnimationFrame(this._nextFrame);
+        }
+      }
+      this.setState({isAnimating: true});
+    };
+
+    _clearTimer = () => {
+      if (this._timer) {
+        cancelAnimationFrame(this._timer);
+        this._timer = null;
+      }
+    };
+
+    _pauseAnimation = () => {
+      this._clearTimer();
+      this.setState({isAnimating: false});
+    };
+
+    _nextFrame = () => {
+      this._timer = null;
+      const nextValue =
+        this.props.animationWindow === ANIMATION_WINDOW.interval
+          ? this._nextFrameByTimeStep()
+          : this._nextFrameByDomain();
+
+      this.props.updateAnimation(nextValue);
+    };
+
+    _nextFrameByDomain() {
+      const {domain, value, speed, baseSpeed, animationWindow} = this.props;
+      const delta = ((domain[1] - domain[0]) / baseSpeed) * speed;
+
+      // loop when reaches the end
+      // current time is a range
+      if (Array.isArray(value)) {
+        let value0;
+        let value1;
+        const readEnd = value[1] + delta > domain[1];
+        if (animationWindow === ANIMATION_WINDOW.incremental) {
+          value0 = value[0];
+          value1 = readEnd ? value[0] + 1 : value[1] + delta;
+        } else {
+          value0 = readEnd ? domain[0] : value[0] + delta;
+          value1 = value0 + value[1] - value[0];
+        }
+        return [value0, value1];
+      }
+
+      // current time is a point
+      return value + delta > domain[1] ? domain[0] : value + delta;
+    }
+
+    _nextFrameByTimeStep() {
+      const {steps, value} = this.props;
+      const val = Array.isArray(value) ? value[0] : value;
+      const index = bisectLeft(steps, val);
+      const nextIdx = index >= steps.length - 1 ? 0 : index + 1;
+
+      return [steps[nextIdx], nextIdx];
+    }
+
+    render() {
+      const {isAnimating} = this.state;
+      const {children} = this.props;
+
+      return typeof children === 'function'
+        ? children(isAnimating, this._startAnimation, this._pauseAnimation, this._resetAnimation)
+        : null;
+    }
+  }
+
+  return AnimationController;
+}
+
+export default AnimationControllerFactory;

package/src/components/common/animation-control/animation-speed-slider.js

@@ -0,0 +1,79 @@
+// 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 styled from 'styled-components';
+import RangeSliderFactory from 'components/common/range-slider';
+import onClickOutside from 'react-onclickoutside';
+import {SPEED_CONTROL_RANGE, SPEED_CONTROL_STEP} from 'constants/default-settings';
+
+const SliderWrapper = styled.div`
+  position: relative;
+`;
+
+const SpeedSliderContainer = styled.div`
+  position: absolute;
+  bottom: 50px;
+  right: calc(0% - 32px);
+  width: 180px;
+  padding: 2px 8px 2px 12px;
+  background-color: ${props => props.theme.bottomWidgetBgd};
+  box-shadow: -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+
+  .kg-range-slider__input {
+    width: 48px;
+    padding: 6px;
+  }
+`;
+
+AnimationSpeedSliderFactory.deps = [RangeSliderFactory];
+
+export default function AnimationSpeedSliderFactory(RangeSlider) {
+  class AnimationSpeedSlider extends Component {
+    handleClickOutside = e => {
+      this.props.onHide();
+    };
+
+    _onChange = v => this.props.updateAnimationSpeed(v[1]);
+
+    render() {
+      return (
+        <SpeedSliderContainer className="animation-control__speed-slider">
+          <SliderWrapper>
+            <RangeSlider
+              range={SPEED_CONTROL_RANGE}
+              step={SPEED_CONTROL_STEP}
+              value0={0}
+              value1={this.props.speed}
+              onChange={this._onChange}
+              isRanged={false}
+              showTooltip
+              showInput
+              inputTheme="secondary"
+              inputSize="tiny"
+            />
+          </SliderWrapper>
+        </SpeedSliderContainer>
+      );
+    }
+  }
+
+  return onClickOutside(AnimationSpeedSlider);
+}