fix comment cursor icon

This commit is contained in:
hjlarry 2025-09-14 12:50:18 +08:00
parent 75257232c3
commit 9f2927979b
3 changed files with 14 additions and 3 deletions

View File

@ -1,7 +1,6 @@
import type { FC } from 'react'
import { memo, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { RiMessage3Line } from '@remixicon/react'
import { useStore } from '../store'
import { ControlMode } from '../types'
import type { WorkflowComment } from '@/service/workflow-comment'
@ -18,14 +17,17 @@ export const CommentCursor: FC<CommentCursorProps> = memo(({ mousePosition }) =>
return (
<div
className="pointer-events-none absolute z-50 flex h-6 w-6 items-center justify-center rounded bg-blue-500 text-white shadow-lg"
className="pointer-events-none absolute z-50 flex h-6 w-6 items-center justify-center"
style={{
left: mousePosition.elementX - 3,
top: mousePosition.elementY - 3,
transform: 'translate(-50%, -50%)',
}}
>
<RiMessage3Line className="h-4 w-4" />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10.5 6.33325H5.5H10.5ZM8 9.66658H5.5H8ZM0.5 14.6666H11.3333C13.6345 14.6666 15.5 12.8011 15.5 10.4999V5.49992C15.5 3.19874 13.6345 1.33325 11.3333 1.33325H4.66667C2.36548 1.33325 0.5 3.19874 0.5 5.49992V14.6666Z" fill="white"/>
<path d="M10.5 6.33325H5.5M8 9.66658H5.5M0.5 14.6666H11.3333C13.6345 14.6666 15.5 12.8011 15.5 10.4999V5.49992C15.5 3.19874 13.6345 1.33325 11.3333 1.33325H4.66667C2.36548 1.33325 0.5 3.19874 0.5 5.49992V14.6666Z" stroke="black"/>
</svg>
</div>
)
})

View File

@ -358,6 +358,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
edgeTypes={edgeTypes}
nodes={nodes}
edges={edges}
className={controlMode === ControlMode.Comment ? 'comment-mode-flow' : ''}
onNodeDragStart={handleNodeDragStart}
onNodeDrag={handleNodeDrag}
onNodeDragStop={handleNodeDragStop}

View File

@ -6,6 +6,14 @@
transition: transform 0.2s ease-in-out;
}
/* Comment mode cursor override */
.comment-mode-flow,
.comment-mode-flow .react-flow__pane,
.comment-mode-flow .react-flow__viewport,
.comment-mode-flow * {
cursor: none !important;
}
#workflow-container .react-flow__nodesselection-rect {
border: 1px solid #528BFF;
background: rgba(21, 94, 239, 0.05);