Skip to content

Commit 31243cb

Browse files
igorDykhtaigorDykhta
authored
fix(effects): fixes for effects (#3368)
* fix: fixes for effects Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> * lint Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> --------- Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
1 parent d5c99ce commit 31243cb

7 files changed

Lines changed: 492 additions & 111 deletions

File tree

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

Lines changed: 133 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,34 @@ const RegularSliderWrapper = styled.div.attrs({
139139
}
140140
`;
141141

142+
const StyledCheckboxWrapper = styled.div.attrs({
143+
className: 'effect-configurator__pp-section-checkbox'
144+
})`
145+
display: flex;
146+
align-items: center;
147+
cursor: pointer;
148+
`;
149+
150+
const StyledCheckbox = styled.input`
151+
margin-right: 6px;
152+
cursor: pointer;
153+
accent-color: ${props => props.theme.activeColor};
154+
`;
155+
156+
const StyledCheckboxLabel = styled.label`
157+
font-size: ${props => props.theme.inputFontSize};
158+
color: ${props => props.theme.effectPanelTextSecondary1};
159+
cursor: pointer;
160+
white-space: nowrap;
161+
`;
162+
163+
const StyledColorCheckboxRow = styled.div`
164+
display: flex;
165+
align-items: center;
166+
justify-content: space-between;
167+
margin-bottom: 8px;
168+
`;
169+
142170
const COMMON_SLIDER_PROPS = {
143171
showInput: true,
144172
isRanged: false,
@@ -148,11 +176,11 @@ const COMMON_SLIDER_PROPS = {
148176

149177
type EffectParameterDescriptionFlattened = {
150178
name: string;
151-
type?: 'number' | 'array' | 'color';
179+
type?: 'number' | 'array' | 'color' | 'checkbox';
152180
label?: string | false | (string | false)[];
153181
min: number;
154182
max: number;
155-
defaultValue?: number | number[];
183+
defaultValue?: number | number[] | boolean;
156184
index?: number;
157185
};
158186

@@ -325,6 +353,17 @@ export default function EffectConfiguratorFactory(
325353
};
326354
}
327355

356+
if (desc.type === 'checkbox') {
357+
return {
358+
isCheckbox: true as const,
359+
label: typeof desc.label === 'string' ? desc.label : desc.name,
360+
paramName: desc.name,
361+
checked: Boolean(parameters[desc.name]),
362+
onChange: () =>
363+
updateEffectConfig(null, id, {parameters: {[desc.name]: !parameters[desc.name]}})
364+
};
365+
}
366+
328367
const paramName = desc.name;
329368

330369
const rawUniform = uniforms[desc.name];
@@ -396,41 +435,102 @@ export default function EffectConfiguratorFactory(
396435

397436
return (
398437
<StyledEffectConfigurator key={effect.id}>
399-
{flatParameterDescriptions.map((desc, parameterIndex) => {
400-
const control = controls[parameterIndex];
401-
if (!control) {
402-
return null;
403-
}
438+
{(() => {
439+
const elements: React.ReactNode[] = [];
440+
let i = 0;
441+
while (i < flatParameterDescriptions.length) {
442+
const control = controls[i];
443+
if (!control) {
444+
i++;
445+
continue;
446+
}
447+
448+
if ('isColor' in control) {
449+
const nextControl = i + 1 < controls.length ? controls[i + 1] : null;
450+
if (nextControl && 'isCheckbox' in nextControl) {
451+
elements.push(
452+
<StyledColorCheckboxRow key={`${effect.id}-${i}`}>
453+
<CompactColorPicker
454+
label={typeof control.label === 'string' ? control.label : 'Color'}
455+
color={control.color}
456+
onSetColor={
457+
control.onSetColor ??
458+
(() => {
459+
/* noop */
460+
})
461+
}
462+
Icon={ArrowDownSmall}
463+
/>
464+
<StyledCheckboxWrapper
465+
onClick={() => (nextControl as {onChange: () => void}).onChange()}
466+
>
467+
<StyledCheckbox
468+
type="checkbox"
469+
checked={nextControl.checked}
470+
onChange={() => (nextControl as {onChange: () => void}).onChange()}
471+
onClick={e => e.stopPropagation()}
472+
/>
473+
<StyledCheckboxLabel>{nextControl.label}</StyledCheckboxLabel>
474+
</StyledCheckboxWrapper>
475+
</StyledColorCheckboxRow>
476+
);
477+
i += 2;
478+
continue;
479+
}
480+
481+
elements.push(
482+
<RegularOuterWrapper key={`${effect.id}-${i}`}>
483+
<CompactColorPicker
484+
label={typeof control.label === 'string' ? control.label : 'Color'}
485+
color={control.color}
486+
onSetColor={
487+
control.onSetColor ??
488+
(() => {
489+
/* noop */
490+
})
491+
}
492+
Icon={ArrowDownSmall}
493+
/>
494+
</RegularOuterWrapper>
495+
);
496+
i++;
497+
continue;
498+
}
404499

405-
if ('isColor' in control) {
406-
return (
407-
<RegularOuterWrapper key={`${effect.id}-${parameterIndex}`}>
408-
<CompactColorPicker
409-
label={typeof control.label === 'string' ? control.label : 'Color'}
410-
color={control.color}
411-
onSetColor={
412-
control.onSetColor ??
413-
(() => {
414-
/* noop */
415-
})
416-
}
417-
Icon={ArrowDownSmall}
418-
/>
500+
if ('isCheckbox' in control) {
501+
elements.push(
502+
<RegularOuterWrapper key={`${effect.id}-${i}`}>
503+
<StyledCheckboxWrapper
504+
onClick={() => (control as {onChange: () => void}).onChange()}
505+
>
506+
<StyledCheckbox
507+
type="checkbox"
508+
checked={control.checked}
509+
onChange={() => (control as {onChange: () => void}).onChange()}
510+
onClick={e => e.stopPropagation()}
511+
/>
512+
<StyledCheckboxLabel>{control.label}</StyledCheckboxLabel>
513+
</StyledCheckboxWrapper>
514+
</RegularOuterWrapper>
515+
);
516+
i++;
517+
continue;
518+
}
519+
520+
elements.push(
521+
<RegularOuterWrapper key={`${effect.id}-${i}`}>
522+
{control.label ? (
523+
<RegularSectionTitleWrapper>{control.label}</RegularSectionTitleWrapper>
524+
) : null}
525+
<RegularSliderWrapper>
526+
<RangeSlider key={i} {...COMMON_SLIDER_PROPS} {...control} />
527+
</RegularSliderWrapper>
419528
</RegularOuterWrapper>
420529
);
530+
i++;
421531
}
422-
423-
return (
424-
<RegularOuterWrapper key={`${effect.id}-${parameterIndex}`}>
425-
{control.label ? (
426-
<RegularSectionTitleWrapper>{control.label}</RegularSectionTitleWrapper>
427-
) : null}
428-
<RegularSliderWrapper>
429-
<RangeSlider key={parameterIndex} {...COMMON_SLIDER_PROPS} {...control} />
430-
</RegularSliderWrapper>
431-
</RegularOuterWrapper>
432-
);
433-
})}
532+
return elements;
533+
})()}
434534
</StyledEffectConfigurator>
435535
);
436536
};

‎src/constants/src/default-settings.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1621,9 +1621,24 @@ export const POSTPROCESSING_EFFECTS: {[key: string]: EffectDescription} = {
16211621
name: 'Surface Fog',
16221622
parameters: [
16231623
{name: 'density', defaultValue: 0.6, min: 0, max: 1},
1624-
{name: 'height', label: 'Elevation (m)', defaultValue: 100, min: -200, max: 3000},
1625-
{name: 'thickness', label: 'Transition (m)', defaultValue: 200, min: 0, max: 1000},
1626-
{name: 'fogColor', type: 'color', min: 0, max: 255, defaultValue: [230, 235, 242]}
1624+
{name: 'height', label: 'Elevation (m)', defaultValue: 50, min: -200, max: 3000},
1625+
{name: 'thickness', label: 'Transition (m)', defaultValue: 50, min: 0, max: 1000},
1626+
{
1627+
name: 'fogColor',
1628+
type: 'color',
1629+
label: 'Fog Color',
1630+
min: 0,
1631+
max: 255,
1632+
defaultValue: [230, 235, 242]
1633+
},
1634+
{
1635+
name: 'pattern',
1636+
type: 'checkbox',
1637+
label: 'Show Pattern',
1638+
defaultValue: false,
1639+
min: 0,
1640+
max: 1
1641+
}
16271642
]
16281643
}
16291644
};

0 commit comments

Comments
 (0)