💥 feat: update slots

canisminor1990 · Apr 4, 2023 · 8ed3fee · 8ed3fee
1 parent f910ac5
commit 8ed3fee
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 255 deletions.
diff --git a/src/components/Containers/InputContainer.tsx b/src/components/Containers/InputContainer.tsx
@@ -17,7 +17,13 @@ const InputContainer: React.FC<InputContainerProps> = ({ id, name, input }) => {
     }),
     shallow
   )
-  return <InputComponent value={value} input={input} onChange={(val) => onPropChange(id, name, val)} />
+  return (
+    <InputComponent
+      value={value}
+      input={input}
+      onChange={(val) => onPropChange(id, name, val?.target?.value ? val.target.value : val)}
+    />
+  )
 }
 
 export default React.memo(InputContainer)
diff --git a/src/components/Containers/NodeContainer.tsx b/src/components/Containers/NodeContainer.tsx
@@ -6,18 +6,21 @@ import { NodeProps } from 'reactflow'
 import { shallow } from 'zustand/shallow'
 
 const NodeContainer: React.FC<NodeProps<Widget>> = (props) => {
-  const { progressBar, imagePreviews, onPreviewImage, onDuplicateNode, onDeleteNode, onModifyChange } = useAppStore(
+  const { progressBar, imagePreviews, onDuplicateNode, onDeleteNode, onModifyChange, getNodeFieldsData } = useAppStore(
     (st) => ({
       progressBar: st.nodeInProgress?.id === props.id ? st.nodeInProgress.progress : undefined,
-      imagePreviews: st.graph[props.id]?.images?.flatMap((image) => {
-        const index = st.gallery.findIndex((i) => i.image === image)
-        return index !== -1 ? { image, index } : []
+      imagePreviews: st.graph[props.id]?.images?.map((image, index) => {
+        return {
+          image,
+          index,
+        }
       }),
-      onPreviewImage: st.onPreviewImage,
+
       onPropChange: st.onPropChange,
       onDuplicateNode: st.onDuplicateNode,
       onDeleteNode: st.onDeleteNode,
       onModifyChange: st.onModifyChange,
+      getNodeFieldsData: st.getNodeFieldsData,
     }),
     shallow
   )
@@ -26,10 +29,10 @@ const NodeContainer: React.FC<NodeProps<Widget>> = (props) => {
       node={props}
       progressBar={progressBar}
       imagePreviews={imagePreviews}
-      onPreviewImage={onPreviewImage}
       onDuplicateNode={onDuplicateNode}
       onDeleteNode={onDeleteNode}
       onModifyChange={onModifyChange}
+      getNodeFieldsData={getNodeFieldsData}
     />
   )
 }

diff --git a/src/components/NodeComponent/InputComponent.tsx b/src/components/NodeComponent/InputComponent.tsx
@@ -30,16 +30,16 @@ const InputComponent: React.FC<InputProps> = ({ value, input, onChange }) => {
     )
   }
   if (checkInput.isBool(input)) {
-    return <Checkbox value={value} defaultChecked={input[1].default} onChange={(e) => onChange(e.target.checked)} />
+    return <Checkbox value={value} defaultChecked={input[1].default} onChange={onChange} />
   }
   if (checkInput.isInt(input)) {
     return (
       <IntegerStep
         style={{ width: '100%' }}
-        value={value !== null ? value : input[1].default}
+        value={Number(value !== null ? value : input[1].default)}
         max={Number(input[1].max)}
         min={Number(input[1].min)}
-        onChange={onChange}
+        onChange={(val) => onChange(Number(val?.target?.value ? val.target.value : val))}
       />
     )
   }
@@ -48,21 +48,19 @@ const InputComponent: React.FC<InputProps> = ({ value, input, onChange }) => {
       <DecimalStep
         style={{ width: '100%' }}
         step={0.01}
-        value={value !== null ? value : input[1].default}
+        value={Number(value !== null ? value : input[1].default)}
         max={Number(input[1].max)}
         min={Number(input[1].min)}
-        onChange={onChange}
+        onChange={(val) => onChange(Number(val?.target?.value ? val.target.value : val))}
       />
     )
   }
   if (checkInput.isString(input)) {
     const args = input[1]
     if (args.multiline === true) {
-      return (
-        <TextArea style={{ height: 128, width: '100%' }} value={value} onChange={(e) => onChange(e.target.value)} />
-      )
+      return <TextArea style={{ height: 128, width: '100%' }} defaultValue={value} onBlur={onChange} />
     }
-    return <Input style={{ width: '100%' }} value={value} onChange={(e) => onChange(e.target.value)} />
+    return <Input style={{ width: '100%' }} value={value} onChange={onChange} />
   }
   return null
 }

diff --git a/src/components/NodeComponent/NodeImgPreview.tsx b/src/components/NodeComponent/NodeImgPreview.tsx
@@ -15,7 +15,7 @@ const NodeImgPreview: React.FC<NodeImgPreviewProps> = ({ data }) => {
       {data
         .map(({ image, index }) => (
           <Image
-            width={256}
+            height={'100%'}
             key={index}
             src={getBackendUrl(queryString.stringifyUrl({ url: `/view`, query: image }))}
           />

diff --git a/src/components/NodeComponent/NodeInputs.tsx b/src/components/NodeComponent/NodeInputs.tsx
@@ -18,7 +18,6 @@ const NodeInputs: React.FC<NodeInputsProps> = ({ data }) => {
         <NodeSlot
           key={item.name}
           slotType={item.type}
-          id={item.name}
           label={item.name}
           type="target"
           position={Position.Left}

diff --git a/src/components/NodeComponent/NodeOutpus.tsx b/src/components/NodeComponent/NodeOutpus.tsx
@@ -12,15 +12,7 @@ const NodeOutpus: React.FC<NodeOutpusProps> = ({ data }) => {
   return (
     <SpaceCol>
       {data.map((item) => (
-        <NodeSlot
-          key={item}
-          slotType={item}
-          id={item}
-          label={item}
-          type="source"
-          position={Position.Right}
-          isRequired={true}
-        />
+        <NodeSlot key={item} slotType={item} label={item} type="source" position={Position.Right} isRequired={true} />
       ))}
     </SpaceCol>
   )

diff --git a/src/components/NodeComponent/NodeParams.tsx b/src/components/NodeComponent/NodeParams.tsx
@@ -15,18 +15,12 @@ interface NodeParamsProps {
 
 const NodeParams: React.FC<NodeParamsProps> = ({ data, nodeId }) => {
   if (!data || data.length === 0) return null
+
   return (
     <div>
       {data.map((item) => (
         <div key={item.name}>
-          <NodeSlot
-            slotType={item.type}
-            id={item.name}
-            label={item.name}
-            type="target"
-            position={Position.Left}
-            isRequired={false}
-          />
+          <NodeSlot slotType={item.type} label={item.name} type="target" position={Position.Left} isRequired={false} />
           <InputContainer name={item.name} id={nodeId} input={item.input} />
           <div style={{ height: 4 }} />
         </div>

diff --git a/src/components/NodeComponent/NodeSlot.tsx b/src/components/NodeComponent/NodeSlot.tsx
@@ -1,10 +1,9 @@
-import { startCase } from 'lodash-es'
+import { isArray, startCase } from 'lodash-es'
 import React from 'react'
 import { Handle, HandleType, Position } from 'reactflow'
 import { Slot } from './style'
 
 interface NodeSlotProps {
-  id: string
   label: string
   type: HandleType
   position: Position
@@ -13,11 +12,13 @@ interface NodeSlotProps {
   isRequired?: boolean
 }
 
-const NodeSlot: React.FC<NodeSlotProps> = ({ id, label, type, position, slotType, isRequired }) => {
+const NodeSlot: React.FC<NodeSlotProps> = ({ label, type, position, slotType, isRequired }) => {
+  let id = slotType
+  if (isArray(slotType)) id = 'STRING'
   return (
     <Slot position={position} isRequired={isRequired ? 1 : 0}>
-      <Handle id={id} type={type} position={position} />
-      <h5 title={slotType} style={{ marginBottom: 2 }}>
+      <Handle id={label} type={type} position={position} />
+      <h5 title={id} style={{ marginBottom: 2 }}>
         {startCase(label.toLowerCase())}
       </h5>
     </Slot>

diff --git a/src/components/NodeComponent/SliderInput.tsx b/src/components/NodeComponent/SliderInput.tsx
@@ -23,18 +23,27 @@ export const IntegerStep: React.FC<IntegerStepProps> = ({ value, min, max, style
   const [inputValue, setInputValue] = useState<number>(value)
 
   const handleChange = (newValue: number | any) => {
-    if (newValue !== null) {
-      setInputValue(newValue)
-      onChange(newValue)
+    const val = Number(newValue?.target?.value ? newValue.target.value : newValue)
+    if (val !== null) {
+      setInputValue(val)
+      onChange(val)
     }
   }
 
-  if (max > 10000) return <InputNumber style={style} min={min} max={max} value={value} onChange={onChange} />
+  if (max > 10000)
+    return <InputNumber style={style} min={min} max={max} value={value} onBlur={onChange} onPressEnter={onChange} />
 
   return (
     <Row style={style}>
       <Col span={4} style={{ marginRight: 12 }}>
-        <InputNumber style={{ width: '100%' }} min={min} max={max} value={inputValue} onChange={handleChange} />
+        <InputNumber
+          style={{ width: '100%' }}
+          min={min}
+          max={max}
+          value={inputValue}
+          onBlur={handleChange}
+          onPressEnter={handleChange}
+        />
       </Col>
       <Col span={8}>
         <Slider min={min} max={max} onChange={handleChange} value={typeof inputValue === 'number' ? inputValue : 0} />
@@ -56,14 +65,25 @@ export const DecimalStep: React.FC<DecimalStepProps> = ({ value, min, max, step,
   const [inputValue, setInputValue] = useState<number>(value)
 
   const handleChange = (newValue: number | any) => {
-    if (newValue !== null) {
-      setInputValue(newValue)
-      onChange(newValue)
+    const val = Number(newValue?.target?.value ? newValue.target.value : newValue)
+    if (val !== null) {
+      setInputValue(val)
+      onChange(val)
     }
   }
 
   if (max > 10000)
-    return <InputNumber style={style} min={min} max={max} value={value} step={step} onChange={onChange} />
+    return (
+      <InputNumber
+        style={style}
+        min={min}
+        max={max}
+        value={value}
+        step={step}
+        onBlur={onChange}
+        onPressEnter={onChange}
+      />
+    )
 
   return (
     <Row style={style}>
@@ -74,7 +94,8 @@ export const DecimalStep: React.FC<DecimalStepProps> = ({ value, min, max, step,
           max={max}
           step={step}
           value={inputValue}
-          onChange={handleChange}
+          onBlur={handleChange}
+          onPressEnter={handleChange}
         />
       </Col>
       <Col span={8}>

diff --git a/src/components/NodeComponent/index.tsx b/src/components/NodeComponent/index.tsx
@@ -26,10 +26,10 @@ interface NodeComponentProps {
   node: NodeProps<Widget>
   progressBar?: number
   imagePreviews?: ImagePreview[]
-  onPreviewImage: (idx: number) => void
   onDuplicateNode: (id: NodeId) => void
   onDeleteNode: (id: NodeId) => void
   onModifyChange: OnPropChange
+  getNodeFieldsData: (id: NodeId, key: string) => void
 }
 
 const NodeComponent: React.FC<NodeComponentProps> = ({
@@ -38,12 +38,19 @@ const NodeComponent: React.FC<NodeComponentProps> = ({
   imagePreviews,
   onDuplicateNode,
   onModifyChange,
+  getNodeFieldsData,
 }) => {
   const theme = useTheme()
   const [nicknameInput, setNicknameInput] = useState<boolean>(false)
+
   const params: any[] = []
   const inputs: any[] = []
   const outputs: any[] = node.data.output
+  const isInProgress = progressBar !== undefined
+  const isSelected = node.selected
+  const inputImg: any = getNodeFieldsData(node.id, 'image')
+  const name = node.data?.nickname || node.data.name
+
   for (const [property, input] of Object.entries(node.data.input.required)) {
     if (checkInput.isParameterOrList(input)) {
       params.push({ name: property, type: input[0], input })
@@ -52,11 +59,6 @@ const NodeComponent: React.FC<NodeComponentProps> = ({
     }
   }
 
-  const isInProgress = progressBar !== undefined
-  const isSelected = node.selected
-
-  const name = node.data?.nickname || node.data.name
-
   const handleNickname = (e: any) => {
     const nickname = e.target.value
     onModifyChange(node.id, 'nickname', nickname)
@@ -106,7 +108,20 @@ const NodeComponent: React.FC<NodeComponentProps> = ({
         <NodeOutpus data={outputs} />
       </SpaceGrid>
       <NodeParams data={params} nodeId={node.id} />
-      <NodeImgPreview data={imagePreviews} />
+      <NodeImgPreview
+        data={
+          imagePreviews ||
+          (inputImg && [
+            {
+              image: {
+                filename: inputImg,
+                type: 'input',
+              },
+              index: 0,
+            },
+          ])
+        }
+      />
       {isSelected && <NodeResizeControl />}
     </NodeCard>
   )