can't zoomOnPinch when mouse over comment preview

web/app/components/workflow/comment/comment-preview.tsx

@@ -1,10 +1,11 @@
 'use client'
 
 import type { FC } from 'react'
-import { memo, useMemo } from 'react'
+import { memo, useEffect, useMemo } from 'react'
 import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import type { WorkflowCommentList } from '@/service/workflow-comment'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useStore } from '../store'
 
 type CommentPreviewProps = {
   comment: WorkflowCommentList
@@ -13,6 +14,7 @@ type CommentPreviewProps = {
 
 const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
   const { formatTimeFromNow } = useFormatTimeFromNow()
+  const setCommentPreviewHovering = useStore(s => s.setCommentPreviewHovering)
   const participants = useMemo(() => {
     const list = comment.participants ?? []
     const author = comment.created_by_account
@@ -21,11 +23,16 @@ const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
     const rest = list.filter(user => user.id !== author.id)
     return [author, ...rest]
   }, [comment.created_by_account, comment.participants])
+  useEffect(() => () => {
+    setCommentPreviewHovering(false)
+  }, [setCommentPreviewHovering])
 
   return (
     <div
       className="w-80 cursor-pointer rounded-3xl rounded-bl-[3px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4 shadow-lg backdrop-blur-[10px] transition-colors hover:bg-components-panel-on-panel-item-bg-hover"
       onClick={onClick}
+      onMouseEnter={() => setCommentPreviewHovering(true)}
+      onMouseLeave={() => setCommentPreviewHovering(false)}
     >
       <div className="mb-3 flex items-center justify-between">
         <UserAvatarList

web/app/components/workflow/index.tsx

@@ -209,6 +209,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
   } = useWorkflowComment()
   const showUserComments = useStore(s => s.showUserComments)
   const showUserCursors = useStore(s => s.showUserCursors)
+  const isCommentPreviewHovering = useStore(s => s.isCommentPreviewHovering)
   const { t } = useTranslation()
 
   eventEmitter?.useSubscription((v: any) => {
@@ -535,7 +536,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
         edgesFocusable={!nodesReadOnly}
         panOnScroll={false}
         panOnDrag={controlMode === ControlMode.Hand}
-        zoomOnPinch={true}
+        zoomOnPinch={!isCommentPreviewHovering}
         zoomOnScroll={true}
         zoomOnDoubleClick={true}
         isValidConnection={isValidConnection}

web/app/components/workflow/store/workflow/workflow-slice.ts

@@ -32,6 +32,8 @@ export type WorkflowSliceShape = {
   setPendingComment: (pendingComment: WorkflowSliceShape['pendingComment']) => void
   mousePosition: MousePosition
   setMousePosition: (mousePosition: WorkflowSliceShape['mousePosition']) => void
+  isCommentPreviewHovering: boolean
+  setCommentPreviewHovering: (hovering: boolean) => void
   showConfirm?: { title: string; desc?: string; onConfirm: () => void }
   setShowConfirm: (showConfirm: WorkflowSliceShape['showConfirm']) => void
   controlPromptEditorRerenderKey: number
@@ -66,6 +68,8 @@ export const createWorkflowSlice: StateCreator<WorkflowSliceShape> = set => ({
   setPendingComment: pendingComment => set(() => ({ pendingComment })),
   mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
   setMousePosition: mousePosition => set(() => ({ mousePosition })),
+  isCommentPreviewHovering: false,
+  setCommentPreviewHovering: hovering => set(() => ({ isCommentPreviewHovering: hovering })),
   showConfirm: undefined,
   setShowConfirm: showConfirm => set(() => ({ showConfirm })),
   controlPromptEditorRerenderKey: 0,