From 80d9d88de1567f940cd9992f780c91975fe0217c Mon Sep 17 00:00:00 2001 From: caranicas Date: Fri, 16 Sep 2022 13:29:32 -0400 Subject: [PATCH] persistent state and reduced unneeded boolean logic --- .../components/molecules/drawImage/index.tsx | 61 ++++---- .../generatedImage/generatedImage.css.ts | 39 +++-- .../molecules/generatedImage/index.tsx | 10 +- .../advancedSettings/gpuSettings/index.tsx | 2 - .../improvementSettings/index.tsx | 21 +-- .../creationPanel/advancedSettings/index.tsx | 1 - .../propertySettings/index.tsx | 4 +- .../workflowSettings/index.tsx | 6 +- .../makeButton/makeButton.css.ts | 2 +- .../creationPanel/creationPanelUIStore.ts | 27 ++-- .../creationPanel/imageModifiers/index.tsx | 7 +- .../imageModifiers/modifiers.mock.ts | 18 +-- .../displayPanel/displayPanel.css.ts | 30 ++-- .../organisms/displayPanel/index.tsx | 10 +- .../src/pages/Experimental/index.tsx | 3 +- .../build_src/src/pages/Home/index.tsx | 13 +- .../build_src/src/stores/imageCreateStore.ts | 137 +++++++----------- ui/frontend/dist/index.css | 2 +- ui/frontend/dist/index.js | 28 ++-- 19 files changed, 180 insertions(+), 241 deletions(-) diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx index 6ba004d1..db5eec4a 100644 --- a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx @@ -1,4 +1,5 @@ -import React, {useRef, useEffect} from "react"; +// @ts-nocheck +import React, { useRef, useEffect } from "react"; // https://github.com/embiem/react-canvas-draw @@ -6,9 +7,7 @@ type DrawImageProps = { imageData: string; }; - -export default function DrawImage({imageData}: DrawImageProps) { - +export default function DrawImage({ imageData }: DrawImageProps) { const canvasRef = useRef(null); const draw = (ctx: CanvasRenderingContext2D) => { @@ -19,8 +18,7 @@ export default function DrawImage({imageData}: DrawImageProps) { useEffect(() => { const canvas = canvasRef.current; if (canvas) { - - if(imageData){ + if (imageData) { const ctx = canvas.getContext("2d"); if (ctx) { const img = new Image(); @@ -29,37 +27,40 @@ export default function DrawImage({imageData}: DrawImageProps) { }; img.src = imageData; } - } - else { + } else { const ctx = canvas.getContext("2d"); if (ctx) { draw(ctx); } } - } - else { + } else { console.log("canvas is null"); } }, [imageData, draw]); - - const _handleMouseDown = (e: React.MouseEvent) => { + const _handleMouseDown = ( + e: React.MouseEvent + ) => { console.log("mouse down", e); const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); - ctx.strokeStyle = '#ff0000'; - const {nativeEvent: {x, y}} = e; + ctx.strokeStyle = "#ff0000"; + const { + nativeEvent: { x, y }, + } = e; console.log("x: " + x + " y: " + y); - ctx.moveTo(x,y); - ctx.lineTo(x+1,y+1); + ctx.moveTo(x, y); + ctx.lineTo(x + 1, y + 1); ctx.stroke(); } }; - const _handleMouseUp = (e: React.MouseEvent) => { + const _handleMouseUp = ( + e: React.MouseEvent + ) => { console.log("mouse up"); const canvas = canvasRef.current; if (canvas) { @@ -67,25 +68,25 @@ export default function DrawImage({imageData}: DrawImageProps) { // if (ctx) { // draw(ctx); // } - const {nativeEvent: {x, y}} = e; - - ctx.moveTo(x,y); - ctx.lineTo(x+1,y+1); + const { + nativeEvent: { x, y }, + } = e; + ctx.moveTo(x, y); + ctx.lineTo(x + 1, y + 1); ctx.stroke(); ctx.closePath(); } }; - return (
- +
); -} \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts index f37d3614..850161b8 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts @@ -1,35 +1,34 @@ -import { style } from '@vanilla-extract/css' +import { style } from "@vanilla-extract/css"; export const generatedImage = style({ - position: 'relative', - width: '512px', - height: '512px', + position: "relative", + width: "512px", + height: "512px", }); export const imageContain = style({ - width:'512px', - height:'512px', - backgroundColor: 'black', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', + width: "512px", + height: "512px", + backgroundColor: "black", + display: "flex", + justifyContent: "center", + alignItems: "center", }); export const image = style({ - width:'512px', - height:'512px', - objectFit: 'contain', + width: "512px", + height: "512px", + objectFit: "contain", }); export const saveButton = style({ - position: 'absolute', - bottom: '10px', - left: '10px', + position: "absolute", + bottom: "10px", + left: "10px", }); export const useButton = style({ - position: 'absolute', - bottom: '10px', - right: '10px', + position: "absolute", + bottom: "10px", + right: "10px", }); - diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx index e70e3bc8..0458550f 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx @@ -1,18 +1,14 @@ import React, { useCallback } from "react"; -import { - ImageRequest, - useImageCreate, -} from "../../../stores/imageCreateStore"; +import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore"; import { generatedImage, imageContain, image, saveButton, - useButton, -} from //@ts-ignore - "./generatedImage.css.ts"; + useButton, //@ts-ignore +} from "./generatedImage.css.ts"; type GeneretaedImageProps = { imageData: string; diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx index ff1e3d99..de237d23 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx @@ -1,10 +1,8 @@ import React from "react"; import { useImageCreate } from "../../../../../stores/imageCreateStore"; - import { useCreateUI } from "../../creationPanelUIStore"; - import { MenuButton, //@ts-ignore } from "../advancedsettings.css.ts"; diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx index b508fc6c..35779e3d 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx @@ -3,14 +3,12 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore"; import { useCreateUI } from "../../creationPanelUIStore"; - import { MenuButton, //@ts-ignore } from "../advancedsettings.css.ts"; export default function ImprovementSettings() { // these are conditionals that should be retired and inferred from the store - const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling()); const isUsingFaceCorrection = useImageCreate((state) => state.isUsingFaceCorrection() ); @@ -27,14 +25,14 @@ export default function ImprovementSettings() { (state) => state.toggleUseFaceCorrection ); - const toggleUseUpscaling = useImageCreate( - (state) => state.toggleUseUpscaling - ); - const setRequestOption = useImageCreate((state) => state.setRequestOptions); - const improvementOpen = useCreateUI((state) => state.isOpenAdvImprovementSettings); - const toggleImprovementOpen = useCreateUI((state) => state.toggleAdvImprovementSettings); + const improvementOpen = useCreateUI( + (state) => state.isOpenAdvImprovementSettings + ); + const toggleImprovementOpen = useCreateUI( + (state) => state.toggleAdvImprovementSettings + ); return (
@@ -59,21 +57,16 @@ export default function ImprovementSettings() {