enr 2.0.0 → 2.0.2

package/es/components/ripples/RipplesEle.js

@@ -1,10 +1,8 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { isUndefined } from 'a-type-of-js';
-import { useRef, useImperativeHandle } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
 import { useRipples } from '../../customHooks/useRipples/index.js';
-import { Content } from './Content.js';
-import { useOptionUpdate } from './useOptionUpdate.js';
+import { ComponentContent } from './Content.js';
 
 /**
  *
@@ -23,9 +21,9 @@ import { useOptionUpdate } from './useOptionUpdate.js';
  * 使用：
  *
  * ```ts
- *  import { BackgroundRipple } from 'earthnut';
+ *  import { BackgroundRipple } from 'enr/';
  *  // 也可以全量导入
- *  // import { BackgroundRipple } from 'earthnut';
+ *  // import { BackgroundRipple } from 'enr';
  *  ...
  *  const animationFrameId = useAnimationFrame();
  *
@@ -36,41 +34,11 @@ import { useOptionUpdate } from './useOptionUpdate.js';
  *
  */
 const BackgroundRipple = ({ option, ...props }) => {
-    const { children, style, ref, ..._props } = props;
     /**  canvas 元素  */
     const canvas = useRef(null);
     /**  使用 ripples  */
     const ripplesRef = useRipples(canvas, option);
-    ///  使用 配置更新
-    useOptionUpdate(ripplesRef, option);
-    // 抛出事件 (自定义抛出事件)
-    useImperativeHandle(ref, () => ({
-        toggleState: () => ripplesRef.current?.changePlayingState() ?? false,
-        get state() {
-            return ripplesRef.current?.options.playingState ?? false;
-        },
-        pause() {
-            ripplesRef.current?.pause();
-        },
-        play() {
-            ripplesRef.current?.play();
-        },
-        set(options) {
-            if (isUndefined(options))
-                return;
-            const keys = Object.keys(options);
-            for (let i = 0, j = keys.length; i < j; i++) {
-                const key = keys[i];
-                ripplesRef.current?.set(key, options[key]);
-            }
-        },
-    }));
-    return (jsxs(Content, { style: {
-            backgroundRepeat: 'round',
-            // backgroundSize: 'cover',
-            // backgroundPosition: 'center',
-            ...style,
-        }, ..._props, children: [jsx("canvas", { ref: canvas, "data-earthnut-ui": "canvas", width: 0, height: 0 }), children] }));
+    return jsx(ComponentContent, { ripplesRef: ripplesRef, canvas: canvas, option: option, ...props });
 };
 BackgroundRipple.displayName = 'enr-background-ripple';
 

package/es/components/ripples/imperative-handle.js

@@ -0,0 +1,46 @@
+import { isUndefined } from 'a-type-of-js';
+import { defaultData } from '../../customHooks/useRipples/data-default.js';
+
+/**
+ * @module @enr/imperative-handle
+ * @file imperative-handle.ts
+ * @description 公共的命令句柄
+ * @author Mr.MudBean <Mr.MudBean@outlook.com>
+ * @license MIT
+ * @copyright 2026 ©️ Mr.MudBean
+ * @since 2026-02-04 06:52
+ * @version 2.0.1
+ * @lastModified 2026-02-04 07:57
+ */
+/**
+ * ## 通过函数构建公共的命令句柄
+ * @param ripplesRef
+ */
+function createImperativeHandle(ripplesRef) {
+    return () => ({
+        toggleState: () => ripplesRef.current?.changePlayingState() ?? false,
+        get state() {
+            return ripplesRef.current?.get('playingState') ?? false;
+        },
+        pause() {
+            ripplesRef.current?.pause();
+        },
+        play() {
+            ripplesRef.current?.play();
+        },
+        set(options) {
+            if (isUndefined(options))
+                return;
+            const keys = Object.keys(options);
+            for (let i = 0, j = keys.length; i < j; i++) {
+                const key = keys[i];
+                ripplesRef.current?.set(key, options[key]);
+            }
+        },
+        drop(x, y, options) {
+            ripplesRef.current?.drop(x, y, options?.radius ?? ripplesRef?.current.get('dropRadius') ?? defaultData.dropRadius, options?.strength ?? ripplesRef?.current?.get('perturbation') ?? 0.03);
+        },
+    });
+}
+
+export { createImperativeHandle };

package/es/components/ripples/{useOptionUpdate.js → use-option-update.js}

@@ -1,5 +1,6 @@
 import { isArray } from 'a-type-of-js';
 import { useRef, useEffect } from 'react';
+import { defaultDataKey } from '../../customHooks/useRipples/data-default.js';
 
 /**
  * 更新参数数据
@@ -13,7 +14,7 @@ function useOptionUpdate(ripplesRef, option) {
         if (!option || !ripplesRef.current) {
             return;
         }
-        Object.keys(ripplesRef.current.defaults).forEach(e => {
+        defaultDataKey.forEach(e => {
             /**  新的值  */
             const value = option[e];
             /**  测试值是否相等  */

package/es/customHooks/useAnimationFrame.js

@@ -11,7 +11,7 @@ import { useRef, useCallback, useEffect } from 'react';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-01 06:12
+ * @lastModified 2026-02-04 08:18
  */
 /**
  *
@@ -28,7 +28,7 @@ import { useRef, useCallback, useEffect } from 'react';
  * 使用：
  *
  * ```ts
- *  // import { useAnimationFrame } from 'earthnut';
+ *  // import { useAnimationFrame } from 'enr';
  *  ...
  *
  *  export function Home () {

package/es/customHooks/useInputIsComposing.js

@@ -10,7 +10,7 @@ import { useRef, useEffect } from 'react';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-01-24 11:23
+ * @lastModified 2026-02-04 08:19
  */
 /**
  *
@@ -27,7 +27,7 @@ import { useRef, useEffect } from 'react';
  * 使用：
  *
  * ```ts
- *  import { useInputIsComposing } from 'earthnut';
+ *  import { useInputIsComposing } from 'enr';
  *
  *  ...
  *  const inputRef = useRef<HTMLInputElement>(null);

package/es/customHooks/useRipples/class-build-background.js

@@ -12,7 +12,7 @@ import { createImageBySrc, isNoneBackGroundColor, extractUrl } from './tools.js'
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 14:17
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 17:35
+ * @lastModified 2026-02-05 17:41
  */
 /**
  * ## 构建背景
@@ -37,8 +37,7 @@ class BuildBackground {
      * ## 默认加载的首个背景色
      */
     get defaultColor() {
-        return this.elementMeta.isDark ? '#000000' : '#ffffff';
-        // return '#00000000';
+        return this.options.loadingBackgroundColor[Number(this.elementMeta.isDark)];
     }
     /**
      * ## 最后使用

package/es/customHooks/useRipples/class-event-action.js

@@ -1,7 +1,6 @@
 import { debounce, getRandomInt } from 'a-js-tools';
 
 /**
- * @packageDocumentation
  * @module @enr/class-event-action
  * @file class-event-action.ts
  * @description 交互事件
@@ -10,7 +9,7 @@ import { debounce, getRandomInt } from 'a-js-tools';
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-23 01:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 17:55
+ * @lastModified 2026-02-04 06:46
  */
 /**
  *
@@ -134,8 +133,8 @@ class EventAction {
     }
     /**
      *  触发滴落效果
-     * @param x
-     * @param y
+     * @param x 横坐标
+     * @param y 纵坐标
      * @param radius
      * @param strength
      */

package/es/customHooks/useRipples/class-param.js

@@ -1,4 +1,4 @@
-import { isBoolean, isUndefined } from 'a-type-of-js';
+import { isBoolean, isUndefined, isArray, isString } from 'a-type-of-js';
 import { defaultData } from './data-default.js';
 
 /**
@@ -11,7 +11,7 @@ import { defaultData } from './data-default.js';
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 02:40
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 14:08
+ * @lastModified 2026-02-05 19:20
  */
 /**
  * ## 传入参数
@@ -34,6 +34,8 @@ class RippleParam {
     firstDrawProgressStep = 12;
     /**  canvas 的显隐  */
     visible = false;
+    /** 初始化设定值，该值由用户设置，但不可修改 */
+    loadingBackgroundColor;
     // ++++++++++++++++++++++ 配置数据 《〈《〈《〈《 ++++++++++++++++++++++
     // ++++++++++++++++++++++ 》〉》〉》〉》 用户控制变量 ++++++++++++++++++++++
     // 这些变量通过 Ripple 类的 set 方法设定
@@ -183,6 +185,7 @@ class RippleParam {
         this.running = Boolean(options.playingState ?? true);
         this.crossOrigin = options.crossOrigin;
         this.darkMode = options.darkMode;
+        this.loadingBackgroundColor = this.getLoadingBg(options.loadingBackgroundColor);
     }
     /**
      * ## 切换最后一次执行的状态
@@ -190,6 +193,26 @@ class RippleParam {
     toggleLastRunningState() {
         this._lastRunningState = !this._lastRunningState;
     }
+    /**
+     * ## 获取初始化背景值
+     * @param _v 初始化的值
+     */
+    getLoadingBg(_v) {
+        if (isArray(_v)) {
+            const len = _v.length;
+            if (len === 1) {
+                const color = _v[0];
+                return [color, color];
+            }
+            else if (len === 2) {
+                return [..._v];
+            }
+        }
+        else if (isString(_v)) {
+            return [_v, _v];
+        }
+        return ['#00000000', '#00000000'];
+    }
 }
 
 export { RippleParam };

package/es/customHooks/useRipples/class-ripple.js

@@ -19,7 +19,7 @@ import { defaultData } from './data-default.js';
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 03:03
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 17:28
+ * @lastModified 2026-02-05 19:24
  *
  */
 /**
@@ -206,6 +206,10 @@ class Ripples {
      * @param value
      */
     set(property, value) {
+        // 该属性不允许被重新赋值
+        if (property === 'loadingBackgroundColor') {
+            return;
+        }
         this.options[property] = value;
         // 数仓更新
         this.state.dispatch({
@@ -213,6 +217,13 @@ class Ripples {
             payload: value,
         });
     }
+    /**
+     * 获取某一个参数的当前值
+     * @param property 要获取的键
+     */
+    get(property) {
+        return this.options[property];
+    }
     reducer = (state, action) => {
         switch (action.type) {
             case 'sizeChange':

package/es/customHooks/useRipples/class-webgl.js

@@ -10,7 +10,7 @@ import { isNull, isZero } from 'a-type-of-js';
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 02:44
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 05:27
+ * @lastModified 2026-02-04 06:51
  */
 /**
  * ## webGl
@@ -27,7 +27,10 @@ class RippleGl {
      * 该值在 init 中进行初始化
      */
     quad = null;
-    /**  该值于初始化着色器时初始化  */
+    /**
+     * ## [着色器](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLProgram)
+     *
+     *  该值于初始化着色器时初始化  */
     dropProgram;
     /**  更新流  */
     updateProgram;
@@ -244,6 +247,11 @@ class RippleGl {
         const { gl } = this;
         this.dropProgram = this.createProgram(this.vertexShader, this.dropProgramFragmentSource);
         const updateProgram = (this.updateProgram = this.createProgram(this.vertexShader, this.updateProgramFragmentSource));
+        /**
+         * ### [指定了 uniform 变量的值](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/uniform)
+         *
+         *
+         */
         gl.uniform2fv(updateProgram.locations.delta, this.textureDelta);
         this.renderProgram = this.createProgram(this.renderVertexSource, this.renderProgramFragmentSource);
         gl.uniform2fv(this.renderProgram.locations.delta, this.textureDelta);

package/es/customHooks/useRipples/data-default.js

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 11:55
  * @version 2.0.0-alpha.0
- * @lastModified 2026-01-22 23:57
+ * @lastModified 2026-02-05 17:22
  */
 /**
  * ## 默认值
@@ -25,8 +25,10 @@ const defaultData = {
     raindropsTimeInterval: 3600,
     idleFluctuations: true,
     darkMode: undefined,
+    loadingBackgroundColor: ['#00000000', '#00000000'],
 };
 /**  冷冻执行  */
 Object.freeze(defaultData);
+const defaultDataKey = Object.keys(defaultData);
 
-export { defaultData };
+export { defaultData, defaultDataKey };

package/es/customHooks/useRipples/index.js

@@ -13,7 +13,7 @@ import { Ripples } from './class-ripple.js';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-06-20 01:37
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-02 16:59
+ * @lastModified 2026-02-04 08:19
  */
 /**
  *
@@ -30,7 +30,7 @@ import { Ripples } from './class-ripple.js';
  * 下面是在 <BackgroundRipple> 中使用
  *
  * ```ts
- * import { useRipples } from 'earthnut';
+ * import { useRipples } from 'enr';
  *
  *  export function BackgroundRipple(props: BackgroundRipplesProps) {
  *

package/es/customHooks/useTimeId.js

@@ -10,7 +10,7 @@ import { useRef, useEffect } from 'react';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:20
  * @version 2.0.0-alpha.0
- * @lastModified 2026-01-24 11:21
+ * @lastModified 2026-02-04 08:19
  */
 /**
  *
@@ -25,7 +25,7 @@ import { useRef, useEffect } from 'react';
  * 使用：
  *
  * ```ts
- *  // import { useTimeId } from 'earthnut';
+ *  // import { useTimeId } from 'enr';
  *  ...
  *  const timeoutId = useTimeId();
  *

package/es/src/components/ripples/Content.d.ts

@@ -1,3 +1,10 @@
+import { type RefObject } from 'react';
+import type { Ripples } from '../../customHooks/useRipples/class-ripple';
 import type { JSXComponent } from '../type';
+import type { BackgroundRipplesProps } from './types';
 /**  内容组件  */
 export declare const Content: JSXComponent;
+export declare const ComponentContent: ({ option, ripplesRef, canvas, ...props }: BackgroundRipplesProps & {
+    ripplesRef: RefObject<Ripples | null>;
+    canvas: RefObject<HTMLCanvasElement | null>;
+}) => import("react/jsx-runtime").JSX.Element;

package/es/src/components/ripples/LazyRippleEle.d.ts

@@ -1,5 +1,4 @@
 /**
- * @packageDocumentation
  * @module @enr/LazyRippleEle
  * @file LazyRippleEle.tsx
  * @description 涟漪
@@ -8,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2024-12-12 12:11
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-02 17:07
+ * @lastModified 2026-02-04 08:18
  */
 import type { BackgroundRipplesProps } from './types';
 /**
@@ -30,15 +29,15 @@ import type { BackgroundRipplesProps } from './types';
  * 使用：
  *
  * ```ts
- *  import { BackgroundRipple } from 'earthnut/BackgroundRipple';
+ *  import { LazyBackgroundRipple } from 'enr/LazyBackgroundRipple';
  *  // 也可以全量导入
- *  // import { BackgroundRipple } from 'earthnut';
+ *  // import { LazyBackgroundRipple } from 'enr';
  *  ...
  *  const animationFrameId = useAnimationFrame();
  *
- *  return <BackgroundRipple>
+ *  return <LazyBackgroundRipple>
  *            ...
- *         </BackgroundRipple>
+ *         </LazyBackgroundRipple>
  * ```
  *
  */

package/es/src/components/ripples/RipplesEle.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2024-12-12 12:18
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-02 17:07
+ * @lastModified 2026-02-04 08:18
  */
 import type { BackgroundRipplesProps } from './types';
 /**
@@ -27,9 +27,9 @@ import type { BackgroundRipplesProps } from './types';
  * 使用：
  *
  * ```ts
- *  import { BackgroundRipple } from 'earthnut';
+ *  import { BackgroundRipple } from 'enr/';
  *  // 也可以全量导入
- *  // import { BackgroundRipple } from 'earthnut';
+ *  // import { BackgroundRipple } from 'enr';
  *  ...
  *  const animationFrameId = useAnimationFrame();
  *

package/es/src/components/ripples/imperative-handle.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @module @enr/imperative-handle
+ * @file imperative-handle.ts
+ * @description 公共的命令句柄
+ * @author Mr.MudBean <Mr.MudBean@outlook.com>
+ * @license MIT
+ * @copyright 2026 ©️ Mr.MudBean
+ * @since 2026-02-04 06:52
+ * @version 2.0.1
+ * @lastModified 2026-02-04 07:57
+ */
+import type { RefObject } from 'react';
+import type { Ripples } from '../../customHooks/useRipples/class-ripple';
+import type { RippleEle } from './types';
+/**
+ * ## 通过函数构建公共的命令句柄
+ * @param ripplesRef
+ */
+export declare function createImperativeHandle(ripplesRef: RefObject<Ripples | null>): () => RippleEle;

package/es/src/components/ripples/types.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ Mr.MudBean
  * @since 2026-02-02 16:55
  * @version 2.0.0-alpha.4
- * @lastModified 2026-02-02 17:06
+ * @lastModified 2026-02-04 06:42
  */
 import type { RipplesOptions } from '../../customHooks/useRipples/types';
 import type { PropsWithTagNameCustomRef } from '../type';
@@ -65,4 +65,9 @@ export type RippleEle = {
     pause(): void;
     /**  设置属性 */
     set(options?: RipplesOptions): void;
+    /** 水滴落效果 */
+    drop(x: number, y: number, options?: {
+        radius: number;
+        strength: number;
+    }): void;
 };

package/es/src/customHooks/useAnimationFrame.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-01 06:12
+ * @lastModified 2026-02-04 08:18
  */
 /**  使用动画结果  */
 export interface UseAnimationFrameResult {
@@ -56,7 +56,7 @@ export type AnimationFrameOption = boolean | {
  * 使用：
  *
  * ```ts
- *  // import { useAnimationFrame } from 'earthnut';
+ *  // import { useAnimationFrame } from 'enr';
  *  ...
  *
  *  export function Home () {

package/es/src/customHooks/useInputIsComposing.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-01-24 11:23
+ * @lastModified 2026-02-04 08:19
  */
 import type { RefObject } from 'react';
 /**
@@ -25,7 +25,7 @@ import type { RefObject } from 'react';
  * 使用：
  *
  * ```ts
- *  import { useInputIsComposing } from 'earthnut';
+ *  import { useInputIsComposing } from 'enr';
  *
  *  ...
  *  const inputRef = useRef<HTMLInputElement>(null);

package/es/src/customHooks/useRipples/class-build-background.d.ts

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 14:17
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 17:35
+ * @lastModified 2026-02-05 17:41
  */
 import type { ElementMeta } from './class-html-element-meta';
 import type { RippleParam } from './class-param';

package/es/src/customHooks/useRipples/class-event-action.d.ts

@@ -1,5 +1,4 @@
 /**
- * @packageDocumentation
  * @module @enr/class-event-action
  * @file class-event-action.ts
  * @description 交互事件
@@ -8,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-23 01:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 17:55
+ * @lastModified 2026-02-04 06:46
  */
 import type { BuildBackground } from './class-build-background';
 import type { ElementEnvironment } from './class-element-environment';
@@ -63,8 +62,8 @@ export declare class EventAction {
     reloadBackground(): void;
     /**
      *  触发滴落效果
-     * @param x
-     * @param y
+     * @param x 横坐标
+     * @param y 纵坐标
      * @param radius
      * @param strength
      */

package/es/src/customHooks/useRipples/class-param.d.ts

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 02:40
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 14:08
+ * @lastModified 2026-02-05 19:20
  */
 import type { ImageCrossOrigin, RippleImgUrl, RipplesOptions } from './types';
 /**
@@ -28,6 +28,8 @@ export declare class RippleParam {
     readonly firstDrawProgressStep = 12;
     /**  canvas 的显隐  */
     visible: boolean;
+    /** 初始化设定值，该值由用户设置，但不可修改 */
+    readonly loadingBackgroundColor: [string, string];
     /**  倍级触发光标事件（值）  */
     private _accelerating;
     /**  倍级触发光标事件  */
@@ -112,4 +114,9 @@ export declare class RippleParam {
      * ## 切换最后一次执行的状态
      */
     toggleLastRunningState(): void;
+    /**
+     * ## 获取初始化背景值
+     * @param _v 初始化的值
+     */
+    private getLoadingBg;
 }