diff --git a/src/Editor.tsx b/src/Editor.tsx index a9af0d8..c28df2c 100644 --- 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} >
回到这 +
+ Back here
diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d46b088..129a28d 100644 --- 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',