dsssp - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/index.d.ts

@@ -40,2 +40,9 @@ import { CSSProperties } from 'react';
 
+/**
+ * Renders a composite frequency response curve by combining multiple filter responses.
+ * Uses magnitude caching to optimize performance when filters change.
+ *
+ * Supports custom styling through color, opacity and line width props.
+ * For better performance with many filters, adjust resolutionFactor.
+ */
 export declare const CompositeCurve: ({ filters, dotted, color, opacity, lineWidth, resolutionFactor }: CompositeCurveProps) => JSX_2.Element;
@@ -45,7 +52,7 @@
     /**
-     * Array of filters to combine for the final composite curve
+     * Array of filters to combine into a single frequency response curve
      */
     filters: GraphFilter[];
     /**
-     * Dotted curve style
+     * Whether to render the curve with a dotted/dashed line style
      * @default false
@@ -71,4 +78,4 @@ */
      * Adjusts the resolution of the curve by reducing the number of points based on the graph's width.
-     *
-     * Calculations of the composite curve are expensive, so use this prop to optimize performance if more than 10 filters applied.
+     * Lower values = more points = smoother curve but slower performance.
+     * Recommended to increase this value when rendering more than 10 filters.
      * @default 2
@@ -99,7 +106,12 @@ */
 /**
- * This component renders the frequency response curve of a given filter on the graph.
- * It displays the filter's shape and can optionally show a vertical pin to connect it with specific types of `FilterPoint`'s, such as `NOTCH`, `LOWPASS`, `HIGHPASS`.
+ * Renders a frequency response curve for a single filter.
+ * Visualizes filter's magnitude response and provides interactive controls
+ * when used with FilterPoint component.
  *
- * Uses `defaultColor` from the theme as a fallback when filter colors are not specified. `BYPASS` curve automatically fallbacks to `zeroPoint.color` from the theme.
- */
+ * Features:
+ * - BiQuad coefficient calculation
+ * - Active state support
+ * - Optional vertical pin
+ * - Performance optimization
+ **/
 export declare const FilterCurve: ({ filter, color, index, lineWidth, opacity, resolutionFactor, gradientId, showPin, showBypass, active, activeColor, activeLineWidth, activeOpacity, onVarsChange }: FilterCurveProps) => JSX_2.Element | null;
@@ -109,11 +121,15 @@
     /**
-     * Filter to render
+     * Filter parameters object defining type, frequency, gain and Q values
      */
     filter: GraphFilter;
     /**
-     * Index of the color in the theme colors array to use if no `color` prop is provided
+     * Index in the theme colors array. Used for consistent coloring across
+     * multiple filters when no explicit color is provided
+     * @default -1
      */
     index?: number;
     /**
-     * Show vertical pin to connect the curve to its FilterPoint
+     * Renders a vertical pin connecting the curve to its corresponding FilterPoint
+     * Useful for NOTCH, LOWPASS, and HIGHPASS filter types
+     * @default false
      */
@@ -123,3 +139,2 @@ showPin?: boolean;
      * Show Bypass curve
-     *
      * For most use cases showing zero curve is not necessary
@@ -131,2 +146,3 @@ * @default false
      * Active state (trigger it to highlight the curve along with hovered FilterPoint)
+     * @default false
      */
@@ -166,2 +182,3 @@ active?: boolean;
      * Adjusts the resolution of the curve by reducing the number of points based on the graph's width.
+     * Lower values = more points = smoother curve but slower performance.
      * @default 2
@@ -171,6 +188,12 @@ */
     /**
+     * Optional gradient ID to fill the curve with a gradient.
+     * The gradient must be defined elsewhere in the SVG.
+     * @default undefined
+     */
+    gradientId?: string;
+    /**
      * Callback invoked when the BiQuad parameters for the specified filter index change.
-     *
-     * @param index The index of the filter whose parameters changed.
-     * @param vars The newly calculated BiQuad function parameters for the filter.
+     * Useful for syncing filter parameters with Web Audio API nodes.
+     * @param index - The index of the filter whose parameters changed
+     * @param vars - The newly calculated BiQuad function parameters for the filter
      */
@@ -180,2 +203,7 @@ onVarsChange?: (index: number, vars: BiQuadCoefficients) => void;
 
+/**
+ * Creates a linear gradient for filter curve fills.
+ * Gradient direction automatically adjusts based on filter gain.
+ * Used in conjunction with FilterCurve component.
+ */
 export declare const FilterGradient: ({ id, filter, index, opacity, color, fill }: FilterGradientProps) => JSX_2.Element;
@@ -217,11 +245,41 @@
 
+/**
+ * Renders filter type icons using custom font symbols.
+ * Icons automatically adjust their appearance based on filter gain.
+ */
 export declare const FilterIcon: ({ color, size, gain, type, filter, className, ...style }: FilterIconProps) => JSX_2.Element;
 
 export declare type FilterIconProps = {
+    /**
+     * Filter type to display
+     * Can be provided directly or via filter prop
+     */
     type?: FilterType;
+    /**
+     * Filter gain value to adjust icon appearance
+     * Can be provided directly or via filter prop
+     */
     gain?: number;
+    /**
+     * Filter object containing type and gain
+     * Alternative to providing type and gain separately
+     */
     filter?: GraphFilter;
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
     size?: number;
+    /**
+     * Icon color
+     * @default '#FFFFFF'
+     */
     color?: string;
+    /**
+     * Additional CSS styles
+     */
     style?: CSSProperties;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
@@ -241,3 +299,13 @@ };
 /**
+ * Interactive control point for filter parameters manipulation.
+ * Provides drag-and-drop frequency/gain control and Q-factor adjustment via mouse wheel.
+ *
+ * Features:
+ * - Horizontal/vertical dragging
+ * - Mouse wheel Q control
+ * - Multiple states (hover, drag, active)
+ * - Optional filter type icon or custom label
+ *
  * Uses `defaultColor` from the theme as a fallback when filter colors are not specified.
+ *
  */
@@ -247,29 +315,140 @@ export declare const FilterPoint: ({ filter, index, dragX, dragY, wheelQ, active, showIcon, label, labelFontSize, labelFontFamily, labelColor, radius, lineWidth, color, zeroColor, dragColor, activeColor, background, zeroBackground, dragBackground, activeBackground, backgroundOpacity, dragBackgroundOpacity, activeBackgroundOpacity, onChange, onEnter, onLeave, onDrag }: FilterPointProps) => JSX_2.Element | null;
 export declare type FilterPointProps = {
+    /**
+     * Filter parameters object defining type, frequency, gain and Q values
+     */
     filter: GraphFilter;
+    /**
+     * Index in the theme colors array
+     * @default -1
+     */
     index?: number;
+    /**
+     * Enable horizontal (frequency) dragging
+     * @default true
+     */
     dragX?: boolean;
+    /**
+     * Enable vertical (gain) dragging
+     * @default true
+     */
     dragY?: boolean;
+    /**
+     * Enable Q adjustment with mouse wheel
+     * @default true
+     */
     wheelQ?: boolean;
+    /**
+     * Point radius in pixels
+     * @default theme.point.radius
+     */
     radius?: number;
+    /**
+     * Manual active/hover state
+     * @default false
+     */
     active?: boolean;
+    /**
+     * Point stroke width
+     * @default theme.point.lineWidth
+     */
     lineWidth?: number;
+    /**
+     * Show filter type icon instead of label
+     * @default false
+     */
     showIcon?: boolean;
+    /**
+     * Custom label text
+     * @default ''
+     */
     label?: string;
+    /**
+     * Label font family
+     * @default theme.point.label.fontFamily
+     */
     labelFontFamily?: string;
+    /**
+     * Label font size in pixels
+     * @default theme.point.label.fontSize
+     */
     labelFontSize?: number;
+    /**
+     * Label text color
+     * @default theme.point.label.color
+     */
     labelColor?: CSSProperties['color'];
+    /**
+     * Point stroke color
+     * @default theme.colors[index].point || theme.filters.defaultColor
+     */
     color?: CSSProperties['color'];
+    /**
+     * Point stroke color when gain is zero
+     * @default theme.filters.zeroPoint.color
+     */
     zeroColor?: CSSProperties['color'];
+    /**
+     * Point stroke color while dragging
+     * @default theme.colors[index].drag || color
+     */
     dragColor?: CSSProperties['color'];
+    /**
+     * Point stroke color when active/hovered
+     * @default theme.colors[index].active || color
+     */
     activeColor?: CSSProperties['color'];
+    /**
+     * Point fill color
+     * @default theme.colors[index].background || color
+     */
     background?: CSSProperties['color'];
+    /**
+     * Point fill color when gain is zero
+     * @default theme.filters.zeroPoint.background
+     */
     zeroBackground?: CSSProperties['color'];
+    /**
+     * Point fill color while dragging
+     * @default theme.colors[index].drag || background
+     */
     dragBackground?: CSSProperties['color'];
+    /**
+     * Point fill color when active/hovered
+     * @default theme.colors[index].activeBackground || background
+     */
     activeBackground?: CSSProperties['color'];
+    /**
+     * Point fill opacity
+     * @default theme.point.backgroundOpacity.normal
+     */
     backgroundOpacity?: CSSProperties['opacity'];
+    /**
+     * Point fill opacity while dragging
+     * @default theme.point.backgroundOpacity.drag
+     */
     dragBackgroundOpacity?: CSSProperties['opacity'];
+    /**
+     * Point fill opacity when active/hovered
+     * @default theme.point.backgroundOpacity.active
+     */
     activeBackgroundOpacity?: CSSProperties['opacity'];
+    /**
+     * Called when filter parameters change during drag
+     * @param filterEvent Updated filter parameters with index
+     */
     onChange?: (filterEvent: FilterChangeEvent) => void;
+    /**
+     * Called when mouse enters the point
+     * @param filterEvent Current filter parameters with index
+     */
     onEnter?: (filterEvent: FilterChangeEvent) => void;
+    /**
+     * Called when mouse leaves the point
+     * @param filterEvent Current filter parameters with index
+     */
     onLeave?: (filterEvent: FilterChangeEvent) => void;
+    /**
+     * Called when drag state changes
+     * @param dragState True when dragging starts, false when it ends
+     */
     onDrag?: (dragState: boolean) => void;
@@ -301,4 +480,8 @@ };
 /**
- * This component renders the given curve described as an array of Magnitudes on the graph.
- * It is the basic curve component used internally to render the `CompositeCurve` and `FilterCurve`. It can be used to render custom curves as well.
+ * Renders a frequency response curve from an array of magnitude values.
+ * This is the basic curve component used internally by `CompositeCurve` and `FilterCurve`.
+ * Can also be used directly to render custom frequency response curves.
+ *
+ * Uses `theme.curve` values as defaults for styling when color/opacity/width are not specified.
+ * Supports optional gradient fills and dotted line styles.
  */
@@ -308,9 +491,30 @@ export declare const FrequencyResponseCurve: ({ magnitudes, dotted, color, opacity, lineWidth, gradientId }: FrequencyResponseCurveProps) => JSX_2.Element;
 export declare type FrequencyResponseCurveProps = {
+    /**
+     * Array of magnitude values defining the curve shape
+     */
     magnitudes: Magnitude[];
-    color?: string;
+    /**
+     * Color override for the curve stroke
+     * @default theme.curve.color
+     */
+    color?: CSSProperties['color'];
+    /**
+     * Opacity override for the curve stroke
+     * @default theme.curve.opacity
+     */
     opacity?: CSSProperties['opacity'];
+    /**
+     * Line width override for the curve stroke
+     * @default theme.curve.width
+     */
     lineWidth?: number;
+    /**
+     * Whether to render the curve with a dotted/dashed line style
+     * @default false
+     */
     dotted?: boolean;
     /**
-     * Gradient Id to fill the curve with a gradient
+     * Optional gradient ID to fill the curve with a gradient
+     * The gradient must be defined elsewhere in the SVG
+     * @default ''
      */
@@ -320,9 +524,34 @@ gradientId?: string;
 
-export declare const FrequencyResponseGraph: default_2.ForwardRefExoticComponent<{
+/**
+ * This component renders a frequency response graph with customizable dimensions, scaling and theming.
+ * It provides the base SVG container and context for rendering filter curves, points and other graph elements.
+ *
+ * Uses deep merge to combine default theme/scale with provided overrides. Arrays are completely replaced rather than merged.
+ */
+export declare const FrequencyResponseGraph: default_2.ForwardRefExoticComponent<FrequencyResponseGraphProps & default_2.RefAttributes<SVGSVGElement>>;
+
+export declare type FrequencyResponseGraphProps = {
+    /**
+     * Width of the SVG element in pixels
+     */
     width: number;
+    /**
+     * Height of the SVG element in pixels
+     */
     height: number;
+    /**
+     * Scale configuration to override default frequency and gain ranges
+     * @default defaultScale
+     */
     scale?: Partial<GraphScale>;
+    /**
+     * Theme override for colors and styles
+     * @default defaultTheme
+     */
     theme?: GraphThemeOverride;
+    /**
+     * Child components to render inside the graph
+     */
     children?: default_2.ReactNode;
-} & default_2.RefAttributes<SVGSVGElement>>;
+};
 
@@ -507,9 +736,33 @@ export declare const GainIcon: (props: FilterTypedIconProps) => JSX_2.Element;
 
+/**
+ * Displays frequency and gain values at the current pointer position.
+ * Shows crosshair guides and value labels that follow the pointer.
+ **/
 export declare const PointerTracker: ({ lineWidth, lineColor, labelColor, backgroundColor, gainPrecision }: PointerTrackerProps) => JSX_2.Element | null;
 
 export declare type PointerTrackerProps = {
+    /**
+     * Width of the crosshair guide lines
+     * @default theme.background.tracker.lineWidth
+     */
     lineWidth?: number;
+    /**
+     * Color of the crosshair guide lines
+     * @default theme.background.tracker.lineColor
+     */
     lineColor?: CSSProperties['color'];
+    /**
+     * Color of the frequency and gain labels
+     * @default theme.background.tracker.labelColor
+     */
     labelColor?: CSSProperties['color'];
+    /**
+     * Background color of label containers
+     * @default theme.background.tracker.backgroundColor
+     */
     backgroundColor?: CSSProperties['color'];
+    /**
+     * Number of decimal places for gain value display
+     * @default 1
+     */
     gainPrecision?: number;
@@ -516,0 +769,0 @@ };

dist/index.js

@@ -341,7 +341,3 @@ import React, { useState, useCallback, useMemo, useEffect, useRef, forwardRef, useImperativeHandle, createContext, useContext } from 'react';
 };
-const limitRange = (value, min, max) => {
-  if (value < min) return min;
-  if (value > max) return max;
-  return value;
-};
+const limitRange = (value, min, max) => Math.min(Math.max(value, min), max);
 
@@ -348,0 +344,0 @@ const defaultScale = {

package.json

@@ -5,3 +5,3 @@ {
   "private": false,
-  "version": "0.3.1",
+  "version": "0.3.2",
   "author": "Oleksiy Strelets",
@@ -85,6 +85,6 @@ "license": "AGPL-3.0-only",
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.3",
+    "@chromatic-com/storybook": "^3.2.4",
     "@eslint/compat": "^1.2.5",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.18.0",
+    "@eslint/js": "^9.19.0",
     "@fontsource-variable/dm-sans": "^5.1.1",
@@ -94,19 +94,19 @@ "@fontsource-variable/reddit-mono": "^5.1.1",
     "@fontsource/monaspace-krypton": "^5.1.0",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/builder-vite": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
+    "@storybook/addon-actions": "^8.5.1",
+    "@storybook/addon-docs": "^8.5.1",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/blocks": "^8.5.1",
+    "@storybook/builder-vite": "^8.5.1",
+    "@storybook/manager-api": "^8.5.1",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-vite": "^8.5.1",
+    "@storybook/theming": "^8.5.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^22.10.6",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.10.10",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
@@ -118,3 +118,3 @@ "@vitest/coverage-v8": "^2.1.8",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
@@ -135,7 +135,7 @@ "eslint-plugin-jest-dom": "^5.5.0",
     "remark-gfm": "^4.0.0",
-    "storybook": "^8.4.7",
+    "storybook": "^8.5.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3",
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "vite-plugin-dts": "^4.5.0",
@@ -142,0 +142,0 @@ "vite-plugin-static-copy": "^2.2.0",

README.md

@@ -0,5 +1,8 @@
+![](assets/screenshot.png)
+
 # DSSSP
 
 [![npm latest package](https://img.shields.io/npm/v/dsssp/latest.svg)](https://www.npmjs.com/package/dsssp)
-[![npm license](https://img.shields.io/npm/l/dsssp)](LICENSE)
+[![npm downloads](https://img.shields.io/npm/dt/dsssp.svg)](https://www.npmjs.com/package/dsssp)
+[![gzipped](https://img.shields.io/bundlejs/size/dsssp)](https://www.npmjs.com/package/dsssp)
 
@@ -32,4 +35,4 @@ ## React Library for Audio Processing and Visualization
 
-### Contact
+## Contact
 
 If you have any questions, feedback, or would like to discuss commercial licensing, please reach out to the author at [[e-mail]](mailto:[e-mail]).

No alert changes

Improved metrics

Total package byte prevSize

177461

increased by4.29%

Lines of code

4104

increased by6.32%

Number of lines in readme file

38

increased by8.57%

No dependency changes