Skip to content

Commit cde2d1c

Browse files
grantiguessgrantiguess
committed
fix: color correction fix
1 parent 3a10bb2 commit cde2d1c

14 files changed

Lines changed: 2261 additions & 2235 deletions

‎src/GraphListItem.jsx‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { XCircle } from 'lucide-react'; // <<< Import XCircle
55
import { useDrag } from 'react-dnd';
66
import { getEmptyImage } from 'react-dnd-html5-backend';
77
import useGraphStore from './store/graphStore.jsx';
8+
import { getTextColor } from './utils/colorUtils';
89
// import './GraphListItem.css'; // We'll create this later
910

1011
const SPAWNABLE_NODE = 'spawnable_node';
@@ -21,7 +22,7 @@ const GraphListItem = forwardRef(({
2122
}, ref) => {
2223
const [isHovered, setIsHovered] = useState(false);
2324
const nodePrototypes = useGraphStore(state => state.nodePrototypes);
24-
25+
2526
// Get the defining node's name for fallback matching
2627
const definingNodeName = useMemo(() => {
2728
const definingNodeId = graphData.definingNodeIds?.[0];
@@ -31,10 +32,10 @@ const GraphListItem = forwardRef(({
3132
}
3233
return null;
3334
}, [graphData.definingNodeIds, nodePrototypes]);
34-
35+
3536
const [{ isDragging }, drag, preview] = useDrag(() => ({
3637
type: SPAWNABLE_NODE,
37-
item: {
38+
item: {
3839
prototypeId: graphData.definingNodeIds?.[0],
3940
nodeName: definingNodeName // Include node name for fallback matching
4041
},
@@ -60,7 +61,7 @@ const GraphListItem = forwardRef(({
6061
const handleDoubleClick = useCallback(() => {
6162
// <<< Remove Log for double click >>>
6263
// console.log(`[GraphListItem ${graphData.id}] handleDoubleClick called, calling onToggleExpand.`);
63-
onToggleExpand?.(graphData.id);
64+
onToggleExpand?.(graphData.id);
6465
// Potentially call onDoubleClick prop if needed for other actions
6566
// onDoubleClick?.(graphData.id);
6667
}, [graphData.id, onToggleExpand]); // <<< Add dependencies
@@ -82,12 +83,12 @@ const GraphListItem = forwardRef(({
8283
// aspectRatio: isExpanded ? '1 / 1' : undefined, // REMOVE aspect-ratio
8384
// FIX: Set static background/color, only border changes
8485
backgroundColor: graphData.color || 'maroon', // Always maroon
85-
color: '#bdb5b5', // Always light text
86+
color: getTextColor(graphData.color || 'maroon'),
8687
// FIX: Use margin for spacing, remove marginBottom
8788
// marginBottom: '10px',
8889
margin: '5px 0', // Equal top/bottom margin
8990
// FIX: Increase border radius
90-
borderRadius: '12px',
91+
borderRadius: '12px',
9192
boxSizing: 'border-box',
9293
cursor: 'pointer',
9394
display: 'flex',
@@ -113,13 +114,13 @@ const GraphListItem = forwardRef(({
113114
width: '85%',
114115
// height: '80%', // REMOVE fixed height
115116
// FIX: Animate maxHeight and opacity directly
116-
maxHeight: isExpanded ? '80%' : '0px',
117+
maxHeight: isExpanded ? '80%' : '0px',
117118
opacity: isExpanded ? 1 : 0,
118119
marginTop: '0',
119120
marginBottom: '0',
120121
backgroundColor: '#bdb5b5',
121122
borderRadius: '4px',
122-
overflow: 'hidden',
123+
overflow: 'hidden',
123124
display: 'flex',
124125
alignItems: 'center',
125126
justifyContent: 'center',
@@ -145,21 +146,21 @@ const GraphListItem = forwardRef(({
145146
title={graphData.name} // Tooltip with full name
146147
>
147148
{/* Graph Name - Add padding here */}
148-
<div
149+
<div
149150
style={{
150-
fontWeight: 'bold',
151-
whiteSpace: 'nowrap',
152-
overflow: 'hidden',
153-
textOverflow: 'ellipsis',
154-
padding: isExpanded ? '5px 10px' : '10px',
155-
textAlign: 'center',
156-
width: '100%',
157-
boxSizing: 'border-box',
158-
// FIX: Remove auto margins when expanded
159-
marginTop: isExpanded ? '0' : 'auto',
160-
marginBottom: isExpanded ? '10px' : 'auto',
161-
userSelect: 'none',
162-
fontFamily: "'EmOne', sans-serif",
151+
fontWeight: 'bold',
152+
whiteSpace: 'nowrap',
153+
overflow: 'hidden',
154+
textOverflow: 'ellipsis',
155+
padding: isExpanded ? '5px 10px' : '10px',
156+
textAlign: 'center',
157+
width: '100%',
158+
boxSizing: 'border-box',
159+
// FIX: Remove auto margins when expanded
160+
marginTop: isExpanded ? '0' : 'auto',
161+
marginBottom: isExpanded ? '10px' : 'auto',
162+
userSelect: 'none',
163+
fontFamily: "'EmOne', sans-serif",
163164
}}
164165
>
165166
{graphData.name}
@@ -168,15 +169,15 @@ const GraphListItem = forwardRef(({
168169
{/* Conditional Preview Area - Animate container directly */}
169170
<div style={previewContainerStyle}>
170171
{/* <div style={previewWrapperStyle}> REMOVE Wrapper */}
171-
{/* Render the actual preview only when expanded to avoid rendering cost? */}
172-
{isExpanded && (
173-
<GraphPreview
174-
nodes={graphData.nodes}
175-
edges={graphData.edges}
176-
width={itemStyle.width === '100%' ? 100 : (currentItemWidth) * 0.85}
177-
height={itemStyle.width === '100%' ? 100 : (currentItemWidth) * 0.80}
178-
/>
179-
)}
172+
{/* Render the actual preview only when expanded to avoid rendering cost? */}
173+
{isExpanded && (
174+
<GraphPreview
175+
nodes={graphData.nodes}
176+
edges={graphData.edges}
177+
width={itemStyle.width === '100%' ? 100 : (currentItemWidth) * 0.85}
178+
height={itemStyle.width === '100%' ? 100 : (currentItemWidth) * 0.80}
179+
/>
180+
)}
180181
{/* </div> */}
181182
</div>
182183

‎src/UnifiedSelector.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useRef, useEffect, useCallback } from 'react';
22
import { X, Palette, Plus } from 'lucide-react';
33
import { NODE_DEFAULT_COLOR, MODAL_CLOSE_ICON_SIZE } from './constants';
4+
import { getTextColor } from './utils/colorUtils';
45
import useGraphStore from "./store/graphStore.jsx";
56
import ColorPicker from './ColorPicker';
67
import useViewportBounds from './hooks/useViewportBounds';
@@ -140,12 +141,12 @@ const UnifiedSelector = ({
140141
const containerMaxWidth = isMobilePortrait
141142
? Math.min(mobileState.width - 16, overlayWidth)
142143
: Math.min(overlayWidth, Math.max(600, Math.floor(bounds.windowWidth * 0.9)));
143-
144+
144145
// UPDATED: Increased dialog width and limits
145146
const dialogWidth = isSmallScreen
146147
? containerMaxWidth
147148
: Math.min(containerMaxWidth * 0.75, Math.max(500, Math.floor(bounds.windowWidth * 0.5)));
148-
149+
149150
const gridOuterWidth = containerMaxWidth;
150151
const gridInnerPadding = isMobilePortrait ? 10 : (isSmallScreen ? 12 : 16);
151152

@@ -427,7 +428,7 @@ const UnifiedSelector = ({
427428
)}
428429
<span
429430
style={{
430-
color: '#bdb5b5',
431+
color: getTextColor(prototype.color || '#8B0000'),
431432
fontWeight: 'bold',
432433
fontFamily: "'EmOne', sans-serif",
433434
textAlign: 'center',

‎src/UniversalNodeRenderer.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ const ConnectionText = ({
5656
transform={`rotate(${adjustedAngle}, ${midX}, ${midY})`}
5757
stroke={(() => {
5858
const raw = connection.color || '#000000';
59+
// Check if getTextColor suggests a dark color (returns something other than #bdb5b5)
60+
// If raw is light (e.g. yellow), getTextColor returns dark.
61+
// We should use that dark color for the stroke to be visible.
5962
const suggested = getTextColor(raw);
6063
return suggested === '#bdb5b5' ? raw : suggested;
6164
})()}
@@ -83,6 +86,9 @@ const ConnectionText = ({
8386
transform={`rotate(${adjustedAngle}, ${midX}, ${midY})`}
8487
stroke={(() => {
8588
const raw = connection.color || '#000000';
89+
// Check if getTextColor suggests a dark color (returns something other than #bdb5b5)
90+
// If raw is light (e.g. yellow), getTextColor returns dark.
91+
// We should use that dark color for the stroke to be visible.
8692
const suggested = getTextColor(raw);
8793
return suggested === '#bdb5b5' ? raw : suggested;
8894
})()}

‎src/components/panel/SharedPanelContent.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { getEmptyImage } from 'react-dnd-html5-backend';
44
import { Palette, ArrowUpFromDot, ImagePlus, BookOpen, ExternalLink, Trash2, Bookmark, TextSearch } from 'lucide-react';
55
import { NODE_CORNER_RADIUS, NODE_DEFAULT_COLOR, THUMBNAIL_MAX_DIMENSION } from '../../constants.js';
66
import { generateThumbnail } from '../../utils.js';
7+
import { getTextColor } from '../../utils/colorUtils';
78
import CollapsibleSection from '../CollapsibleSection.jsx';
89
import SemanticEditor from '../SemanticEditor.jsx';
910
import ConnectionBrowser from '../ConnectionBrowser.jsx';
@@ -1013,7 +1014,7 @@ const DraggableNodeComponent = ({ node, onOpenNode }) => {
10131014
style={{
10141015
position: 'relative',
10151016
backgroundColor: node.color || NODE_DEFAULT_COLOR,
1016-
color: '#bdb5b5',
1017+
color: getTextColor(node.color || NODE_DEFAULT_COLOR),
10171018
borderRadius: '12px',
10181019
padding: '6px 6px',
10191020
fontSize: '0.8rem',
@@ -1073,7 +1074,7 @@ const DraggableTitleComponent = ({
10731074
<div style={{
10741075
position: 'relative',
10751076
backgroundColor: nodeData.color || NODE_DEFAULT_COLOR,
1076-
color: '#bdb5b5',
1077+
color: getTextColor(nodeData.color || NODE_DEFAULT_COLOR),
10771078
borderRadius: '12px',
10781079
paddingTop: '10px',
10791080
paddingBottom: '8px',
@@ -1102,7 +1103,7 @@ const DraggableTitleComponent = ({
11021103
style={{
11031104
backgroundColor: 'transparent',
11041105
border: 'none',
1105-
color: '#bdb5b5',
1106+
color: getTextColor(nodeData.color || NODE_DEFAULT_COLOR),
11061107
fontSize: '1.1rem',
11071108
fontWeight: 'bold',
11081109
fontFamily: "'EmOne', sans-serif",
@@ -1125,7 +1126,7 @@ const DraggableTitleComponent = ({
11251126
style={{
11261127
position: 'relative',
11271128
backgroundColor: nodeData.color || NODE_DEFAULT_COLOR,
1128-
color: '#bdb5b5',
1129+
color: getTextColor(nodeData.color || NODE_DEFAULT_COLOR),
11291130
borderRadius: '12px',
11301131
paddingTop: '10px',
11311132
paddingBottom: '8px',

0 commit comments

Comments
 (0)