[feat] Effects: shadow color picker; use animation & current time (#2387

)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

src/components/src/effects/effect-configurator.tsx

@@ -94,17 +94,17 @@ export default function EffectConfiguratorFactory(
         [effect, updateEffectConfig]
       );
 
-      const onUseCurrentTimeChange = useCallback(
+      const onTimeModeChange = useCallback(
         value => {
           updateEffectConfig(null, effect.id, {
-            params: {useCurrentTime: value}
+            params: {timeMode: value}
           });
         },
         [effect, updateEffectConfig]
       );
 
       const colorPickerProps = useMemo(() => {
-        const propNames = ['ambientLightColor', 'sunLightColor'];
+        const propNames = ['ambientLightColor', 'sunLightColor', 'shadowColor'];
         return propNames.map(propName => {
           return {
             colorSets: [
@@ -125,14 +125,20 @@ export default function EffectConfiguratorFactory(
           <EffectTimeConfigurator
             timestamp={config.params.timestamp}
             onDateTimeChange={onDateTimeChange}
-            useCurrentTime={config.params.useCurrentTime}
-            onUseCurrentTimeChange={onUseCurrentTimeChange}
+            timeMode={config.params.timeMode}
+            onTimeModeChange={onTimeModeChange}
             intl={intl}
           />
           <PanelLabelWrapper>
             <PanelLabel>{'Shadow intensity'}</PanelLabel>
           </PanelLabelWrapper>
           <RangeSlider {...COMMON_SLIDER_PROPS} {...sliderProps[0]} />
+          <PanelLabelWrapper>
+            <PanelLabel>{'Shadow color'}</PanelLabel>
+          </PanelLabelWrapper>
+          <StyledColorSelectorWrapper>
+            <ColorSelector {...colorPickerProps[2]} />
+          </StyledColorSelectorWrapper>
           <PanelLabelWrapper>
             <PanelLabel>{'Ambient light intensity'}</PanelLabel>
           </PanelLabelWrapper>
@@ -165,7 +171,7 @@ export default function EffectConfiguratorFactory(
       const slidersForProps = useMemo(() => {
         return propNames.map(propName => {
           const uniform = uniforms[propName];
-          if (!uniform || uniform.private) {
+          if ((!uniform && uniform !== 0) || uniform.private) {
             return null;
           }
 
@@ -201,7 +207,7 @@ export default function EffectConfiguratorFactory(
               }
             });
           }
-          // the uniform plain number without any desc
+          // the uniform is a plain number without any description
           else if (isNumber(uniform)) {
             sliders.push({
               value1: prevValue || 0,

src/components/src/effects/effect-time-configurator.tsx

@@ -4,6 +4,10 @@ import styled from 'styled-components';
 
 import {FormattedMessage} from '@kepler.gl/localization';
 import {clamp} from '@kepler.gl/utils';
+import {
+  LIGHT_AND_SHADOW_EFFECT_TIME_MODES,
+  LightAndShadowEffectTimeMode
+} from '@kepler.gl/constants';
 
 import {StyledTimePicker, StyledDatePicker, Tooltip} from '../common/styled-components';
 import RangeSliderFactory from '../common/range-slider';
@@ -16,8 +20,8 @@ const DAY_SLIDER_RANGE = 1000 * 60 * 60 * 24;
 export type EffectTimeConfiguratorProps = {
   timestamp: string;
   onDateTimeChange: (time: number) => void;
-  useCurrentTime: boolean;
-  onUseCurrentTimeChange: (value: boolean) => void;
+  timeMode: LightAndShadowEffectTimeMode;
+  onTimeModeChange: (newMode: LightAndShadowEffectTimeMode) => void;
   intl: IntlShape;
 };
 
@@ -83,9 +87,9 @@ export default function EffectTimeConfiguratorFactory(
 ): React.FC<EffectTimeConfiguratorProps> {
   const EffectTimeConfigurator = ({
     timestamp,
-    useCurrentTime,
     onDateTimeChange,
-    onUseCurrentTimeChange,
+    timeMode,
+    onTimeModeChange,
     intl
   }: EffectTimeConfiguratorProps) => {
     const [selectedDate, selectedTimeString] = useMemo(() => {
@@ -139,22 +143,24 @@ export default function EffectTimeConfiguratorFactory(
       onDateTimeChange(new Date().valueOf());
     }, [onDateTimeChange]);
 
+    const disableDateTimePick = timeMode !== LIGHT_AND_SHADOW_EFFECT_TIME_MODES.pick;
+
     return (
       <StyledEffectTimeConfigurator>
         <StyledWrapper>
           <StyledRadio
             type="radio"
-            checked={!useCurrentTime}
-            id={`effect-time-toggle-use-pick`}
+            checked={timeMode === LIGHT_AND_SHADOW_EFFECT_TIME_MODES.pick}
+            id={`effect-time-toggle-use-pick-time`}
             label={intl.formatMessage({
               id: 'effectManager.pickDateTime'
             })}
             onChange={() => {
-              onUseCurrentTimeChange(false);
+              onTimeModeChange(LIGHT_AND_SHADOW_EFFECT_TIME_MODES.pick);
             }}
           />
         </StyledWrapper>
-        <StyledWrapper disabled={useCurrentTime}>
+        <StyledWrapper disabled={disableDateTimePick}>
           <StyledButton onClick={setCurrentDateTime} data-for="pick-time-button" data-tip>
             <Pin height="15px" />
             <Tooltip id="pick-time-button" effect="solid" place="top" delayShow={500}>
@@ -173,20 +179,32 @@ export default function EffectTimeConfiguratorFactory(
           </StyledLabelWrapper>
         </StyledWrapper>
 
-        <SliderWrapper disabled={useCurrentTime}>
+        <SliderWrapper disabled={disableDateTimePick}>
           <RangeSlider {...timeSliderProps} />
         </SliderWrapper>
 
         <StyledWrapper>
           <StyledRadio
             type="radio"
-            checked={useCurrentTime}
-            id={`effect-time-toggle-use-current`}
+            checked={timeMode === LIGHT_AND_SHADOW_EFFECT_TIME_MODES.current}
+            id={`effect-time-toggle-use-current-time`}
             label={intl.formatMessage({
               id: 'effectManager.currentTime'
             })}
             onChange={() => {
-              onUseCurrentTimeChange(true);
+              onTimeModeChange(LIGHT_AND_SHADOW_EFFECT_TIME_MODES.current);
+            }}
+          />
+        </StyledWrapper>
+
+        <StyledWrapper>
+          <StyledRadio
+            type="radio"
+            checked={timeMode === LIGHT_AND_SHADOW_EFFECT_TIME_MODES.animation}
+            id={`effect-time-toggle-use-animation-time`}
+            label={'Animation time'}
+            onChange={() => {
+              onTimeModeChange(LIGHT_AND_SHADOW_EFFECT_TIME_MODES.animation);
             }}
           />
         </StyledWrapper>

src/components/src/index.ts

@@ -261,6 +261,10 @@ export {
 export {default as FilterPanelHeaderFactory} from './side-panel/filter-panel/filter-panel-header';
 
 export {default as EffectManagerFactory} from './effects/effect-manager';
+export {default as EffectListFactory} from './effects/effect-list';
+export {default as SidePanelTitleFactory} from './effects/side-panel-title';
+export {default as EffectTypeSelectorFactory} from './effects/effect-type-selector';
+export {default as EffectConfiguratorFactory} from './effects/effect-configurator';
 
 export {default as HowToButton} from './side-panel/layer-panel/how-to-button';
 // eslint-disable-next-line prettier/prettier

src/components/src/kepler-gl.tsx

@@ -63,6 +63,7 @@ import ModalContainerFactory from './modal-container';
 import PlotContainerFactory from './plot-container';
 import NotificationPanelFactory from './notification-panel';
 import GeoCoderPanelFactory from './geocoder-panel';
+import EffectManagerFactory from './effects/effect-manager';
 import DndContextFactory from './dnd-context';
 
 import {
@@ -348,7 +349,8 @@ KeplerGlFactory.deps = [
   SidePanelFactory,
   PlotContainerFactory,
   NotificationPanelFactory,
-  DndContextFactory
+  DndContextFactory,
+  EffectManagerFactory
 ];
 
 function KeplerGlFactory(

src/constants/src/default-settings.ts

@@ -1150,16 +1150,31 @@ export const dataTestIds: Record<string, string> = {
 
 // Effects
 
-export const DEFAULT_EFFECT_TYPE = 'ink';
+export const DEFAULT_POST_PROCESSING_EFFECT_TYPE: string = 'ink';
 
 export const DEFAULT_LIGHT_COLOR: [number, number, number] = [255, 255, 255];
 export const DEFAULT_LIGHT_INTENSITY = 1;
 export const DEFAULT_SHADOW_INTENSITY = 0.5;
 export const DEFAULT_SHADOW_COLOR: [number, number, number] = [0, 0, 0];
 export const LIGHT_AND_SHADOW_EFFECT = {type: 'lightAndShadow', name: 'Light & Shadow'};
-export const DEFAULT_LIGHT_AND_SHADOW_PROPS = {
+export const LIGHT_AND_SHADOW_EFFECT_TIME_MODES = {
+  pick: 'pick' as 'pick',
+  current: 'current' as 'current',
+  animation: 'animation' as 'animation'
+};
+export type LightAndShadowEffectTimeMode = 'pick' | 'current' | 'animation';
+export const DEFAULT_LIGHT_AND_SHADOW_PROPS: {
+  timestamp: number;
+  timeMode: LightAndShadowEffectTimeMode;
+  shadowIntensity: number;
+  shadowColor: [number, number, number];
+  sunLightColor: [number, number, number];
+  sunLightIntensity: number;
+  ambientLightColor: [number, number, number];
+  ambientLightIntensity: number;
+} = {
   timestamp: Date.now(),
-  useCurrentTime: false,
+  timeMode: LIGHT_AND_SHADOW_EFFECT_TIME_MODES.pick as LightAndShadowEffectTimeMode,
   shadowIntensity: DEFAULT_SHADOW_INTENSITY,
   shadowColor: [...DEFAULT_SHADOW_COLOR] as [number, number, number],
   sunLightColor: [...DEFAULT_LIGHT_COLOR] as [number, number, number],