anime-cursor 0.1.2 → 0.2.0

package/README.md

@@ -1,12 +1,14 @@
 # AnimeCursor
 
 <div align="center">
-  <img src="https://cdn.jsdelivr.net/gh/shuninyu/anime-cursor@main/title.gif" width="60%" alt="AnimeCursor"/>
+  <img src="https://cdn.jsdelivr.net/gh/shuninyu/anime-cursor@main/title.gif" width="384px" alt="AnimeCursor"/>
 </div>
 
 [[简体中文]](#animecursorsc)
+## [Visit the official website](https://shuninyu.github.io/anime-cursor/) for more informations
+## [Read documents](https://shuninyu.github.io/anime-cursor/docs) to get started with AnimeCursor
 
-AnimeCursor is a lightweight animated cursor JS library that enables dynamic mouse pointers for websites.
+AnimeCursor is a lightweight JavaScript library for animated custom cursors.
 
 AnimeCursor has no dependencies on any frameworks, making it suitable for personal websites, creative portfolios, and experimental UI projects.
 
@@ -14,11 +16,11 @@ AnimeCursor has no dependencies on any frameworks, making it suitable for person
 
 ## ✨ Features
 
-* Supports PNG sprite sheet frame-by-frame animation
+* Supports sprite sheet frame-by-frame animation
 * Supports GIF (animated GIFs, not static GIFs used by native cursors)
 * Customizable cursor types, automatically switched by AnimeCursor
 * CSS-based animation implementation, high performance
-* Prepare PNG sprite sheets in the correct format, and AnimeCursor will automatically generate cursor animations based on your settings
+* Prepare sprite sheets in the correct format, and AnimeCursor will automatically generate cursor animations based on your settings
 * Built with native JavaScript, no third-party dependencies
 
 ## 📦 Installation
@@ -54,12 +56,13 @@ Here is an example of how to use AnimeCursor:
 new AnimeCursor({
     cursors: {
         // each type of cursor needs tags, size and image
-        default: {
-            tags: ['body'], // default cursor recommended setting
+        idle: {
             size: [64,64],
-            image: './cursor_default.png' // static cursor only needs image
+            image: './cursor_default.png', // static cursor only needs image
+            default: true // set this cursor as default cursor
+            // only default cursor doesn't needs tags
         },
-        // png sprite animated cursor needs frames and duration
+        // sprite animated cursor needs frames and duration
         pointer: {
             tags: ['a', 'button'],
             size: [64,64],
@@ -92,18 +95,7 @@ Each key represents a cursor type (the name can be freely defined).
 
 For each key, the following parameters can be set. Missing required parameters will cause an error.
 
-| Parameter | Type | Required | Description |
-|-|-|-|-|
-| `tags` | `string[]` | ✅ | HTML tags that should use this cursor |
-| `size` | `number` | ✅ | Cursor dimensions [width, height] in pixels |
-| `image` | `string` | ✅ | Image path (PNG / GIF) |
-| `frames` | `number` || Number of frames for PNG sprites (set to `1` for static images) |
-| `duration` | `number` | | Animation loop duration (seconds) ⚠️ PNG sprite animations *only* work when this parameter is set |
-| `pingpong` | `boolean` | | Enable ping-pong (back-and-forth) looping (for PNG sprite animations only) |
-| `offset` | `[number, number]` | | Cursor alignment offset [ x , y ] ⚠️ This parameter is not affected by `scale`|
-| `scale` | `[number, number]` | | Cursor scale factor based on `size` [ x , y ] ⚠️ Only supported for GIF cursors. Do not set for PNG sprite cursors, as it will break the animation. |
-| `pixel` | `boolean` | | Enable pixelated rendering |
-| `zIndex` | `number` | | Cursor z-index layer (not recommended to modify) |
+Check the [DOCUMENTATION](https://shuninyu.github.io/anime-cursor/docs/configuration#options) for details.
 
 ### `debug` (Optional)
 
@@ -122,10 +114,10 @@ If you want animated cursors to be displayed on these devices, add `enableTouch:
 
 ### 📁 Files
 
-* **For any PNG sprite animation cursor, its PNG sprite sheet should be arranged in a single horizontal row.** AnimeCursor will automatically generate the PNG sprite animation.
+* **For any sprite animation cursor, its sprite sheet should be arranged in a single horizontal row.** AnimeCursor will automatically generate the PNG sprite animation.
   For example, if you set the `size` (width, height) for a `pointer` cursor to `[64px , 64px]` and `frames` to `3`, the prepared sprite sheet dimensions (width, height) should be: `[192px , 64px]`.
 
-* For pixel art with a large number of frames, you can use the original image (whether GIF or PNG-sprite-sheet) to save storage space or bandwidth. Then, use the `scale` parameter in the configuration to resize the cursor and set `pixel` to `true` to avoid blurry scaling.
+* For pixel art with a large number of frames, you can use the original image (whether GIF or sprite-sheet) to save storage space or bandwidth. Then, use the `scale` parameter in the configuration to resize the cursor and set `pixel` to `true` to avoid blurry scaling.
 
 ### 🧩 Tagging Mechanism
 
@@ -145,11 +137,10 @@ Therefore, to assign a specific animated cursor to a particular element, simply
 
 ### 🎞️ Animation Rules
 
-#### PNG Cursors
+#### Sprite Sheets Animation Cursors
 
 Animation is generated **only when all of the following conditions are met**:
 
-* The image is a PNG
 * `frames` is set and `frames > 1`
 * `duration` is set
 
@@ -170,10 +161,13 @@ If `duration` is not set, the cursor will be treated as a **static cursor**, eve
 # AnimeCursor(SC)
 
 <div align="center">
-  <img src="https://cdn.jsdelivr.net/gh/shuninyu/anime-cursor@main/title.gif" width="60%" alt="AnimeCursor"/>
+  <img src="https://cdn.jsdelivr.net/gh/shuninyu/anime-cursor@main/title.gif" width="384px" alt="AnimeCursor"/>
 </div>
 
-AnimeCursor 是一个轻量级动画光标JS，能够让网站拥有动态的鼠标指针。
+## [访问官网](https://shuninyu.github.io/anime-cursor/)以获取更多信息
+## [阅读文档](https://shuninyu.github.io/anime-cursor/docs/zh)快速上手 AnimeCursor
+
+AnimeCursor 是一个轻量级自定义动画光标JavaScript库。
 
 AnimeCursor 无需依赖任何框架，适合个人网站、创意作品集以及实验性 UI 项目。
 
@@ -181,11 +175,11 @@ AnimeCursor 无需依赖任何框架，适合个人网站、创意作品集以
 
 ## ✨ 特性
 
-* 支持 PNG 精灵图逐帧动画
+* 支持精灵图逐帧动画
 * 支持 GIF（动态gif，而不是原生光标的静止gif）
 * 自定义光标类型，由 AnimeCursor 自动切换
 * 基于 CSS 的动画实现，高性能
-* 按照格式准备好 PNG 精灵图表，AnimeCursor 将基于你的设置自动生成光标动画
+* 按照格式准备好精灵图表，AnimeCursor 将基于你的设置自动生成光标动画
 * 基于原生JavaScript，无任何第三方依赖
 
 ## 📦 部署方法
@@ -221,11 +215,12 @@ new AnimeCursor({
     cursors: {
         // 每种光标都需要 tags size 和 image
         default: {
-            tags: ['body'], // 默认光标推荐照此设置
             size: [64,64],
-            image: './cursor_default.png' // 静态光标只需要图片链接
+            image: './cursor_default.png', // 静态光标只需要图片链接
+            default: true // 将此光标设为默认光标
+            // 默认光标不需要 tags
         },
-        // png 精灵图动画光标还需要 frames 和 duration
+        // 精灵图动画光标还需要 frames 和 duration
         pointer: {
             tags: ['a', 'button'],
             size: [64,64],
@@ -258,18 +253,7 @@ new AnimeCursor({
 
 对于每个key，有以下参数可以设置，其中必填项如果缺失则会报错。
 
-|参数|类型|必填|说明|
-|-|-|-|-|
-|`tags`|`string[]`|✅|使用该光标的 HTML 标签|
-|`size`|`number`|✅|光标尺寸（宽高，像素）|
-|`image`|`string`|✅|图片路径（PNG / GIF）|
-|`frames`|`number`||PNG 帧数（静态图片请设置为 `1` ）|
-|`duration`|`number`||动画循环时长（秒）⚠️PNG精灵图动画只有设置该参数才会生效|
-|`pingpong`|`boolean`||是否启用乒乓循环（仅PNG精灵图动画）|
-|`offset`|`[number, number]`||光标对齐偏移量 [ x , y ]⚠️此参数不受 `scale` 影响|
-|`scale`|`[number, number]`||基于size的光标缩放 [ x , y ]⚠️仅支持GIF光标，PNG精灵图动画光标请勿设置，否则会使动画失效|
-|`pixel`|`boolean`||是否启用像素化渲染|
-|`zIndex`|`number`||光标层级（不建议添加此项设置）|
+查看 [官方文档](https://shuninyu.github.io/anime-cursor/docs/zh/configuration#options) 查看详细可用参数。
 
 ### `debug`（选填）
 
@@ -288,10 +272,10 @@ AnimeCursor 会自动识别移动触屏设备（比如手机、平板电脑）
 
 ### 📁 文件
 
-* **对于任何 PNG 精灵图动画光标，它的 PNG 精灵图表都应该为单行横向布局，** AnimeCursor 会自动生成 PNG 精灵图动画。
+* **对于任何精灵图动画光标，它的精灵图表都应该为单行横向布局，** AnimeCursor 会自动生成 PNG 精灵图动画。
 例如，你为 `pointer` 光标设置的`size`（长，宽）为 `[64px , 64px]` ，帧数为 `3` ，那么你准备的精灵图表尺寸（长，宽）应该为： `[192px , 64px]` 。
 
-* 对于帧数特别多的像素图，你可以使用原尺寸图片（无论是gif还是png精灵图表）以节省存储空间或带宽，并在参数中设置 `scale` 来缩放光标，并将 `pixel` 设置为 `true` 来避免缩放模糊。
+* 对于帧数特别多的像素图，你可以使用原尺寸图片（无论是gif还是精灵图表）以节省存储空间或带宽，并在参数中设置 `scale` 来缩放光标，并将 `pixel` 设置为 `true` 来避免缩放模糊。
 
 ### 🧩 标记机制
 
@@ -311,11 +295,10 @@ AnimeCursor 会根据配置自动为页面元素添加 `data-cursor`：
 
 ### 🎞️ 动画判定
 
-#### PNG 光标
+#### 精灵图表动画光标
 
 只有在 **同时满足以下条件** 时，才会生成动画：
 
-* 图片为 PNG
 * 设置了 `frames` 且 `frames > 1`
 * 设置了 `duration`
 

package/dist/anime-cursor.esm.js

@@ -1,5 +1,5 @@
 // AnimeCursor by github@ShuninYu
-// v0.1.2
+// v0.2.0
 
 class AnimeCursor {
 
@@ -32,38 +32,126 @@ class AnimeCursor {
     }
     
     isMouseLikeDevice() {
+        if (this.disabled) return;
+
         return window.matchMedia('(pointer: fine)').matches;
     }
     
-    destroy() {
+    // ----------------------------
+    // 刷新 清理 关闭 开启
+    // ----------------------------
+    refresh() {
         if (this.disabled) return;
+    
+        if (this.options.debug) {
+            console.info('[AnimeCursor] starting refresh...');
+        }
+    
+        this._bindElements(true);
     }
+    destroy() {
+        if (this.disabled) return;
 
+        // 1 移除事件监听
+        if (this._onMouseMove) {
+            document.removeEventListener('mousemove', this._onMouseMove);
+            this._onMouseMove = null;
+        }
+    
+        // 2 移除 cursor DOM
+        if (this.cursorEl) {
+            this.cursorEl.remove();
+            this.cursorEl = null;
+        }
+    
+        if (this.debugEl) {
+            this.debugEl.remove();
+            this.debugEl = null;
+        }
+    
+        // 3 移除注入的 CSS
+        if (this.styleEl) {
+            this.styleEl.remove();
+            this.styleEl = null;
+        }
+    
+        // 4 清理 data-cursor（只清理自己加的）
+        for (const cfg of Object.values(this.options.cursors)) {
+            cfg.tags.forEach(tag => {
+                document.querySelectorAll(tag).forEach(el => {
+                    if (el.dataset.cursor) {
+                        delete el.dataset.cursor;
+                    }
+                });
+            });
+        }
+    
+        // 5 重置状态
+        this.lastCursorType = null;
+    }
+    disable() {
+        if (this.disabled) return;
+        this.disabled = true;
+    
+        if (this.cursorEl) {
+            this.cursorEl.style.display = 'none';
+            console.log('[AnimeCursor] AnimeCursor disabled!');
+        }
+    }
+    enable() {
+        if (!this.disabled) return;
+        this.disabled = false;
+    
+        if (this.cursorEl) {
+            this.cursorEl.style.display = '';
+            console.log('[AnimeCursor] AnimeCursor enabled!');
+        }
+    }
+    
     // ----------------------------
     // 配置校验（必填项）
     // ----------------------------
     _validateOptions() {
+        if (this.disabled) return;
+
         if (!this.options || !this.options.cursors) {
-            console.error('[AnimeCursor] 缺少 cursors 配置');
+            console.error('[AnimeCursor] missing cursors set up');
             throw new Error('AnimeCursor init failed');
         }
 
+        this.defaultCursorType = null;
+
+        for (const [name, cfg] of Object.entries(this.options.cursors)) {
+            if (cfg.default === true) {
+                if (this.defaultCursorType) {
+                    throw new Error('[AnimeCursor] 只能有一个 default 光标');
+                }
+                this.defaultCursorType = name;
+            }
+        }
+
         for (const [name, cfg] of Object.entries(this.options.cursors)) {
-            const required = ['tags', 'size', 'image'];
+            const required = ['size', 'image'];
             required.forEach(key => {
                 if (cfg[key] === undefined) {
-                    console.error(`[AnimeCursor] 光标 "${name}" 缺少必填项：${key}`);
+                    console.error(`[AnimeCursor] cursor "${name}" missing required setting: ${key}`);
                     throw new Error('AnimeCursor init failed');
                 }
             });
 
-            if (!Array.isArray(cfg.tags)) {
-                console.error(`[AnimeCursor] 光标 "${name}" 的 tags 必须是数组`);
+            if (!cfg.default) {
+                if (!Array.isArray(cfg.tags) || cfg.tags.length === 0) {
+                    console.error(`[AnimeCursor] non-default cursor "${name}" must define at least one tag`);
+                    throw new Error('AnimeCursor init failed');
+                }
+            }
+            if (cfg.default && cfg.tags !== undefined && !Array.isArray(cfg.tags)) {
+                console.error(`[AnimeCursor] default cursor "${name}" 's tags must be an array if provided`);
                 throw new Error('AnimeCursor init failed');
             }
 
             if (cfg.duration !== undefined && typeof cfg.duration !== 'number') {
-                console.error(`[AnimeCursor] 光标 "${name}" 的 duration 必须是数字（秒）`);
+                console.error(`[AnimeCursor] cursor "${name}" 's duration must be a number(seconds)`);
                 throw new Error('AnimeCursor init failed');
             }
         }
@@ -73,6 +161,8 @@ class AnimeCursor {
     // 插入光标元素 HTML
     // ----------------------------
     _injectHTML() {
+        if (this.disabled) return;
+
         const cursor = document.createElement('div');
         cursor.id = 'anime-cursor';
         
@@ -93,60 +183,62 @@ class AnimeCursor {
     // 插入样式 CSS
     // ----------------------------
     _injectCSS() {
+        if (this.disabled) return;
+
         const style = document.createElement('style');
         let css = '';
 
         /* 通用样式 */
         css += `
-* {
-cursor: none !important;
-}
-#anime-cursor {
-position: fixed;
-top: 0;
-left: 0;
-pointer-events: none;
-background-repeat: no-repeat;
-transform-origin: 0 0;
-transform-style: preserve-3d;
-z-index: ${this._getMaxZIndex()};
-}
-.cursor-debugmode {
-    border: 1px solid green;
-}
-.anime-cursor-debug {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: fit-content;
-    height: fit-content;
-    padding: 5px;
-    font-size: 16px;
-    text-wrap: nowrap;
-    color: red;
-    pointer-events: none;
-    overflow: visible;
-    z-index: 2147483647;
-}
-.anime-cursor-debug::before {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 1px;
-    background-color: red;
-}
-.anime-cursor-debug::after {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-    width: 1px;
-    height: 100vh;
-    background-color: red;
-}
-`;
+        * {
+        cursor: none !important;
+        }
+        #anime-cursor {
+        position: fixed;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        background-repeat: no-repeat;
+        transform-origin: 0 0;
+        transform-style: preserve-3d;
+        z-index: ${this._getMaxZIndex()};
+        }
+        .cursor-debugmode {
+            border: 1px solid green;
+        }
+        .anime-cursor-debug {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: fit-content;
+            height: fit-content;
+            padding: 5px;
+            font-size: 16px;
+            text-wrap: nowrap;
+            color: red;
+            pointer-events: none;
+            overflow: visible;
+            z-index: 2147483647;
+        }
+        .anime-cursor-debug::before {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 1px;
+            background-color: red;
+        }
+        .anime-cursor-debug::after {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100vh;
+            background-color: red;
+        }
+        `;
 
         /* 每种光标以及debug生成 CSS */
         for (const [type, cfg] of Object.entries(this.options.cursors)) {
@@ -163,17 +255,17 @@ z-index: ${this._getMaxZIndex()};
             else {pixel = 'auto';}
 
             css += `
-${className} {
-width: ${size[0]}px;
-height: ${size[1]}px;
-background-image: url("${image}");
-image-rendering: ${pixel};
-${(scale || offset) ? `transform: ${[scale && `scale(${scale[0]}, ${scale[1]})`, offset && `translate(-${offset[0]}px, -${offset[1]}px)`].filter(Boolean).join(' ')};` : ''}
-  
-${zIndex !== undefined ? `z-index:${zIndex};` : ''}
-}`;
-
-            /* PNG 精灵图动画 */
+            ${className} {
+            width: ${size[0]}px;
+            height: ${size[1]}px;
+            background-image: url("${image}");
+            image-rendering: ${pixel};
+            ${(scale || offset) ? `transform: ${[scale && `scale(${scale[0]}, ${scale[1]})`, offset && `translate(-${offset[0]}px, -${offset[1]}px)`].filter(Boolean).join(' ')};` : ''}
+            
+            ${zIndex !== undefined ? `z-index:${zIndex};` : ''}
+            }`;
+
+            /* 精灵图动画 */
             const duration = cfg.duration;
             const hasAnimation =
                 !isGif &&
@@ -184,43 +276,54 @@ ${zIndex !== undefined ? `z-index:${zIndex};` : ''}
                 const animName = `animecursor_${type}`;
 
                 css += `
-${className} {
-animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
-}
-
-@keyframes ${animName} {
-from { background-position: 0 0; }
-to { background-position: -${size[0] * frames}px 0; }
-}
-`;
+                ${className} {
+                animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
+                }
+
+                @keyframes ${animName} {
+                from { background-position: 0 0; }
+                to { background-position: -${size[0] * frames}px 0; }
+                }
+                `;
             }
         }
 
         style.textContent = css;
         document.head.appendChild(style);
+        this.styleEl = style;
     }
 
     // ----------------------------
     // 给元素自动添加 data-cursor
     // ----------------------------
-    _bindElements() {
+    _bindElements(refresh) {
+        if (this.disabled) return;
+
         for (const [type, cfg] of Object.entries(this.options.cursors)) {
+            if (!cfg.tags || cfg.tags.length === 0) continue;
+            
             cfg.tags.forEach(tag => {
                 const tagName = tag.toUpperCase();
                 document.querySelectorAll(tagName).forEach(el => {
                     if (!el.dataset.cursor) {
                         el.dataset.cursor = type;
+                        el.dataset.cursorBound = 'true';
                     }
                 });
             });
         }
+        if (refresh) {
+            console.info('[AnimeCursor] refresh done!');
+        }
     }
 
     // ----------------------------
     // 鼠标跟随 & 光标切换
     // ----------------------------
     _bindMouse() {
-        document.addEventListener('mousemove', e => {
+        if (this.disabled) return;
+
+        this._onMouseMove = (e) => {
             const x = e.clientX;
             const y = e.clientY;
 
@@ -232,24 +335,42 @@ to { background-position: -${size[0] * frames}px 0; }
                 this.debugEl.style.top = y + 'px';
             }
 
-            const target = document.elementFromPoint(x, y);
-            if (!target) return;
+            let nextCursorType = null;
 
-            const cursorType = target.dataset.cursor || 'default';
-            if (this.debugEl) {this.debugEl.textContent = `(${x}px , ${y}px) ${cursorType}`;}
+            // 获取命中的元素
+            const target = document.elementFromPoint(x, y);
 
-            if (cursorType !== this.lastCursorType) {
-                if (this.debugEl) {this.cursorEl.className = `cursor-${cursorType}` + ' cursor-debugmode';}
-                else {this.cursorEl.className = `cursor-${cursorType}`;}
-                this.lastCursorType = cursorType;
+            // 优先使用元素自身的 data-cursor
+            if (target && target.dataset && target.dataset.cursor) {
+                nextCursorType = target.dataset.cursor;
+            }
+            // 否则 尝试使用 default 光标
+            else if (this.defaultCursorType) {
+                nextCursorType = this.defaultCursorType;
+            }
+            
+            // 如果两者都没有 - 保持当前状态
+            if (!nextCursorType) return;
+            if (this.debugEl) {this.debugEl.textContent = `(${x}px , ${y}px) ${nextCursorType}`;}
+            
+            // 状态变化才切换 class
+            if (nextCursorType !== this.lastCursorType) {
+                if (this.debugEl) {this.cursorEl.className = `cursor-${nextCursorType}` + ' cursor-debugmode';}
+                else {this.cursorEl.className = `cursor-${nextCursorType}`;}
+                this.lastCursorType = nextCursorType;
             }
-        });
+        };
+
+        document.addEventListener('mousemove', this._onMouseMove);
+        console.log('[AnimeCursor] AnimeCursor setted up.');
     }
 
     // ----------------------------
     // 获取可用最大 z-index
     // ----------------------------
     _getMaxZIndex() {
+        if (this.disabled) return;
+
         return 2147483646; // 浏览器安全最大值 2147483647 减一为留给debug覆盖
     }
 }

package/dist/anime-cursor.umd.js

@@ -1,265 +1,386 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.AnimeCursor = factory());
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.AnimeCursor = factory());
 })(this, (function () { 'use strict';
 
-  // AnimeCursor by github@ShuninYu
-  // v0.1.2
-
-  class AnimeCursor {
-
-      constructor(options = {}) {
-          this.options = {
-              enableTouch: false,
-              debug: false,
-              ...options
-          };
-          this.disabled = false;
-
-          if (!this.options.enableTouch && !this.isMouseLikeDevice()) {
-              this.disabled = true;
-
-              if (this.options.debug) {
-                  console.warn('[AnimeCursor] Touch device detected, cursor disabled.');
-              }
-              return;
-          }
-
-          this.cursorEl = null;
-          this.lastCursorType = null;
-          this.debugEl = null;
-
-          this._validateOptions();
-          this._injectHTML();
-          this._injectCSS();
-          this._bindElements();
-          this._bindMouse();
-      }
-      
-      isMouseLikeDevice() {
-          return window.matchMedia('(pointer: fine)').matches;
-      }
-      
-      destroy() {
-          if (this.disabled) return;
-      }
-
-      // ----------------------------
-      // 配置校验（必填项）
-      // ----------------------------
-      _validateOptions() {
-          if (!this.options || !this.options.cursors) {
-              console.error('[AnimeCursor] 缺少 cursors 配置');
-              throw new Error('AnimeCursor init failed');
-          }
-
-          for (const [name, cfg] of Object.entries(this.options.cursors)) {
-              const required = ['tags', 'size', 'image'];
-              required.forEach(key => {
-                  if (cfg[key] === undefined) {
-                      console.error(`[AnimeCursor] 光标 "${name}" 缺少必填项：${key}`);
-                      throw new Error('AnimeCursor init failed');
-                  }
-              });
-
-              if (!Array.isArray(cfg.tags)) {
-                  console.error(`[AnimeCursor] 光标 "${name}" 的 tags 必须是数组`);
-                  throw new Error('AnimeCursor init failed');
-              }
-
-              if (cfg.duration !== undefined && typeof cfg.duration !== 'number') {
-                  console.error(`[AnimeCursor] 光标 "${name}" 的 duration 必须是数字（秒）`);
-                  throw new Error('AnimeCursor init failed');
-              }
-          }
-      }
-
-      // ----------------------------
-      // 插入光标元素 HTML
-      // ----------------------------
-      _injectHTML() {
-          const cursor = document.createElement('div');
-          cursor.id = 'anime-cursor';
-          
-          // 如果debug选项存在，则添加debug子元素
-          if (this.options.debug) {
-              cursor.className = 'cursor-default cursor-debugmode';
-              const debuger = document.createElement('div');
-              debuger.className = 'anime-cursor-debug';
-              document.body.appendChild(debuger);
-              this.debugEl = debuger;
-          }
-          else {cursor.className = 'cursor-default';}
-          document.body.appendChild(cursor);
-          this.cursorEl = cursor;
-      }
-
-      // ----------------------------
-      // 插入样式 CSS
-      // ----------------------------
-      _injectCSS() {
-          const style = document.createElement('style');
-          let css = '';
-
-          /* 通用样式 */
-          css += `
-* {
-cursor: none !important;
-}
-#anime-cursor {
-position: fixed;
-top: 0;
-left: 0;
-pointer-events: none;
-background-repeat: no-repeat;
-transform-origin: 0 0;
-transform-style: preserve-3d;
-z-index: ${this._getMaxZIndex()};
-}
-.cursor-debugmode {
-    border: 1px solid green;
-}
-.anime-cursor-debug {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: fit-content;
-    height: fit-content;
-    padding: 5px;
-    font-size: 16px;
-    text-wrap: nowrap;
-    color: red;
-    pointer-events: none;
-    overflow: visible;
-    z-index: 2147483647;
-}
-.anime-cursor-debug::before {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 1px;
-    background-color: red;
-}
-.anime-cursor-debug::after {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-    width: 1px;
-    height: 100vh;
-    background-color: red;
-}
-`;
-
-          /* 每种光标以及debug生成 CSS */
-          for (const [type, cfg] of Object.entries(this.options.cursors)) {
-              const className = `.cursor-${type}`;
-              const size = cfg.size;
-              const frames = cfg.frames;
-              const image = cfg.image;
-              const offset = cfg.offset;
-              const zIndex = cfg.zIndex;
-              const scale = cfg.scale;
-              const isGif = image.toLowerCase().endsWith('.gif');
-              var pixel;
-              if (cfg.pixel) {pixel = 'pixelated';}
-              else {pixel = 'auto';}
-
-              css += `
-${className} {
-width: ${size[0]}px;
-height: ${size[1]}px;
-background-image: url("${image}");
-image-rendering: ${pixel};
-${(scale || offset) ? `transform: ${[scale && `scale(${scale[0]}, ${scale[1]})`, offset && `translate(-${offset[0]}px, -${offset[1]}px)`].filter(Boolean).join(' ')};` : ''}
-  
-${zIndex !== undefined ? `z-index:${zIndex};` : ''}
-}`;
-
-              /* PNG 精灵图动画 */
-              const duration = cfg.duration;
-              const hasAnimation =
-                  !isGif &&
-                  frames > 1 &&
-                  typeof duration === 'number';
-
-              if (hasAnimation) {
-                  const animName = `animecursor_${type}`;
-
-                  css += `
-${className} {
-animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
-}
-
-@keyframes ${animName} {
-from { background-position: 0 0; }
-to { background-position: -${size[0] * frames}px 0; }
-}
-`;
-              }
-          }
-
-          style.textContent = css;
-          document.head.appendChild(style);
-      }
-
-      // ----------------------------
-      // 给元素自动添加 data-cursor
-      // ----------------------------
-      _bindElements() {
-          for (const [type, cfg] of Object.entries(this.options.cursors)) {
-              cfg.tags.forEach(tag => {
-                  const tagName = tag.toUpperCase();
-                  document.querySelectorAll(tagName).forEach(el => {
-                      if (!el.dataset.cursor) {
-                          el.dataset.cursor = type;
-                      }
-                  });
-              });
-          }
-      }
-
-      // ----------------------------
-      // 鼠标跟随 & 光标切换
-      // ----------------------------
-      _bindMouse() {
-          document.addEventListener('mousemove', e => {
-              const x = e.clientX;
-              const y = e.clientY;
-
-              this.cursorEl.style.left = x + 'px';
-              this.cursorEl.style.top = y + 'px';
-
-              if (this.debugEl) {
-                  this.debugEl.style.left = x + 'px';
-                  this.debugEl.style.top = y + 'px';
-              }
-
-              const target = document.elementFromPoint(x, y);
-              if (!target) return;
-
-              const cursorType = target.dataset.cursor || 'default';
-              if (this.debugEl) {this.debugEl.textContent = `(${x}px , ${y}px) ${cursorType}`;}
-
-              if (cursorType !== this.lastCursorType) {
-                  if (this.debugEl) {this.cursorEl.className = `cursor-${cursorType}` + ' cursor-debugmode';}
-                  else {this.cursorEl.className = `cursor-${cursorType}`;}
-                  this.lastCursorType = cursorType;
-              }
-          });
-      }
-
-      // ----------------------------
-      // 获取可用最大 z-index
-      // ----------------------------
-      _getMaxZIndex() {
-          return 2147483646; // 浏览器安全最大值 2147483647 减一为留给debug覆盖
-      }
-  }
+    // AnimeCursor by github@ShuninYu
+    // v0.2.0
+
+    class AnimeCursor {
+
+        constructor(options = {}) {
+            this.options = {
+                enableTouch: false,
+                debug: false,
+                ...options
+            };
+            this.disabled = false;
+
+            if (!this.options.enableTouch && !this.isMouseLikeDevice()) {
+                this.disabled = true;
+
+                if (this.options.debug) {
+                    console.warn('[AnimeCursor] Touch device detected, cursor disabled.');
+                }
+                return;
+            }
+
+            this.cursorEl = null;
+            this.lastCursorType = null;
+            this.debugEl = null;
+
+            this._validateOptions();
+            this._injectHTML();
+            this._injectCSS();
+            this._bindElements();
+            this._bindMouse();
+        }
+        
+        isMouseLikeDevice() {
+            if (this.disabled) return;
+
+            return window.matchMedia('(pointer: fine)').matches;
+        }
+        
+        // ----------------------------
+        // 刷新 清理 关闭 开启
+        // ----------------------------
+        refresh() {
+            if (this.disabled) return;
+        
+            if (this.options.debug) {
+                console.info('[AnimeCursor] starting refresh...');
+            }
+        
+            this._bindElements(true);
+        }
+        destroy() {
+            if (this.disabled) return;
+
+            // 1 移除事件监听
+            if (this._onMouseMove) {
+                document.removeEventListener('mousemove', this._onMouseMove);
+                this._onMouseMove = null;
+            }
+        
+            // 2 移除 cursor DOM
+            if (this.cursorEl) {
+                this.cursorEl.remove();
+                this.cursorEl = null;
+            }
+        
+            if (this.debugEl) {
+                this.debugEl.remove();
+                this.debugEl = null;
+            }
+        
+            // 3 移除注入的 CSS
+            if (this.styleEl) {
+                this.styleEl.remove();
+                this.styleEl = null;
+            }
+        
+            // 4 清理 data-cursor（只清理自己加的）
+            for (const cfg of Object.values(this.options.cursors)) {
+                cfg.tags.forEach(tag => {
+                    document.querySelectorAll(tag).forEach(el => {
+                        if (el.dataset.cursor) {
+                            delete el.dataset.cursor;
+                        }
+                    });
+                });
+            }
+        
+            // 5 重置状态
+            this.lastCursorType = null;
+        }
+        disable() {
+            if (this.disabled) return;
+            this.disabled = true;
+        
+            if (this.cursorEl) {
+                this.cursorEl.style.display = 'none';
+                console.log('[AnimeCursor] AnimeCursor disabled!');
+            }
+        }
+        enable() {
+            if (!this.disabled) return;
+            this.disabled = false;
+        
+            if (this.cursorEl) {
+                this.cursorEl.style.display = '';
+                console.log('[AnimeCursor] AnimeCursor enabled!');
+            }
+        }
+        
+        // ----------------------------
+        // 配置校验（必填项）
+        // ----------------------------
+        _validateOptions() {
+            if (this.disabled) return;
+
+            if (!this.options || !this.options.cursors) {
+                console.error('[AnimeCursor] missing cursors set up');
+                throw new Error('AnimeCursor init failed');
+            }
+
+            this.defaultCursorType = null;
+
+            for (const [name, cfg] of Object.entries(this.options.cursors)) {
+                if (cfg.default === true) {
+                    if (this.defaultCursorType) {
+                        throw new Error('[AnimeCursor] 只能有一个 default 光标');
+                    }
+                    this.defaultCursorType = name;
+                }
+            }
+
+            for (const [name, cfg] of Object.entries(this.options.cursors)) {
+                const required = ['size', 'image'];
+                required.forEach(key => {
+                    if (cfg[key] === undefined) {
+                        console.error(`[AnimeCursor] cursor "${name}" missing required setting: ${key}`);
+                        throw new Error('AnimeCursor init failed');
+                    }
+                });
+
+                if (!cfg.default) {
+                    if (!Array.isArray(cfg.tags) || cfg.tags.length === 0) {
+                        console.error(`[AnimeCursor] non-default cursor "${name}" must define at least one tag`);
+                        throw new Error('AnimeCursor init failed');
+                    }
+                }
+                if (cfg.default && cfg.tags !== undefined && !Array.isArray(cfg.tags)) {
+                    console.error(`[AnimeCursor] default cursor "${name}" 's tags must be an array if provided`);
+                    throw new Error('AnimeCursor init failed');
+                }
+
+                if (cfg.duration !== undefined && typeof cfg.duration !== 'number') {
+                    console.error(`[AnimeCursor] cursor "${name}" 's duration must be a number(seconds)`);
+                    throw new Error('AnimeCursor init failed');
+                }
+            }
+        }
+
+        // ----------------------------
+        // 插入光标元素 HTML
+        // ----------------------------
+        _injectHTML() {
+            if (this.disabled) return;
+
+            const cursor = document.createElement('div');
+            cursor.id = 'anime-cursor';
+            
+            // 如果debug选项存在，则添加debug子元素
+            if (this.options.debug) {
+                cursor.className = 'cursor-default cursor-debugmode';
+                const debuger = document.createElement('div');
+                debuger.className = 'anime-cursor-debug';
+                document.body.appendChild(debuger);
+                this.debugEl = debuger;
+            }
+            else {cursor.className = 'cursor-default';}
+            document.body.appendChild(cursor);
+            this.cursorEl = cursor;
+        }
+
+        // ----------------------------
+        // 插入样式 CSS
+        // ----------------------------
+        _injectCSS() {
+            if (this.disabled) return;
+
+            const style = document.createElement('style');
+            let css = '';
+
+            /* 通用样式 */
+            css += `
+        * {
+        cursor: none !important;
+        }
+        #anime-cursor {
+        position: fixed;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        background-repeat: no-repeat;
+        transform-origin: 0 0;
+        transform-style: preserve-3d;
+        z-index: ${this._getMaxZIndex()};
+        }
+        .cursor-debugmode {
+            border: 1px solid green;
+        }
+        .anime-cursor-debug {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: fit-content;
+            height: fit-content;
+            padding: 5px;
+            font-size: 16px;
+            text-wrap: nowrap;
+            color: red;
+            pointer-events: none;
+            overflow: visible;
+            z-index: 2147483647;
+        }
+        .anime-cursor-debug::before {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 1px;
+            background-color: red;
+        }
+        .anime-cursor-debug::after {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100vh;
+            background-color: red;
+        }
+        `;
+
+            /* 每种光标以及debug生成 CSS */
+            for (const [type, cfg] of Object.entries(this.options.cursors)) {
+                const className = `.cursor-${type}`;
+                const size = cfg.size;
+                const frames = cfg.frames;
+                const image = cfg.image;
+                const offset = cfg.offset;
+                const zIndex = cfg.zIndex;
+                const scale = cfg.scale;
+                const isGif = image.toLowerCase().endsWith('.gif');
+                var pixel;
+                if (cfg.pixel) {pixel = 'pixelated';}
+                else {pixel = 'auto';}
+
+                css += `
+            ${className} {
+            width: ${size[0]}px;
+            height: ${size[1]}px;
+            background-image: url("${image}");
+            image-rendering: ${pixel};
+            ${(scale || offset) ? `transform: ${[scale && `scale(${scale[0]}, ${scale[1]})`, offset && `translate(-${offset[0]}px, -${offset[1]}px)`].filter(Boolean).join(' ')};` : ''}
+            
+            ${zIndex !== undefined ? `z-index:${zIndex};` : ''}
+            }`;
+
+                /* 精灵图动画 */
+                const duration = cfg.duration;
+                const hasAnimation =
+                    !isGif &&
+                    frames > 1 &&
+                    typeof duration === 'number';
+
+                if (hasAnimation) {
+                    const animName = `animecursor_${type}`;
+
+                    css += `
+                ${className} {
+                animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
+                }
+
+                @keyframes ${animName} {
+                from { background-position: 0 0; }
+                to { background-position: -${size[0] * frames}px 0; }
+                }
+                `;
+                }
+            }
+
+            style.textContent = css;
+            document.head.appendChild(style);
+            this.styleEl = style;
+        }
+
+        // ----------------------------
+        // 给元素自动添加 data-cursor
+        // ----------------------------
+        _bindElements(refresh) {
+            if (this.disabled) return;
+
+            for (const [type, cfg] of Object.entries(this.options.cursors)) {
+                if (!cfg.tags || cfg.tags.length === 0) continue;
+                
+                cfg.tags.forEach(tag => {
+                    const tagName = tag.toUpperCase();
+                    document.querySelectorAll(tagName).forEach(el => {
+                        if (!el.dataset.cursor) {
+                            el.dataset.cursor = type;
+                            el.dataset.cursorBound = 'true';
+                        }
+                    });
+                });
+            }
+            if (refresh) {
+                console.info('[AnimeCursor] refresh done!');
+            }
+        }
+
+        // ----------------------------
+        // 鼠标跟随 & 光标切换
+        // ----------------------------
+        _bindMouse() {
+            if (this.disabled) return;
+
+            this._onMouseMove = (e) => {
+                const x = e.clientX;
+                const y = e.clientY;
+
+                this.cursorEl.style.left = x + 'px';
+                this.cursorEl.style.top = y + 'px';
+
+                if (this.debugEl) {
+                    this.debugEl.style.left = x + 'px';
+                    this.debugEl.style.top = y + 'px';
+                }
+
+                let nextCursorType = null;
+
+                // 获取命中的元素
+                const target = document.elementFromPoint(x, y);
+
+                // 优先使用元素自身的 data-cursor
+                if (target && target.dataset && target.dataset.cursor) {
+                    nextCursorType = target.dataset.cursor;
+                }
+                // 否则 尝试使用 default 光标
+                else if (this.defaultCursorType) {
+                    nextCursorType = this.defaultCursorType;
+                }
+                
+                // 如果两者都没有 - 保持当前状态
+                if (!nextCursorType) return;
+                if (this.debugEl) {this.debugEl.textContent = `(${x}px , ${y}px) ${nextCursorType}`;}
+                
+                // 状态变化才切换 class
+                if (nextCursorType !== this.lastCursorType) {
+                    if (this.debugEl) {this.cursorEl.className = `cursor-${nextCursorType}` + ' cursor-debugmode';}
+                    else {this.cursorEl.className = `cursor-${nextCursorType}`;}
+                    this.lastCursorType = nextCursorType;
+                }
+            };
+
+            document.addEventListener('mousemove', this._onMouseMove);
+            console.log('[AnimeCursor] AnimeCursor setted up.');
+        }
+
+        // ----------------------------
+        // 获取可用最大 z-index
+        // ----------------------------
+        _getMaxZIndex() {
+            if (this.disabled) return;
+
+            return 2147483646; // 浏览器安全最大值 2147483647 减一为留给debug覆盖
+        }
+    }
 
-  return AnimeCursor;
+    return AnimeCursor;
 
 }));

package/dist/anime-cursor.umd.min.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).AnimeCursor=n()}(this,function(){"use strict";return class{constructor(e={}){if(this.options={enableTouch:!1,debug:!1,...e},this.disabled=!1,!this.options.enableTouch&&!this.isMouseLikeDevice())return this.disabled=!0,void(this.options.debug&&console.warn("[AnimeCursor] Touch device detected, cursor disabled."));this.cursorEl=null,this.lastCursorType=null,this.debugEl=null,this._validateOptions(),this._injectHTML(),this._injectCSS(),this._bindElements(),this._bindMouse()}isMouseLikeDevice(){return window.matchMedia("(pointer: fine)").matches}destroy(){this.disabled}_validateOptions(){if(!this.options||!this.options.cursors)throw console.error("[AnimeCursor] 缺少 cursors 配置"),new Error("AnimeCursor init failed");for(const[e,n]of Object.entries(this.options.cursors)){if(["tags","size","image"].forEach(t=>{if(void 0===n[t])throw console.error(`[AnimeCursor] 光标 "${e}" 缺少必填项：${t}`),new Error("AnimeCursor init failed")}),!Array.isArray(n.tags))throw console.error(`[AnimeCursor] 光标 "${e}" 的 tags 必须是数组`),new Error("AnimeCursor init failed");if(void 0!==n.duration&&"number"!=typeof n.duration)throw console.error(`[AnimeCursor] 光标 "${e}" 的 duration 必须是数字（秒）`),new Error("AnimeCursor init failed")}}_injectHTML(){const e=document.createElement("div");if(e.id="anime-cursor",this.options.debug){e.className="cursor-default cursor-debugmode";const n=document.createElement("div");n.className="anime-cursor-debug",document.body.appendChild(n),this.debugEl=n}else e.className="cursor-default";document.body.appendChild(e),this.cursorEl=e}_injectCSS(){const e=document.createElement("style");let n="";n+=`\n* {\ncursor: none !important;\n}\n#anime-cursor {\nposition: fixed;\ntop: 0;\nleft: 0;\npointer-events: none;\nbackground-repeat: no-repeat;\ntransform-origin: 0 0;\ntransform-style: preserve-3d;\nz-index: ${this._getMaxZIndex()};\n}\n.cursor-debugmode {\n    border: 1px solid green;\n}\n.anime-cursor-debug {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: fit-content;\n    height: fit-content;\n    padding: 5px;\n    font-size: 16px;\n    text-wrap: nowrap;\n    color: red;\n    pointer-events: none;\n    overflow: visible;\n    z-index: 2147483647;\n}\n.anime-cursor-debug::before {\n    position: absolute;\n    content: "";\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 1px;\n    background-color: red;\n}\n.anime-cursor-debug::after {\n    position: absolute;\n    content: "";\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 100vh;\n    background-color: red;\n}\n`;for(const[e,o]of Object.entries(this.options.cursors)){const r=`.cursor-${e}`,s=o.size,i=o.frames,d=o.image,u=o.offset,a=o.zIndex,c=o.scale,l=d.toLowerCase().endsWith(".gif");var t;t=o.pixel?"pixelated":"auto",n+=`\n${r} {\nwidth: ${s[0]}px;\nheight: ${s[1]}px;\nbackground-image: url("${d}");\nimage-rendering: ${t};\n${c||u?`transform: ${[c&&`scale(${c[0]}, ${c[1]})`,u&&`translate(-${u[0]}px, -${u[1]}px)`].filter(Boolean).join(" ")};`:""}\n  \n${void 0!==a?`z-index:${a};`:""}\n}`;const p=o.duration;if(!l&&i>1&&"number"==typeof p){const t=`animecursor_${e}`;n+=`\n${r} {\nanimation: ${t} steps(${i}) ${p}s infinite ${o.pingpong?"alternate":""};\n}\n\n@keyframes ${t} {\nfrom { background-position: 0 0; }\nto { background-position: -${s[0]*i}px 0; }\n}\n`}}e.textContent=n,document.head.appendChild(e)}_bindElements(){for(const[e,n]of Object.entries(this.options.cursors))n.tags.forEach(n=>{const t=n.toUpperCase();document.querySelectorAll(t).forEach(n=>{n.dataset.cursor||(n.dataset.cursor=e)})})}_bindMouse(){document.addEventListener("mousemove",e=>{const n=e.clientX,t=e.clientY;this.cursorEl.style.left=n+"px",this.cursorEl.style.top=t+"px",this.debugEl&&(this.debugEl.style.left=n+"px",this.debugEl.style.top=t+"px");const o=document.elementFromPoint(n,t);if(!o)return;const r=o.dataset.cursor||"default";this.debugEl&&(this.debugEl.textContent=`(${n}px , ${t}px) ${r}`),r!==this.lastCursorType&&(this.debugEl?this.cursorEl.className=`cursor-${r} cursor-debugmode`:this.cursorEl.className=`cursor-${r}`,this.lastCursorType=r)})}_getMaxZIndex(){return 2147483646}}});
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):(e="undefined"!=typeof globalThis?globalThis:e||self).AnimeCursor=s()}(this,function(){"use strict";return class{constructor(e={}){if(this.options={enableTouch:!1,debug:!1,...e},this.disabled=!1,!this.options.enableTouch&&!this.isMouseLikeDevice())return this.disabled=!0,void(this.options.debug&&console.warn("[AnimeCursor] Touch device detected, cursor disabled."));this.cursorEl=null,this.lastCursorType=null,this.debugEl=null,this._validateOptions(),this._injectHTML(),this._injectCSS(),this._bindElements(),this._bindMouse()}isMouseLikeDevice(){if(!this.disabled)return window.matchMedia("(pointer: fine)").matches}refresh(){this.disabled||(this.options.debug&&console.info("[AnimeCursor] starting refresh..."),this._bindElements(!0))}destroy(){if(!this.disabled){this._onMouseMove&&(document.removeEventListener("mousemove",this._onMouseMove),this._onMouseMove=null),this.cursorEl&&(this.cursorEl.remove(),this.cursorEl=null),this.debugEl&&(this.debugEl.remove(),this.debugEl=null),this.styleEl&&(this.styleEl.remove(),this.styleEl=null);for(const e of Object.values(this.options.cursors))e.tags.forEach(e=>{document.querySelectorAll(e).forEach(e=>{e.dataset.cursor&&delete e.dataset.cursor})});this.lastCursorType=null}}disable(){this.disabled||(this.disabled=!0,this.cursorEl&&(this.cursorEl.style.display="none",console.log("[AnimeCursor] AnimeCursor disabled!")))}enable(){this.disabled&&(this.disabled=!1,this.cursorEl&&(this.cursorEl.style.display="",console.log("[AnimeCursor] AnimeCursor enabled!")))}_validateOptions(){if(!this.disabled){if(!this.options||!this.options.cursors)throw console.error("[AnimeCursor] missing cursors set up"),new Error("AnimeCursor init failed");this.defaultCursorType=null;for(const[e,s]of Object.entries(this.options.cursors))if(!0===s.default){if(this.defaultCursorType)throw new Error("[AnimeCursor] 只能有一个 default 光标");this.defaultCursorType=e}for(const[e,s]of Object.entries(this.options.cursors)){if(["size","image"].forEach(t=>{if(void 0===s[t])throw console.error(`[AnimeCursor] cursor "${e}" missing required setting: ${t}`),new Error("AnimeCursor init failed")}),!(s.default||Array.isArray(s.tags)&&0!==s.tags.length))throw console.error(`[AnimeCursor] non-default cursor "${e}" must define at least one tag`),new Error("AnimeCursor init failed");if(s.default&&void 0!==s.tags&&!Array.isArray(s.tags))throw console.error(`[AnimeCursor] default cursor "${e}" 's tags must be an array if provided`),new Error("AnimeCursor init failed");if(void 0!==s.duration&&"number"!=typeof s.duration)throw console.error(`[AnimeCursor] cursor "${e}" 's duration must be a number(seconds)`),new Error("AnimeCursor init failed")}}}_injectHTML(){if(this.disabled)return;const e=document.createElement("div");if(e.id="anime-cursor",this.options.debug){e.className="cursor-default cursor-debugmode";const s=document.createElement("div");s.className="anime-cursor-debug",document.body.appendChild(s),this.debugEl=s}else e.className="cursor-default";document.body.appendChild(e),this.cursorEl=e}_injectCSS(){if(this.disabled)return;const e=document.createElement("style");let s="";s+=`\n        * {\n        cursor: none !important;\n        }\n        #anime-cursor {\n        position: fixed;\n        top: 0;\n        left: 0;\n        pointer-events: none;\n        background-repeat: no-repeat;\n        transform-origin: 0 0;\n        transform-style: preserve-3d;\n        z-index: ${this._getMaxZIndex()};\n        }\n        .cursor-debugmode {\n            border: 1px solid green;\n        }\n        .anime-cursor-debug {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: fit-content;\n            height: fit-content;\n            padding: 5px;\n            font-size: 16px;\n            text-wrap: nowrap;\n            color: red;\n            pointer-events: none;\n            overflow: visible;\n            z-index: 2147483647;\n        }\n        .anime-cursor-debug::before {\n            position: absolute;\n            content: "";\n            top: 0;\n            left: 0;\n            width: 100vw;\n            height: 1px;\n            background-color: red;\n        }\n        .anime-cursor-debug::after {\n            position: absolute;\n            content: "";\n            top: 0;\n            left: 0;\n            width: 1px;\n            height: 100vh;\n            background-color: red;\n        }\n        `;for(const[e,o]of Object.entries(this.options.cursors)){const n=`.cursor-${e}`,r=o.size,i=o.frames,u=o.image,d=o.offset,l=o.zIndex,a=o.scale,c=u.toLowerCase().endsWith(".gif");var t;t=o.pixel?"pixelated":"auto",s+=`\n            ${n} {\n            width: ${r[0]}px;\n            height: ${r[1]}px;\n            background-image: url("${u}");\n            image-rendering: ${t};\n            ${a||d?`transform: ${[a&&`scale(${a[0]}, ${a[1]})`,d&&`translate(-${d[0]}px, -${d[1]}px)`].filter(Boolean).join(" ")};`:""}\n            \n            ${void 0!==l?`z-index:${l};`:""}\n            }`;const h=o.duration;if(!c&&i>1&&"number"==typeof h){const t=`animecursor_${e}`;s+=`\n                ${n} {\n                animation: ${t} steps(${i}) ${h}s infinite ${o.pingpong?"alternate":""};\n                }\n\n                @keyframes ${t} {\n                from { background-position: 0 0; }\n                to { background-position: -${r[0]*i}px 0; }\n                }\n                `}}e.textContent=s,document.head.appendChild(e),this.styleEl=e}_bindElements(e){if(!this.disabled){for(const[e,s]of Object.entries(this.options.cursors))s.tags&&0!==s.tags.length&&s.tags.forEach(s=>{const t=s.toUpperCase();document.querySelectorAll(t).forEach(s=>{s.dataset.cursor||(s.dataset.cursor=e,s.dataset.cursorBound="true")})});e&&console.info("[AnimeCursor] refresh done!")}}_bindMouse(){this.disabled||(this._onMouseMove=e=>{const s=e.clientX,t=e.clientY;this.cursorEl.style.left=s+"px",this.cursorEl.style.top=t+"px",this.debugEl&&(this.debugEl.style.left=s+"px",this.debugEl.style.top=t+"px");let o=null;const n=document.elementFromPoint(s,t);n&&n.dataset&&n.dataset.cursor?o=n.dataset.cursor:this.defaultCursorType&&(o=this.defaultCursorType),o&&(this.debugEl&&(this.debugEl.textContent=`(${s}px , ${t}px) ${o}`),o!==this.lastCursorType&&(this.debugEl?this.cursorEl.className=`cursor-${o} cursor-debugmode`:this.cursorEl.className=`cursor-${o}`,this.lastCursorType=o))},document.addEventListener("mousemove",this._onMouseMove),console.log("[AnimeCursor] AnimeCursor setted up."))}_getMaxZIndex(){if(!this.disabled)return 2147483646}}});

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "anime-cursor",
-    "version": "0.1.2",
-    "description": "A lightweight JS for website animated cursors",
+    "version": "0.2.0",
+    "description": "A lightweight JavaScript library for animated custom cursors",
     "main": "dist/anime-cursor.umd.js",
     "module": "dist/anime-cursor.esm.js",
     "files": [
@@ -16,6 +16,10 @@
     "scripts": {
         "build": "rollup -c"
     },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shuninyu/anime-cursor.git"
+    },
     "author": "ShuninYu",
     "license": "MIT",
     "devDependencies": {