fix: used color record out of max count

zzxming · Dec 3, 2024 · 991202f · 991202f
2 parents 276eeb9 + 84ad494
commit 991202f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/src/modules/table-menu/constants.ts b/src/modules/table-menu/constants.ts
@@ -13,7 +13,6 @@ import SplitCell from '../../svg/split-cell.svg';
 
 export const menuColorSelectClassName = 'color-selector';
 export const contextmenuClassName = 'contextmenu';
-export const usedColors = new Set<string>();
 export const defaultTools: Tool[] = [
   {
     name: 'InsertTop',
@@ -128,6 +127,8 @@ export const defaultTools: Tool[] = [
   },
 ];
 
+export const maxSaveColorCount = 10;
+export const usedColors = new Set<string>();
 export const colorClassName = {
   used: 'table-color-used',
   item: 'table-color-item',

diff --git a/src/modules/table-menu/table-menu-common.ts b/src/modules/table-menu/table-menu-common.ts
@@ -2,7 +2,7 @@ import type Quill from 'quill';
 import type { TableUp } from '../..';
 import type { TableMenuOptions, ToolOption, TooltipInstance } from '../../utils';
 import { createTooltip, debounce, defaultColorMap, isArray, isFunction, randomId } from '../../utils';
-import { colorClassName, defaultTools, menuColorSelectClassName, usedColors } from './constants';
+import { colorClassName, defaultTools, maxSaveColorCount, menuColorSelectClassName, usedColors } from './constants';
 
 export type TableMenuOptionsInput = Partial<Omit<TableMenuOptions, 'texts'>>;
 export class TableMenuCommon {
@@ -21,33 +21,35 @@ export class TableMenuCommon {
       if (!isArray(colorValue)) {
         colorValue = [];
       }
-      colorValue.map((c: string) => usedColors.add(c));
+      colorValue.slice(-1 * maxSaveColorCount).map((c: string) => usedColors.add(c));
     }
     catch {}
 
     this.updateUsedColor = debounce((color?: string) => {
       if (!color) return;
       usedColors.add(color);
-      if (usedColors.size > 10) {
-        const saveColors = Array.from(usedColors).slice(-10);
+      if (usedColors.size > maxSaveColorCount) {
+        const saveColors = Array.from(usedColors).slice(-1 * maxSaveColorCount);
         usedColors.clear();
         saveColors.map(v => usedColors.add(v));
       }
 
       localStorage.setItem(this.options.localstorageKey, JSON.stringify(Array.from(usedColors)));
       const usedColorWrappers = Array.from(document.querySelectorAll(`.${this.colorItemClass}.${colorClassName.used}`));
       for (const usedColorWrapper of usedColorWrappers) {
-        if (!usedColorWrapper) continue;
-
-        const colorItem = usedColorWrapper.querySelectorAll(`.${colorClassName.item}[style*="background-color: ${color}"]`);
-        for (const item of Array.from(colorItem)) {
-          item.remove();
-        }
-
         const newColorItem = document.createElement('div');
         newColorItem.classList.add(colorClassName.item);
         newColorItem.style.backgroundColor = String(color);
-        usedColorWrapper.appendChild(newColorItem);
+        // if already have same color item. doesn't need insert
+        const sameColorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}[style*="background-color: ${newColorItem.style.backgroundColor}"]`));
+        if (sameColorItem.length <= 0) {
+          usedColorWrapper.appendChild(newColorItem);
+        }
+
+        const colorItem = Array.from(usedColorWrapper.querySelectorAll(`.${colorClassName.item}`)).slice(0, -1 * maxSaveColorCount);
+        for (const item of colorItem) {
+          item.remove();
+        }
       }
     }, 1000);
   }
@@ -197,7 +199,7 @@ export class TableMenuCommon {
       const selectedTds = this.getSelectedTds();
       if (item && color && selectedTds.length > 0) {
         this.tableModule.setCellAttrs(selectedTds, key!, color, true);
-        if (item.closest(`.${colorClassName.item}`)) return;
+        if (!item.closest(`.${colorClassName.item}`)) return;
         this.updateUsedColor(color);
       }
     });