task(A4.13): dynamic v2 tool section in ribbon behind flag
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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' && (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user