Fix connection design (#14070)

- refactor edges related files into sub-module
- remove top handle from workflow, workflowVersion and workflowRun
- add a custom design for connection (edge being created)
- connect when hovering a connectable node
- fix marker z-index
- refactor Handles

## Before


https://github.com/user-attachments/assets/013dec36-5cc7-4561-938c-404511118578

<img width="934" height="409" alt="image"
src="https://github.com/user-attachments/assets/2b43c6cb-0bf3-4110-b1cc-b2e50c15c9a8"
/>



## After


https://github.com/user-attachments/assets/a5b32cbf-bfbd-48e6-9889-037234adf38f

<img width="1433" height="599" alt="image"
src="https://github.com/user-attachments/assets/02edc085-9b23-4434-b666-bf25e5c430a8"
/>
This commit is contained in:
martmull
2025-08-26 16:33:39 +02:00
committed by GitHub
parent 750dfcfc3b
commit 0f347e2f42
42 changed files with 359 additions and 323 deletions
@@ -10,7 +10,7 @@ import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/pa
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId';
import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/workflow-edges/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
import { useTheme } from '@emotion/react';