feat: choose between exporting with or without annotations

src/components/modal/ExportClipboardModal.tsx

@@ -0,0 +1,122 @@
+import { Checkbox, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from 'react-science/ui';
+
+import useLog from '../../hooks/useLog';
+import useModal from '../../hooks/useModal';
+import { saveToClipboard } from '../../utils/export';
+import { useMergeToImage } from '../tool/ExportTool';
+
+import StyledModalBody from './utils/StyledModalBody';
+
+const ExportStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+
+  .header {
+    font-size: 1.25rem;
+  }
+
+  .container {
+    padding: 20px;
+  }
+`;
+
+const SaveButtonInner = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
+function ExportClipboardModal() {
+  const { isOpen, close } = useModal('exportClipboard');
+  const { logger } = useLog();
+  const [hasAnnotations, setHasAnnotations] = useState<boolean | null>(null);
+
+  const defaultFormState = useMemo(
+    () => ({
+      annotations: true,
+    }),
+    [],
+  );
+
+  const [formState, setFormState] = useState(defaultFormState);
+  const resetForm = useCallback(
+    () => setFormState(defaultFormState),
+    [setFormState, defaultFormState],
+  );
+
+  const mergeToImage = useMergeToImage(formState.annotations);
+
+  const copyToClipboard = useCallback(() => {
+    return mergeToImage().then(({ toSave }) => saveToClipboard(toSave));
+  }, [mergeToImage]);
+
+  const save = useCallback(() => {
+    copyToClipboard()
+      .catch((error) => logger.error(`Failed to copy to clipboard: ${error}`))
+      .finally(() => {
+        resetForm();
+        close();
+      });
+  }, [close, copyToClipboard, logger, resetForm]);
+
+  useEffect(() => {
+    mergeToImage()
+      .then(({ annotations }) => {
+        if (annotations === null) {
+          setHasAnnotations(false);
+          save();
+        } else {
+          setHasAnnotations(true);
+        }
+      })
+      .catch((error) => {
+        logger.error(`Failed to merge to image: ${error}`);
+      });
+  }, [logger, mergeToImage, save]);
+
+  if (hasAnnotations === null || !hasAnnotations) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      title="Copy to clipboard"
+      isOpen={isOpen}
+      onClose={close}
+      style={{ width: 'fit-content' }}
+    >
+      <ExportStyle>
+        <DialogBody>
+          <StyledModalBody>
+            <div>
+              <Checkbox
+                label="Include annotations"
+                alignIndicator="right"
+                checked={formState.annotations}
+                onChange={(e) =>
+                  setFormState({
+                    ...formState,
+                    annotations: e.target.checked,
+                  })
+                }
+              />
+            </div>
+          </StyledModalBody>
+        </DialogBody>
+        <DialogFooter
+          minimal
+          actions={
+            <Button intent="primary" onClick={save}>
+              <SaveButtonInner>Copy</SaveButtonInner>
+            </Button>
+          }
+        />
+      </ExportStyle>
+    </Dialog>
+  );
+}
+
+export default memo(ExportClipboardModal);

src/components/modal/ExportModal.tsx → src/components/modal/ExportPixeliumModal.tsx

@@ -38,8 +38,8 @@ const SaveButtonInner = styled.span`
   align-items: center;
 `;
 
-function ExportModal() {
-  const { isOpen, close } = useModal('export');
+function ExportPixeliumModal() {
+  const { isOpen, close } = useModal('exportPixelium');
   const data = useData();
   const preferences = usePreferences();
   const view = useView();
@@ -48,9 +48,9 @@ function ExportModal() {
   const defaultFormState = useMemo(
     () => ({
       name: '',
-      view: false,
-      preferences: false,
-      data: false,
+      view: true,
+      preferences: true,
+      data: true,
     }),
     [],
   );
@@ -158,4 +158,4 @@ function ExportModal() {
   );
 }
 
-export default memo(ExportModal);
+export default memo(ExportPixeliumModal);

src/components/modal/ExportPngModal.tsx

@@ -0,0 +1,161 @@
+import {
+  Checkbox,
+  InputGroup,
+  FormGroup,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+} from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from 'react-science/ui';
+
+import useCurrentTab from '../../hooks/useCurrentTab';
+import useData from '../../hooks/useData';
+import useLog from '../../hooks/useLog';
+import useModal from '../../hooks/useModal';
+import { saveAsPng } from '../../utils/export';
+import { useMergeToImage } from '../tool/ExportTool';
+
+import StyledModalBody from './utils/StyledModalBody';
+
+const ExportStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+
+  .header {
+    font-size: 1.25rem;
+  }
+
+  .container {
+    padding: 20px;
+  }
+`;
+
+const SaveButtonInner = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
+function ExportPngModal() {
+  const { isOpen, close } = useModal('exportPng');
+  const currentTab = useCurrentTab();
+  const data = useData();
+  const [hasAnnotations, setHasAnnotations] = useState<boolean | null>(null);
+
+  const { logger } = useLog();
+
+  const title = useMemo(() => {
+    let fullTitle;
+    if (currentTab) {
+      fullTitle = data.images[currentTab]?.metadata.name || currentTab;
+    } else {
+      fullTitle = 'unnamed';
+    }
+    return fullTitle.split('.')[0];
+  }, [currentTab, data]);
+
+  const defaultFormState = useMemo(
+    () => ({
+      name: '',
+      annotations: true,
+    }),
+    [],
+  );
+
+  const [formState, setFormState] = useState(defaultFormState);
+  const resetForm = useCallback(
+    () => setFormState(defaultFormState),
+    [setFormState, defaultFormState],
+  );
+
+  const mergeToImage = useMergeToImage(formState.annotations);
+
+  const exportPNG = useCallback(async () => {
+    return mergeToImage().then(({ toSave }) =>
+      saveAsPng(toSave, formState.name || title),
+    );
+  }, [formState.name, mergeToImage, title]);
+
+  const save = useCallback(() => {
+    exportPNG()
+      .catch((error) => logger.error(`Failed to generate PNG: ${error}`))
+      .finally(() => {
+        resetForm();
+        close();
+      });
+  }, [close, exportPNG, logger, resetForm]);
+
+  useEffect(() => {
+    mergeToImage()
+      .then(({ annotations }) => {
+        if (annotations !== null) {
+          setHasAnnotations(true);
+        } else {
+          setHasAnnotations(false);
+        }
+      })
+      .catch((error) => {
+        logger.error(`Failed to merge to image: ${error}`);
+      });
+  }, [logger, mergeToImage]);
+
+  if (hasAnnotations === null) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      title="Export PNG file"
+      isOpen={isOpen}
+      onClose={close}
+      style={{ width: 'fit-content' }}
+    >
+      <ExportStyle>
+        <DialogBody>
+          <StyledModalBody>
+            <div>
+              <FormGroup label="Name">
+                <InputGroup
+                  type="text"
+                  placeholder={title}
+                  value={formState.name}
+                  onChange={(e) =>
+                    setFormState({
+                      ...formState,
+                      name: e.target.value,
+                    })
+                  }
+                />
+              </FormGroup>
+              {hasAnnotations ? (
+                <Checkbox
+                  label="Include annotations"
+                  alignIndicator="right"
+                  checked={formState.annotations}
+                  onChange={(e) =>
+                    setFormState({
+                      ...formState,
+                      annotations: e.target.checked,
+                    })
+                  }
+                />
+              ) : null}
+            </div>
+          </StyledModalBody>
+        </DialogBody>
+        <DialogFooter
+          minimal
+          actions={
+            <Button intent="primary" onClick={save}>
+              <SaveButtonInner>Save</SaveButtonInner>
+            </Button>
+          }
+        />
+      </ExportStyle>
+    </Dialog>
+  );
+}
+
+export default memo(ExportPngModal);

src/components/modal/ModalContainer.tsx

@@ -4,7 +4,9 @@ import useCurrentTab from '../../hooks/useCurrentTab';
 import useView from '../../hooks/useView';
 
 import AboutModal from './AboutModal';
-import ExportModal from './ExportModal';
+import ExportClipboardModal from './ExportClipboardModal';
+import ExportPixeliumModal from './ExportPixeliumModal';
+import ExportPngModal from './ExportPngModal';
 import ExtractROIModal from './ExtractROIModal';
 import LogModal from './LogModal';
 import BlurModal from './preview/filters/BlurModal';
@@ -74,7 +76,9 @@ function ModalContainer() {
           {view.modals.close && (
             <CloseModal previewImageIdentifier={currentTab} />
           )}
-          {view.modals.export && <ExportModal />}
+          {view.modals.exportPng && <ExportPngModal />}
+          {view.modals.exportClipboard && <ExportClipboardModal />}
+          {view.modals.exportPixelium && <ExportPixeliumModal />}
           {view.modals.resize && (
             <ResizeModal previewImageIdentifier={currentTab} />
           )}