feat: xterm-Support for Ctrl+MouseWheel to scaling fonts (#448)

#### What this PR does / why we need it?
#284 
Support for scaling fonts using Ctrl+mouse wheel

#446 
support Editor config the eol.
Currently, 1Panel only supports Linux, so directly set the default EOL to LF and add a new configuration item 

#### Summary of your change

#### Please indicate you've done the following:

- [x] Made sure tests are passing and test coverage is added if needed.
- [x] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
This commit is contained in:
gengxin 2023-03-31 11:16:15 +08:00 committed by GitHub
parent a18105349b
commit d71e2a74b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 1 deletions

View file

@ -763,6 +763,7 @@ const message = {
downlodSuccess: 'Download Success', downlodSuccess: 'Download Success',
theme: 'Theme', theme: 'Theme',
language: 'Language', language: 'Language',
eol: 'End Of Line',
}, },
setting: { setting: {
all: 'All', all: 'All',

View file

@ -767,6 +767,7 @@ const message = {
downlodSuccess: '下载完成', downlodSuccess: '下载完成',
theme: '主题', theme: '主题',
language: '语言', language: '语言',
eol: '行尾符',
}, },
setting: { setting: {
all: '全部', all: '全部',

View file

@ -18,6 +18,11 @@
<el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" /> <el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('file.eol')">
<el-select v-model="config.eol" @change="changeEOL()">
<el-option v-for="eol in eols" :key="eol.label" :value="eol.value" :label="eol.label" />
</el-select>
</el-form-item>
</el-form> </el-form>
<div class="coder-editor" v-loading="loading"> <div class="coder-editor" v-loading="loading">
<div id="codeBox" style="height: 60vh"></div> <div id="codeBox" style="height: 60vh"></div>
@ -74,6 +79,7 @@ interface EditProps {
interface EditorConfig { interface EditorConfig {
theme: string; theme: string;
language: string; language: string;
eol: number;
} }
let open = ref(false); let open = ref(false);
@ -82,8 +88,20 @@ let loading = ref(false);
let config = reactive<EditorConfig>({ let config = reactive<EditorConfig>({
theme: 'vs-dark', theme: 'vs-dark',
language: 'plaintext', language: 'plaintext',
eol: monaco.editor.EndOfLineSequence.LF,
}); });
const eols = [
{
label: 'LF',
value: monaco.editor.EndOfLineSequence.LF,
},
{
label: 'CRLF',
value: monaco.editor.EndOfLineSequence.CRLF,
},
];
const themes = [ const themes = [
{ {
label: 'Visual Studio', label: 'Visual Studio',
@ -121,6 +139,10 @@ const changeTheme = () => {
monaco.editor.setTheme(config.theme); monaco.editor.setTheme(config.theme);
}; };
const changeEOL = () => {
editor.getModel().pushEOL(config.eol);
};
const initEditor = () => { const initEditor = () => {
if (editor) { if (editor) {
editor.dispose(); editor.dispose();
@ -144,6 +166,9 @@ const initEditor = () => {
} }
}); });
// After onDidChangeModelContent
editor.getModel().pushEOL(config.eol);
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave); editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
}); });
}; };
@ -165,6 +190,9 @@ const acceptParams = (props: EditProps) => {
form.value.content = props.content; form.value.content = props.content;
form.value.path = props.path; form.value.path = props.path;
config.language = props.language; config.language = props.language;
// TODO Now,1panel only support liunux,so we can use LF.
// better,We should rely on the actual line feed character of the file returned from the background
config.eol = monaco.editor.EndOfLineSequence.LF;
open.value = true; open.value = true;
}; };

View file

@ -1,5 +1,5 @@
<template> <template>
<div :id="'terminal-' + terminalID"></div> <div :id="'terminal-' + terminalID" @wheel="onTermWheel"></div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -176,6 +176,26 @@ function changeTerminalSize() {
} }
} }
/**
* Support for Ctrl+MouseWheel to scaling fonts
* @param event WheelEvent
*/
const onTermWheel = (event: WheelEvent) => {
if (event.ctrlKey) {
event.preventDefault();
if (term) {
if (event.deltaY > 0) {
// web font-size mini 12px
if (term.options.fontSize > 12) {
term.options.fontSize = term.options.fontSize - 1;
}
} else {
term.options.fontSize = term.options.fontSize + 1;
}
}
}
};
defineExpose({ defineExpose({
acceptParams, acceptParams,
onClose, onClose,