fix(bookmarkcolor): 修复书签颜色配置调整渲染不生效问题

Author: czfadmin

.changeset/chilly-games-boil.md

@@ -0,0 +1,5 @@
+---
+'bookmark-manager': patch
+---
+
+fix(bookmarkcolor): 修复书签颜色配置调整渲染不生效问题

package.nls.json

@@ -30,7 +30,7 @@
   "bookmark-manager.textDecorationThickness.description": "Text decoration thickness",
   "bookmark-manager.lineBlame.description": "Enable Line Blame",
   "bookmark-manager.fontWeight.description": "Font Weight",
-  "bookmark-manager.colors.description": "Custom bookmark color, object format: {\" name\": \"value\"}",
+  "bookmark-manager.colors.description": "Custom bookmark color, object format: {\" name\": \"value\"}.Note that this color value should be in hexadecimal format as much as possible. This makes it easier for the plugin to have a transparent effect when highlighting the current bookmark line, so that the current line content will not be unclear after it is turned on.",
   "bookmark-manager.defaultBookmarkIconColor.description": "The default color of bookmark icon.",
   "bookmark-manager.enableClick.description": "Enable click to jump to bookmark location",
   "bookmark-manager.viewsWelcome.content": "Add some bookmarks",
@@ -78,4 +78,4 @@
   "bookmark-manager.defaultLabeledBookmarkIcon.description": "Default labeled bookmark icon",
   "bookmark-manager.defaultBookmarkIcon.description": "Default bookmark icon",
   "bookmark-manager.icons.description": "Custom icon list, `key` is the custom icon name, `value` format is `prefix:name`, which is the `iconify` website icon name format. for example: 'mdi:bookmark'"
-}
+}

package.nls.zh.json

@@ -30,7 +30,7 @@
   "bookmark-manager.textDecorationThickness.description": "设置用于装饰的线条粗细",
   "bookmark-manager.lineBlame.description": "是否跟随鼠标位置显示书签信息",
   "bookmark-manager.fontWeight.description": "书签字体权重",
-  "bookmark-manager.colors.description": "设置书签的颜色",
+  "bookmark-manager.colors.description": "设置书签的颜色.注意, 这个颜色值尽量使用16进制格式,.这样方便插件在使用高亮当前书签所在行的时候可以有个透明的效果,不至于导致开启后导致看不清当前行的内容",
   "bookmark-manager.defaultBookmarkIconColor.description": "默认书签图标的颜色",
   "bookmark-manager.enableClick": "启用双击跳转到书签位置",
   "bookmark-manager.viewsWelcome.content": "增加一些书签",
@@ -78,4 +78,4 @@
   "bookmark-manager.defaultLabeledBookmarkIcon.description": "打上标签的书签的默认图标",
   "bookmark-manager.defaultBookmarkIcon.description": "书签的默认图标",
   "bookmark-manager.icons.description": "自定义图标列表，`key`为自定义图标名称，`value`格式为`prefix:name`，即`iconify`网站图标名称格式.例如: 'mdi:bookmark'"
-}
+}

src/constants/colors.ts

@@ -1,12 +1,36 @@
-export const defaultColors = {
-  red: 'red',
-  green: 'green',
-  blue: 'blue',
-  white: 'white',
-  yellow: 'yellow',
-  orange: 'orange',
-  purple: 'purple',
-  black: 'black',
+export const defaultColors: { [name: string]: { value: string, hex: string } } = {
+  red: {
+    value: 'red',
+    hex: '#ff0000'
+  },
+  green: {
+    value: 'green',
+    hex: '#008000'
+  },
+  blue: {
+    value: 'blue',
+    hex: '#2196F3'
+  },
+  white: {
+    value: 'white',
+    hex: '#0000ff'
+  },
+  yellow: {
+    value: 'yellow',
+    hex: '#FFD700'
+  },
+  orange: {
+    value: 'orange',
+    hex: '#FF9800'
+  },
+  purple: {
+    value: 'purple',
+    hex: '#9C27B0'
+  },
+  black: {
+    value: 'black',
+    hex: '#212121'
+  }
 };
 /**
  * 默认的书签的颜色标签

src/services/ConfigService.ts

@@ -49,6 +49,7 @@ export default class ConfigService extends BaseService {
   get decorationConfiguration() {
     return this.configure.decoration;
   }
+  
   get configuration() {
     return this.configure.configure;
   }

src/services/DecorationService.ts

@@ -6,13 +6,13 @@ import {
   TextEditorDecorationType,
   window,
 } from 'vscode';
-import {ServiceManager} from './ServiceManager';
-import {resolveBookmarkController} from '../bootstrap';
+import { ServiceManager } from './ServiceManager';
+import { resolveBookmarkController } from '../bootstrap';
 import BookmarksController from '../controllers/BookmarksController';
-import {Bookmark, IBookmark} from '../stores/bookmark';
-import {BaseService} from './BaseService';
-import {DEFAULT_BOOKMARK_COLOR} from '../constants';
-import {Instance} from 'mobx-state-tree';
+import { Bookmark, IBookmark } from '../stores/bookmark';
+import { BaseService } from './BaseService';
+import { DEFAULT_BOOKMARK_COLOR } from '../constants';
+import { Instance } from 'mobx-state-tree';
 
 /**
  * 装饰器服务类
@@ -107,7 +107,7 @@ export default class DecorationService extends BaseService {
   }
 
   createTextDecoration(bookmark: IBookmark) {
-    let color = bookmark.plainColor || DEFAULT_BOOKMARK_COLOR;
+    let { isHex, value: color } = bookmark.hexColor;
 
     const {
       fontWeight,
@@ -129,7 +129,7 @@ export default class DecorationService extends BaseService {
     let overviewRulerColor;
     let overviewRulerLane: OverviewRulerLane | undefined = undefined;
     if (showGutterInOverviewRuler) {
-      overviewRulerColor = bookmark.plainColor;
+      overviewRulerColor = color;
       overviewRulerLane = OverviewRulerLane.Center;
     } else {
       overviewRulerColor = undefined;
@@ -147,9 +147,7 @@ export default class DecorationService extends BaseService {
     }
 
     if (alwaysUseDefaultColor) {
-      color =
-        this.store.colors.find(it => it.label === 'default')?.value ||
-        DEFAULT_BOOKMARK_COLOR;
+      color = this.store.colors.get('deault')?.value || DEFAULT_BOOKMARK_COLOR;
     }
 
     let rangeBehavior = DecorationRangeBehavior.ClosedClosed;

src/services/FileService.ts

@@ -16,7 +16,7 @@ export class FileService extends BaseService {
       os.homedir(),
       os.platform() === 'win32'
         ? '.bookmark-manager'
-        : './config/.bookmark-manager',
+        : './.config/bookmark-manager',
     );
     this.checkDirIsExists(_path);
     return _path;

src/services/IconsService.ts

@@ -1,16 +1,16 @@
-import {ServiceManager} from './ServiceManager';
-import {ofetch} from 'ofetch';
+import { ServiceManager } from './ServiceManager';
+import { ofetch } from 'ofetch';
 import {
   iconfiy_public_url,
   iconify_collection_endpoint,
 } from '../constants/icons';
-import {IconifyIconsType} from '../types/icon';
-import {BaseService} from './BaseService';
-import {applySnapshot, IDisposer, onSnapshot} from 'mobx-state-tree';
-import {EventEmitter, Uri, window, workspace} from 'vscode';
-import {escapeColor} from '../utils';
-import {EXTENSION_ID} from '../constants';
-import {IconType} from '../stores';
+import { IconifyIconsType } from '../types/icon';
+import { BaseService } from './BaseService';
+import { applySnapshot, IDisposer, onSnapshot } from 'mobx-state-tree';
+import { EventEmitter, Uri, window, workspace } from 'vscode';
+import { escapeColor } from '../utils';
+import { EXTENSION_ID } from '../constants';
+import { IconType } from '../stores';
 
 /**
  * @zh 装饰器和树上的图标服务类
@@ -41,7 +41,7 @@ export class IconsService extends BaseService {
     // 监听插件的的`icons`的变化, 更新存储
     this._disposers.push(
       onSnapshot(this.configure.configure.icons, snapshot => {
-        const {defaultBookmarkIcon, defaultLabeledBookmarkIcon} =
+        const { defaultBookmarkIcon, defaultLabeledBookmarkIcon } =
           this.configure.configure;
         Object.entries(snapshot).forEach(([key, value], index) => {
           if (!this.store.icons.find(it => it.id === value)) {
@@ -70,7 +70,7 @@ export class IconsService extends BaseService {
           ev.affectsConfiguration(`${EXTENSION_ID}.defaultBookmarkIcon`) ||
           ev.affectsConfiguration(`${EXTENSION_ID}.defaultLabeledBookmarkIcon`)
         ) {
-          const {defaultBookmarkIcon, defaultLabeledBookmarkIcon} =
+          const { defaultBookmarkIcon, defaultLabeledBookmarkIcon } =
             this.configure.configure;
           if (!this.store.icons.find(it => it.id === defaultBookmarkIcon)) {
             this.downloadIcon(defaultBookmarkIcon, 'default:bookmark');
@@ -112,6 +112,10 @@ export class IconsService extends BaseService {
       const response = await this.download(
         `${iconfiy_public_url}/${prefix}.json?icons=${name}`,
       );
+      if (response.name === 'FetchError') {
+        window.showInformationMessage('Icon download failed!');
+        return;
+      }
       window.showInformationMessage('Icon downloaded successfully!');
       const svgBody = (response as IconifyIconsType).icons[name].body;
       this.store.addNewIcon(prefix, name, svgBody, customName);
@@ -176,7 +180,7 @@ export class IconsService extends BaseService {
     for (let [key, value] of iconsValues) {
       // 下载配置需要存在但不存在本地的图标数据
       if (!this.sm.store.icons.find(it => it.id === value)) {
-        toDownloadIcons.push({key, value});
+        toDownloadIcons.push({ key, value });
       }
     }
 
@@ -206,7 +210,7 @@ export class IconsService extends BaseService {
     if (!configure) {
       return;
     }
-    const {defaultBookmarkIcon, defaultLabeledBookmarkIcon} =
+    const { defaultBookmarkIcon, defaultLabeledBookmarkIcon } =
       configure.configure;
 
     await this.downloadIcon(defaultBookmarkIcon, 'default:bookmark');
@@ -239,7 +243,7 @@ export class IconsService extends BaseService {
     }
 
     let color =
-      this.store.colors.find(it => it.label === colorLabel)?.value ||
+      this.store.colors.get(colorLabel)?.value ||
       this.configure.configure.defaultBookmarkIconColor;
 
     color = color.startsWith('#') ? escapeColor(color) : color;

src/stores/bookmark-store.ts

@@ -1,25 +1,25 @@
-import {Instance, types} from 'mobx-state-tree';
-import {l10n, Uri, window, workspace, WorkspaceFolder} from 'vscode';
-import {generateUUID, sortBookmarks} from '../utils';
+import { Instance, types } from 'mobx-state-tree';
+import { l10n, Uri, window, workspace, WorkspaceFolder } from 'vscode';
+import { generateUUID, sortBookmarks } from '../utils';
 import {
   BookmarksGroupedByCustomType,
   BookmarksGroupedByFileType,
   TreeViewGroupEnum,
   TreeViewSortedEnum,
   TreeViewStyleEnum,
 } from '../types';
-import {registerExtensionCustomContextByKey} from '../context';
+import { registerExtensionCustomContextByKey } from '../context';
 import {
   BookmarksGroupedByColorType,
   BookmarksGroupedByWorkspaceType,
   IBookmark,
   Bookmark,
   BookmarksGroupedByIconType,
 } from './bookmark';
-import {BookmarkGroup, IBookmarkGroup} from './bookmark-group';
-import {DEFAULT_BOOKMARK_GROUP_ID} from '../constants/bookmark';
-import {isProxy} from 'util/types';
-import {LoggerService, ServiceManager} from '../services';
+import { BookmarkGroup, IBookmarkGroup } from './bookmark-group';
+import { DEFAULT_BOOKMARK_GROUP_ID } from '../constants/bookmark';
+import { isProxy } from 'util/types';
+import { LoggerService, ServiceManager } from '../services';
 
 const BookmarkGroupData = types.model('BookmarkGroupData', {
   id: types.string,
@@ -166,7 +166,7 @@ export const BookmarksStore = types
 
           if (!existed) {
             grouped.push({
-              workspace: {...it.workspaceFolder, ...it.wsFolder},
+              workspace: { ...it.workspaceFolder, ...it.wsFolder },
               files: [
                 {
                   bookmarks: [it],
@@ -364,7 +364,7 @@ export const BookmarksStore = types
 
       const groupId = bookmark.groupId || DEFAULT_BOOKMARK_GROUP_ID;
 
-      const {defaultBookmarkIcon, defaultLabeledBookmarkIcon} =
+      const { defaultBookmarkIcon, defaultLabeledBookmarkIcon } =
         sm.store.configure.configure;
       _bookmark = Bookmark.create({
         id: id || generateUUID(),
@@ -728,9 +728,9 @@ export const BookmarksStore = types
     /**
      * 已经通过之前groups字段实现
      */
-    function addCustomroupInfo(info: BookmarkGroupDataType) {}
+    function addCustomroupInfo(info: BookmarkGroupDataType) { }
 
-    function afterCreate() {}
+    function afterCreate() { }
 
     return {
       add,