paperclip-bot/labelimage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tool): fix size bug

Browse Source
This commit is contained in:
zhangheng
2026-04-15 17:13:28 +08:00
parent da6a33a368
commit dfd5f0fca1
4 changed files with 136 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
components/label/LabelNossr.tsx
View File

@@ -83,6 +83,11 @@ let latestTaskDetailRequestSeq = 0
const RIGHT_PANEL_TRANSITION =
"width 160ms ease, min-width 160ms ease, opacity 160ms ease"
const RIGHT_PANEL_WILL_CHANGE = "width, min-width, opacity"
const RIGHT_PANEL_SEPARATOR =
"1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))"
const RIGHT_PANEL_SOFT_MAIN_MIN_WIDTH = 420
const RIGHT_PANEL_HARD_MAIN_MIN_WIDTH = 260
const RIGHT_PANEL_TARGET_WIDTH = 350
// utils
const getRectPoints = ([sx, sy, w, h]: number[]) => {
@@ -111,6 +116,51 @@ const getRightPanelViewportStyle = (width: number) => {
}
}
const allocateRightPanelSizes = (
availableWidth: number,
visibleFlags: boolean[]
) => {
const resolvedWidth = Math.max(0, Math.round(availableWidth))
const nextSizes = [resolvedWidth, 0, 0, 0, 0, 0]
const activeIndexes = visibleFlags.reduce<number[]>((result, flag, index) => {
if (flag) result.push(index + 1)
return result
}, [])
if (!activeIndexes.length) return nextSizes
const activeCount = activeIndexes.length
const softPanelBudget = Math.max(
0,
resolvedWidth - RIGHT_PANEL_SOFT_MAIN_MIN_WIDTH
)
const hardPanelBudget = Math.max(
0,
resolvedWidth - RIGHT_PANEL_HARD_MAIN_MIN_WIDTH
)
let panelWidth = Math.min(
RIGHT_PANEL_TARGET_WIDTH,
Math.floor(softPanelBudget / activeCount)
)
if (panelWidth < RIGHT_PANEL_TARGET_WIDTH) {
panelWidth = Math.min(
RIGHT_PANEL_TARGET_WIDTH,
Math.floor(hardPanelBudget / activeCount)
)
}
panelWidth = Math.max(0, panelWidth)
activeIndexes.forEach((index) => {
nextSizes[index] = panelWidth
})
const rightPanelTotalWidth = panelWidth * activeCount
nextSizes[0] = Math.max(0, resolvedWidth - rightPanelTotalWidth)
return nextSizes
}
const videoExtPattern = /\.(mp4|mov|avi|mkv|webm|h264|264|ts|m4v)$/i
const GLOBAL_LOADING_Z_INDEX = 900
const videoMimeByExt: Record<string, string> = {
@@ -233,7 +283,7 @@ const LabelPage = ({
const qaToolContainerRef = useRef<any>(null)
const [isConfirmSave, setIsConfirmSave] = useState(false)
const [loading, setLoading] = useState(false)
const [sizes, setSizes] = useState<number[]>([])
const [sizes, setSizes] = useState<number[]>([0, 0, 0, 0, 0, 0])
const [videoFetchPendingCount, setVideoFetchPendingCount] = useState(0)
const [hasReadyVideoFrame, setHasReadyVideoFrame] = useState(false)
const [sourceVideoNames, setSourceVideoNames] = useState<string[]>([])
@@ -2479,51 +2529,35 @@ const LabelPage = ({
// 更新Splitter状态
const updateSplitterSizes = useCallback(() => {
console.log(
"document.documentElement.clientWidth",
document.documentElement.clientWidth
const availableWidth = Math.max(
document.documentElement.clientWidth - leftWidth - 4,
0
)
const len = document.documentElement.clientWidth - 4
let arr = [len, 0, 0, 0, 0, 0]
const flags = [
const flags: boolean[] = [
showTaskList,
showGroupList,
showDescList && projectDetail && projectDetail.label_type === 5,
showDescList && projectDetail && projectDetail.label_type === 6,
(showDescList && projectDetail && projectDetail.label_type === 5) ||
false,
(showDescList && projectDetail && projectDetail.label_type === 6) ||
false,
showObjectList,
]
let count = 0
flags.forEach((flag) => {
if (flag) count++
})
if (count === 1 || count === 2) {
arr[0] = count === 1 ? len * 0.8 : len * 0.6
flags.forEach((flag, index) => {
if (flag) {
arr[index + 1] = len * 0.2
}
})
} else if (count === 3) {
arr[0] = len * 0.55
flags.forEach((flag, index) => {
if (flag) {
arr[index + 1] = len * 0.15
}
})
} else if (count === 4) {
arr[0] = len * 0.6
flags.forEach((flag, index) => {
if (flag) {
arr[index + 1] = len * 0.1
}
})
}
setSizes(arr)
}, [projectDetail, showDescList, showGroupList, showObjectList, showTaskList])
setSizes(allocateRightPanelSizes(availableWidth, flags))
}, [
leftWidth,
projectDetail,
showDescList,
showGroupList,
showObjectList,
showTaskList,
])
useEffect(() => {
updateSplitterSizes()
window.addEventListener("resize", updateSplitterSizes)
return () => {
window.removeEventListener("resize", updateSplitterSizes)
}
}, [updateSplitterSizes])
useEffect(() => {
@@ -2702,7 +2736,7 @@ const LabelPage = ({
</Box>
<Flex w="calc(100% - 4px)" h={mainBoxHeight}>
{/* <Flex h="100%" w={"100%"}> */}
<Box w={sizes[0] - leftWidth} style={{ flexShrink: 0 }}>
<Box w={sizes[0]} style={{ flexShrink: 0, minWidth: 0 }}>
<Box h="100%" id="resize-container">
<Flex h="100%" w="100%">
<Flex
@@ -2780,7 +2814,7 @@ const LabelPage = ({
</Box>
<Box
w={sizes[1]}
miw={showTaskList ? 300 : 0}
miw={showTaskList ? sizes[1] : 0}
style={{
position: "relative",
flexShrink: 0,
@@ -2788,10 +2822,11 @@ const LabelPage = ({
opacity: showTaskList ? 1 : 0,
visibility: showTaskList ? "visible" : "hidden",
pointerEvents: showTaskList ? "auto" : "none",
borderLeft: showTaskList ? RIGHT_PANEL_SEPARATOR : "none",
transition: RIGHT_PANEL_TRANSITION,
willChange: RIGHT_PANEL_WILL_CHANGE,
}}>
<Box style={getRightPanelViewportStyle(Math.max(sizes[1], 300))}>
<Box style={getRightPanelViewportStyle(sizes[1])}>
<RightTaskTools
projectDetail={projectDetail}
project_id={projectId}
@@ -2801,7 +2836,7 @@ const LabelPage = ({
</Box>
<Box
w={sizes[2]}
miw={showGroupList ? 200 : 0}
miw={showGroupList ? sizes[2] : 0}
style={{
position: "relative",
flexShrink: 0,
@@ -2809,10 +2844,11 @@ const LabelPage = ({
opacity: showGroupList ? 1 : 0,
visibility: showGroupList ? "visible" : "hidden",
pointerEvents: showGroupList ? "auto" : "none",
borderLeft: showGroupList ? RIGHT_PANEL_SEPARATOR : "none",
transition: RIGHT_PANEL_TRANSITION,
willChange: RIGHT_PANEL_WILL_CHANGE,
}}>
<Box style={getRightPanelViewportStyle(Math.max(sizes[2], 200))}>
<Box style={getRightPanelViewportStyle(sizes[2])}>
<RightGroupTools
labelState={labelState}
projectDetail={projectDetail}
@@ -2823,7 +2859,7 @@ const LabelPage = ({
w={sizes[3]}
miw={
showDescList && projectDetail && projectDetail.label_type === 5
? 350
? sizes[3]
: 0
}
style={{
@@ -2842,10 +2878,14 @@ const LabelPage = ({
showDescList && projectDetail && projectDetail.label_type === 5
? "auto"
: "none",
borderLeft:
showDescList && projectDetail && projectDetail.label_type === 5
? RIGHT_PANEL_SEPARATOR
: "none",
transition: RIGHT_PANEL_TRANSITION,
willChange: RIGHT_PANEL_WILL_CHANGE,
}}>
<Box style={getRightPanelViewportStyle(Math.max(sizes[3], 350))}>
<Box style={getRightPanelViewportStyle(sizes[3])}>
<RightDescTools taskDetail={taskDetail} />
</Box>
</Box>
@@ -2853,7 +2893,7 @@ const LabelPage = ({
w={sizes[4]}
miw={
showDescList && projectDetail && projectDetail.label_type === 6
? 350
? sizes[4]
: 0
}
style={{
@@ -2872,16 +2912,20 @@ const LabelPage = ({
showDescList && projectDetail && projectDetail.label_type === 6
? "auto"
: "none",
borderLeft:
showDescList && projectDetail && projectDetail.label_type === 6
? RIGHT_PANEL_SEPARATOR
: "none",
transition: RIGHT_PANEL_TRANSITION,
willChange: RIGHT_PANEL_WILL_CHANGE,
}}>
<Box style={getRightPanelViewportStyle(Math.max(sizes[4], 350))}>
<Box style={getRightPanelViewportStyle(sizes[4])}>
<RightQATools ref={qaToolContainerRef} taskDetail={taskDetail} />
</Box>
</Box>
<Box
w={sizes[5]}
miw={showObjectList ? 350 : 0}
miw={showObjectList ? sizes[5] : 0}
style={{
position: "relative",
flexShrink: 0,
@@ -2889,10 +2933,11 @@ const LabelPage = ({
opacity: showObjectList ? 1 : 0,
visibility: showObjectList ? "visible" : "hidden",
pointerEvents: showObjectList ? "auto" : "none",
borderLeft: showObjectList ? RIGHT_PANEL_SEPARATOR : "none",
transition: RIGHT_PANEL_TRANSITION,
willChange: RIGHT_PANEL_WILL_CHANGE,
}}>
<Box style={getRightPanelViewportStyle(Math.max(sizes[5], 350))}>
<Box style={getRightPanelViewportStyle(sizes[5])}>
<RightObjectTools
taskDetail={taskDetail}
labelState={labelState}