Compare commits
2 Commits
33aa313f34
...
8556a80868
| Author | SHA1 | Date | |
|---|---|---|---|
| 8556a80868 | |||
| 84cc40b472 |
11
src/App.tsx
11
src/App.tsx
@@ -259,6 +259,15 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
// Disable canvas zoom when the cursor is over a node (scroll/pinch only zooms when over the pane)
|
||||||
|
const onWheelCapture = React.useCallback((ev: React.WheelEvent) => {
|
||||||
|
const target = ev.target as HTMLElement
|
||||||
|
if (target.closest('.react-flow__node')) {
|
||||||
|
ev.preventDefault()
|
||||||
|
ev.stopPropagation()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
const onCanvasContextMenu = React.useCallback((ev: React.MouseEvent) => {
|
const onCanvasContextMenu = React.useCallback((ev: React.MouseEvent) => {
|
||||||
ev.preventDefault()
|
ev.preventDefault()
|
||||||
const clientX = ev.clientX
|
const clientX = ev.clientX
|
||||||
@@ -381,7 +390,7 @@ export default function App() {
|
|||||||
<FlowContext.Provider value={flowContextValue}>
|
<FlowContext.Provider value={flowContextValue}>
|
||||||
<ContextMenu>
|
<ContextMenu>
|
||||||
<ContextMenuTrigger asChild>
|
<ContextMenuTrigger asChild>
|
||||||
<div className="flex-1 min-h-0 w-full">
|
<div className="flex-1 min-h-0 w-full" onWheelCapture={onWheelCapture}>
|
||||||
<ReactFlowProvider initialNodes={nodes} initialEdges={edges} fitView>
|
<ReactFlowProvider initialNodes={nodes} initialEdges={edges} fitView>
|
||||||
<ReactFlow
|
<ReactFlow
|
||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
|
|||||||
@@ -128,6 +128,38 @@ pre {
|
|||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Compact scrollbars that respect light/dark mode */
|
||||||
|
* {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
|
||||||
|
}
|
||||||
|
.dark * {
|
||||||
|
scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
|
||||||
|
}
|
||||||
|
*::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
*::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
*::-webkit-scrollbar-thumb {
|
||||||
|
background: hsl(var(--muted-foreground) / 0.35);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
*::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: hsl(var(--muted-foreground) / 0.5);
|
||||||
|
}
|
||||||
|
*::-webkit-scrollbar-corner {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.dark *::-webkit-scrollbar-thumb {
|
||||||
|
background: hsl(var(--muted-foreground) / 0.4);
|
||||||
|
}
|
||||||
|
.dark *::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: hsl(var(--muted-foreground) / 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
--background: 0 0% 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user