282 lines
13 KiB
JavaScript
282 lines
13 KiB
JavaScript
(() => {
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __moduleCache = /* @__PURE__ */ new WeakMap;
|
|
var __toCommonJS = (from) => {
|
|
var entry = __moduleCache.get(from), desc;
|
|
if (entry)
|
|
return entry;
|
|
entry = __defProp({}, "__esModule", { value: true });
|
|
if (from && typeof from === "object" || typeof from === "function")
|
|
__getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
|
|
get: () => from[key],
|
|
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
}));
|
|
__moduleCache.set(from, entry);
|
|
return entry;
|
|
};
|
|
|
|
// src/ghost-cursor-client.ts
|
|
var exports_ghost_cursor_client = {};
|
|
|
|
// src/assets/cursors/screen-studio/pointer-macos-tahoe-data-url.ts
|
|
var SCREENSTUDIO_POINTER_MACOS_TAHOE_DATA_URL = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjE4IiBoZWlnaHQ9Ijk1OCIgdmlld0JveD0iMCAwIDYxOCA5NTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfMzg0XzI3KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTI3LjA2MiAzNy4wMzMxTDU0MC42OTYgNDUxLjU1NUM1OTIuNjUzIDUwMy42NiA1NTUuNzk0IDU5Mi41NzQgNDgyLjIyNiA1OTIuNTc0TDQyMS44MzEgNTkyLjU2OUw0ODEuODIxIDczNS4wNTRDNDkyLjMzMSA3NjAuMDIxIDQ5Mi40NzkgNzg3LjY1MiA0ODIuMjY1IDgxMi43NjdDNDcyLjAwMiA4MzcuOTMyIDQ1Mi41NjEgODU3LjU3IDQyNy40OTYgODY4LjA4QzQxNC44NjQgODczLjM1OSA0MDEuNjQgODc2LjAyNCAzODguMTIxIDg3Ni4wMjRDMzQ3LjExNyA4NzYuMDI0IDMxMC4zNTggODUxLjYgMjk0LjQ3IDgxMy44MDRMMjMxLjQyIDY2My45MThMMTkwLjM2OCA3MDAuMzM3QzEzNy4wMjkgNzQ3LjUwOCA1MyA3MDkuNjYzIDUzIDYzOC40MTNWNjcuNjc0NEM1MyAyOC45OTAzIDk5LjcyNjggOS42NDgyOCAxMjcuMDYyIDM3LjAzMzFaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwMi4zMTYgOTkuNjUyQzEwMi4zMTYgOTMuMTg4MiAxMTAuMTYyIDg5LjkzMTYgMTE0LjcwMSA5NC41MjA0TDUwNC44OTcgNDg1LjU1NUM1MjYuMTY0IDUwNi44NzEgNTExLjA2NSA1NDMuMjM2IDQ4MC45NjcgNTQzLjIzNkwzNDcuNTQ2IDU0My4xNjFMNDM2LjM0MiA3NTQuMTQzQzQ0Ny41NDIgNzgwLjc4OCA0MzUuMDA5IDgxMS40MjkgNDA4LjQxNCA4MjIuNTgxQzM4MS43MiA4MzMuNzgxIDM1MS4xMjggODIxLjI5OCAzMzkuOTc3IDc5NC43MDJMMjUwLjI5MyA1ODEuMzUyTDE1OC41MTcgNjYyLjY0NEMxMzcuOTkxIDY4MC44MDEgMTA2LjMxOSA2NjguMTQ1IDEwMi42NjQgNjQyLjMyM0wxMDIuMzE2IDYzNy4zMzFWOTkuNjUyWiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzM4NF8yNyIgeD0iMC4zNCIgeT0iMC43OTkyMTkiIHdpZHRoPSI2MTcuMzIiIGhlaWdodD0iOTU3LjE0NCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSIyOS4yNiIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyNi4zMyIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuNjUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18zODRfMjciLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMzg0XzI3IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPg==";
|
|
|
|
// src/ghost-cursor-client.ts
|
|
var CURSOR_ID = "__playwriter_ghost_cursor__";
|
|
var SCREENSTUDIO_POINTER_ASPECT_RATIO = 618 / 958;
|
|
var SCREENSTUDIO_HOTSPOT_X_RATIO = 0.14;
|
|
var SCREENSTUDIO_HOTSPOT_Y_RATIO = 0.06;
|
|
var MINIMAL_TRIANGLE_HOTSPOT_X_RATIO = 0.07;
|
|
var MINIMAL_TRIANGLE_HOTSPOT_Y_RATIO = 0.06;
|
|
var DEFAULT_OPTIONS = {
|
|
style: "minimal",
|
|
color: "#111827",
|
|
size: 22,
|
|
zIndex: 2147483647,
|
|
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
minDurationMs: 24,
|
|
maxDurationMs: 320,
|
|
speedPxPerMs: 4
|
|
};
|
|
var runtime = {
|
|
cursorElement: null,
|
|
options: DEFAULT_OPTIONS,
|
|
x: 0,
|
|
y: 0,
|
|
scale: 1,
|
|
hasPosition: false,
|
|
enabled: false
|
|
};
|
|
function clamp(options) {
|
|
const { value, min, max } = options;
|
|
return Math.min(max, Math.max(min, value));
|
|
}
|
|
function mergeOptions(options) {
|
|
if (!options) {
|
|
return DEFAULT_OPTIONS;
|
|
}
|
|
return {
|
|
style: options.style ?? DEFAULT_OPTIONS.style,
|
|
color: options.color ?? DEFAULT_OPTIONS.color,
|
|
size: options.size ?? DEFAULT_OPTIONS.size,
|
|
zIndex: options.zIndex ?? DEFAULT_OPTIONS.zIndex,
|
|
easing: options.easing ?? DEFAULT_OPTIONS.easing,
|
|
minDurationMs: options.minDurationMs ?? DEFAULT_OPTIONS.minDurationMs,
|
|
maxDurationMs: options.maxDurationMs ?? DEFAULT_OPTIONS.maxDurationMs,
|
|
speedPxPerMs: options.speedPxPerMs ?? DEFAULT_OPTIONS.speedPxPerMs
|
|
};
|
|
}
|
|
function getCursorDimensions() {
|
|
if (runtime.options.style === "screenstudio") {
|
|
const height = runtime.options.size;
|
|
const width = Math.max(10, Math.round(height * SCREENSTUDIO_POINTER_ASPECT_RATIO));
|
|
return { width, height };
|
|
}
|
|
if (runtime.options.style === "minimal") {
|
|
const size = Math.max(12, runtime.options.size);
|
|
return { width: size, height: size };
|
|
}
|
|
return { width: runtime.options.size, height: runtime.options.size };
|
|
}
|
|
function getHotspotOffsetPx() {
|
|
const dimensions = getCursorDimensions();
|
|
if (runtime.options.style === "screenstudio") {
|
|
return {
|
|
x: Math.round(dimensions.width * SCREENSTUDIO_HOTSPOT_X_RATIO),
|
|
y: Math.round(dimensions.height * SCREENSTUDIO_HOTSPOT_Y_RATIO)
|
|
};
|
|
}
|
|
if (runtime.options.style === "minimal") {
|
|
return {
|
|
x: Math.round(dimensions.width * MINIMAL_TRIANGLE_HOTSPOT_X_RATIO),
|
|
y: Math.round(dimensions.height * MINIMAL_TRIANGLE_HOTSPOT_Y_RATIO)
|
|
};
|
|
}
|
|
return {
|
|
x: Math.round(dimensions.width / 2),
|
|
y: Math.round(dimensions.height / 2)
|
|
};
|
|
}
|
|
function getBaseOpacity() {
|
|
if (runtime.options.style === "screenstudio") {
|
|
return "0.95";
|
|
}
|
|
if (runtime.options.style === "minimal") {
|
|
return "1";
|
|
}
|
|
return "0.72";
|
|
}
|
|
function applyTransform() {
|
|
if (!runtime.cursorElement) {
|
|
return;
|
|
}
|
|
const hotspot = getHotspotOffsetPx();
|
|
runtime.cursorElement.style.transform = `translate3d(${runtime.x - hotspot.x}px, ${runtime.y - hotspot.y}px, 0) scale(${runtime.scale})`;
|
|
}
|
|
function computeDurationMs(options) {
|
|
if (!runtime.hasPosition) {
|
|
return 0;
|
|
}
|
|
const dx = options.targetX - runtime.x;
|
|
const dy = options.targetY - runtime.y;
|
|
const distance = Math.hypot(dx, dy);
|
|
const rawDurationMs = distance / runtime.options.speedPxPerMs;
|
|
return clamp({
|
|
value: rawDurationMs,
|
|
min: runtime.options.minDurationMs,
|
|
max: runtime.options.maxDurationMs
|
|
});
|
|
}
|
|
function createCursorElement() {
|
|
const element = document.createElement("div");
|
|
element.id = CURSOR_ID;
|
|
element.setAttribute("aria-hidden", "true");
|
|
element.style.position = "fixed";
|
|
element.style.left = "0";
|
|
element.style.top = "0";
|
|
element.style.pointerEvents = "none";
|
|
element.style.zIndex = `${runtime.options.zIndex}`;
|
|
element.style.opacity = getBaseOpacity();
|
|
element.style.transitionProperty = "transform, opacity";
|
|
element.style.transitionTimingFunction = runtime.options.easing;
|
|
element.style.transitionDuration = "0ms";
|
|
element.style.willChange = "transform";
|
|
runtime.cursorElement = element;
|
|
applyRuntimeVisualOptions();
|
|
return element;
|
|
}
|
|
function ensureCursorElement() {
|
|
const existing = document.getElementById(CURSOR_ID);
|
|
if (existing) {
|
|
runtime.cursorElement = existing;
|
|
return existing;
|
|
}
|
|
const element = createCursorElement();
|
|
runtime.cursorElement = element;
|
|
const root = document.documentElement || document.body;
|
|
root.appendChild(element);
|
|
return element;
|
|
}
|
|
function applyRuntimeVisualOptions() {
|
|
if (!runtime.cursorElement) {
|
|
return;
|
|
}
|
|
const dimensions = getCursorDimensions();
|
|
runtime.cursorElement.style.width = `${dimensions.width}px`;
|
|
runtime.cursorElement.style.height = `${dimensions.height}px`;
|
|
runtime.cursorElement.style.zIndex = `${runtime.options.zIndex}`;
|
|
runtime.cursorElement.style.transitionTimingFunction = runtime.options.easing;
|
|
if (runtime.options.style === "screenstudio") {
|
|
runtime.cursorElement.style.borderRadius = "0";
|
|
runtime.cursorElement.style.border = "none";
|
|
runtime.cursorElement.style.backgroundColor = "transparent";
|
|
runtime.cursorElement.style.backgroundImage = `url("${SCREENSTUDIO_POINTER_MACOS_TAHOE_DATA_URL}")`;
|
|
runtime.cursorElement.style.backgroundRepeat = "no-repeat";
|
|
runtime.cursorElement.style.backgroundPosition = "left top";
|
|
runtime.cursorElement.style.backgroundSize = "contain";
|
|
runtime.cursorElement.style.backdropFilter = "none";
|
|
runtime.cursorElement.style.filter = "none";
|
|
runtime.cursorElement.style.boxShadow = "none";
|
|
runtime.cursorElement.style.opacity = getBaseOpacity();
|
|
return;
|
|
}
|
|
if (runtime.options.style === "minimal") {
|
|
const triangleSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="${runtime.options.color}" d="m23.284 19.124l-6.866-6.895a.4.4 0 0 1-.118-.296a.43.43 0 0 1 .163-.282l4.439-3.077a1.48 1.48 0 0 0 .621-1.48a1.48 1.48 0 0 0-1.036-1.198L1.623.302a1.14 1.14 0 0 0-1.11.282A1.13 1.13 0 0 0 .29 1.649L5.928 20.44a1.48 1.48 0 0 0 1.183 1.035a1.48 1.48 0 0 0 1.48-.621l3.078-4.44a.37.37 0 0 1 .31-.118a.43.43 0 0 1 .296.104l6.91 6.91a1.48 1.48 0 0 0 2.087 0l2.086-2.086a1.48 1.48 0 0 0-.074-2.101"/></svg>`;
|
|
const triangleDataUrl = `url("data:image/svg+xml,${encodeURIComponent(triangleSvg)}")`;
|
|
runtime.cursorElement.style.borderRadius = "0";
|
|
runtime.cursorElement.style.border = "none";
|
|
runtime.cursorElement.style.backgroundColor = "transparent";
|
|
runtime.cursorElement.style.backgroundImage = triangleDataUrl;
|
|
runtime.cursorElement.style.backgroundRepeat = "no-repeat";
|
|
runtime.cursorElement.style.backgroundSize = "contain";
|
|
runtime.cursorElement.style.backgroundPosition = "left top";
|
|
runtime.cursorElement.style.backdropFilter = "none";
|
|
runtime.cursorElement.style.boxShadow = "none";
|
|
runtime.cursorElement.style.filter = "drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3))";
|
|
runtime.cursorElement.style.opacity = getBaseOpacity();
|
|
return;
|
|
}
|
|
runtime.cursorElement.style.borderRadius = "999px";
|
|
runtime.cursorElement.style.border = "none";
|
|
runtime.cursorElement.style.backgroundColor = runtime.options.color;
|
|
runtime.cursorElement.style.backgroundImage = "none";
|
|
runtime.cursorElement.style.backdropFilter = "none";
|
|
runtime.cursorElement.style.filter = "none";
|
|
runtime.cursorElement.style.boxShadow = "0 2px 10px rgba(0, 0, 0, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.55)";
|
|
runtime.cursorElement.style.opacity = getBaseOpacity();
|
|
}
|
|
function moveCursor(options) {
|
|
if (!runtime.enabled) {
|
|
return;
|
|
}
|
|
const element = ensureCursorElement();
|
|
const durationMs = computeDurationMs({ targetX: options.x, targetY: options.y });
|
|
element.style.transitionDuration = `${Math.round(durationMs)}ms`;
|
|
runtime.x = options.x;
|
|
runtime.y = options.y;
|
|
runtime.hasPosition = true;
|
|
applyTransform();
|
|
}
|
|
function setPressed(options) {
|
|
if (!runtime.enabled) {
|
|
return;
|
|
}
|
|
const element = ensureCursorElement();
|
|
runtime.scale = options.pressed ? runtime.options.style === "screenstudio" ? 0.94 : runtime.options.style === "minimal" ? 0.93 : 0.82 : 1;
|
|
element.style.opacity = options.pressed ? "1" : getBaseOpacity();
|
|
applyTransform();
|
|
}
|
|
function enable(options) {
|
|
runtime.options = mergeOptions(options);
|
|
runtime.enabled = true;
|
|
ensureCursorElement();
|
|
applyRuntimeVisualOptions();
|
|
if (!runtime.hasPosition) {
|
|
runtime.x = Math.round(window.innerWidth / 2);
|
|
runtime.y = Math.round(window.innerHeight / 2);
|
|
runtime.scale = 1;
|
|
runtime.hasPosition = true;
|
|
}
|
|
applyTransform();
|
|
}
|
|
function disable() {
|
|
runtime.enabled = false;
|
|
runtime.scale = 1;
|
|
runtime.hasPosition = false;
|
|
if (runtime.cursorElement) {
|
|
runtime.cursorElement.remove();
|
|
runtime.cursorElement = null;
|
|
}
|
|
}
|
|
function applyMouseAction(action) {
|
|
if (!runtime.enabled) {
|
|
return;
|
|
}
|
|
if (action.type === "move" || action.type === "wheel") {
|
|
moveCursor({ x: action.x, y: action.y });
|
|
return;
|
|
}
|
|
if (action.type === "down") {
|
|
moveCursor({ x: action.x, y: action.y });
|
|
setPressed({ pressed: true });
|
|
return;
|
|
}
|
|
if (action.type === "up") {
|
|
moveCursor({ x: action.x, y: action.y });
|
|
setPressed({ pressed: false });
|
|
}
|
|
}
|
|
var api = {
|
|
enable,
|
|
disable,
|
|
applyMouseAction,
|
|
isEnabled: () => {
|
|
return runtime.enabled;
|
|
}
|
|
};
|
|
globalThis.__playwriterGhostCursor = api;
|
|
})();
|