Merge remote-tracking branch 'refs/remotes/origin/main'

lxfater · Dec 4, 2023 · f2c27b0 · f2c27b0
2 parents 16de14a + 6c67e02
commit f2c27b0
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/src/Editor.tsx b/src/Editor.tsx
@@ -72,20 +72,23 @@ export default function Editor(props: EditorProps) {
 
   const windowSize = useWindowSize()
 
-  const draw = useCallback(() => {
-    if (!context) {
-      return
-    }
-    context.clearRect(0, 0, context.canvas.width, context.canvas.height)
-    const currRender = renders[renders.length - 1]
-    if (currRender?.src) {
-      context.drawImage(currRender, 0, 0)
-    } else {
-      context.drawImage(original, 0, 0)
-    }
-    const currentLine = lines[lines.length - 1]
-    drawLines(context, [currentLine])
-  }, [context, lines, original, renders])
+  const draw = useCallback(
+    (index = -1) => {
+      if (!context) {
+        return
+      }
+      context.clearRect(0, 0, context.canvas.width, context.canvas.height)
+      const currRender = renders[index === -1 ? renders.length - 1 : index]
+      if (currRender?.src) {
+        context.drawImage(currRender, 0, 0)
+      } else {
+        context.drawImage(original, 0, 0)
+      }
+      const currentLine = lines[lines.length - 1]
+      drawLines(context, [currentLine])
+    },
+    [context, lines, original, renders]
+  )
 
   const refreshCanvasMask = useCallback(() => {
     if (!context?.canvas.width || !context?.canvas.height) {
@@ -348,16 +351,10 @@ export default function Editor(props: EditorProps) {
 
   const backTo = useCallback(
     (index: number) => {
-      const l = lines
-      while (l.length > index + 1) {
-        l.pop()
-      }
-      setLines([...l, { pts: [], src: '' }])
-      const r = renders
-      while (r.length > index + 1) {
-        r.pop()
-      }
-      setRenders([...r])
+      lines.splice(index + 1)
+      setLines([...lines, { pts: [], src: '' }])
+      renders.splice(index + 1)
+      setRenders([...renders])
     },
     [renders, lines]
   )
@@ -396,15 +393,19 @@ export default function Editor(props: EditorProps) {
                 justifyContent: 'center',
               }}
               onClick={() => backTo(index)}
+              onEnter={() => draw(index)}
+              onLeave={draw}
             >
               <div
                 style={{
                   color: '#fff',
-                  fontSize: '18px',
+                  fontSize: '12px',
                   textAlign: 'center',
                 }}
               >
                 回到这
+                <br />
+                Back here
               </div>
             </Button>
           </div>

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -11,11 +11,23 @@ interface ButtonProps {
   onClick?: () => void
   onDown?: () => void
   onUp?: () => void
+  onEnter?: () => void
+  onLeave?: () => void
 }
 
 export default function Button(props: ButtonProps) {
-  const { children, className, icon, primary, onClick, onDown, onUp, style } =
-    props
+  const {
+    children,
+    className,
+    icon,
+    primary,
+    style,
+    onClick,
+    onDown,
+    onUp,
+    onEnter,
+    onLeave,
+  } = props
   const [active, setActive] = useState(false)
   let background = ''
   if (primary) {
@@ -42,6 +54,12 @@ export default function Button(props: ButtonProps) {
         setActive(false)
         onUp?.()
       }}
+      onPointerEnter={() => {
+        onEnter?.()
+      }}
+      onPointerLeave={() => {
+        onLeave?.()
+      }}
       tabIndex={-1}
       className={[
         'inline-flex space-x-3 py-3 px-5 rounded-md cursor-pointer',