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

auto-save 2026-05-14 03:26 (~3)

Browse Source
This commit is contained in:
kang
2026-05-14 03:26:17 +08:00
parent 2144c374bd
commit 65f81efec8
3 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/components/nodes/index.tsx
View File

@@ -115,6 +115,7 @@ function clamp(value: number, min: number, max: number) {
}
const THUMBNAIL_HEIGHT = 176
const FLOATING_PANEL_EDGE_INSET = 8
function canvasThumbnailAnchor(root: HTMLDivElement | null, target: HTMLElement) {
if (!root) return { x: 160, y: 0 }
@@ -727,7 +728,7 @@ export function VideoFramePanelNode({ data }: any) {
width: panelWidth,
height: panelHeight,
maxWidth: "calc(100vw - 32px)",
maxHeight: "calc(100vh - 84px)",
maxHeight: `calc(100vh - ${FLOATING_PANEL_EDGE_INSET * 2}px)`,
boxShadow: "0 30px 80px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.05)",
}}
>
@@ -858,10 +859,10 @@ export function VideoFramePanelNode({ data }: any) {
if (docked && typeof document !== "undefined") {
const fixedStyle =
dock === "left"
? { left: 16, top: 72 }
? { left: FLOATING_PANEL_EDGE_INSET, top: FLOATING_PANEL_EDGE_INSET }
: dock === "right"
? { right: 16, top: 72 }
: { left: "50%", bottom: 16, transform: "translateX(-50%)" }
? { right: FLOATING_PANEL_EDGE_INSET, top: FLOATING_PANEL_EDGE_INSET }
: { left: "50%", bottom: FLOATING_PANEL_EDGE_INSET, transform: "translateX(-50%)" }
return createPortal(
<div className="fixed z-[240]" style={fixedStyle}>
{panel}
@@ -1486,39 +1487,16 @@ export function KeyframePanelNode({ data }: any) {
const d: NodeData = data
const { getZoom } = useReactFlow()
const panelRef = useRef<HTMLDivElement>(null)
const [pinRect, setPinRect] = useState<{ left: number; top: number }>({ left: 24, top: 72 })
const [pinRect, setPinRect] = useState<{ left: number; top: number }>({
left: FLOATING_PANEL_EDGE_INSET,
top: FLOATING_PANEL_EDGE_INSET,
})
const scale = d.framePanelScale ?? 1
const pinned = d.framePanelPinned ?? false
const getStoryboardDockTop = () => {
if (typeof window === "undefined") return 64
const dock = document.querySelector<HTMLElement>('[data-storyboard-dock="true"]')
const bar = document.querySelector<HTMLElement>('[data-storyboard-bar="true"]')
const bottom = (dock ?? bar)?.getBoundingClientRect().bottom ?? 52
return Math.max(56, Math.min(window.innerHeight - 120, bottom + 10))
}
useEffect(() => {
if (!pinned || typeof window === "undefined") return
const syncDock = () => {
setPinRect({ left: 16, top: getStoryboardDockTop() })
}
syncDock()
const bar = document.querySelector<HTMLElement>('[data-storyboard-dock="true"]')
?? document.querySelector<HTMLElement>('[data-storyboard-bar="true"]')
let observer: ResizeObserver | null = null
if (bar && "ResizeObserver" in window) {
observer = new ResizeObserver(syncDock)
observer.observe(bar)
}
window.addEventListener("resize", syncDock)
return () => {
observer?.disconnect()
window.removeEventListener("resize", syncDock)
}
if (!pinned) return
setPinRect({ left: FLOATING_PANEL_EDGE_INSET, top: FLOATING_PANEL_EDGE_INSET })
}, [pinned])
if (!d.job || d.expandedFrame === null) return null
@@ -1535,7 +1513,7 @@ export function KeyframePanelNode({ data }: any) {
if (!pinned) {
const zoom = getZoom()
setScale(scale * zoom)
setPinRect({ left: 16, top: getStoryboardDockTop() })
setPinRect({ left: FLOATING_PANEL_EDGE_INSET, top: FLOATING_PANEL_EDGE_INSET })
}
d.onFramePanelPinnedChange?.(!pinned)
}