@page-agent/page-controller 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -191,13 +191,7 @@ const _SimulatorMask = class _SimulatorMask {
|
|
|
191
191
|
__privateAdd(this, _SimulatorMask_instances);
|
|
192
192
|
__publicField(this, "shown", false);
|
|
193
193
|
__publicField(this, "wrapper", document.createElement("div"));
|
|
194
|
-
__publicField(this, "motion",
|
|
195
|
-
mode: isPageDark() ? "dark" : "light",
|
|
196
|
-
styles: {
|
|
197
|
-
position: "absolute",
|
|
198
|
-
inset: "0"
|
|
199
|
-
}
|
|
200
|
-
}));
|
|
194
|
+
__publicField(this, "motion", null);
|
|
201
195
|
__privateAdd(this, _cursor, document.createElement("div"));
|
|
202
196
|
__privateAdd(this, _currentCursorX, 0);
|
|
203
197
|
__privateAdd(this, _currentCursorY, 0);
|
|
@@ -207,8 +201,17 @@ const _SimulatorMask = class _SimulatorMask {
|
|
|
207
201
|
this.wrapper.className = styles.wrapper;
|
|
208
202
|
this.wrapper.setAttribute("data-browser-use-ignore", "true");
|
|
209
203
|
this.wrapper.setAttribute("data-page-agent-ignore", "true");
|
|
210
|
-
|
|
211
|
-
|
|
204
|
+
try {
|
|
205
|
+
const motion = new Motion({
|
|
206
|
+
mode: isPageDark() ? "dark" : "light",
|
|
207
|
+
styles: { position: "absolute", inset: "0" }
|
|
208
|
+
});
|
|
209
|
+
this.motion = motion;
|
|
210
|
+
this.wrapper.appendChild(motion.element);
|
|
211
|
+
motion.autoResize(this.wrapper);
|
|
212
|
+
} catch (e) {
|
|
213
|
+
console.warn("[SimulatorMask] Motion overlay unavailable:", e);
|
|
214
|
+
}
|
|
212
215
|
this.wrapper.addEventListener("click", (e) => {
|
|
213
216
|
e.stopPropagation();
|
|
214
217
|
e.preventDefault();
|
|
@@ -260,8 +263,8 @@ const _SimulatorMask = class _SimulatorMask {
|
|
|
260
263
|
show() {
|
|
261
264
|
if (this.shown) return;
|
|
262
265
|
this.shown = true;
|
|
263
|
-
this.motion
|
|
264
|
-
this.motion
|
|
266
|
+
this.motion?.start();
|
|
267
|
+
this.motion?.fadeIn();
|
|
265
268
|
this.wrapper.style.display = "block";
|
|
266
269
|
__privateSet(this, _currentCursorX, window.innerWidth / 2);
|
|
267
270
|
__privateSet(this, _currentCursorY, window.innerHeight / 2);
|
|
@@ -273,15 +276,15 @@ const _SimulatorMask = class _SimulatorMask {
|
|
|
273
276
|
hide() {
|
|
274
277
|
if (!this.shown) return;
|
|
275
278
|
this.shown = false;
|
|
276
|
-
this.motion
|
|
277
|
-
this.motion
|
|
279
|
+
this.motion?.fadeOut();
|
|
280
|
+
this.motion?.pause();
|
|
278
281
|
__privateGet(this, _cursor).classList.remove(cursorStyles.clicking);
|
|
279
282
|
setTimeout(() => {
|
|
280
283
|
this.wrapper.style.display = "none";
|
|
281
284
|
}, 800);
|
|
282
285
|
}
|
|
283
286
|
dispose() {
|
|
284
|
-
this.motion
|
|
287
|
+
this.motion?.dispose();
|
|
285
288
|
this.wrapper.remove();
|
|
286
289
|
}
|
|
287
290
|
};
|
|
@@ -332,4 +335,4 @@ let SimulatorMask = _SimulatorMask;
|
|
|
332
335
|
export {
|
|
333
336
|
SimulatorMask
|
|
334
337
|
};
|
|
335
|
-
//# sourceMappingURL=SimulatorMask-
|
|
338
|
+
//# sourceMappingURL=SimulatorMask-C7yoC9Lw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SimulatorMask-C7yoC9Lw.js","sources":["../../src/mask/checkDarkMode.ts","../../src/mask/SimulatorMask.ts"],"sourcesContent":["/**\n * Checks for common dark mode CSS classes on the html or body elements.\n * @returns {boolean} - True if a common dark mode class is found.\n */\nfunction hasDarkModeClass() {\n\tconst DEFAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']\n\n\tconst htmlElement = document.documentElement\n\tconst bodyElement = document.body || document.documentElement // can be null in some cases\n\n\t// Check class names on <html> and <body>\n\tfor (const className of DEFAULT_DARK_MODE_CLASSES) {\n\t\tif (htmlElement.classList.contains(className) || bodyElement?.classList.contains(className)) {\n\t\t\treturn true\n\t\t}\n\t}\n\n\t// Some sites use data attributes\n\tconst darkThemeAttribute = htmlElement.getAttribute('data-theme')\n\tif (darkThemeAttribute?.toLowerCase().includes('dark')) {\n\t\treturn true\n\t}\n\n\treturn false\n}\n\n/**\n * Parses an RGB or RGBA color string and returns an object with r, g, b properties.\n * @param {string} colorString - e.g., \"rgb(34, 34, 34)\" or \"rgba(0, 0, 0, 0.5)\"\n * @returns {{r: number, g: number, b: number}|null}\n */\nfunction parseRgbColor(colorString: string) {\n\tconst rgbMatch = /rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/.exec(colorString)\n\tif (!rgbMatch) {\n\t\treturn null // Not a valid rgb/rgba string\n\t}\n\treturn {\n\t\tr: parseInt(rgbMatch[1]),\n\t\tg: parseInt(rgbMatch[2]),\n\t\tb: parseInt(rgbMatch[3]),\n\t}\n}\n\n/**\n * Determines if a color is \"dark\" based on its calculated luminance.\n * @param {string} colorString - The CSS color string (e.g., \"rgb(50, 50, 50)\").\n * @param {number} threshold - A value between 0 and 255. Colors with luminance below this will be considered dark. Default is 128.\n * @returns {boolean} - True if the color is considered dark.\n */\nfunction isColorDark(colorString: string, threshold = 128) {\n\tif (!colorString || colorString === 'transparent' || colorString.startsWith('rgba(0, 0, 0, 0)')) {\n\t\treturn false // Transparent is not dark\n\t}\n\n\tconst rgb = parseRgbColor(colorString)\n\tif (!rgb) {\n\t\treturn false // Could not parse color\n\t}\n\n\t// Calculate perceived luminance using the standard formula\n\tconst luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b\n\n\treturn luminance < threshold\n}\n\n/**\n * Checks the background color of the body element to determine if the page is dark.\n * @returns {boolean}\n */\nfunction isBackgroundDark() {\n\t// We check both <html> and <body> because some pages set the color on <html>\n\tconst htmlStyle = window.getComputedStyle(document.documentElement)\n\tconst bodyStyle = window.getComputedStyle(document.body || document.documentElement)\n\n\t// Get background colors\n\tconst htmlBgColor = htmlStyle.backgroundColor\n\tconst bodyBgColor = bodyStyle.backgroundColor\n\n\t// The body's background might be transparent, in which case we should\n\t// fall back to the html element's background.\n\tif (isColorDark(bodyBgColor)) {\n\t\treturn true\n\t} else if (bodyBgColor === 'transparent' || bodyBgColor.startsWith('rgba(0, 0, 0, 0)')) {\n\t\treturn isColorDark(htmlBgColor)\n\t}\n\n\treturn false\n}\n\n/**\n * A comprehensive function to determine if the page is currently in a dark theme.\n * It combines class checking and background color analysis.\n * @returns {boolean} - True if the page is likely dark.\n */\nexport function isPageDark() {\n\ttry {\n\t\t// Strategy 1: Check for common dark mode classes\n\t\tif (hasDarkModeClass()) {\n\t\t\treturn true\n\t\t}\n\n\t\t// Strategy 2: Analyze the computed background color\n\t\tif (isBackgroundDark()) {\n\t\t\treturn true\n\t\t}\n\n\t\t// @TODO add more checks here, e.g., analyzing text color,\n\t\t// or checking the background of major layout elements like <main> or #app.\n\n\t\treturn false\n\t} catch (error) {\n\t\tconsole.warn('Error determining if page is dark:', error)\n\t\treturn false\n\t}\n}\n","import { Motion } from 'ai-motion'\n\nimport { isPageDark } from './checkDarkMode'\n\nimport styles from './SimulatorMask.module.css'\nimport cursorStyles from './cursor.module.css'\n\nexport class SimulatorMask {\n\tshown: boolean = false\n\twrapper = document.createElement('div')\n\tmotion: Motion | null = null\n\n\t#cursor = document.createElement('div')\n\n\t#currentCursorX = 0\n\t#currentCursorY = 0\n\n\t#targetCursorX = 0\n\t#targetCursorY = 0\n\n\tconstructor() {\n\t\tthis.wrapper.id = 'page-agent-runtime_simulator-mask'\n\t\tthis.wrapper.className = styles.wrapper\n\t\tthis.wrapper.setAttribute('data-browser-use-ignore', 'true')\n\t\tthis.wrapper.setAttribute('data-page-agent-ignore', 'true')\n\n\t\ttry {\n\t\t\tconst motion = new Motion({\n\t\t\t\tmode: isPageDark() ? 'dark' : 'light',\n\t\t\t\tstyles: { position: 'absolute', inset: '0' },\n\t\t\t})\n\t\t\tthis.motion = motion\n\t\t\tthis.wrapper.appendChild(motion.element)\n\t\t\tmotion.autoResize(this.wrapper)\n\t\t} catch (e) {\n\t\t\tconsole.warn('[SimulatorMask] Motion overlay unavailable:', e)\n\t\t}\n\n\t\t// Capture all mouse, keyboard, and wheel events\n\t\tthis.wrapper.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mousedown', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mouseup', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mousemove', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('wheel', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('keydown', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('keyup', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\n\t\t// Create AI cursor\n\t\tthis.#createCursor()\n\t\t// this.show()\n\n\t\tdocument.body.appendChild(this.wrapper)\n\n\t\tthis.#moveCursorToTarget()\n\n\t\twindow.addEventListener('PageAgent::MovePointerTo', (event: Event) => {\n\t\t\tconst { x, y } = (event as CustomEvent).detail\n\t\t\tthis.setCursorPosition(x, y)\n\t\t})\n\n\t\twindow.addEventListener('PageAgent::ClickPointer', (event: Event) => {\n\t\t\tthis.triggerClickAnimation()\n\t\t})\n\t}\n\n\t#createCursor() {\n\t\tthis.#cursor.className = cursorStyles.cursor\n\n\t\t// Create ripple effect container\n\t\tconst rippleContainer = document.createElement('div')\n\t\trippleContainer.className = cursorStyles.cursorRipple\n\t\tthis.#cursor.appendChild(rippleContainer)\n\n\t\t// Create filling layer\n\t\tconst fillingLayer = document.createElement('div')\n\t\tfillingLayer.className = cursorStyles.cursorFilling\n\t\tthis.#cursor.appendChild(fillingLayer)\n\n\t\t// Create border layer\n\t\tconst borderLayer = document.createElement('div')\n\t\tborderLayer.className = cursorStyles.cursorBorder\n\t\tthis.#cursor.appendChild(borderLayer)\n\n\t\tthis.wrapper.appendChild(this.#cursor)\n\t}\n\n\t#moveCursorToTarget() {\n\t\tconst newX = this.#currentCursorX + (this.#targetCursorX - this.#currentCursorX) * 0.2\n\t\tconst newY = this.#currentCursorY + (this.#targetCursorY - this.#currentCursorY) * 0.2\n\n\t\tconst xDistance = Math.abs(newX - this.#targetCursorX)\n\t\tif (xDistance > 0) {\n\t\t\tif (xDistance < 2) {\n\t\t\t\tthis.#currentCursorX = this.#targetCursorX\n\t\t\t} else {\n\t\t\t\tthis.#currentCursorX = newX\n\t\t\t}\n\t\t\tthis.#cursor.style.left = `${this.#currentCursorX}px`\n\t\t}\n\n\t\tconst yDistance = Math.abs(newY - this.#targetCursorY)\n\t\tif (yDistance > 0) {\n\t\t\tif (yDistance < 2) {\n\t\t\t\tthis.#currentCursorY = this.#targetCursorY\n\t\t\t} else {\n\t\t\t\tthis.#currentCursorY = newY\n\t\t\t}\n\t\t\tthis.#cursor.style.top = `${this.#currentCursorY}px`\n\t\t}\n\n\t\trequestAnimationFrame(() => this.#moveCursorToTarget())\n\t}\n\n\tsetCursorPosition(x: number, y: number) {\n\t\tthis.#targetCursorX = x\n\t\tthis.#targetCursorY = y\n\t}\n\n\ttriggerClickAnimation() {\n\t\tthis.#cursor.classList.remove(cursorStyles.clicking)\n\t\t// Force reflow to restart animation\n\t\tvoid this.#cursor.offsetHeight\n\t\tthis.#cursor.classList.add(cursorStyles.clicking)\n\t}\n\n\tshow() {\n\t\tif (this.shown) return\n\n\t\tthis.shown = true\n\t\tthis.motion?.start()\n\t\tthis.motion?.fadeIn()\n\n\t\tthis.wrapper.style.display = 'block'\n\n\t\t// Initialize cursor position\n\t\tthis.#currentCursorX = window.innerWidth / 2\n\t\tthis.#currentCursorY = window.innerHeight / 2\n\t\tthis.#targetCursorX = this.#currentCursorX\n\t\tthis.#targetCursorY = this.#currentCursorY\n\t\tthis.#cursor.style.left = `${this.#currentCursorX}px`\n\t\tthis.#cursor.style.top = `${this.#currentCursorY}px`\n\t}\n\n\thide() {\n\t\tif (!this.shown) return\n\n\t\tthis.shown = false\n\t\tthis.motion?.fadeOut()\n\t\tthis.motion?.pause()\n\n\t\tthis.#cursor.classList.remove(cursorStyles.clicking)\n\n\t\tsetTimeout(() => {\n\t\t\tthis.wrapper.style.display = 'none'\n\t\t}, 800) // Match the animation duration\n\t}\n\n\tdispose() {\n\t\tthis.motion?.dispose()\n\t\tthis.wrapper.remove()\n\t}\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1679,7 +1679,7 @@ const _PageController = class _PageController extends EventTarget {
|
|
|
1679
1679
|
initMask() {
|
|
1680
1680
|
if (this.maskReady !== null) return;
|
|
1681
1681
|
this.maskReady = (async () => {
|
|
1682
|
-
const { SimulatorMask } = await import("./SimulatorMask-
|
|
1682
|
+
const { SimulatorMask } = await import("./SimulatorMask-C7yoC9Lw.js");
|
|
1683
1683
|
this.mask = new SimulatorMask();
|
|
1684
1684
|
})();
|
|
1685
1685
|
}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SimulatorMask-DCHWhnaU.js","sources":["../../src/mask/checkDarkMode.ts","../../src/mask/SimulatorMask.ts"],"sourcesContent":["/**\n * Checks for common dark mode CSS classes on the html or body elements.\n * @returns {boolean} - True if a common dark mode class is found.\n */\nfunction hasDarkModeClass() {\n\tconst DEFAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']\n\n\tconst htmlElement = document.documentElement\n\tconst bodyElement = document.body || document.documentElement // can be null in some cases\n\n\t// Check class names on <html> and <body>\n\tfor (const className of DEFAULT_DARK_MODE_CLASSES) {\n\t\tif (htmlElement.classList.contains(className) || bodyElement?.classList.contains(className)) {\n\t\t\treturn true\n\t\t}\n\t}\n\n\t// Some sites use data attributes\n\tconst darkThemeAttribute = htmlElement.getAttribute('data-theme')\n\tif (darkThemeAttribute?.toLowerCase().includes('dark')) {\n\t\treturn true\n\t}\n\n\treturn false\n}\n\n/**\n * Parses an RGB or RGBA color string and returns an object with r, g, b properties.\n * @param {string} colorString - e.g., \"rgb(34, 34, 34)\" or \"rgba(0, 0, 0, 0.5)\"\n * @returns {{r: number, g: number, b: number}|null}\n */\nfunction parseRgbColor(colorString: string) {\n\tconst rgbMatch = /rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/.exec(colorString)\n\tif (!rgbMatch) {\n\t\treturn null // Not a valid rgb/rgba string\n\t}\n\treturn {\n\t\tr: parseInt(rgbMatch[1]),\n\t\tg: parseInt(rgbMatch[2]),\n\t\tb: parseInt(rgbMatch[3]),\n\t}\n}\n\n/**\n * Determines if a color is \"dark\" based on its calculated luminance.\n * @param {string} colorString - The CSS color string (e.g., \"rgb(50, 50, 50)\").\n * @param {number} threshold - A value between 0 and 255. Colors with luminance below this will be considered dark. Default is 128.\n * @returns {boolean} - True if the color is considered dark.\n */\nfunction isColorDark(colorString: string, threshold = 128) {\n\tif (!colorString || colorString === 'transparent' || colorString.startsWith('rgba(0, 0, 0, 0)')) {\n\t\treturn false // Transparent is not dark\n\t}\n\n\tconst rgb = parseRgbColor(colorString)\n\tif (!rgb) {\n\t\treturn false // Could not parse color\n\t}\n\n\t// Calculate perceived luminance using the standard formula\n\tconst luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b\n\n\treturn luminance < threshold\n}\n\n/**\n * Checks the background color of the body element to determine if the page is dark.\n * @returns {boolean}\n */\nfunction isBackgroundDark() {\n\t// We check both <html> and <body> because some pages set the color on <html>\n\tconst htmlStyle = window.getComputedStyle(document.documentElement)\n\tconst bodyStyle = window.getComputedStyle(document.body || document.documentElement)\n\n\t// Get background colors\n\tconst htmlBgColor = htmlStyle.backgroundColor\n\tconst bodyBgColor = bodyStyle.backgroundColor\n\n\t// The body's background might be transparent, in which case we should\n\t// fall back to the html element's background.\n\tif (isColorDark(bodyBgColor)) {\n\t\treturn true\n\t} else if (bodyBgColor === 'transparent' || bodyBgColor.startsWith('rgba(0, 0, 0, 0)')) {\n\t\treturn isColorDark(htmlBgColor)\n\t}\n\n\treturn false\n}\n\n/**\n * A comprehensive function to determine if the page is currently in a dark theme.\n * It combines class checking and background color analysis.\n * @returns {boolean} - True if the page is likely dark.\n */\nexport function isPageDark() {\n\ttry {\n\t\t// Strategy 1: Check for common dark mode classes\n\t\tif (hasDarkModeClass()) {\n\t\t\treturn true\n\t\t}\n\n\t\t// Strategy 2: Analyze the computed background color\n\t\tif (isBackgroundDark()) {\n\t\t\treturn true\n\t\t}\n\n\t\t// @TODO add more checks here, e.g., analyzing text color,\n\t\t// or checking the background of major layout elements like <main> or #app.\n\n\t\treturn false\n\t} catch (error) {\n\t\tconsole.warn('Error determining if page is dark:', error)\n\t\treturn false\n\t}\n}\n","import { Motion } from 'ai-motion'\n\nimport { isPageDark } from './checkDarkMode'\n\nimport styles from './SimulatorMask.module.css'\nimport cursorStyles from './cursor.module.css'\n\nexport class SimulatorMask {\n\tshown: boolean = false\n\twrapper = document.createElement('div')\n\tmotion = new Motion({\n\t\tmode: isPageDark() ? 'dark' : 'light',\n\t\tstyles: {\n\t\t\tposition: 'absolute',\n\t\t\tinset: '0',\n\t\t},\n\t})\n\n\t#cursor = document.createElement('div')\n\n\t#currentCursorX = 0\n\t#currentCursorY = 0\n\n\t#targetCursorX = 0\n\t#targetCursorY = 0\n\n\tconstructor() {\n\t\tthis.wrapper.id = 'page-agent-runtime_simulator-mask'\n\t\tthis.wrapper.className = styles.wrapper\n\t\tthis.wrapper.setAttribute('data-browser-use-ignore', 'true')\n\t\tthis.wrapper.setAttribute('data-page-agent-ignore', 'true')\n\n\t\tthis.wrapper.appendChild(this.motion.element)\n\t\tthis.motion.autoResize(this.wrapper)\n\n\t\t// Capture all mouse, keyboard, and wheel events\n\t\tthis.wrapper.addEventListener('click', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mousedown', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mouseup', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('mousemove', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('wheel', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('keydown', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\t\tthis.wrapper.addEventListener('keyup', (e) => {\n\t\t\te.stopPropagation()\n\t\t\te.preventDefault()\n\t\t})\n\n\t\t// Create AI cursor\n\t\tthis.#createCursor()\n\t\t// this.show()\n\n\t\tdocument.body.appendChild(this.wrapper)\n\n\t\tthis.#moveCursorToTarget()\n\n\t\twindow.addEventListener('PageAgent::MovePointerTo', (event: Event) => {\n\t\t\tconst { x, y } = (event as CustomEvent).detail\n\t\t\tthis.setCursorPosition(x, y)\n\t\t})\n\n\t\twindow.addEventListener('PageAgent::ClickPointer', (event: Event) => {\n\t\t\tthis.triggerClickAnimation()\n\t\t})\n\t}\n\n\t#createCursor() {\n\t\tthis.#cursor.className = cursorStyles.cursor\n\n\t\t// Create ripple effect container\n\t\tconst rippleContainer = document.createElement('div')\n\t\trippleContainer.className = cursorStyles.cursorRipple\n\t\tthis.#cursor.appendChild(rippleContainer)\n\n\t\t// Create filling layer\n\t\tconst fillingLayer = document.createElement('div')\n\t\tfillingLayer.className = cursorStyles.cursorFilling\n\t\tthis.#cursor.appendChild(fillingLayer)\n\n\t\t// Create border layer\n\t\tconst borderLayer = document.createElement('div')\n\t\tborderLayer.className = cursorStyles.cursorBorder\n\t\tthis.#cursor.appendChild(borderLayer)\n\n\t\tthis.wrapper.appendChild(this.#cursor)\n\t}\n\n\t#moveCursorToTarget() {\n\t\tconst newX = this.#currentCursorX + (this.#targetCursorX - this.#currentCursorX) * 0.2\n\t\tconst newY = this.#currentCursorY + (this.#targetCursorY - this.#currentCursorY) * 0.2\n\n\t\tconst xDistance = Math.abs(newX - this.#targetCursorX)\n\t\tif (xDistance > 0) {\n\t\t\tif (xDistance < 2) {\n\t\t\t\tthis.#currentCursorX = this.#targetCursorX\n\t\t\t} else {\n\t\t\t\tthis.#currentCursorX = newX\n\t\t\t}\n\t\t\tthis.#cursor.style.left = `${this.#currentCursorX}px`\n\t\t}\n\n\t\tconst yDistance = Math.abs(newY - this.#targetCursorY)\n\t\tif (yDistance > 0) {\n\t\t\tif (yDistance < 2) {\n\t\t\t\tthis.#currentCursorY = this.#targetCursorY\n\t\t\t} else {\n\t\t\t\tthis.#currentCursorY = newY\n\t\t\t}\n\t\t\tthis.#cursor.style.top = `${this.#currentCursorY}px`\n\t\t}\n\n\t\trequestAnimationFrame(() => this.#moveCursorToTarget())\n\t}\n\n\tsetCursorPosition(x: number, y: number) {\n\t\tthis.#targetCursorX = x\n\t\tthis.#targetCursorY = y\n\t}\n\n\ttriggerClickAnimation() {\n\t\tthis.#cursor.classList.remove(cursorStyles.clicking)\n\t\t// Force reflow to restart animation\n\t\tvoid this.#cursor.offsetHeight\n\t\tthis.#cursor.classList.add(cursorStyles.clicking)\n\t}\n\n\tshow() {\n\t\tif (this.shown) return\n\n\t\tthis.shown = true\n\t\tthis.motion.start()\n\t\tthis.motion.fadeIn()\n\n\t\tthis.wrapper.style.display = 'block'\n\n\t\t// Initialize cursor position\n\t\tthis.#currentCursorX = window.innerWidth / 2\n\t\tthis.#currentCursorY = window.innerHeight / 2\n\t\tthis.#targetCursorX = this.#currentCursorX\n\t\tthis.#targetCursorY = this.#currentCursorY\n\t\tthis.#cursor.style.left = `${this.#currentCursorX}px`\n\t\tthis.#cursor.style.top = `${this.#currentCursorY}px`\n\t}\n\n\thide() {\n\t\tif (!this.shown) return\n\n\t\tthis.shown = false\n\t\tthis.motion.fadeOut()\n\t\tthis.motion.pause()\n\n\t\tthis.#cursor.classList.remove(cursorStyles.clicking)\n\n\t\tsetTimeout(() => {\n\t\t\tthis.wrapper.style.display = 'none'\n\t\t}, 800) // Match the animation duration\n\t}\n\n\tdispose() {\n\t\tthis.motion.dispose()\n\t\tthis.wrapper.remove()\n\t}\n}\n"],"names":[],"mappings":"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"}
|