fix useWidth usage, use overlayref directly

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

View File

@ -1,7 +1,7 @@
// Copyright 2024, Command Line Inc.
// 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 { PreviewModel, PreviewView, makePreviewModel } from "@/app/view/preview/preview";
import { ErrorBoundary } from "@/element/errorboundary";
@ -220,7 +220,7 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
focusElemRef.current?.focus({ preventScroll: true });
}, []);
const blockModel: BlockComponentModel = {
const blockModel: BlockComponentModel2 = {
onClick: setBlockClickedTrue,
onFocusCapture: handleChildFocus,
blockRef: blockRef,

View File

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

View File

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