Browse Source

拖拽节点时隐藏生成工作台/高清面板/工具胶囊

拖拽中通过 canvas-node-drag-active 祖先类将 GenerationComposer、
NodeHighDefinitionPanel(含视频高清)及节点动作胶囊 display:none,
松手移除类后自动恢复显示。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
feature/video-erase
Luckyu_js 1 week ago
parent
commit
6081817081
  1. 4
      src/components/canvas/ActiveNodeComposerHost.tsx
  2. 2
      src/components/nodes/NodeActionCapsule.tsx

4
src/components/canvas/ActiveNodeComposerHost.tsx

@ -52,7 +52,7 @@ function ComposerHostLayer({ targetNodeId }: { targetNodeId: string | null }) {
if (!isMounted || !mountedNodeId || !frame) return null; if (!isMounted || !mountedNodeId || !frame) return null;
return ( return (
<div data-active-node-composer-host className="nodrag nopan nowheel" style={frame.frameStyle}> <div data-active-node-composer-host className="nodrag nopan nowheel [.canvas-node-drag-active_&]:hidden" style={frame.frameStyle}>
<BelowNodeAnchor> <BelowNodeAnchor>
<div hidden={!shouldShow} className="pointer-events-auto flex flex-col items-center gap-2"> <div hidden={!shouldShow} className="pointer-events-auto flex flex-col items-center gap-2">
<GenerationComposer <GenerationComposer
@ -75,7 +75,7 @@ function HighDefinitionHostLayer({ nodeId }: { nodeId: string | null }) {
const frame = useNodeCanvasFrame(nodeId); const frame = useNodeCanvasFrame(nodeId);
if (!nodeId || !frame) return null; if (!nodeId || !frame) return null;
return ( return (
<div data-active-node-high-definition-host className="nodrag nopan nowheel" style={frame.frameStyle}> <div data-active-node-high-definition-host className="nodrag nopan nowheel [.canvas-node-drag-active_&]:hidden" style={frame.frameStyle}>
<BelowNodeAnchor> <BelowNodeAnchor>
<NodeHighDefinitionPanel node={frame.node} /> <NodeHighDefinitionPanel node={frame.node} />
</BelowNodeAnchor> </BelowNodeAnchor>

2
src/components/nodes/NodeActionCapsule.tsx

@ -53,7 +53,7 @@ export const NodeActionCapsuleShell = forwardRef<HTMLDivElement, NodeActionCapsu
ref={ref} ref={ref}
onMouseDown={onMouseDown} onMouseDown={onMouseDown}
style={style} style={style}
className={`nodrag nopan absolute left-1/2 z-[10002] flex -translate-x-1/2 items-center gap-2 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-4 py-3 text-xl text-[var(--text-secondary)] shadow-[var(--shadow-panel)] ${topClassName} ${className}`} className={`nodrag nopan absolute left-1/2 z-[10002] flex -translate-x-1/2 items-center gap-2 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-4 py-3 text-xl text-[var(--text-secondary)] shadow-[var(--shadow-panel)] [.canvas-node-drag-active_&]:hidden ${topClassName} ${className}`}
> >
{children} {children}
</div> </div>

Loading…
Cancel
Save