enr 2.0.0 → 2.0.2

package/README.md

@@ -1,4 +1,4 @@
-# en React
+# enr
 
 ## 一、安装
 
@@ -10,9 +10,12 @@ npm install  --save earthnut
 
 ## 二、涟漪背景
 
+> [!Note]
+> 该模块魔改自 [jquery.ripples](https://github.com/sirxemic/jquery.ripples)
+
 - 尽管接受所有的 style 属性，但是 `position` 还是期待是非 'static' 值，否则将影响涟漪背景的渲染位置和显示状态；
 - 当前如果设置了 `background` 的话，有可能在恢复时使得其覆盖其他子属性；
-- 当前期待使用 `background-color` 设置背景色，而不是在上面的 `background` 中设置背景色。譬如：`background-color: #f0f6;`
+- 当前期待使用 `background-color` 设置背景色，而不是在上面的 `background` 中设置背景色。譬如：<span style="background-color:#f0f6">`background-color: #f0f6;`</span>
 - 当前更期待使用配置参数 `option` 的 'imgUrl' 来配置目标背景图（请注意图源的跨域问题）。譬如：`imgUrl: 'background.png'`
 - 当然，也可以使用标准的 `background-image` 配置符合要求的背景图片（目前仅支持单张图配置）。譬如：`background-image: url(background.png);`
 - 当前可配置 `background-image` 为渐变色，但仅支持从上到下的线性渐变（仅支持单渐变）。譬如： `background-image: linear-gradient(black, transparent);`

package/cjs/components/ripples/Content.js

@@ -1,6 +1,10 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var styled = require('styled-components');
+var imperativeHandle = require('./imperative-handle.js');
+var useOptionUpdate = require('./use-option-update.js');
 
 /**  内容组件  */
 const Content = styled.styled.div `
@@ -15,5 +19,17 @@ const Content = styled.styled.div `
   contain: layout paint style;
   will-change: transform, opacity;
 `;
+const ComponentContent = ({ option, ripplesRef, canvas, ...props }) => {
+    const { children, style, ref, ..._props } = props;
+    ///  使用 配置更新
+    useOptionUpdate.useOptionUpdate(ripplesRef, option);
+    // 抛出事件 (自定义抛出事件)
+    react.useImperativeHandle(ref, imperativeHandle.createImperativeHandle(ripplesRef));
+    return (jsxRuntime.jsxs(Content, { style: {
+            backgroundRepeat: 'round',
+            ...style,
+        }, ..._props, children: [jsxRuntime.jsx("canvas", { ref: canvas, "data-earthnut-ui": "canvas", width: 0, height: 0 }), children] }));
+};
 
+exports.ComponentContent = ComponentContent;
 exports.Content = Content;

package/cjs/components/ripples/LazyRippleEle.js

@@ -2,11 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var aTypeOfJs = require('a-type-of-js');
 var react = require('react');
 var useLazyRipple = require('../../customHooks/useRipples/use-lazy-ripple.js');
 var Content = require('./Content.js');
-var useOptionUpdate = require('./useOptionUpdate.js');
 
 /**
  *
@@ -27,53 +25,24 @@ var useOptionUpdate = require('./useOptionUpdate.js');
  * 使用：
  *
  * ```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>
  * ```
  *
  */
 const LazyBackgroundRipple = ({ option, ...props }) => {
-    const { children, style, ref, ..._props } = props;
     /**  canvas 元素  */
     const canvas = react.useRef(null);
     /**  使用 ripples  */
     const { ripples } = useLazyRipple.useLazyRipples(canvas, option);
-    /**  初始状态  */
-    ///  使用 配置更新
-    useOptionUpdate.useOptionUpdate(ripples, option);
-    // 抛出事件 (自定义抛出事件)
-    react.useImperativeHandle(ref, () => ({
-        toggleState: () => ripples.current?.changePlayingState() ?? false,
-        get state() {
-            return ripples.current?.options.playingState ?? false;
-        },
-        pause() {
-            ripples.current?.pause();
-        },
-        play() {
-            ripples.current?.play();
-        },
-        set(options) {
-            if (aTypeOfJs.isUndefined(options))
-                return;
-            const keys = Object.keys(options);
-            for (let i = 0, j = keys.length; i < j; i++) {
-                const key = keys[i];
-                ripples.current?.set(key, options[key]);
-            }
-        },
-    }));
-    return (jsxRuntime.jsxs(Content.Content, { style: {
-            backgroundRepeat: 'round',
-            ...style,
-        }, ..._props, children: [jsxRuntime.jsx("canvas", { ref: canvas, "data-earthnut-ui": "canvas", width: 0, height: 0 }), children] }));
+    return jsxRuntime.jsx(Content.ComponentContent, { ripplesRef: ripples, canvas: canvas, option: option, ...props });
 };
 LazyBackgroundRipple.displayName = 'enr-lazy-background-ripple';
 

package/cjs/components/ripples/RipplesEle.js

@@ -2,11 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var aTypeOfJs = require('a-type-of-js');
 var react = require('react');
 var index = require('../../customHooks/useRipples/index.js');
 var Content = require('./Content.js');
-var useOptionUpdate = require('./useOptionUpdate.js');
 
 /**
  *
@@ -25,9 +23,9 @@ var useOptionUpdate = require('./useOptionUpdate.js');
  * 使用：
  *
  * ```ts
- *  import { BackgroundRipple } from 'earthnut';
+ *  import { BackgroundRipple } from 'enr/';
  *  // 也可以全量导入
- *  // import { BackgroundRipple } from 'earthnut';
+ *  // import { BackgroundRipple } from 'enr';
  *  ...
  *  const animationFrameId = useAnimationFrame();
  *
@@ -38,41 +36,11 @@ var useOptionUpdate = require('./useOptionUpdate.js');
  *
  */
 const BackgroundRipple = ({ option, ...props }) => {
-    const { children, style, ref, ..._props } = props;
     /**  canvas 元素  */
     const canvas = react.useRef(null);
     /**  使用 ripples  */
     const ripplesRef = index.useRipples(canvas, option);
-    ///  使用 配置更新
-    useOptionUpdate.useOptionUpdate(ripplesRef, option);
-    // 抛出事件 (自定义抛出事件)
-    react.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 (aTypeOfJs.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 (jsxRuntime.jsxs(Content.Content, { style: {
-            backgroundRepeat: 'round',
-            // backgroundSize: 'cover',
-            // backgroundPosition: 'center',
-            ...style,
-        }, ..._props, children: [jsxRuntime.jsx("canvas", { ref: canvas, "data-earthnut-ui": "canvas", width: 0, height: 0 }), children] }));
+    return jsxRuntime.jsx(Content.ComponentContent, { ripplesRef: ripplesRef, canvas: canvas, option: option, ...props });
 };
 BackgroundRipple.displayName = 'enr-background-ripple';
 

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var aTypeOfJs = require('a-type-of-js');
+var dataDefault = require('../../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 (aTypeOfJs.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') ?? dataDefault.defaultData.dropRadius, options?.strength ?? ripplesRef?.current?.get('perturbation') ?? 0.03);
+        },
+    });
+}
+
+exports.createImperativeHandle = createImperativeHandle;

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

@@ -2,6 +2,7 @@
 
 var aTypeOfJs = require('a-type-of-js');
 var react = require('react');
+var dataDefault = require('../../customHooks/useRipples/data-default.js');
 
 /**
  * 更新参数数据
@@ -15,7 +16,7 @@ function useOptionUpdate(ripplesRef, option) {
         if (!option || !ripplesRef.current) {
             return;
         }
-        Object.keys(ripplesRef.current.defaults).forEach(e => {
+        dataDefault.defaultDataKey.forEach(e => {
             /**  新的值  */
             const value = option[e];
             /**  测试值是否相等  */

package/cjs/customHooks/useAnimationFrame.js

@@ -13,7 +13,7 @@ var react = require('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
  */
 /**
  *
@@ -30,7 +30,7 @@ var react = require('react');
  * 使用：
  *
  * ```ts
- *  // import { useAnimationFrame } from 'earthnut';
+ *  // import { useAnimationFrame } from 'enr';
  *  ...
  *
  *  export function Home () {

package/cjs/customHooks/useInputIsComposing.js

@@ -12,7 +12,7 @@ var react = require('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
  */
 /**
  *
@@ -29,7 +29,7 @@ var react = require('react');
  * 使用：
  *
  * ```ts
- *  import { useInputIsComposing } from 'earthnut';
+ *  import { useInputIsComposing } from 'enr';
  *
  *  ...
  *  const inputRef = useRef<HTMLInputElement>(null);

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

@@ -14,7 +14,7 @@ var tools = require('./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
  */
 /**
  * ## 构建背景
@@ -39,8 +39,7 @@ class BuildBackground {
      * ## 默认加载的首个背景色
      */
     get defaultColor() {
-        return this.elementMeta.isDark ? '#000000' : '#ffffff';
-        // return '#00000000';
+        return this.options.loadingBackgroundColor[Number(this.elementMeta.isDark)];
     }
     /**
      * ## 最后使用

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

@@ -3,7 +3,6 @@
 var aJsTools = require('a-js-tools');
 
 /**
- * @packageDocumentation
  * @module @enr/class-event-action
  * @file class-event-action.ts
  * @description 交互事件
@@ -12,7 +11,7 @@ var aJsTools = require('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
  */
 /**
  *
@@ -136,8 +135,8 @@ class EventAction {
     }
     /**
      *  触发滴落效果
-     * @param x
-     * @param y
+     * @param x 横坐标
+     * @param y 纵坐标
      * @param radius
      * @param strength
      */

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

@@ -13,7 +13,7 @@ var dataDefault = require('./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
  */
 /**
  * ## 传入参数
@@ -36,6 +36,8 @@ class RippleParam {
     firstDrawProgressStep = 12;
     /**  canvas 的显隐  */
     visible = false;
+    /** 初始化设定值，该值由用户设置，但不可修改 */
+    loadingBackgroundColor;
     // ++++++++++++++++++++++ 配置数据 《〈《〈《〈《 ++++++++++++++++++++++
     // ++++++++++++++++++++++ 》〉》〉》〉》 用户控制变量 ++++++++++++++++++++++
     // 这些变量通过 Ripple 类的 set 方法设定
@@ -185,6 +187,7 @@ class RippleParam {
         this.running = Boolean(options.playingState ?? true);
         this.crossOrigin = options.crossOrigin;
         this.darkMode = options.darkMode;
+        this.loadingBackgroundColor = this.getLoadingBg(options.loadingBackgroundColor);
     }
     /**
      * ## 切换最后一次执行的状态
@@ -192,6 +195,26 @@ class RippleParam {
     toggleLastRunningState() {
         this._lastRunningState = !this._lastRunningState;
     }
+    /**
+     * ## 获取初始化背景值
+     * @param _v 初始化的值
+     */
+    getLoadingBg(_v) {
+        if (aTypeOfJs.isArray(_v)) {
+            const len = _v.length;
+            if (len === 1) {
+                const color = _v[0];
+                return [color, color];
+            }
+            else if (len === 2) {
+                return [..._v];
+            }
+        }
+        else if (aTypeOfJs.isString(_v)) {
+            return [_v, _v];
+        }
+        return ['#00000000', '#00000000'];
+    }
 }
 
 exports.RippleParam = RippleParam;

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

@@ -21,7 +21,7 @@ var dataDefault = require('./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
  *
  */
 /**
@@ -208,6 +208,10 @@ class Ripples {
      * @param value
      */
     set(property, value) {
+        // 该属性不允许被重新赋值
+        if (property === 'loadingBackgroundColor') {
+            return;
+        }
         this.options[property] = value;
         // 数仓更新
         this.state.dispatch({
@@ -215,6 +219,13 @@ class Ripples {
             payload: value,
         });
     }
+    /**
+     * 获取某一个参数的当前值
+     * @param property 要获取的键
+     */
+    get(property) {
+        return this.options[property];
+    }
     reducer = (state, action) => {
         switch (action.type) {
             case 'sizeChange':

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

@@ -12,7 +12,7 @@ var aTypeOfJs = require('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
@@ -29,7 +29,10 @@ class RippleGl {
      * 该值在 init 中进行初始化
      */
     quad = null;
-    /**  该值于初始化着色器时初始化  */
+    /**
+     * ## [着色器](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLProgram)
+     *
+     *  该值于初始化着色器时初始化  */
     dropProgram;
     /**  更新流  */
     updateProgram;
@@ -246,6 +249,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/cjs/customHooks/useRipples/data-default.js

@@ -10,7 +10,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
  */
 /**
  * ## 默认值
@@ -27,8 +27,11 @@ const defaultData = {
     raindropsTimeInterval: 3600,
     idleFluctuations: true,
     darkMode: undefined,
+    loadingBackgroundColor: ['#00000000', '#00000000'],
 };
 /**  冷冻执行  */
 Object.freeze(defaultData);
+const defaultDataKey = Object.keys(defaultData);
 
 exports.defaultData = defaultData;
+exports.defaultDataKey = defaultDataKey;

package/cjs/customHooks/useRipples/index.js

@@ -15,7 +15,7 @@ var classRipple = require('./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
  */
 /**
  *
@@ -32,7 +32,7 @@ var classRipple = require('./class-ripple.js');
  * 下面是在 <BackgroundRipple> 中使用
  *
  * ```ts
- * import { useRipples } from 'earthnut';
+ * import { useRipples } from 'enr';
  *
  *  export function BackgroundRipple(props: BackgroundRipplesProps) {
  *

package/cjs/customHooks/useTimeId.js

@@ -12,7 +12,7 @@ var react = require('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
  */
 /**
  *
@@ -27,7 +27,7 @@ var react = require('react');
  * 使用：
  *
  * ```ts
- *  // import { useTimeId } from 'earthnut';
+ *  // import { useTimeId } from 'enr';
  *  ...
  *  const timeoutId = useTimeId();
  *

package/es/components/ripples/Content.js

@@ -1,4 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useImperativeHandle } from 'react';
 import { styled } from 'styled-components';
+import { createImperativeHandle } from './imperative-handle.js';
+import { useOptionUpdate } from './use-option-update.js';
 
 /**  内容组件  */
 const Content = styled.div `
@@ -13,5 +17,16 @@ const Content = styled.div `
   contain: layout paint style;
   will-change: transform, opacity;
 `;
+const ComponentContent = ({ option, ripplesRef, canvas, ...props }) => {
+    const { children, style, ref, ..._props } = props;
+    ///  使用 配置更新
+    useOptionUpdate(ripplesRef, option);
+    // 抛出事件 (自定义抛出事件)
+    useImperativeHandle(ref, createImperativeHandle(ripplesRef));
+    return (jsxs(Content, { style: {
+            backgroundRepeat: 'round',
+            ...style,
+        }, ..._props, children: [jsx("canvas", { ref: canvas, "data-earthnut-ui": "canvas", width: 0, height: 0 }), children] }));
+};
 
-export { Content };
+export { ComponentContent, Content };

package/es/components/ripples/LazyRippleEle.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 { useLazyRipples } from '../../customHooks/useRipples/use-lazy-ripple.js';
-import { Content } from './Content.js';
-import { useOptionUpdate } from './useOptionUpdate.js';
+import { ComponentContent } from './Content.js';
 
 /**
  *
@@ -25,53 +23,24 @@ import { useOptionUpdate } from './useOptionUpdate.js';
  * 使用：
  *
  * ```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>
  * ```
  *
  */
 const LazyBackgroundRipple = ({ option, ...props }) => {
-    const { children, style, ref, ..._props } = props;
     /**  canvas 元素  */
     const canvas = useRef(null);
     /**  使用 ripples  */
     const { ripples } = useLazyRipples(canvas, option);
-    /**  初始状态  */
-    ///  使用 配置更新
-    useOptionUpdate(ripples, option);
-    // 抛出事件 (自定义抛出事件)
-    useImperativeHandle(ref, () => ({
-        toggleState: () => ripples.current?.changePlayingState() ?? false,
-        get state() {
-            return ripples.current?.options.playingState ?? false;
-        },
-        pause() {
-            ripples.current?.pause();
-        },
-        play() {
-            ripples.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];
-                ripples.current?.set(key, options[key]);
-            }
-        },
-    }));
-    return (jsxs(Content, { style: {
-            backgroundRepeat: 'round',
-            ...style,
-        }, ..._props, children: [jsx("canvas", { ref: canvas, "data-earthnut-ui": "canvas", width: 0, height: 0 }), children] }));
+    return jsx(ComponentContent, { ripplesRef: ripples, canvas: canvas, option: option, ...props });
 };
 LazyBackgroundRipple.displayName = 'enr-lazy-background-ripple';