mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
164afeeb66
This adds a new NodeModel, which can be passed from the TileLayout to contained blocks. It contains all the layout data that the block should care about, including focus status, whether a drag operation is underway, whether the node is magnified, etc. This also adds a focus stack for the layout, which will let the focus switch to the last-focused node when the currently-focused one is closed. This also addresses a regression in the resize handles that caused them to be offset from the cursor when dragged. --------- Co-authored-by: sawka <mike.sawka@gmail.com>
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import { Block } from "@/app/block/block";
|
|
import { CenteredDiv } from "@/element/quickelems";
|
|
import { ContentRenderer, NodeModel, PreviewRenderer, TileLayout } from "@/layout/index";
|
|
import { getApi } from "@/store/global";
|
|
import * as services from "@/store/services";
|
|
import * as WOS from "@/store/wos";
|
|
import { useAtomValue } from "jotai";
|
|
import * as React from "react";
|
|
import { useMemo } from "react";
|
|
import "./tabcontent.less";
|
|
|
|
const TabContent = React.memo(({ tabId }: { tabId: string }) => {
|
|
const oref = useMemo(() => WOS.makeORef("tab", tabId), [tabId]);
|
|
const loadingAtom = useMemo(() => WOS.getWaveObjectLoadingAtom(oref), [oref]);
|
|
const tabLoading = useAtomValue(loadingAtom);
|
|
const tabAtom = useMemo(() => WOS.getWaveObjectAtom<Tab>(oref), [oref]);
|
|
const tabData = useAtomValue(tabAtom);
|
|
|
|
const tileLayoutContents = useMemo(() => {
|
|
const renderBlock: ContentRenderer = (nodeModel: NodeModel) => {
|
|
return <Block key={nodeModel.blockId} nodeModel={nodeModel} preview={false} />;
|
|
};
|
|
|
|
const renderPreview: PreviewRenderer = (nodeModel: NodeModel) => {
|
|
return <Block key={nodeModel.blockId} nodeModel={nodeModel} preview={true} />;
|
|
};
|
|
|
|
function onNodeDelete(data: TabLayoutData) {
|
|
return services.ObjectService.DeleteBlock(data.blockId);
|
|
}
|
|
|
|
return {
|
|
renderContent: renderBlock,
|
|
renderPreview: renderPreview,
|
|
tabId: tabId,
|
|
onNodeDelete: onNodeDelete,
|
|
};
|
|
}, [tabId]);
|
|
|
|
if (tabLoading) {
|
|
return (
|
|
<div className="tabcontent">
|
|
<CenteredDiv>Tab Loading</CenteredDiv>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!tabData) {
|
|
return (
|
|
<div className="tabcontent">
|
|
<CenteredDiv>Tab Not Found</CenteredDiv>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (tabData?.blockids?.length == 0) {
|
|
return <div className="tabcontent tabcontent-empty"></div>;
|
|
}
|
|
|
|
return (
|
|
<div className="tabcontent">
|
|
<TileLayout
|
|
key={tabId}
|
|
contents={tileLayoutContents}
|
|
tabAtom={tabAtom}
|
|
getCursorPoint={getApi().getCursorPoint}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export { TabContent };
|