feat(ui): "ProcessorOptionsContainer" -> "ProcessorWrapper", organise

This commit is contained in:
psychedelicious 2023-06-03 20:42:51 +10:00
parent d0406024e3
commit f269377a01
12 changed files with 35 additions and 37 deletions

View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default;
@ -44,7 +44,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Low Threshold"
value={low_threshold}
@ -65,7 +65,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
max={255}
withInput
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredContentShuffleImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default;
@ -83,7 +83,7 @@ const ContentShuffleProcessor = (props: Props) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -134,7 +134,7 @@ const ContentShuffleProcessor = (props: Props) => {
max={4096}
withInput
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default;
@ -55,7 +55,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -81,7 +81,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
isChecked={scribble}
onChange={handleScribbleChanged}
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor.default;
@ -44,7 +44,7 @@ const LineartAnimeProcessor = (props: Props) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -65,7 +65,7 @@ const LineartAnimeProcessor = (props: Props) => {
max={4096}
withInput
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default;
@ -52,7 +52,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -78,7 +78,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
isChecked={coarse}
onChange={handleCoarseChanged}
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default;
@ -40,7 +40,7 @@ const MediapipeFaceProcessor = (props: Props) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Max Faces"
value={max_faces}
@ -62,7 +62,7 @@ const MediapipeFaceProcessor = (props: Props) => {
step={0.01}
withInput
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor.default;
@ -40,7 +40,7 @@ const MidasDepthProcessor = (props: Props) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="a_mult"
value={a_mult}
@ -63,7 +63,7 @@ const MidasDepthProcessor = (props: Props) => {
step={0.01}
withInput
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default;
@ -66,7 +66,7 @@ const MlsdImageProcessor = (props: Props) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -109,7 +109,7 @@ const MlsdImageProcessor = (props: Props) => {
step={0.01}
withInput
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default;
@ -44,7 +44,7 @@ const NormalBaeProcessor = (props: Props) => {
}, [controlNetId, processorChanged]);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -65,7 +65,7 @@ const NormalBaeProcessor = (props: Props) => {
max={4096}
withInput
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default;
@ -52,7 +52,7 @@ const OpenposeProcessor = (props: Props) => {
);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -78,7 +78,7 @@ const OpenposeProcessor = (props: Props) => {
isChecked={hand_and_face}
onChange={handleHandAndFaceChanged}
/>
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer';
import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default;
@ -59,7 +59,7 @@ const PidiProcessor = (props: Props) => {
);
return (
<ProcessorOptionsContainer>
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
value={detect_resolution}
@ -86,7 +86,7 @@ const PidiProcessor = (props: Props) => {
onChange={handleScribbleChanged}
/>
<IAISwitch label="Safe" isChecked={safe} onChange={handleSafeChanged} />
</ProcessorOptionsContainer>
</ProcessorWrapper>
);
};

View File

@ -1,11 +1,9 @@
import { Flex } from '@chakra-ui/react';
import { PropsWithChildren } from 'react';
type ProcessorOptionsContainerProps = PropsWithChildren;
type Props = PropsWithChildren;
export default function ProcessorOptionsContainer(
props: ProcessorOptionsContainerProps
) {
export default function ProcessorWrapper(props: Props) {
return (
<Flex sx={{ flexDirection: 'column', gap: 2, p: 2 }}>{props.children}</Flex>
);