From 0257b4a611baf312d20a92cf8b5cd5ce10c55c78 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 15 Jul 2023 00:13:45 +1000 Subject: [PATCH 1/3] fix(ui): fix mouse interactions --- .../components/IAINode/IAINodeHeader.tsx | 2 ++ .../components/IAINode/IAINodeInputs.tsx | 27 ++++++++++--------- .../nodes/components/InvocationComponent.tsx | 11 +++++++- .../nodes/components/ProgressImageNode.tsx | 2 ++ .../nodes/hooks/useBuildInvocation.ts | 8 ++++++ 5 files changed, 36 insertions(+), 14 deletions(-) diff --git a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx index 73705769b6..226aaed7be 100644 --- a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx @@ -1,4 +1,5 @@ import { Flex, Heading, Icon, Tooltip } from '@chakra-ui/react'; +import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/hooks/useBuildInvocation'; import { memo } from 'react'; import { FaInfoCircle } from 'react-icons/fa'; @@ -12,6 +13,7 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => { const { nodeId, title, description } = props; return ( { }); return ( - + {IAINodeInputsToRender} ); diff --git a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx index 12817679e2..3a08b46dde 100644 --- a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx @@ -23,7 +23,14 @@ export const InvocationComponent = memo((props: NodeProps) => { if (!template) { return ( - + ) => { description={template.description} /> diff --git a/invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx index 6424d4f76c..2975cd820c 100644 --- a/invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx @@ -21,7 +21,9 @@ const ProgressImageNode = (props: NodeProps) => { /> nodes.invocationTemplates ); +export const DRAG_HANDLE_CLASSNAME = 'node-drag-handle'; + +export const SHARED_NODE_PROPERTIES: Partial = { + dragHandle: `.${DRAG_HANDLE_CLASSNAME}`, +}; + export const useBuildInvocation = () => { const invocationTemplates = useAppSelector(templatesSelector); @@ -32,6 +38,7 @@ export const useBuildInvocation = () => { }); const node: Node = { + ...SHARED_NODE_PROPERTIES, id: 'progress_image', type: 'progress_image', position: { x: x, y: y }, @@ -91,6 +98,7 @@ export const useBuildInvocation = () => { }); const invocation: Node = { + ...SHARED_NODE_PROPERTIES, id: nodeId, type: 'invocation', position: { x: x, y: y }, From 30e45eaf47c3cced85ed5175c8430c0c0d05d441 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 15 Jul 2023 00:45:26 +1000 Subject: [PATCH 2/3] feat(ui): hold shift to make nodes draggable from anywhere --- .../src/features/nodes/components/InvocationComponent.tsx | 4 ++-- .../web/src/features/nodes/components/NodeWrapper.tsx | 5 +++++ .../web/src/features/nodes/components/ProgressImageNode.tsx | 1 - 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx index 3a08b46dde..608f98d6d2 100644 --- a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx @@ -53,14 +53,14 @@ export const InvocationComponent = memo((props: NodeProps) => { description={template.description} /> diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx index 7a76cd5902..dc5a94c267 100644 --- a/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx @@ -2,6 +2,8 @@ import { Box, useToken } from '@chakra-ui/react'; import { NODE_MIN_WIDTH } from 'app/constants'; import { PropsWithChildren } from 'react'; +import { DRAG_HANDLE_CLASSNAME } from '../hooks/useBuildInvocation'; +import { useAppSelector } from 'app/store/storeHooks'; type NodeWrapperProps = PropsWithChildren & { selected: boolean; @@ -13,8 +15,11 @@ const NodeWrapper = (props: NodeWrapperProps) => { 'dark-lg', ]); + const shift = useAppSelector((state) => state.hotkeys.shift); + return ( ) => { Date: Sat, 15 Jul 2023 01:04:33 +1000 Subject: [PATCH 3/3] fix(ui): allow decimals in number inputs still some jank but eh --- .../src/common/components/IAINumberInput.tsx | 2 +- .../fields/NumberInputFieldComponent.tsx | 36 ++++++++++++++++--- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/invokeai/frontend/web/src/common/components/IAINumberInput.tsx b/invokeai/frontend/web/src/common/components/IAINumberInput.tsx index 8f675cc148..de3b44564a 100644 --- a/invokeai/frontend/web/src/common/components/IAINumberInput.tsx +++ b/invokeai/frontend/web/src/common/components/IAINumberInput.tsx @@ -28,7 +28,7 @@ import { useState, } from 'react'; -const numberStringRegex = /^-?(0\.)?\.?$/; +export const numberStringRegex = /^-?(0\.)?\.?$/; interface Props extends Omit { label?: string; diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/NumberInputFieldComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/NumberInputFieldComponent.tsx index f5df8989f5..50d69a6496 100644 --- a/invokeai/frontend/web/src/features/nodes/components/fields/NumberInputFieldComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/fields/NumberInputFieldComponent.tsx @@ -6,6 +6,7 @@ import { NumberInputStepper, } from '@chakra-ui/react'; import { useAppDispatch } from 'app/store/storeHooks'; +import { numberStringRegex } from 'common/components/IAINumberInput'; import { fieldValueChanged } from 'features/nodes/store/nodesSlice'; import { FloatInputFieldTemplate, @@ -13,7 +14,7 @@ import { IntegerInputFieldTemplate, IntegerInputFieldValue, } from 'features/nodes/types/types'; -import { memo } from 'react'; +import { memo, useEffect, useState } from 'react'; import { FieldComponentProps } from './types'; const NumberInputFieldComponent = ( @@ -23,17 +24,42 @@ const NumberInputFieldComponent = ( > ) => { const { nodeId, field } = props; - const dispatch = useAppDispatch(); + const [valueAsString, setValueAsString] = useState( + String(field.value) + ); - const handleValueChanged = (_: string, value: number) => { - dispatch(fieldValueChanged({ nodeId, fieldName: field.name, value })); + const handleValueChanged = (v: string) => { + setValueAsString(v); + // This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc. + if (!v.match(numberStringRegex)) { + // Cast the value to number. Floor it if it should be an integer. + dispatch( + fieldValueChanged({ + nodeId, + fieldName: field.name, + value: + props.template.type === 'integer' + ? Math.floor(Number(v)) + : Number(v), + }) + ); + } }; + useEffect(() => { + if ( + !valueAsString.match(numberStringRegex) && + field.value !== Number(valueAsString) + ) { + setValueAsString(String(field.value)); + } + }, [field.value, valueAsString]); + return (