@supermousejs/pointer 2.0.1 → 2.1.0

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 CHANGED
@@ -1,5 +1,42 @@
1
1
  # @supermousejs/pointer
2
2
 
3
+ ## 2.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 0a1652d: fixed build architecture and updated plugin metadata
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [0a1652d]
12
+ - @supermousejs/utils@2.1.0
13
+
14
+ ## 2.0.4
15
+
16
+ ### Patch Changes
17
+
18
+ - 993dc67: Updated supemousejs packages with proper author, license and url descriptors to repo
19
+ - Updated dependencies [993dc67]
20
+ - @supermousejs/utils@2.0.4
21
+ - @supermousejs/core@2.0.4
22
+
23
+ ## 2.0.3
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies
28
+ - @supermousejs/core@2.0.3
29
+ - @supermousejs/utils@2.0.3
30
+
31
+ ## 2.0.2
32
+
33
+ ### Patch Changes
34
+
35
+ - ae219a0: Update READMEs with correct link to documentation
36
+ - Updated dependencies [ae219a0]
37
+ - @supermousejs/utils@2.0.2
38
+ - @supermousejs/core@2.0.2
39
+
3
40
  ## 2.0.1
4
41
 
5
42
  ### Patch Changes
package/README.md CHANGED
@@ -24,3 +24,7 @@ app.use(Pointer({
24
24
  returnToRest: true // Snap back when stopped
25
25
  }));
26
26
  ```
27
+
28
+ ## Documentation
29
+
30
+ Full documentation and interactive playground available at [supermouse](https://supermouse.vercel.app) or [check out the repo](https://github.com/Whitestar14/supermouse-js).
package/package.json CHANGED
@@ -1,15 +1,21 @@
1
1
  {
2
2
  "name": "@supermousejs/pointer",
3
- "version": "2.0.1",
3
+ "version": "2.1.0",
4
4
  "main": "dist/index.umd.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",
7
+ "author": "O.S David",
8
+ "url": "https://github.com/Whitestar14/supermouse-js",
9
+ "license": "MIT",
7
10
  "dependencies": {
8
- "@supermousejs/core": "2.0.1",
9
- "@supermousejs/utils": "2.0.1"
11
+ "@supermousejs/utils": "2.1.0"
12
+ },
13
+ "devDependencies": {
14
+ "@supermousejs/core": "2.0.4"
15
+ },
16
+ "peerDependencies": {
17
+ "@supermousejs/core": "2.0.4"
10
18
  },
11
- "devDependencies": {},
12
- "peerDependencies": {},
13
19
  "exports": {
14
20
  ".": {
15
21
  "types": "./dist/index.d.ts",
package/src/index.ts CHANGED
@@ -1,96 +1,96 @@
1
- import type { ValueOrGetter } from '@supermousejs/core';
2
- import { definePlugin, normalize, dom, math, Layers } from '@supermousejs/utils';
3
-
4
- export interface PointerOptions {
5
- name?: string;
6
- isEnabled?: boolean;
7
- size?: ValueOrGetter<number>;
8
- color?: ValueOrGetter<string>;
9
- svg?: string;
10
- rotationSmoothing?: number;
11
- restingAngle?: ValueOrGetter<number>;
12
- returnToRest?: ValueOrGetter<boolean>;
13
- restDelay?: ValueOrGetter<number>;
14
- opacity?: ValueOrGetter<number>;
15
- }
16
-
17
- const DEFAULT_SVG = `
18
- <svg viewBox="0 0 100 100" fill="currentColor" style="display: block; width: 100%; height: 100%;">
19
- <path d="M10 20 L90 50 L10 80 L25 50 Z" />
20
- </svg>
21
- `;
22
-
23
- export const Pointer = (options: PointerOptions = {}) => {
24
- const defSize = 32;
25
- const smoothing = options.rotationSmoothing || 0.15;
26
- const svgContent = options.svg || DEFAULT_SVG;
27
-
28
- const getSize = normalize(options.size, defSize);
29
- const getRestingAngle = normalize(options.restingAngle, -45);
30
- const getReturnToRest = normalize(options.returnToRest, true);
31
- const getRestDelay = normalize(options.restDelay, 200);
32
- const getOpacity = normalize(options.opacity, 1);
33
-
34
- let currentRotation = 0;
35
- let lastRotation = 0;
36
- let stopTime = 0;
37
-
38
- return definePlugin<HTMLDivElement, PointerOptions>({
39
- name: 'pointer',
40
-
41
- create: (app) => {
42
- const el = dom.createActor('div') as HTMLDivElement;
43
- el.style.zIndex = Layers.CURSOR;
44
- el.style.transformOrigin = 'center center';
45
-
46
- const restAngle = getRestingAngle(app.state);
47
- currentRotation = restAngle;
48
- lastRotation = restAngle;
49
-
50
- el.innerHTML = svgContent;
51
-
52
- return el;
53
- },
54
-
55
- styles: {
56
- color: 'color'
57
- },
58
-
59
- update: (app, el) => {
60
- const size = getSize(app.state);
61
- const restingAngle = getRestingAngle(app.state);
62
- const returnToRest = getReturnToRest(app.state);
63
- const restDelay = getRestDelay(app.state);
64
- const opacity = getOpacity(app.state);
65
-
66
- dom.setStyle(el, 'width', `${size}px`);
67
- dom.setStyle(el, 'height', `${size}px`);
68
- dom.setStyle(el, 'opacity', String(opacity));
69
-
70
- const { x: vx, y: vy } = app.state.velocity;
71
- const speed = math.dist(vx, vy);
72
- const now = performance.now();
73
-
74
- let targetRotation = lastRotation;
75
-
76
- if (speed > 1) {
77
- targetRotation = app.state.angle;
78
- lastRotation = targetRotation;
79
- stopTime = now;
80
- } else {
81
- if (returnToRest && (now - stopTime > restDelay)) {
82
- targetRotation = restingAngle;
83
- }
84
- }
85
-
86
- // Use core interpolation with shortest-path logic
87
- const isReturning = speed <= 1 && returnToRest && (now - stopTime > restDelay);
88
- const factor = isReturning ? 0.05 : smoothing;
89
-
90
- currentRotation = math.lerpAngle(currentRotation, targetRotation, factor);
91
-
92
- const { x, y } = app.state.smooth;
93
- dom.setTransform(el, x, y, currentRotation);
94
- }
95
- }, options);
1
+ import type { ValueOrGetter } from '@supermousejs/core';
2
+ import { definePlugin, normalize, dom, math, Layers } from '@supermousejs/utils';
3
+
4
+ export interface PointerOptions {
5
+ name?: string;
6
+ isEnabled?: boolean;
7
+ size?: ValueOrGetter<number>;
8
+ color?: ValueOrGetter<string>;
9
+ svg?: string;
10
+ rotationSmoothing?: number;
11
+ restingAngle?: ValueOrGetter<number>;
12
+ returnToRest?: ValueOrGetter<boolean>;
13
+ restDelay?: ValueOrGetter<number>;
14
+ opacity?: ValueOrGetter<number>;
15
+ }
16
+
17
+ const DEFAULT_SVG = `
18
+ <svg viewBox="0 0 100 100" fill="currentColor" style="display: block; width: 100%; height: 100%;">
19
+ <path d="M10 20 L90 50 L10 80 L25 50 Z" />
20
+ </svg>
21
+ `;
22
+
23
+ export const Pointer = (options: PointerOptions = {}) => {
24
+ const defSize = 32;
25
+ const smoothing = options.rotationSmoothing || 0.15;
26
+ const svgContent = options.svg || DEFAULT_SVG;
27
+
28
+ const getSize = normalize(options.size, defSize);
29
+ const getRestingAngle = normalize(options.restingAngle, -45);
30
+ const getReturnToRest = normalize(options.returnToRest, true);
31
+ const getRestDelay = normalize(options.restDelay, 200);
32
+ const getOpacity = normalize(options.opacity, 1);
33
+
34
+ let currentRotation = 0;
35
+ let lastRotation = 0;
36
+ let stopTime = 0;
37
+
38
+ return definePlugin<HTMLDivElement, PointerOptions>({
39
+ name: 'pointer',
40
+
41
+ create: (app) => {
42
+ const el = dom.createActor('div') as HTMLDivElement;
43
+ el.style.zIndex = Layers.CURSOR;
44
+ el.style.transformOrigin = 'center center';
45
+
46
+ const restAngle = getRestingAngle(app.state);
47
+ currentRotation = restAngle;
48
+ lastRotation = restAngle;
49
+
50
+ el.innerHTML = svgContent;
51
+
52
+ return el;
53
+ },
54
+
55
+ styles: {
56
+ color: 'color'
57
+ },
58
+
59
+ update: (app, el) => {
60
+ const size = getSize(app.state);
61
+ const restingAngle = getRestingAngle(app.state);
62
+ const returnToRest = getReturnToRest(app.state);
63
+ const restDelay = getRestDelay(app.state);
64
+ const opacity = getOpacity(app.state);
65
+
66
+ dom.setStyle(el, 'width', `${size}px`);
67
+ dom.setStyle(el, 'height', `${size}px`);
68
+ dom.setStyle(el, 'opacity', String(opacity));
69
+
70
+ const { x: vx, y: vy } = app.state.velocity;
71
+ const speed = math.dist(vx, vy);
72
+ const now = performance.now();
73
+
74
+ let targetRotation = lastRotation;
75
+
76
+ if (speed > 1) {
77
+ targetRotation = app.state.angle;
78
+ lastRotation = targetRotation;
79
+ stopTime = now;
80
+ } else {
81
+ if (returnToRest && (now - stopTime > restDelay)) {
82
+ targetRotation = restingAngle;
83
+ }
84
+ }
85
+
86
+ // Use core interpolation with shortest-path logic
87
+ const isReturning = speed <= 1 && returnToRest && (now - stopTime > restDelay);
88
+ const factor = isReturning ? 0.05 : smoothing;
89
+
90
+ currentRotation = math.lerpAngle(currentRotation, targetRotation, factor);
91
+
92
+ const { x, y } = app.state.smooth;
93
+ dom.setTransform(el, x, y, currentRotation);
94
+ }
95
+ }, options);
96
96
  };
package/tsconfig.json CHANGED
@@ -1,18 +1,18 @@
1
- {
2
- "extends": "../../tsconfig.base.json",
3
- "include": [
4
- "src"
5
- ],
6
- "compilerOptions": {
7
- "outDir": "dist",
8
- "baseUrl": ".",
9
- "paths": {
10
- "@supermousejs/core": [
11
- "../core/src/index.ts"
12
- ],
13
- "@supermousejs/utils": [
14
- "../utils/src/index.ts"
15
- ]
16
- }
17
- }
1
+ {
2
+ "extends": "../../tsconfig.base.json",
3
+ "include": [
4
+ "src"
5
+ ],
6
+ "compilerOptions": {
7
+ "outDir": "dist",
8
+ "baseUrl": ".",
9
+ "paths": {
10
+ "@supermousejs/core": [
11
+ "../core/src/index.ts"
12
+ ],
13
+ "@supermousejs/utils": [
14
+ "../utils/src/index.ts"
15
+ ]
16
+ }
17
+ }
18
18
  }
package/vite.config.ts CHANGED
@@ -1,22 +1,22 @@
1
- import { defineConfig } from 'vite';
2
- import dts from 'vite-plugin-dts';
3
- import path from 'path';
4
-
5
- export default defineConfig({
6
- build: {
7
- lib: {
8
- entry: path.resolve(__dirname, 'src/index.ts'),
9
- name: 'SupermousePointer',
10
- fileName: (format) => format === 'es' ? 'index.mjs' : 'index.umd.js',
11
- },
12
- rollupOptions: {
13
- external: ['@supermousejs/core', '@supermousejs/utils'],
14
- output: {
15
- globals: {
16
- '@supermousejs/core': 'SupermouseCore'
17
- , '@supermousejs/utils': 'SupermouseUtils'}
18
- }
19
- }
20
- },
21
- plugins: [dts({ rollupTypes: true })]
1
+ import { defineConfig } from 'vite';
2
+ import dts from 'vite-plugin-dts';
3
+ import path from 'path';
4
+
5
+ export default defineConfig({
6
+ build: {
7
+ lib: {
8
+ entry: path.resolve(__dirname, 'src/index.ts'),
9
+ name: 'SupermousePointer',
10
+ fileName: (format) => format === 'es' ? 'index.mjs' : 'index.umd.js',
11
+ },
12
+ rollupOptions: {
13
+ external: ['@supermousejs/core', '@supermousejs/utils'],
14
+ output: {
15
+ globals: {
16
+ '@supermousejs/core': 'SupermouseCore'
17
+ , '@supermousejs/utils': 'SupermouseUtils'}
18
+ }
19
+ }
20
+ },
21
+ plugins: [dts({ rollupTypes: true })]
22
22
  });