earthnut 0.0.0 → 0.0.2

package/customHooks/useRipples/rippersData/loadConfig.d.ts

@@ -0,0 +1,19 @@
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName website
+ * @FileName loadConfig.ts
+ * @CreateDate  周五  12/13/2024
+ * @Description 加载 config
+ ****************************************************************************/
+import { RipplesData } from './index';
+/**
+ * 执行的配置数据
+ *
+ */
+export declare function loadConfig(this: RipplesData): {
+    type: number;
+    linearSupport: boolean;
+    arrayType: Float32ArrayConstructor | null;
+    extensions: string[];
+} | null;

package/customHooks/useRipples/rippersData/renderData.d.ts

@@ -0,0 +1,74 @@
+import { OriginStyle } from '../buildBackground/type';
+import { Ripples } from '../ripplesClass';
+import { Program, Textures } from '../types';
+/**
+ *
+ * 原始数据类
+ *
+ * 记录了除参数数据外的运行数据
+ *
+ */
+export declare class RipplesRenderData {
+    /**  渲染数据流
+     *
+     * 该值在 init 中进行初始化
+     */
+    quad: WebGLBuffer;
+    /**
+     * 上一次雨滴滴落的时间
+     *
+     * 该时间更新触发时机：
+     * - 2.2s 内没有事件触发
+     * - 鼠标交互更新
+     */
+    lastRaindropsFallTime: number;
+    /**  canvas 父级元素 该值在主 class 中初始化 */
+    parentElement: HTMLElement;
+    /**  父级元素的属性变化监听者  */
+    mutationObserver: null | MutationObserver;
+    /**  父级尺寸变化监听者  */
+    resizeObserver: null | ResizeObserver;
+    /**  渲染程序  */
+    renderProgram: Program;
+    /**  图像资源的配置  */
+    imageSource: string;
+    /**  该值于初始化着色器时初始化  */
+    dropProgram: Program;
+    /**  更新流  */
+    updateProgram: Program;
+    /**  纹理  */
+    textures: Textures;
+    /**  背景纹理  */
+    backgroundTexture: WebGLTexture;
+    /**  纹理数据  */
+    textureDelta: Float32Array<ArrayBuffer>;
+    /**    */
+    framebuffers: WebGLFramebuffer[];
+    /**    */
+    bufferWriteIndex: number;
+    /**    */
+    bufferReadIndex: number;
+    /**  最原始的样式  */
+    originStyle: OriginStyle;
+    /**  上一次使用的样式  */
+    lastUseStyle: OriginStyle;
+    /** 事件  */
+    events: {
+        mousemove: (e: MouseEvent) => void;
+        mousedown: (e: MouseEvent) => void;
+        touchmove: (e: TouchEvent) => void;
+        touchstart: (e: TouchEvent) => void;
+    };
+    /**  渲染 id  */
+    animationFrameId: number;
+    /**
+     * 构建 Ripple 的渲染数据
+     *
+     * @param canvas 使用初始化的 Canvas 元素
+     * @param callback 执行的回调，这里要对页面背景进行更新
+     * @param _Ripples  上一个回调在使用中的 this
+     */
+    constructor(canvas: HTMLCanvasElement, callback: () => void, _Ripples: Ripples);
+    /**  销毁  */
+    destroy(): void;
+}

package/customHooks/useRipples/rippersData/useOptions.d.ts

@@ -0,0 +1,81 @@
+import { ImageCrossOrigin, RipplesUseOptions } from '../types';
+/** 用户使用参数  */
+export declare class UseOptions {
+    #private;
+    /**  倍级触发光标事件  */
+    set accelerating(value: number);
+    /**
+     * 倍级触发光标事件
+     */
+    get accelerating(): number;
+    /**  是否与鼠标互动  */
+    set interactive(value: boolean);
+    /**
+     * 是否与鼠标互动
+     */
+    get interactive(): boolean;
+    /**  分辨率
+     *
+     * 纹理的尺寸，该项目中该值为纹理的宽和高
+     *
+     */
+    set resolution(value: number);
+    /**
+     * 纹理的尺寸，该项目中该值为纹理的宽和高
+     */
+    get resolution(): number;
+    /**
+     * 扰动系数
+     *
+     * 缺省 `0.01`
+     *
+     * 取之范围 `0.01 - 1`
+     */
+    set perturbance(value: number);
+    /**
+     * 扰动系数
+     */
+    get perturbance(): number;
+    /**
+     * 扩散半径
+     *
+     * 缺省为 `20`
+     */
+    set dropRadius(value: number);
+    /**
+     * 扩散半径
+     */
+    get dropRadius(): number;
+    /**  传入的背景图片  */
+    imgUrl: string | string[] | null;
+    /**  闲置波动  */
+    set idleFluctuations(value: boolean);
+    /**
+     * 闲置波动
+     */
+    get idleFluctuations(): boolean;
+    /**  雨滴落下的时间间隔  */
+    set raindropsTimeInterval(value: number);
+    /**
+     * 雨滴落下的时间间隔
+     */
+    get raindropsTimeInterval(): number;
+    /**  crossOrigin  （是否跨域） */
+    crossOrigin: ImageCrossOrigin;
+    /**  canvas 的显隐  */
+    visible: boolean;
+    /**  当前执行的状态  */
+    running: boolean;
+    /**  当前执行的状态  */
+    set playingState(value: boolean);
+    /**
+     * 当前执行的状态
+     */
+    get playingState(): boolean;
+    /**  上一次执行渲染状态  */
+    lastRunningState: boolean;
+    /**
+     * 构建使用参数的数据
+     */
+    constructor(options: RipplesUseOptions);
+}

package/customHooks/useRipples/rippersData/vertexSource.d.ts

@@ -0,0 +1,28 @@
+/**
+ *
+ */
+export declare const vertexShader = "\n      attribute vec2 vertex;\n      varying vec2 coord;\n      void main() {\n        coord = vertex * 0.5 + 0.5;\n        gl_Position = vec4(vertex, 0.0, 1.0);\n      }";
+/**
+ *
+ *
+ *
+ */
+export declare const updateProgramFragmentSource = "\n      precision highp float;\n\n      uniform sampler2D texture;\n      uniform vec2 delta;\n\n      varying vec2 coord;\n\n      void main() {\n        vec4 info = texture2D(texture, coord);\n  \n        vec2 dx = vec2(delta.x, 0.0);\n        vec2 dy = vec2(0.0, delta.y);\n  \n        float average = (\n          texture2D(texture, coord - dx).r +\n          texture2D(texture, coord - dy).r +\n          texture2D(texture, coord + dx).r +\n          texture2D(texture, coord + dy).r\n        ) * 0.25;\n  \n        info.g += (average - info.r) * 2.0;\n        info.g *= 0.995;\n        info.r += info.g;\n  \n        gl_FragColor = info;\n      }\n      ";
+/**
+ *
+ *
+ *
+ */
+export declare const renderVertexSource = "\n        precision highp float;\n\n        attribute vec2 vertex;\n        uniform vec2 topLeft;\n        uniform vec2 bottomRight;\n        uniform vec2 containerRatio;\n        varying vec2 ripplesCoord;\n        varying vec2 backgroundCoord;\n        void main() {\n          backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);\n          backgroundCoord.y = 1.0 - backgroundCoord.y;\n          ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;\n          gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);\n        }\n      ";
+/**
+ *
+ *
+ *
+ */
+export declare const renderProgramFragmentSource = "\n        precision highp float;\n\n        uniform sampler2D samplerBackground;\n        uniform sampler2D samplerRipples;\n        uniform vec2 delta;\n\n        uniform float perturbance;\n        varying vec2 ripplesCoord;\n        varying vec2 backgroundCoord;\n\n        void main() {\n          float height = texture2D(samplerRipples, ripplesCoord).r;\n          float heightX = texture2D(samplerRipples, vec2(ripplesCoord.x + delta.x, ripplesCoord.y)).r;\n          float heightY = texture2D(samplerRipples, vec2(ripplesCoord.x, ripplesCoord.y + delta.y)).r;\n          vec3 dx = vec3(delta.x, heightX - height, 0.0);\n          vec3 dy = vec3(0.0, heightY - height, delta.y);\n          vec2 offset = -normalize(cross(dy, dx)).xz;\n          float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);\n          gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;\n        }";
+/**
+ *
+ * fragmentSource
+ *
+ */
+export declare const dropProgramFragmentSource = "precision highp float;\n\n      const float PI = 3.141592653589793;\n      uniform sampler2D texture;\n      uniform vec2 center;\n      uniform float radius;\n      uniform float strength;\n\n      varying vec2 coord;\n\n      void main() {\n        vec4 info = texture2D(texture, coord);\n\n        float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\n        drop = 0.5 - cos(drop * PI) * 0.5;\n        info.r += drop * strength;\n        gl_FragColor = info;\n      }";

package/customHooks/useRipples/ripple.html.d.ts

@@ -0,0 +1,6 @@
+import { Ripples } from './ripplesClass';
+import { RipplesOptions } from './types';
+/**
+ * ripple 的 html 导出，不依赖于 react
+ */
+export declare function useRipples(element: HTMLElement, options: RipplesOptions): Ripples;

package/customHooks/useRipples/ripplesClass.d.ts

@@ -0,0 +1,51 @@
+import { RipplesData } from './rippersData';
+import { RipplesOptions } from './types';
+import { RipplesRenderData } from './rippersData/renderData';
+import { UseOptions } from './rippersData/useOptions';
+import { FadeData } from './rippersData/fadeData';
+/**
+ *
+ * ## 水波动涟漪的效果
+ *
+ * 魔改自大佬的[jQuey 代码](https://github.com/sirxemic/jquery.ripples)
+ */
+export declare class Ripples extends RipplesData {
+    #private;
+    /**  渲染数据  */
+    renderData: RipplesRenderData | null;
+    /**  使用参数  */
+    options: UseOptions;
+    /**  背景使用的数据  */
+    fadeData: FadeData;
+    defaults: import("./types").RipplesUseOptions;
+    /**  初始化状态  */
+    initialized: boolean;
+    /**
+     * 构建 Ripple 对象
+     */
+    constructor(canvas: HTMLCanvasElement, options?: RipplesOptions);
+    /** 模拟雨滴下落  */
+    raindropsFall(): void;
+    /** 公共方法，触发 */
+    drop(x: number, y: number, radius: number, strength: number): void;
+    /**
+     * 缓进缓出
+     */
+    fade(): void;
+    /** 元素的尺寸发生变化  */
+    reloadBackground(): void;
+    /**  销毁  */
+    destroy(): void;
+    /**  展示元素 */
+    show(): void;
+    /** 隐藏元素 */
+    hide(): void;
+    /** 暂停动画涟漪状态   */
+    pause(): void;
+    /**  播放动画涟漪状态  */
+    play(): void;
+    /** 切换当前状态   */
+    changePlayingState(): void;
+    /**  给初始化变量赋值  */
+    set(property: keyof RipplesOptions, value: unknown): void;
+}

package/customHooks/useRipples/tools.d.ts

@@ -0,0 +1,31 @@
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName website
+ * @FileName tools.ts
+ * @CreateDate  周六  12/07/2024
+ * @Description  工具
+ ****************************************************************************/
+import { Ripples } from './ripplesClass';
+import { Program } from './types';
+/**
+ *
+ *  增加 WebGLProgram
+ *
+ *
+ */
+export declare function createProgram(vertexSource: string, fragmentSource: string, gl: WebGLRenderingContext, _uniformValues?: string): Program;
+/**
+ *
+ * 绑定纹理
+ *
+ */
+export declare function bindTexture(this: Ripples, texture: WebGLTexture, unit?: number): void;
+/**
+ * 给 canvas 设置样式
+ */
+export declare function setCanvasStyle(canvas: HTMLCanvasElement): void;
+/**  背景色值为空  */
+export declare function isNoneBackGroundColor(color: string): boolean;
+/**  背景图为空  */
+export declare function isNoneBackgroundImage(src: string): boolean;

package/customHooks/useRipples/types.d.ts

@@ -0,0 +1,192 @@
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName react-ripples
+ * @FileName interface.ts
+ * @CreateDate  周二  12/17/2024
+ * @Description BackgroundRipples 的类型声明文件
+ ****************************************************************************/
+import { CSSProperties, ReactElement } from 'react';
+export type ImageCrossOrigin = 'anonymous' | 'use-credentials' | 'no-cors';
+/**
+ *
+ *  背景涟漪的 props 类型
+ *
+ * - children  可选属性，定义子组件或子组件们
+ * - style     可选属性，定义自定义外壳的样式，在内含 `children` 时生效
+ * - option    可选属性，自定义涟漪的初始化属性
+ *    - resolution 分辨率,纹理的尺寸，该项目中该值为纹理的宽和高，缺省为 `256`
+ *    - dropRadius 扩撒半径，缺省值为 `20`
+ *    - perturbance 扰动系数，缺省为   `0.03`
+ *    - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+ *    - accelerating  加速光标移动触发，缺省为 `1`
+ *    - crossOrigin 原始样式
+ *    - imgUrl    原始背景图片地址
+ *    - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
+ *    - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3600`，可设置区间为 `10 ~ 12000`
+ *           该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+ *    - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+ *
+ */
+export interface BackgroundRipplesProps {
+    /**
+     * 用于设定外层的样式
+     */
+    style?: CSSProperties;
+    /**  子元素  */
+    children?: ReactElement;
+    /**
+     * ## 可设定涟漪的参数
+     *
+     * - resolution  波速，值越小，波动越快。缺省为 `360`
+     * - dropRadius  波动强度，值越小，波动效果越大，缺省值为 `12`
+     * - perturbance 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
+     * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+     * - accelerating  加速光标移动触发，类似于扰动系数，及作用与鼠标或手指触发，缺省为 `1`
+     * - crossOrigin 原始样式
+     * - imgUrl    原始背景图片地址
+     * - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
+     * - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3650`，可设置区间为 `10 ~ 12000`，值越小，雨越大
+     *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+     * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+     */
+    option?: RipplesOptions;
+}
+/**
+ *
+ * WebGLProgram
+ *
+ */
+export interface Program {
+    id: WebGLProgram;
+    uniforms: {
+        [x: string]: Float32Array;
+    };
+    locations: {
+        [x: string]: WebGLUniformLocation;
+    };
+}
+export type RipplesUseOptions = {
+    /**
+     * 波速
+     *
+     * 作用为波传播的速度，值越大，波传播的越慢
+     *
+     * 缺省为 `360`
+     */
+    resolution: number;
+    /**
+     * 波动强度
+     *
+     * 值越小，波动越明显
+     *
+     * 缺省为 `12`
+     */
+    dropRadius: number;
+    /**
+     * 扰动系数
+     *
+     * 缺省 `0.01`
+     *
+     * 取之范围 `0.01 - 1`
+     *
+     * 值越大，扰动效果越明显
+     */
+    perturbance: number;
+    /**
+     * 是否开启光标滑动轨迹
+     *
+     * 缺省为  `true`
+     */
+    interactive: boolean;
+    /**
+     * 加速光标移动触发，缺省为 `1`
+     *
+     *
+     * 由于大佬原方法在光标触发 mousemove 时不怎么明显
+     *
+     * 所以以倍级触发会让波动更加明显
+     *
+     * 可设置区间为 `2 - 100`
+     */
+    accelerating: number;
+    /**
+     *  原设定的背景图片
+     *
+     * 缺省为 `''`
+     */
+    crossOrigin: ImageCrossOrigin;
+    /**
+     * 设定的元素背景的 url 地址
+     *
+     * 缺省为 `''`
+     */
+    imgUrl: string | string[] | null;
+    /**
+     * 当前涟漪的状态
+     *
+     * 缺省为 `true` ， 即涟漪触发正在执行
+     */
+    playingState: boolean;
+    /**
+     * 雨滴滴落的时间间隔
+     *
+     * 单位为 ms
+     *
+     * 缺省值为 `3600`
+     *
+     *
+     * 可设置区间为 `10 ~ 12000`
+     *
+     *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+     */
+    raindropsTimeInterval: number;
+    /**
+     * 闲置波动
+     *
+     * 在光标交互不触发时，将触发模拟雨滴
+     *
+     * 缺省为 `true`
+     */
+    idleFluctuations: boolean;
+};
+/**
+ *
+ * 涟漪设定参数
+ *
+ * - resolution 分波速，值越小，波动越快。缺省为 `360`
+ * - dropRadius 波动强度，值越小，波动效果越大，缺省值为 `12`
+ * - perturbance 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
+ * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+ * - accelerating  加速光标移动触发，类似于扰动系数，及作用与鼠标或手指触发，缺省为 `1`
+ * - crossOrigin 原始样式
+ * - imgUrl    原始背景图片地址
+ * - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
+ * - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3650`，可设置区间为 `10 ~ 12000`，值越小，雨越大
+ *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+ * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+ */
+export type RipplesOptions = {
+    [x in keyof RipplesUseOptions]?: RipplesUseOptions[x];
+};
+/**
+ * 初始默认值
+ */
+export interface RipplesDefaultData {
+    /**  默认的图像地址  */
+    imgUrl: '';
+    /**    */
+    resolution: 256;
+    dropRadius: 10;
+    perturbance: 0.03;
+    interactive: true;
+    crossOrigin: '';
+    playingState: true;
+    accelerating: 1;
+    raindropsTimeInterval: 3600;
+    idleFluctuations: true;
+}
+/**
+ *
+ */
+export type Textures = WebGLTexture[];

package/customHooks/useTimeId.d.ts

@@ -0,0 +1,55 @@
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName earthnut
+ * @FilePath /src/customHooks/useAnimationFrame.ts
+ * @FileName useTimeId.ts
+ * @CreateDate  周二  01/07/2025
+ * @Description 使用定时器返回的时间戳
+ ****************************************************************************/
+/**
+ *
+ * ### 导出一个使用 `useRef` 创建的 `NodeJS.Timeout`
+ *
+ * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
+ *
+ * @version 0.0.3
+ * @see   https://earthnut.dev/use-time-id
+ * @example
+ *
+ * 使用：
+ *
+ * ```ts
+ *  import { useTimeId } from 'earthnut/useTimeId';
+ *  // 也可以全量导入
+ *  // import { useTimeId } from 'earthnut';
+ *  ...
+ *  const timeoutId = useTimeId();
+ *
+ *  useEffect(()=>{
+ *      timeoutId.current = setTimeout(()=>{
+ *          ...
+ *      } ,delay);
+ *  });
+ *  ...
+ *
+ * ```
+ *
+ * 其实，正确的用法是这样的：
+ *
+ * ```ts
+ *
+ *  useEffect(()=>{
+ *    const timeId = setTimeout(()=>{
+ *        ...
+ *    }, delay) ;
+ *
+ *     return ()=> timeId && clearTimeout(timeId);
+ *  });
+ *
+ * ```
+ *
+ * 根本就不用引入这个自定义 `hook` , 哈哈哈哈哈
+ *
+ */
+export declare function useTimeId(): import("react").RefObject<NodeJS.Timeout | undefined>;

package/dog.d.ts

@@ -0,0 +1,3 @@
+import { DevLog } from '@qqi/log';
+/**  开发环境执行，该方法在 env === 'production' 时通过 babel 和 webpack 过滤移除  */
+export declare const dog: DevLog;