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',
theme: 'Theme',
language: 'Language',
eol: 'End Of Line',
},
setting: {
all: 'All',

View file

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

View file

@ -18,6 +18,11 @@
<el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
</el-select>
</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>
<div class="coder-editor" v-loading="loading">
<div id="codeBox" style="height: 60vh"></div>
@ -74,6 +79,7 @@ interface EditProps {
interface EditorConfig {
theme: string;
language: string;
eol: number;
}
let open = ref(false);
@ -82,8 +88,20 @@ let loading = ref(false);
let config = reactive<EditorConfig>({
theme: 'vs-dark',
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 = [
{
label: 'Visual Studio',
@ -121,6 +139,10 @@ const changeTheme = () => {
monaco.editor.setTheme(config.theme);
};
const changeEOL = () => {
editor.getModel().pushEOL(config.eol);
};
const initEditor = () => {
if (editor) {
editor.dispose();
@ -144,6 +166,9 @@ const initEditor = () => {
}
});
// After onDidChangeModelContent
editor.getModel().pushEOL(config.eol);
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
});
};
@ -165,6 +190,9 @@ const acceptParams = (props: EditProps) => {
form.value.content = props.content;
form.value.path = props.path;
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;
};

View file

@ -1,5 +1,5 @@
<template>
<div :id="'terminal-' + terminalID"></div>
<div :id="'terminal-' + terminalID" @wheel="onTermWheel"></div>
</template>
<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({
acceptParams,
onClose,