100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
"use client"
|
||
|
||
import { Button, Group, NumberInput, Stack, Text } from "@mantine/core"
|
||
import { useEffect, useMemo, useState } from "react"
|
||
import CustomModal from "./CustomModal"
|
||
|
||
interface ComponentProps {
|
||
open: boolean
|
||
defaultFactor: number
|
||
selectedObjectCount: number
|
||
canRepairImage: boolean
|
||
handleCancel: () => void
|
||
handleRepairObject: (factor: number) => void
|
||
handleRepairImage: (factor: number) => void
|
||
}
|
||
|
||
const RepairScaleModal = ({
|
||
open,
|
||
defaultFactor,
|
||
selectedObjectCount,
|
||
canRepairImage,
|
||
handleCancel,
|
||
handleRepairObject,
|
||
handleRepairImage,
|
||
}: ComponentProps) => {
|
||
const [factorInput, setFactorInput] = useState<number | string>(1)
|
||
|
||
useEffect(() => {
|
||
if (!open) return
|
||
const nextFactor =
|
||
Number.isFinite(defaultFactor) && defaultFactor > 0
|
||
? Number(defaultFactor.toFixed(6))
|
||
: 1
|
||
setFactorInput(nextFactor)
|
||
}, [defaultFactor, open])
|
||
|
||
const normalizedFactor = useMemo(() => {
|
||
if (typeof factorInput === "number") return factorInput
|
||
return Number(factorInput)
|
||
}, [factorInput])
|
||
|
||
const factorError =
|
||
Number.isFinite(normalizedFactor) && normalizedFactor > 0
|
||
? null
|
||
: "请输入大于 0 的修复因子"
|
||
|
||
return (
|
||
<CustomModal
|
||
title="修复标注对象"
|
||
open={open}
|
||
onCancel={handleCancel}
|
||
centered
|
||
closeOnClickOutside={false}
|
||
footer={
|
||
<Group justify="flex-end" gap="xs" mt="md">
|
||
<Button variant="default" onClick={handleCancel}>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
variant="light"
|
||
onClick={() => handleRepairObject(normalizedFactor)}
|
||
disabled={!!factorError || selectedObjectCount !== 1}>
|
||
修复当前对象
|
||
</Button>
|
||
<Button
|
||
onClick={() => handleRepairImage(normalizedFactor)}
|
||
disabled={!!factorError || !canRepairImage}>
|
||
修复当前图片
|
||
</Button>
|
||
</Group>
|
||
}>
|
||
<Stack gap="sm">
|
||
<Text size="sm" c="dimmed">
|
||
该工具会将当前页面里的标注几何点统一除以修复因子，默认值取当前图片比例
|
||
`rasterScale`。修复后请先检查显示效果，再决定是否保存。
|
||
</Text>
|
||
<NumberInput
|
||
label="修复因子"
|
||
placeholder="请输入大于 0 的修复因子"
|
||
value={factorInput}
|
||
onChange={setFactorInput}
|
||
allowNegative={false}
|
||
decimalScale={6}
|
||
min={0.000001}
|
||
error={factorError || undefined}
|
||
/>
|
||
<Text size="xs" c="dimmed">
|
||
当前已选对象数：{selectedObjectCount}。修复当前对象需要恰好选中 1
|
||
个对象。
|
||
</Text>
|
||
<Text size="xs" c="dimmed">
|
||
当前图片{canRepairImage ? "已有" : "暂无"}可修复标注数据。
|
||
</Text>
|
||
</Stack>
|
||
</CustomModal>
|
||
)
|
||
}
|
||
|
||
export default RepairScaleModal
|