Skip to content

Commit d553c2b

Browse files
kcq888kcq888
authored
Merge pull request #99 from Open-STEM/kq-bugs
Fixed layout opening tab problem.
2 parents c11726a + 4a2bb68 commit d553c2b

File tree

1 file changed

+93
-95
lines changed

1 file changed

+93
-95
lines changed

‎src/components/xrplayout.tsx‎

Lines changed: 93 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import BlocklyEditor from '@components/blockly';
44
import MonacoEditor from '@components/MonacoEditor';
55
import XRPShell from '@components/xrpshell';
66
import FolderIcon from '@assets/images/folder-24.png';
7+
import i18n from '@/utils/i18n';
78
//import treeDaaJson from '@/utils/testdata';
89
import AppMgr, { EventType, Themes } from '@/managers/appmgr';
910
import FolderTree from './folder-tree';
@@ -15,8 +16,99 @@ import EditorMgr, { EditorStore } from '@/managers/editormgr';
1516
import { CreateEditorTab } from '@/utils/editorUtils';
1617
import XRPDashboard from '@/components/dashboard/xrp-dashboard';
1718
import AIChat from '@/components/chat/ai-chat';
18-
import { useTranslation } from 'react-i18next';
1919

20+
/**
21+
* Layout-React's layout JSON to specify the XRPWeb's single page application's layout
22+
*/
23+
const layout_json: IJsonModel = {
24+
global: {
25+
tabEnablePopout: false,
26+
tabSetEnableDeleteWhenEmpty: false,
27+
tabSetEnableDrag: false,
28+
tabSetEnableDrop: false,
29+
tabEnableRename: false
30+
},
31+
borders: [
32+
{
33+
type: 'border',
34+
location: 'left',
35+
enableDrop: false,
36+
enableAutoHide: true,
37+
size: 300,
38+
selected: 0,
39+
children: [
40+
{
41+
type: 'tab',
42+
id: Constants.FOLDER_TAB_ID,
43+
name: i18n.t('folders'),
44+
component: 'folders',
45+
enableClose: false,
46+
icon: FolderIcon,
47+
},
48+
],
49+
},
50+
],
51+
layout: {
52+
type: 'row',
53+
id: 'mainRowId',
54+
weight: 100,
55+
children: [
56+
{
57+
type: 'row',
58+
id: 'combinedRowId',
59+
name: 'row-combined',
60+
weight: 80,
61+
children: [
62+
{
63+
type: 'tabset',
64+
id: Constants.EDITOR_TABSET_ID,
65+
name: 'editorTabset',
66+
weight: 70,
67+
children: [],
68+
},
69+
{
70+
type: 'tabset',
71+
id: Constants.SHELL_TABSET_ID,
72+
name: 'shellTabset',
73+
weight: 30,
74+
children: [
75+
{
76+
type: 'tab',
77+
id: 'shellId',
78+
name: i18n.t('shell'),
79+
component: 'xterm',
80+
enableClose: false,
81+
},
82+
],
83+
},
84+
],
85+
},
86+
],
87+
},
88+
};
89+
90+
const model = Model.fromJson(layout_json);
91+
EditorMgr.getInstance().setLayoutModel(model);
92+
let layoutRef: React.RefObject<Layout> = {
93+
current: null,
94+
};
95+
96+
const factory = (node: TabNode) => {
97+
const component = node.getComponent();
98+
if (component == 'editor') {
99+
return <MonacoEditor name={node.getName()} width="100vw" height="100vh" />;
100+
} else if (component == 'xterm') {
101+
return <XRPShell />;
102+
} else if (component == 'folders') {
103+
return <FolderTree treeData={null} theme="rct-dark" isHeader={true} />;
104+
} else if (component == 'blockly') {
105+
return <BlocklyEditor name={node.getName()} />;
106+
} else if (component == 'dashboard') {
107+
return <XRPDashboard />;
108+
} else if (component == 'aichat') {
109+
return <AIChat />;
110+
}
111+
};
20112

21113
type XRPLayoutProps = {
22114
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,102 +138,8 @@ function useOnceCall(cb: () => void, condition = true) {
46138
* @returns React XRPLayout component
47139
*/
48140
function XRPLayout({ forwardedref }: XRPLayoutProps) {
49-
const { t } = useTranslation();
50141
const [activeTab, setActiveTab] = useLocalStorage(StorageKeys.ACTIVETAB, '');
51142

52-
/**
53-
* Layout-React's layout JSON to specify the XRPWeb's single page application's layout
54-
*/
55-
const layout_json: IJsonModel = {
56-
global: {
57-
tabEnablePopout: false,
58-
tabSetEnableDeleteWhenEmpty: false,
59-
tabSetEnableDrag: false,
60-
tabSetEnableDrop: false,
61-
tabEnableRename: false
62-
},
63-
borders: [
64-
{
65-
type: 'border',
66-
location: 'left',
67-
enableDrop: false,
68-
enableAutoHide: true,
69-
size: 300,
70-
selected: 0,
71-
children: [
72-
{
73-
type: 'tab',
74-
id: Constants.FOLDER_TAB_ID,
75-
name: t('folders'),
76-
component: 'folders',
77-
enableClose: false,
78-
icon: FolderIcon,
79-
},
80-
],
81-
},
82-
],
83-
layout: {
84-
type: 'row',
85-
id: 'mainRowId',
86-
weight: 100,
87-
children: [
88-
{
89-
type: 'row',
90-
id: 'combinedRowId',
91-
name: 'row-combined',
92-
weight: 80,
93-
children: [
94-
{
95-
type: 'tabset',
96-
id: Constants.EDITOR_TABSET_ID,
97-
name: 'editorTabset',
98-
weight: 70,
99-
children: [],
100-
},
101-
{
102-
type: 'tabset',
103-
id: Constants.SHELL_TABSET_ID,
104-
name: 'shellTabset',
105-
weight: 30,
106-
children: [
107-
{
108-
type: 'tab',
109-
id: 'shellId',
110-
name: t('shell'),
111-
component: 'xterm',
112-
enableClose: false,
113-
},
114-
],
115-
},
116-
],
117-
},
118-
],
119-
},
120-
};
121-
122-
const model = Model.fromJson(layout_json);
123-
EditorMgr.getInstance().setLayoutModel(model);
124-
let layoutRef: React.RefObject<Layout> = {
125-
current: null,
126-
};
127-
128-
const factory = (node: TabNode) => {
129-
const component = node.getComponent();
130-
if (component == 'editor') {
131-
return <MonacoEditor name={node.getName()} width="100vw" height="100vh" />;
132-
} else if (component == 'xterm') {
133-
return <XRPShell />;
134-
} else if (component == 'folders') {
135-
return <FolderTree treeData={null} theme="rct-dark" isHeader={true} />;
136-
} else if (component == 'blockly') {
137-
return <BlocklyEditor name={node.getName()} />;
138-
} else if (component == 'dashboard') {
139-
return <XRPDashboard />;
140-
} else if (component == 'aichat') {
141-
return <AIChat />;
142-
}
143-
};
144-
145143
/**
146144
* changeTheme - set the system selected theme
147145
* @param theme

0 commit comments

Comments
 (0)