Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

T21: Add Print button and PrintPreview modal to RibbonBar.tsx

Browse Source
This commit is contained in:
Leopoldadmin
2026-06-22 23:21:08 +00:00
parent c9f21ea38d
commit 5178e2a4fc
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/RibbonBar.tsx
+25 -23
View File
@@ -2,6 +2,7 @@ import React, { useState, useRef, useCallback } from 'react';
import type { YjsDocument } from '../crdt/YjsDocument';
import { exportDrawing, type ExportFormat } from '../services/exportService';
import { importDrawing, type ImportFormat, type ImportResult } from '../services/importService';
import PrintPreview from './PrintPreview/PrintPreview';
import './RibbonBar.css';
interface RibbonBarProps {
@@ -14,6 +15,7 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
const [showExportMenu, setShowExportMenu] = useState(false);
const [showImportMenu, setShowImportMenu] = useState(false);
const [importStatus, setImportStatus] = useState<string | null>(null);
const [showPrintPreview, setShowPrintPreview] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const pendingImportFormat = useRef<ImportFormat>('json');
@@ -75,7 +77,6 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
setImportStatus(`Import error: ${(err as Error).message}`);
}
setTimeout(() => setImportStatus(null), 5000);
// Reset input so same file can be selected again
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
@@ -96,7 +97,6 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
</button>
))}
{/* Export/Import section */}
<div className="ribbon-divider" aria-hidden="true" />
<div className="ribbon-dropdown-wrapper">
@@ -112,18 +112,10 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
</button>
{showExportMenu && (
<div className="ribbon-dropdown" role="menu">
<button className="ribbon-dropdown-item" onClick={() => handleExport('json')} role="menuitem">
JSON
</button>
<button className="ribbon-dropdown-item" onClick={() => handleExport('svg')} role="menuitem">
SVG
</button>
<button className="ribbon-dropdown-item" onClick={() => handleExport('dxf')} role="menuitem">
DXF
</button>
<button className="ribbon-dropdown-item" onClick={() => handleExport('pdf')} role="menuitem">
PDF
</button>
<button className="ribbon-dropdown-item" onClick={() => handleExport('json')} role="menuitem">JSON</button>
<button className="ribbon-dropdown-item" onClick={() => handleExport('svg')} role="menuitem">SVG</button>
<button className="ribbon-dropdown-item" onClick={() => handleExport('dxf')} role="menuitem">DXF</button>
<button className="ribbon-dropdown-item" onClick={() => handleExport('pdf')} role="menuitem">PDF</button>
</div>
)}
</div>
@@ -141,20 +133,26 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
</button>
{showImportMenu && (
<div className="ribbon-dropdown" role="menu">
<button className="ribbon-dropdown-item" onClick={() => triggerImport('json')} role="menuitem">
JSON
</button>
<button className="ribbon-dropdown-item" onClick={() => triggerImport('dxf')} role="menuitem">
DXF
</button>
<button className="ribbon-dropdown-item" onClick={() => triggerImport('json')} role="menuitem">JSON</button>
<button className="ribbon-dropdown-item" onClick={() => triggerImport('dxf')} role="menuitem">DXF</button>
</div>
)}
</div>
<div className="ribbon-divider" aria-hidden="true" />
<button
className="ribbon-tab"
onClick={() => setShowPrintPreview(true)}
role="menuitem"
aria-label="Print Preview"
>
<span className="tab-icon" aria-hidden="true">🖨️</span>
<span className="tab-label">Print</span>
</button>
{importStatus && (
<span className="ribbon-status" role="status" aria-live="polite">
{importStatus}
</span>
<span className="ribbon-status" role="status" aria-live="polite">{importStatus}</span>
)}
<input
@@ -163,6 +161,10 @@ const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange, yjsDoc }) => {
style={{ display: 'none' }}
onChange={handleFileSelected}
/>
{showPrintPreview && (
<PrintPreview yjsDoc={yjsDoc ?? null} onClose={() => setShowPrintPreview(false)} />
)}
</div>
);
};