kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

Merge pull request #6 from Sanster/multi_stroke

Browse Source 
Multi stroke support
This commit is contained in:
Qing 2021-12-12 15:10:43 +08:00 committed by GitHub
commit d0351a8603
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 202 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -4,6 +4,10 @@ This project is mainly used for selfhosting LaMa model, some interaction improve
![example](./assets/lama-cleaner-example.gif) ![example](./assets/lama-cleaner-example.gif)
- [x] High resolution support
- [x] Multi stroke support. Press and hold the `cmd/ctrl` key to enable multi stroke mode.
- [ ] Keep image EXIF data
## Quick Start ## Quick Start
- Install requirements: `pip3 install -r requirements.txt` - Install requirements: `pip3 install -r requirements.txt`

10
lama_cleaner/app/build/asset-manifest.json
View File

@ -1,16 +1,16 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.36546dab.chunk.css", "main.css": "/static/css/main.36546dab.chunk.css",
"main.js": "/static/js/main.d5ae39b3.chunk.js", "main.js": "/static/js/main.5c20e42a.chunk.js",
"runtime-main.js": "/static/js/runtime-main.5e86ac81.js", "runtime-main.js": "/static/js/runtime-main.5e86ac81.js",
"static/js/2.bca222ae.chunk.js": "/static/js/2.bca222ae.chunk.js", "static/js/2.ad4a2500.chunk.js": "/static/js/2.ad4a2500.chunk.js",
"index.html": "/index.html", "index.html": "/index.html",
"static/js/2.bca222ae.chunk.js.LICENSE.txt": "/static/js/2.bca222ae.chunk.js.LICENSE.txt" "static/js/2.ad4a2500.chunk.js.LICENSE.txt": "/static/js/2.ad4a2500.chunk.js.LICENSE.txt"
}, },
"entrypoints": [ "entrypoints": [
"static/js/runtime-main.5e86ac81.js", "static/js/runtime-main.5e86ac81.js",
"static/js/2.bca222ae.chunk.js", "static/js/2.ad4a2500.chunk.js",
"static/css/main.36546dab.chunk.css", "static/css/main.36546dab.chunk.css",
"static/js/main.d5ae39b3.chunk.js" "static/js/main.5c20e42a.chunk.js"
] ]
} }

2
lama_cleaner/app/build/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/svg+xml" href="/favicon.svg"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#ffffff"/><title>lama-cleaner - Image inpainting powered by LaMa</title><link href="/static/css/main.36546dab.chunk.css" rel="stylesheet"></head><body class="h-screen"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root" class="h-full"></div><script>"localhost"===location.hostname&&(self.FIREBASE_APPCHECK_DEBUG_TOKEN=!0)</script><script>!function(e){function r(r){for(var n,l,a=r[0],f=r[1],i=r[2],p=0,s=[];p<a.length;p++)l=a[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var i=0;i<a.length;i++)r(a[i]);var c=f;t()}([])</script><script src="/static/js/2.bca222ae.chunk.js"></script><script src="/static/js/main.d5ae39b3.chunk.js"></script></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/svg+xml" href="/favicon.svg"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#ffffff"/><title>lama-cleaner - Image inpainting powered by LaMa</title><link href="/static/css/main.36546dab.chunk.css" rel="stylesheet"></head><body class="h-screen"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root" class="h-full"></div><script>"localhost"===location.hostname&&(self.FIREBASE_APPCHECK_DEBUG_TOKEN=!0)</script><script>!function(e){function r(r){for(var n,l,a=r[0],f=r[1],i=r[2],p=0,s=[];p<a.length;p++)l=a[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var i=0;i<a.length;i++)r(a[i]);var c=f;t()}([])</script><script src="/static/js/2.ad4a2500.chunk.js"></script><script src="/static/js/main.5c20e42a.chunk.js"></script></body></html>

4
lama_cleaner/app/build/static/js/2.bca222ae.chunk.js → lama_cleaner/app/build/static/js/2.ad4a2500.chunk.js
View File

File diff suppressed because one or more lines are too long

0
lama_cleaner/app/build/static/js/2.bca222ae.chunk.js.LICENSE.txt → lama_cleaner/app/build/static/js/2.ad4a2500.chunk.js.LICENSE.txt
View File

1
lama_cleaner/app/build/static/js/main.5c20e42a.chunk.js Normal file
View File

File diff suppressed because one or more lines are too long

1
lama_cleaner/app/build/static/js/main.d5ae39b3.chunk.js
View File

File diff suppressed because one or more lines are too long

323
lama_cleaner/app/src/Editor.tsx
View File

@ -1,6 +1,6 @@
import { DownloadIcon, EyeIcon } from '@heroicons/react/outline' import { DownloadIcon, EyeIcon } from '@heroicons/react/outline'
import React, { useCallback, useEffect, useState } from 'react' import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'
import { useWindowSize, useLocalStorage } from 'react-use' import { useWindowSize, useLocalStorage, useKey } from 'react-use'
import inpaint from './adapters/inpainting' import inpaint from './adapters/inpainting'
import Button from './components/Button' import Button from './components/Button'
import Slider from './components/Slider' import Slider from './components/Slider'
@ -9,6 +9,7 @@ import { downloadImage, loadImage, useImage } from './utils'
const TOOLBAR_SIZE = 200 const TOOLBAR_SIZE = 200
const BRUSH_COLOR = 'rgba(189, 255, 1, 0.75)' const BRUSH_COLOR = 'rgba(189, 255, 1, 0.75)'
const NO_COLOR = 'rgba(255,255,255,0)'
interface EditorProps { interface EditorProps {
file: File file: File
@ -50,6 +51,8 @@ export default function Editor(props: EditorProps) {
return document.createElement('canvas') return document.createElement('canvas')
}) })
const [lines, setLines] = useState<Line[]>([{ pts: [] }]) const [lines, setLines] = useState<Line[]>([{ pts: [] }])
const [lines4Show, setLines4Show] = useState<Line[]>([{ pts: [] }])
const [historyLineCount, setHistoryLineCount] = useState<number[]>([])
const [{ x, y }, setCoords] = useState({ x: -1, y: -1 }) const [{ x, y }, setCoords] = useState({ x: -1, y: -1 })
const [showBrush, setShowBrush] = useState(false) const [showBrush, setShowBrush] = useState(false)
const [showOriginal, setShowOriginal] = useState(false) const [showOriginal, setShowOriginal] = useState(false)
@ -60,6 +63,9 @@ export default function Editor(props: EditorProps) {
const [sizeLimit, setSizeLimit] = useLocalStorage('sizeLimit', '1080') const [sizeLimit, setSizeLimit] = useLocalStorage('sizeLimit', '1080')
const windowSize = useWindowSize() const windowSize = useWindowSize()
const [isDraging, setIsDraging] = useState(false)
const [isMultiStrokeKeyPressed, setIsMultiStrokeKeyPressed] = useState(false)
const draw = useCallback(() => { const draw = useCallback(() => {
if (!context) { if (!context) {
return return
@ -71,9 +77,8 @@ export default function Editor(props: EditorProps) {
} else { } else {
context.drawImage(original, 0, 0) context.drawImage(original, 0, 0)
} }
const currentLine = lines[lines.length - 1] drawLines(context, lines4Show)
drawLines(context, [currentLine]) }, [context, lines4Show, original, renders])
}, [context, lines, original, renders])
const refreshCanvasMask = useCallback(() => { const refreshCanvasMask = useCallback(() => {
if (!context?.canvas.width || !context?.canvas.height) { if (!context?.canvas.width || !context?.canvas.height) {
@ -85,9 +90,77 @@ export default function Editor(props: EditorProps) {
if (!ctx) { if (!ctx) {
throw new Error('could not retrieve mask canvas') throw new Error('could not retrieve mask canvas')
} }
drawLines(ctx, lines, 'white') drawLines(ctx, lines, 'white')
}, [context?.canvas.height, context?.canvas.width, lines, maskCanvas]) }, [context?.canvas.height, context?.canvas.width, lines, maskCanvas])
const runInpainting = useCallback(async () => {
setIsInpaintingLoading(true)
refreshCanvasMask()
try {
const res = await inpaint(file, maskCanvas.toDataURL(), sizeLimit)
if (!res) {
throw new Error('empty response')
}
// TODO: fix the render if it failed loading
const newRender = new Image()
await loadImage(newRender, res)
renders.push(newRender)
lines.push({ pts: [] } as Line)
setRenders([...renders])
setLines([...lines])
historyLineCount.push(lines4Show.length)
setHistoryLineCount(historyLineCount)
lines4Show.length = 0
setLines4Show([{ pts: [] } as Line])
} catch (e: any) {
// eslint-disable-next-line
alert(e.message ? e.message : e.toString())
}
setIsInpaintingLoading(false)
draw()
}, [
draw,
file,
lines,
lines4Show,
maskCanvas,
refreshCanvasMask,
renders,
sizeLimit,
historyLineCount,
])
const handleMultiStrokeKeyDown = () => {
if (isInpaintingLoading) {
return
}
setIsMultiStrokeKeyPressed(true)
}
const handleMultiStrokeKeyup = () => {
if (!isMultiStrokeKeyPressed) {
return
}
if (isInpaintingLoading) {
return
}
setIsMultiStrokeKeyPressed(false)
if (lines4Show.length !== 0 && lines4Show[0].pts.length !== 0) {
runInpainting()
}
}
const predicate = (event: KeyboardEvent) => {
return event.key === 'Control' || event.key === 'Meta'
}
useKey(predicate, handleMultiStrokeKeyup, { event: 'keyup' })
useKey(predicate, handleMultiStrokeKeyDown, {
event: 'keydown',
})
// Draw once the original image is loaded // Draw once the original image is loaded
useEffect(() => { useEffect(() => {
if (!context?.canvas) { if (!context?.canvas) {
@ -107,152 +180,111 @@ export default function Editor(props: EditorProps) {
} }
}, [context?.canvas, draw, original, isOriginalLoaded, windowSize]) }, [context?.canvas, draw, original, isOriginalLoaded, windowSize])
// Handle mouse interactions const onPaint = (px: number, py: number) => {
useEffect(() => { const currShowLine = lines4Show[lines4Show.length - 1]
currShowLine.pts.push({ x: px, y: py })
const currLine = lines[lines.length - 1]
currLine.pts.push({ x: px, y: py })
draw()
}
const onMouseMove = (ev: SyntheticEvent) => {
const mouseEvent = ev.nativeEvent as MouseEvent
setCoords({ x: mouseEvent.pageX, y: mouseEvent.pageY })
}
const onMouseDrag = (ev: SyntheticEvent) => {
if (!isDraging) {
return
}
const mouseEvent = ev.nativeEvent as MouseEvent
const px = mouseEvent.offsetX
const py = mouseEvent.offsetY
onPaint(px, py)
}
const onPointerUp = () => {
if (!original.src) {
return
}
const canvas = context?.canvas const canvas = context?.canvas
if (!canvas) { if (!canvas) {
return return
} }
if (isInpaintingLoading) {
return
}
setIsDraging(false)
if (isMultiStrokeKeyPressed) {
lines.push({ pts: [] } as Line)
setLines([...lines])
const onMouseDown = (ev: MouseEvent) => { lines4Show.push({ pts: [] } as Line)
if (!original.src) { setLines4Show([...lines4Show])
return return
}
const currLine = lines[lines.length - 1]
currLine.size = brushSize
canvas.addEventListener('mousemove', onMouseDrag)
window.addEventListener('mouseup', onPointerUp)
onPaint(ev.offsetX, ev.offsetY)
}
const onMouseMove = (ev: MouseEvent) => {
setCoords({ x: ev.pageX, y: ev.pageY })
}
const onPaint = (px: number, py: number) => {
const currLine = lines[lines.length - 1]
currLine.pts.push({ x: px, y: py })
draw()
}
const onMouseDrag = (ev: MouseEvent) => {
const px = ev.offsetX
const py = ev.offsetY
onPaint(px, py)
} }
const onPointerUp = async () => { if (lines4Show.length !== 0 && lines4Show[0].pts.length !== 0) {
if (!original.src) { runInpainting()
return
}
setIsInpaintingLoading(true)
canvas.removeEventListener('mousemove', onMouseDrag)
window.removeEventListener('mouseup', onPointerUp)
refreshCanvasMask()
try {
const res = await inpaint(file, maskCanvas.toDataURL(), sizeLimit)
if (!res) {
throw new Error('empty response')
}
// TODO: fix the render if it failed loading
const newRender = new Image()
await loadImage(newRender, res)
renders.push(newRender)
lines.push({ pts: [] } as Line)
setRenders([...renders])
setLines([...lines])
} catch (e: any) {
// eslint-disable-next-line
alert(e.message ? e.message : e.toString())
}
setIsInpaintingLoading(false)
draw()
} }
window.addEventListener('mousemove', onMouseMove) }
const onTouchMove = (ev: TouchEvent) => { const onMouseDown = (ev: SyntheticEvent) => {
ev.preventDefault() if (!original.src) {
ev.stopPropagation() return
const currLine = lines[lines.length - 1]
const coords = canvas.getBoundingClientRect()
currLine.pts.push({
x: (ev.touches[0].clientX - coords.x) / scale,
y: (ev.touches[0].clientY - coords.y) / scale,
})
draw()
} }
const onPointerStart = (ev: TouchEvent) => { const canvas = context?.canvas
if (!original.src) { if (!canvas) {
return return
}
const currLine = lines[lines.length - 1]
currLine.size = brushSize
canvas.addEventListener('mousemove', onMouseDrag)
window.addEventListener('mouseup', onPointerUp)
const coords = canvas.getBoundingClientRect()
const px = (ev.touches[0].clientX - coords.x) / scale
const py = (ev.touches[0].clientY - coords.y) / scale
onPaint(px, py)
} }
canvas.addEventListener('touchstart', onPointerStart) if (isInpaintingLoading) {
canvas.addEventListener('touchmove', onTouchMove) return
canvas.addEventListener('touchend', onPointerUp) }
canvas.onmouseenter = () => setShowBrush(true) setIsDraging(true)
canvas.onmouseleave = () => setShowBrush(false) const currLine4Show = lines4Show[lines4Show.length - 1]
canvas.onmousedown = onMouseDown currLine4Show.size = brushSize
const currLine = lines[lines.length - 1]
currLine.size = brushSize
return () => { const mouseEvent = ev.nativeEvent as MouseEvent
canvas.removeEventListener('mousemove', onMouseDrag) onPaint(mouseEvent.offsetX, mouseEvent.offsetY)
window.removeEventListener('mousemove', onMouseMove) }
window.removeEventListener('mouseup', onPointerUp)
canvas.removeEventListener('touchstart', onPointerStart)
canvas.removeEventListener('touchmove', onTouchMove)
canvas.removeEventListener('touchend', onPointerUp)
canvas.onmouseenter = null
canvas.onmouseleave = null
canvas.onmousedown = null
}
}, [
brushSize,
context,
file,
draw,
lines,
refreshCanvasMask,
maskCanvas,
original.src,
renders,
original.naturalHeight,
original.naturalWidth,
scale,
sizeLimit,
])
const undo = useCallback(() => { const undo = () => {
const l = lines const l = lines
l.pop() const count = historyLineCount[historyLineCount.length - 1]
l.pop() for (let i = 0; i <= count; i += 1) {
l.pop()
}
setLines([...l, { pts: [] }]) setLines([...l, { pts: [] }])
historyLineCount.pop()
setHistoryLineCount(historyLineCount)
const r = renders const r = renders
r.pop() r.pop()
setRenders([...r]) setRenders([...r])
}, [lines, renders]) }
// Handle Cmd+Z // Handle Cmd+Z
useEffect(() => { const undoPredicate = (event: KeyboardEvent) => {
const handler = (event: KeyboardEvent) => { if (!renders.length) {
if (!renders.length) { return false
return
}
const isCmdZ = (event.metaKey || event.ctrlKey) && event.key === 'z'
if (isCmdZ) {
event.preventDefault()
undo()
}
} }
window.addEventListener('keydown', handler) if (!historyLineCount.length) {
return () => { return false
window.removeEventListener('keydown', handler)
} }
}, [renders, undo]) const isCmdZ = (event.metaKey || event.ctrlKey) && event.key === 'z'
if (isCmdZ) {
event.preventDefault()
return true
}
return false
}
useKey(undoPredicate, undo)
function download() { function download() {
const name = file.name.replace(/(\.[\w\d_-]+)$/i, '_cleanup$1') const name = file.name.replace(/(\.[\w\d_-]+)$/i, '_cleanup$1')
@ -261,32 +293,49 @@ export default function Editor(props: EditorProps) {
} }
const onSizeLimitChange = (_sizeLimit: string) => { const onSizeLimitChange = (_sizeLimit: string) => {
// TODO: clean renders
// if (renders.length !== 0) {
// }
setSizeLimit(_sizeLimit) setSizeLimit(_sizeLimit)
} }
const toggleShowBrush = (newState: boolean) => {
if (newState !== showBrush) {
setShowBrush(newState)
}
}
return ( return (
<div <div
className={[ className={[
'flex flex-col items-center', 'flex flex-col items-center',
isInpaintingLoading isInpaintingLoading ? 'animate-pulse-fast transition-opacity' : '',
? 'animate-pulse-fast pointer-events-none transition-opacity'
: '',
scale !== 1 ? 'pb-24' : '', scale !== 1 ? 'pb-24' : '',
].join(' ')} ].join(' ')}
style={{ style={{
height: scale !== 1 ? original.naturalHeight * scale : undefined, height: scale !== 1 ? original.naturalHeight * scale : undefined,
}} }}
aria-hidden="true"
onMouseMove={onMouseMove}
onMouseUp={onPointerUp}
> >
<div <div
className={[scale !== 1 ? '' : 'relative'].join(' ')} className={[scale !== 1 ? '' : 'relative'].join(' ')}
style={{ transform: `scale(${scale})`, transformOrigin: 'top center' }} style={{
transform: `scale(${scale})`,
transformOrigin: 'top center',
borderColor: `${isMultiStrokeKeyPressed ? BRUSH_COLOR : NO_COLOR}`,
borderWidth: `${8 / scale}px`,
}}
> >
<canvas <canvas
className="rounded-sm" className="rounded-sm"
style={showBrush ? { cursor: 'none' } : {}} style={showBrush ? { cursor: 'none' } : {}}
onContextMenu={e => {
e.preventDefault()
}}
onMouseOver={() => toggleShowBrush(true)}
onFocus={() => toggleShowBrush(true)}
onMouseLeave={() => toggleShowBrush(false)}
onMouseDown={onMouseDown}
onMouseMove={onMouseDrag}
ref={r => { ref={r => {
if (r && !context) { if (r && !context) {
const ctx = r.getContext('2d') const ctx = r.getContext('2d')
@ -329,7 +378,7 @@ export default function Editor(props: EditorProps) {
</div> </div>
</div> </div>
{showBrush && ( {showBrush && !isInpaintingLoading && (
<div <div
className="hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none" className="hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none"
style={{ style={{

4
lama_cleaner/app/src/components/Button.tsx
View File

@ -6,6 +6,7 @@ interface ButtonProps {
icon?: ReactNode icon?: ReactNode
primary?: boolean primary?: boolean
disabled?: boolean disabled?: boolean
onKeyDown?: () => void
onClick?: () => void onClick?: () => void
onDown?: (ev: PointerEvent) => void onDown?: (ev: PointerEvent) => void
onUp?: (ev: PointerEvent) => void onUp?: (ev: PointerEvent) => void
@ -18,6 +19,7 @@ export default function Button(props: ButtonProps) {
disabled, disabled,
icon, icon,
primary, primary,
onKeyDown,
onClick, onClick,
onDown, onDown,
onUp, onUp,
@ -36,7 +38,7 @@ export default function Button(props: ButtonProps) {
return ( return (
<div <div
role="button" role="button"
onKeyDown={onClick} onKeyDown={onKeyDown}
onClick={onClick} onClick={onClick}
onPointerDown={(ev: React.PointerEvent<HTMLDivElement>) => { onPointerDown={(ev: React.PointerEvent<HTMLDivElement>) => {
setActive(true) setActive(true)