SILVER/NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix Beam viewer side panel teardown

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-06-05 18:43:16 +03:00
parent 81abcb5b36
commit e4fd2a5eff
2 changed files with 168 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plane-src/apps/web/core/components/issues/peek-overview/view.tsx
+86 -85
View File
@@ -38,6 +38,7 @@ import { IssuePeekOverviewLoader } from "./loader";
import { PeekOverviewProperties } from "./properties";
const SIDE_PEEK_WIDTH_STORAGE_KEY = "nodedc:issue-peek-width";
const BEAM_VIEWER_CLOSING_CLASS_NAME = "nodedc-beam-viewer-closing";
interface IIssueView {
workspaceSlug: string;
@@ -94,6 +95,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
const [beamPeekViewer, setBeamPeekViewer] = useState<TBeamViewerOpenEventDetail | null>(null);
const [isBeamPeekFullscreen, setIsBeamPeekFullscreen] = useState(false);
const [isBeamPeekClosing, setIsBeamPeekClosing] = useState(false);
const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => {
if (typeof window === "undefined") return 720;
@@ -106,11 +108,12 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const [isResizingPeek, setIsResizingPeek] = useState(false);
// ref
const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
const beamPeekViewerRef = useRef<HTMLDivElement>(null);
const editorRef = useRef<EditorRefApi>(null);
const initialPeekWidthRef = useRef<number>(0);
const initialMouseXRef = useRef<number>(0);
const livePeekWidthRef = useRef<number>(sidePeekWidth);
const resizeAnimationFrameRef = useRef<number | null>(null);
const beamCloseTimeoutRef = useRef<number | null>(null);
// store hooks
const {
setPeekIssue,
@@ -135,19 +138,57 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const isAnyLocalModalOpen =
isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen;
const shouldUseBeamPeekShell = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;
const shouldShowBeamPeekViewer = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;
const clearBeamCloseTimeout = useCallback(() => {
if (typeof window === "undefined" || beamCloseTimeoutRef.current === null) return;
window.clearTimeout(beamCloseTimeoutRef.current);
beamCloseTimeoutRef.current = null;
}, []);
const closeBeamPeekViewer = useCallback(
(event?: ReactMouseEvent<HTMLButtonElement>) => {
event?.preventDefault();
event?.stopPropagation();
if (isBeamPeekClosing) return;
if (typeof document !== "undefined" && document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
clearBeamCloseTimeout();
document.documentElement.classList.add(BEAM_VIEWER_CLOSING_CLASS_NAME);
setIsBeamPeekClosing(true);
setIsBeamPeekFullscreen(false);
beamCloseTimeoutRef.current = window.setTimeout(() => {
beamCloseTimeoutRef.current = null;
setBeamPeekViewer(null);
setIsBeamPeekClosing(false);
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
}, 140);
},
[clearBeamCloseTimeout, isBeamPeekClosing]
);
useEffect(
() => () => {
clearBeamCloseTimeout();
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
},
[clearBeamCloseTimeout]
);
useEffect(() => {
if (typeof window === "undefined" || !shouldUseBeamPeekShell) return;
if (typeof window === "undefined" || !shouldShowBeamPeekViewer) return;
const root = document.documentElement;
root.classList.add("nodedc-beam-viewer-interaction-lock");
const isViewerEvent = (event: Event) => {
const shell = issuePeekOverviewRef.current;
if (!shell) return false;
const viewerCard = shell.querySelector(".nodedc-beam-peek-viewer-card");
const viewerCard = beamPeekViewerRef.current?.querySelector(".nodedc-beam-peek-viewer-card");
const target = event.target instanceof Node ? event.target : null;
const path = typeof event.composedPath === "function" ? event.composedPath() : [];
@@ -181,30 +222,20 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
window.removeEventListener("pointermove", stopViewerGestureLeak, passiveOptions);
window.removeEventListener("pointerup", stopViewerGestureLeak, passiveOptions);
};
}, [shouldUseBeamPeekShell]);
}, [shouldShowBeamPeekViewer]);
const getMaxSidePeekWidth = useCallback(() => {
if (typeof window === "undefined") return 720;
const minWidth = 640;
if (shouldUseBeamPeekShell && !isBeamPeekFullscreen) {
if (shouldShowBeamPeekViewer && !isBeamPeekFullscreen) {
return Math.max(minWidth, Math.floor((window.innerWidth - 24) / 2));
}
return Math.max(720, window.innerWidth - 48);
}, [isBeamPeekFullscreen, shouldUseBeamPeekShell]);
}, [isBeamPeekFullscreen, shouldShowBeamPeekViewer]);
const stopPeekResizing = useCallback(() => {
if (resizeAnimationFrameRef.current !== null) {
window.cancelAnimationFrame(resizeAnimationFrameRef.current);
resizeAnimationFrameRef.current = null;
}
if (shouldUseBeamPeekShell) {
issuePeekOverviewRef.current?.style.setProperty("--nodedc-beam-peek-width", `${livePeekWidthRef.current}px`);
setSidePeekWidth(livePeekWidthRef.current);
}
setIsResizingPeek(false);
}, [shouldUseBeamPeekShell]);
}, []);
const handlePeekResize = useCallback(
(event: MouseEvent) => {
@@ -215,25 +246,10 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const deltaX = event.clientX - initialMouseXRef.current;
const nextWidth = Math.min(Math.max(initialPeekWidthRef.current - deltaX, minWidth), maxWidth);
if (shouldUseBeamPeekShell) {
livePeekWidthRef.current = nextWidth;
if (resizeAnimationFrameRef.current === null) {
resizeAnimationFrameRef.current = window.requestAnimationFrame(() => {
issuePeekOverviewRef.current?.style.setProperty(
"--nodedc-beam-peek-width",
`${livePeekWidthRef.current}px`
);
resizeAnimationFrameRef.current = null;
});
}
return;
}
livePeekWidthRef.current = nextWidth;
setSidePeekWidth(nextWidth);
},
[getMaxSidePeekWidth, isResizingPeek, shouldUseBeamPeekShell]
[getMaxSidePeekWidth, isResizingPeek]
);
const startPeekResizing = useCallback(
@@ -276,32 +292,29 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
livePeekWidthRef.current = sidePeekWidth;
}, [sidePeekWidth]);
useEffect(
() => () => {
if (resizeAnimationFrameRef.current !== null) {
window.cancelAnimationFrame(resizeAnimationFrameRef.current);
}
},
[]
);
useEffect(() => {
clearBeamCloseTimeout();
setBeamPeekViewer(null);
setIsBeamPeekFullscreen(false);
}, [issueId]);
setIsBeamPeekClosing(false);
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
}, [clearBeamCloseTimeout, issueId]);
useEffect(() => {
const handleOpenBeamViewer = (event: Event) => {
const detail = (event as CustomEvent<TBeamViewerOpenEventDetail>).detail;
if (!detail?.viewerUrl || detail.issueId !== issueId) return;
clearBeamCloseTimeout();
setPeekMode("side-peek");
setIsBeamPeekClosing(false);
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
setBeamPeekViewer(detail);
setIsBeamPeekFullscreen(false);
};
window.addEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
return () => window.removeEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
}, [issueId]);
}, [clearBeamCloseTimeout, issueId]);
useEffect(() => {
if (!isResizingPeek) return;
@@ -342,8 +355,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const dropdownElement = document.activeElement?.tagName === "INPUT";
const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
if (beamPeekViewer) {
setBeamPeekViewer(null);
setIsBeamPeekFullscreen(false);
closeBeamPeekViewer();
return;
}
if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) {
@@ -365,17 +377,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
shouldRenderPeekSurface
? "flex flex-col overflow-hidden border border-subtle/70 bg-surface-1/80 backdrop-blur-2xl transition-all duration-300"
: "h-full w-full",
!embedIssue && !shouldUseBeamPeekShell && "absolute z-[80]",
!embedIssue &&
!shouldUseBeamPeekShell && {
"nodedc-peek-side-bound top-[5.35rem] right-3 w-[calc(100%-1.5rem)] rounded-[28px] border md:max-w-[calc(100vw-1.5rem)] md:min-w-[640px]":
peekMode === "side-peek",
"nodedc-peek-modal-bound rounded-[28px]": peekMode === "modal",
"nodedc-peek-full-bound rounded-[28px]": peekMode === "full-screen",
},
!embedIssue &&
shouldUseBeamPeekShell &&
"nodedc-beam-peek-issue-card relative h-full rounded-[28px] border md:min-w-[640px]",
!embedIssue && "absolute z-[80]",
!embedIssue && {
"nodedc-peek-side-bound top-[5.35rem] right-3 w-[calc(100%-1.5rem)] rounded-[28px] border md:max-w-[calc(100vw-1.5rem)] md:min-w-[640px]":
peekMode === "side-peek",
"nodedc-peek-modal-bound rounded-[28px]": peekMode === "modal",
"nodedc-peek-full-bound rounded-[28px]": peekMode === "full-screen",
},
!embedIssue && isBeamPeekClosing && "nodedc-beam-peek-closing !transition-none !duration-0",
shouldUseInteractiveEmbeddedLayout && {
"relative ml-auto h-full rounded-[28px]": peekMode === "side-peek",
"relative mx-auto my-3 h-[calc(100%-1.5rem)] w-full max-w-[min(1080px,100%)] rounded-[28px]":
@@ -389,23 +398,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
const issuePanelStyle = {
width: shouldUseBeamPeekShell
? "100%"
: shouldAllowPeekResize && peekMode === "side-peek"
? `${sidePeekWidth}px`
: undefined,
boxShadow:
shouldRenderPeekSurface && !shouldUseBeamPeekShell
? "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)"
: undefined,
width: shouldAllowPeekResize && peekMode === "side-peek" ? `${sidePeekWidth}px` : undefined,
boxShadow: shouldRenderPeekSurface
? "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)"
: undefined,
};
const issuePanel = issueId ? (
<div
ref={shouldUseBeamPeekShell ? undefined : issuePeekOverviewRef}
className={peekOverviewIssueClassName}
style={issuePanelStyle}
>
<div ref={issuePeekOverviewRef} className={peekOverviewIssueClassName} style={issuePanelStyle}>
{shouldAllowPeekResize && peekMode === "side-peek" && (
<div
className="absolute top-0 left-0 z-[81] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
@@ -558,12 +558,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const content = (
<div className="w-full text-body-sm-regular">
{shouldUseBeamPeekShell && beamPeekViewer ? (
{shouldShowBeamPeekViewer && beamPeekViewer && (
<div
ref={issuePeekOverviewRef}
className="nodedc-beam-peek-shell"
ref={beamPeekViewerRef}
className="nodedc-beam-peek-viewer-layer"
data-prevent-outside-click
data-fullscreen={isBeamPeekFullscreen ? "true" : "false"}
data-resizing={isResizingPeek ? "true" : "false"}
data-closing={isBeamPeekClosing ? "true" : "false"}
style={
{
"--nodedc-beam-peek-width": `${sidePeekWidth}px`,
@@ -602,10 +604,11 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
<button
type="button"
className="grid size-10 place-items-center rounded-full bg-black/45 text-white backdrop-blur-md transition hover:bg-black/60"
onClick={() => {
setBeamPeekViewer(null);
setIsBeamPeekFullscreen(false);
onMouseDown={(event) => {
event.preventDefault();
event.stopPropagation();
}}
onClick={closeBeamPeekViewer}
title="Закрыть"
>
<X className="size-5" />
@@ -622,11 +625,9 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
/>
{isResizingPeek && <div className="nodedc-beam-peek-resize-shield" aria-hidden="true" />}
</section>
<div className="nodedc-beam-peek-issue-slot">{issuePanel}</div>
</div>
) : (
issuePanel
)}
{issuePanel}
</div>
);