@supermousejs/trail 2.3.0 → 2.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @supermousejs/trail
 
-Generates a procedural particle trail that follows the cursor.
+Generates procedural particles that trail behind your motion
 
 ## Installation
 
@@ -8,23 +8,27 @@ Generates a procedural particle trail that follows the cursor.
 pnpm add @supermousejs/trail
 ```
 
-## Usage
+## Trail
+
+Generates procedural particles that trail behind your motion.
+
+### Usage
 
 ```ts
 import { Supermouse } from "@supermousejs/core";
 import { Trail } from "@supermousejs/trail";
-
 const app = new Supermouse();
-
-app.use(
-  Trail({
-    length: 10, // Number of segments
-    size: 6, // Particle size
-    color: "#ff00ff"
-  })
-);
+app.use(Trail({ length: 12, color: '#f0f' }));
 ```
 
+### Options
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| length | number | 10 | Number of trail segments. |
+| size | number | 6 | Size of trail particles. |
+| color | string | '#ff00ff' | Color of segments. |
+
 ## Documentation
 
 Full documentation and interactive playground available at [supermouse](https://supermouse.js.org) or [check out the repo](https://github.com/Whitestar14/supermouse-js).

package/dist/index.mjs

@@ -1,32 +1,36 @@
-import { normalize as d, definePlugin as p, dom as o, Layers as z } from "@supermousejs/utils";
-const C = (s = {}) => {
-  const l = s.length || 10, f = d(s.size, 6), m = d(s.color, "#ff00ff"), a = [], n = [];
+import { normalize as f, definePlugin as p, dom as r, Layers as z } from "@supermousejs/utils";
+const b = (o = {}) => {
+  const c = o.length || 10, g = f(o.size, 6), m = f(o.color, "#ff00ff"), a = [], s = [];
   return p(
     {
-      name: s.name || "trail",
+      name: o.name || "trail",
       create: () => {
-        a.length = 0, n.length = 0;
-        const t = o.createActor("div");
+        a.length = 0, s.length = 0;
+        const t = r.createActor("div");
         t.style.zIndex = z.TRACE;
-        for (let r = 0; r < l; r++) {
-          const e = o.createCircle(0, "#000");
-          e.style.position = "absolute", e.style.opacity = String(1 - r / l), t.appendChild(e), a.push(e), n.push({ x: -100, y: -100 });
+        for (let n = 0; n < c; n++) {
+          const e = r.createCircle(0, "#000");
+          e.style.position = "absolute", e.style.opacity = String(1 - n / c), t.appendChild(e), a.push(e), s.push({ x: -100, y: -100 });
         }
         return t;
       },
       update: (t) => {
-        const { x: r, y: e } = t.state.smooth;
-        n.pop(), n.unshift({ x: r, y: e });
-        const u = f(t.state), g = m(t.state);
-        a.forEach((c, i) => {
-          const h = n[i], x = 1 - i / l, y = u * x;
-          o.setStyle(c, "width", `${y}px`), o.setStyle(c, "height", `${y}px`), o.setStyle(c, "backgroundColor", g), o.setTransform(c, h.x, h.y);
+        const { x: n, y: e } = t.state.smooth;
+        s.pop(), s.unshift({ x: n, y: e });
+        const u = g(t.state), y = m(t.state);
+        a.forEach((l, i) => {
+          const h = s[i], x = 1 - i / c, d = u * x;
+          r.css(l, {
+            width: `${d}px`,
+            height: `${d}px`,
+            backgroundColor: y
+          }), r.setTransform(l, h.x, h.y);
         });
       }
     },
-    s
+    o
   );
 };
 export {
-  C as Trail
+  b as Trail
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SupermouseTrail={},t.SupermouseUtils))})(this,(function(t,e){"use strict";const u=(s={})=>{const d=s.length||10,h=e.normalize(s.size,6),y=e.normalize(s.color,"#ff00ff"),a=[],r=[];return e.definePlugin({name:s.name||"trail",create:()=>{a.length=0,r.length=0;const o=e.dom.createActor("div");o.style.zIndex=e.Layers.TRACE;for(let c=0;c<d;c++){const n=e.dom.createCircle(0,"#000");n.style.position="absolute",n.style.opacity=String(1-c/d),o.appendChild(n),a.push(n),r.push({x:-100,y:-100})}return o},update:o=>{const{x:c,y:n}=o.state.smooth;r.pop(),r.unshift({x:c,y:n});const p=h(o.state),S=y(o.state);a.forEach((i,l)=>{const f=r[l],g=1-l/d,m=p*g;e.dom.setStyle(i,"width",`${m}px`),e.dom.setStyle(i,"height",`${m}px`),e.dom.setStyle(i,"backgroundColor",S),e.dom.setTransform(i,f.x,f.y)})}},s)};t.Trail=u,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SupermouseTrail={},t.SupermouseUtils))})(this,(function(t,e){"use strict";const m=(s={})=>{const i=s.length||10,h=e.normalize(s.size,6),p=e.normalize(s.color,"#ff00ff"),d=[],r=[];return e.definePlugin({name:s.name||"trail",create:()=>{d.length=0,r.length=0;const o=e.dom.createActor("div");o.style.zIndex=e.Layers.TRACE;for(let c=0;c<i;c++){const n=e.dom.createCircle(0,"#000");n.style.position="absolute",n.style.opacity=String(1-c/i),o.appendChild(n),d.push(n),r.push({x:-100,y:-100})}return o},update:o=>{const{x:c,y:n}=o.state.smooth;r.pop(),r.unshift({x:c,y:n});const y=h(o.state),g=p(o.state);d.forEach((a,l)=>{const u=r[l],x=1-l/i,f=y*x;e.dom.css(a,{width:`${f}px`,height:`${f}px`,backgroundColor:g}),e.dom.setTransform(a,u.x,u.y)})}},s)};t.Trail=m,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@supermousejs/trail",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "description": "Generates procedural particles that trail behind your motion",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "author": "O.S David",
   "url": "https://github.com/Whitestar14/supermouse-js",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.3.0"
+    "@supermousejs/utils": "2.4.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "repository": {
     "type": "git",

package/CHANGELOG.md

@@ -1,96 +0,0 @@
-# @supermousejs/trail
-
-## 2.3.0
-
-### Patch Changes
-
-- Updated dependencies [f6f44b2]
-  - @supermousejs/core@2.2.0
-  - @supermousejs/utils@2.3.0
-
-## 2.2.1
-
-### Patch Changes
-
-- a72f5a3: bugfix: fixed a type declaration issue from missing `return` keyword with the Trail package export
-
-## 2.2.0
-
-### Patch Changes
-
-- 6d70c18: remove legacy package and update supermouse domain in readme
-- 14fb5b6: Updated tsconfig to be reference-compliant with core, utils and zoetrope when required
-- Updated dependencies [6d70c18]
-- Updated dependencies [2590af3]
-- Updated dependencies [14fb5b6]
-- Updated dependencies [9fe1a7b]
-- Updated dependencies [9fa6ece]
-  - @supermousejs/core@2.1.0
-  - @supermousejs/utils@2.2.0
-
-## 2.1.1
-
-### Patch Changes
-
-- 67f771b: Add relevant npm metadata to package.json file
-- Updated dependencies [67f771b]
-  - @supermousejs/utils@2.1.1
-  - @supermousejs/core@2.0.5
-
-## 2.1.0
-
-### Minor Changes
-
-- 0a1652d: fixed build architecture and updated plugin metadata
-
-### Patch Changes
-
-- Updated dependencies [0a1652d]
-  - @supermousejs/utils@2.1.0
-
-## 2.0.4
-
-### Patch Changes
-
-- 993dc67: Updated supemousejs packages with proper author, license and url descriptors to repo
-- Updated dependencies [993dc67]
-  - @supermousejs/utils@2.0.4
-  - @supermousejs/core@2.0.4
-
-## 2.0.3
-
-### Patch Changes
-
-- Updated dependencies
-  - @supermousejs/core@2.0.3
-  - @supermousejs/utils@2.0.3
-
-## 2.0.2
-
-### Patch Changes
-
-- ae219a0: Update READMEs with correct link to documentation
-- Updated dependencies [ae219a0]
-  - @supermousejs/utils@2.0.2
-  - @supermousejs/core@2.0.2
-
-## 2.0.1
-
-### Patch Changes
-
-- Add minimal README.md files to packages
-- Updated dependencies
-  - @supermousejs/utils@2.0.1
-  - @supermousejs/core@2.0.1
-
-## 2.0.0
-
-### Major Changes
-
-- Initial v2.0.0 release
-
-### Patch Changes
-
-- Updated dependencies
-  - @supermousejs/utils@2.0.0
-  - @supermousejs/core@2.0.0

package/meta.json

@@ -1,32 +0,0 @@
-{
-  "id": "trail",
-  "name": "Trail",
-  "package": "@supermousejs/trail",
-  "description": "Generates procedural particles that trail behind your motion.",
-  "code": "app.use(Trail({ length: 12, color: '#f0f' }));",
-  "recipeId": "ghost-trail",
-  "icon": "trail",
-  "options": [
-    {
-      "name": "length",
-      "type": "number",
-      "default": "10",
-      "description": "Number of trail segments.",
-      "reactive": false
-    },
-    {
-      "name": "size",
-      "type": "number",
-      "default": "6",
-      "description": "Size of trail particles.",
-      "reactive": true
-    },
-    {
-      "name": "color",
-      "type": "string",
-      "default": "'#ff00ff'",
-      "description": "Color of segments.",
-      "reactive": true
-    }
-  ]
-}

package/src/index.ts

@@ -1,66 +0,0 @@
-import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
-import { definePlugin, normalize, dom, Layers } from "@supermousejs/utils";
-
-export interface TrailOptions {
-  name?: string;
-  isEnabled?: boolean;
-  length?: number;
-  size?: ValueOrGetter<number>;
-  color?: ValueOrGetter<string>;
-}
-
-export const Trail = (options: TrailOptions = {}) => {
-  const length = options.length || 10;
-  const getSize = normalize(options.size, 6);
-  const getColor = normalize(options.color, "#ff00ff");
-
-  const segments: HTMLDivElement[] = [];
-  const history: { x: number; y: number }[] = [];
-
-  return definePlugin<HTMLDivElement, TrailOptions>(
-    {
-      name: options.name || "trail",
-
-      create: () => {
-        segments.length = 0;
-        history.length = 0;
-        const container = dom.createActor("div") as HTMLDivElement;
-        container.style.zIndex = Layers.TRACE;
-
-        for (let i = 0; i < length; i++) {
-          const d = dom.createCircle(0, "#000");
-          d.style.position = "absolute";
-          d.style.opacity = String(1 - i / length);
-          container.appendChild(d);
-          segments.push(d);
-          history.push({ x: -100, y: -100 });
-        }
-        return container;
-      },
-
-      update: (app: Supermouse) => {
-        const { x, y } = app.state.smooth;
-
-        // Shift history
-        history.pop();
-        history.unshift({ x, y });
-
-        const baseSize = getSize(app.state);
-        const color = getColor(app.state);
-
-        segments.forEach((seg, i) => {
-          const pos = history[i];
-          const scale = 1 - i / length;
-          const size = baseSize * scale;
-
-          dom.setStyle(seg, "width", `${size}px`);
-          dom.setStyle(seg, "height", `${size}px`);
-          dom.setStyle(seg, "backgroundColor", color);
-
-          dom.setTransform(seg, pos.x, pos.y);
-        });
-      }
-    },
-    options
-  );
-};

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.plugin.json",
-  "include": ["src"]
-}

package/vite.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-import path from "path";
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, "src/index.ts"),
-      name: "SupermouseTrail",
-      fileName: (format) => (format === "es" ? "index.mjs" : "index.umd.js")
-    },
-    rollupOptions: {
-      external: ["@supermousejs/core", "@supermousejs/utils"],
-      output: {
-        globals: {
-          "@supermousejs/core": "SupermouseCore",
-          "@supermousejs/utils": "SupermouseUtils"
-        }
-      }
-    }
-  },
-  plugins: [dts({ rollupTypes: true })]
-});