Added fake node context (#1992)

* Added fake node context

* Minor fixes

src/renderer/components/Handle.tsx

@@ -2,7 +2,9 @@ import { Box, Tooltip, chakra } from '@chakra-ui/react';
 import React, { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Connection, Position, Handle as RFHandle } from 'reactflow';
+import { useContext } from 'use-context-selector';
 import { Validity } from '../../common/Validity';
+import { FakeNodeContext } from '../contexts/FakeExampleContext';
 import { noContextMenu } from '../hooks/useContextMenu';
 
 export type HandleType = 'input' | 'output';
@@ -12,7 +14,6 @@ interface HandleElementProps {
     isValidConnection: (connection: Readonly<Connection>) => boolean;
     validity: Validity;
     id: string;
-    useFakeHandles: boolean;
 }
 
 // Had to do this garbage to prevent chakra from clashing the position prop
@@ -23,9 +24,10 @@ const HandleElement = memo(
         validity,
         type,
         id,
-        useFakeHandles,
         ...props
     }: React.PropsWithChildren<HandleElementProps>) => {
+        const { isFake } = useContext(FakeNodeContext);
+
         return (
             <Tooltip
                 hasArrow
@@ -42,7 +44,7 @@ const HandleElement = memo(
                 px={2}
                 py={1}
             >
-                {useFakeHandles ? (
+                {isFake ? (
                     <Box
                         bg="#1a192b"
                         border="1px solid white"
@@ -85,7 +87,6 @@ export interface HandleProps {
     isValidConnection: (connection: Readonly<Connection>) => boolean;
     handleColors: readonly string[];
     connectedColor: string | undefined;
-    useFakeHandles: boolean;
 }
 
 const getBackground = (colors: readonly string[]): string => {
@@ -102,15 +103,7 @@ const getBackground = (colors: readonly string[]): string => {
 };
 
 export const Handle = memo(
-    ({
-        id,
-        type,
-        validity,
-        isValidConnection,
-        handleColors,
-        connectedColor,
-        useFakeHandles,
-    }: HandleProps) => {
+    ({ id, type, validity, isValidConnection, handleColors, connectedColor }: HandleProps) => {
         const isConnected = !!connectedColor;
 
         const connectedBg = 'var(--connection-color)';
@@ -152,7 +145,6 @@ export const Handle = memo(
                     position: 'relative',
                 }}
                 type={type}
-                useFakeHandles={useFakeHandles}
                 validity={validity}
                 onContextMenu={noContextMenu}
             />

src/renderer/components/NodeDocumentation/NodeExample.tsx

@@ -16,6 +16,7 @@ import { DisabledStatus } from '../../../common/nodes/disabled';
 import { TypeState } from '../../../common/nodes/TypeState';
 import { EMPTY_ARRAY, EMPTY_MAP, EMPTY_OBJECT, EMPTY_SET } from '../../../common/util';
 import { BackendContext } from '../../contexts/BackendContext';
+import { FakeNodeProvider } from '../../contexts/FakeExampleContext';
 import { TypeInfo, testInputConditionTypeInfo } from '../../helpers/nodeState';
 import { NodeBody } from '../node/NodeBody';
 import { NodeFooter } from '../node/NodeFooter/NodeFooter';
@@ -105,59 +106,60 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
             key={selectedSchema.schemaId}
             pointerEvents="none"
         >
-            <Center
-                bg="var(--node-bg-color)"
-                borderColor="var(--node-border-color)"
-                borderRadius="lg"
-                borderWidth="0.5px"
-                boxShadow="lg"
-                minWidth="240px"
-                overflow="hidden"
-                transition="0.15s ease-in-out"
-            >
-                <VStack
-                    spacing={0}
-                    w="full"
+            <FakeNodeProvider isFake>
+                <Center
+                    bg="var(--node-bg-color)"
+                    borderColor="var(--node-border-color)"
+                    borderRadius="lg"
+                    borderWidth="0.5px"
+                    boxShadow="lg"
+                    minWidth="240px"
+                    overflow="hidden"
+                    transition="0.15s ease-in-out"
                 >
                     <VStack
                         spacing={0}
                         w="full"
                     >
-                        <NodeHeader
-                            accentColor={accentColor}
-                            disabledStatus={DisabledStatus.Enabled}
-                            icon={selectedSchema.icon}
-                            name={selectedSchema.name}
-                            parentNode={undefined}
-                            selected={false}
-                        />
-                        <NodeBody
+                        <VStack
+                            spacing={0}
+                            w="full"
+                        >
+                            <NodeHeader
+                                accentColor={accentColor}
+                                disabledStatus={DisabledStatus.Enabled}
+                                icon={selectedSchema.icon}
+                                name={selectedSchema.name}
+                                parentNode={undefined}
+                                selected={false}
+                            />
+                            <NodeBody
+                                animated={false}
+                                nodeState={{
+                                    id: nodeId,
+                                    schemaId: selectedSchema.schemaId,
+                                    schema: selectedSchema,
+                                    inputData,
+                                    setInputValue,
+                                    inputSize,
+                                    setInputSize: setSingleInputSize,
+                                    isLocked: false,
+                                    connectedInputs: EMPTY_SET,
+                                    connectedOutputs: EMPTY_SET,
+                                    type: typeInfo,
+                                    testCondition: (condition: Condition): boolean =>
+                                        testInputConditionTypeInfo(condition, inputData, typeInfo),
+                                }}
+                            />
+                        </VStack>
+                        <NodeFooter
                             animated={false}
-                            nodeState={{
-                                id: nodeId,
-                                schemaId: selectedSchema.schemaId,
-                                schema: selectedSchema,
-                                inputData,
-                                setInputValue,
-                                inputSize,
-                                setInputSize: setSingleInputSize,
-                                isLocked: false,
-                                connectedInputs: EMPTY_SET,
-                                connectedOutputs: EMPTY_SET,
-                                type: typeInfo,
-                                testCondition: (condition: Condition): boolean =>
-                                    testInputConditionTypeInfo(condition, inputData, typeInfo),
-                                useFakeHandles: true,
-                            }}
+                            id={nodeId}
+                            validity={{ isValid: true }}
                         />
                     </VStack>
-                    <NodeFooter
-                        animated={false}
-                        id={nodeId}
-                        validity={{ isValid: true }}
-                    />
-                </VStack>
-            </Center>
+                </Center>
+            </FakeNodeProvider>
         </Center>
     );
 });

src/renderer/components/inputs/DirectoryInput.tsx

@@ -18,7 +18,6 @@ import { ipcRenderer } from '../../../common/safeIpc';
 import { useContextMenu } from '../../hooks/useContextMenu';
 import { useInputRefactor } from '../../hooks/useInputRefactor';
 import { useLastDirectory } from '../../hooks/useLastDirectory';
-import { CopyOverrideIdSection } from './elements/CopyOverrideIdSection';
 import { MaybeLabel } from './InputContainer';
 import { InputProps } from './props';
 
@@ -102,10 +101,6 @@ export const DirectoryInput = memo(
                     {t('inputs.directory.copyFullDirectoryPath', 'Copy Full Directory Path')}
                 </MenuItem>
                 {refactor}
-                <CopyOverrideIdSection
-                    inputId={input.id}
-                    nodeId={nodeId}
-                />
             </MenuList>
         ));
 

src/renderer/components/inputs/FileInput.tsx

@@ -20,8 +20,8 @@ import { ipcRenderer } from '../../../common/safeIpc';
 import { AlertBoxContext } from '../../contexts/AlertBoxContext';
 import { getSingleFileWithExtension } from '../../helpers/dataTransfer';
 import { useContextMenu } from '../../hooks/useContextMenu';
+import { useInputRefactor } from '../../hooks/useInputRefactor';
 import { useLastDirectory } from '../../hooks/useLastDirectory';
-import { CopyOverrideIdSection } from './elements/CopyOverrideIdSection';
 import { WithLabel } from './InputContainer';
 import { InputProps } from './props';
 
@@ -102,6 +102,8 @@ export const FileInput = memo(
             }
         };
 
+        const refactor = useInputRefactor(nodeId, input, filePath, isConnected);
+
         const menu = useContextMenu(() => (
             <MenuList className="nodrag">
                 <MenuItem
@@ -146,10 +148,7 @@ export const FileInput = memo(
                 >
                     {t('inputs.file.copyFullFilePath', 'Copy Full File Path')}
                 </MenuItem>
-                <CopyOverrideIdSection
-                    inputId={input.id}
-                    nodeId={nodeId}
-                />
+                {refactor}
             </MenuList>
         ));
 

src/renderer/components/inputs/InputContainer.tsx

@@ -19,17 +19,10 @@ export interface HandleWrapperProps {
     id: string;
     inputId: InputId;
     connectableType: Type;
-    useFakeHandles: boolean;
 }
 
 export const HandleWrapper = memo(
-    ({
-        children,
-        id,
-        inputId,
-        connectableType,
-        useFakeHandles,
-    }: React.PropsWithChildren<HandleWrapperProps>) => {
+    ({ children, id, inputId, connectableType }: React.PropsWithChildren<HandleWrapperProps>) => {
         const { isValidConnection, edgeChanges, useConnectingFrom, typeState } =
             useContext(GlobalVolatileContext);
         const { getEdges, getNode } = useReactFlow();
@@ -113,7 +106,6 @@ export const HandleWrapper = memo(
                         id={targetHandle}
                         isValidConnection={isValidConnectionForRf}
                         type="input"
-                        useFakeHandles={useFakeHandles}
                         validity={validity}
                     />
                 </Center>

src/renderer/components/inputs/NumberInput.tsx

@@ -8,7 +8,6 @@ import { areApproximatelyEqual } from '../../../common/util';
 import { useContextMenu } from '../../hooks/useContextMenu';
 import { useInputRefactor } from '../../hooks/useInputRefactor';
 import { AdvancedNumberInput } from './elements/AdvanceNumberInput';
-import { CopyOverrideIdSection } from './elements/CopyOverrideIdSection';
 import { MaybeLabel } from './InputContainer';
 import { InputProps } from './props';
 
@@ -80,10 +79,6 @@ export const NumberInput = memo(
                     {t('inputs.number.paste', 'Paste')}
                 </MenuItem>
                 {refactor}
-                <CopyOverrideIdSection
-                    inputId={input.id}
-                    nodeId={nodeId}
-                />
             </MenuList>
         ));
 

src/renderer/components/inputs/SchemaInput.tsx

@@ -53,7 +53,6 @@ export const SchemaInput = memo(({ input, nodeState, afterInput }: SingleInputPr
         isLocked,
         connectedInputs,
         type,
-        useFakeHandles,
     } = nodeState;
 
     const functionDefinition = useContextSelector(BackendContext, (c) =>
@@ -119,7 +118,6 @@ export const SchemaInput = memo(({ input, nodeState, afterInput }: SingleInputPr
                     connectableType={connectableType}
                     id={nodeId}
                     inputId={inputId}
-                    useFakeHandles={useFakeHandles}
                 >
                     {inputElement}
                 </HandleWrapper>

src/renderer/components/inputs/SliderInput.tsx

@@ -11,7 +11,6 @@ import { BackendContext } from '../../contexts/BackendContext';
 import { useContextMenu } from '../../hooks/useContextMenu';
 import { useInputRefactor } from '../../hooks/useInputRefactor';
 import { AdvancedNumberInput } from './elements/AdvanceNumberInput';
-import { CopyOverrideIdSection } from './elements/CopyOverrideIdSection';
 import {
     LINEAR_SCALE,
     LogScale,
@@ -169,10 +168,6 @@ export const SliderInput = memo(
                     {t('inputs.number.paste', 'Paste')}
                 </MenuItem>
                 {refactor}
-                <CopyOverrideIdSection
-                    inputId={input.id}
-                    nodeId={nodeId}
-                />
             </MenuList>
         ));
 

src/renderer/components/inputs/TextInput.tsx

@@ -12,7 +12,6 @@ import { typeToString } from '../../helpers/naviHelpers';
 import { useContextMenu } from '../../hooks/useContextMenu';
 import { useInputRefactor } from '../../hooks/useInputRefactor';
 import { DragHandleSVG } from '../CustomIcons';
-import { CopyOverrideIdSection } from './elements/CopyOverrideIdSection';
 import { MaybeLabel } from './InputContainer';
 import { InputProps } from './props';
 
@@ -113,10 +112,6 @@ export const TextInput = memo(
                     {t('inputs.text.paste', 'Paste')}
                 </MenuItem>
                 {refactor}
-                <CopyOverrideIdSection
-                    inputId={input.id}
-                    nodeId={nodeId}
-                />
             </MenuList>
         ));
 

src/renderer/components/node/NodeOutputs.tsx

@@ -48,7 +48,7 @@ interface NodeOutputProps {
 }
 
 export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
-    const { id, schema, schemaId, useFakeHandles } = nodeState;
+    const { id, schema, schemaId } = nodeState;
 
     const { functionDefinitions } = useContext(BackendContext);
     const { setManualOutputType } = useContext(GlobalContext);
@@ -100,7 +100,6 @@ export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
                         key={`${id}-${output.id}`}
                         output={output}
                         type={type}
-                        useFakeHandles={useFakeHandles}
                     >
                         <OutputType
                             animated={animated}