jan-henrik/constellation-analyzer
1
0
Fork 0
mirror of https://github.com/OFFIS-ESC/constellation-analyzer synced 2026-01-27 07:43:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: display actor type icons in left panel add buttons

Browse source 
Replace generic circle icons with the actual node type icons in the
left panel's "Add Actors" section. Icons now match the visual
representation of actors in the graph, making it more intuitive to
identify actor types. Falls back to circle if no icon is defined.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-10 22:31:56 +02:00
parent 38cae3cdd9
commit cd1a93f88f
1 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/components/Panels/LeftPanel.tsx
View file

@ -8,6 +8,8 @@ import { usePanelStore } from '../../stores/panelStore';
import { useGraphWithHistory } from '../../hooks/useGraphWithHistory';
import { useEditorStore } from '../../stores/editorStore';
import { createNode } from '../../utils/nodeUtils';
import { getIconComponent } from '../../utils/iconUtils';
import { getContrastColor } from '../../utils/colorUtils';
/**
* LeftPanel - Collapsible tools panel on the left side
@ -107,21 +109,38 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => {
</button>
{leftPanelSections.addActors && (
<div className="px-3 py-3 space-y-2">
{nodeTypes.map((nodeType) => (
<button
key={nodeType.id}
onClick={() => handleAddNode(nodeType.id)}
className="w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium text-white rounded hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm"
style={{ backgroundColor: nodeType.color }}
title={nodeType.description}
>
<div
className="w-3 h-3 rounded-full border-2 border-white"
style={{ backgroundColor: nodeType.color }}
/>
<span className="flex-1 text-left">{nodeType.label}</span>
</button>
))}
{nodeTypes.map((nodeType) => {
const IconComponent = getIconComponent(nodeType.icon);
const textColor = getContrastColor(nodeType.color);
return (
<button
key={nodeType.id}
onClick={() => handleAddNode(nodeType.id)}
className="w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium rounded hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm"
style={{
backgroundColor: nodeType.color,
color: textColor
}}
title={nodeType.description}
>
{IconComponent ? (
<div className="w-5 h-5 flex items-center justify-center" style={{ color: textColor }}>
<IconComponent style={{ fontSize: '1.25rem' }} />
</div>
) : (
<div
className="w-3 h-3 rounded-full border-2"
style={{
backgroundColor: nodeType.color,
borderColor: textColor
}}
/>
)}
<span className="flex-1 text-left">{nodeType.label}</span>
</button>
);
})}
<p className="text-xs text-gray-500 pt-2 border-t border-gray-100">
Click a button to add an actor to the canvas
</p>