anime-cursor 2.1.2 → 2.1.3

package/README.md

@@ -6,7 +6,7 @@
 
 
 
-[[简体中文]](#animecursorsc)
+[[简体中文]](#sc)
 
 ## [Visit the official website](https://shuninyu.github.io/anime-cursor/) for more informations
 
@@ -185,6 +185,7 @@ Because v2 uses native CSS `cursor` property and CSS animations, there is no Jav
 
 ---
 
+<span id="sc"></span>
 # AnimeCursor v2
 
 <div align="center">

package/dist/anime-cursor.esm.js

@@ -1,5 +1,5 @@
 // AnimeCursor by github@ShuninYu
-// v2.1.2
+// v2.1.3
 
 let _instance = null;
 
@@ -51,16 +51,15 @@ class AnimeCursor {
             enableTouch: false,
             fallbackCursor: 'auto',
             excludeSelectors: 'input, textarea, [contenteditable]',
-            combineAnimations: false,     // 是否自动组合用户动画
+            combineAnimations: false,
             ...options
         };
 
         this.disabled = false;
         this.cursors = this.options.cursors || {};
-        this.cursorAnimationStrings = {};     // 存储每个光标类型的动画字符串
-        this.combinedRules = new Map();       // 存储已生成的组合类名
+        this.cursorAnimationStrings = {};
+        this.combinedRules = new Map();
 
-        // 检查是否应启用（触摸设备且未强制启用则禁用）
         if (!this.options.enableTouch && !this.isMouseLikeDevice()) {
             this.disabled = true;
             if (this.options.debug) {
@@ -71,6 +70,7 @@ class AnimeCursor {
 
         this.styleEl = null;
         this.debugEl = null;
+        this.crosshairEl = null;
         this._onMouseMove = null;
 
         this._validateOptions();
@@ -97,7 +97,6 @@ class AnimeCursor {
                 throw new Error(`[AnimeCursor] Cursor "${name}" missing required setting: image`);
             }
 
-            // 处理 frames 和 duration
             if (cfg.frames !== undefined && cfg.duration !== undefined) {
                 const framesType = typeof cfg.frames;
                 const durationType = typeof cfg.duration;
@@ -244,7 +243,6 @@ class AnimeCursor {
         }
     }
 
-    // 核心注入样式
     _injectStyles() {
         if (this.disabled) return;
         this.combinedRules.clear();
@@ -253,14 +251,12 @@ class AnimeCursor {
         style.id = 'animecursor-styles';
         let css = '';
 
-        // 如果有默认光标，生成全局规则
         if (this.defaultCursorName) {
             const defaultCfg = this.cursors[this.defaultCursorName];
             const defaultCursorDef = this._buildCursorCss(this.defaultCursorName, defaultCfg);
             css += `* { ${defaultCursorDef} }\n`;
         }
 
-        // 为每个光标生成独立的类和关键帧
         for (const [name, cfg] of Object.entries(this.cursors)) {
             const className = `.ac-cursor-${name}`;
             const offset = cfg.offset || [0, 0];
@@ -292,7 +288,6 @@ class AnimeCursor {
                 cursorAnimation = animation;
                 css += `${className} { cursor: url("${frameUrls[0]}") ${offset[0]} ${offset[1]}, ${fallback}; animation: ${animation}; }\n`;
             } else {
-                // 静态光标：生成一帧动画，只播放一次，结束后保持最后一帧
                 const staticKeyframeName = `ac_anim_${name}_static`;
                 css += `@keyframes ${staticKeyframeName} {\n`;
                 css += `  0%, 100% { cursor: url("${frameUrls[0]}") ${offset[0]} ${offset[1]}, ${fallback}; }\n`;
@@ -304,7 +299,6 @@ class AnimeCursor {
 
             this.cursorAnimationStrings[name] = cursorAnimation;
 
-            // 标签和 data-cursor 规则
             if (cfg.tags && cfg.tags.length) {
                 const selector = cfg.tags.join(', ');
                 css += `${selector} { ${this._buildCursorCss(name, cfg)} }\n`;
@@ -316,7 +310,6 @@ class AnimeCursor {
             css += `${this.options.excludeSelectors} { cursor: text !important; animation: none !important; }\n`;
         }
 
-        // 自动组合动画
         if (this.options.combineAnimations) {
             const elements = document.querySelectorAll('[data-ac-animation]');
             for (const el of elements) {
@@ -348,7 +341,6 @@ class AnimeCursor {
         this.styleEl = style;
     }
 
-    // 获取元素对应的光标类型（复用 debug 逻辑）
     _getCursorTypeForElement(el) {
         if (el.dataset.cursor && this.cursors[el.dataset.cursor]) {
             return el.dataset.cursor;
@@ -358,7 +350,7 @@ class AnimeCursor {
                 return name;
             }
         }
-        return this.defaultCursorName; // 可能为 null
+        return this.defaultCursorName;
     }
 
     _buildKeyframes(cfg, frameUrls) {
@@ -411,7 +403,6 @@ class AnimeCursor {
             const totalDuration = Array.isArray(cfg.duration) ? cfg.duration.reduce((a, b) => a + b, 0) : cfg.duration;
             css += ` animation: ac_anim_${name} ${totalDuration}s steps(1) infinite ${cfg.pingpong ? 'alternate' : ''};`;
         } else {
-            // 静态光标：一帧动画，只播放一次，结束后保持
             css += ` animation: ac_anim_${name}_static 0.001s forwards steps(1);`;
         }
         return css;
@@ -428,27 +419,82 @@ class AnimeCursor {
     }
 
     _initDebug() {
+        // 创建左上角信息浮层（现有 debug 面板）
         const debugDiv = document.createElement('div');
         debugDiv.className = 'animecursor-debug';
         debugDiv.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      background: rgba(0,0,0,0.7);
-      color: #0f0;
-      padding: 4px 8px;
-      font-family: monospace;
-      font-size: 12px;
-      z-index: 2147483647;
-      pointer-events: none;
-      white-space: nowrap;
-    `;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background: rgba(0,0,0,0.7);
+            color: #0f0;
+            padding: 4px 8px;
+            font-family: monospace;
+            font-size: 12px;
+            z-index: 2147483647;
+            pointer-events: auto;
+            white-space: nowrap;
+            transition: opacity 0.2s ease;
+        `;
+        // hover 时半透明，便于查看被遮挡内容
+        debugDiv.addEventListener('mouseenter', () => { debugDiv.style.opacity = '0.5'; });
+        debugDiv.addEventListener('mouseleave', () => { debugDiv.style.opacity = '1'; });
         document.body.appendChild(debugDiv);
         this.debugEl = debugDiv;
 
+        // 创建跟随鼠标的十字辅助线层（横竖双色线）
+        const crosshair = document.createElement('div');
+        crosshair.className = 'animecursor-crosshair';
+        crosshair.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 0;
+            pointer-events: none;
+            z-index: 2147483646;
+        `;
+        // 横线
+        const hLine = document.createElement('div');
+        hLine.className = 'ac-crosshair-h';
+        hLine.style.cssText = `
+            position: fixed;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background-color: rgba(255,0,0,0.6);
+            pointer-events: none;
+            transform: translateY(-0.5px);
+        `;
+        // 竖线
+        const vLine = document.createElement('div');
+        vLine.className = 'ac-crosshair-v';
+        vLine.style.cssText = `
+            position: fixed;
+            top: 0;
+            width: 1px;
+            height: 100%;
+            background-color: rgba(255,0,0,0.6);
+            pointer-events: none;
+            transform: translateX(-0.5px);
+        `;
+        crosshair.appendChild(hLine);
+        crosshair.appendChild(vLine);
+        document.body.appendChild(crosshair);
+        this.crosshairEl = { container: crosshair, hLine, vLine };
+
         let lastCursor = '';
         this._onMouseMove = (e) => {
-            const target = document.elementFromPoint(e.clientX, e.clientY);
+            const x = e.clientX;
+            const y = e.clientY;
+
+            // 更新十字线位置
+            if (this.crosshairEl) {
+                this.crosshairEl.hLine.style.top = y + 'px';
+                this.crosshairEl.vLine.style.left = x + 'px';
+            }
+
+            const target = document.elementFromPoint(x, y);
             let cursorType = null;
             if (target) {
                 if (target.dataset.cursor && this.cursors[target.dataset.cursor]) {
@@ -469,9 +515,9 @@ class AnimeCursor {
             }
             if (cursorType !== lastCursor) {
                 lastCursor = cursorType;
-                debugDiv.textContent = `🎯 ${cursorType} @ (${e.clientX}, ${e.clientY})`;
+                debugDiv.textContent = `${cursorType} @ (${x}, ${y})`;
             } else {
-                debugDiv.textContent = `🎯 ${cursorType} @ (${e.clientX}, ${e.clientY})`;
+                debugDiv.textContent = `${cursorType} @ (${x}, ${y})`;
             }
         };
         document.addEventListener('mousemove', this._onMouseMove);
@@ -484,6 +530,7 @@ class AnimeCursor {
         this._injectStyles();
         if (this.options.debug) {
             if (this.debugEl) this.debugEl.remove();
+            if (this.crosshairEl) this.crosshairEl.container.remove();
             this._initDebug();
         }
         console.log('[AnimeCursor] Refresh complete');
@@ -493,6 +540,7 @@ class AnimeCursor {
         if (this.disabled) return;
         if (this.styleEl) this.styleEl.remove();
         if (this.debugEl) this.debugEl.remove();
+        if (this.crosshairEl) this.crosshairEl.container.remove();
         if (this._onMouseMove) {
             document.removeEventListener('mousemove', this._onMouseMove);
         }
@@ -503,16 +551,18 @@ class AnimeCursor {
 
     disable() {
         if (this.disabled) return;
-        // 移除样式表
         if (this.styleEl) {
             this.styleEl.remove();
             this.styleEl = null;
         }
-        // 移除 debug 相关
         if (this.debugEl) {
             this.debugEl.remove();
             this.debugEl = null;
         }
+        if (this.crosshairEl) {
+            this.crosshairEl.container.remove();
+            this.crosshairEl = null;
+        }
         if (this._onMouseMove) {
             document.removeEventListener('mousemove', this._onMouseMove);
             this._onMouseMove = null;
@@ -524,9 +574,7 @@ class AnimeCursor {
     enable() {
         if (!this.disabled) return;
         this.disabled = false;
-        // 重新注入样式
         this._injectStyles();
-        // 如果 debug 模式开启，重新初始化 debug
         if (this.options.debug) {
             this._initDebug();
         }

package/dist/anime-cursor.umd.js

@@ -5,7 +5,7 @@
 })(this, (function () { 'use strict';
 
     // AnimeCursor by github@ShuninYu
-    // v2.1.2
+    // v2.1.3
 
     let _instance = null;
 
@@ -57,16 +57,15 @@
                 enableTouch: false,
                 fallbackCursor: 'auto',
                 excludeSelectors: 'input, textarea, [contenteditable]',
-                combineAnimations: false,     // 是否自动组合用户动画
+                combineAnimations: false,
                 ...options
             };
 
             this.disabled = false;
             this.cursors = this.options.cursors || {};
-            this.cursorAnimationStrings = {};     // 存储每个光标类型的动画字符串
-            this.combinedRules = new Map();       // 存储已生成的组合类名
+            this.cursorAnimationStrings = {};
+            this.combinedRules = new Map();
 
-            // 检查是否应启用（触摸设备且未强制启用则禁用）
             if (!this.options.enableTouch && !this.isMouseLikeDevice()) {
                 this.disabled = true;
                 if (this.options.debug) {
@@ -77,6 +76,7 @@
 
             this.styleEl = null;
             this.debugEl = null;
+            this.crosshairEl = null;
             this._onMouseMove = null;
 
             this._validateOptions();
@@ -103,7 +103,6 @@
                     throw new Error(`[AnimeCursor] Cursor "${name}" missing required setting: image`);
                 }
 
-                // 处理 frames 和 duration
                 if (cfg.frames !== undefined && cfg.duration !== undefined) {
                     const framesType = typeof cfg.frames;
                     const durationType = typeof cfg.duration;
@@ -250,7 +249,6 @@
             }
         }
 
-        // 核心注入样式
         _injectStyles() {
             if (this.disabled) return;
             this.combinedRules.clear();
@@ -259,14 +257,12 @@
             style.id = 'animecursor-styles';
             let css = '';
 
-            // 如果有默认光标，生成全局规则
             if (this.defaultCursorName) {
                 const defaultCfg = this.cursors[this.defaultCursorName];
                 const defaultCursorDef = this._buildCursorCss(this.defaultCursorName, defaultCfg);
                 css += `* { ${defaultCursorDef} }\n`;
             }
 
-            // 为每个光标生成独立的类和关键帧
             for (const [name, cfg] of Object.entries(this.cursors)) {
                 const className = `.ac-cursor-${name}`;
                 const offset = cfg.offset || [0, 0];
@@ -298,7 +294,6 @@
                     cursorAnimation = animation;
                     css += `${className} { cursor: url("${frameUrls[0]}") ${offset[0]} ${offset[1]}, ${fallback}; animation: ${animation}; }\n`;
                 } else {
-                    // 静态光标：生成一帧动画，只播放一次，结束后保持最后一帧
                     const staticKeyframeName = `ac_anim_${name}_static`;
                     css += `@keyframes ${staticKeyframeName} {\n`;
                     css += `  0%, 100% { cursor: url("${frameUrls[0]}") ${offset[0]} ${offset[1]}, ${fallback}; }\n`;
@@ -310,7 +305,6 @@
 
                 this.cursorAnimationStrings[name] = cursorAnimation;
 
-                // 标签和 data-cursor 规则
                 if (cfg.tags && cfg.tags.length) {
                     const selector = cfg.tags.join(', ');
                     css += `${selector} { ${this._buildCursorCss(name, cfg)} }\n`;
@@ -322,7 +316,6 @@
                 css += `${this.options.excludeSelectors} { cursor: text !important; animation: none !important; }\n`;
             }
 
-            // 自动组合动画
             if (this.options.combineAnimations) {
                 const elements = document.querySelectorAll('[data-ac-animation]');
                 for (const el of elements) {
@@ -354,7 +347,6 @@
             this.styleEl = style;
         }
 
-        // 获取元素对应的光标类型（复用 debug 逻辑）
         _getCursorTypeForElement(el) {
             if (el.dataset.cursor && this.cursors[el.dataset.cursor]) {
                 return el.dataset.cursor;
@@ -364,7 +356,7 @@
                     return name;
                 }
             }
-            return this.defaultCursorName; // 可能为 null
+            return this.defaultCursorName;
         }
 
         _buildKeyframes(cfg, frameUrls) {
@@ -417,7 +409,6 @@
                 const totalDuration = Array.isArray(cfg.duration) ? cfg.duration.reduce((a, b) => a + b, 0) : cfg.duration;
                 css += ` animation: ac_anim_${name} ${totalDuration}s steps(1) infinite ${cfg.pingpong ? 'alternate' : ''};`;
             } else {
-                // 静态光标：一帧动画，只播放一次，结束后保持
                 css += ` animation: ac_anim_${name}_static 0.001s forwards steps(1);`;
             }
             return css;
@@ -434,27 +425,82 @@
         }
 
         _initDebug() {
+            // 创建左上角信息浮层（现有 debug 面板）
             const debugDiv = document.createElement('div');
             debugDiv.className = 'animecursor-debug';
             debugDiv.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      background: rgba(0,0,0,0.7);
-      color: #0f0;
-      padding: 4px 8px;
-      font-family: monospace;
-      font-size: 12px;
-      z-index: 2147483647;
-      pointer-events: none;
-      white-space: nowrap;
-    `;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background: rgba(0,0,0,0.7);
+            color: #0f0;
+            padding: 4px 8px;
+            font-family: monospace;
+            font-size: 12px;
+            z-index: 2147483647;
+            pointer-events: auto;
+            white-space: nowrap;
+            transition: opacity 0.2s ease;
+        `;
+            // hover 时半透明，便于查看被遮挡内容
+            debugDiv.addEventListener('mouseenter', () => { debugDiv.style.opacity = '0.5'; });
+            debugDiv.addEventListener('mouseleave', () => { debugDiv.style.opacity = '1'; });
             document.body.appendChild(debugDiv);
             this.debugEl = debugDiv;
 
+            // 创建跟随鼠标的十字辅助线层（横竖双色线）
+            const crosshair = document.createElement('div');
+            crosshair.className = 'animecursor-crosshair';
+            crosshair.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 0;
+            pointer-events: none;
+            z-index: 2147483646;
+        `;
+            // 横线
+            const hLine = document.createElement('div');
+            hLine.className = 'ac-crosshair-h';
+            hLine.style.cssText = `
+            position: fixed;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background-color: rgba(255,0,0,0.6);
+            pointer-events: none;
+            transform: translateY(-0.5px);
+        `;
+            // 竖线
+            const vLine = document.createElement('div');
+            vLine.className = 'ac-crosshair-v';
+            vLine.style.cssText = `
+            position: fixed;
+            top: 0;
+            width: 1px;
+            height: 100%;
+            background-color: rgba(255,0,0,0.6);
+            pointer-events: none;
+            transform: translateX(-0.5px);
+        `;
+            crosshair.appendChild(hLine);
+            crosshair.appendChild(vLine);
+            document.body.appendChild(crosshair);
+            this.crosshairEl = { container: crosshair, hLine, vLine };
+
             let lastCursor = '';
             this._onMouseMove = (e) => {
-                const target = document.elementFromPoint(e.clientX, e.clientY);
+                const x = e.clientX;
+                const y = e.clientY;
+
+                // 更新十字线位置
+                if (this.crosshairEl) {
+                    this.crosshairEl.hLine.style.top = y + 'px';
+                    this.crosshairEl.vLine.style.left = x + 'px';
+                }
+
+                const target = document.elementFromPoint(x, y);
                 let cursorType = null;
                 if (target) {
                     if (target.dataset.cursor && this.cursors[target.dataset.cursor]) {
@@ -475,9 +521,9 @@
                 }
                 if (cursorType !== lastCursor) {
                     lastCursor = cursorType;
-                    debugDiv.textContent = `🎯 ${cursorType} @ (${e.clientX}, ${e.clientY})`;
+                    debugDiv.textContent = `${cursorType} @ (${x}, ${y})`;
                 } else {
-                    debugDiv.textContent = `🎯 ${cursorType} @ (${e.clientX}, ${e.clientY})`;
+                    debugDiv.textContent = `${cursorType} @ (${x}, ${y})`;
                 }
             };
             document.addEventListener('mousemove', this._onMouseMove);
@@ -490,6 +536,7 @@
             this._injectStyles();
             if (this.options.debug) {
                 if (this.debugEl) this.debugEl.remove();
+                if (this.crosshairEl) this.crosshairEl.container.remove();
                 this._initDebug();
             }
             console.log('[AnimeCursor] Refresh complete');
@@ -499,6 +546,7 @@
             if (this.disabled) return;
             if (this.styleEl) this.styleEl.remove();
             if (this.debugEl) this.debugEl.remove();
+            if (this.crosshairEl) this.crosshairEl.container.remove();
             if (this._onMouseMove) {
                 document.removeEventListener('mousemove', this._onMouseMove);
             }
@@ -509,16 +557,18 @@
 
         disable() {
             if (this.disabled) return;
-            // 移除样式表
             if (this.styleEl) {
                 this.styleEl.remove();
                 this.styleEl = null;
             }
-            // 移除 debug 相关
             if (this.debugEl) {
                 this.debugEl.remove();
                 this.debugEl = null;
             }
+            if (this.crosshairEl) {
+                this.crosshairEl.container.remove();
+                this.crosshairEl = null;
+            }
             if (this._onMouseMove) {
                 document.removeEventListener('mousemove', this._onMouseMove);
                 this._onMouseMove = null;
@@ -530,9 +580,7 @@
         enable() {
             if (!this.disabled) return;
             this.disabled = false;
-            // 重新注入样式
             this._injectStyles();
-            // 如果 debug 模式开启，重新初始化 debug
             if (this.options.debug) {
                 this._initDebug();
             }

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

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).AnimeCursor=t()}(this,function(){"use strict";let e=null;return class{static get instance(){return e}static destroy(){return!!e&&(e.destroy(),!0)}static refresh(){return!!e&&(e.refresh(),!0)}static disable(){return!!e&&(e.disable(),!0)}static enable(){return!!e&&(e.enable(),!0)}constructor(t={}){return e?(console.warn("[AnimeCursor] Instance already exists, returning existing one"),e):(this.options={debug:!1,enableTouch:!1,fallbackCursor:"auto",excludeSelectors:"input, textarea, [contenteditable]",combineAnimations:!1,...t},this.disabled=!1,this.cursors=this.options.cursors||{},this.cursorAnimationStrings={},this.combinedRules=new Map,this.options.enableTouch||this.isMouseLikeDevice()?(this.styleEl=null,this.debugEl=null,this._onMouseMove=null,this._validateOptions(),this._preloadImages(),this._checkDomLoad(),void(e=this)):(this.disabled=!0,void(this.options.debug&&console.warn("[AnimeCursor] Touch device detected, cursor animations disabled"))))}isMouseLikeDevice(){return window.matchMedia("(pointer: fine)").matches}_validateOptions(){if(this.disabled)return;if(!this.cursors||0===Object.keys(this.cursors).length)throw new Error("[AnimeCursor] At least one cursor must be defined");let e=!1;for(const[t,s]of Object.entries(this.cursors)){if(!s.image)throw new Error(`[AnimeCursor] Cursor "${t}" missing required setting: image`);if(void 0!==s.frames&&void 0!==s.duration){if(typeof s.frames!==typeof s.duration)console.warn(`[AnimeCursor] Cursor "${t}" has mismatched types for frames and duration, treating as static cursor`),delete s.frames,delete s.duration;else if(Array.isArray(s.frames)&&Array.isArray(s.duration))if(s.frames.length!==s.duration.length)console.warn(`[AnimeCursor] Cursor "${t}" frames and duration arrays have different lengths, treating as static cursor`),delete s.frames,delete s.duration;else{for(let e of s.frames)if(!Number.isInteger(e)||e<=0){console.warn(`[AnimeCursor] Cursor "${t}" frames array contains invalid value, treating as static cursor`),delete s.frames,delete s.duration;break}for(let e of s.duration)if("number"!=typeof e||e<=0){console.warn(`[AnimeCursor] Cursor "${t}" duration array contains invalid value, treating as static cursor`),delete s.frames,delete s.duration;break}}else"number"==typeof s.frames&&"number"==typeof s.duration?(s.frames<=0||s.duration<=0)&&(console.warn(`[AnimeCursor] Cursor "${t}" frames or duration <= 0, treating as static cursor`),delete s.frames,delete s.duration):(console.warn(`[AnimeCursor] Cursor "${t}" frames and duration must be both numbers or both arrays, treating as static cursor`),delete s.frames,delete s.duration)}else void 0===s.frames&&void 0===s.duration||(console.warn(`[AnimeCursor] Cursor "${t}" has only frames or duration defined, treating as static cursor`),delete s.frames,delete s.duration);if(s.tags&&!Array.isArray(s.tags))throw new Error(`[AnimeCursor] Cursor "${t}" tags must be an array`);if(s.default){if(e)throw new Error("[AnimeCursor] Only one default cursor allowed");e=!0}if(s.offset&&(!Array.isArray(s.offset)||2!==s.offset.length))throw new Error(`[AnimeCursor] Cursor "${t}" offset must be [x, y] array`)}this.defaultCursorName=e?Object.keys(this.cursors).find(e=>this.cursors[e].default):null}_preloadImages(){const e=new Set;for(const t of Object.values(this.cursors)){this._getFrameUrls(t).forEach(t=>e.add(t))}e.forEach(e=>{const t=document.createElement("link");t.rel="preload",t.as="image",t.href=e,e.startsWith("http")&&!e.startsWith(window.location.origin)&&(t.crossOrigin="anonymous"),document.head.appendChild(t)}),this.options.debug&&e.size&&console.info(`[AnimeCursor] Preloaded ${e.size} cursor images`)}_getFrameUrls(e){let t=1;void 0!==e.frames&&(Array.isArray(e.frames)?t=e.frames.reduce((e,t)=>e+t,0):"number"==typeof e.frames&&(t=e.frames));const{image:s}=e;if(1===t)return[s];const{prefix:r,suffix:o,startNum:i,numFormat:n,ext:a}=this._parseImagePattern(s),u=[];for(let e=0;e<t;e++){const t=i+e,s=`${r}${n?this._formatNumber(t,n):t}${o}${a}`;u.push(s)}return u}_parseImagePattern(e){const t=e.match(/\.[^.]+$/),s=t?t[0]:"",r=e.slice(0,-s.length),o=r.match(/(\d+)(?!.*\d)/);if(!o)return{prefix:r+"_",suffix:"",startNum:1,numFormat:null,ext:s};const i=o[0],n=parseInt(i,10),a=i.length;return{prefix:r.slice(0,o.index),suffix:r.slice(o.index+i.length),startNum:n,numFormat:a,ext:s}}_formatNumber(e,t){return String(e).padStart(t,"0")}_checkDomLoad(){const e=()=>{this._injectStyles(),this.options.debug&&this._initDebug(),console.log("[AnimeCursor] Initialization complete")};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}_injectStyles(){if(this.disabled)return;this.combinedRules.clear();const e=document.createElement("style");e.id="animecursor-styles";let t="";if(this.defaultCursorName){const e=this.cursors[this.defaultCursorName];t+=`* { ${this._buildCursorCss(this.defaultCursorName,e)} }\n`}for(const[e,s]of Object.entries(this.cursors)){const r=`.ac-cursor-${e}`,o=s.offset||[0,0],i=s.fallback||this.options.fallbackCursor,n=this._getFrameUrls(s),a=n.length;let u="";if(void 0!==s.frames&&void 0!==s.duration&&(Array.isArray(s.frames)&&Array.isArray(s.duration)||"number"==typeof s.frames&&"number"==typeof s.duration)&&a>1){const a=`ac_anim_${e}`;let l=`@keyframes ${a} {\n`;const d=this._buildKeyframes(s,n);for(const e of d){let t=(100*e.percent).toFixed(5);1===e.percent&&(t="100");l+=`  ${t}% { ${`cursor: url("${e.url}") ${o[0]} ${o[1]}, ${i};`} }\n`}l+="}\n",t+=l;const c=`${a} ${Array.isArray(s.duration)?s.duration.reduce((e,t)=>e+t,0):s.duration}s steps(1) infinite ${s.pingpong?"alternate":""}`;u=c,t+=`${r} { cursor: url("${n[0]}") ${o[0]} ${o[1]}, ${i}; animation: ${c}; }\n`}else{const s=`ac_anim_${e}_static`;t+=`@keyframes ${s} {\n`,t+=`  0%, 100% { cursor: url("${n[0]}") ${o[0]} ${o[1]}, ${i}; }\n`,t+="}\n";const a=`${s} 0.001s forwards steps(1)`;u=a,t+=`${r} { cursor: url("${n[0]}") ${o[0]} ${o[1]}, ${i}; animation: ${a}; }\n`}if(this.cursorAnimationStrings[e]=u,s.tags&&s.tags.length){t+=`${s.tags.join(", ")} { ${this._buildCursorCss(e,s)} }\n`}t+=`[data-cursor="${e}"] { ${this._buildCursorCss(e,s)} }\n`}if(this.options.excludeSelectors&&(t+=`${this.options.excludeSelectors} { cursor: text !important; animation: none !important; }\n`),this.options.combineAnimations){const e=document.querySelectorAll("[data-ac-animation]");for(const s of e){const e=s.getAttribute("data-ac-animation");if(!e)continue;let r=this._getCursorTypeForElement(s);if(!r)continue;const o=this.cursorAnimationStrings[r];if(!o)continue;const i=`${r}:${e}`;if(!this.combinedRules.has(i)){const s=`ac-combined-${this._simpleHash(i)}`;t+=`.${s} { animation: ${o}, ${e}; }\n`,this.combinedRules.set(i,s)}const n=this.combinedRules.get(i);s.classList.add(n)}}t+="body.animecursor-disabled * { cursor: auto !important; animation: none !important; }\n",e.textContent=t,document.head.appendChild(e),this.styleEl=e}_getCursorTypeForElement(e){if(e.dataset.cursor&&this.cursors[e.dataset.cursor])return e.dataset.cursor;for(const[t,s]of Object.entries(this.cursors))if(s.tags&&s.tags.some(t=>e.matches(t)))return t;return this.defaultCursorName}_buildKeyframes(e,t){let s=e.frames,r=e.duration;const o=t.length;if("number"==typeof s){const e=r/s;s=new Array(s).fill(1),r=new Array(s.length).fill(e)}const i=[];let n=r.reduce((e,t)=>e+t,0),a=0,u=0;for(let e=0;e<s.length;e++){const o=s[e],l=r[e]/o;for(let e=0;e<o;e++){const e=a/n;i.push({percent:e,url:t[u]}),a+=l,u++}}return i.push({percent:1,url:t[o-1]}),i}_buildCursorCss(e,t){const s=this._getFrameUrls(t),r=t.offset||[0,0],o=t.fallback||this.options.fallbackCursor;let i=`cursor: url("${s[0]}") ${r[0]} ${r[1]}, ${o};`;if(void 0!==t.frames&&void 0!==t.duration&&(Array.isArray(t.frames)&&Array.isArray(t.duration)||"number"==typeof t.frames&&"number"==typeof t.duration)&&s.length>1){i+=` animation: ac_anim_${e} ${Array.isArray(t.duration)?t.duration.reduce((e,t)=>e+t,0):t.duration}s steps(1) infinite ${t.pingpong?"alternate":""};`}else i+=` animation: ac_anim_${e}_static 0.001s forwards steps(1);`;return i}_simpleHash(e){let t=0;for(let s=0;s<e.length;s++){t=(t<<5)-t+e.charCodeAt(s),t|=0}return Math.abs(t).toString(36)}_initDebug(){const e=document.createElement("div");e.className="animecursor-debug",e.style.cssText="\n      position: fixed;\n      top: 0;\n      left: 0;\n      background: rgba(0,0,0,0.7);\n      color: #0f0;\n      padding: 4px 8px;\n      font-family: monospace;\n      font-size: 12px;\n      z-index: 2147483647;\n      pointer-events: none;\n      white-space: nowrap;\n    ",document.body.appendChild(e),this.debugEl=e;let t="";this._onMouseMove=s=>{const r=document.elementFromPoint(s.clientX,s.clientY);let o=null;if(r)if(r.dataset.cursor&&this.cursors[r.dataset.cursor])o=r.dataset.cursor;else for(const[e,t]of Object.entries(this.cursors))if(t.tags&&t.tags.some(e=>r.matches(e))){o=e;break}o||this.defaultCursorName?!o&&this.defaultCursorName&&(o=this.defaultCursorName):o="native",o!==t?(t=o,e.textContent=`🎯 ${o} @ (${s.clientX}, ${s.clientY})`):e.textContent=`🎯 ${o} @ (${s.clientX}, ${s.clientY})`},document.addEventListener("mousemove",this._onMouseMove)}refresh(){this.disabled||(this.styleEl&&this.styleEl.remove(),this.combinedRules.clear(),this._injectStyles(),this.options.debug&&(this.debugEl&&this.debugEl.remove(),this._initDebug()),console.log("[AnimeCursor] Refresh complete"))}destroy(){this.disabled||(this.styleEl&&this.styleEl.remove(),this.debugEl&&this.debugEl.remove(),this._onMouseMove&&document.removeEventListener("mousemove",this._onMouseMove),document.body.classList.remove("animecursor-disabled"),e=null,console.log("[AnimeCursor] Destroyed"))}disable(){this.disabled||(this.styleEl&&(this.styleEl.remove(),this.styleEl=null),this.debugEl&&(this.debugEl.remove(),this.debugEl=null),this._onMouseMove&&(document.removeEventListener("mousemove",this._onMouseMove),this._onMouseMove=null),this.disabled=!0,this.options.debug&&console.log("[AnimeCursor] Disabled"))}enable(){this.disabled&&(this.disabled=!1,this._injectStyles(),this.options.debug&&this._initDebug(),this.options.debug&&console.log("[AnimeCursor] Enabled"))}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).AnimeCursor=t()}(this,function(){"use strict";let e=null;return class{static get instance(){return e}static destroy(){return!!e&&(e.destroy(),!0)}static refresh(){return!!e&&(e.refresh(),!0)}static disable(){return!!e&&(e.disable(),!0)}static enable(){return!!e&&(e.enable(),!0)}constructor(t={}){return e?(console.warn("[AnimeCursor] Instance already exists, returning existing one"),e):(this.options={debug:!1,enableTouch:!1,fallbackCursor:"auto",excludeSelectors:"input, textarea, [contenteditable]",combineAnimations:!1,...t},this.disabled=!1,this.cursors=this.options.cursors||{},this.cursorAnimationStrings={},this.combinedRules=new Map,this.options.enableTouch||this.isMouseLikeDevice()?(this.styleEl=null,this.debugEl=null,this.crosshairEl=null,this._onMouseMove=null,this._validateOptions(),this._preloadImages(),this._checkDomLoad(),void(e=this)):(this.disabled=!0,void(this.options.debug&&console.warn("[AnimeCursor] Touch device detected, cursor animations disabled"))))}isMouseLikeDevice(){return window.matchMedia("(pointer: fine)").matches}_validateOptions(){if(this.disabled)return;if(!this.cursors||0===Object.keys(this.cursors).length)throw new Error("[AnimeCursor] At least one cursor must be defined");let e=!1;for(const[t,s]of Object.entries(this.cursors)){if(!s.image)throw new Error(`[AnimeCursor] Cursor "${t}" missing required setting: image`);if(void 0!==s.frames&&void 0!==s.duration){if(typeof s.frames!==typeof s.duration)console.warn(`[AnimeCursor] Cursor "${t}" has mismatched types for frames and duration, treating as static cursor`),delete s.frames,delete s.duration;else if(Array.isArray(s.frames)&&Array.isArray(s.duration))if(s.frames.length!==s.duration.length)console.warn(`[AnimeCursor] Cursor "${t}" frames and duration arrays have different lengths, treating as static cursor`),delete s.frames,delete s.duration;else{for(let e of s.frames)if(!Number.isInteger(e)||e<=0){console.warn(`[AnimeCursor] Cursor "${t}" frames array contains invalid value, treating as static cursor`),delete s.frames,delete s.duration;break}for(let e of s.duration)if("number"!=typeof e||e<=0){console.warn(`[AnimeCursor] Cursor "${t}" duration array contains invalid value, treating as static cursor`),delete s.frames,delete s.duration;break}}else"number"==typeof s.frames&&"number"==typeof s.duration?(s.frames<=0||s.duration<=0)&&(console.warn(`[AnimeCursor] Cursor "${t}" frames or duration <= 0, treating as static cursor`),delete s.frames,delete s.duration):(console.warn(`[AnimeCursor] Cursor "${t}" frames and duration must be both numbers or both arrays, treating as static cursor`),delete s.frames,delete s.duration)}else void 0===s.frames&&void 0===s.duration||(console.warn(`[AnimeCursor] Cursor "${t}" has only frames or duration defined, treating as static cursor`),delete s.frames,delete s.duration);if(s.tags&&!Array.isArray(s.tags))throw new Error(`[AnimeCursor] Cursor "${t}" tags must be an array`);if(s.default){if(e)throw new Error("[AnimeCursor] Only one default cursor allowed");e=!0}if(s.offset&&(!Array.isArray(s.offset)||2!==s.offset.length))throw new Error(`[AnimeCursor] Cursor "${t}" offset must be [x, y] array`)}this.defaultCursorName=e?Object.keys(this.cursors).find(e=>this.cursors[e].default):null}_preloadImages(){const e=new Set;for(const t of Object.values(this.cursors)){this._getFrameUrls(t).forEach(t=>e.add(t))}e.forEach(e=>{const t=document.createElement("link");t.rel="preload",t.as="image",t.href=e,e.startsWith("http")&&!e.startsWith(window.location.origin)&&(t.crossOrigin="anonymous"),document.head.appendChild(t)}),this.options.debug&&e.size&&console.info(`[AnimeCursor] Preloaded ${e.size} cursor images`)}_getFrameUrls(e){let t=1;void 0!==e.frames&&(Array.isArray(e.frames)?t=e.frames.reduce((e,t)=>e+t,0):"number"==typeof e.frames&&(t=e.frames));const{image:s}=e;if(1===t)return[s];const{prefix:r,suffix:o,startNum:n,numFormat:i,ext:a}=this._parseImagePattern(s),u=[];for(let e=0;e<t;e++){const t=n+e,s=`${r}${i?this._formatNumber(t,i):t}${o}${a}`;u.push(s)}return u}_parseImagePattern(e){const t=e.match(/\.[^.]+$/),s=t?t[0]:"",r=e.slice(0,-s.length),o=r.match(/(\d+)(?!.*\d)/);if(!o)return{prefix:r+"_",suffix:"",startNum:1,numFormat:null,ext:s};const n=o[0],i=parseInt(n,10),a=n.length;return{prefix:r.slice(0,o.index),suffix:r.slice(o.index+n.length),startNum:i,numFormat:a,ext:s}}_formatNumber(e,t){return String(e).padStart(t,"0")}_checkDomLoad(){const e=()=>{this._injectStyles(),this.options.debug&&this._initDebug(),console.log("[AnimeCursor] Initialization complete")};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}_injectStyles(){if(this.disabled)return;this.combinedRules.clear();const e=document.createElement("style");e.id="animecursor-styles";let t="";if(this.defaultCursorName){const e=this.cursors[this.defaultCursorName];t+=`* { ${this._buildCursorCss(this.defaultCursorName,e)} }\n`}for(const[e,s]of Object.entries(this.cursors)){const r=`.ac-cursor-${e}`,o=s.offset||[0,0],n=s.fallback||this.options.fallbackCursor,i=this._getFrameUrls(s),a=i.length;let u="";if(void 0!==s.frames&&void 0!==s.duration&&(Array.isArray(s.frames)&&Array.isArray(s.duration)||"number"==typeof s.frames&&"number"==typeof s.duration)&&a>1){const a=`ac_anim_${e}`;let l=`@keyframes ${a} {\n`;const c=this._buildKeyframes(s,i);for(const e of c){let t=(100*e.percent).toFixed(5);1===e.percent&&(t="100");l+=`  ${t}% { ${`cursor: url("${e.url}") ${o[0]} ${o[1]}, ${n};`} }\n`}l+="}\n",t+=l;const d=`${a} ${Array.isArray(s.duration)?s.duration.reduce((e,t)=>e+t,0):s.duration}s steps(1) infinite ${s.pingpong?"alternate":""}`;u=d,t+=`${r} { cursor: url("${i[0]}") ${o[0]} ${o[1]}, ${n}; animation: ${d}; }\n`}else{const s=`ac_anim_${e}_static`;t+=`@keyframes ${s} {\n`,t+=`  0%, 100% { cursor: url("${i[0]}") ${o[0]} ${o[1]}, ${n}; }\n`,t+="}\n";const a=`${s} 0.001s forwards steps(1)`;u=a,t+=`${r} { cursor: url("${i[0]}") ${o[0]} ${o[1]}, ${n}; animation: ${a}; }\n`}if(this.cursorAnimationStrings[e]=u,s.tags&&s.tags.length){t+=`${s.tags.join(", ")} { ${this._buildCursorCss(e,s)} }\n`}t+=`[data-cursor="${e}"] { ${this._buildCursorCss(e,s)} }\n`}if(this.options.excludeSelectors&&(t+=`${this.options.excludeSelectors} { cursor: text !important; animation: none !important; }\n`),this.options.combineAnimations){const e=document.querySelectorAll("[data-ac-animation]");for(const s of e){const e=s.getAttribute("data-ac-animation");if(!e)continue;let r=this._getCursorTypeForElement(s);if(!r)continue;const o=this.cursorAnimationStrings[r];if(!o)continue;const n=`${r}:${e}`;if(!this.combinedRules.has(n)){const s=`ac-combined-${this._simpleHash(n)}`;t+=`.${s} { animation: ${o}, ${e}; }\n`,this.combinedRules.set(n,s)}const i=this.combinedRules.get(n);s.classList.add(i)}}t+="body.animecursor-disabled * { cursor: auto !important; animation: none !important; }\n",e.textContent=t,document.head.appendChild(e),this.styleEl=e}_getCursorTypeForElement(e){if(e.dataset.cursor&&this.cursors[e.dataset.cursor])return e.dataset.cursor;for(const[t,s]of Object.entries(this.cursors))if(s.tags&&s.tags.some(t=>e.matches(t)))return t;return this.defaultCursorName}_buildKeyframes(e,t){let s=e.frames,r=e.duration;const o=t.length;if("number"==typeof s){const e=r/s;s=new Array(s).fill(1),r=new Array(s.length).fill(e)}const n=[];let i=r.reduce((e,t)=>e+t,0),a=0,u=0;for(let e=0;e<s.length;e++){const o=s[e],l=r[e]/o;for(let e=0;e<o;e++){const e=a/i;n.push({percent:e,url:t[u]}),a+=l,u++}}return n.push({percent:1,url:t[o-1]}),n}_buildCursorCss(e,t){const s=this._getFrameUrls(t),r=t.offset||[0,0],o=t.fallback||this.options.fallbackCursor;let n=`cursor: url("${s[0]}") ${r[0]} ${r[1]}, ${o};`;if(void 0!==t.frames&&void 0!==t.duration&&(Array.isArray(t.frames)&&Array.isArray(t.duration)||"number"==typeof t.frames&&"number"==typeof t.duration)&&s.length>1){n+=` animation: ac_anim_${e} ${Array.isArray(t.duration)?t.duration.reduce((e,t)=>e+t,0):t.duration}s steps(1) infinite ${t.pingpong?"alternate":""};`}else n+=` animation: ac_anim_${e}_static 0.001s forwards steps(1);`;return n}_simpleHash(e){let t=0;for(let s=0;s<e.length;s++){t=(t<<5)-t+e.charCodeAt(s),t|=0}return Math.abs(t).toString(36)}_initDebug(){const e=document.createElement("div");e.className="animecursor-debug",e.style.cssText="\n            position: fixed;\n            top: 0;\n            left: 0;\n            background: rgba(0,0,0,0.7);\n            color: #0f0;\n            padding: 4px 8px;\n            font-family: monospace;\n            font-size: 12px;\n            z-index: 2147483647;\n            pointer-events: auto;\n            white-space: nowrap;\n            transition: opacity 0.2s ease;\n        ",e.addEventListener("mouseenter",()=>{e.style.opacity="0.5"}),e.addEventListener("mouseleave",()=>{e.style.opacity="1"}),document.body.appendChild(e),this.debugEl=e;const t=document.createElement("div");t.className="animecursor-crosshair",t.style.cssText="\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 0;\n            pointer-events: none;\n            z-index: 2147483646;\n        ";const s=document.createElement("div");s.className="ac-crosshair-h",s.style.cssText="\n            position: fixed;\n            left: 0;\n            width: 100%;\n            height: 1px;\n            background-color: rgba(255,0,0,0.6);\n            pointer-events: none;\n            transform: translateY(-0.5px);\n        ";const r=document.createElement("div");r.className="ac-crosshair-v",r.style.cssText="\n            position: fixed;\n            top: 0;\n            width: 1px;\n            height: 100%;\n            background-color: rgba(255,0,0,0.6);\n            pointer-events: none;\n            transform: translateX(-0.5px);\n        ",t.appendChild(s),t.appendChild(r),document.body.appendChild(t),this.crosshairEl={container:t,hLine:s,vLine:r};let o="";this._onMouseMove=t=>{const s=t.clientX,r=t.clientY;this.crosshairEl&&(this.crosshairEl.hLine.style.top=r+"px",this.crosshairEl.vLine.style.left=s+"px");const n=document.elementFromPoint(s,r);let i=null;if(n)if(n.dataset.cursor&&this.cursors[n.dataset.cursor])i=n.dataset.cursor;else for(const[e,t]of Object.entries(this.cursors))if(t.tags&&t.tags.some(e=>n.matches(e))){i=e;break}i||this.defaultCursorName?!i&&this.defaultCursorName&&(i=this.defaultCursorName):i="native",i!==o?(o=i,e.textContent=`${i} @ (${s}, ${r})`):e.textContent=`${i} @ (${s}, ${r})`},document.addEventListener("mousemove",this._onMouseMove)}refresh(){this.disabled||(this.styleEl&&this.styleEl.remove(),this.combinedRules.clear(),this._injectStyles(),this.options.debug&&(this.debugEl&&this.debugEl.remove(),this.crosshairEl&&this.crosshairEl.container.remove(),this._initDebug()),console.log("[AnimeCursor] Refresh complete"))}destroy(){this.disabled||(this.styleEl&&this.styleEl.remove(),this.debugEl&&this.debugEl.remove(),this.crosshairEl&&this.crosshairEl.container.remove(),this._onMouseMove&&document.removeEventListener("mousemove",this._onMouseMove),document.body.classList.remove("animecursor-disabled"),e=null,console.log("[AnimeCursor] Destroyed"))}disable(){this.disabled||(this.styleEl&&(this.styleEl.remove(),this.styleEl=null),this.debugEl&&(this.debugEl.remove(),this.debugEl=null),this.crosshairEl&&(this.crosshairEl.container.remove(),this.crosshairEl=null),this._onMouseMove&&(document.removeEventListener("mousemove",this._onMouseMove),this._onMouseMove=null),this.disabled=!0,this.options.debug&&console.log("[AnimeCursor] Disabled"))}enable(){this.disabled&&(this.disabled=!1,this._injectStyles(),this.options.debug&&this._initDebug(),this.options.debug&&console.log("[AnimeCursor] Enabled"))}}});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "anime-cursor",
-    "version": "2.1.2",
+    "version": "2.1.3",
     "description": "A lightweight JavaScript library for animated custom cursors",
     "main": "dist/anime-cursor.umd.js",
     "module": "dist/anime-cursor.esm.js",