Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-04 18:59:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix useWidth usage, use overlayref directly

Browse Source
This commit is contained in:
sawka 2024-09-06 11:10:45 -07:00
parent a00dc5682e
commit c00749efeb
3 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/block/block.tsx
View File

@ -1,7 +1,7 @@
// Copyright 2024, Command Line Inc. // Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
import { BlockComponentModel, BlockProps } from "@/app/block/blocktypes"; import { BlockComponentModel2, BlockProps } from "@/app/block/blocktypes";
import { PlotView } from "@/app/view/plotview/plotview"; import { PlotView } from "@/app/view/plotview/plotview";
import { PreviewModel, PreviewView, makePreviewModel } from "@/app/view/preview/preview"; import { PreviewModel, PreviewView, makePreviewModel } from "@/app/view/preview/preview";
import { ErrorBoundary } from "@/element/errorboundary"; import { ErrorBoundary } from "@/element/errorboundary";
@ -220,7 +220,7 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
focusElemRef.current?.focus({ preventScroll: true }); focusElemRef.current?.focus({ preventScroll: true });
}, []); }, []);
const blockModel: BlockComponentModel = { const blockModel: BlockComponentModel2 = {
onClick: setBlockClickedTrue, onClick: setBlockClickedTrue,
onFocusCapture: handleChildFocus, onFocusCapture: handleChildFocus,
blockRef: blockRef, blockRef: blockRef,

22
frontend/app/block/blockframe.tsx
View File

@ -1,7 +1,6 @@
// Copyright 2024, Command Line Inc. // Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
import { BlockComponentModel } from "@/app/block/blocktypes";
import { import {
blockViewToIcon, blockViewToIcon,
blockViewToName, blockViewToName,
@ -266,12 +265,10 @@ function renderHeaderElements(headerTextUnion: HeaderElem[], preview: boolean):
const ConnStatusOverlay = React.memo( const ConnStatusOverlay = React.memo(
({ ({
blockModel,
nodeModel, nodeModel,
viewModel, viewModel,
changeConnModalAtom, changeConnModalAtom,
}: { }: {
blockModel: BlockComponentModel;
nodeModel: NodeModel; nodeModel: NodeModel;
viewModel: ViewModel; viewModel: ViewModel;
changeConnModalAtom: jotai.PrimitiveAtom<boolean>; changeConnModalAtom: jotai.PrimitiveAtom<boolean>;
@ -281,8 +278,10 @@ const ConnStatusOverlay = React.memo(
const connName = blockData.meta?.connection; const connName = blockData.meta?.connection;
const connStatus = jotai.useAtomValue(getConnStatusAtom(connName)); const connStatus = jotai.useAtomValue(getConnStatusAtom(connName));
const isLayoutMode = jotai.useAtomValue(atoms.controlShiftDelayAtom); const isLayoutMode = jotai.useAtomValue(atoms.controlShiftDelayAtom);
const width = useWidth(blockModel?.blockRef); const overlayRef = React.useRef<HTMLDivElement>(null);
const width = useWidth(overlayRef);
const [showError, setShowError] = React.useState(false); const [showError, setShowError] = React.useState(false);
const blockNum = jotai.useAtomValue(nodeModel.blockNum);
React.useEffect(() => { React.useEffect(() => {
if (width) { if (width) {
@ -319,7 +318,7 @@ const ConnStatusOverlay = React.memo(
} }
return ( return (
<div className="connstatus-overlay"> <div className="connstatus-overlay" ref={overlayRef}>
<div className="connstatus-content"> <div className="connstatus-content">
<div className={clsx("connstatus-status-icon-wrapper", { "has-error": showError })}> <div className={clsx("connstatus-status-icon-wrapper", { "has-error": showError })}>
{showIcon && <i className="fa-solid fa-triangle-exclamation"></i>} {showIcon && <i className="fa-solid fa-triangle-exclamation"></i>}
@ -443,12 +442,13 @@ const BlockFrame_Default_Component = (props: BlockFrameProps) => {
ref={blockModel?.blockRef} ref={blockModel?.blockRef}
> >
<BlockMask nodeModel={nodeModel} /> <BlockMask nodeModel={nodeModel} />
<ConnStatusOverlay {preview ? null : (
blockModel={blockModel} <ConnStatusOverlay
nodeModel={nodeModel} nodeModel={nodeModel}
viewModel={viewModel} viewModel={viewModel}
changeConnModalAtom={changeConnModalAtom} changeConnModalAtom={changeConnModalAtom}
/> />
)}
<div className="block-frame-default-inner" style={innerStyle}> <div className="block-frame-default-inner" style={innerStyle}>
<BlockFrame_Header {...props} connBtnRef={connBtnRef} changeConnModalAtom={changeConnModalAtom} /> <BlockFrame_Header {...props} connBtnRef={connBtnRef} changeConnModalAtom={changeConnModalAtom} />
{preview ? previewElem : children} {preview ? previewElem : children}

4
frontend/app/block/blocktypes.ts
View File

@ -7,14 +7,14 @@ export interface BlockProps {
nodeModel: NodeModel; nodeModel: NodeModel;
} }
export interface BlockComponentModel { export interface BlockComponentModel2 {
onClick?: () => void; onClick?: () => void;
onFocusCapture?: React.FocusEventHandler<HTMLDivElement>; onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
blockRef?: React.RefObject<HTMLDivElement>; blockRef?: React.RefObject<HTMLDivElement>;
} }
export interface BlockFrameProps { export interface BlockFrameProps {
blockModel?: BlockComponentModel; blockModel?: BlockComponentModel2;
nodeModel?: NodeModel; nodeModel?: NodeModel;
viewModel?: ViewModel; viewModel?: ViewModel;
preview: boolean; preview: boolean;