Politur: nodePointerAreaPaint fuer pixelgenaues Hovern und Klicken im Graphen implementiert

This commit is contained in:
Hitonabi
2026-07-09 12:37:58 +02:00
parent 64f45ed0ff
commit 103b277643
4 changed files with 18 additions and 12 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title> <title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-y2RCBnMu.js"></script> <script type="module" crossorigin src="/assets/index-C6kUDd9F.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index--2fz5jZz.css"> <link rel="stylesheet" crossorigin href="/assets/index--2fz5jZz.css">
</head> </head>
<body> <body>
+9 -3
View File
@@ -154,9 +154,15 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
backgroundColor="rgba(0,0,0,0)" backgroundColor="rgba(0,0,0,0)"
cooldownTicks={120} cooldownTicks={120}
// Hit-Detection an die gezeichnete Knotengröße anpassen // Exakte Hit-Map auf unsichtbarem Canvas zeichnen für 100% zuverlässiges Hovern und Klicken
nodeVal={(node: any) => { nodePointerAreaPaint={(node: any, color: string, ctx: CanvasRenderingContext2D) => {
return 6 + Math.min(degree[node.id] || 0, 15) * 0.8 const x = node.x ?? 0
const y = node.y ?? 0
const size = 6 + Math.min(degree[node.id] || 0, 15) * 0.8
ctx.fillStyle = color
ctx.beginPath()
ctx.arc(x, y, size + 5, 0, 2 * Math.PI, false) // 5px Puffer für einfaches Treffen
ctx.fill()
}} }}
// Hover- und Klick-Logik // Hover- und Klick-Logik