fix(gui): use blur event on fill color for better perf

ssube · Jan 18, 2023 · b66cb8f · b66cb8f
1 parent 0055d06
commit b66cb8f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/gui/src/client.ts b/gui/src/client.ts
@@ -292,6 +292,7 @@ export function makeClient(root: string, f = fetch): ApiClient {
       url.searchParams.append('filter', params.filter);
       url.searchParams.append('noise', params.noise);
       url.searchParams.append('strength', params.strength.toFixed(FIXED_FLOAT));
+      url.searchParams.append('fillColor', params.fillColor);
 
       if (doesExist(upscale)) {
         appendUpscaleToURL(url, upscale);
@@ -320,6 +321,7 @@ export function makeClient(root: string, f = fetch): ApiClient {
       url.searchParams.append('filter', params.filter);
       url.searchParams.append('noise', params.noise);
       url.searchParams.append('strength', params.strength.toFixed(FIXED_FLOAT));
+      url.searchParams.append('fillColor', params.fillColor);
 
       if (doesExist(upscale)) {
         appendUpscaleToURL(url, upscale);

diff --git a/gui/src/components/tab/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx
@@ -109,6 +109,18 @@ export function Inpaint() {
           setInpaint(newParams);
         }}
       />
+      <NumericField
+        label='Strength'
+        min={params.strength.min}
+        max={params.strength.max}
+        step={params.strength.step}
+        value={strength}
+        onChange={(value) => {
+          setInpaint({
+            strength: value,
+          });
+        }}
+      />
       <Stack direction='row' spacing={2}>
         <QueryList
           id='masks'
@@ -138,20 +150,8 @@ export function Inpaint() {
             });
           }}
         />
-        <NumericField
-          label='Strength'
-          min={params.strength.min}
-          max={params.strength.max}
-          step={params.strength.step}
-          value={strength}
-          onChange={(value) => {
-            setInpaint({
-              strength: value,
-            });
-          }}
-        />
         <Stack direction='row' spacing={2}>
-          <input name='fill-color' type='color' value={fillColor} onChange={(event) => {
+          <input name='fill-color' type='color' defaultValue={fillColor} onBlur={(event) => {
             setInpaint({
               fillColor: event.target.value,
             });