sculp-js 1.9.0 → 1.10.1

package/lib/index.d.ts

@@ -106,6 +106,23 @@ declare function arrayEach<V>(array: ArrayLike<V>, iterator: (val: V, idx: numbe
  * @param {ArrayLike<V>} array 数组
  * @param {(val: V, idx: number) => Promise<any>} iterator  支持Promise类型的回调函数
  * @param {boolean} reverse  是否反向遍历
+ * @example
+ *    使用范例如下:
+ * const start = async () => {
+ *   await arrayEachAsync(result, async (item) => {
+ *     await request(item);
+ *     count++;
+ *   })
+ *   console.log('发送次数', count);
+ * }
+
+ * for await...of 使用范例如下
+ * const loadImages =  async (images) => {
+ *   for await (const item of images) {
+ *      await request(item);
+ *      count++;
+ *    }
+ * }
  */
 declare function arrayEachAsync<V>(array: ArrayLike<V>, iterator: (val: V, idx: number) => Promise<any> | any, reverse?: boolean): Promise<void>;
 /**
@@ -285,10 +302,10 @@ declare function getComputedCssVal(el: HTMLElement, property: string, reNumber?:
  * 字符串的像素宽度
  * @param {string} str 目标字符串
  * @param {number} fontSize 字符串字体大小
- * @param {boolean} isRemoveDom 计算后是否移除中间dom元素
+ * @param {boolean} isRemove 计算后是否移除创建的dom元素
  * @returns {*}
  */
-declare function getStrWidthPx(str: string, fontSize?: number, isRemoveDom?: boolean): number;
+declare function getStrWidthPx(str: string, fontSize?: number, isRemove?: boolean): number;
 
 interface Params<T = string | number> {
     [key: string]: T | Array<T>;
@@ -589,30 +606,31 @@ interface ICompressOptions {
 }
 /**
  * Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
- * @param {File | FileList} file 文件
- * @param {ICompressOptions} options
+ *
+ * @param {File | FileList} file 图片或图片数组
+ * @param {ICompressOptions} options 压缩图片配置项，default: {quality:0.52,mime:'image/jpeg'}
  * @returns {Promise<object> | undefined}
  */
-declare function compressImg(file: File | FileList, options: ICompressOptions): Promise<object> | undefined;
+declare function compressImg(file: File | FileList, options?: ICompressOptions): Promise<object> | undefined;
 
 interface ICanvasWM {
-    container: HTMLElement;
-    width: string;
-    height: string;
-    textAlign: CanvasTextAlign;
-    textBaseline: CanvasTextBaseline;
-    font: string;
-    fillStyle: string;
-    content: string;
-    rotate: number;
-    zIndex: number;
+    rootContainer?: HTMLElement | string;
+    width?: string;
+    height?: string;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+    font?: string;
+    fillStyle?: string;
+    rotate?: number;
+    zIndex?: number;
+    watermarkId?: string;
 }
 /**
  * canvas 实现 水印, 具备防删除功能
  * @param {ICanvasWM} canvasWM
  * @example genCanvasWM({ content: 'QQMusicFE' })
  */
-declare function genCanvasWM(canvasWM: ICanvasWM): void;
+declare function genCanvasWM(content?: string, canvasWM?: ICanvasWM): void;
 
 interface DebounceFunc<F extends AnyFunc> {
     (...args: Parameters<F>): void;
@@ -715,6 +733,7 @@ interface IHumanFileSizeOptions {
     decimals?: number;
     si?: boolean;
     separator?: string;
+    baseUnit?: string;
     maxUnit?: string;
 }
 /**
@@ -728,7 +747,7 @@ interface IHumanFileSizeOptions {
  *            ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
  * @returns
  */
-declare function humanFileSize(num: number | string, options: IHumanFileSizeOptions): string;
+declare function humanFileSize(num: number | string, options?: IHumanFileSizeOptions): string;
 /**
  * 将数字格式化成千位分隔符显示的字符串
  * @param {number|string} num 数字
@@ -759,30 +778,35 @@ interface UniqueString {
 declare const uniqueString: UniqueString;
 
 /**
- * @title tooltip
+ * 自定义的 tooltip, 支持鼠标移动动悬浮提示
  * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
  * Created by chendeqiao on 2017/5/8.
  * @example
- *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
- * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+ *  <span onmouseleave="handleMouseLeave('#root')"
+ *        onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
+ * 		    onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
+ *    title content
+ *  </span>
  */
 interface ITooltipParams {
-    rootElId: string;
+    rootContainer: HTMLElement | string;
     title: string;
-    event: PointerEvent;
+    event: PointerEvent | MouseEvent;
+    bgColor?: string;
+    color?: string;
 }
 /**
  * 自定义title提示功能的mouseenter事件句柄
- * @param {ITooltipParams} param1
+ * @param {ITooltipParams} param
  * @returns {*}
  */
-declare function handleMouseEnter({ rootElId, title, event }: ITooltipParams): void;
+declare function handleMouseEnter({ rootContainer, title, event, bgColor, color }: ITooltipParams): void;
 /**
  * 移除提示文案dom的事件句柄
- * @param {string} rootElId
+ * @param {string} rootContainer
  * @returns {*}
  */
-declare function handleMouseLeave(rootElId?: string): void;
+declare function handleMouseLeave(rootContainer?: HTMLElement | string): void;
 declare const tooltipEvent: {
     handleMouseEnter: typeof handleMouseEnter;
     handleMouseLeave: typeof handleMouseLeave;

package/lib/umd/index.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v1.9.0
+ * sculp-js v1.10.1
  * (c) 2023-present chandq
  * Released under the MIT License.
  */
@@ -45,6 +45,23 @@
      * @param {ArrayLike<V>} array 数组
      * @param {(val: V, idx: number) => Promise<any>} iterator  支持Promise类型的回调函数
      * @param {boolean} reverse  是否反向遍历
+     * @example
+     *    使用范例如下:
+     * const start = async () => {
+     *   await arrayEachAsync(result, async (item) => {
+     *     await request(item);
+     *     count++;
+     *   })
+     *   console.log('发送次数', count);
+     * }
+
+     * for await...of 使用范例如下
+     * const loadImages =  async (images) => {
+     *   for await (const item of images) {
+     *      await request(item);
+     *      count++;
+     *    }
+     * }
      */
     async function arrayEachAsync(array, iterator, reverse = false) {
         if (reverse) {
@@ -964,28 +981,32 @@
      * 字符串的像素宽度
      * @param {string} str 目标字符串
      * @param {number} fontSize 字符串字体大小
-     * @param {boolean} isRemoveDom 计算后是否移除中间dom元素
+     * @param {boolean} isRemove 计算后是否移除创建的dom元素
      * @returns {*}
      */
-    function getStrWidthPx(str, fontSize = 14, isRemoveDom = false) {
+    function getStrWidthPx(str, fontSize = 14, isRemove = true) {
         let strWidth = 0;
         console.assert(isString(str), `${str} 不是有效的字符串`);
         if (isString(str) && str.length > 0) {
-            let getEle = document.querySelector('#getStrWidth1494304949567');
+            const id = 'getStrWidth1494304949567';
+            let getEle = document.querySelector(`#${id}`);
             if (!getEle) {
                 const _ele = document.createElement('span');
-                _ele.id = 'getStrWidth1494304949567';
+                _ele.id = id;
                 _ele.style.fontSize = fontSize + 'px';
                 _ele.style.whiteSpace = 'nowrap';
                 _ele.style.visibility = 'hidden';
+                _ele.style.position = 'absolute';
+                _ele.style.top = '-9999px';
+                _ele.style.left = '-9999px';
                 _ele.textContent = str;
                 document.body.appendChild(_ele);
                 getEle = _ele;
             }
             getEle.textContent = str;
             strWidth = getEle.offsetWidth;
-            if (isRemoveDom) {
-                document.body.appendChild(getEle);
+            if (isRemove) {
+                getEle.remove();
             }
         }
         return strWidth;
@@ -1481,16 +1502,73 @@
         };
         return inputObj;
     }
+    /**
+     * 计算图片压缩后的尺寸
+     *
+     * @param {number} maxWidth
+     * @param {number} maxHeight
+     * @param {number} originWidth
+     * @param {number} originHeight
+     * @returns {*}
+     */
+    function calculateSize({ maxWidth, maxHeight, originWidth, originHeight }) {
+        let width = originWidth, height = originHeight;
+        // 图片尺寸超过限制
+        if (originWidth > maxWidth || originHeight > maxHeight) {
+            if (originWidth / originHeight > maxWidth / maxHeight) {
+                // 更宽，按照宽度限定尺寸
+                width = maxWidth;
+                height = Math.round(maxWidth * (originHeight / originWidth));
+            }
+            else {
+                height = maxHeight;
+                width = Math.round(maxHeight * (originWidth / originHeight));
+            }
+        }
+        return { width, height };
+    }
+    /**
+     * 根据原始图片的不同尺寸计算等比例缩放后的宽高尺寸
+     *
+     * @param {number} sizeKB
+     * @param {number} originWidth
+     * @param {number} originHeight
+     * @returns {*}
+     */
+    function scalingByAspectRatio({ sizeKB, originWidth, originHeight }) {
+        let targetWidth = originWidth, targetHeight = originHeight;
+        if (1 * 1024 <= sizeKB && sizeKB < 10 * 1024) {
+            // [1MB, 10MB)
+            const maxWidth = 1600, maxHeight = 1600;
+            const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
+            targetWidth = width;
+            targetHeight = height;
+        }
+        else if (10 * 1024 <= sizeKB) {
+            // [10MB, Infinity)
+            const maxWidth = originWidth > 15000 ? 8192 : originWidth > 10000 ? 4096 : 2000, maxHeight = originHeight > 15000 ? 8192 : originHeight > 10000 ? 4096 : 2000;
+            const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
+            targetWidth = width;
+            targetHeight = height;
+        }
+        return { width: targetWidth, height: targetHeight };
+    }
     /**
      * Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
-     * @param {File | FileList} file 文件
-     * @param {ICompressOptions} options
+     *
+     * @param {File | FileList} file 图片或图片数组
+     * @param {ICompressOptions} options 压缩图片配置项，default: {quality:0.52,mime:'image/jpeg'}
      * @returns {Promise<object> | undefined}
      */
-    function compressImg(file, options) {
-        console.assert(file instanceof File || file instanceof FileList, `${file} 必须是File或FileList类型`);
-        console.assert(supportCanvas(), `当前环境不支持 Canvas`);
-        let targetQuality = 0.52;
+    function compressImg(file, options = { quality: 0.52, mime: 'image/jpeg' }) {
+        if (!(file instanceof File || file instanceof FileList)) {
+            throw new Error(`${file} require be File or FileList`);
+        }
+        else if (!supportCanvas()) {
+            throw new Error(`Current runtime environment not support Canvas`);
+        }
+        const { quality = 0.52, mime = 'image/jpeg' } = isObject(options) ? options : {};
+        let targetQuality = quality;
         if (file instanceof File) {
             const sizeKB = +parseInt((file.size / 1024).toFixed(2));
             if (sizeKB < 1 * 1024) {
@@ -1499,8 +1577,11 @@
             else if (sizeKB >= 1 * 1024 && sizeKB < 5 * 1024) {
                 targetQuality = 0.62;
             }
-            else if (sizeKB >= 5 * 1024) {
-                targetQuality = 0.52;
+            else if (sizeKB >= 5 * 1024 && sizeKB < 10 * 1024) {
+                targetQuality = 0.75;
+            }
+            else if (sizeKB >= 10 * 1024) {
+                targetQuality = 0.92;
             }
         }
         if (options.quality) {
@@ -1525,49 +1606,14 @@
                         image.onload = () => {
                             const canvas = document.createElement('canvas'); // 创建 canvas 元素
                             const context = canvas.getContext('2d');
-                            let targetWidth = image.width;
-                            let targetHeight = image.height;
                             const originWidth = image.width;
                             const originHeight = image.height;
-                            if (1 * 1024 <= sizeKB && sizeKB < 10 * 1024) {
-                                const maxWidth = 1600, maxHeight = 1600;
-                                targetWidth = originWidth;
-                                targetHeight = originHeight;
-                                // 图片尺寸超过的限制
-                                if (originWidth > maxWidth || originHeight > maxHeight) {
-                                    if (originWidth / originHeight > maxWidth / maxHeight) {
-                                        // 更宽，按照宽度限定尺寸
-                                        targetWidth = maxWidth;
-                                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
-                                    }
-                                    else {
-                                        targetHeight = maxHeight;
-                                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
-                                    }
-                                }
-                            }
-                            if (10 * 1024 <= sizeKB && sizeKB <= 20 * 1024) {
-                                const maxWidth = 1400, maxHeight = 1400;
-                                targetWidth = originWidth;
-                                targetHeight = originHeight;
-                                // 图片尺寸超过的限制
-                                if (originWidth > maxWidth || originHeight > maxHeight) {
-                                    if (originWidth / originHeight > maxWidth / maxHeight) {
-                                        // 更宽，按照宽度限定尺寸
-                                        targetWidth = maxWidth;
-                                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
-                                    }
-                                    else {
-                                        targetHeight = maxHeight;
-                                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
-                                    }
-                                }
-                            }
-                            canvas.width = targetWidth;
-                            canvas.height = targetHeight;
-                            context.clearRect(0, 0, targetWidth, targetHeight);
-                            context.drawImage(image, 0, 0, targetWidth, targetHeight); // 绘制 canvas
-                            const canvasURL = canvas.toDataURL(options.mime, targetQuality);
+                            const { width, height } = scalingByAspectRatio({ sizeKB, originWidth, originHeight });
+                            canvas.width = width;
+                            canvas.height = height;
+                            context.clearRect(0, 0, width, height);
+                            context.drawImage(image, 0, 0, width, height); // 绘制 canvas
+                            const canvasURL = canvas.toDataURL(mime, targetQuality);
                             const buffer = weAtob(canvasURL.split(',')[1]);
                             let length = buffer.length;
                             const bufferArray = new Uint8Array(new ArrayBuffer(length));
@@ -1606,15 +1652,14 @@
      * @param {ICanvasWM} canvasWM
      * @example genCanvasWM({ content: 'QQMusicFE' })
      */
-    function genCanvasWM(canvasWM) {
-        const { container = document.body, width = '300px', height = '200px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
+    function genCanvasWM(content = '请勿外传', canvasWM) {
+        const { rootContainer = document.body, width = '300px', height = '150px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
         // fontWeight = 500,
-        fillStyle = 'rgba(189, 177, 167, .3)', content = '请勿外传', rotate = 30, zIndex = 2147483647 } = canvasWM;
-        // 仅限主页面添加水印
-        // if (!location.pathname.includes('/home')) {
-        //   return;
-        // }
-        const args = canvasWM;
+        fillStyle = 'rgba(189, 177, 167, .3)', rotate = -20, zIndex = 2147483647, watermarkId = '__wm' } = isNullOrUnDef(canvasWM) ? {} : canvasWM;
+        const container = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
+        if (!container) {
+            throw new Error(`${rootContainer} is not valid Html Element or element selector`);
+        }
         const canvas = document.createElement('canvas');
         canvas.setAttribute('width', width);
         canvas.setAttribute('height', height);
@@ -1627,36 +1672,36 @@
         ctx.rotate((Math.PI / 180) * rotate);
         ctx.fillText(content, parseFloat(width) / 4, parseFloat(height) / 2);
         const base64Url = canvas.toDataURL();
-        const __wm = document.querySelector('.__wm');
+        const __wm = document.querySelector(`#${watermarkId}`);
         const watermarkDiv = __wm || document.createElement('div');
         const styleStr = `opacity: 1 !important; display: block !important; visibility: visible !important;         position:absolute;          left:0; top:0;         width:100%;          height:100%;          z-index:${zIndex};          pointer-events:none;          background-repeat:repeat;          background-image:url('${base64Url}')`;
         watermarkDiv.setAttribute('style', styleStr);
-        watermarkDiv.classList.add('__wm');
+        watermarkDiv.setAttribute('id', watermarkId);
         watermarkDiv.classList.add('nav-height');
         if (!__wm) {
             container.style.position = 'relative';
             container.appendChild(watermarkDiv);
         }
         const getMutableStyle = (ele) => {
-            const computedStle = getComputedStyle(ele);
+            const computedStyle = getComputedStyle(ele);
             return {
-                opacity: computedStle.getPropertyValue('opacity'),
-                zIndex: computedStle.getPropertyValue('z-index'),
-                display: computedStle.getPropertyValue('display'),
-                visibility: computedStle.getPropertyValue('visibility')
+                opacity: computedStyle.getPropertyValue('opacity'),
+                zIndex: computedStyle.getPropertyValue('z-index'),
+                display: computedStyle.getPropertyValue('display'),
+                visibility: computedStyle.getPropertyValue('visibility')
             };
         };
         //@ts-ignore
         const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
         if (MutationObserver) {
             let mo = new MutationObserver(function () {
-                const __wm = document.querySelector('.__wm'); // 只在__wm元素变动才重新调用 __canvasWM
+                const __wm = document.querySelector(`#${watermarkId}`); // 只在__wm元素变动才重新调用 __canvasWM
                 if (!__wm) {
                     // 避免一直触发
                     // console.log('regenerate watermark by delete::')
                     mo.disconnect();
                     mo = null;
-                    genCanvasWM(JSON.parse(JSON.stringify(args)));
+                    genCanvasWM(content, canvasWM);
                 }
                 else {
                     const { opacity, zIndex, display, visibility } = getMutableStyle(__wm);
@@ -1668,7 +1713,7 @@
                         mo.disconnect();
                         mo = null;
                         container.removeChild(__wm);
-                        genCanvasWM(JSON.parse(JSON.stringify(args)));
+                        genCanvasWM(content, canvasWM);
                     }
                 }
             });
@@ -1921,11 +1966,17 @@
      *            ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
      * @returns
      */
-    function humanFileSize(num, options) {
-        const { decimals = 0, si = false, separator = ' ', maxUnit } = options;
-        const units = si
+    function humanFileSize(num, options = { decimals: 0, si: false, separator: ' ' }) {
+        const { decimals = 0, si = false, separator = ' ', baseUnit, maxUnit } = options;
+        let units = si
             ? ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
             : ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+        if (!isNullOrUnDef(baseUnit)) {
+            const targetIndex = units.findIndex(el => el === baseUnit);
+            if (targetIndex !== -1) {
+                units = units.slice(targetIndex);
+            }
+        }
         if (!isNullOrUnDef(maxUnit)) {
             const targetIndex = units.findIndex(el => el === maxUnit);
             if (targetIndex !== -1) {
@@ -2023,49 +2074,55 @@
     };
 
     /**
-     * @title tooltip
+     * 自定义的 tooltip, 支持鼠标移动动悬浮提示
      * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
      * Created by chendeqiao on 2017/5/8.
      * @example
-     *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
-     * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+     *  <span onmouseleave="handleMouseLeave('#root')"
+     *        onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
+     * 		    onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
+     *    title content
+     *  </span>
      */
     /**
      * 自定义title提示功能的mouseenter事件句柄
-     * @param {ITooltipParams} param1
+     * @param {ITooltipParams} param
      * @returns {*}
      */
-    function handleMouseEnter({ rootElId = '#root', title, event }) {
+    function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {
         try {
-            const $rootEl = document.querySelector(rootElId);
-            console.assert($rootEl !== null, `未找到id为 ${rootElId} 的dom元素`);
+            const $rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
+            if (!$rootEl) {
+                throw new Error(`${rootContainer} is not valid Html Element or element selector`);
+            }
             let $customTitle = null;
+            const styleId = 'style-tooltip-inner1494304949567';
             // 动态创建class样式，并加入到head中
-            if (!document.querySelector('.tooltip-inner1494304949567')) {
+            if (!document.querySelector(`#${styleId}`)) {
                 const tooltipWrapperClass = document.createElement('style');
                 tooltipWrapperClass.type = 'text/css';
+                tooltipWrapperClass.id = styleId;
                 tooltipWrapperClass.innerHTML = `
         .tooltip-inner1494304949567 {
           max-width: 250px;
           padding: 3px 8px;
-          color: #fff;
+          color: ${color};
           text-decoration: none;
           border-radius: 4px;
           text-align: left;
+          background-color: ${bgColor};
         }
       `;
                 document.querySelector('head').appendChild(tooltipWrapperClass);
             }
-            if (document.querySelector('#customTitle1494304949567')) {
-                $customTitle = document.querySelector('#customTitle1494304949567');
+            $customTitle = document.querySelector('#customTitle1494304949567');
+            if ($customTitle) {
                 mouseenter($customTitle, title, event);
             }
             else {
                 const $contentContainer = document.createElement('div');
-                $contentContainer.className = 'customTitle';
                 $contentContainer.id = 'customTitle1494304949567';
-                $contentContainer.className = 'tooltip';
-                $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden;';
+                $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden; position: absolute;';
                 $contentContainer.innerHTML =
                     '<div class="tooltip-inner1494304949567" style="word-wrap: break-word; max-width: 44px;">皮肤</div>';
                 $rootEl.appendChild($contentContainer);
@@ -2118,11 +2175,11 @@
     }
     /**
      * 移除提示文案dom的事件句柄
-     * @param {string} rootElId
+     * @param {string} rootContainer
      * @returns {*}
      */
-    function handleMouseLeave(rootElId = '#root') {
-        const rootEl = document.querySelector(rootElId), titleEl = document.querySelector('#customTitle1494304949567');
+    function handleMouseLeave(rootContainer = '#root') {
+        const rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer, titleEl = document.querySelector('#customTitle1494304949567');
         if (rootEl && titleEl) {
             rootEl.removeChild(titleEl);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sculp-js",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "packageManager": "npm@8.19.2",
   "description": "js utils library, includes function library、class library",
   "scripts": {
@@ -79,6 +79,7 @@
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.2.2",
     "prettier": "^3.0.3",