Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

more refactoring of block header. isolate atom dependencies more

Browse Source
This commit is contained in:
sawka 2024-08-01 16:01:11 -07:00
parent f13115113d
commit 6f2c99a5cf
2 changed files with 51 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,12 +71,29 @@ function getViewIconElem(viewIconUnion: string | HeaderIconButton, blockData: Bl
}
}
function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: LayoutComponentModel): JSX.Element[] {
const endIconsElem: JSX.Element[] = [];
const endIconButtons = util.useAtomValueSafe(viewModel.endIconButtons);
const OptMagnifyButton = React.memo(
({ blockData, layoutModel }: { blockData: Block; layoutModel: LayoutComponentModel }) => {
const tabId = globalStore.get(atoms.activeTabId);
const tabAtom = WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", tabId));
const layoutTreeState = util.useAtomValueSafe(getLayoutStateAtomForTab(tabId, tabAtom));
if (!isBlockMagnified(layoutTreeState, blockData.oid)) {
return null;
}
const magnifyDecl: HeaderIconButton = {
elemtype: "iconbutton",
icon: "regular@magnifying-glass-minus",
title: "Minimize",
click: layoutModel?.onMagnifyToggle,
};
return (
<IconButton key="magnify" decl={magnifyDecl} className="block-frame-endicon-button block-frame-magnify" />
);
}
);
function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: LayoutComponentModel): JSX.Element[] {
const endIconsElem: JSX.Element[] = [];
const endIconButtons = util.useAtomValueSafe(viewModel.endIconButtons);
if (endIconButtons && endIconButtons.length > 0) {
endIconsElem.push(
@ -95,17 +112,7 @@ function computeEndIcons(blockData: Block, viewModel: ViewModel, layoutModel: La
endIconsElem.push(
<IconButton key="settings" decl={settingsDecl} className="block-frame-endicon-button block-frame-settings" />
);
if (isBlockMagnified(layoutTreeState, blockData.oid)) {
const magnifyDecl: HeaderIconButton = {
elemtype: "iconbutton",
icon: "regular@magnifying-glass-minus",
title: "Minimize",
click: layoutModel?.onMagnifyToggle,
};
endIconsElem.push(
<IconButton key="magnify" decl={magnifyDecl} className="block-frame-endicon-button block-frame-magnify" />
);
}
endIconsElem.push(<OptMagnifyButton key="unmagnify" blockData={blockData} layoutModel={layoutModel} />);
const closeDecl: HeaderIconButton = {
elemtype: "iconbutton",
icon: "xmark-large",
@ -127,7 +134,6 @@ const BlockFrame_Header = ({ blockId, layoutModel, viewModel }: BlockFrameProps)
const headerTextUnion = util.useAtomValueSafe(viewModel.viewText);
const endIconsElem = computeEndIcons(blockData, viewModel, layoutModel);
const viewIconElem = getViewIconElem(viewIconUnion, blockData);
let preIconButtonElem: JSX.Element = null;
if (preIconButton) {
@ -174,51 +180,44 @@ const BlockFrame_Header = ({ blockId, layoutModel, viewModel }: BlockFrameProps)
);
};
function renderHeaderElements(headerTextUnion: HeaderElem[]): JSX.Element[] {
const headerTextElems: JSX.Element[] = [];
function renderElement(elem: HeaderElem, key: number): JSX.Element {
const HeaderTextElem = React.memo(({ elem }: { elem: HeaderElem }) => {
if (elem.elemtype == "iconbutton") {
return (
<IconButton key={key} decl={elem} className={clsx("block-frame-header-iconbutton", elem.className)} />
);
return <IconButton decl={elem} className={clsx("block-frame-header-iconbutton", elem.className)} />;
} else if (elem.elemtype == "input") {
return <Input key={key} decl={elem} className={clsx("block-frame-input", elem.className)} />;
return <Input decl={elem} className={clsx("block-frame-input", elem.className)} />;
} else if (elem.elemtype == "text") {
return (
<div key={key} className="block-frame-text">
{elem.text}
</div>
);
return <div className="block-frame-text">{elem.text}</div>;
} else if (elem.elemtype == "textbutton") {
return (
<Button key={key} className={elem.className} onClick={(e) => elem.onClick(e)}>
<Button className={elem.className} onClick={(e) => elem.onClick(e)}>
{elem.text}
</Button>
);
} else if (elem.elemtype == "div") {
return (
<div
key={key}
className={clsx("block-frame-div", elem.className)}
onMouseOver={elem.onMouseOver}
onMouseOut={elem.onMouseOut}
>
{elem.children.map((child, childIdx) => renderElement(child, childIdx))}
{elem.children.map((child, childIdx) => (
<HeaderTextElem elem={child} key={childIdx} />
))}
</div>
);
}
return null;
}
});
function renderHeaderElements(headerTextUnion: HeaderElem[]): JSX.Element[] {
const headerTextElems: JSX.Element[] = [];
for (let idx = 0; idx < headerTextUnion.length; idx++) {
const elem = headerTextUnion[idx];
const renderedElement = renderElement(elem, idx);
const renderedElement = <HeaderTextElem elem={elem} key={idx} />;
if (renderedElement) {
headerTextElems.push(renderedElement);
}
}
return headerTextElems;
}

4
frontend/app/view/cpuplot/cpuplot.tsx
View File

@ -80,10 +80,6 @@ function CpuPlotView({ model }: { model: CpuPlotViewModel }) {
const block = jotai.useAtomValue(model.blockAtom);
const incrementCount = jotai.useSetAtom(model.incrementCount); // temporary
React.useEffect(() => {
console.log("plotData:", plotData);
}, [plotData]);
React.useEffect(() => {
const temp = async () => {
await incrementCount();