From c807d098192575a53f88fcdb49fdda0932f06c26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?=
 <37972689+YangGuoXuan-0503@users.noreply.github.com>
Date: Thu, 26 Dec 2024 17:25:46 +0800
Subject: [PATCH] fix: image context path (#7262)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: image context path

* feat: update code

* feat: optimize code style

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
---
 .../src/metadata/components/context-menu/index.js    |  7 ++++++-
 .../src/metadata/views/gallery/context-menu/index.js | 12 +++++-------
 frontend/src/metadata/views/gallery/main.js          |  1 -
 frontend/src/metadata/views/kanban/boards/index.js   |  1 -
 .../src/metadata/views/kanban/context-menu/index.js  |  4 +---
 frontend/src/metadata/views/kanban/index.js          |  2 +-
 frontend/src/metadata/views/table/index.css          |  3 +++
 frontend/src/metadata/views/table/index.js           |  2 +-
 8 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/src/metadata/components/context-menu/index.js b/frontend/src/metadata/components/context-menu/index.js
index f2c38f983da..b2a99abbd33 100644
--- a/frontend/src/metadata/components/context-menu/index.js
+++ b/frontend/src/metadata/components/context-menu/index.js
@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 
 import './index.css';
 
-const ContextMenu = ({ options, boundaryCoordinates, onOptionClick, ignoredTriggerElements }) => {
+const ContextMenu = ({
+  options,
+  boundaryCoordinates = { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0 },
+  onOptionClick,
+  ignoredTriggerElements
+}) => {
   const menuRef = useRef(null);
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
diff --git a/frontend/src/metadata/views/gallery/context-menu/index.js b/frontend/src/metadata/views/gallery/context-menu/index.js
index 1af18ab7586..f2490ba44f3 100644
--- a/frontend/src/metadata/views/gallery/context-menu/index.js
+++ b/frontend/src/metadata/views/gallery/context-menu/index.js
@@ -19,7 +19,7 @@ const CONTEXT_MENU_KEY = {
   REMOVE: 'remove',
 };
 
-const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onDelete, onDuplicate, addFolder, onRemoveImage }) => {
+const GalleryContextMenu = ({ metadata, selectedImages, onDelete, onDuplicate, addFolder, onRemoveImage }) => {
   const [isZipDialogOpen, setIsZipDialogOpen] = useState(false);
   const [isCopyDialogOpen, setIsCopyDialogOpen] = useState(false);
 
@@ -68,7 +68,7 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
       return;
     }
     const dirents = selectedImages.map(image => {
-      const value = image.path === '/' ? image.name : `${image.path}/${image.name}`;
+      const value = image.parentDir === '/' ? image.name : `${image.parentDir}/${image.name}`;
       return value;
     });
     metadataAPI.zipDownload(repoID, '/', dirents).then((res) => {
@@ -100,13 +100,12 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
   }, [handleDownload, onDelete, selectedImages, toggleCopyDialog, onRemoveImage]);
 
   const dirent = new Dirent({ name: selectedImages[0]?.name });
-  const path = selectedImages[0]?.path;
+  const parentDir = selectedImages[0]?.parentDir;
 
   return (
     <>
       <ContextMenu
         options={options}
-        boundaryCoordinates={boundaryCoordinates}
         ignoredTriggerElements={['.metadata-gallery-image-item', '.metadata-gallery-grid-image']}
         onOptionClick={handleOptionClick}
       />
@@ -115,7 +114,7 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
           <ZipDownloadDialog
             repoID={repoID}
             path="/"
-            target={selectedImages.map(image => image.path === '/' ? image.name : `${image.path}/${image.name}`)}
+            target={selectedImages.map(image => image.parentDir === '/' ? image.name : `${image.parentDir}/${image.name}`)}
             toggleDialog={closeZipDialog}
           />
         </ModalPortal>
@@ -123,7 +122,7 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
       {isCopyDialogOpen && (
         <ModalPortal>
           <CopyDirent
-            path={path}
+            path={parentDir}
             repoID={repoID}
             dirent={dirent}
             isMultipleOperation={false}
@@ -141,7 +140,6 @@ const GalleryContextMenu = ({ metadata, selectedImages, boundaryCoordinates, onD
 GalleryContextMenu.propTypes = {
   metadata: PropTypes.object,
   selectedImages: PropTypes.array,
-  boundaryCoordinates: PropTypes.object,
   onDelete: PropTypes.func,
   onDuplicate: PropTypes.func,
   addFolder: PropTypes.func,
diff --git a/frontend/src/metadata/views/gallery/main.js b/frontend/src/metadata/views/gallery/main.js
index 0d6b98e6e59..a1698e75567 100644
--- a/frontend/src/metadata/views/gallery/main.js
+++ b/frontend/src/metadata/views/gallery/main.js
@@ -374,7 +374,6 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
       <GalleryContextmenu
         metadata={metadata}
         selectedImages={selectedImages}
-        boundaryCoordinates={containerRef?.current?.getBoundingClientRect() || {}}
         onDelete={handleDeleteSelectedImages}
         onDuplicate={duplicateRecord}
         addFolder={onAddFolder}
diff --git a/frontend/src/metadata/views/kanban/boards/index.js b/frontend/src/metadata/views/kanban/boards/index.js
index 5bb11f55e72..c0bb42dee34 100644
--- a/frontend/src/metadata/views/kanban/boards/index.js
+++ b/frontend/src/metadata/views/kanban/boards/index.js
@@ -307,7 +307,6 @@ const Boards = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSettings
         </div>
       </div>
       <ContextMenu
-        boundaryCoordinates={{ top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0 }}
         selectedCard={selectedCard}
         onDelete={onDeleteRecords}
         onRename={onRename}
diff --git a/frontend/src/metadata/views/kanban/context-menu/index.js b/frontend/src/metadata/views/kanban/context-menu/index.js
index 9e92ef450d6..814add3ddd9 100644
--- a/frontend/src/metadata/views/kanban/context-menu/index.js
+++ b/frontend/src/metadata/views/kanban/context-menu/index.js
@@ -23,7 +23,7 @@ const CONTEXT_MENU_KEY = {
   RENAME: 'rename',
 };
 
-const KanbanContextMenu = ({ boundaryCoordinates, selectedCard, onDelete, onRename }) => {
+const KanbanContextMenu = ({ selectedCard, onDelete, onRename }) => {
   const [isRenameDialogShow, setIsRenameDialogShow] = useState(false);
   const [isZipDialogOpen, setIsZipDialogOpen] = useState(false);
 
@@ -130,7 +130,6 @@ const KanbanContextMenu = ({ boundaryCoordinates, selectedCard, onDelete, onRena
     <>
       <ContextMenu
         options={options}
-        boundaryCoordinates={boundaryCoordinates}
         onOptionClick={handleOptionClick}
         ignoredTriggerElements={['.sf-metadata-kanban-card']}
       />
@@ -154,7 +153,6 @@ const KanbanContextMenu = ({ boundaryCoordinates, selectedCard, onDelete, onRena
 };
 
 KanbanContextMenu.propTypes = {
-  boundaryCoordinates: PropTypes.object,
   selectedCard: PropTypes.string,
   onDelete: PropTypes.func,
   onRename: PropTypes.func,
diff --git a/frontend/src/metadata/views/kanban/index.js b/frontend/src/metadata/views/kanban/index.js
index cdac8be8213..042b5a33051 100644
--- a/frontend/src/metadata/views/kanban/index.js
+++ b/frontend/src/metadata/views/kanban/index.js
@@ -42,7 +42,7 @@ const Kanban = () => {
   }, [isShowSettings]);
 
   return (
-    <div className="sf-metadata-container sf-metadata-view-kanban-container">
+    <div className="sf-metadata-container">
       <div className="sf-metadata-view-kanban">
         <Boards
           modifyRecord={modifyRecord}
diff --git a/frontend/src/metadata/views/table/index.css b/frontend/src/metadata/views/table/index.css
index 309d5e25e49..2c808dc5db6 100644
--- a/frontend/src/metadata/views/table/index.css
+++ b/frontend/src/metadata/views/table/index.css
@@ -424,6 +424,9 @@
   height: 100%;
   width: 100%;
   overflow: hidden;
+}
+
+.sf-metadata-wrapper .sf-metadata-main .sf-metadata-container-transform {
   transform: translateZ(10px);
 }
 
diff --git a/frontend/src/metadata/views/table/index.js b/frontend/src/metadata/views/table/index.js
index b4af4e3b987..0a34e034102 100644
--- a/frontend/src/metadata/views/table/index.js
+++ b/frontend/src/metadata/views/table/index.js
@@ -151,7 +151,7 @@ const Table = () => {
   }, [containerRef]);
 
   return (
-    <div className="sf-metadata-container" ref={containerRef}>
+    <div className="sf-metadata-container sf-metadata-container-transform" ref={containerRef}>
       <TableMain
         isGroupView={isGroupView}
         isLoadingMore={isLoadingMore}