Redesign idea (#343)

* Redisign idea * Code cleanup * Fixed to right container * Reoredered layout * Reordering panels * Export dialog * Removed redunant code * Fixed not removing temp canvas * Fixed preview not using only selected elements * Returned file name on export * Toggle export selected/all elements * Hide copy to clipboard button if no support of clipboard * Added border to swatches * Fixed modal flickering
2025-05-03 10:00:07 -04:00 · 2020-01-15 20:42:02 +05:00 · 2020-01-15 20:42:02 +05:00 · 79aee53ff6
commit 79aee53ff6
parent 8104c8525d
37 changed files with 1043 additions and 746 deletions
--- a/src/components/ExportDialog.tsx
+++ b/src/components/ExportDialog.tsx
@ -0,0 +1,149 @@
+import "./ExportDialog.css";
+
+import React, { useState, useEffect, useRef } from "react";
+
+import { Modal } from "./Modal";
+import { ToolIcon } from "./ToolIcon";
+import { clipboard, exportFile, downloadFile } from "./icons";
+import { Island } from "./Island";
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { getExportCanvasPreview } from "../scene/data";
+import { ActionsManagerInterface, UpdaterFn } from "../actions/types";
+import Stack from "./Stack";
+
+const probablySupportsClipboard =
+  "toBlob" in HTMLCanvasElement.prototype &&
+  "clipboard" in navigator &&
+  "write" in navigator.clipboard &&
+  "ClipboardItem" in window;
+
+export function ExportDialog({
+  elements,
+  appState,
+  exportPadding = 10,
+  actionManager,
+  syncActionResult,
+  onExportToPng,
+  onExportToClipboard
+}: {
+  appState: AppState;
+  elements: readonly ExcalidrawElement[];
+  exportPadding?: number;
+  actionManager: ActionsManagerInterface;
+  syncActionResult: UpdaterFn;
+  onExportToPng(elements: readonly ExcalidrawElement[]): void;
+  onExportToClipboard(elements: readonly ExcalidrawElement[]): void;
+}) {
+  const someElementIsSelected = elements.some(element => element.isSelected);
+  const [modalIsShown, setModalIsShown] = useState(false);
+  const [exportSelected, setExportSelected] = useState(someElementIsSelected);
+  const previeRef = useRef<HTMLDivElement>(null);
+  const { exportBackground, viewBackgroundColor } = appState;
+
+  const exportedElements = exportSelected
+    ? elements.filter(element => element.isSelected)
+    : elements;
+
+  useEffect(() => {
+    setExportSelected(someElementIsSelected);
+  }, [someElementIsSelected]);
+
+  useEffect(() => {
+    const previewNode = previeRef.current;
+    const canvas = getExportCanvasPreview(exportedElements, {
+      exportBackground,
+      viewBackgroundColor,
+      exportPadding
+    });
+    previewNode?.appendChild(canvas);
+    return () => {
+      previewNode?.removeChild(canvas);
+    };
+  }, [
+    modalIsShown,
+    exportedElements,
+    exportBackground,
+    exportPadding,
+    viewBackgroundColor
+  ]);
+
+  function handleClose() {
+    setModalIsShown(false);
+    setExportSelected(someElementIsSelected);
+  }
+
+  return (
+    <>
+      <ToolIcon
+        onClick={() => setModalIsShown(true)}
+        icon={exportFile}
+        type="button"
+        aria-label="Show export dialog"
+      />
+      {modalIsShown && (
+        <Modal maxWidth={640} onCloseRequest={handleClose}>
+          <div className="ExportDialog__dialog">
+            <Island padding={4}>
+              <button className="ExportDialog__close" onClick={handleClose}>
+                ╳
+              </button>
+              <h2>Export</h2>
+              <div className="ExportDialog__preview" ref={previeRef}></div>
+              <div className="ExportDialog__actions">
+                <Stack.Row gap={2}>
+                  <ToolIcon
+                    type="button"
+                    icon={downloadFile}
+                    title="Export to PNG"
+                    aria-label="Export to PNG"
+                    onClick={() => onExportToPng(exportedElements)}
+                  />
+
+                  {probablySupportsClipboard && (
+                    <ToolIcon
+                      type="button"
+                      icon={clipboard}
+                      title="Copy to clipboard"
+                      aria-label="Copy to clipboard"
+                      onClick={() => onExportToClipboard(exportedElements)}
+                    />
+                  )}
+                </Stack.Row>
+
+                {actionManager.renderAction(
+                  "changeProjectName",
+                  elements,
+                  appState,
+                  syncActionResult
+                )}
+                <Stack.Col gap={1}>
+                  {actionManager.renderAction(
+                    "changeExportBackground",
+                    elements,
+                    appState,
+                    syncActionResult
+                  )}
+                  {someElementIsSelected && (
+                    <div>
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={exportSelected}
+                          onChange={e =>
+                            setExportSelected(e.currentTarget.checked)
+                          }
+                        />{" "}
+                        Only selected
+                      </label>
+                    </div>
+                  )}
+                </Stack.Col>
+              </div>
+            </Island>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}