perf: add drag and drop text option in preferences. #140

This commit is contained in:
Lykin 2024-02-03 15:24:18 +08:00
parent 450e451781
commit ce1b9b706f
8 changed files with 33 additions and 44 deletions

View File

@ -29,6 +29,7 @@ func NewPreferences() Preferences {
FontSize: consts.DEFAULT_FONT_SIZE, FontSize: consts.DEFAULT_FONT_SIZE,
ShowLineNum: true, ShowLineNum: true,
ShowFolding: true, ShowFolding: true,
DropText: true,
}, },
Cli: PreferencesCli{ Cli: PreferencesCli{
FontSize: consts.DEFAULT_FONT_SIZE, FontSize: consts.DEFAULT_FONT_SIZE,
@ -67,6 +68,7 @@ type PreferencesEditor struct {
FontSize int `json:"fontSize" yaml:"font_size"` FontSize int `json:"fontSize" yaml:"font_size"`
ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"` ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"`
ShowFolding bool `json:"showFolding" yaml:"show_folding"` ShowFolding bool `json:"showFolding" yaml:"show_folding"`
DropText bool `json:"dropText" yaml:"drop_text"`
} }
type PreferencesCli struct { type PreferencesCli struct {

View File

@ -18,14 +18,6 @@ const props = defineProps({
loading: { loading: {
type: Boolean, type: Boolean,
}, },
showLineNum: {
type: Boolean,
default: true,
},
showFolding: {
type: Boolean,
default: true,
},
border: { border: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -63,13 +55,14 @@ onMounted(async () => {
// value: props.content, // value: props.content,
theme: pref.isDark ? 'rdm-dark' : 'rdm-light', theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
language: props.language, language: props.language,
lineNumbers: props.showLineNum ? 'on' : 'off', lineNumbers: pref.showLineNum ? 'on' : 'off',
readOnly: readonlyValue.value, readOnly: readonlyValue.value,
colorDecorators: true, colorDecorators: true,
accessibilitySupport: 'off', accessibilitySupport: 'off',
wordWrap: 'on', wordWrap: 'on',
tabSize: 2, tabSize: 2,
folding: props.showFolding !== false, folding: pref.showFolding,
dragAndDrop: pref.dropText,
fontFamily, fontFamily,
fontSize, fontSize,
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
@ -151,37 +144,20 @@ watch(
) )
watch( watch(
() => pref.editorFont, () => pref.editor,
({ fontSize, fontFamily }) => { ({ showLineNum = true, showFolding = true, dropText = true }) => {
if (editorNode != null) { if (editorNode != null) {
const { fontSize, fontFamily } = pref.editorFont
editorNode.updateOptions({ editorNode.updateOptions({
fontSize, fontSize,
fontFamily, fontFamily,
})
}
},
)
watch(
() => pref.showLineNum,
(showLineNum) => {
if (editorNode != null) {
editorNode.updateOptions({
lineNumbers: showLineNum ? 'on' : 'off', lineNumbers: showLineNum ? 'on' : 'off',
folding: showFolding,
dragAndDrop: dropText,
}) })
} }
}, },
) { deep: true },
watch(
() => pref.showFolding,
(showFolding) => {
if (editorNode != null) {
editorNode.updateOptions({
folding: showFolding !== false,
})
}
},
) )
onUnmounted(() => { onUnmounted(() => {

View File

@ -12,7 +12,6 @@ import WindowClose from '@/components/icons/WindowClose.vue'
import Pin from '@/components/icons/Pin.vue' import Pin from '@/components/icons/Pin.vue'
import OffScreen from '@/components/icons/OffScreen.vue' import OffScreen from '@/components/icons/OffScreen.vue'
import ContentEditor from '@/components/content_value/ContentEditor.vue' import ContentEditor from '@/components/content_value/ContentEditor.vue'
import usePreferencesStore from 'stores/preferences.js'
import { toString } from 'lodash' import { toString } from 'lodash'
const props = defineProps({ const props = defineProps({
@ -47,7 +46,6 @@ const props = defineProps({
const themeVars = useThemeVars() const themeVars = useThemeVars()
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const prefStore = usePreferencesStore()
const emit = defineEmits([ const emit = defineEmits([
'update:field', 'update:field',
'update:value', 'update:value',
@ -176,8 +174,6 @@ const onSave = () => {
:border="true" :border="true"
:content="displayValue" :content="displayValue"
:language="viewLanguage" :language="viewLanguage"
:show-folding="prefStore.showFolding"
:show-line-num="prefStore.showLineNum"
class="flex-item-expand" class="flex-item-expand"
@input="onInput" @input="onInput"
@reset="onInput" @reset="onInput"

View File

@ -12,7 +12,6 @@ import useBrowserStore from 'stores/browser.js'
import { decodeRedisKey } from '@/utils/key_convert.js' import { decodeRedisKey } from '@/utils/key_convert.js'
import FormatSelector from '@/components/content_value/FormatSelector.vue' import FormatSelector from '@/components/content_value/FormatSelector.vue'
import ContentEditor from '@/components/content_value/ContentEditor.vue' import ContentEditor from '@/components/content_value/ContentEditor.vue'
import usePreferencesStore from 'stores/preferences.js'
import { formatBytes } from '@/utils/byte_convert.js' import { formatBytes } from '@/utils/byte_convert.js'
const props = defineProps({ const props = defineProps({
@ -35,7 +34,6 @@ const props = defineProps({
const i18n = useI18n() const i18n = useI18n()
const themeVars = useThemeVars() const themeVars = useThemeVars()
const prefStore = usePreferencesStore()
/** /**
* *
@ -205,8 +203,6 @@ defineExpose({
:content="displayValue" :content="displayValue"
:language="viewLanguage" :language="viewLanguage"
:loading="props.loading" :loading="props.loading"
:show-folding="prefStore.showFolding"
:show-line-num="prefStore.showLineNum"
class="flex-item-expand" class="flex-item-expand"
style="height: 100%" style="height: 100%"
@input="onInput" @input="onInput"

View File

@ -181,6 +181,7 @@ const onClose = () => {
placement="left" placement="left"
tab-style="justify-content: right; font-weight: 420;" tab-style="justify-content: right; font-weight: 420;"
type="line"> type="line">
<!-- general pane -->
<n-tab-pane :tab="$t('preferences.general.name')" display-directive="show" name="general"> <n-tab-pane :tab="$t('preferences.general.name')" display-directive="show" name="general">
<n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top"> <n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
<n-grid :x-gap="10"> <n-grid :x-gap="10">
@ -257,6 +258,7 @@ const onClose = () => {
</n-form> </n-form>
</n-tab-pane> </n-tab-pane>
<!-- editor pane -->
<n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor"> <n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor">
<n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top"> <n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
<n-grid :x-gap="10"> <n-grid :x-gap="10">
@ -294,10 +296,16 @@ const onClose = () => {
{{ $t('preferences.editor.show_folding') }} {{ $t('preferences.editor.show_folding') }}
</n-checkbox> </n-checkbox>
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
<n-checkbox v-model:checked="prefStore.editor.dropText">
{{ $t('preferences.editor.drop_text') }}
</n-checkbox>
</n-form-item-gi>
</n-grid> </n-grid>
</n-form> </n-form>
</n-tab-pane> </n-tab-pane>
<!-- cli pane -->
<n-tab-pane :tab="$t('preferences.cli.name')" display-directive="show" name="cli"> <n-tab-pane :tab="$t('preferences.cli.name')" display-directive="show" name="cli">
<n-form :disabled="loading" :model="prefStore.cli" :show-require-mark="false" label-placement="top"> <n-form :disabled="loading" :model="prefStore.cli" :show-require-mark="false" label-placement="top">
<n-grid :x-gap="10"> <n-grid :x-gap="10">
@ -339,7 +347,7 @@ const onClose = () => {
</n-form> </n-form>
</n-tab-pane> </n-tab-pane>
<!-- Custom decoder pane --> <!-- custom decoder pane -->
<n-tab-pane :tab="$t('preferences.decoder.name')" display-directive="show:lazy" name="decoder"> <n-tab-pane :tab="$t('preferences.decoder.name')" display-directive="show:lazy" name="decoder">
<n-space> <n-space>
<n-button @click="dialogStore.openDecoderDialog()"> <n-button @click="dialogStore.openDecoderDialog()">

View File

@ -54,7 +54,8 @@
"editor": { "editor": {
"name": "Editor", "name": "Editor",
"show_linenum": "Show Line Numbers", "show_linenum": "Show Line Numbers",
"show_folding": "Enable Code Folding" "show_folding": "Enable Code Folding",
"drop_text": "Allow Drag and Drop Text"
}, },
"cli": { "cli": {
"name": "Command Line", "name": "Command Line",

View File

@ -54,7 +54,8 @@
"editor": { "editor": {
"name": "编辑器", "name": "编辑器",
"show_linenum": "显示行号", "show_linenum": "显示行号",
"show_folding": "启用代码折叠" "show_folding": "启用代码折叠",
"drop_text": "允许拖放文本"
}, },
"cli": { "cli": {
"name": "命令行", "name": "命令行",

View File

@ -58,6 +58,7 @@ const usePreferencesStore = defineStore('preferences', {
fontSize: 14, fontSize: 14,
showLineNum: true, showLineNum: true,
showFolding: true, showFolding: true,
dropText: true,
}, },
cli: { cli: {
fontFamily: [], fontFamily: [],
@ -254,6 +255,10 @@ const usePreferencesStore = defineStore('preferences', {
return get(this.editor, 'showFolding', true) return get(this.editor, 'showFolding', true)
}, },
dropText() {
return get(this.editor, 'dropText', true)
},
keyIconType() { keyIconType() {
return get(this.general, 'keyIconStyle', typesIconStyle.SHORT) return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
}, },
@ -283,6 +288,10 @@ const usePreferencesStore = defineStore('preferences', {
if (showFolding === undefined) { if (showFolding === undefined) {
set(data, 'editor.showFolding', true) set(data, 'editor.showFolding', true)
} }
const dropText = get(data, 'editor.dropText')
if (dropText === undefined) {
set(data, 'editor.dropText', true)
}
i18nGlobal.locale.value = this.currentLanguage i18nGlobal.locale.value = this.currentLanguage
} }
}, },