feat(ui): tweak layouts, use react conventions, disabled state

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerAdjustmentsPanel.tsx

@@ -1,4 +1,5 @@
 import { Button, ButtonGroup, Flex, IconButton, Switch, Text } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { RasterLayerCurvesAdjustmentsEditor } from 'features/controlLayers/components/RasterLayer/RasterLayerCurvesAdjustmentsEditor';
 import { RasterLayerSimpleAdjustmentsEditor } from 'features/controlLayers/components/RasterLayer/RasterLayerSimpleAdjustmentsEditor';
@@ -10,36 +11,40 @@ import {
   rasterLayerAdjustmentsSet,
   rasterLayerAdjustmentsSimpleUpdated,
 } from 'features/controlLayers/store/canvasSlice';
-import { selectEntity } from 'features/controlLayers/store/selectors';
+import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
 import { makeDefaultRasterLayerAdjustments } from 'features/controlLayers/store/util';
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiCaretDownBold, PiCheckBold, PiTrashBold } from 'react-icons/pi';
 
 export const RasterLayerAdjustmentsPanel = memo(() => {
   const dispatch = useAppDispatch();
   const entityIdentifier = useEntityIdentifierContext<'raster_layer'>();
   const canvasManager = useCanvasManager();
-  const layer = useAppSelector((s) => selectEntity(s.canvas.present, entityIdentifier));
+  const selectAdjustments = useMemo(() => {
+    return createSelector(selectCanvasSlice, (canvas) => selectEntity(canvas, entityIdentifier)?.adjustments);
+  }, [entityIdentifier]);
+
+  const adjustments = useAppSelector(selectAdjustments);
   const { t } = useTranslation();
 
-  const hasAdjustments = Boolean(layer?.adjustments);
-  const enabled = Boolean(layer?.adjustments?.enabled);
-  const collapsed = Boolean(layer?.adjustments?.collapsed);
-  const mode = layer?.adjustments?.mode ?? 'simple';
+  const hasAdjustments = Boolean(adjustments);
+  const enabled = Boolean(adjustments?.enabled);
+  const collapsed = Boolean(adjustments?.collapsed);
+  const mode = adjustments?.mode ?? 'simple';
 
   const onToggleEnabled = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const v = e.target.checked;
-      const current = layer?.adjustments ?? makeDefaultRasterLayerAdjustments(mode);
+      const current = adjustments ?? makeDefaultRasterLayerAdjustments(mode);
       dispatch(
         rasterLayerAdjustmentsSet({
           entityIdentifier,
           adjustments: { ...current, enabled: v },
         })
       );
     },
-    [dispatch, entityIdentifier, layer?.adjustments, mode]
+    [dispatch, entityIdentifier, adjustments, mode]
   );
 
   const onReset = useCallback(() => {
@@ -73,29 +78,29 @@ export const RasterLayerAdjustmentsPanel = memo(() => {
   }, [dispatch, entityIdentifier]);
 
   const onToggleCollapsed = useCallback(() => {
-    const current = layer?.adjustments ?? makeDefaultRasterLayerAdjustments(mode);
+    const current = adjustments ?? makeDefaultRasterLayerAdjustments(mode);
     dispatch(
       rasterLayerAdjustmentsSet({
         entityIdentifier,
         adjustments: { ...current, collapsed: !collapsed },
       })
     );
-  }, [dispatch, entityIdentifier, collapsed, layer?.adjustments, mode]);
+  }, [dispatch, entityIdentifier, collapsed, adjustments, mode]);
 
   const onSetMode = useCallback(
     (nextMode: 'simple' | 'curves') => {
       if (nextMode === mode) {
         return;
       }
-      const current = layer?.adjustments ?? makeDefaultRasterLayerAdjustments(nextMode);
+      const current = adjustments ?? makeDefaultRasterLayerAdjustments(nextMode);
       dispatch(
         rasterLayerAdjustmentsSet({
           entityIdentifier,
           adjustments: { ...current, mode: nextMode },
         })
       );
     },
-    [dispatch, entityIdentifier, layer?.adjustments, mode]
+    [dispatch, entityIdentifier, adjustments, mode]
   );
 
   // Memoized click handlers to avoid inline arrow functions in JSX
@@ -125,7 +130,7 @@ export const RasterLayerAdjustmentsPanel = memo(() => {
 
   return (
     <>
-      <Flex px={4} alignItems="center" gap={3} mt={2} mb={2}>
+      <Flex p={2} alignItems="center" gap={2}>
         <IconButton
           aria-label={collapsed ? t('controlLayers.adjustments.expand') : t('controlLayers.adjustments.collapse')}
           size="sm"
@@ -141,18 +146,10 @@ export const RasterLayerAdjustmentsPanel = memo(() => {
           Adjustments
         </Text>
         <ButtonGroup size="sm" isAttached variant="outline">
-          <Button
-            onClick={onClickModeSimple}
-            isActive={mode === 'simple'}
-            colorScheme={mode === 'simple' ? 'invokeBlue' : undefined}
-          >
+          <Button onClick={onClickModeSimple} colorScheme={mode === 'simple' ? 'invokeBlue' : undefined}>
             {t('controlLayers.adjustments.simple')}
           </Button>
-          <Button
-            onClick={onClickModeCurves}
-            isActive={mode === 'curves'}
-            colorScheme={mode === 'curves' ? 'invokeBlue' : undefined}
-          >
+          <Button onClick={onClickModeCurves} colorScheme={mode === 'curves' ? 'invokeBlue' : undefined}>
             {t('controlLayers.adjustments.curves')}
           </Button>
         </ButtonGroup>
@@ -161,7 +158,7 @@ export const RasterLayerAdjustmentsPanel = memo(() => {
           aria-label={t('controlLayers.adjustments.cancel')}
           size="md"
           onClick={onCancel}
-          isDisabled={!layer?.adjustments}
+          isDisabled={!adjustments}
           colorScheme="red"
           icon={<PiTrashBold />}
           variant="ghost"
@@ -170,15 +167,15 @@ export const RasterLayerAdjustmentsPanel = memo(() => {
           aria-label={t('controlLayers.adjustments.reset')}
           size="md"
           onClick={onReset}
-          isDisabled={!layer?.adjustments}
+          isDisabled={!adjustments}
           icon={<PiArrowCounterClockwiseBold />}
           variant="ghost"
         />
         <IconButton
           aria-label={t('controlLayers.adjustments.finish')}
           size="md"
           onClick={onFinish}
-          isDisabled={!layer?.adjustments}
+          isDisabled={!adjustments}
           colorScheme="green"
           icon={<PiCheckBold />}
           variant="ghost"

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesAdjustmentsEditor.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from '@invoke-ai/ui-library';
+import { Box, Flex, IconButton, Text } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useEntityAdapterContext } from 'features/controlLayers/contexts/EntityAdapterContext';
@@ -7,6 +7,7 @@ import { rasterLayerAdjustmentsCurvesUpdated } from 'features/controlLayers/stor
 import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
 
 const DEFAULT_POINTS: Array<[number, number]> = [
   [0, 0],
@@ -397,21 +398,33 @@ const CurveGraph = memo(function CurveGraph(props: CurveGraphProps) {
     return () => ro.disconnect();
   }, [draw]);
 
-  const canvasStyle = useMemo<React.CSSProperties>(() => CANVAS_STYLE, []);
+  const resetPoints = useCallback(() => {
+    setLocalPoints(sortPoints(DEFAULT_POINTS));
+    commit(DEFAULT_POINTS);
+  }, [commit]);
 
   return (
-    <Flex flexDir="column" gap={4}>
-      <Text fontSize="sm" color={channelColor[channel]}>
-        {title}
-      </Text>
+    <Flex flexDir="column" gap={2}>
+      <Flex justifyContent="space-between">
+        <Text fontSize="sm" color={channelColor[channel]} fontWeight="semibold">
+          {title}
+        </Text>
+        <IconButton
+          icon={<PiArrowCounterClockwiseBold />}
+          aria-label="Reset"
+          size="sm"
+          variant="link"
+          onClick={resetPoints}
+        />
+      </Flex>
       <canvas
         ref={canvasRef}
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
         onPointerCancel={handlePointerCancel}
         onDoubleClick={handleDoubleClick}
-        style={canvasStyle}
+        style={CANVAS_STYLE}
       />
     </Flex>
   );
@@ -427,6 +440,13 @@ export const RasterLayerCurvesAdjustmentsEditor = memo(() => {
     [entityIdentifier]
   );
   const layer = useAppSelector(selectLayer);
+  const selectIsDisabled = useMemo(() => {
+    return createSelector(
+      selectCanvasSlice,
+      (canvas) => selectEntity(canvas, entityIdentifier)?.adjustments?.enabled !== true
+    );
+  }, [entityIdentifier]);
+  const isDisabled = useAppSelector(selectIsDisabled);
 
   const [histMaster, setHistMaster] = useState<number[] | null>(null);
   const [histR, setHistR] = useState<number[] | null>(null);
@@ -502,7 +522,14 @@ export const RasterLayerCurvesAdjustmentsEditor = memo(() => {
   const onChangeB = useCallback((pts: Array<[number, number]>) => onChangePoints('b', pts), [onChangePoints]);
 
   return (
-    <Flex direction="column" gap={2} style={{ paddingLeft: 8, paddingRight: 8, paddingBottom: 10 }}>
+    <Flex
+      direction="column"
+      gap={2}
+      px={3}
+      pb={3}
+      opacity={isDisabled ? 0.3 : 1}
+      pointerEvents={isDisabled ? 'none' : 'auto'}
+    >
       <Box display="grid" gridTemplateColumns="repeat(2, minmax(0, 1fr))" gap={4}>
         <CurveGraph
           title={t('controlLayers.adjustments.master')}

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerSimpleAdjustmentsEditor.tsx

@@ -1,9 +1,10 @@
 import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { rasterLayerAdjustmentsSimpleUpdated } from 'features/controlLayers/store/canvasSlice';
-import { selectEntity } from 'features/controlLayers/store/selectors';
-import React, { memo, useCallback } from 'react';
+import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
+import React, { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type AdjustmentSliderRowProps = {
@@ -25,20 +26,33 @@ const AdjustmentSliderRow = ({ label, value, onChange, min = -1, max = 1, step =
   </FormControl>
 );
 
+const DEFAULT_SIMPLE_ADJUSTMENTS = {
+  brightness: 0,
+  contrast: 0,
+  saturation: 0,
+  temperature: 0,
+  tint: 0,
+  sharpness: 0,
+};
+
 export const RasterLayerSimpleAdjustmentsEditor = memo(() => {
   const dispatch = useAppDispatch();
   const entityIdentifier = useEntityIdentifierContext<'raster_layer'>();
   const { t } = useTranslation();
-  const layer = useAppSelector((s) => selectEntity(s.canvas.present, entityIdentifier));
-
-  const simple = layer?.adjustments?.simple ?? {
-    brightness: 0,
-    contrast: 0,
-    saturation: 0,
-    temperature: 0,
-    tint: 0,
-    sharpness: 0,
-  };
+  const selectSimpleAdjustments = useMemo(() => {
+    return createSelector(
+      selectCanvasSlice,
+      (canvas) => selectEntity(canvas, entityIdentifier)?.adjustments?.simple ?? DEFAULT_SIMPLE_ADJUSTMENTS
+    );
+  }, [entityIdentifier]);
+  const simple = useAppSelector(selectSimpleAdjustments);
+  const selectIsDisabled = useMemo(() => {
+    return createSelector(
+      selectCanvasSlice,
+      (canvas) => selectEntity(canvas, entityIdentifier)?.adjustments?.enabled !== true
+    );
+  }, [entityIdentifier]);
+  const isDisabled = useAppSelector(selectIsDisabled);
 
   const onBrightness = useCallback(
     (v: number) => dispatch(rasterLayerAdjustmentsSimpleUpdated({ entityIdentifier, simple: { brightness: v } })),
@@ -66,7 +80,7 @@ export const RasterLayerSimpleAdjustmentsEditor = memo(() => {
   );
 
   return (
-    <Flex px={8} direction="column">
+    <Flex px={3} pb={2} direction="column" opacity={isDisabled ? 0.3 : 1} pointerEvents={isDisabled ? 'none' : 'auto'}>
       <AdjustmentSliderRow
         label={t('controlLayers.adjustments.brightness')}
         value={simple.brightness}