kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: center scaled workbench vertically

Browse Source
This commit is contained in:
kang
2026-05-20 20:09:39 +08:00
parent b4f56122f2
commit f0f567bc16
2 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/components/ad-recreation-board.tsx
View File

@@ -2229,6 +2229,7 @@ export function AdRecreationBoard({
const [runtimeModels, setRuntimeModels] = useState<RuntimeModels | undefined>()
const [boardTheme, setBoardTheme] = useState<BoardThemeMode>("dark")
const [boardScale, setBoardScale] = useState(1)
const [boardViewportSize, setBoardViewportSize] = useState({ width: 0, height: 0 })
const [libraryOpen, setLibraryOpen] = useState(false)
const fileRef = useRef<HTMLInputElement | null>(null)
const boardViewportRef = useRef<HTMLElement | null>(null)
@@ -2283,8 +2284,13 @@ export function AdRecreationBoard({
const updateBoardScale = () => {
const node = boardViewportRef.current
if (!node) return
const nextScale = resolveBoardScale(node.clientWidth)
const nextWidth = node.clientWidth
const nextHeight = node.clientHeight
const nextScale = resolveBoardScale(nextWidth)
setBoardScale((current) => (Math.abs(current - nextScale) < 0.001 ? current : nextScale))
setBoardViewportSize((current) =>
current.width === nextWidth && current.height === nextHeight ? current : { width: nextWidth, height: nextHeight },
)
}
updateBoardScale()
@@ -2501,15 +2507,21 @@ export function AdRecreationBoard({
const boardScaledWidth = Math.round(BOARD_FRAME_WIDTH * boardScale)
const boardScaledHeight = Math.round(BOARD_FRAME_HEIGHT * boardScale)
const boardViewportHeight = boardViewportSize.height || boardScaledHeight
const boardShouldCenterVertically = boardScaledHeight < boardViewportHeight
return (
<section ref={boardViewportRef} className={`skg-board-theme ${boardTheme === "light" ? "skg-board-theme--light" : ""} relative z-20 h-screen w-screen overflow-auto bg-black text-white`}>
<div className="skg-board-ambient pointer-events-none fixed inset-0" />
<div className="relative z-10 mx-auto" style={{ width: boardScaledWidth, height: boardScaledHeight }}>
<div
className="flex h-[1000px] w-[1800px] max-w-none flex-col px-4 py-4"
style={{ zoom: boardScale, transformOrigin: "top left" }}
className={`relative z-10 flex min-h-screen justify-center ${boardShouldCenterVertically ? "items-center" : "items-start"}`}
style={{ minWidth: boardScaledWidth, minHeight: Math.max(boardScaledHeight, boardViewportHeight) }}
>
<div style={{ width: boardScaledWidth, height: boardScaledHeight }}>
<div
className="flex h-[1000px] w-[1800px] max-w-none flex-col px-4 py-4"
style={{ zoom: boardScale, transformOrigin: "top left" }}
>
<header className="skg-board-topbar mb-3 flex items-center justify-between gap-4 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
<div className="skg-board-brand">
<div className="skg-board-brand__logo-chip" aria-hidden="true">
@@ -2610,7 +2622,8 @@ export function AdRecreationBoard({
/>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<LibraryDrawer