diff --git a/src/app/BrowZarrPopover.tsx b/src/app/BrowZarrPopover.tsx index 404f1c62e..8b7c8a6aa 100644 --- a/src/app/BrowZarrPopover.tsx +++ b/src/app/BrowZarrPopover.tsx @@ -61,7 +61,7 @@ export function BrowZarrPopover() { > Jeran Poehls {" "} - &{" "} + {/* &{" "} Lazaro Alonso - + */}

diff --git a/src/components/ui/Elements/AboutInfo.tsx b/src/components/ui/Elements/AboutInfo.tsx index 721772a71..5291c2a55 100644 --- a/src/components/ui/Elements/AboutInfo.tsx +++ b/src/components/ui/Elements/AboutInfo.tsx @@ -34,7 +34,7 @@ const AboutInfo = () => {
- Lazaro Alonso & + {/* Lazaro Alonso & */} Jeran Poehls
diff --git a/src/components/ui/Footer.tsx b/src/components/ui/Footer.tsx index ca76296eb..2bcd162f3 100644 --- a/src/components/ui/Footer.tsx +++ b/src/components/ui/Footer.tsx @@ -24,7 +24,8 @@ const Footer = () => {
- Ⓒ Jeran Poehls&Lazaro Alonso + Ⓒ Jeran Poehls + {/* &Lazaro Alonso */}
diff --git a/src/components/ui/NavBar/ExportImageSettings.tsx b/src/components/ui/NavBar/ExportImageSettings.tsx index 693663571..0871f7aaa 100644 --- a/src/components/ui/NavBar/ExportImageSettings.tsx +++ b/src/components/ui/NavBar/ExportImageSettings.tsx @@ -2,12 +2,7 @@ import React, {useEffect, useState} from 'react' import { IoImage } from "react-icons/io5"; import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover" -import { Input, Switch, Hider, Button, Switcher } from "@/components/ui"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip" +import { Input, Switch, Hider, Button, Switcher, QuickTip } from "@/components/ui"; import { useImageExportStore } from '@/GlobalStates/ImageExportStore'; import { useGlobalStore } from '@/GlobalStates/GlobalStore'; import { usePlotStore } from '@/GlobalStates/PlotStore'; @@ -23,15 +18,17 @@ import { } from "@/components/ui/select" import { BsBoxArrowRight } from "react-icons/bs"; import { FaLongArrowAltRight } from "react-icons/fa"; +import { FiCopy } from "react-icons/fi"; +import { BiExport } from 'react-icons/bi' const ExportImageSettings = () => { const { - includeBackground, includeColorbar, doubleSize, cbarLoc, cbarNum, + includeBackground, includeColorbar, doubleSize, cbarLoc, cbarNum, keyFrames, useCustomRes, customRes, includeAxis, mainTitle, cbarLabel, cbarUnits, animate, timeRate, frames, frameRate, orbit, useTime, loopTime, orbitDeg, orbitDir, preview, pingpong } = useImageExportStore(useShallow(state => ({ - includeBackground: state.includeBackground, includeColorbar: state.includeColorbar, + includeBackground: state.includeBackground, includeColorbar: state.includeColorbar, keyFrames: state.keyFrames, doubleSize: state.doubleSize, cbarLoc: state.cbarLoc, cbarNum: state.cbarNum, useCustomRes: state.useCustomRes, customRes: state.customRes, includeAxis: state.includeAxis, mainTitle: state.mainTitle, cbarLabel: state.cbarLabel, cbarUnits:state.cbarUnits, animate: state.animate, timeRate:state.timeRate, frames: state.frames, frameRate: state.frameRate, @@ -61,6 +58,7 @@ const ExportImageSettings = () => { const [showAnimation, setShowAnimation] = useState(false) const [showSettings, setShowSettings] = useState(true) const [previewState, setPreviewState] = useState(false) + const [copied, setCopied] = useState(false); const { axisMapping } = useZarrStore(useShallow(state => ({ axisMapping: state.axisMapping @@ -75,14 +73,38 @@ const ExportImageSettings = () => { setFrames(sliceDist); },[zSlice, dimArrays, axisMapping]) + const keyFramesJSON = (): string => { + const {keyFrames} = useImageExportStore.getState() + if (!keyFrames) return ''; + const obj = Object.fromEntries(keyFrames) + return JSON.stringify(obj) + } + + const copyToClipboard = async () => { + const keyFramesJson = keyFramesJSON() + await navigator.clipboard.writeText(JSON.stringify(keyFramesJson)); + setCopied(true); + setTimeout(() => setCopied(false), 1500); //Use for a pop-up that fades away + }; + + const exportToJson = async () => { + const keyFramesJson = keyFramesJSON() + const blob = new Blob([keyFramesJson], { type: "application/json" }); + const url = URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = url; + link.download = "keyframes.json"; + + link.click(); + URL.revokeObjectURL(url) + + } return ( -
- - - - - - Export view as Image - - -
+ { > Keyframe Editor - + {keyFrames && +
+ Export Keyframes +
+
+ + + +
+
+ + + +
+
+
+ }
setPreview(!preview)} /> diff --git a/src/components/ui/NavBar/Navbar.tsx b/src/components/ui/NavBar/Navbar.tsx index fe1efee49..1c0b8595e 100644 --- a/src/components/ui/NavBar/Navbar.tsx +++ b/src/components/ui/NavBar/Navbar.tsx @@ -3,6 +3,7 @@ import React from "react"; import { ExportImageSettings, PlotLineButton, + QuickTip, useCSSVariable, } from "@/components/ui"; import "../css/Navbar.css"; @@ -11,11 +12,6 @@ import { MdFlipCameraIos } from "react-icons/md"; import { RiCloseLargeLine, RiMenu2Line } from "react-icons/ri"; import { useShallow } from "zustand/shallow"; import { Button, AxisBars } from "@/components/ui"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useGlobalStore } from '@/GlobalStates/GlobalStore'; import { usePlotStore } from '@/GlobalStates/PlotStore'; @@ -43,36 +39,30 @@ const Navbar = React.memo(function Navbar() { const [isOpen, setIsOpen] = useState(true); const navRef = useRef(null); const iconCol = useCSSVariable("--text-plot"); - + {isOpen ? "Close navigation" : "Open navigation"} return (