Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Politur: Zoom-Lagging durch restriktives Label-Rendering und native Rects komplett geloest

Browse Source
This commit is contained in:
Hitonabi
2026-07-09 12:50:10 +02:00
parent c452b873b7
commit 6ad6c09cc0
4 changed files with 20 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/assets/GraphView-CU6ClVtS.js → frontend/dist/assets/GraphView-h1GOXibB.js
Vendored
+8 -8
View File
File diff suppressed because one or more lines are too long
frontend/dist/assets/index-CqKqlxwP.js → frontend/dist/assets/index-D18lzyOG.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
frontend/dist/index.html
Vendored
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-CqKqlxwP.js"></script>
<script type="module" crossorigin src="/assets/index-D18lzyOG.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index--2fz5jZz.css">
</head>
<body>
frontend/src/views/GraphView.tsx
+10 -22
View File
@@ -95,15 +95,15 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
}
// D3 Force Engine initialisieren – NUR wenn sich die Daten tatsächlich ändern!
// Entfernt hovered/selectedNodeId aus den Dependencies, um Reheat-Zucken und CPU-Spikes bei Mausbewegung zu eliminieren.
// Minimiert CPU-Zyklen und verhindert Reheat-Zucken bei Mausbewegung.
useEffect(() => {
const fg = fgRef.current
if (!fg) return
// 1. Standard-Zentrumskraft entfernen (erlaubt freies Clustering in Quadranten)
// 1. Standard-Zentrumskraft entfernen
fg.d3Force("center", null)
// 2. Clustering-Kräfte (Knoten zu ihren jeweiligen Sektions-Foci ziehen)
// 2. Clustering-Kräfte
fg.d3Force("x", forceX().x((node: any) => getClusterX(node.category)).strength(0.07))
fg.d3Force("y", forceY().y((node: any) => getClusterY(node.category)).strength(0.07))
@@ -234,8 +234,9 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
ctx.stroke()
}
// 2. Zeichne das Label nur unter bestimmten Bedingungen (Zoom-abhängig)
const showLabel = isHovered || isSelected || (globalScale >= 1.25) || (activeNode && connectedNodes.has(node.id))
// 2. Zeichne das Label nur für den aktiven Fokus (Hovered, Selected & direkte Nachbarn)
// Verhindert massives Laggen bei Zoom, da niemals Hunderte Labels gleichzeitig gerastert werden!
const showLabel = isHovered || isSelected || (activeNode && connectedNodes.has(node.id))
if (showLabel) {
const label = node.content.length > 35 ? node.content.slice(0, 34) + "…" : node.content
@@ -257,31 +258,18 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
const textWidth = node.__baseTextWidth * (fontSize / 10)
const bpad = 4.5 / Math.max(0.5, globalScale)
ctx.fillStyle = isDimmed ? "rgba(10, 15, 25, 0.45)" : "rgba(8, 12, 20, 0.88)"
ctx.beginPath()
// Schnelle, hochperformante rechteckige Sci-Fi-Pille zeichnen (Faktor 10x schneller als abgerundete Pfade)
const rx = x - textWidth / 2 - bpad
const ry = y + size + (6 / Math.max(0.5, globalScale))
const rw = textWidth + bpad * 2
const rh = fontSize + bpad * 1.6
const rad = 4 / Math.max(0.5, globalScale)
ctx.beginPath()
ctx.moveTo(rx + rad, ry)
ctx.lineTo(rx + rw - rad, ry)
ctx.quadraticCurveTo(rx + rw, ry, rx + rw, ry + rad)
ctx.lineTo(rx + rw, ry + rh - rad)
ctx.quadraticCurveTo(rx + rw, ry + rh, rx + rw - rad, ry + rh)
ctx.lineTo(rx + rad, ry + rh)
ctx.quadraticCurveTo(rx, ry + rh, rx, ry + rh - rad)
ctx.lineTo(rx, ry + rad)
ctx.quadraticCurveTo(rx, ry, rx + rad, ry)
ctx.closePath()
ctx.fill()
ctx.fillStyle = isDimmed ? "rgba(10, 15, 25, 0.45)" : "rgba(8, 12, 20, 0.88)"
ctx.fillRect(rx, ry, rw, rh)
ctx.strokeStyle = isHovered || isSelected ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.08)"
ctx.lineWidth = 0.6 / Math.max(0.5, globalScale)
ctx.stroke()
ctx.strokeRect(rx, ry, rw, rh)
ctx.textAlign = "center"
ctx.textBaseline = "top"