Skip to content

Commit

Permalink
[chore] Effects - config refactoring (#2422)
Browse files Browse the repository at this point in the history
  • Loading branch information
@igorDykhta
igorDykhta committed Nov 4, 2023
1 parent bfec82e commit a69b087
Show file tree
Hide file tree
Showing 29 changed files with 363 additions and 289 deletions.
11 changes: 5 additions & 6 deletions src/actions/src/vis-state-actions.ts
View file
Expand Up @@ -37,8 +37,7 @@ import {
Filter,
ParsedConfig,
ParsedLayer,
EffectConfig,
EffectParamsPartial
EffectPropsPartial
} from '@kepler.gl/types';
// TODO - import LoaderObject type from @loaders.gl/core when supported
// TODO - import LoadOptions type from @loaders.gl/core when supported
Expand Down Expand Up @@ -524,7 +523,7 @@ export function duplicateLayer(
}

export type AddEffectUpdaterAction = {
config: EffectParamsPartial;
config: EffectPropsPartial;
};

/**
Expand All @@ -535,7 +534,7 @@ export type AddEffectUpdaterAction = {
* @public
*/
export function addEffect(
config: EffectParamsPartial
config: EffectPropsPartial
): Merge<AddEffectUpdaterAction, {type: typeof ActionTypes.ADD_EFFECT}> {
return {
type: ActionTypes.ADD_EFFECT,
Expand Down Expand Up @@ -585,7 +584,7 @@ export function removeEffect(

export type UpdateEffectUpdaterAction = {
id: string;
props: Partial<EffectConfig>;
props: EffectPropsPartial;
};

/**
Expand All @@ -597,7 +596,7 @@ export type UpdateEffectUpdaterAction = {
*/
export function updateEffect(
id: string,
props: Partial<EffectConfig>
props: EffectPropsPartial
): Merge<UpdateEffectUpdaterAction, {type: typeof ActionTypes.UPDATE_EFFECT}> {
return {
type: ActionTypes.UPDATE_EFFECT,
Expand Down
70 changes: 33 additions & 37 deletions src/components/src/effects/effect-configurator.tsx
View file
Expand Up @@ -4,7 +4,7 @@ import {injectIntl, IntlShape} from 'react-intl';

import {LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';
import {isNumber} from '@kepler.gl/utils';
import {Effect, EffectConfig} from '@kepler.gl/types';
import {Effect, EffectUpdateProps} from '@kepler.gl/types';

import {PanelLabel} from '../common/styled-components';
import RangeSliderFactory from '../common/range-slider';
Expand All @@ -16,7 +16,7 @@ export type EffectConfiguratorProps = {
updateEffectConfig: (
e: Event | null | undefined,
id: string,
config: Partial<EffectConfig>
config: Partial<EffectUpdateProps>
) => void;
};

Expand Down Expand Up @@ -67,40 +67,39 @@ export default function EffectConfiguratorFactory(
): React.FC<EffectConfiguratorProps> {
const EffectConfigurator = ({
effect,
updateEffectConfig,
intl
updateEffectConfig
}: EffectConfiguratorProps & {intl: IntlShape}) => {
const renderShadowEffectConfigurator = useCallback(() => {
const {config} = effect;
const {parameters} = effect;

const sliderProps = useMemo(() => {
const propNames = ['shadowIntensity', 'ambientLightIntensity', 'sunLightIntensity'];
return propNames.map(propName => {
return {
value1: effect.config.params[propName],
value1: parameters[propName],
range: [0, 1],
value0: 0,
onChange: (value: number[], e?: Event) => {
updateEffectConfig(e, effect.id, {params: {[propName]: value[1]}});
onChange: (value: number[], event?: Event) => {
updateEffectConfig(event, effect.id, {parameters: {[propName]: value[1]}});
}
};
});
}, [effect, config.params, updateEffectConfig]);
}, [effect.id, parameters, updateEffectConfig]);

const onDateTimeChange = useCallback(
value => {
updateEffectConfig(null, effect.id, {params: {timestamp: value}});
updateEffectConfig(null, effect.id, {parameters: {timestamp: value}});
},
[effect, updateEffectConfig]
[effect.id, updateEffectConfig]
);

const onTimeModeChange = useCallback(
value => {
updateEffectConfig(null, effect.id, {
params: {timeMode: value}
parameters: {timeMode: value}
});
},
[effect, updateEffectConfig]
[effect.id, updateEffectConfig]
);

const colorPickerProps = useMemo(() => {
Expand All @@ -109,25 +108,24 @@ export default function EffectConfiguratorFactory(
return {
colorSets: [
{
selectedColor: config.params[propName],
setColor: v => updateEffectConfig(null, effect.id, {params: {[propName]: v}})
selectedColor: parameters[propName],
setColor: v => updateEffectConfig(null, effect.id, {parameters: {[propName]: v}})
}
]
};
});
}, [effect, config.params, updateEffectConfig]);
}, [effect.id, parameters, updateEffectConfig]);

return (
<StyledEffectConfigurator key={effect.id}>
<PanelLabelWrapper>
<PanelLabel>{'Date & Time'}</PanelLabel>
</PanelLabelWrapper>
<EffectTimeConfigurator
timestamp={config.params.timestamp}
timestamp={parameters.timestamp}
onDateTimeChange={onDateTimeChange}
timeMode={config.params.timeMode}
timeMode={parameters.timeMode}
onTimeModeChange={onTimeModeChange}
intl={intl}
/>
<PanelLabelWrapper>
<PanelLabel>{'Shadow intensity'}</PanelLabel>
Expand Down Expand Up @@ -161,12 +159,11 @@ export default function EffectConfiguratorFactory(
</StyledColorSelectorWrapper>
</StyledEffectConfigurator>
);
}, [effect, updateEffectConfig]);
}, [effect, effect.parameters, updateEffectConfig]);

const renderPostProcessingEffectConfigurator = useCallback(() => {
const {config} = effect;
const uniforms = effect.deckEffect?.module.uniforms || {};
const propNames = Object.keys(uniforms);
const propNames = useMemo(() => Object.keys(uniforms), [uniforms]);

const slidersForProps = useMemo(() => {
return propNames.map(propName => {
Expand All @@ -181,17 +178,17 @@ export default function EffectConfiguratorFactory(
range: [number, number];
onChange: (value: number[], e?: Event) => void;
}[] = [];
const prevValue = config.params[propName];
const prevValue = effect.parameters[propName];

// the uniform is [0, 1] array
if (uniform.length === 2) {
sliders.push({
value1: prevValue[0] || 0,
range: [0, 1],
value0: 0,
onChange: (newValue, e) => {
updateEffectConfig(e, effect.id, {
params: {[propName]: [newValue[1], prevValue[1]]}
onChange: (newValue, event) => {
updateEffectConfig(event, effect.id, {
parameters: {[propName]: [newValue[1], prevValue[1]]}
});
}
});
Expand All @@ -200,9 +197,9 @@ export default function EffectConfiguratorFactory(
value1: prevValue[1] || 0,
range: [0, 1],
value0: 0,
onChange: (newValue, e) => {
updateEffectConfig(e, effect.id, {
params: {[propName]: [prevValue[0], newValue[1]]}
onChange: (newValue, event) => {
updateEffectConfig(event, effect.id, {
parameters: {[propName]: [prevValue[0], newValue[1]]}
});
}
});
Expand All @@ -213,8 +210,8 @@ export default function EffectConfiguratorFactory(
value1: prevValue || 0,
range: [0, 500],
value0: 0,
onChange: (newValue, e) => {
updateEffectConfig(e, effect.id, {params: {[propName]: newValue[1]}});
onChange: (newValue, event) => {
updateEffectConfig(event, effect.id, {parameters: {[propName]: newValue[1]}});
}
});
}
Expand All @@ -224,8 +221,8 @@ export default function EffectConfiguratorFactory(
value1: prevValue || 0,
range: [uniform.min ?? uniform.softMin ?? 0, uniform.max ?? uniform.softMax ?? 1],
value0: uniform.min ?? uniform.softMin ?? 0,
onChange: (newValue, e) => {
updateEffectConfig(e, effect.id, {params: {[propName]: newValue[1]}});
onChange: (newValue, event) => {
updateEffectConfig(event, effect.id, {parameters: {[propName]: newValue[1]}});
}
});
} else {
Expand All @@ -234,7 +231,7 @@ export default function EffectConfiguratorFactory(

return sliders;
});
}, [propNames, effect, effect.config.params, updateEffectConfig]);
}, [propNames, effect, effect.parameters, updateEffectConfig]);

return (
<StyledEffectConfigurator key={effect.id}>
Expand All @@ -257,10 +254,9 @@ export default function EffectConfiguratorFactory(
})}
</StyledEffectConfigurator>
);
}, [effect, updateEffectConfig]);
}, [effect, effect.parameters, updateEffectConfig]);

const {config} = effect;
if (config.type === LIGHT_AND_SHADOW_EFFECT.type) return renderShadowEffectConfigurator();
if (effect.type === LIGHT_AND_SHADOW_EFFECT.type) return renderShadowEffectConfigurator();
return renderPostProcessingEffectConfigurator();
};

Expand Down
8 changes: 4 additions & 4 deletions src/components/src/effects/effect-manager.tsx
View file
Expand Up @@ -3,7 +3,7 @@ import styled from 'styled-components';
import {injectIntl, IntlShape} from 'react-intl';

import {addEffect, updateEffect, removeEffect, reorderEffect} from '@kepler.gl/actions';
import {LIGHT_AND_SHADOW_EFFECT, EFFECT_DESCS} from '@kepler.gl/constants';
import {LIGHT_AND_SHADOW_EFFECT, EFFECT_DESCRIPTIONS} from '@kepler.gl/constants';
import {VisStateActions} from '@kepler.gl/actions';
import {Effect} from '@kepler.gl/types';

Expand Down Expand Up @@ -73,12 +73,12 @@ function EffectManagerFactory(
// Prevent shadow effect from being added multiple times
const effectOptions = useMemo(() => {
const hasShadow = effects.some(effect => {
return effect.config.type === LIGHT_AND_SHADOW_EFFECT.type;
return effect.type === LIGHT_AND_SHADOW_EFFECT.type;
});

return hasShadow
? EFFECT_DESCS.filter(desc => desc.type !== LIGHT_AND_SHADOW_EFFECT.type)
: EFFECT_DESCS;
? EFFECT_DESCRIPTIONS.filter(desc => desc.type !== LIGHT_AND_SHADOW_EFFECT.type)
: EFFECT_DESCRIPTIONS;
}, [effects]);

return (
Expand Down
13 changes: 10 additions & 3 deletions src/components/src/effects/effect-panel-header.tsx
View file
@@ -1,13 +1,15 @@
import React from 'react';
import React, {useMemo} from 'react';
import classnames from 'classnames';
import styled from 'styled-components';

import {EFFECT_DESCRIPTIONS} from '@kepler.gl/constants';

import PanelHeaderActionFactory from '../side-panel/panel-header-action';
import {ArrowDown, EyeSeen, EyeUnseen, Trash, VertDots, BaseProps} from '../common/icons';
import {StyledPanelHeader} from '../common/styled-components';

export type EffectPanelHeaderProps = {
label: string;
type: string;
listeners: any;
effectId: string;
isEnabled: boolean;
Expand Down Expand Up @@ -181,12 +183,17 @@ function EffectPanelHeaderFactory(
const {
isConfigActive,
isDragNDropEnabled,
label,
type,
onToggleEnableConfig,
listeners,
showSortHandle = true
} = props;

const label = useMemo(() => {
const description = EFFECT_DESCRIPTIONS.find(_description => _description.type === type);
return description?.name || 'Effect';
}, [type]);

return (
<StyledEffectPanelHeader
className={classnames('effect-panel__header', {
Expand Down
40 changes: 20 additions & 20 deletions src/components/src/effects/effect-panel.tsx
View file
Expand Up @@ -5,7 +5,7 @@ import PropTypes from 'prop-types';

import {dataTestIds, LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';
import {removeEffect, updateEffect} from '@kepler.gl/actions';
import {Effect, EffectConfig} from '@kepler.gl/types';
import {Effect} from '@kepler.gl/types';

import EffectPanelHeaderFactory from './effect-panel-header';
import EffectConfiguratorFactory from './effect-configurator';
Expand Down Expand Up @@ -52,35 +52,35 @@ function EffectPanelFactory(
isDraggable: PropTypes.bool
};

_toggleEnabled = (e?: Event) => {
e?.stopPropagation();
_toggleEnabled = (event?: Event) => {
event?.stopPropagation();
this.props.updateEffect(this.props.effect.id, {
isEnabled: !this.props.effect.config.isEnabled
isEnabled: !this.props.effect.isEnabled
});
};

_toggleConfigActive = (e?: Event) => {
e?.stopPropagation();
_toggleConfigActive = (event?: Event) => {
event?.stopPropagation();
this.props.updateEffect(this.props.effect.id, {
isConfigActive: !this.props.effect.config.isConfigActive
isConfigActive: !this.props.effect.isConfigActive
});
};

_removeEffect = (e?: Event) => {
e?.stopPropagation();
_removeEffect = (event?: Event) => {
event?.stopPropagation();
this.props.removeEffect(this.props.effect.id);
};

_updateEffectConfig = (e, id, props) => {
e?.stopPropagation();
_updateEffectConfig = (event, id, props) => {
event?.stopPropagation();
this.props.updateEffect(id, props);
};

render() {
const {effect, isDraggable, listeners} = this.props;
const {config = {} as EffectConfig} = effect;
const {id, type, isConfigActive, isEnabled} = effect;

const sortingAllowed = config.type !== LIGHT_AND_SHADOW_EFFECT.type;
const sortingAllowed = type !== LIGHT_AND_SHADOW_EFFECT.type;

return (
<PanelWrapper
Expand All @@ -92,20 +92,20 @@ function EffectPanelFactory(
onTouchStart={this.props.onTouchStart}
>
<EffectPanelHeader
isConfigActive={config.isConfigActive}
effectId={effect.id}
label={config.name}
isEnabled={config.isEnabled}
isConfigActive={isConfigActive}
effectId={id}
type={type}
isEnabled={isEnabled}
onToggleEnabled={this._toggleEnabled}
onRemoveEffect={this._removeEffect}
onToggleEnableConfig={this._toggleConfigActive}
isDragNDropEnabled={isDraggable && sortingAllowed}
listeners={listeners}
showSortHandle={effect.type !== LIGHT_AND_SHADOW_EFFECT.type}
showSortHandle={type !== LIGHT_AND_SHADOW_EFFECT.type}
/>
{config.isConfigActive && (
{isConfigActive && (
<EffectConfigurator
key={`effect-configurator-${effect.id}`}
key={`effect-configurator-${id}`}
effect={effect}
updateEffectConfig={this._updateEffectConfig}
/>
Expand Down

0 comments on commit a69b087

Please sign in to comment.