2024-05-16 09:29:58 +02:00
|
|
|
// Copyright 2024, Command Line Inc.
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
|
|
|
import * as React from "react";
|
|
|
|
import * as jotai from "jotai";
|
|
|
|
import { TabContent } from "@/app/tab/tab";
|
|
|
|
import { clsx } from "clsx";
|
|
|
|
import { atoms, addBlockIdToTab, blockDataMap } from "@/store/global";
|
|
|
|
import { v4 as uuidv4 } from "uuid";
|
2024-05-21 20:09:22 +02:00
|
|
|
import { BlockService } from "@/bindings/blockservice";
|
2024-05-24 23:08:24 +02:00
|
|
|
import { ClientService } from "@/bindings/clientservice";
|
|
|
|
import { Workspace } from "@/gopkg/wstore";
|
2024-05-22 18:23:16 +02:00
|
|
|
import * as wstore from "@/gopkg/wstore";
|
2024-05-24 23:08:24 +02:00
|
|
|
import * as jotaiUtil from "jotai/utils";
|
2024-05-16 09:29:58 +02:00
|
|
|
|
|
|
|
import "./workspace.less";
|
2024-05-24 23:08:24 +02:00
|
|
|
import { CenteredLoadingDiv, CenteredDiv } from "../element/quickelems";
|
2024-05-16 09:29:58 +02:00
|
|
|
|
2024-05-24 23:08:24 +02:00
|
|
|
function Tab({ tab }: { tab: wstore.Tab }) {
|
2024-05-16 09:29:58 +02:00
|
|
|
const [activeTab, setActiveTab] = jotai.useAtom(atoms.activeTabId);
|
|
|
|
return (
|
|
|
|
<div className={clsx("tab", { active: activeTab === tab.tabid })} onClick={() => setActiveTab(tab.tabid)}>
|
|
|
|
{tab.name}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function TabBar() {
|
|
|
|
const [tabData, setTabData] = jotai.useAtom(atoms.tabsAtom);
|
|
|
|
const [activeTab, setActiveTab] = jotai.useAtom(atoms.activeTabId);
|
|
|
|
const tabs = jotai.useAtomValue(atoms.tabsAtom);
|
2024-05-24 23:08:24 +02:00
|
|
|
const client = jotai.useAtomValue(atoms.clientAtom);
|
2024-05-16 09:29:58 +02:00
|
|
|
|
|
|
|
function handleAddTab() {
|
|
|
|
const newTabId = uuidv4();
|
|
|
|
const newTabName = "Tab " + (tabData.length + 1);
|
2024-05-24 23:08:24 +02:00
|
|
|
setTabData([...tabData, { name: newTabName, tabid: newTabId, blockids: [] }]);
|
2024-05-16 09:29:58 +02:00
|
|
|
setActiveTab(newTabId);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="tab-bar">
|
|
|
|
{tabs.map((tab, idx) => {
|
|
|
|
return <Tab key={idx} tab={tab} />;
|
|
|
|
})}
|
|
|
|
<div className="tab-add" onClick={() => handleAddTab()}>
|
|
|
|
<i className="fa fa-solid fa-plus fa-fw" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function Widgets() {
|
|
|
|
const activeTabId = jotai.useAtomValue(atoms.activeTabId);
|
|
|
|
|
2024-05-24 23:08:24 +02:00
|
|
|
async function createBlock(blockDef: wstore.BlockDef) {
|
|
|
|
const rtOpts: wstore.RuntimeOpts = new wstore.RuntimeOpts({ termsize: { rows: 25, cols: 80 } });
|
2024-05-22 18:23:16 +02:00
|
|
|
const rtnBlock: wstore.Block = await BlockService.CreateBlock(blockDef, rtOpts);
|
2024-05-16 09:29:58 +02:00
|
|
|
const newBlockAtom = jotai.atom(rtnBlock);
|
|
|
|
blockDataMap.set(rtnBlock.blockid, newBlockAtom);
|
|
|
|
addBlockIdToTab(activeTabId, rtnBlock.blockid);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function clickTerminal() {
|
2024-05-24 23:08:24 +02:00
|
|
|
const termBlockDef = new wstore.BlockDef({
|
2024-05-16 09:29:58 +02:00
|
|
|
controller: "shell",
|
|
|
|
view: "term",
|
2024-05-24 23:08:24 +02:00
|
|
|
});
|
2024-05-16 09:29:58 +02:00
|
|
|
createBlock(termBlockDef);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function clickPreview(fileName: string) {
|
2024-05-24 23:08:24 +02:00
|
|
|
const markdownDef = new wstore.BlockDef({
|
2024-05-16 09:29:58 +02:00
|
|
|
view: "preview",
|
|
|
|
meta: { file: fileName },
|
2024-05-24 23:08:24 +02:00
|
|
|
});
|
2024-05-16 09:29:58 +02:00
|
|
|
createBlock(markdownDef);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function clickPlot() {
|
2024-05-24 23:08:24 +02:00
|
|
|
const plotDef = new wstore.BlockDef({
|
2024-05-16 22:54:15 +02:00
|
|
|
view: "plot",
|
2024-05-24 23:08:24 +02:00
|
|
|
});
|
2024-05-16 22:54:15 +02:00
|
|
|
createBlock(plotDef);
|
2024-05-16 09:29:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="workspace-widgets">
|
|
|
|
<div className="widget" onClick={() => clickTerminal()}>
|
|
|
|
<i className="fa fa-solid fa-square-terminal fa-fw" />
|
|
|
|
</div>
|
|
|
|
<div className="widget" onClick={() => clickPreview("README.md")}>
|
|
|
|
<i className="fa fa-solid fa-files fa-fw" />
|
|
|
|
</div>
|
|
|
|
<div className="widget" onClick={() => clickPreview("go.mod")}>
|
|
|
|
<i className="fa fa-solid fa-files fa-fw" />
|
|
|
|
</div>
|
2024-05-17 07:48:23 +02:00
|
|
|
<div className="widget" onClick={() => clickPreview("build/appicon.png")}>
|
|
|
|
<i className="fa fa-solid fa-files fa-fw" />
|
|
|
|
</div>
|
2024-05-20 20:39:23 +02:00
|
|
|
<div className="widget" onClick={() => clickPreview("~")}>
|
|
|
|
<i className="fa fa-solid fa-files fa-fw" />
|
|
|
|
</div>
|
2024-05-16 09:29:58 +02:00
|
|
|
<div className="widget" onClick={() => clickPlot()}>
|
|
|
|
<i className="fa fa-solid fa-chart-simple fa-fw" />
|
|
|
|
</div>
|
|
|
|
<div className="widget no-hover">
|
|
|
|
<i className="fa fa-solid fa-plus fa-fw" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-05-24 23:08:24 +02:00
|
|
|
function WorkspaceElem() {
|
|
|
|
const windowData = jotai.useAtomValue(atoms.windowData);
|
2024-05-16 09:29:58 +02:00
|
|
|
const activeTabId = jotai.useAtomValue(atoms.activeTabId);
|
2024-05-24 23:08:24 +02:00
|
|
|
const workspaceId = windowData.workspaceid;
|
|
|
|
const wsAtom = React.useMemo(() => {
|
|
|
|
return jotaiUtil.loadable(
|
|
|
|
jotai.atom(async (get) => {
|
|
|
|
const ws = await ClientService.GetWorkspace(workspaceId);
|
|
|
|
return ws;
|
|
|
|
})
|
|
|
|
);
|
|
|
|
}, [workspaceId]);
|
|
|
|
const wsLoadable = jotai.useAtomValue(wsAtom);
|
|
|
|
if (wsLoadable.state === "loading") {
|
|
|
|
return <CenteredLoadingDiv />;
|
|
|
|
}
|
|
|
|
if (wsLoadable.state === "hasError") {
|
|
|
|
return <CenteredDiv>Error: {wsLoadable.error?.toString()}</CenteredDiv>;
|
|
|
|
}
|
|
|
|
const ws: Workspace = wsLoadable.data;
|
2024-05-16 09:29:58 +02:00
|
|
|
return (
|
|
|
|
<div className="workspace">
|
|
|
|
<TabBar />
|
|
|
|
<div className="workspace-tabcontent">
|
2024-05-24 23:08:24 +02:00
|
|
|
<TabContent key={workspaceId} tabId={activeTabId} />
|
2024-05-16 09:29:58 +02:00
|
|
|
<Widgets />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-05-24 23:08:24 +02:00
|
|
|
export { WorkspaceElem as Workspace };
|