Skip to content

Commit af0960e

Browse files
grantiguessgrantiguess
committed
refactor: Streamline edge rendering logic in NodeCanvas and add debug logging for parallel edges and local storage.
1 parent 48224b9 commit af0960e

2 files changed

Lines changed: 49 additions & 79 deletions

File tree

‎src/NodeCanvas.jsx‎

Lines changed: 46 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1859,7 +1859,18 @@ function NodeCanvas() {
18591859
// Validate stored folder
18601860
const validationResult = await folderPersistence.validateStoredFolder();
18611861
const { valid, folderHandle } = validationResult;
1862-
console.log('[NodeCanvas Debug] Folder Validation Result:', validationResult);
1862+
console.log('[NodeCanvas Debug] Folder Validation Result:', JSON.stringify(validationResult));
1863+
1864+
// Dump all localStorage keys to see what is going on
1865+
if (typeof window !== 'undefined') {
1866+
const keys = Object.keys(localStorage).filter(k => k.includes('redstring'));
1867+
console.log('[NodeCanvas Debug] LocalStorage Keys:', keys);
1868+
keys.forEach(k => {
1869+
if (k.includes('redstring_workspace_folder_path')) {
1870+
console.log(`[NodeCanvas Debug] Key: ${k}, Value: ${localStorage.getItem(k)}`);
1871+
}
1872+
});
1873+
}
18631874

18641875
if (!valid || !folderHandle) {
18651876
console.log('[NodeCanvas] No valid stored folder found');
@@ -10610,6 +10621,11 @@ function NodeCanvas() {
1061010621
const parallelPath = calculateParallelEdgePath(startX, startY, endX, endY, curveInfo);
1061110622
const useCurve = parallelPath.type === 'curve';
1061210623

10624+
// DEBUG: Log edge rendering
10625+
if (curveInfo && curveInfo.totalInPair > 1) {
10626+
console.log('[NodeCanvas] Rendering edge:', edge.id, 'curveInfo:', curveInfo, 'parallelPath.ctrlY:', parallelPath.ctrlY);
10627+
}
10628+
1061310629
return (
1061410630
<g key={`edge-above-${edge.id}-${idx}`}>
1061510631
{/* Main edge line - always same thickness */}
@@ -11700,6 +11716,11 @@ function NodeCanvas() {
1170011716
const parallelPath = calculateParallelEdgePath(startX, startY, endX, endY, curveInfo);
1170111717
const useCurve = parallelPath.type === 'curve';
1170211718

11719+
// DEBUG: Log edge rendering
11720+
if (curveInfo && curveInfo.totalInPair > 1) {
11721+
console.log('[NodeCanvas] Rendering edge:', edge.id, 'curveInfo:', curveInfo, 'parallelPath.ctrlY:', parallelPath.ctrlY);
11722+
}
11723+
1170311724
return (
1170411725
<g key={`edge-above-${edge.id}-${idx}`}>
1170511726
{/* Main edge line - always same thickness */}
@@ -11770,55 +11791,26 @@ function NodeCanvas() {
1177011791
strokeLinecap="round"
1177111792
/>
1177211793
</>
11773-
) : (() => {
11774-
// Check if this edge needs curve offset (multiple edges between same nodes)
11775-
const curveInfo = edgeCurveInfo.get(edge.id);
11776-
if (curveInfo && curveInfo.totalInPair > 1) {
11777-
// Calculate curve offset for parallel edges
11778-
const { pairIndex, totalInPair } = curveInfo;
11779-
const curveSpacing = 100; // Pixels between parallel edge curves
11780-
// Alternating direction logic matching utils
11781-
const direction = pairIndex % 2 === 0 ? 1 : -1;
11782-
const offsetMagnitude = Math.floor((pairIndex + 1) / 2) * curveSpacing;
11783-
const perpOffset = direction * offsetMagnitude;
11784-
11785-
// Calculate perpendicular direction
11786-
const edgeDx = endX - startX;
11787-
const edgeDy = endY - startY;
11788-
const edgeLen = Math.sqrt(edgeDx * edgeDx + edgeDy * edgeDy);
11789-
const perpX = edgeLen > 0 ? -edgeDy / edgeLen : 0;
11790-
const perpY = edgeLen > 0 ? edgeDx / edgeLen : 0;
11791-
11792-
// Control point at midpoint, offset perpendicular to edge
11793-
const curveMidX = (startX + endX) / 2;
11794-
const curveMidY = (startY + endY) / 2;
11795-
const ctrlX = curveMidX + perpX * perpOffset;
11796-
const ctrlY = curveMidY + perpY * perpOffset;
11797-
11798-
return (
11799-
<path
11800-
d={`M ${startX} ${startY} Q ${ctrlX} ${ctrlY} ${endX} ${endY}`}
11801-
fill="none"
11802-
stroke={edgeColor}
11803-
strokeWidth={showConnectionNames ? "16" : "6"}
11804-
style={{ transition: 'stroke 0.2s ease' }}
11805-
strokeLinecap="round"
11806-
/>
11807-
);
11808-
}
11809-
// Single edge - render as straight line
11810-
return (
11811-
<line
11812-
x1={startX}
11813-
y1={startY}
11814-
x2={endX}
11815-
y2={endY}
11816-
stroke={edgeColor}
11817-
strokeWidth={showConnectionNames ? "16" : "6"}
11818-
style={{ transition: 'stroke 0.2s ease' }}
11819-
/>
11820-
);
11821-
})()}
11794+
) : useCurve ? (
11795+
<path
11796+
d={parallelPath.path}
11797+
fill="none"
11798+
stroke={edgeColor}
11799+
strokeWidth={showConnectionNames ? "16" : "6"}
11800+
style={{ transition: 'stroke 0.2s ease' }}
11801+
strokeLinecap="round"
11802+
/>
11803+
) : (
11804+
<line
11805+
x1={startX}
11806+
y1={startY}
11807+
x2={endX}
11808+
y2={endY}
11809+
stroke={edgeColor}
11810+
strokeWidth={showConnectionNames ? "16" : "6"}
11811+
style={{ transition: 'stroke 0.2s ease' }}
11812+
/>
11813+
)}
1182211814

1182311815
{/* Connection name text - only show when enabled */}
1182411816
{showConnectionNames && (() => {
@@ -11838,35 +11830,10 @@ function NodeCanvas() {
1183811830
angle = 90;
1183911831
}
1184011832
} else {
11841-
// Default Straight / Curve logic
11842-
const curveInfo = edgeCurveInfo.get(edge.id);
11843-
if (curveInfo && curveInfo.totalInPair > 1) {
11844-
// Curve Apex Logic for Labels
11845-
const { pairIndex } = curveInfo;
11846-
const curveSpacing = 100;
11847-
const direction = pairIndex % 2 === 0 ? 1 : -1;
11848-
const offsetMagnitude = Math.floor((pairIndex + 1) / 2) * curveSpacing;
11849-
const perpOffset = direction * offsetMagnitude;
11850-
11851-
const edgeDx = endX - startX;
11852-
const edgeDy = endY - startY;
11853-
const edgeLen = Math.sqrt(edgeDx * edgeDx + edgeDy * edgeDy);
11854-
const perpX = edgeLen > 0 ? -edgeDy / edgeLen : 0;
11855-
const perpY = edgeLen > 0 ? edgeDx / edgeLen : 0;
11856-
const curveMidX = (startX + endX) / 2;
11857-
const curveMidY = (startY + endY) / 2;
11858-
const ctrlX = curveMidX + perpX * perpOffset;
11859-
const ctrlY = curveMidY + perpY * perpOffset;
11860-
11861-
// Apex at t=0.5
11862-
midX = 0.25 * startX + 0.5 * ctrlX + 0.25 * endX;
11863-
midY = 0.25 * startY + 0.5 * ctrlY + 0.25 * endY;
11864-
angle = Math.atan2(edgeDy, edgeDx) * (180 / Math.PI); // Tangent at apex is parallel to edge
11865-
} else {
11866-
midX = (x1 + x2) / 2;
11867-
midY = (y1 + y2) / 2;
11868-
angle = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);
11869-
}
11833+
// Use utility-calculated apex for curves, midpoint for lines
11834+
midX = parallelPath.apexX;
11835+
midY = parallelPath.apexY;
11836+
angle = parallelPath.labelAngle;
1187011837
}
1187111838

1187211839
// Determine connection name to display

‎src/utils/canvas/parallelEdgeUtils.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ export function calculateParallelEdgePath(startX, startY, endX, endY, curveInfo)
3939
const { pairIndex, totalInPair } = curveInfo;
4040
const curveSpacing = 100; // Pixels between parallel edge curves
4141

42+
// DEBUG: Log curve info
43+
console.log('[parallelEdgeUtils] curveInfo:', { pairIndex, totalInPair, centerIndex: (totalInPair - 1) / 2, offsetSteps: pairIndex - (totalInPair - 1) / 2 });
44+
4245
// SYMMETRICAL DISTRIBUTION: Distribute edges symmetrically around the center axis
4346
// For 2 edges: centerIndex=0.5, offsets=[-0.5, +0.5] * spacing
4447
// For 3 edges: centerIndex=1, offsets=[-1, 0, +1] * spacing

0 commit comments

Comments
 (0)