From 185deeb74e565326a1dbf94aecda76243545f966 Mon Sep 17 00:00:00 2001
From: djohnson <mr.demarcus.johnson@gmail.com>
Date: Tue, 16 Apr 2024 01:36:18 +0900
Subject: [PATCH] A1111 General Panel should use the number input

---
 src/components/form/NumberInput.tsx           | 12 ++--
 .../panels/general/A1111GeneralPanel.tsx      | 68 ++++++++++---------
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/components/form/NumberInput.tsx b/src/components/form/NumberInput.tsx
index e71c9f3..c0fe530 100644
--- a/src/components/form/NumberInput.tsx
+++ b/src/components/form/NumberInput.tsx
@@ -4,7 +4,7 @@ import { HTMLProps } from 'react'
 import ChevronDown from '~/icons/ChevronDown'
 
 type NumberInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
-  value: number
+  value?: number
   onChange: (nextValue: number) => void
   step?: number
   min?: number
@@ -23,8 +23,8 @@ const NumberInput = ({
   className = '',
   ...props
 }: NumberInputProps) => {
-  const increaseDisabled = disabled || _.gt(value + step, max)
-  const decreaseDisabled = disabled || _.lt(value - step, min)
+  const increaseDisabled = disabled || _.gt((value || 0) + step, max)
+  const decreaseDisabled = disabled || _.lt((value || 0) - step, min)
 
   return (
     <div
@@ -35,7 +35,7 @@ const NumberInput = ({
     >
       <input
         type="number"
-        value={_.ceil(value, precision)}
+        value={value && _.ceil(value, precision)}
         onChange={e => onChange(e.target.valueAsNumber)}
         className={'input w-full focus:border-transparent focus:!outline-none ' + className}
         min={min}
@@ -52,7 +52,7 @@ const NumberInput = ({
             'btn btn-square btn-xs rounded-none opacity-70 ' +
             (increaseDisabled ? 'cursor-not-allowed ' : ' group hover:scale-100 hover:opacity-100')
           }
-          onClick={() => onChange(value + step)}
+          onClick={() => onChange((value || 0) + step)}
           disabled={increaseDisabled}
         >
           <ChevronDown className="rotate-180 !stroke-2" />
@@ -64,7 +64,7 @@ const NumberInput = ({
             'btn btn-square btn-xs rounded-none opacity-70 ' +
             (decreaseDisabled ? 'cursor-not-allowed ' : ' group hover:scale-100 hover:opacity-100')
           }
-          onClick={() => onChange(value - step)}
+          onClick={() => onChange((value || 0) - step)}
           disabled={decreaseDisabled}
         >
           <ChevronDown className="!stroke-2" />
diff --git a/src/features/settings/panels/general/A1111GeneralPanel.tsx b/src/features/settings/panels/general/A1111GeneralPanel.tsx
index cff31fe..b22a6a4 100644
--- a/src/features/settings/panels/general/A1111GeneralPanel.tsx
+++ b/src/features/settings/panels/general/A1111GeneralPanel.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { A1111HostInput } from '~/components/HostInput'
+import NumberInput from '~/components/form/NumberInput'
 
 import { settingStore } from '~/models/SettingStore'
 
@@ -47,7 +48,7 @@ const A1111SizeSelector = observer(() => {
     <>
       <label className="label-text">Image Dimensions (width x height):</label>
 
-      <div className="flex flex-row gap-2">
+      <div className="flex flex-row items-center gap-2">
         {[16, 128, 512, 1028].map(size => (
           <button
             className={'btn btn-outline btn-sm' + (isSelected(size, size) ? ' btn-primary ' : '')}
@@ -60,24 +61,22 @@ const A1111SizeSelector = observer(() => {
         ))}
 
         <div className="ml-5 flex flex-row items-center justify-center gap-2 align-middle">
-          <input
+          <NumberInput
             type="number"
-            className="input input-sm input-bordered"
             min={16}
             max={99999}
-            value={settingStore.a1111Width}
-            onChange={e => settingStore.setA1111Size(e.target.valueAsNumber, height)}
+            value={settingStore.a1111Width || 0}
+            onChange={nextWidth => settingStore.setA1111Size(nextWidth, height)}
             placeholder="Width"
             disabled={!a1111Enabled}
           />
           x
-          <input
+          <NumberInput
             type="number"
-            className="input input-sm input-bordered"
             min={16}
             max={99999}
-            value={settingStore.a1111Height}
-            onChange={e => settingStore.setA1111Size(width, e.target.valueAsNumber)}
+            value={settingStore.a1111Height || 0}
+            onChange={nextHeight => settingStore.setA1111Size(width, nextHeight)}
             placeholder="Height"
             disabled={!a1111Enabled}
           />
@@ -94,7 +93,7 @@ const A1111StepsSelector = observer(() => {
     <>
       <label className="label-text">Steps:</label>
 
-      <div className="flex flex-row gap-2">
+      <div className="flex flex-row items-center gap-2 align-bottom">
         {[1, 5, 10, 15, 20, 25, 50, 75, 150].map(count => (
           <button
             className={'btn btn-outline btn-sm' + (steps === count ? ' btn-primary ' : '')}
@@ -106,16 +105,17 @@ const A1111StepsSelector = observer(() => {
           </button>
         ))}
 
-        <input
-          type="number"
-          className="input input-sm input-bordered"
-          min={0}
-          max={99999}
-          value={settingStore.a1111Steps}
-          onChange={e => settingStore.setA1111Steps(e.target.valueAsNumber)}
-          placeholder="Steps"
-          disabled={!a1111Enabled}
-        />
+        <div className="ml-5">
+          <NumberInput
+            type="number"
+            min={0}
+            max={99999}
+            value={settingStore.a1111Steps}
+            onChange={settingStore.setA1111Steps}
+            placeholder="Steps"
+            disabled={!a1111Enabled}
+          />
+        </div>
       </div>
     </>
   )
@@ -128,10 +128,12 @@ const A1111BatchSizeSelector = observer(() => {
     <>
       <label className="label-text">Batch Size (image count):</label>
 
-      <div className="flex flex-row gap-2">
+      <div className="flex flex-row items-center gap-2">
         {[1, 2, 3, 5, 7, 11].map(count => (
           <button
-            className={'btn btn-outline btn-sm' + (batchSize === count ? ' btn-primary ' : '')}
+            className={
+              'btn btn-outline btn-sm items-center' + (batchSize === count ? ' btn-primary ' : '')
+            }
             onClick={() => settingStore.setA1111BatchSize(count)}
             disabled={!a1111Enabled}
             key={count}
@@ -140,16 +142,18 @@ const A1111BatchSizeSelector = observer(() => {
           </button>
         ))}
 
-        <input
-          type="number"
-          className="input input-sm input-bordered"
-          min={0}
-          max={99999}
-          value={batchSize}
-          onChange={e => settingStore.setA1111BatchSize(e.target.valueAsNumber)}
-          placeholder="Size"
-          disabled={!a1111Enabled}
-        />
+        <div className="ml-5">
+          <NumberInput
+            type="number"
+            className="max-w-[7ch]"
+            min={0}
+            max={99999}
+            value={batchSize}
+            onChange={settingStore.setA1111BatchSize}
+            placeholder="Size"
+            disabled={!a1111Enabled}
+          />
+        </div>
       </div>
     </>
   )