Remove any selection highlighting from diagram before exporting as image

OctoConsulting · Apr 20, 2024 · 41e7665 · 41e7665
1 parent b950468
commit 41e7665
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/ui/src/components/options-menu/ExportPng.tsx b/ui/src/components/options-menu/ExportPng.tsx
@@ -4,7 +4,7 @@ import { layer01 } from "@carbon/themes"
 import { toPng } from "html-to-image"
 import { forwardRef } from "react"
 import { getNodesBounds, getViewportForBounds } from "reactflow"
-import { useGetNodes } from "../../singletons/store"
+import { useAppActions, useGetNodes } from "../../singletons/store"
 
 const IMAGE_WIDTH = 1024
 const IMAGE_HEIGHT = 768
@@ -20,8 +20,10 @@ const downloadImage = (dataUrl: string) => {
 const ExportPng = forwardRef<HTMLElement>(
   (props: OverflowMenuItemProps, ref) => {
     const nodes = useGetNodes()
+    const { clearDiagramSelections } = useAppActions()
 
     const handleClick = () => {
+      clearDiagramSelections()
       const nodeBounds = getNodesBounds(nodes)
       const transform = getViewportForBounds(
         nodeBounds,

diff --git a/ui/src/singletons/store.ts b/ui/src/singletons/store.ts
@@ -58,6 +58,8 @@ interface AppActions {
 
   clearFlow: () => void
 
+  clearDiagramSelections: () => void
+
   importFlowFromJson: (json: string) => void
 }
 
@@ -160,6 +162,12 @@ const useStore = create<AppStore>()(
             selectedChildNode: null,
           })),
 
+        clearDiagramSelections: () =>
+          set((state) => ({
+            nodes: state.nodes.map((node) => ({ ...node, selected: false })),
+            edges: state.edges.map((edge) => ({ ...edge, selected: false })),
+          })),
+
         importFlowFromJson: (json: string) =>
           set(() => {
             const imported = JSON.parse(json) as Partial<AppStore>