Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复Terminal切换导致的显示错误 #51

Merged
merged 1 commit into from
Jan 20, 2024
Merged

fix: 修复Terminal切换导致的显示错误 #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 87 additions & 106 deletions apps/docs/src/terminal/demo-module/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { TerminalViewOption } from '@difizen/libro-terminal';
import { TerminalManager, LibroTerminalView } from '@difizen/libro-terminal';
import type { Disposable } from '@difizen/mana-app';
import {
BaseView,
ViewInstance,
Expand All @@ -10,18 +11,19 @@ import {
useInject,
view,
} from '@difizen/mana-app';
import { Button, Card, Checkbox, Flex, Form, Input, Space } from 'antd';
import { Button, Card, Checkbox, Flex, Form, Input, Space, Tabs } from 'antd';
import type { FC } from 'react';
import { forwardRef, useCallback, useEffect, useState } from 'react';

const gridStyle: React.CSSProperties = {
width: '50%',
};

const Terminal = function Terminal(props: {
const Terminal: FC<{
// options: TerminalViewOption;
viewRender: LibroTerminalView;
updateList: () => void;
}) {
}> = function Terminal(props) {
// const instance = useInject<AppView>(ViewInstance);
const [pasteVal, setPasteVal] = useState('');
const [writeLineVal, setWriteLineVal] = useState('');
Expand All @@ -42,34 +44,59 @@ const Terminal = function Terminal(props: {

// message
useEffect(() => {
const disposes: Disposable[] = [];
if (view) {
view.onDidOpen((v) => {
setonDidOpenVal(JSON.stringify(v));
});
view.onDidOpenFailure((v) => {
setonDidOpenFailureVal(JSON.stringify(v));
});
view.onSizeChanged((v) => {
setonSizeChangedVal(JSON.stringify(v));
});
view.onData((v) => {
setonDataVal(JSON.stringify(v));
});
view.onKey((v) => {
setonKeyVal(JSON.stringify(v));
});
view.onReady(() => {
forceUpdate({});
});
view.onTitleChange(() => {
forceUpdate({});
});
disposes.push(
view.onDidOpen((v) => {
setonDidOpenVal(JSON.stringify(v));
}),
);

disposes.push(
view.onDidOpenFailure((v) => {
setonDidOpenFailureVal(JSON.stringify(v));
}),
);
disposes.push(
view.onSizeChanged((v) => {
setonSizeChangedVal(JSON.stringify(v));
}),
);
disposes.push(
view.onData((v) => {
setonDataVal(JSON.stringify(v));
}),
);
disposes.push(
view.onKey((v) => {
setonKeyVal(JSON.stringify(v));
}),
);
disposes.push(
view.onReady(() => {
forceUpdate({});
}),
);
disposes.push(
view.onTitleChange(() => {
forceUpdate({});
props.updateList();
}),
);

disposes.push(
view.onReady(() => {
setReady(true);
}),
);
}

view.onReady(() => {
setReady(true);
return () => {
disposes.forEach((d) => {
d.dispose();
});
}
}, [view]);
};
}, [props, view]);

if (view === null) {
return null;
Expand Down Expand Up @@ -250,84 +277,12 @@ const Terminal = function Terminal(props: {
};

export const App = forwardRef(function App() {
const instance = useInject<AppView>(ViewInstance);
const [views, setViews] = useState<LibroTerminalView[]>([]);

// const [terminalViews, setTerminalViews] = useState<Record<string, LibroTerminalView>>(
// {},
// );

// const updateList = useCallback(() => {
// instance.terminalManager.requestRunning();
// }, [instance.terminalManager]);

// useEffect(() => {
// const disposed = instance.terminalManager.runningChanged((models) => {
// // delete
// function diffAndDeleteRender() {
// function diffValuesInA1(a1: string[], a2: string[]): string[] {
// // 存储差异值的数组
// const diffArr: string[] = [];

// // 遍历 a2 数组中的每个值
// for (const value of a2) {
// // 如果该值在 a1 中不存在，则将其加入差异值数组
// if (!a1.includes(value)) {
// diffArr.push(value);
// }
// }

// return diffArr;
// }
// const diff = diffValuesInA1(
// models.map((v) => v.name),
// Object.keys(terminalViews),
// );
// console.log('delete ids', diff);
// diff.forEach((v) => {
// delete terminalViews[v];
// });
// }
// diffAndDeleteRender();

// if (Object.keys(terminalViews).length === 0) {
// const initRenderLise = (models: TerminalModel[]) => {
// Promise.all(
// models
// .filter((v) => {
// return !terminalViews[v.name];
// })
// .map(async (m) => {
// const view = await instance.factory(m);
// return { [m.name]: view };
// }),
// )
// .then((views) => {
// setTerminalViews((s) => {
// return {
// ...s,
// ...views.reduce((acc, v) => {
// return {
// ...acc,
// ...v,
// };
// }, {}),
// };
// });
// return;
// })
// .catch((e) => {
// console.error(e);
// });
// };
// initRenderLise(models);
// }
// });
// return () => {
// disposed.dispose();
// };
// }, [instance, instance.terminalManager, terminalViews]);
const [activeKey, setActiveKey] = useState(views[0]?.id);
//

const [views, setViews] = useState<LibroTerminalView[]>([]);
const instance = useInject<AppView>(ViewInstance);

const updateViews = useCallback(
function updateViews() {
Expand All @@ -337,6 +292,8 @@ export const App = forwardRef(function App() {
)
.then((v) => {
setViews(v);
setActiveKey(v[v.length - 1]?.id);

return;
})
.catch((e) => {
Expand Down Expand Up @@ -369,6 +326,14 @@ export const App = forwardRef(function App() {
};
}, [instance, updateViews, views.length]);

const items = views.map((v) => {
return {
label: (v.title.label as string) || 'loading',
children: <Terminal key={v.id} viewRender={v} updateList={updateViews} />,
key: v.id,
};
});

return (
<div id="libro-lab-content-layout" style={{ padding: '24px' }}>
<Space direction="vertical">
Expand Down Expand Up @@ -431,9 +396,25 @@ export const App = forwardRef(function App() {
</Form>
</Card>

{views.map((view) => {
<Tabs
hideAdd
onChange={(key: string) => {
setActiveKey(key);
}}
activeKey={activeKey}
type="editable-card"
onEdit={(targetKey: any, action: 'add' | 'remove') => {
if (action === 'remove') {
const targetView = views.find((v) => v.id === targetKey);
targetView?.dispose();
updateViews();
}
}}
items={items}
></Tabs>
{/* {views.map((view) => {
return <Terminal key={view.id} viewRender={view} updateList={updateViews} />;
})}
})} */}
</Space>
</div>
);
Expand Down
12 changes: 11 additions & 1 deletion packages/libro-terminal/src/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ export class LibroTerminalView extends BaseStatefulView {
this.toDispose.push(
this.term.onResize((data) => {
this.onSizeChangedEmitter.fire(data);
this.setSessionSize();
}),
);

Expand Down Expand Up @@ -455,13 +456,22 @@ export class LibroTerminalView extends BaseStatefulView {
if (!this.isVisible) {
return;
}
if (this.container?.current) {
if (this.container.current.offsetHeight === 0) {
return;
}
if (this.container.current.offsetWidth === 0) {
return;
}
}

// 触发term的resize 事件
this.processResize();
};

protected processResize = () => {
this.open();
this.resizeTerminal();
this.setSessionSize();
};

protected open = (): void => {
Expand Down