chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: React Flow migration for flow editor canvas #82

Merged
chihlasm merged 19 commits from feat/react-flow-canvas into main 2026-02-19 05:43:34 +00:00
Conversation 1 Commits 19 Files Changed 15 +21 -14
2 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c05e22dc6d - Show all commits

4
frontend/src/components/tree-editor/FlowCanvas.tsx
View File

@@ -136,9 +136,9 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType }: F
nodesDraggable={false}
nodesConnectable={false}
proOptions={{ hideAttribution: true }}
className="bg-background"
className="bg-accent/30"
>
<Background variant={BackgroundVariant.Dots} gap={24} size={1} color="hsl(var(--border))" />
<Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
<Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />
{minimapVisible && (
<MiniMap

31
frontend/src/index.css
View File

@@ -318,30 +318,37 @@
/* React Flow dark theme overrides */
.react-flow__background {
background-color: hsl(var(--background));
background-color: transparent !important;
}
.react-flow__controls {
background-color: hsl(var(--card));
border-color: hsl(var(--border));
border-radius: 0.75rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
background-color: hsl(var(--card)) !important;
border: 1px solid hsl(var(--border)) !important;
border-radius: 0.75rem !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
overflow: hidden;
}
.react-flow__controls-button {
background-color: hsl(var(--card));
border-color: hsl(var(--border));
fill: hsl(var(--muted-foreground));
background-color: hsl(var(--card)) !important;
border-color: hsl(var(--border)) !important;
fill: hsl(var(--muted-foreground)) !important;
color: hsl(var(--muted-foreground)) !important;
}
.react-flow__controls-button:hover {
background-color: hsl(var(--accent));
background-color: hsl(var(--accent)) !important;
fill: hsl(var(--foreground)) !important;
}
.react-flow__controls-button svg {
fill: inherit !important;
}
.react-flow__minimap {
background-color: hsl(var(--card));
border-color: hsl(var(--border));
border-radius: 0.75rem;
background-color: hsl(var(--card)) !important;
border: 1px solid hsl(var(--border)) !important;
border-radius: 0.75rem !important;
}
.react-flow__edge-path {