task(A4.13): dynamic v2 tool section in ribbon behind flag

This commit is contained in:
Agent Zero
2026-08-27 07:21:19 +02:00
parent 216bf6360a
commit e370552055
3 changed files with 49 additions and 0 deletions
+14
View File
@@ -1148,6 +1148,15 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
if (action === 'measure') { setActiveTool('dimension'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Messwerkzeug aktiv', type: 'info' }]); return; } if (action === 'measure') { setActiveTool('dimension'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Messwerkzeug aktiv', type: 'info' }]); return; }
if (action === 'history') { setHistoryPanelOpen((prev) => !prev); return; } if (action === 'history') { setHistoryPanelOpen((prev) => !prev); return; }
// ─── V2 tools (Task A4.13): 'v2tool:<id>' → aktives Tool umschalten. Der
// bestehende CanvasArea-Sync aus A4.1 routet es an den Dispatcher (Flag aktiv).
if (action.startsWith('v2tool:')) {
const toolId = action.slice('v2tool:'.length);
setActiveTool(toolId);
setCommandHistory((prev) => [...prev, { prefix: '·', text: `V2-Werkzeug aktiv: ${toolId}`, type: 'info' }]);
return;
}
// ─── Background ─── // ─── Background ───
if (action === 'background-import') { setBgImportOpen(true); return; } if (action === 'background-import') { setBgImportOpen(true); return; }
@@ -1564,6 +1573,11 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
activeTab={activeRibbonTab} activeTab={activeRibbonTab}
onTabChange={setActiveRibbonTab} onTabChange={setActiveRibbonTab}
onAction={handleRibbonAction} onAction={handleRibbonAction}
onIsV2ToolActive={(toolId: string) =>
import.meta.env.VITE_TOOL_DISPATCHER === 'v2' &&
activeTool === toolId &&
!!pluginRegistry.getToolV2(toolId)
}
canvasBgColor={canvasBgColor} canvasBgColor={canvasBgColor}
gridColor={gridColor} gridColor={gridColor}
rulerEnabled={rulerEnabled} rulerEnabled={rulerEnabled}
+33
View File
@@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import type { RibbonBarProps, RibbonTab } from '../types/ui.types'; import type { RibbonBarProps, RibbonTab } from '../types/ui.types';
import { pluginRegistry } from '../plugins';
const tabs: Array<{ id: RibbonTab; label: string; svg: React.ReactNode }> = [ const tabs: Array<{ id: RibbonTab; label: string; svg: React.ReactNode }> = [
{ id: 'start', label: 'Start', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> }, { id: 'start', label: 'Start', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> },
@@ -15,6 +16,7 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
activeTab, onTabChange, onAction, activeTab, onTabChange, onAction,
canvasBgColor = '#1e1e2e', gridColor = '#3a3a4a', rulerEnabled = true, canvasBgColor = '#1e1e2e', gridColor = '#3a3a4a', rulerEnabled = true,
onCanvasBgColorChange, onGridColorChange, onToggleRuler, onCanvasBgColorChange, onGridColorChange, onToggleRuler,
onIsV2ToolActive,
}) => { }) => {
return ( return (
<nav className="ribbon" role="navigation" aria-label="Hauptwerkzeuge"> <nav className="ribbon" role="navigation" aria-label="Hauptwerkzeuge">
@@ -36,6 +38,37 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
</div> </div>
<div className="ribbon-content" id="ribbon-content"> <div className="ribbon-content" id="ribbon-content">
{/* ===== V2 TOOLS (Task A4.13, nur bei aktivem Dispatcher-Flag) ===== */}
{activeTab === 'canvas' && import.meta.env.VITE_TOOL_DISPATCHER === 'v2' && (
<div style={{
display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center',
padding: '8px 4px', width: '100%',
borderBottom: '1px solid var(--color-border, #333)', marginBottom: '8px',
}}>
<span style={{ fontSize: '11px', color: 'var(--color-ki, #8a8aff)', marginRight: '4px' }}>V2:</span>
{pluginRegistry.getToolsV2().map((tool) => {
const isActive = onIsV2ToolActive?.(tool.manifest.id);
return (
<button
key={tool.manifest.id}
title={tool.manifest.description ?? tool.manifest.label}
onClick={() => onAction(`v2tool:${tool.manifest.id}`)}
style={{
display: 'flex', alignItems: 'center', gap: '4px',
padding: '5px 9px', borderRadius: '4px', fontSize: '12px',
cursor: 'pointer', border: '1px solid var(--color-border, #333)',
background: isActive ? 'rgba(80,250,123,0.15)' : 'var(--color-bg-secondary, #2a2a3a)',
color: isActive ? '#50fa7b' : 'inherit',
fontWeight: isActive ? 600 : 400,
}}
>
<span style={{ fontFamily: 'monospace' }}>{tool.manifest.icon}</span>
<span>{tool.manifest.label}</span>
</button>
);
})}
</div>
)}
{/* ===== START TAB ===== */} {/* ===== START TAB ===== */}
{activeTab === 'start' && ( {activeTab === 'start' && (
<> <>
+2
View File
@@ -94,6 +94,8 @@ export interface RibbonBarProps {
onCanvasBgColorChange?: (color: string) => void; onCanvasBgColorChange?: (color: string) => void;
onGridColorChange?: (color: string) => void; onGridColorChange?: (color: string) => void;
onToggleRuler?: () => void; onToggleRuler?: () => void;
/** Task A4.13: meldet, ob ein V2-Werkzeug-ID aktuell das aktive Tool ist (Highlight). */
onIsV2ToolActive?: (toolId: string) => boolean;
} }
export interface LeftSidebarProps { export interface LeftSidebarProps {