chore: update toggle logic

zouhangwithsweet · Aug 16, 2024 · 4621304 · 4621304
1 parent 9a5203a
commit 4621304
Showing 1 changed file with 34 additions and 25 deletions.
diff --git a/entrypoints/injected/components/Download.tsx b/entrypoints/injected/components/Download.tsx
@@ -1,3 +1,4 @@
+import { ColorWheelIcon } from '@radix-ui/react-icons'
 import { useAtomValue } from 'jotai'
 import { memo, useEffect, useState } from 'react'
 import { Clipboard } from 'react-feather'
@@ -21,6 +22,7 @@ function isSVG(node: SceneNode, depth: number = 0): boolean {
 
 export const Download = memo((props: { minimized?: boolean }) => {
   const node = useAtomValue(currentSelection)
+  const [rough, setRough] = useState(false)
   const [imageBase64, setImageBase64] = useState('')
   const [svgString, setSvgString] = useState('')
   const scale = useAtomValue(exportScale)
@@ -109,40 +111,47 @@ export const Download = memo((props: { minimized?: boolean }) => {
       </div>
       {imageBase64 && show && (
         <div
-          className="mt-4 flex-col-center rounded-sm"
+          className="relative mt-4 flex-col-center rounded-sm"
           style={{
             background:
               'conic-gradient(#fff .25turn,#f7f7f7 .25turn .5turn,#fff .5turn .75turn,#f7f7f7 .75turn) top left/20px 20px repeat',
           }}
         >
           {svgString ? (
-            // todo
-            <RoughSVG
-              className="[&>svg]:min-w-20 p-5"
-              options={{
-                roughness: 1,
-                bowing: 1,
-                seed: 0,
-                fillStyle: 'hachure',
-                fillWeight: 1,
-                hachureAngle: -41,
-                hachureGap: 1,
-                curveStepCount: 9,
-                curveFitting: 0.95,
-                disableMultiStroke: false,
-                disableMultiStrokeFill: false,
-                simplification: 0,
-                dashOffset: 4,
-                dashGap: 4,
-                zigzagOffset: 4,
-                preserveVertices: false,
-              }}
-            >
-              <SVG src={svgString} height="auto" />
-            </RoughSVG>
+            rough ? (
+              <RoughSVG
+                className="[&>svg]:min-w-20 p-5"
+                options={{
+                  roughness: 1,
+                  bowing: 1,
+                  seed: 0,
+                  fillStyle: 'hachure',
+                  fillWeight: 1,
+                  hachureAngle: -41,
+                  hachureGap: 1,
+                  curveStepCount: 9,
+                  curveFitting: 0.95,
+                  disableMultiStroke: false,
+                  disableMultiStrokeFill: false,
+                  simplification: 0,
+                  dashOffset: 4,
+                  dashGap: 4,
+                  zigzagOffset: 4,
+                  preserveVertices: false,
+                }}
+              >
+                <SVG src={svgString} height="auto" />
+              </RoughSVG>
+            ) : (
+              <SVG src={svgString} height="auto" className="min-w-20 p-5 max-h-210px" />
+            )
           ) : (
             <img src={imageBase64} alt="" className="w-full max-w-60 max-h-210px h-auto object-contain" />
           )}
+
+          {svgString && (
+            <ColorWheelIcon className="absolute bottom-3 right-3 cursor-pointer" onClick={() => setRough(!rough)} />
+          )}
         </div>
       )}
       {svgString && (