feat(bookmark-group): 支持分组拖拽,以及分组级别拖拽排序

czfadmin · Apr 5, 2024 · d413711 · d413711
1 parent f1d283a
commit d413711
Show file tree

Hide file tree

Showing 16 changed files with 158 additions and 78 deletions.
diff --git a/TODO-ZN.md b/TODO-ZN.md
@@ -0,0 +1,16 @@
+# Bookmark Manager (BM)
+
+利用VSCODE的扩展功能开发管理用户的书签, 支持用户可视化便捷的进行书签管理。
+
+### 进行中
+
+- [ ] 支持自定义分组
+  - [x] 支持自定义分组
+    - [x] 删除分组
+    - [x] 新建分组,编辑分组
+    - [x] 清除分组的内的书签
+  - [x] 支持自定义分组拖拽
+    - [x] 分组拖拽排序
+    - [x] 分组内书签拖拽调整书签分组
+
+### 已完成
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,16 @@
+# Bookmark Manager (BM)
+
+Use the extended function of VSCODE to develop and manage users' bookmarks, allowing users to visually and conveniently manage bookmarks.
+
+### Working
+
+- [x] Support custom grouping
+  - [x] Support custom grouping
+    - [x] Delete group
+    - [x] Create new group, edit group
+    - [x] Clear bookmarks within a group
+  - [x] Support custom group drag and drop
+    - [x] Group drag and drop sorting
+    - [x] Drag and drop bookmarks within a group to adjust bookmark groups
+
+### Done
diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
@@ -3,11 +3,17 @@
   "Please select bookmark color": "Please select bookmark color",
   "Select a bookmark to jump to the corresponding location.": "Select a bookmark to jump to the corresponding location.",
   "Please select the bookmark you want to open": "Please select the bookmark you want to open",
-  "`bookmark-manager.json` will be tracked by the version tool. Please try to avoid submitting this file to the source code repository. You can manually add it to `.gitignore` or automatically complete this step by turning on the `alwaysIgnore` option .": "`bookmark-manager.json` will be tracked by the version tool. Please try to avoid submitting this file to the source code repository. You can manually add it to `.gitignore` or automatically complete this step by turning on the `alwaysIgnore` option .",
+  "Group name already exists": "Group name already exists",
+  "Default Group": "Default Group",
   "'showGutterIcon', 'showGutterInOverviewRuler', 'showTextDecoration' not available at the same time this is only 'false'": "'showGutterIcon', 'showGutterInOverviewRuler', 'showTextDecoration' not available at the same time this is only 'false'",
   "Jump to bookmark position": "Jump to bookmark position",
+  "`bookmark-manager.json` will be tracked by the version tool. Please try to avoid submitting this file to the source code repository. You can manually add it to `.gitignore` or automatically complete this step by turning on the `alwaysIgnore` option .": "`bookmark-manager.json` will be tracked by the version tool. Please try to avoid submitting this file to the source code repository. You can manually add it to `.gitignore` or automatically complete this step by turning on the `alwaysIgnore` option .",
   "Type a label for your bookmarks": "Type a label for your bookmarks",
   "Bookmark Label (Press `Enter` to confirm or press `Escape` to cancel)": "Bookmark Label (Press `Enter` to confirm or press `Escape` to cancel)",
+  "Can't delete default group": "Can't delete default group",
+  "Can not change default group label": "Can not change default group label",
+  "Change group label": "Change group label",
+  "Please input new group name": "Please input new group name",
   "Type a name for your bookmarks color": "Type a name for your bookmarks color",
   "Bookmark Color Name (Press `Enter` to confirm or press `Escape` to cancel)": "Bookmark Color Name (Press `Enter` to confirm or press `Escape` to cancel)",
   "Please select the bookmark before proceeding.": "Please select the bookmark before proceeding.",

diff --git a/l10n/bundle.l10n.zh.json b/l10n/bundle.l10n.zh.json
@@ -1,16 +1,22 @@
 {
-  "Type a label for your bookmarks": "为你的书签输入标签信息",
-  "Type a name for your bookmarks color": "为你的书签输入颜色名称",
-  "Bookmark Label (Press `Enter` to confirm or press `Escape` to cancel)": "书签标签（按 \"Enter\"确认或按 \"Escape\" 取消）",
-  "Bookmark Color Name (Press `Enter` to confirm or press `Escape` to cancel)": "书签颜色名称（按 \"Enter\"确认或按 \"Escape\" 取消）",
-  "Please select the bookmark before proceeding.": "请选择书签后再继续。",
-  "Please select bookmark color": "请选择书签颜色",
-  "Type more info for your bookmarks": "输入更多的书签信息",
-  "This feature has not been developed yet, thanks!": "这个功能暂时还没有开发,谢谢",
-  "Select bookmark color. Press 'Enter' to confirm, 'Escape' to cancel": "选择书签颜色。按 \"Enter\"确认，按 \"Escape\" 取消",
-  "Select a bookmark to jump to the corresponding location.": "选择书签可跳转到相应位置",
-  "Please select the bookmark you want to open": "请选择要打开的书签",
-  "Jump to bookmark position": "跳转到书签位置",
-  "'showGutterIcon', 'showGutterInOverviewRuler', 'showTextDecoration' not available at the same time this is only 'false'": "'showGutterIcon', 'showGutterInOverviewRuler', 'showTextDecoration' 三个配置选项不可同时设置为  'false'",
-  "`bookmark-manager.json` will be tracked by the version tool. Please try to avoid submitting this file to the source code repository. You can manually add it to `.gitignore` or automatically complete this step by turning on the `alwaysIgnore` option .": "`bookmark-manager.json`将会被版本工具跟踪.请尽量避免将此文件提交到源代码仓库中.您可以手动添加到`.gitignore`或者通过开启`alwaysIgnore`选项自动完成此步骤."
+  "Select bookmark color. Press 'Enter' to confirm, 'Escape' to cancel": "Select bookmark color. Press 'Enter' to confirm, 'Escape' to cancel",
+  "Please select bookmark color": "Please select bookmark color",
+  "Select a bookmark to jump to the corresponding location.": "Select a bookmark to jump to the corresponding location.",
+  "Please select the bookmark you want to open": "Please select the bookmark you want to open",
+  "Group name already exists": "Group name already exists",
+  "Default Group": "Default Group",
+  "'showGutterIcon', 'showGutterInOverviewRuler', 'showTextDecoration' not available at the same time this is only 'false'": "'showGutterIcon', 'showGutterInOverviewRuler', 'showTextDecoration' not available at the same time this is only 'false'",
+  "Jump to bookmark position": "Jump to bookmark position",
+  "`bookmark-manager.json` will be tracked by the version tool. Please try to avoid submitting this file to the source code repository. You can manually add it to `.gitignore` or automatically complete this step by turning on the `alwaysIgnore` option .": "`bookmark-manager.json` will be tracked by the version tool. Please try to avoid submitting this file to the source code repository. You can manually add it to `.gitignore` or automatically complete this step by turning on the `alwaysIgnore` option .",
+  "Type a label for your bookmarks": "Type a label for your bookmarks",
+  "Bookmark Label (Press `Enter` to confirm or press `Escape` to cancel)": "Bookmark Label (Press `Enter` to confirm or press `Escape` to cancel)",
+  "Can't delete default group": "Can't delete default group",
+  "Can not change default group label": "Can not change default group label",
+  "Change group label": "Change group label",
+  "Please input new group name": "Please input new group name",
+  "Type a name for your bookmarks color": "Type a name for your bookmarks color",
+  "Bookmark Color Name (Press `Enter` to confirm or press `Escape` to cancel)": "Bookmark Color Name (Press `Enter` to confirm or press `Escape` to cancel)",
+  "Please select the bookmark before proceeding.": "Please select the bookmark before proceeding.",
+  "Type more info for your bookmarks": "Type more info for your bookmarks",
+  "This feature has not been developed yet, thanks!": "This feature has not been developed yet, thanks!"
 }
diff --git a/package.json b/package.json
@@ -219,8 +219,8 @@
         "category": "Bookmark Manager (BM)"
       },
       {
-        "command": "bookmark-manager.chanegBookmarkGroupLabel",
-        "title": "%bookmark-manager.chanegBookmarkGroupLabel%",
+        "command": "bookmark-manager.changeBookmarkGroupLabel",
+        "title": "%bookmark-manager.changeBookmarkGroupLabel%",
         "icon": "$(notebook-edit)",
         "category": "Bookmark Manager (BM)"
       },
@@ -577,7 +577,7 @@
           "group": "inline@3"
         },
         {
-          "command": "bookmark-manager.chanegBookmarkGroupLabel",
+          "command": "bookmark-manager.changeBookmarkGroupLabel",
           "when": "view == bookmark-manager && viewItem === custom",
           "group": "inline@1"
         },

diff --git a/package.nls.json b/package.nls.json
@@ -52,5 +52,11 @@
   "bookmark-manager.useBuiltInColors": "When this configuration is turned on, the built-in color set will be added to the defined color (label) set; at the same time, when the user does not customize the color, the built-in color set will be used by default, otherwise the user-defined color set will be used.",
   "bookmark-manager.alwaysIgnore": "Always add 'bookmark-manager.json' to the '.gitignore 'file",
   "bookmark-manager.autoSwitchSingleToMultiWithLineWrap": "Automatically switches a single-line bookmark to a multi-line bookmark when wrapping",
-  "bookmark-manager.addBookmark": "Add new bookmark"
+  "bookmark-manager.addBookmark": "Add new bookmark",
+  "bookmark-manager.changeBookmarkGroupLabel": "Change group label",
+  "bookmark-manager.clearAllBookmarksInGroup": "clear bookmarks in this group",
+  "bookmark-manager.changeBookmarkGroupColor": "Change group color",
+  "bookmark-manager.deleteBookmarkGroup": "Delete group",
+  "bookmark-manager.addBookmarkGroup": "Add a bookmark group",
+  "bookmark-manager.groupedByCustom": "Grouped by custom"
 }
diff --git a/package.nls.zh.json b/package.nls.zh.json
@@ -52,5 +52,11 @@
   "bookmark-manager.useBuiltInColors": "开启此配置,将会在已定义的颜色(标签)集合中追加内置的颜色集合; 同时当用户未自定义颜色的时候, 默认也使用内置的颜色集合, 反之使用用户自定义颜色集合.",
   "bookmark-manager.alwaysIgnore": "将`bookmark-manager.json`总是添加到`.gitignore` 文件中",
   "bookmark-manager.autoSwitchSingleToMultiWithLineWrap": "当在存在单行书签的时候进行换行时,自动改变将单行书签类型的书签改变成多行书签",
-  "bookmark-manager.addBookmark": "增加新书签"
+  "bookmark-manager.addBookmark": "增加新书签",
+  "bookmark-manager.changeBookmarkGroupLabel": "改变分组标签",
+  "bookmark-manager.clearAllBookmarksInGroup": "清除此分组中的所有书签",
+  "bookmark-manager.changeBookmarkGroupColor": "改变分组颜色",
+  "bookmark-manager.deleteBookmarkGroup": "删除分组",
+  "bookmark-manager.addBookmarkGroup": "新增书签分组",
+  "bookmark-manager.groupedByCustom": "自定义分组"
 }
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
@@ -87,7 +87,6 @@ export default async function bootstrap(context: ExtensionContext) {
     registerAllCommands(context);
     updateEverything();
   } catch (error) {
-    console.error(error);
     logger.error(error);
   }
 }

diff --git a/src/commands/bookmark/group.ts b/src/commands/bookmark/group.ts
@@ -67,7 +67,7 @@ export const BookmarkGroupCommands: IBookmarkCommand[] = [
     },
   },
   {
-    name: 'chanegBookmarkGroupLabel',
+    name: 'changeBookmarkGroupLabel',
     callback: async (ctx: IBookmarkCommandContext, args: any) => {
       let meta: IBookmarkGroup | undefined;
       if (!args || !args.meta) {

diff --git a/src/commands/index.ts b/src/commands/index.ts
@@ -1,56 +1,65 @@
 import {ExtensionContext} from 'vscode';
 import {registerCommand} from '../utils';
+import logger from '../utils/logger';
 
 function log(name: string) {
-  console.log('command: ', name, 'has registered successfully!');
+  logger.log(`command: ${name} has registered successfully!`);
 }
 
 /**
  * 注册所需要的代码相关命令
  */
 function registerCodeCommands(context: ExtensionContext) {
-  import('./bookmark').then(modules => {
-    Object.keys(modules).forEach(key => {
-      // @ts-ignore
-      const callback = modules[key] as any;
-      if (typeof callback === 'function') {
-        log(callback.name);
-        registerCommand(callback.name, async args => {
-          await callback(args);
-        });
-        return;
-      }
-
-      if (Array.isArray(callback)) {
-        for (let cb of callback) {
-          log(cb.name);
-          registerCommand(cb.name, async args => {
-            await cb.callback({command: cb, context}, args);
+  import('./bookmark')
+    .then(modules => {
+      Object.keys(modules).forEach(key => {
+        // @ts-ignore
+        const callback = modules[key] as any;
+        if (typeof callback === 'function') {
+          log(callback.name);
+          registerCommand(callback.name, async args => {
+            await callback(args);
           });
+          return;
+        }
+
+        if (Array.isArray(callback)) {
+          for (let cb of callback) {
+            log(cb.name);
+            registerCommand(cb.name, async args => {
+              await cb.callback({command: cb, context}, args);
+            });
+          }
         }
-      }
+      });
+    })
+    .catch(error => {
+      logger.error(error.message);
     });
-  });
 }
 
 /**
  * 注册通用的书签命令
  * @param context
  */
 function registerUniversalCommands() {
-  import('./universal').then(modules => {
-    Object.keys(modules).forEach(key => {
-      // @ts-ignore
-      const callback = modules[key] as any;
-      if (typeof callback === 'function') {
-        log(callback.name);
-        registerCommand(callback.name, async args => {
-          await callback(args);
-        });
-        return;
-      }
+  import('./universal')
+    .then(modules => {
+      Object.keys(modules).forEach(key => {
+        // @ts-ignore
+        const callback = modules[key] as any;
+        if (typeof callback === 'function') {
+          log(callback.name);
+          registerCommand(callback.name, async args => {
+            await callback(args);
+          });
+          return;
+        }
+      });
+    })
+    .catch(error => {
+      logger.error(error.message);
     });
-  });
 }
 
 export default function registerAllBookmarksCommands(

diff --git a/src/constants/command.ts b/src/constants/command.ts
@@ -1,16 +0,0 @@
-export const CMD_TOGGLE_BOOKMARK_WITH_LABEL = 'toggleLineBookmarkWithLabel';
-export const CMD_TOGGLE_LINE_BOOKMARK = 'toggleLineBookmark';
-export const CMD_CLEAR_ALL = 'clearAllBookmarks';
-export const CMD_DELETE_BOOKMARK = 'deleteBookmark';
-export const CMD_EDIT_LABEL = 'editLabel';
-export const CMD_GO_TO_SOURCE_LOCATION = 'gotoSourceLocation';
-export const CMD_TOGGLE_BOOKMARK_WITH_SECTIONS = 'toggleBookmarkWithSelection';
-export const CMD_BOOKMARK_ADD_MORE_MEMO = 'editDescription';
-
-export const CMD_JUMP_TO_BOOKMARK = 'quickJumpTo';
-
-export const CMD_CHANGE_BOOKMARK_COLOR = 'changeBookmarkColor';
-
-export const CMD_CHANGE_BOOKMARK_COLOR_NAME = 'changeBookmarkColorName';
-
-export const CMD_OPEN_IN_EDITOR = 'openInEditor';

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,4 +1,4 @@
-export * from './command';
 export * from './configuration';
 export * from './extension';
 export * from './env';
+export * from './bookmark';
diff --git a/src/providers/BookmarksTreeItem.ts b/src/providers/BookmarksTreeItem.ts
@@ -13,7 +13,6 @@ import {
   BookmarksGroupedByCustomType,
 } from '../types';
 import {getLineInfoStrFromBookmark} from '../utils';
-import {CMD_GO_TO_SOURCE_LOCATION} from '../constants';
 import {ServiceManager} from '../services/ServiceManager';
 import {
   BookmarksGroupedByColorType,
@@ -67,7 +66,7 @@ export default class BookmarkTreeItem extends BaseTreeItem {
     } else {
       this.command = {
         title: l10n.t('Jump to bookmark position'),
-        command: `bookmark-manager.${CMD_GO_TO_SOURCE_LOCATION}`,
+        command: `bookmark-manager.gotoSourceLocation`,
         arguments: [this.meta],
       };
       this._createTooltips();

diff --git a/src/stores/bookmark-group.ts b/src/stores/bookmark-group.ts
@@ -5,7 +5,7 @@ export const BookmarkGroup = types
   .model('BookmarkGroup', {
     id: types.string,
     label: types.string,
-    sortedIndex: types.number,
+    sortedIndex: types.optional(types.number, 0),
     color: types.optional(types.string, DEFAULT_BOOKMARK_GROUP_COLOR),
   })
   .actions(self => {

diff --git a/src/stores/bookmark-store.ts b/src/stores/bookmark-store.ts
@@ -178,7 +178,9 @@ export const BookmarksStore = types
           }
         }
 
-        return grouped;
+        return grouped.sort(
+          (a, b) => a.group.sortedIndex - b.group.sortedIndex,
+        );
       },
       get totalCount() {
         return self.bookmarks.length;
@@ -301,7 +303,7 @@ export const BookmarksStore = types
           BookmarkGroup.create({
             id: generateUUID(),
             label,
-            sortedIndex: -1,
+            sortedIndex: self.groups.length,
             color,
           }),
         );
@@ -322,7 +324,7 @@ export const BookmarksStore = types
             BookmarkGroup.create({
               id: DEFAULT_BOOKMARK_GROUP_ID,
               label: l10n.t('Default Group'),
-              sortedIndex: -1,
+              sortedIndex: 0,
             }),
           );
         }

diff --git a/src/views/BaseTreeView.ts b/src/views/BaseTreeView.ts
@@ -6,7 +6,8 @@ import IController from '../controllers/IController';
 import resolveServiceManager, {
   ServiceManager,
 } from '../services/ServiceManager';
-import {IBookmark} from '../stores';
+import {IBookmark, IBookmarkGroup} from '../stores';
+import {BookmarksGroupedByCustomType} from '../types';
 export enum TreeViewEnum {
   BASE = 0,
   UNIVERSAL,
@@ -120,6 +121,36 @@ export default class BaseTreeView<T extends BaseTreeItem, C extends IController>
             return;
           }
 
+          // 分组情况下进行拖拽操作
+          if (
+            sourceContextValue === 'bookmark' &&
+            targetContextValue === 'custom'
+          ) {
+            const meta = draggedSource.meta as IBookmark;
+            const targetMeta = target.meta as BookmarksGroupedByCustomType;
+            // 同一分组时 不允许拖拽
+            if (meta.groupId === targetMeta.id) {
+              return;
+            }
+            meta.changeGroupId(targetMeta.id);
+          }
+
+          // 分组拖拽调整顺序
+          if (
+            sourceContextValue === 'custom' &&
+            targetContextValue === 'custom'
+          ) {
+            const sourceMeta =
+              draggedSource.meta as BookmarksGroupedByCustomType;
+            const targetMeta = target.meta as BookmarksGroupedByCustomType;
+            if (sourceMeta.id === targetMeta.id) {
+              return;
+            }
+            const sourceGroupIndex = sourceMeta.group.sortedIndex;
+            sourceMeta.group.setSortedIndex(targetMeta.group.sortedIndex);
+            targetMeta.group.setSortedIndex(sourceGroupIndex);
+          }
+
           // 1. 对于顶层级进行拖拽, 顶层进行排序
           // 2. 第二层级中 进行排序
           console.log(draggedSource, target);