Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-11 13:23:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix issues with layouteffects in block

Browse Source
This commit is contained in:
sawka 2024-09-03 10:24:00 -07:00
parent c94ff3495b
commit 9d344b899d
1 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import { CenteredDiv } from "@/element/quickelems";
import { NodeModel, useDebouncedNodeInnerRect } from "@/layout/index"; import { NodeModel, useDebouncedNodeInnerRect } from "@/layout/index";
import { counterInc, getViewModel, registerViewModel, unregisterViewModel } from "@/store/global"; import { counterInc, getViewModel, registerViewModel, unregisterViewModel } from "@/store/global";
import * as WOS from "@/store/wos"; import * as WOS from "@/store/wos";
import { getElemAsStr } from "@/util/focusutil";
import * as util from "@/util/util"; import * as util from "@/util/util";
import { CpuPlotView, CpuPlotViewModel, makeCpuPlotViewModel } from "@/view/cpuplot/cpuplot"; import { CpuPlotView, CpuPlotViewModel, makeCpuPlotViewModel } from "@/view/cpuplot/cpuplot";
import { HelpView } from "@/view/helpview/helpview"; import { HelpView } from "@/view/helpview/helpview";
@ -133,7 +134,6 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
const contentRef = React.useRef<HTMLDivElement>(null); const contentRef = React.useRef<HTMLDivElement>(null);
const [blockClicked, setBlockClicked] = React.useState(false); const [blockClicked, setBlockClicked] = React.useState(false);
const [blockData] = WOS.useWaveObjectValue<Block>(WOS.makeORef("block", nodeModel.blockId)); const [blockData] = WOS.useWaveObjectValue<Block>(WOS.makeORef("block", nodeModel.blockId));
const [focusedChild, setFocusedChild] = React.useState(null);
const isFocused = jotai.useAtomValue(nodeModel.isFocused); const isFocused = jotai.useAtomValue(nodeModel.isFocused);
const disablePointerEvents = jotai.useAtomValue(nodeModel.disablePointerEvents); const disablePointerEvents = jotai.useAtomValue(nodeModel.disablePointerEvents);
const innerRect = useDebouncedNodeInnerRect(nodeModel); const innerRect = useDebouncedNodeInnerRect(nodeModel);
@ -152,20 +152,11 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
setFocusTarget(); setFocusTarget();
} }
if (!isFocused) { if (!isFocused) {
console.log("blockClicked focus", nodeModel.blockId);
nodeModel.focusNode(); nodeModel.focusNode();
} }
}, [blockClicked]); }, [blockClicked, isFocused]);
React.useLayoutEffect(() => {
if (focusedChild == null) {
return;
}
if (!isFocused) {
nodeModel.focusNode();
}
}, [focusedChild]);
// treat the block as clicked on creation
const setBlockClickedTrue = React.useCallback(() => { const setBlockClickedTrue = React.useCallback(() => {
setBlockClicked(true); setBlockClicked(true);
}, []); }, []);
@ -201,11 +192,15 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
[nodeModel.blockId, blockData?.meta?.view, viewModel] [nodeModel.blockId, blockData?.meta?.view, viewModel]
); );
const determineFocusedChild = React.useCallback( const handleChildFocus = React.useCallback(
(event: React.FocusEvent<HTMLDivElement, Element>) => { (event: React.FocusEvent<HTMLDivElement, Element>) => {
setFocusedChild(event.target); console.log("setFocusedChild", nodeModel.blockId, getElemAsStr(event.target));
if (!isFocused) {
console.log("focusedChild focus", nodeModel.blockId);
nodeModel.focusNode();
}
}, },
[setFocusedChild] [isFocused]
); );
const setFocusTarget = React.useCallback(() => { const setFocusTarget = React.useCallback(() => {
@ -218,7 +213,7 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
const blockModel: BlockComponentModel = { const blockModel: BlockComponentModel = {
onClick: setBlockClickedTrue, onClick: setBlockClickedTrue,
onFocusCapture: determineFocusedChild, onFocusCapture: handleChildFocus,
blockRef: blockRef, blockRef: blockRef,
}; };