mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-20 17:50:12 +02:00
Added option to open/slice files in local slicers when slicer api is enabled
This commit is contained in:
Pascal
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { X, ExternalLink, Box, Code2, Cog, Loader2, Layers, Check, Maximize2, Minimize2 } from 'lucide-react';
|
||||
import { X, ExternalLink, Box, Code2, Cog, Loader2, Layers, Check, Maximize2, Minimize2, ChevronDown } from 'lucide-react';
|
||||
import { ModelViewer } from './ModelViewer';
|
||||
import { GcodeViewer } from './GcodeViewer';
|
||||
import { Button } from './Button';
|
||||
@@ -32,6 +32,98 @@ interface Capabilities {
|
||||
filament_colors: string[];
|
||||
}
|
||||
|
||||
interface SlicerSplitButtonProps {
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
dropdownLabel: string;
|
||||
onPrimary: () => void;
|
||||
disabled?: boolean;
|
||||
items: Array<{ key: string; label: string; onClick: () => void }>;
|
||||
}
|
||||
|
||||
// Split button: the primary part runs the default slicer action, the chevron
|
||||
// opens a dropdown with the other slicer options. Outside click or Escape
|
||||
// (non-propagating) closes the dropdown.
|
||||
function SlicerSplitButton({ icon, label, dropdownLabel, onPrimary, disabled = false, items }: SlicerSplitButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handlePointerDown = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation();
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handlePointerDown);
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handlePointerDown);
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className="relative inline-flex" ref={containerRef}>
|
||||
<div className="flex relative z-50">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
onPrimary();
|
||||
}}
|
||||
disabled={disabled}
|
||||
className="rounded-r-none"
|
||||
>
|
||||
{icon}
|
||||
{label}
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setOpen((prev) => !prev)}
|
||||
disabled={disabled}
|
||||
aria-label={dropdownLabel}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
className="rounded-l-none border-l border-bambu-dark px-2"
|
||||
>
|
||||
<ChevronDown className={`w-4 h-4 transition-transform ${open ? 'rotate-180' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
{open && (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 top-full mt-1 w-56 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-lg shadow-lg z-50 py-1"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
item.onClick();
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 text-sm text-bambu-gray-light hover:bg-bambu-dark-tertiary hover:text-white transition-colors flex items-center gap-2"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4 flex-shrink-0" />
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ModelViewerModal({ archiveId, libraryFileId, title, fileType, onClose, onSliceWithBambuddy }: ModelViewerModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: api.getSettings });
|
||||
@@ -296,27 +388,38 @@ export function ModelViewerModal({ archiveId, libraryFileId, title, fileType, on
|
||||
isLibrary && settings?.use_slicer_api && onSliceWithBambuddy && sliceableType,
|
||||
);
|
||||
|
||||
const handleOpenInSlicer = async () => {
|
||||
const slicerDropdownTypes: SlicerType[] = useBambuddySlicer
|
||||
? ['bambu_studio', 'orcaslicer']
|
||||
: [preferredSlicer === 'orcaslicer' ? 'bambu_studio' : 'orcaslicer'];
|
||||
const slicerName = (slicer: SlicerType) =>
|
||||
slicer === 'orcaslicer' ? t('settings.slicerOrcaSlicer') : t('settings.slicerBambuStudio');
|
||||
const slicerDropdownItems = slicerDropdownTypes.map((slicer) => ({
|
||||
key: slicer,
|
||||
label: t('modelViewer.openInSlicerWith', { slicer: slicerName(slicer) }),
|
||||
onClick: () => handleOpenInSlicer(slicer),
|
||||
}));
|
||||
|
||||
const handleOpenInSlicer = async (slicer: SlicerType) => {
|
||||
if (!canOpenInSlicer) return;
|
||||
const filename = title || 'model';
|
||||
try {
|
||||
if (isLibrary) {
|
||||
const { token } = await api.createLibrarySlicerToken(libraryFileId!);
|
||||
const path = api.getLibrarySlicerDownloadUrl(libraryFileId!, token, filename);
|
||||
openInSlicer(`${window.location.origin}${path}`, preferredSlicer);
|
||||
openInSlicer(`${window.location.origin}${path}`, slicer);
|
||||
} else {
|
||||
const { token } = await api.createArchiveSlicerToken(archiveId!);
|
||||
const path = api.getArchiveSlicerDownloadUrl(archiveId!, token, filename);
|
||||
openInSlicer(`${window.location.origin}${path}`, preferredSlicer);
|
||||
openInSlicer(`${window.location.origin}${path}`, slicer);
|
||||
}
|
||||
} catch {
|
||||
// Fallback to direct URL (works when auth is disabled)
|
||||
if (isLibrary) {
|
||||
const downloadUrl = `${window.location.origin}${api.getLibraryFileDownloadUrl(libraryFileId!)}`;
|
||||
openInSlicer(downloadUrl, preferredSlicer);
|
||||
openInSlicer(downloadUrl, slicer);
|
||||
} else {
|
||||
const downloadUrl = `${window.location.origin}${api.getArchiveForSlicer(archiveId!, filename)}`;
|
||||
openInSlicer(downloadUrl, preferredSlicer);
|
||||
openInSlicer(downloadUrl, slicer);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -344,12 +447,30 @@ export function ModelViewerModal({ archiveId, libraryFileId, title, fileType, on
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{useBambuddySlicer ? (
|
||||
<Button variant="secondary" size="sm" onClick={onSliceWithBambuddy}>
|
||||
<Cog className="w-4 h-4" />
|
||||
{t('slice.action')}
|
||||
</Button>
|
||||
canOpenInSlicer ? (
|
||||
<SlicerSplitButton
|
||||
icon={<Cog className="w-4 h-4" />}
|
||||
label={t('slice.action')}
|
||||
dropdownLabel={t('modelViewer.moreSlicerOptions')}
|
||||
onPrimary={() => onSliceWithBambuddy?.()}
|
||||
items={slicerDropdownItems}
|
||||
/>
|
||||
) : (
|
||||
<Button variant="secondary" size="sm" onClick={onSliceWithBambuddy}>
|
||||
<Cog className="w-4 h-4" />
|
||||
{t('slice.action')}
|
||||
</Button>
|
||||
)
|
||||
) : canOpenInSlicer ? (
|
||||
<SlicerSplitButton
|
||||
icon={<ExternalLink className="w-4 h-4" />}
|
||||
label={t('modelViewer.openInSlicer')}
|
||||
dropdownLabel={t('modelViewer.moreSlicerOptions')}
|
||||
onPrimary={() => handleOpenInSlicer(preferredSlicer)}
|
||||
items={slicerDropdownItems}
|
||||
/>
|
||||
) : (
|
||||
<Button variant="secondary" size="sm" onClick={handleOpenInSlicer} disabled={!canOpenInSlicer}>
|
||||
<Button variant="secondary" size="sm" onClick={() => handleOpenInSlicer(preferredSlicer)} disabled>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
{t('modelViewer.openInSlicer')}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user