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

fix: remove fixed board canvas scaling

Browse Source
This commit is contained in:
kang
2026-05-20 23:05:06 +08:00
parent dbedabaae4
commit 6597db312b
2 changed files with 16 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/source-analysis.html
View File

File diff suppressed because one or more lines are too long

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

@@ -103,11 +103,6 @@ type BoardThemeMode = "dark" | "light"
type AudioStoryboardRole = "hook" | "pain" | "proof" | "solution" | "cta" | "bridge"
const BOARD_THEME_STORAGE_KEY = "skg-board-theme"
const BOARD_FRAME_WIDTH = 1800
const BOARD_FRAME_HEIGHT = 1000
const BOARD_MIN_SCALE = 0.72
const BOARD_MAX_SCALE = 1.6
const BOARD_SCALE_PRESETS = [0.72, 0.76, 0.8, 0.86, 0.92, 1, 1.06, 1.16, 1.24, 1.34, 1.48, 1.6]
const SOURCE_LEFT_COLUMN_WIDTH = 380
const SOURCE_VIDEO_HEIGHT = 500
const SOURCE_TRANSCRIPT_MAX_HEIGHT = 270
@@ -115,12 +110,6 @@ const SOURCE_REFERENCE_POOL_WIDTH = 140
const SOURCE_CONVERSION_MAX_HEIGHT = 560
const SOURCE_SUBJECT_EMPTY_HEIGHT = 78
const resolveBoardScale = (viewportWidth: number) => {
const maxFitScale = clampNumber(viewportWidth / BOARD_FRAME_WIDTH, BOARD_MIN_SCALE, BOARD_MAX_SCALE)
const preset = BOARD_SCALE_PRESETS.reduce((best, candidate) => (candidate <= maxFitScale ? candidate : best), BOARD_MIN_SCALE)
return Math.round(preset * 1000) / 1000
}
type DraftSegment = {
id: string
frameIndex: number | null
@@ -2234,11 +2223,8 @@ export function AdRecreationBoard({
const [generatingAll, setGeneratingAll] = useState(false)
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)
const selectedFrames = job
? job.frames.filter((frame) => data.selectedFrames.has(frame.index)).sort((a, b) => a.timestamp - b.timestamp)
: []
@@ -2286,30 +2272,6 @@ export function AdRecreationBoard({
}
}, [])
useEffect(() => {
const updateBoardScale = () => {
const node = boardViewportRef.current
if (!node) return
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()
const node = boardViewportRef.current
if (node && typeof ResizeObserver !== "undefined") {
const observer = new ResizeObserver(updateBoardScale)
observer.observe(node)
return () => observer.disconnect()
}
window.addEventListener("resize", updateBoardScale)
return () => window.removeEventListener("resize", updateBoardScale)
}, [])
useEffect(() => {
let cancelled = false
getRuntimeHealth()
@@ -2511,23 +2473,10 @@ 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`}>
<section className={`skg-board-theme ${boardTheme === "light" ? "skg-board-theme--light" : ""} relative z-20 min-h-screen w-full overflow-auto bg-black text-white`}>
<div className="skg-board-ambient pointer-events-none fixed inset-0" />
<div
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" }}
>
<div className="relative z-10 mx-auto flex min-h-screen w-full min-w-[1280px] max-w-[1920px] flex-col px-4 py-4 xl:px-5">
<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">
@@ -2630,8 +2579,6 @@ export function AdRecreationBoard({
</section>
</div>
</div>
</div>
</div>
<LibraryDrawer
open={libraryOpen}
currentJobId={job?.id}