feat: disable export for 2d export when 3d is rendered and vice-versa

seasick · Feb 4, 2024 · 35fbb48 · 35fbb48
1 parent cd119c9
commit 35fbb48
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/src/components/SplitButton.tsx b/src/components/SplitButton.tsx
@@ -9,10 +9,15 @@ import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import * as React from 'react';
 
+type Option = {
+  label: string;
+  value?: string;
+  disabled?: boolean;
+};
 interface Props {
   disabled?: boolean;
   onSelect: (option: string) => void;
-  options: string[];
+  options: string[] | Option[];
   startIcon?: React.ReactNode;
 }
 
@@ -26,17 +31,27 @@ export default function SplitButton({
   const anchorRef = React.useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = React.useState(0);
 
+  React.useEffect(() => {
+    setSelectedIndex(options.findIndex((option) => !option.disabled));
+  }, [options]);
+
   const handleClick = () => {
-    onSelect(options[selectedIndex]);
+    const selected = options[selectedIndex];
+    onSelect(
+      typeof selected === 'string' ? selected : selected.value || selected.label
+    );
   };
 
   const handleMenuItemClick = (
     event: React.MouseEvent<HTMLLIElement, MouseEvent>,
     index: number
   ) => {
+    const selected = options[index];
     setSelectedIndex(index);
     setOpen(false);
-    onSelect(options[index]);
+    onSelect(
+      typeof selected === 'string' ? selected : selected.value || selected.label
+    );
   };
 
   const handleToggle = () => {
@@ -54,6 +69,11 @@ export default function SplitButton({
     setOpen(false);
   };
 
+  const selectedLabel =
+    typeof options[selectedIndex] === 'string'
+      ? options[selectedIndex]
+      : options[selectedIndex].label;
+
   return (
     <React.Fragment>
       <ButtonGroup
@@ -63,7 +83,7 @@ export default function SplitButton({
         disabled={disabled}
       >
         <Button onClick={handleClick} startIcon={startIcon}>
-          {options[selectedIndex]}
+          {selectedLabel}
         </Button>
         <Button
           size="small"
@@ -99,11 +119,12 @@ export default function SplitButton({
                 <MenuList id="split-button-menu" autoFocusItem>
                   {options.map((option, index) => (
                     <MenuItem
-                      key={option}
+                      key={option.label || option}
                       selected={index === selectedIndex}
                       onClick={(event) => handleMenuItemClick(event, index)}
+                      disabled={option.disabled}
                     >
-                      {option}
+                      {option.label || option}
                     </MenuItem>
                   ))}
                 </MenuList>

diff --git a/src/components/Workspace/Buttons.tsx b/src/components/Workspace/Buttons.tsx
@@ -1,7 +1,7 @@
 import LoopIcon from '@mui/icons-material/Loop';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { Parameter } from '../../lib/openSCAD/parseParameter';
 import SplitButton from '../SplitButton';
@@ -37,6 +37,19 @@ export default function Buttons({ code, parameters }: Props) {
   const handleRender = async () => {
     preview(code, parameters);
   };
+  const options = useMemo(() => {
+    const isSVG = previewFile && previewFile.name.endsWith('.svg');
+
+    // TODO: 3MF export was not enabled when building the OpenSCAD wasm module
+    return [
+      { label: 'Export STL', disabled: isSVG },
+      { label: 'Export OFF', disabled: isSVG },
+      { label: 'Export AMF', disabled: isSVG },
+      { label: 'Export CSG', disabled: isSVG },
+      { label: 'Export DXF', disabled: !isSVG },
+      { label: 'Export SVG', disabled: !isSVG },
+    ];
+  }, [previewFile]);
 
   useEffect(() => {
     if (exportFile) {
@@ -64,15 +77,7 @@ export default function Buttons({ code, parameters }: Props) {
       </Button>
       <SplitButton
         disabled={isRendering || isExporting || !previewFile}
-        options={[
-          'Export STL',
-          'Export OFF',
-          'Export AMF',
-          // 'Export 3MF', // TODO: 3MF export was not enabled when building the OpenSCAD wasm module
-          'Export CSG',
-          'Export DXF',
-          'Export SVG',
-        ]}
+        options={options}
         startIcon={isExporting && <LoopIcon sx={loopAnimation} />}
         onSelect={async (selectedLabel: string) => {
           const fileType = selectedLabel.split(' ')[1].toLowerCase();