@supermousejs/labs 2.4.4-beta.4 → 2.4.4-beta.5
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.
- package/CHANGELOG.md +31 -0
- package/dist/index.mjs +29 -29
- package/dist/index.umd.js +2 -2
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @supermousejs/labs
|
|
2
2
|
|
|
3
|
+
## 2.4.4-beta.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- d82c62d: ---
|
|
8
|
+
|
|
9
|
+
Beta.5 — cursor policy flattening, suppression simplification, and API renames.
|
|
10
|
+
|
|
11
|
+
## Changed — breaking
|
|
12
|
+
- `cursorPolicy` option renamed to `nativeCursorSelectors` and flattened to a plain `string[]`. Migration: `cursorPolicy: { native: [".x"] }` → `nativeCursorSelectors: [".x"]`. The `hide` key is gone; cursor suppression is unconditional and no longer configurable.
|
|
13
|
+
- `CursorPolicy` and `CursorPolicyInput` types removed from the public export surface. Code importing them fails at compile time. The only remaining shape is `string[]`.
|
|
14
|
+
- `DEFAULT_CURSOR_POLICY` renamed to `DEFAULT_NATIVE_CURSOR_SELECTORS`. Value reduced to `["select", "[contenteditable]"]`.
|
|
15
|
+
- `registerHoverTarget(selector)` renamed to `addHoverSelectors(selectors)`. Same behavior — comma-separated selectors are added to the current scope's shared hover set. The new name matches `hoverSelectors` and reflects that it mutates a set rather than registering a single element.
|
|
16
|
+
- `@supermousejs/utils`: `VisualConfig.selector` renamed to `hoverSelector`. Update `definePlugin({ ..., selector: "x" })` to `definePlugin({ ..., hoverSelector: "x" })`.
|
|
17
|
+
|
|
18
|
+
## Changed — behavior
|
|
19
|
+
- `input` and `textarea` removed from the default native cursor list. Text inputs and textareas are unaffected — their UA cursor is `text`, which the probe reads and treats as a fallback trigger. Button-like inputs (`<input type="button">`, `<input type="submit">`) and checkboxes/radios change: their UA cursor is `default`, which the probe classifies as non-fallback, so the custom cursor now shows over them. This matches the pre-existing treatment of `<button>`.
|
|
20
|
+
- Cursor suppression is now a single wildcard rule per scope instead of a wildcard plus per-selector rules. Behavior is unchanged — verified in Chromium and Firefox against `<a>`, `<button>`, `<input>` (all types), `<textarea>`, `<select>`, `[contenteditable]`, `[role="button"]`, `[tabindex]`, `<label>`, and a `<canvas>` with site CSS. Range slider thumb pseudo-elements retain their explicit rules (`*` does not match pseudo-elements).
|
|
21
|
+
|
|
22
|
+
## Fixed
|
|
23
|
+
- `handleMouseOut` no longer leaves `state.isHover` and `state.isNative` stale when the pointer leaves from a descendant of the tracked element. Moving from `<span>` inside `<button>` directly outside the button previously failed to clear `hoverTarget` — the containment check was inverted.
|
|
24
|
+
|
|
25
|
+
## Internal
|
|
26
|
+
- `policy.ts` removed from `@supermousejs/core`. The default moved to `constants.ts`; `normalizePolicy` dissolved into `??` fallbacks at the call sites.
|
|
27
|
+
- `Scope.hideSelectors` field removed.
|
|
28
|
+
- Size budget re-tightened to 6.2 kB gzip / 5.5 kB brotli.
|
|
29
|
+
|
|
30
|
+
- Updated dependencies [d82c62d]
|
|
31
|
+
- @supermousejs/utils@2.4.4-beta.5
|
|
32
|
+
- @supermousejs/core@2.5.0-beta.5
|
|
33
|
+
|
|
3
34
|
## 2.4.4-beta.4
|
|
4
35
|
|
|
5
36
|
### Patch Changes
|
package/dist/index.mjs
CHANGED
|
@@ -21,18 +21,18 @@ const xt = (t) => {
|
|
|
21
21
|
followStrategy: "smooth",
|
|
22
22
|
anchor: "center",
|
|
23
23
|
rotateWithVelocity: !1
|
|
24
|
-
}),
|
|
24
|
+
}), p = t.useSemanticDetection ?? !0, m = t.transitionDuration ?? 200, e = t.switchDelay ?? 80, h = t.offset?.[0] ?? 0, y = t.offset?.[1] ?? 0, w = t.defaultState ?? "default", b = m / 2;
|
|
25
25
|
function v(o) {
|
|
26
26
|
x(n, { transform: `scale(${o})` });
|
|
27
27
|
}
|
|
28
|
-
function
|
|
28
|
+
function S(o) {
|
|
29
29
|
u = o, n.innerHTML = t.icons[o] ?? "";
|
|
30
30
|
}
|
|
31
31
|
let l;
|
|
32
32
|
return N(
|
|
33
33
|
{
|
|
34
34
|
name: t.name ?? "smart-icon",
|
|
35
|
-
|
|
35
|
+
hoverSelector: "[data-supermouse-icon]",
|
|
36
36
|
create: (o) => {
|
|
37
37
|
const A = H("div");
|
|
38
38
|
return x(A, { zIndex: U.CURSOR }), n = H("div"), x(n, {
|
|
@@ -61,12 +61,12 @@ const xt = (t) => {
|
|
|
61
61
|
const R = performance.now(), F = $ / 1e3, D = t.icons, E = o.state.pointerTarget, V = !!E, O = V && E !== a;
|
|
62
62
|
let T = w;
|
|
63
63
|
if (V) {
|
|
64
|
-
O && (a = E, r =
|
|
64
|
+
O && (a = E, r = p ? ct(E, D, o.state.authoredCursor) : null);
|
|
65
65
|
const k = o.state.interaction?.icon;
|
|
66
66
|
k && D[k] ? T = k : r && (T = r);
|
|
67
67
|
} else
|
|
68
68
|
a && (a = null, r = null);
|
|
69
|
-
T !== u && g === "idle" ? !!D[T] || T === w ? O ? (
|
|
69
|
+
T !== u && g === "idle" ? !!D[T] || T === w ? O ? (S(T), v(1), f = null, s = 0) : T !== f ? (f = T, s = 0) : (s += $, s >= e && (C = T, g = "out", c = R, v(0), f = null, s = 0)) : (f = null, s = 0) : T === u && (f = null, s = 0), g === "out" && R - c >= b && (S(C), g = "in", c = R, v(0)), g === "in" && R - c >= b && (g = "idle", v(1));
|
|
70
70
|
const L = d.size(o.state), J = d.color(o.state);
|
|
71
71
|
x(A, {
|
|
72
72
|
width: `${L}px`,
|
|
@@ -125,7 +125,7 @@ const xt = (t) => {
|
|
|
125
125
|
return N(
|
|
126
126
|
{
|
|
127
127
|
name: t.name ?? "smart-ring",
|
|
128
|
-
|
|
128
|
+
hoverSelector: "[data-supermouse-color]",
|
|
129
129
|
create: (s) => {
|
|
130
130
|
const i = _(n.size(s.state), n.fill(s.state));
|
|
131
131
|
return x(i, {
|
|
@@ -142,16 +142,16 @@ const xt = (t) => {
|
|
|
142
142
|
},
|
|
143
143
|
beforeDisable(s, i) {
|
|
144
144
|
const { x: z, y: d } = s.state.smooth;
|
|
145
|
-
return i.style.transition = `opacity ${C}ms ease, transform ${C}ms ease`, i.style.opacity = "0", I(i, z, d, 0, 0.2, 0.2), new Promise((
|
|
145
|
+
return i.style.transition = `opacity ${C}ms ease, transform ${C}ms ease`, i.style.opacity = "0", I(i, z, d, 0, 0.2, 0.2), new Promise((p) => {
|
|
146
146
|
f = setTimeout(() => {
|
|
147
|
-
i.style.transition = "border-radius 0.2s ease",
|
|
147
|
+
i.style.transition = "border-radius 0.2s ease", p();
|
|
148
148
|
}, C);
|
|
149
149
|
});
|
|
150
150
|
},
|
|
151
151
|
update: (s, i, z) => {
|
|
152
152
|
if (i.style.display === "none") return;
|
|
153
|
-
const d = z / 1e3,
|
|
154
|
-
let e =
|
|
153
|
+
const d = z / 1e3, p = n.size(s.state), m = s.state.shape;
|
|
154
|
+
let e = p, h = p, y = "50%", w = n.color(s.state);
|
|
155
155
|
m ? (e = m.width, h = m.height, y = `${m.borderRadius}px`) : (s.state.isHover && (e = n.hoverSize(s.state), h = n.hoverSize(s.state)), s.state.isDown && (e *= 0.9, h *= 0.9)), s.state.interaction.color && (w = s.state.interaction.color), u = j(u, e, 20, d), a = j(a, h, 20, d), x(i, {
|
|
156
156
|
width: `${u}px`,
|
|
157
157
|
height: `${a}px`,
|
|
@@ -161,15 +161,15 @@ const xt = (t) => {
|
|
|
161
161
|
borderWidth: `${n.borderWidth(s.state)}px`,
|
|
162
162
|
opacity: "1"
|
|
163
163
|
});
|
|
164
|
-
let b = 0, v = 1,
|
|
164
|
+
let b = 0, v = 1, S = 1;
|
|
165
165
|
if (!m && t.enableSkew && !s.state.reducedMotion) {
|
|
166
166
|
const { displacement: A } = s.state, $ = et.getVelocityDistortion(A.x, A.y);
|
|
167
|
-
b = $.rotation, v = $.scaleX,
|
|
167
|
+
b = $.rotation, v = $.scaleX, S = $.scaleY;
|
|
168
168
|
const R = 1 - Math.exp(-20 * d);
|
|
169
169
|
r = nt(r, b, R);
|
|
170
170
|
} else
|
|
171
171
|
r = 0;
|
|
172
|
-
g = j(g, v, 20, d), c = j(c,
|
|
172
|
+
g = j(g, v, 20, d), c = j(c, S, 20, d);
|
|
173
173
|
const { x: l, y: o } = s.state.smooth;
|
|
174
174
|
I(i, l, o, r, g, c);
|
|
175
175
|
}
|
|
@@ -179,10 +179,10 @@ const xt = (t) => {
|
|
|
179
179
|
}, yt = (t = {}) => {
|
|
180
180
|
const n = t.count ?? 30, u = t.decay ?? 2.5, a = t.frequency ?? 10, r = t.scatter ?? 5, g = st(t.color, "#ff00ff"), c = [];
|
|
181
181
|
let C = 0, f = 0, s = !1, i = 0;
|
|
182
|
-
const z = (d,
|
|
182
|
+
const z = (d, p, m) => {
|
|
183
183
|
const e = c.find((b) => !b.isActive);
|
|
184
184
|
if (!e) return;
|
|
185
|
-
e.isActive = !0, e.life = 1, e.x = d + M.random(-r, r), e.y =
|
|
185
|
+
e.isActive = !0, e.life = 1, e.x = d + M.random(-r, r), e.y = p + M.random(-r, r);
|
|
186
186
|
const h = M.random(0, Math.PI * 2), y = M.random(0.5, 1.5);
|
|
187
187
|
e.vx = Math.cos(h) * y, e.vy = Math.sin(h) * y, e.scale = M.random(0.5, 1.2), e.color = m;
|
|
188
188
|
const w = M.random(2, 5);
|
|
@@ -199,7 +199,7 @@ const xt = (t) => {
|
|
|
199
199
|
create: () => {
|
|
200
200
|
const d = H("div");
|
|
201
201
|
x(d, { zIndex: U.TRACE });
|
|
202
|
-
for (let
|
|
202
|
+
for (let p = 0; p < n; p++) {
|
|
203
203
|
const m = _(0, "transparent");
|
|
204
204
|
x(m, {
|
|
205
205
|
opacity: "0",
|
|
@@ -218,21 +218,21 @@ const xt = (t) => {
|
|
|
218
218
|
}
|
|
219
219
|
return d;
|
|
220
220
|
},
|
|
221
|
-
update: (d,
|
|
221
|
+
update: (d, p, m) => {
|
|
222
222
|
const e = m / 1e3, { x: h, y } = d.state.pointer;
|
|
223
223
|
s || (C = h, f = y, s = !0);
|
|
224
224
|
const w = h - C, b = y - f, v = Math.hypot(w, b);
|
|
225
225
|
if (i += v, i > a) {
|
|
226
|
-
const
|
|
226
|
+
const S = g(d.state), l = Math.floor(i / a);
|
|
227
227
|
for (let o = 0; o < l; o++) {
|
|
228
228
|
const A = o / l;
|
|
229
|
-
z(C + w * A, f + b * A,
|
|
229
|
+
z(C + w * A, f + b * A, S);
|
|
230
230
|
}
|
|
231
231
|
i = i % a;
|
|
232
232
|
}
|
|
233
233
|
C = h, f = y;
|
|
234
|
-
for (let
|
|
235
|
-
const l = c[
|
|
234
|
+
for (let S = 0; S < n; S++) {
|
|
235
|
+
const l = c[S];
|
|
236
236
|
if (l.isActive)
|
|
237
237
|
if (l.x += l.vx * e * 60, l.y += l.vy * e * 60, l.life -= u * e, l.life <= 0)
|
|
238
238
|
l.isActive = !1, x(l.el, { opacity: "0" });
|
|
@@ -253,7 +253,7 @@ function dt(t, n) {
|
|
|
253
253
|
return n ? t + " " : t;
|
|
254
254
|
}
|
|
255
255
|
let ft = 0;
|
|
256
|
-
const
|
|
256
|
+
const St = (t = {}) => {
|
|
257
257
|
let n, u, a, r, g, c;
|
|
258
258
|
const C = `supermouse-text-ring-path-${ft++}`, f = X(t, {
|
|
259
259
|
text: "SUPERMOUSE • SUPERMOUSE • ",
|
|
@@ -263,11 +263,11 @@ const pt = (t = {}) => {
|
|
|
263
263
|
opacity: 1,
|
|
264
264
|
color: "currentColor"
|
|
265
265
|
}), s = t.className ?? "", i = t.spread ?? !0;
|
|
266
|
-
let z = 0, d = "",
|
|
266
|
+
let z = 0, d = "", p = 0, m = 0;
|
|
267
267
|
return N(
|
|
268
268
|
{
|
|
269
269
|
name: t.name ?? "text-ring",
|
|
270
|
-
|
|
270
|
+
hoverSelector: "[data-supermouse-text-ring]",
|
|
271
271
|
create: (e) => {
|
|
272
272
|
const h = H("div");
|
|
273
273
|
x(h, {
|
|
@@ -300,19 +300,19 @@ const pt = (t = {}) => {
|
|
|
300
300
|
update: (e, h, y) => {
|
|
301
301
|
const w = y / 1e3;
|
|
302
302
|
let b = f.text(e.state);
|
|
303
|
-
const v = f.radius(e.state),
|
|
303
|
+
const v = f.radius(e.state), S = f.fontSize(e.state), l = f.speed(e.state), o = f.opacity(e.state), A = f.color(e.state);
|
|
304
304
|
x(h, { color: A, opacity: String(o) });
|
|
305
305
|
const $ = e.state.interaction;
|
|
306
|
-
if ($.textRing && typeof $.textRing == "string" ? b = $.textRing : $.text && typeof $.text == "string" && (b = $.text), v !==
|
|
306
|
+
if ($.textRing && typeof $.textRing == "string" ? b = $.textRing : $.text && typeof $.text == "string" && (b = $.text), v !== p) {
|
|
307
307
|
u.setAttribute("d", ot(v));
|
|
308
308
|
const E = v * 2;
|
|
309
309
|
x(n, {
|
|
310
310
|
width: `${E}px`,
|
|
311
311
|
height: `${E}px`
|
|
312
|
-
}),
|
|
312
|
+
}), p = v;
|
|
313
313
|
}
|
|
314
314
|
const R = dt(b, i);
|
|
315
|
-
if (
|
|
315
|
+
if (S !== m && (r.setAttribute("font-size", `${S}px`), c.setAttribute("font-size", `${S}px`), m = S), R !== d && (g.textContent = R, d = R), i) {
|
|
316
316
|
const E = rt(v);
|
|
317
317
|
c.textContent = R;
|
|
318
318
|
const V = c.getComputedTextLength(), O = R.length;
|
|
@@ -336,5 +336,5 @@ export {
|
|
|
336
336
|
xt as SmartIcon,
|
|
337
337
|
gt as SmartRing,
|
|
338
338
|
yt as Sparkles,
|
|
339
|
-
|
|
339
|
+
St as TextRing
|
|
340
340
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(L,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(L=typeof globalThis<"u"?globalThis:L||self,e(L.SupermouseLabs={},L.SupermouseUtils))})(this,(function(L,e){"use strict";function H(t,r,h){const i=t.tagName.toLowerCase(),a=t.isContentEditable||t.closest('[contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]')!==null;if(i==="input"||i==="textarea"||a){const g=t.type;if(["button","submit","checkbox","radio","range","color"].includes(g)){if(r.pointer)return"pointer"}else if(r.text)return"text"}else if((i==="a"||i==="button"||t.closest("a")||t.closest("button"))&&r.pointer)return"pointer";return r.text&&t.closest("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre")||r.text&&h==="text"?"text":r.grab&&h==="grab"?"grab":null}const N=t=>{let r,h=t.defaultState??"default",i=null,a,g="idle",d=0,C=h,m=null,o=0,c=0,z=0;const f=e.normalizeAll(t,{size:24,color:"",followStrategy:"smooth",anchor:"center",rotateWithVelocity:!1}),S=t.useSemanticDetection??!0,x=t.transitionDuration??200,n=t.switchDelay??80,u=t.offset?.[0]??0,y=t.offset?.[1]??0,T=t.defaultState??"default",b=x/2;function v(s){e.css(r,{transform:`scale(${s})`})}function p(s){h=s,r.innerHTML=t.icons[s]??""}let l;return e.definePlugin({name:t.name??"smart-icon",
|
|
1
|
+
(function(L,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(L=typeof globalThis<"u"?globalThis:L||self,e(L.SupermouseLabs={},L.SupermouseUtils))})(this,(function(L,e){"use strict";function H(t,r,h){const i=t.tagName.toLowerCase(),a=t.isContentEditable||t.closest('[contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]')!==null;if(i==="input"||i==="textarea"||a){const g=t.type;if(["button","submit","checkbox","radio","range","color"].includes(g)){if(r.pointer)return"pointer"}else if(r.text)return"text"}else if((i==="a"||i==="button"||t.closest("a")||t.closest("button"))&&r.pointer)return"pointer";return r.text&&t.closest("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre")||r.text&&h==="text"?"text":r.grab&&h==="grab"?"grab":null}const N=t=>{let r,h=t.defaultState??"default",i=null,a,g="idle",d=0,C=h,m=null,o=0,c=0,z=0;const f=e.normalizeAll(t,{size:24,color:"",followStrategy:"smooth",anchor:"center",rotateWithVelocity:!1}),S=t.useSemanticDetection??!0,x=t.transitionDuration??200,n=t.switchDelay??80,u=t.offset?.[0]??0,y=t.offset?.[1]??0,T=t.defaultState??"default",b=x/2;function v(s){e.css(r,{transform:`scale(${s})`})}function p(s){h=s,r.innerHTML=t.icons[s]??""}let l;return e.definePlugin({name:t.name??"smart-icon",hoverSelector:"[data-supermouse-icon]",create:s=>{const A=e.createActor("div");return e.css(A,{zIndex:e.Layers.CURSOR}),r=e.createActor("div"),e.css(r,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",transformOrigin:"center center",transform:"scale(1)",transition:`transform ${b}ms cubic-bezier(0.16, 1, 0.3, 1)`}),r.innerHTML=t.icons[h]??"",e.injectStyles("supermouse-smart-icon-styles",`
|
|
2
2
|
@keyframes sm {
|
|
3
3
|
0% { transform: rotate(0deg); }
|
|
4
4
|
100% { transform: rotate(360deg); }
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
.supermouse-spin {
|
|
7
7
|
animation: sm 1s linear infinite;
|
|
8
8
|
}
|
|
9
|
-
`),l=s.state.cursorMode,s.setCursor("custom"),A.appendChild(r),A},update:(s,A,w)=>{const $=performance.now(),I=w/1e3,W=t.icons,M=s.state.pointerTarget,j=!!M,D=j&&M!==i;let R=T;if(j){D&&(i=M,a=S?H(M,W,s.state.authoredCursor):null);const P=s.state.interaction?.icon;P&&W[P]?R=P:a&&(R=a)}else i&&(i=null,a=null);R!==h&&g==="idle"?!!W[R]||R===T?D?(p(R),v(1),m=null,o=0):R!==m?(m=R,o=0):(o+=w,o>=n&&(C=R,g="out",d=$,v(0),m=null,o=0)):(m=null,o=0):R===h&&(m=null,o=0),g==="out"&&$-d>=b&&(p(C),g="in",d=$,v(0)),g==="in"&&$-d>=b&&(g="idle",v(1));const E=f.size(s.state),_=f.color(s.state);e.css(A,{width:`${E}px`,height:`${E}px`,color:_||"inherit"});let k=0,O=0;const F=E/2;switch(f.anchor(s.state)){case"center":k=-F,O=-F;break;case"top-left":k=0,O=0;break;case"top-right":k=-E,O=0;break;case"bottom-left":k=0,O=-E;break;case"bottom-right":k=-E,O=-E;break}const J=h==="pointer"||h==="text";if(f.rotateWithVelocity(s.state)&&!J&&!s.state.reducedMotion){const{x:P,y:U}=s.state.velocity;e.math.dist(P,U)>1&&(z=e.math.angle(P,U));const Q=1-Math.exp(-20*I);c=e.math.lerpAngle(c,z,Q)}else{const P=1-Math.exp(-20*I);c=e.math.lerpAngle(c,0,P)}const V=f.followStrategy(s.state)==="raw"?s.state.pointer:s.state.smooth,K=`translate3d(${V.x+u+k}px, ${V.y+y+O}px, 0) rotate(${c}deg)`;A.style.transform=K},cleanup(s){s.setCursor(l)}},t)},X=(t={})=>{const r=e.normalizeAll(t,{size:20,hoverSize:40,color:"#ffffff",fill:"transparent",borderWidth:2});let h=20,i=20,a=0,g=1,d=1;const C=150;let m=null;return e.definePlugin({name:t.name??"smart-ring",
|
|
9
|
+
`),l=s.state.cursorMode,s.setCursor("custom"),A.appendChild(r),A},update:(s,A,w)=>{const $=performance.now(),I=w/1e3,W=t.icons,M=s.state.pointerTarget,j=!!M,D=j&&M!==i;let R=T;if(j){D&&(i=M,a=S?H(M,W,s.state.authoredCursor):null);const P=s.state.interaction?.icon;P&&W[P]?R=P:a&&(R=a)}else i&&(i=null,a=null);R!==h&&g==="idle"?!!W[R]||R===T?D?(p(R),v(1),m=null,o=0):R!==m?(m=R,o=0):(o+=w,o>=n&&(C=R,g="out",d=$,v(0),m=null,o=0)):(m=null,o=0):R===h&&(m=null,o=0),g==="out"&&$-d>=b&&(p(C),g="in",d=$,v(0)),g==="in"&&$-d>=b&&(g="idle",v(1));const E=f.size(s.state),_=f.color(s.state);e.css(A,{width:`${E}px`,height:`${E}px`,color:_||"inherit"});let k=0,O=0;const F=E/2;switch(f.anchor(s.state)){case"center":k=-F,O=-F;break;case"top-left":k=0,O=0;break;case"top-right":k=-E,O=0;break;case"bottom-left":k=0,O=-E;break;case"bottom-right":k=-E,O=-E;break}const J=h==="pointer"||h==="text";if(f.rotateWithVelocity(s.state)&&!J&&!s.state.reducedMotion){const{x:P,y:U}=s.state.velocity;e.math.dist(P,U)>1&&(z=e.math.angle(P,U));const Q=1-Math.exp(-20*I);c=e.math.lerpAngle(c,z,Q)}else{const P=1-Math.exp(-20*I);c=e.math.lerpAngle(c,0,P)}const V=f.followStrategy(s.state)==="raw"?s.state.pointer:s.state.smooth,K=`translate3d(${V.x+u+k}px, ${V.y+y+O}px, 0) rotate(${c}deg)`;A.style.transform=K},cleanup(s){s.setCursor(l)}},t)},X=(t={})=>{const r=e.normalizeAll(t,{size:20,hoverSize:40,color:"#ffffff",fill:"transparent",borderWidth:2});let h=20,i=20,a=0,g=1,d=1;const C=150;let m=null;return e.definePlugin({name:t.name??"smart-ring",hoverSelector:"[data-supermouse-color]",create:o=>{const c=e.createCircle(r.size(o.state),r.fill(o.state));return e.css(c,{zIndex:e.Layers.FOLLOWER,mixBlendMode:t.mixBlendMode??"difference",transition:"border-radius 0.2s ease",borderStyle:"solid",opacity:"0"}),c},onEnable(o,c){const z=r.size(o.state);h=z*.5,i=z*.5,a=0,g=1,d=1,clearTimeout(m??void 0),c.style.display="block",c.style.opacity="1",c.style.transition="border-radius 0.2s ease"},beforeDisable(o,c){const{x:z,y:f}=o.state.smooth;return c.style.transition=`opacity ${C}ms ease, transform ${C}ms ease`,c.style.opacity="0",e.setTransform(c,z,f,0,.2,.2),new Promise(S=>{m=setTimeout(()=>{c.style.transition="border-radius 0.2s ease",S()},C)})},update:(o,c,z)=>{if(c.style.display==="none")return;const f=z/1e3,S=r.size(o.state),x=o.state.shape;let n=S,u=S,y="50%",T=r.color(o.state);x?(n=x.width,u=x.height,y=`${x.borderRadius}px`):(o.state.isHover&&(n=r.hoverSize(o.state),u=r.hoverSize(o.state)),o.state.isDown&&(n*=.9,u*=.9)),o.state.interaction.color&&(T=o.state.interaction.color),h=e.damp(h,n,20,f),i=e.damp(i,u,20,f),e.css(c,{width:`${h}px`,height:`${i}px`,borderRadius:y,borderColor:T,backgroundColor:r.fill(o.state),borderWidth:`${r.borderWidth(o.state)}px`,opacity:"1"});let b=0,v=1,p=1;if(!x&&t.enableSkew&&!o.state.reducedMotion){const{displacement:A}=o.state,w=e.effects.getVelocityDistortion(A.x,A.y);b=w.rotation,v=w.scaleX,p=w.scaleY;const $=1-Math.exp(-20*f);a=e.lerpAngle(a,b,$)}else a=0;g=e.damp(g,v,20,f),d=e.damp(d,p,20,f);const{x:l,y:s}=o.state.smooth;e.setTransform(c,l,s,a,g,d)}},t)},Y=(t={})=>{const r=t.count??30,h=t.decay??2.5,i=t.frequency??10,a=t.scatter??5,g=e.normalize(t.color,"#ff00ff"),d=[];let C=0,m=0,o=!1,c=0;const z=(f,S,x)=>{const n=d.find(b=>!b.isActive);if(!n)return;n.isActive=!0,n.life=1,n.x=f+e.math.random(-a,a),n.y=S+e.math.random(-a,a);const u=e.math.random(0,Math.PI*2),y=e.math.random(.5,1.5);n.vx=Math.cos(u)*y,n.vy=Math.sin(u)*y,n.scale=e.math.random(.5,1.2),n.color=x;const T=e.math.random(2,5);e.css(n.el,{width:`${T}px`,height:`${T}px`,backgroundColor:x,opacity:"1"}),e.setTransform(n.el,n.x,n.y,0,n.scale,n.scale)};return e.definePlugin({name:t.name??"sparkles",create:()=>{const f=e.createActor("div");e.css(f,{zIndex:e.Layers.TRACE});for(let S=0;S<r;S++){const x=e.createCircle(0,"transparent");e.css(x,{opacity:"0",willChange:"transform, opacity"}),f.appendChild(x),d.push({el:x,isActive:!1,x:0,y:0,vx:0,vy:0,life:0,scale:1,color:""})}return f},update:(f,S,x)=>{const n=x/1e3,{x:u,y}=f.state.pointer;o||(C=u,m=y,o=!0);const T=u-C,b=y-m,v=Math.hypot(T,b);if(c+=v,c>i){const p=g(f.state),l=Math.floor(c/i);for(let s=0;s<l;s++){const A=s/l;z(C+T*A,m+b*A,p)}c=c%i}C=u,m=y;for(let p=0;p<r;p++){const l=d[p];if(l.isActive)if(l.x+=l.vx*n*60,l.y+=l.vy*n*60,l.life-=h*n,l.life<=0)l.isActive=!1,e.css(l.el,{opacity:"0"});else{const s=l.scale*l.life;e.css(l.el,{opacity:String(l.life)}),e.setTransform(l.el,l.x,l.y,0,s,s)}}},destroy:()=>{d.length=0}},t)};function q(t,r){return r?t+" ":t}let B=0;const G=(t={})=>{let r,h,i,a,g,d;const C=`supermouse-text-ring-path-${B++}`,m=e.normalizeAll(t,{text:"SUPERMOUSE • SUPERMOUSE • ",radius:60,fontSize:12,speed:30,opacity:1,color:"currentColor"}),o=t.className??"",c=t.spread??!0;let z=0,f="",S=0,x=0;return e.definePlugin({name:t.name??"text-ring",hoverSelector:"[data-supermouse-text-ring]",create:n=>{const u=e.createActor("div");e.css(u,{zIndex:e.Layers.FOLLOWER,transition:"opacity 0.2s ease",opacity:"1",width:"0px",height:"0px",overflow:"visible",display:"flex",alignItems:"center",justifyContent:"center"}),o&&u.classList.add(...o.split(" ").filter(Boolean)),r=e.createSVGElement("svg"),e.css(r,{overflow:"visible",position:"absolute",left:"0",top:"0"}),h=e.path(void 0,{id:C,fill:"none"});const y=m.fontSize(n.state);return x=y,a=e.text({"font-size":`${y}px`,fill:"currentColor"}),e.css(a,{textTransform:"uppercase",letterSpacing:"2px"}),i=e.textPath(`#${C}`,{startOffset:"0%"}),g=document.createTextNode(""),i.appendChild(g),a.appendChild(i),r.appendChild(h),r.appendChild(a),d=e.createSVGElement("text"),e.css(d,{visibility:"hidden",position:"absolute",pointerEvents:"none",whiteSpace:"nowrap"}),d.setAttribute("font-size",`${y}px`),d.setAttribute("font-family",getComputedStyle(a).fontFamily||"sans-serif"),d.setAttribute("font-weight",getComputedStyle(a).fontWeight||"normal"),d.setAttribute("font-style",getComputedStyle(a).fontStyle||"normal"),r.appendChild(d),u.appendChild(r),u},update:(n,u,y)=>{const T=y/1e3;let b=m.text(n.state);const v=m.radius(n.state),p=m.fontSize(n.state),l=m.speed(n.state),s=m.opacity(n.state),A=m.color(n.state);e.css(u,{color:A,opacity:String(s)});const w=n.state.interaction;if(w.textRing&&typeof w.textRing=="string"?b=w.textRing:w.text&&typeof w.text=="string"&&(b=w.text),v!==S){h.setAttribute("d",e.circlePath(v));const M=v*2;e.css(r,{width:`${M}px`,height:`${M}px`}),S=v}const $=q(b,c);if(p!==x&&(a.setAttribute("font-size",`${p}px`),d.setAttribute("font-size",`${p}px`),x=p),$!==f&&(g.textContent=$,f=$),c){const M=e.circumference(v);d.textContent=$;const j=d.getComputedTextLength(),D=$.length;if(D>1){const E=(M-j)/(D-1);e.css(a,{letterSpacing:`${E}px`})}else e.css(a,{letterSpacing:"0px"});a.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust")}else e.css(a,{letterSpacing:"2px"}),a.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust");z+=l*T;const{x:I,y:W}=n.state.smooth;e.setTransform(u,I,W,z)}},t)};L.SmartIcon=N,L.SmartRing=X,L.Sparkles=Y,L.TextRing=G,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@supermousejs/labs",
|
|
3
|
-
"version": "2.4.4-beta.
|
|
3
|
+
"version": "2.4.4-beta.5",
|
|
4
4
|
"main": "dist/index.umd.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"description": "Experimentental state machines and effects for supermouse",
|
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
"url": "https://github.com/Whitestar14/supermouse-js",
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@supermousejs/utils": "2.4.4-beta.
|
|
17
|
+
"@supermousejs/utils": "2.4.4-beta.5"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@supermousejs/core": "2.5.0-beta.
|
|
20
|
+
"@supermousejs/core": "2.5.0-beta.5"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@supermousejs/core": "2.5.0-beta.
|
|
23
|
+
"@supermousejs/core": "2.5.0-beta.5"
|
|
24
24
|
},
|
|
25
25
|
"repository": {
|
|
26
26
|
"type": "git",
|