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

2024-02-03 15:24:18 +08:00 · 2024-02-03 15:24:18 +08:00 · ce1b9b706f
parent 450e451781
commit ce1b9b706f
8 changed files with 33 additions and 44 deletions
--- a/backend/types/preferences.go
+++ b/backend/types/preferences.go
@ -29,6 +29,7 @@ func NewPreferences() Preferences {
 			FontSize:    consts.DEFAULT_FONT_SIZE,
 			ShowLineNum: true,
 			ShowFolding: true,
+			DropText:    true,
 		},
 		Cli: PreferencesCli{
 			FontSize:    consts.DEFAULT_FONT_SIZE,
@ -67,6 +68,7 @@ type PreferencesEditor struct {
 	FontSize    int      `json:"fontSize" yaml:"font_size"`
 	ShowLineNum bool     `json:"showLineNum" yaml:"show_line_num"`
 	ShowFolding bool     `json:"showFolding" yaml:"show_folding"`
+	DropText    bool     `json:"dropText" yaml:"drop_text"`
 }

 type PreferencesCli struct {
--- a/frontend/src/components/content_value/ContentEditor.vue
+++ b/frontend/src/components/content_value/ContentEditor.vue
@ -18,14 +18,6 @@ const props = defineProps({
    loading: {
        type: Boolean,
    },
-    showLineNum: {
-        type: Boolean,
-        default: true,
-    },
-    showFolding: {
-        type: Boolean,
-        default: true,
-    },
    border: {
        type: Boolean,
        default: false,
@ -63,13 +55,14 @@ onMounted(async () => {
            // value: props.content,
            theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
            language: props.language,
-            lineNumbers: props.showLineNum ? 'on' : 'off',
+            lineNumbers: pref.showLineNum ? 'on' : 'off',
            readOnly: readonlyValue.value,
            colorDecorators: true,
            accessibilitySupport: 'off',
            wordWrap: 'on',
            tabSize: 2,
-            folding: props.showFolding !== false,
+            folding: pref.showFolding,
+            dragAndDrop: pref.dropText,
            fontFamily,
            fontSize,
            scrollBeyondLastLine: false,
@ -151,37 +144,20 @@ watch(
 )

 watch(
-    () => pref.editorFont,
-    ({ fontSize, fontFamily }) => {
+    () => pref.editor,
+    ({ showLineNum = true, showFolding = true, dropText = true }) => {
        if (editorNode != null) {
+            const { fontSize, fontFamily } = pref.editorFont
            editorNode.updateOptions({
                fontSize,
                fontFamily,
-            })
-        }
-    },
-)
-
-watch(
-    () => pref.showLineNum,
-    (showLineNum) => {
-        if (editorNode != null) {
-            editorNode.updateOptions({
                lineNumbers: showLineNum ? 'on' : 'off',
+                folding: showFolding,
+                dragAndDrop: dropText,
            })
        }
    },
-)
-
-watch(
-    () => pref.showFolding,
-    (showFolding) => {
-        if (editorNode != null) {
-            editorNode.updateOptions({
-                folding: showFolding !== false,
-            })
-        }
-    },
+    { deep: true },
 )

 onUnmounted(() => {
--- a/frontend/src/components/content_value/ContentEntryEditor.vue
+++ b/frontend/src/components/content_value/ContentEntryEditor.vue
@ -12,7 +12,6 @@ import WindowClose from '@/components/icons/WindowClose.vue'
 import Pin from '@/components/icons/Pin.vue'
 import OffScreen from '@/components/icons/OffScreen.vue'
 import ContentEditor from '@/components/content_value/ContentEditor.vue'
-import usePreferencesStore from 'stores/preferences.js'
 import { toString } from 'lodash'

 const props = defineProps({
@ -47,7 +46,6 @@ const props = defineProps({

 const themeVars = useThemeVars()
 const browserStore = useBrowserStore()
-const prefStore = usePreferencesStore()
 const emit = defineEmits([
    'update:field',
    'update:value',
@ -176,8 +174,6 @@ const onSave = () => {
                        :border="true"
                        :content="displayValue"
                        :language="viewLanguage"
-                        :show-folding="prefStore.showFolding"
-                        :show-line-num="prefStore.showLineNum"
                        class="flex-item-expand"
                        @input="onInput"
                        @reset="onInput"
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@ -12,7 +12,6 @@ import useBrowserStore from 'stores/browser.js'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import ContentEditor from '@/components/content_value/ContentEditor.vue'
-import usePreferencesStore from 'stores/preferences.js'
 import { formatBytes } from '@/utils/byte_convert.js'

 const props = defineProps({
@ -35,7 +34,6 @@ const props = defineProps({

 const i18n = useI18n()
 const themeVars = useThemeVars()
-const prefStore = usePreferencesStore()

 /**
 *
@ -205,8 +203,6 @@ defineExpose({
                :content="displayValue"
                :language="viewLanguage"
                :loading="props.loading"
-                :show-folding="prefStore.showFolding"
-                :show-line-num="prefStore.showLineNum"
                class="flex-item-expand"
                style="height: 100%"
                @input="onInput"
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@ -181,6 +181,7 @@ const onClose = () => {
            placement="left"
            tab-style="justify-content: right; font-weight: 420;"
            type="line">
+            <!-- general pane -->
            <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-grid :x-gap="10">
@ -257,6 +258,7 @@ const onClose = () => {
                </n-form>
            </n-tab-pane>

+            <!-- editor pane -->
            <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-grid :x-gap="10">
@ -294,10 +296,16 @@ const onClose = () => {
                                {{ $t('preferences.editor.show_folding') }}
                            </n-checkbox>
                        </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-form>
            </n-tab-pane>

+            <!-- cli pane -->
            <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-grid :x-gap="10">
@ -339,7 +347,7 @@ const onClose = () => {
                </n-form>
            </n-tab-pane>

-            <!-- Custom decoder pane -->
+            <!-- custom decoder pane -->
            <n-tab-pane :tab="$t('preferences.decoder.name')" display-directive="show:lazy" name="decoder">
                <n-space>
                    <n-button @click="dialogStore.openDecoderDialog()">
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@ -54,7 +54,8 @@
    "editor": {
      "name": "Editor",
      "show_linenum": "Show Line Numbers",
-      "show_folding": "Enable Code Folding"
+      "show_folding": "Enable Code Folding",
+      "drop_text": "Allow Drag and Drop Text"
    },
    "cli": {
      "name": "Command Line",
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@ -54,7 +54,8 @@
    "editor": {
      "name": "编辑器",
      "show_linenum": "显示行号",
-      "show_folding": "启用代码折叠"
+      "show_folding": "启用代码折叠",
+      "drop_text": "允许拖放文本"
    },
    "cli": {
      "name": "命令行",
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@ -58,6 +58,7 @@ const usePreferencesStore = defineStore('preferences', {
            fontSize: 14,
            showLineNum: true,
            showFolding: true,
+            dropText: true,
        },
        cli: {
            fontFamily: [],
@ -254,6 +255,10 @@ const usePreferencesStore = defineStore('preferences', {
            return get(this.editor, 'showFolding', true)
        },

+        dropText() {
+            return get(this.editor, 'dropText', true)
+        },
+
        keyIconType() {
            return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
        },
@ -283,6 +288,10 @@ const usePreferencesStore = defineStore('preferences', {
                if (showFolding === undefined) {
                    set(data, 'editor.showFolding', true)
                }
+                const dropText = get(data, 'editor.dropText')
+                if (dropText === undefined) {
+                    set(data, 'editor.dropText', true)
+                }
                i18nGlobal.locale.value = this.currentLanguage
            }
        },