feat(workflow): add selection context menu helpers and integrate with context menu component (#34013)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: lif <1835304752@qq.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: Stephen Zhou <hi@hyoban.cc>
Co-authored-by: tmimmanuel <14046872+tmimmanuel@users.noreply.github.com>
Co-authored-by: Desel72 <pedroluiscolmenares722@gmail.com>
Co-authored-by: Renzo <170978465+RenzoMXD@users.noreply.github.com>
Co-authored-by: Krishna Chaitanya <krishnabkc15@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/workflow/help-line/__tests__/index.spec.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react'
+import HelpLine from '../index'
+
+const mockUseViewport = vi.hoisted(() => vi.fn())
+const mockUseStore = vi.hoisted(() => vi.fn())
+
+vi.mock('reactflow', () => ({
+  useViewport: () => mockUseViewport(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: {
+    helpLineHorizontal?: { top: number, left: number, width: number }
+    helpLineVertical?: { top: number, left: number, height: number }
+  }) => unknown) => mockUseStore(selector),
+}))
+
+describe('HelpLine', () => {
+  let helpLineHorizontal: { top: number, left: number, width: number } | undefined
+  let helpLineVertical: { top: number, left: number, height: number } | undefined
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    helpLineHorizontal = undefined
+    helpLineVertical = undefined
+
+    mockUseViewport.mockReturnValue({ x: 10, y: 20, zoom: 2 })
+    mockUseStore.mockImplementation((selector: (state: {
+      helpLineHorizontal?: { top: number, left: number, width: number }
+      helpLineVertical?: { top: number, left: number, height: number }
+    }) => unknown) => selector({
+      helpLineHorizontal,
+      helpLineVertical,
+    }))
+  })
+
+  it('should render nothing when both help lines are absent', () => {
+    const { container } = render(<HelpLine />)
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render the horizontal and vertical guide lines using viewport offsets and zoom', () => {
+    helpLineHorizontal = { top: 30, left: 40, width: 50 }
+    helpLineVertical = { top: 60, left: 70, height: 80 }
+
+    const { container } = render(<HelpLine />)
+    const [horizontal, vertical] = Array.from(container.querySelectorAll('div'))
+
+    expect(horizontal).toHaveStyle({
+      top: '80px',
+      left: '90px',
+      width: '100px',
+    })
+    expect(vertical).toHaveStyle({
+      top: '140px',
+      left: '150px',
+      height: '160px',
+    })
+  })
+})