fix(gruop): 调整自定义图标渲染样式, 增加按图标分组时候显示自定义名称

czfadmin · Nov 22, 2024 · f6dc746 · f6dc746
1 parent a1af74d
commit f6dc746
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 213 deletions.
diff --git a/src/constants/bookmark.ts b/src/constants/bookmark.ts
@@ -1 +1,4 @@
 export const DEFAULT_BOOKMARK_GROUP_ID = '-999999';
+
+export const default_bookmark_svg_icon =
+  '<path fill="currentColor" d="M17 3H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2"/>';
diff --git a/src/controllers/BookmarksController.ts b/src/controllers/BookmarksController.ts
@@ -37,11 +37,10 @@ import {
   BookmarksGroupedByIconType,
   BookmarksGroupedByColorType,
   BookmarksGroupedByWorkspaceType,
-  BookmarksStore,
   createBookmarkStore,
   IBookmark,
   IBookmarkGroup,
-  IBookmarksStore,
+  BookmarksStoreType,
 } from '../stores';
 
 import {
@@ -61,7 +60,7 @@ export default class BookmarksController implements IController {
 
   private _onDidChangeEvent = new EventEmitter<void>();
 
-  private _store!: IBookmarksStore;
+  private _store!: BookmarksStoreType;
   private _disposables: IDisposable[] = [];
 
   private _watcher: FileSystemWatcher | undefined;
@@ -83,7 +82,7 @@ export default class BookmarksController implements IController {
     return this._context.workspaceState;
   }
 
-  public get store(): IBookmarksStore {
+  public get store(): BookmarksStoreType {
     return this._store!;
   }
 

diff --git a/src/controllers/IController.ts b/src/controllers/IController.ts
@@ -6,10 +6,10 @@ import {
   TreeViewStyleEnum,
 } from '../types';
 import {UniversalStoreType} from './UniversalBookmarkController';
-import {IBookmark, IBookmarksStore} from '../stores';
+import {IBookmark, BookmarksStoreType} from '../stores';
 
 export default interface IController extends Disposable {
-  get store(): IBookmarksStore | UniversalStoreType | undefined;
+  get store(): BookmarksStoreType | UniversalStoreType | undefined;
 
   get totalCount(): number;
 

diff --git a/src/providers/BaseTreeProvider.ts b/src/providers/BaseTreeProvider.ts
@@ -24,7 +24,7 @@ export default class BaseTreeProvider<
 
   private _controller: C;
 
-  private _serviceManager: ServiceManager;
+  private _sm: ServiceManager;
 
   get datastore() {
     return this._controller.store;
@@ -47,12 +47,16 @@ export default class BaseTreeProvider<
   }
 
   get serviceManager() {
-    return this._serviceManager;
+    return this._sm;
+  }
+
+  get iconsService() {
+    return this._sm.iconsService;
   }
 
   constructor(controller: C) {
     this._controller = controller;
-    this._serviceManager = resolveServiceManager();
+    this._sm = resolveServiceManager();
     this._extensionConfiguration = this.configService.configuration;
 
     // 监听插件的配置变化, 同时刷新TreeView
@@ -69,9 +73,11 @@ export default class BaseTreeProvider<
       if (!this.controller.store) {
         return;
       }
-      this._serviceManager.decorationService.updateActiveEditorAllDecorations(
-        true,
-      );
+      this._sm.decorationService.updateActiveEditorAllDecorations(true);
+    });
+
+    this.iconsService.onIconsDidChange(icons => {
+      this.refresh();
     });
   }
 

diff --git a/src/providers/BookmarksTreeProvider.ts b/src/providers/BookmarksTreeProvider.ts
@@ -248,7 +248,7 @@ export class BookmarksTreeProvider extends BaseTreeProvider<
         .groupedBookmarks as BookmarksGroupedByIconType[];
       const children = store.map(it => {
         return new BookmarkTreeItem(
-          it.icon,
+          it.label,
           TreeItemCollapsibleState.Collapsed,
           BookmarkTreeItemCtxValueEnum.ICON,
           it,

diff --git a/src/services/GutterService.ts b/src/services/GutterService.ts
@@ -9,15 +9,6 @@ import {BaseService} from './BaseService';
 export default class GutterService extends BaseService {
   constructor(sm: ServiceManager) {
     super(GutterService.name, sm);
-    // this._sm.configService.onDidChangeConfiguration(ev => {
-    //   if (
-    //     ev.affectsConfiguration(`${EXTENSION_ID}.defaultBookmarkIconColor`) ||
-    //     ev.affectsConfiguration(`${EXTENSION_ID}.colors`) ||
-    //     ev.affectsConfiguration(`${EXTENSION_ID}.useBuiltInColors`)
-    //   ) {
-    //     // this._initial();
-    //   }
-    // });
   }
 
   initial(): void {}

diff --git a/src/services/IconsService.ts b/src/services/IconsService.ts
@@ -7,16 +7,23 @@ import {
 import {IconifyIconsType} from '../types/icon';
 import {BaseService} from './BaseService';
 import {applySnapshot, IDisposer, onSnapshot} from 'mobx-state-tree';
-import {Uri, window, workspace} from 'vscode';
+import {EventEmitter, Uri, window, workspace} from 'vscode';
 import {escapeColor} from '../utils';
 import {EXTENSION_ID} from '../constants';
+import {IconType} from '../stores';
 
 /**
  * @zh 装饰器和树上的图标服务类
  */
 export class IconsService extends BaseService {
   private _downloadingIcons: string[];
 
+  private _onIconsDidChangeEvent: EventEmitter<IconType[]> = new EventEmitter<
+    IconType[]
+  >();
+
+  public onIconsDidChange = this._onIconsDidChangeEvent.event;
+
   public get icons() {
     return this.store.icons;
   }
@@ -26,13 +33,16 @@ export class IconsService extends BaseService {
     this._downloadingIcons = [];
     this._disposers.push(
       onSnapshot(this.sm.icons, snapshot => {
-        this.saveToDisk(this.sm.fileService.iconsPath, this.sm.icons);
+        this.fire();
+        this.saveToDisk(this.sm.fileService.iconsPath, snapshot);
       }),
     );
 
     // 监听插件的的`icons`的变化, 更新存储
     this._disposers.push(
       onSnapshot(this.configure.configure.icons, snapshot => {
+        const {defaultBookmarkIcon, defaultLabeledBookmarkIcon} =
+          this.configure.configure;
         Object.entries(snapshot).forEach(([key, value], index) => {
           if (!this.store.icons.find(it => it.id === value)) {
             this.downloadIcon(value, key);
@@ -41,7 +51,12 @@ export class IconsService extends BaseService {
 
         const iconValues = Object.values(snapshot);
         this.store.icons
-          .filter(it => !iconValues.includes(it.id))
+          .filter(
+            it =>
+              !iconValues.includes(it.id) &&
+              it.id !== defaultBookmarkIcon &&
+              it.id !== defaultLabeledBookmarkIcon,
+          )
           .forEach(it => {
             this.store.removeIcon(it.id);
           });
@@ -123,55 +138,67 @@ export class IconsService extends BaseService {
       }[];
 
       if (!obj || !obj.length) {
-        this.downloadDefaultIcons();
+        await this.downloadDefaultIcons();
       } else {
         applySnapshot(this.sm.store.icons, obj);
+      }
+    }
 
-        const {
-          defaultBookmarkIcon,
-          defaultLabeledBookmarkIcon,
-          icons: iconsInConfigure,
-        } = this.configure.configure;
-
-        if (!obj.find(it => it.id === defaultBookmarkIcon)) {
-          await this.downloadIcon(defaultBookmarkIcon);
-        }
-
-        if (!obj.find(it => it.id === defaultLabeledBookmarkIcon)) {
-          await this.downloadIcon(defaultLabeledBookmarkIcon);
-        }
+    const {
+      defaultBookmarkIcon,
+      defaultLabeledBookmarkIcon,
+      icons: iconsInConfigure,
+    } = this.configure.configure;
 
-        const iconsValues: [string, string][] = [];
+    const iconsValues: [string, string][] = [];
 
-        for (let [key, value] of iconsInConfigure.entries()) {
-          iconsValues.push([key, value]);
-        }
+    for (let [key, value] of iconsInConfigure.entries()) {
+      iconsValues.push([key, value]);
+    }
 
-        const toDownloadIcons: any[] = [];
-        for (let [key, value] of iconsValues) {
-          // 下载配置需要存在但不存在本地的图标数据
-          if (!this.sm.store.icons.find(it => it.id === value)) {
-            toDownloadIcons.push({key, value});
-          }
-        }
+    if (!this.store.icons.find(it => it.id === defaultBookmarkIcon)) {
+      const defaultIcon = iconsValues.find(iv => iv[1] === defaultBookmarkIcon);
+      await this.downloadIcon(
+        defaultBookmarkIcon,
+        defaultIcon ? defaultIcon[0] : 'default:bookmark',
+      );
+    }
 
-        // 删除配置不存在但是本地缓存中存在的图标缓存数据
-        this.store.icons
-          .filter(it => !iconsValues.find(km => km[1] === it.id))
-          .forEach(it => this.store.removeIcon(it.id));
-        if (!toDownloadIcons.length) {
-          return;
-        }
+    if (!this.store.icons.find(it => it.id === defaultLabeledBookmarkIcon)) {
+      const defaultIcon = iconsValues.find(iv => iv[1] === defaultBookmarkIcon);
+      await this.downloadIcon(
+        defaultLabeledBookmarkIcon,
+        defaultIcon ? defaultIcon[0] : 'default:bookmark:tag',
+      );
+    }
 
-        toDownloadIcons.forEach(async it => {
-          await this.downloadIcon(it.value, it.key);
-        });
+    const toDownloadIcons: any[] = [];
+    for (let [key, value] of iconsValues) {
+      // 下载配置需要存在但不存在本地的图标数据
+      if (!this.sm.store.icons.find(it => it.id === value)) {
+        toDownloadIcons.push({key, value});
       }
-      applySnapshot(this.sm.store.icons, obj);
+    }
+
+    // 删除配置不存在但是本地缓存中存在的图标缓存数据
+    this.store.icons
+      .filter(
+        it =>
+          !iconsValues.find(km => km[1] === it.id) &&
+          it.id !== defaultBookmarkIcon &&
+          it.id !== defaultLabeledBookmarkIcon,
+      )
+      .forEach(it => this.store.removeIcon(it.id));
+
+    if (!toDownloadIcons.length) {
       return;
     }
 
-    await this.downloadDefaultIcons();
+    Promise.all(
+      toDownloadIcons.map(it => {
+        return this.downloadIcon(it.value, it.key);
+      }),
+    );
   }
 
   async downloadDefaultIcons() {
@@ -182,8 +209,8 @@ export class IconsService extends BaseService {
     const {defaultBookmarkIcon, defaultLabeledBookmarkIcon} =
       configure.configure;
 
-    await this.downloadIcon(defaultBookmarkIcon);
-    await this.downloadIcon(defaultLabeledBookmarkIcon);
+    await this.downloadIcon(defaultBookmarkIcon, 'default:bookmark');
+    await this.downloadIcon(defaultLabeledBookmarkIcon, 'default:bookmark:tag');
   }
   /**
    * 下载集合列表
@@ -230,4 +257,13 @@ export class IconsService extends BaseService {
       colorLabel,
     );
   }
+
+  fire() {
+    this._onIconsDidChangeEvent.fire(this.sm.icons);
+  }
+
+  dispose(): void {
+    this._onIconsDidChangeEvent.dispose();
+    super.dispose();
+  }
 }
diff --git a/src/stores/bookmark-store.ts b/src/stores/bookmark-store.ts
@@ -253,9 +253,13 @@ export const BookmarksStore = types
         const grouped: BookmarksGroupedByIconType[] = [];
         self.bookmarks.forEach(it => {
           const existed = grouped.find(item => item.icon === it.icon);
+          const iconInfo = ServiceManager.instance.icons.find(
+            ic => ic.id === it.icon,
+          );
           if (!existed) {
             grouped.push({
               icon: it.icon,
+              label: iconInfo?.customName || it.icon,
               bookmarks: [it],
             });
             return;
@@ -754,4 +758,4 @@ export const BookmarksStore = types
     };
   });
 
-export type IBookmarksStore = Instance<typeof BookmarksStore>;
+export type BookmarksStoreType = Instance<typeof BookmarksStore>;
diff --git a/src/stores/bookmark.ts b/src/stores/bookmark.ts
@@ -10,7 +10,10 @@ import {
   TagType,
   TSortedInfo,
 } from './custom';
-import {DEFAULT_BOOKMARK_GROUP_ID} from '../constants/bookmark';
+import {
+  DEFAULT_BOOKMARK_GROUP_ID,
+  default_bookmark_svg_icon,
+} from '../constants/bookmark';
 import {ServiceManager} from '../services';
 import {resolveBookmarkController} from '../bootstrap';
 
@@ -26,6 +29,7 @@ export type BookmarksGroupedByWorkspaceType = {
 
 export type BookmarksGroupedByIconType = {
   icon: string;
+  label: string;
   bookmarks: IBookmark[];
 };
 export const SortedInfoType = types
@@ -207,7 +211,19 @@ export const Bookmark = types
               : icons.find(it => it.id === defaultBookmarkIcon);
         }
 
-        const body = icon?.body.replace(
+        const color = (self as any).escapedColor;
+
+        if (icon) {
+          return Uri.parse(
+            `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24">${
+              icon.body.includes('stroke')
+                ? icon.body.replace(/stroke="(\w.*?)"/gi, `stroke="${color}"`)
+                : icon.body.replace(/fill="(\w.*?)"/gi, `fill="${color}"`)
+            }</svg>`,
+          );
+        }
+        // 这样写只是为了消除ts报警错误,误删
+        const body = default_bookmark_svg_icon.replace(
           /fill="currentColor"/gi,
           `fill="${(self as Instance<typeof Bookmark>).escapedColor}"`,
         );

diff --git a/src/stores/configure.ts b/src/stores/configure.ts
@@ -1,5 +1,5 @@
-import {Instance, applySnapshot, cast, getRoot, types} from 'mobx-state-tree';
-import {WorkspaceConfiguration, workspace} from 'vscode';
+import {Instance, getRoot, types} from 'mobx-state-tree';
+import {workspace} from 'vscode';
 import {
   DEFAULT_BOOKMARK_COLOR,
   default_bookmark_icon,

diff --git a/src/stores/icons.ts b/src/stores/icons.ts
@@ -1,5 +1,4 @@
 import {getRoot, Instance, SnapshotOut, types} from 'mobx-state-tree';
-import {GlobalStore} from './global';
 import {escapeColor} from '../utils';
 import {Uri} from 'vscode';
 import {DEFAULT_BOOKMARK_COLOR} from '../constants';
@@ -38,9 +37,12 @@ export const Icon = types
           configure.configure.defaultBookmarkIconColor ||
           DEFAULT_BOOKMARK_COLOR;
         color = color.startsWith('#') ? escapeColor(color) : configure.color;
-
-        const body = self.body.replace(/fill="(\w.*?)"/gi, `fill="${color}"`);
-
+        let body = self.body;
+        if (!self.body.includes('stroke')) {
+          body = self.body.replace(/fill="(\w.*?)"/gi, `fill="${color}"`);
+        } else {
+          body = self.body.replace(/stroke="(\w.*?)"/gi, `stroke="${color}"`);
+        }
         return Uri.parse(
           `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24">${body}</svg>`,
         );

diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -1,4 +1,3 @@
-import {Instance} from 'mobx-state-tree';
 import {GlobalStore} from './global';
 import {BookmarksStore} from './bookmark-store';