From 3c5781c9473ecd7ab7f7b272a339a60ac6d67c49 Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Sat, 8 Oct 2022 21:41:26 +0800
Subject: [PATCH] allow ctrl+v to paste image to editor

---
 lama_cleaner/app/src/App.tsx                  | 42 +++++++++++++++++--
 .../src/components/SidePanel/SidePanel.tsx    |  4 +-
 lama_cleaner/app/src/components/Workspace.tsx | 11 ++++-
 .../app/src/components/shared/Input.tsx       |  1 +
 4 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/lama_cleaner/app/src/App.tsx b/lama_cleaner/app/src/App.tsx
index 445f2fb..1ac717b 100644
--- a/lama_cleaner/app/src/App.tsx
+++ b/lama_cleaner/app/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { nanoid } from 'nanoid'
 import useInputImage from './hooks/useInputImage'
@@ -26,6 +26,8 @@ function App() {
   const [theme, setTheme] = useRecoilState(themeState)
   const [toastVal, setToastState] = useRecoilState(toastState)
   const userInputImage = useInputImage()
+  const [openPasteImageAlertDialog, setOpenPasteImageAlertDialog] =
+    useState(false)
 
   // Set Input Image
   useEffect(() => {
@@ -60,6 +62,7 @@ function App() {
     event.preventDefault()
     event.stopPropagation()
   }, [])
+
   const handleDragIn = React.useCallback(event => {
     event.preventDefault()
     event.stopPropagation()
@@ -68,6 +71,7 @@ function App() {
       setIsDragging(true)
     }
   }, [])
+
   const handleDragOut = React.useCallback(event => {
     event.preventDefault()
     event.stopPropagation()
@@ -75,6 +79,7 @@ function App() {
     if (dragCounter.current > 0) return
     setIsDragging(false)
   }, [])
+
   const handleDrop = React.useCallback(event => {
     event.preventDefault()
     event.stopPropagation()
@@ -105,21 +110,52 @@ function App() {
     }
   }, [])
 
+  const onPaste = useCallback((event: any) => {
+    // TODO: when sd side panel open, ctrl+v not work
+    // https://htmldom.dev/paste-an-image-from-the-clipboard/
+    if (!event.clipboardData) {
+      return
+    }
+    const clipboardItems = event.clipboardData.items
+    const items: DataTransferItem[] = [].slice
+      .call(clipboardItems)
+      .filter((item: DataTransferItem) => {
+        // Filter the image items only
+        return item.type.indexOf('image') !== -1
+      })
+
+    if (items.length === 0) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    // TODO: add confirm dialog
+
+    const item = items[0]
+    // Get the blob of image
+    const blob = item.getAsFile()
+    if (blob) {
+      setFile(blob)
+    }
+  }, [])
+
   React.useEffect(() => {
     window.addEventListener('dragenter', handleDragIn)
     window.addEventListener('dragleave', handleDragOut)
     window.addEventListener('dragover', handleDrag)
     window.addEventListener('drop', handleDrop)
+    window.addEventListener('paste', onPaste)
     return function cleanUp() {
       window.removeEventListener('dragenter', handleDragIn)
       window.removeEventListener('dragleave', handleDragOut)
       window.removeEventListener('dragover', handleDrag)
       window.removeEventListener('drop', handleDrop)
+      window.removeEventListener('paste', onPaste)
     }
   })
 
-  ///
-
   return (
     <div className="lama-cleaner">
       <Header />
diff --git a/lama_cleaner/app/src/components/SidePanel/SidePanel.tsx b/lama_cleaner/app/src/components/SidePanel/SidePanel.tsx
index a2faa18..c050e3b 100644
--- a/lama_cleaner/app/src/components/SidePanel/SidePanel.tsx
+++ b/lama_cleaner/app/src/components/SidePanel/SidePanel.tsx
@@ -22,12 +22,12 @@ const SidePanel = () => {
           className="btn-primary side-panel-trigger"
           onClick={() => toggleOpen()}
         >
-          Stable Diffusion
+          Configurations
         </PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
           <PopoverPrimitive.Content className="side-panel-content">
             <SettingBlock
-              title="Show Croper"
+              title="Croper"
               input={
                 <Switch
                   checked={setting.showCroper}
diff --git a/lama_cleaner/app/src/components/Workspace.tsx b/lama_cleaner/app/src/components/Workspace.tsx
index 246dd6b..8f1d834 100644
--- a/lama_cleaner/app/src/components/Workspace.tsx
+++ b/lama_cleaner/app/src/components/Workspace.tsx
@@ -1,10 +1,16 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import Editor from './Editor/Editor'
 import ShortcutsModal from './Shortcuts/ShortcutsModal'
 import SettingModal from './Settings/SettingsModal'
 import Toast from './shared/Toast'
-import { AIModel, isSDState, settingState, toastState } from '../store/Atoms'
+import {
+  AIModel,
+  fileState,
+  isSDState,
+  settingState,
+  toastState,
+} from '../store/Atoms'
 import {
   currentModel,
   modelDownloaded,
@@ -13,6 +19,7 @@ import {
 import SidePanel from './SidePanel/SidePanel'
 
 const Workspace = () => {
+  const [file, setFile] = useRecoilState(fileState)
   const [settings, setSettingState] = useRecoilState(settingState)
   const [toastVal, setToastState] = useRecoilState(toastState)
   const isSD = useRecoilValue(isSDState)
diff --git a/lama_cleaner/app/src/components/shared/Input.tsx b/lama_cleaner/app/src/components/shared/Input.tsx
index ba0e30e..1537748 100644
--- a/lama_cleaner/app/src/components/shared/Input.tsx
+++ b/lama_cleaner/app/src/components/shared/Input.tsx
@@ -31,6 +31,7 @@ const TextInput = React.forwardRef<
       type="text"
       onFocus={handleOnFocus}
       onBlur={handleOnBlur}
+      onPaste={evt => evt.stopPropagation()}
       onKeyDown={e => {
         if (e.key === 'Escape') {
           e.currentTarget.blur()