earthnut 0.0.0 → 0.0.1

package/components/ripples/RipplesEle.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BackgroundRipplesProps } from 'customHooks/useRipples/types';
+import { RippleEle } from './types';
+import './style/index.scss';
+/**
+ *
+ * ### 一个 ripple 背景组件
+ *
+ *
+ * *需要为该组件或父组件设置背景，否则即便的渲染了，效果不明显*
+ *
+ *  参数 props 属性：
+ * - children 内嵌的 ReactNode
+ * - style    更改显示的样式
+ * - option   初始化 ripples 的原始数据
+ * @param props  使用参数
+ * @version 0.0.1
+ * @see https://earthnut.dev/earthnut/background-ripple
+ * @example
+ * 使用：
+ *
+ * ```ts
+ *  import { BackgroundRipple } from 'earthnut/BackgroundRipple';
+ *  // 也可以全量导入
+ *  // import { BackgroundRipple } from 'earthnut';
+ *  ...
+ *  const animationFrameId = useAnimationFrame();
+ *
+ *  return <BackgroundRipple>
+ *            ...
+ *         </BackgroundRipple>
+ * ```
+ *
+ */
+declare const BackgroundRipple: React.ForwardRefExoticComponent<BackgroundRipplesProps & React.RefAttributes<RippleEle>>;
+export { BackgroundRipple };

package/components/ripples/index.d.ts

@@ -0,0 +1,4 @@
+import { RippleEle } from './types';
+export { BackgroundRipple } from './RipplesEle';
+export type { Ripples, BackgroundRipplesProps, RipplesOptions, } from '../../customHooks/useRipples/index';
+export type { RippleEle };

package/components/ripples/types.d.ts

@@ -0,0 +1,11 @@
+import { RipplesOptions } from 'customHooks';
+export type RippleEle = {
+    /**  切换当前的状态  */
+    toggleState(): void;
+    /**  获取当前的状态  */
+    state: boolean;
+    /**  暂停当前涟漪的渲染  */
+    pause(): void;
+    /**  设置属性 */
+    set(options?: RipplesOptions): void;
+};

package/components/ripples/useOptionUpdate.d.ts

@@ -0,0 +1,5 @@
+import { BackgroundRipplesProps, Ripples } from 'customHooks';
+/**
+ * 更新参数数据
+ */
+export declare function useOptionUpdate(ripplesRef: React.RefObject<Ripples | null>, props: BackgroundRipplesProps): void;

package/customHooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useInputIsComposing } from './useInputIsComposing';
+export { useTimeId } from './useTimeId';
+export { useAnimationFrameId } from './useAnimationFrame';
+export { useRipples } from './useRipples/index';
+export type { Ripples, BackgroundRipplesProps, RipplesOptions } from './useRipples/index';

package/customHooks/useAnimationFrame.d.ts

@@ -0,0 +1,42 @@
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName earthnut
+ * @FilePath /src/customHooks/useAnimationFrame.ts
+ * @FileName useAnimationFrame.ts
+ * @CreateDate  周二  01/07/2025
+ * @Description 使用 animationFrame
+ ****************************************************************************/
+/**
+ *
+ * ### 导出一个使用 `useRef` 创建的 `number`
+ *
+ *    该数值在组件卸载时会自动调用 `window.cancelAnimationFrame` 清理
+ * @description 一个接收 `window.requestAnimationFrame` 的返回值的 `ref`
+ * @returns  <React.RefObject: number>
+ * @version 0.0.3
+ * @see   https://earthnut.dev/use-animation-frame
+ * @example
+ * 使用：
+ *
+ * ```ts
+ *  import { useAnimationFrame } from 'earthnut/useAnimationFrame';
+ *  // 也可以全量导入
+ *  // import { useAnimationFrame } from 'earthnut';
+ *  ...
+ *  const animationFrameId = useAnimationFrame();
+ *
+ *  function performAction(time?: number){
+ *    useAnimationFrame.current = window.requestAnimationFrame(performAction);
+ *    ...
+ *  }
+ *
+ *  useEffect(()=>{
+ *      animationFrameId.current = window.requestAnimationFrame(performAction);
+ *  });
+ *  ...
+ *
+ * ```
+ *
+ */
+export declare function useAnimationFrameId(): React.RefObject<number>;

package/customHooks/useInputIsComposing.d.ts

@@ -0,0 +1,46 @@
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName earthnut
+ * @FilePath /src/customHooks/useAnimationFrame.ts
+ * @FileName useInputIsComposing.ts
+ * @CreateDate  周二  01/07/2025
+ * @Description 使用输入框是否完成输入状态
+ ****************************************************************************/
+/**
+ *
+ * ### 导出一个使用 `useRef` 创建的 `boolean`
+ *
+ *  *由于是包裹在 React.RefObject 之中，判断时务必使用 `isComposing.current` 进行判断*
+ * @description 用于判断当前的输入状态是否结束
+ * @param inputRef [React.RefObject<HTMLInputElement | HTMLTextAreaElement>] 输入框的 ref
+ * @returns  React.RefObject<boolean>
+ * @version 0.0.4
+ * @see   https://earthnut.dev/use-input-is-composing
+ * @example
+ *
+ * 使用：
+ *
+ * ```ts
+ *  import { useInputIsComposing } from 'earthnut/useInputIsComposing';
+ *  // 也可以全量导入
+ *  // import { useInputIsComposing } from 'earthnut';
+ *  ...
+ *  const inputRef = useRef<HTMLInputElement>(null);
+ *
+ *  const inputIsComposing = useInputIsComposing(inputRef);
+ *  ...
+ *  function enterDown()(e: React.KeyboardEvent<HTMLInputElement>) {
+ *     if (e.key === 'Enter') {
+ *        if (isComposing.current) {
+ *            console.log("此时此景，按回车键说明为了从候选词中挑选");
+ *        } else
+ *           console.log("输入完毕，敲回车是为了看一些开发者是否绑定了其他事件");
+ *     }
+ *  }
+ *  ...
+ *  <input type="text" onKeyDown={enterDown} />
+ *  ...
+ * ```
+ */
+export declare function useInputIsComposing(inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>): React.RefObject<boolean>;

package/customHooks/useRipples/buildBackground/default-background/_createImageData.d.ts

@@ -0,0 +1,7 @@
+import { Ripples } from '../../ripplesClass';
+/**
+ * 创建一个隐含像素数据的区域
+ *
+ * 用于构建默认的背景图
+ */
+export declare function createImageData(this: Ripples, bindImage: () => void): void;

package/customHooks/useRipples/buildBackground/default-background/circleDataList.d.ts

@@ -0,0 +1,18 @@
+/**  圆数据  */
+export declare const circleDataList: {
+    /**  计数器  */
+    "__#1@#cum": number;
+    /**  构建新的数据依据  */
+    build(): void;
+    /**  数据依据  */
+    data: {
+        /**  数据  */
+        list: [number, number, number, number][][];
+        /**  直径  */
+        diameter: number;
+        /**  半径  */
+        radius: number;
+        /**  晶格数  */
+        cells: number;
+    };
+};

package/customHooks/useRipples/buildBackground/default-background/createCanvasElementBySize.d.ts

@@ -0,0 +1,2 @@
+/**  通过尺寸创建一个默认图  */
+export declare function createCanvasElementBySize(width: number, height: number): HTMLCanvasElement;

package/customHooks/useRipples/buildBackground/default-background/createDefault.d.ts

@@ -0,0 +1,2 @@
+/**  构建默认的背景图  */
+export declare function createDefault(width: number, height: number): ImageData;

package/customHooks/useRipples/buildBackground/default-background/index.d.ts

@@ -0,0 +1,10 @@
+import { Ripples } from '../../ripplesClass';
+/**
+ *
+ * 设置透明的纹理
+ *
+ *
+ * 透明的纹理*默认会自动切换*
+ *
+ */
+export declare function setTransparentTexture(this: Ripples): void;

package/customHooks/useRipples/buildBackground/loadImage.d.ts

@@ -0,0 +1,13 @@
+import { Ripples } from '../ripplesClass';
+/**
+ *
+ * 加载图像
+ *
+ * - 初始化的时候首先触发加载背景图像
+ * - 通过 Ripple 的 set 方法设置属性 imageUrl 值时将触发
+ * - 尺寸发生变化时亦将触发更改
+ * - 父元素的样式属性发生变更时也会触发
+ *
+ * 在加载过程中如果渲染的图片为非法的（加载错误）那么将查找当前的背景色或是背景图作为依据，再就是都没有的情况下将会渲染一个类似于旧地板的色
+ */
+export declare function loadImage(this: Ripples): void;

package/customHooks/useRipples/buildBackground/runSide.d.ts

@@ -0,0 +1,9 @@
+import { Ripples } from '../ripplesClass';
+/**
+ * 设置缓变
+ *
+ * 缓变分两种，一种是没有任何设置的缓变；另一种就是两个不同类型之间的缓变
+ *
+ *
+ */
+export declare function runSide(this: Ripples): void;

package/customHooks/useRipples/buildBackground/type.d.ts

@@ -0,0 +1,27 @@
+/**  原使用的样式  */
+export type OriginStyle = {
+    /**  原始使用行内背景样式  */
+    inlineBackground: string;
+    /** 原始使用的行内背景色   */
+    inlineBackgroundColor: string;
+    /**  原始使用的背景图的样式  */
+    inlineBackgroundImage: string;
+    /**  元素的位置  */
+    position: string;
+    /**  元素的背景色  */
+    backgroundColor: string;
+    /**  元素的背景图  */
+    backgroundImage: string;
+    /**  元素的背景图的尺寸（多背景下）  */
+    backgroundSize: string;
+    /**  元素的背景图的位置  */
+    backgroundPosition: string;
+    /**  元素的背景图的重复方式  */
+    backgroundRepeat: string;
+    /**  元素的背景图的剪切方式  */
+    backgroundClip: string;
+    /**  元素的背景图的起点  */
+    backgroundOrigin: string;
+    /**  元素的背景图相对视口的滚动方式  */
+    backgroundAttachment: string;
+};

package/customHooks/useRipples/buildBackground/utils/bindImage.d.ts

@@ -0,0 +1,3 @@
+import { Ripples } from '../../ripplesClass';
+/**  绑定图片  */
+export declare function bindImage(this: Ripples, texImageSource: TexImageSource): void;

package/customHooks/useRipples/buildBackground/utils/createCanvasElement.d.ts

@@ -0,0 +1,3 @@
+import { Ripples } from 'components/ripples';
+/**  根据给出的 html 数据构建一个 canvas   */
+export declare function createCanvasElement(this: Ripples, img: CanvasImageSource): HTMLCanvasElement;

package/customHooks/useRipples/buildBackground/utils/createImageBySrc.d.ts

@@ -0,0 +1,2 @@
+/**  根据给出的 src 获取一个 img 对象  */
+export declare function createImageBySrc(src: string, width: number, height: number): HTMLImageElement;

package/customHooks/useRipples/buildBackground/utils/getBackgroundStyle.d.ts

@@ -0,0 +1,3 @@
+import { OriginStyle } from '../type';
+/**  获取元素的样式  */
+export declare function getBackgroundStyles(element: HTMLElement): OriginStyle;

package/customHooks/useRipples/buildBackground/utils/hideCssBackground.d.ts

@@ -0,0 +1,10 @@
+import { Ripples } from '../../ripplesClass';
+/**
+ * ## 隐藏背景
+ *
+ * 触发于
+ * - 手动恢复背景 webGl 的显示
+ * - 初始化时隐藏
+ * - 父级样式属性发生变更的时候
+ */
+export declare function hideCssBackground(this: Ripples): void;

package/customHooks/useRipples/buildBackground/utils/restore-css-background.d.ts

@@ -0,0 +1,7 @@
+import { Ripples } from '../../ripplesClass';
+/**
+ * 恢复背景样式
+ *
+ * 在使用过程中，可能会切换 webGL 的显隐状态，而手动处理背景的更替
+ */
+export declare function restoreCssBackground(this: Ripples): void;

package/customHooks/useRipples/callback/destroy.d.ts

@@ -0,0 +1,3 @@
+import { Ripples } from '../ripplesClass';
+/**  注销  */
+export declare function destroy(this: Ripples): void;

package/customHooks/useRipples/callback/drop.d.ts

@@ -0,0 +1,3 @@
+import { Ripples } from '../ripplesClass';
+/**  触发滴落效果  */
+export declare function drop(this: Ripples, x: number, y: number, radius: number, strength: number): void;

package/customHooks/useRipples/callback/fade.d.ts

@@ -0,0 +1,3 @@
+import { Ripples } from '../ripplesClass';
+/**  两个图像间的淡入淡出  */
+export declare function fade(this: Ripples): void;

package/customHooks/useRipples/callback/reload-background.d.ts

@@ -0,0 +1,6 @@
+import { Ripples } from '../ripplesClass';
+/**
+ * 重新加载背景图片
+ *
+ */
+export declare function reloadBackground(this: Ripples): void;

package/customHooks/useRipples/callback/scale.d.ts

@@ -0,0 +1,2 @@
+/**  缩放效果 （暂未用到） */
+export declare function scale(): void;

package/customHooks/useRipples/index.d.ts

@@ -0,0 +1,40 @@
+import { BackgroundRipplesProps, RipplesOptions } from './types';
+import { Ripples } from './ripplesClass';
+/**
+ *
+ * ## 使用绘制 ripples 上一层
+ *
+ *
+ * @param canvas `usrRef` 包裹的 `HTMLCanvasElement`，用于绘制图像
+ * @param props  初始化的
+ * @version 0.0.3
+ * @see  https://earthnut.dev/use-ripples
+ * @see  JQuery https://github.com/sirxemic/jquery.ripples
+ * @example
+ *
+ * 下面是在 <BackgroundRipple> 中使用
+ *
+ * ```ts
+ * import { useRipples } from 'earthnut/useRipples';
+ * // 也可以使用包全量导入
+ * // import { useRipples } from 'earthnut';
+ *
+ *  export function BackgroundRipple(props: BackgroundRipplesProps) {
+ *
+ *   // canvas 元素
+ *  const canvas = useRef<HTMLCanvasElement>(null);
+ *
+ *  // 使用 ripples
+ *  const ripplesRef = useRipples(canvas, props);
+ *
+ *  return (<>
+ *     <canvas ref={canvas}></canvas>
+ *     {props.children}
+ *  </>);
+ *  }
+ *
+ * ```
+ *
+ */
+export declare function useRipples(canvas: React.RefObject<HTMLCanvasElement | null>, props?: BackgroundRipplesProps): React.RefObject<Ripples | null>;
+export type { Ripples, BackgroundRipplesProps, RipplesOptions };

package/customHooks/useRipples/init/index.d.ts

@@ -0,0 +1,5 @@
+import { Ripples } from '../ripplesClass';
+/**
+ * 初始化 webGL
+ */
+export declare function initGL(this: Ripples): void;

package/customHooks/useRipples/init/initEvent.d.ts

@@ -0,0 +1,5 @@
+import { Ripples } from '../ripplesClass';
+/**
+ * 初始化事件
+ */
+export declare function setupPointerEvents(this: Ripples): void;

package/customHooks/useRipples/init/initShaders.d.ts

@@ -0,0 +1,7 @@
+import { Ripples } from '../ripplesClass';
+/**
+ *
+ * 初始化着色器
+ *
+ */
+export declare function initShaders(this: Ripples): void;

package/customHooks/useRipples/init/initTexture.d.ts

@@ -0,0 +1,7 @@
+import { Ripples } from '../ripplesClass';
+/**
+ *
+ * 初始化纹理
+ *
+ */
+export declare function initTexture(this: Ripples): void;

package/customHooks/useRipples/render/computeTextureBoundaries.d.ts

@@ -0,0 +1,3 @@
+import { Ripples } from '../ripplesClass';
+/**  计算纹理边界及背景图  */
+export declare function computeTextureBoundaries(this: Ripples): void;

package/customHooks/useRipples/render/draw.d.ts

@@ -0,0 +1,7 @@
+import { Ripples } from '../ripplesClass';
+/**
+ *
+ * 绘制
+ *
+ */
+export declare function draw(this: Ripples): void;

package/customHooks/useRipples/render/drawQuad.d.ts

@@ -0,0 +1,7 @@
+import { Ripples } from '../ripplesClass';
+/**
+ *
+ * 绘制 GL 数据流
+ *
+ */
+export declare function drawQuad(this: Ripples): void;

package/customHooks/useRipples/render/dropAtPointer.d.ts

@@ -0,0 +1,7 @@
+import { Ripples } from '../ripplesClass';
+/**
+ *
+ * 触发的点
+ *
+ */
+export declare function dropAtPointer(this: Ripples, pointer: MouseEvent | Touch, radius: number, strength: number): void;

package/customHooks/useRipples/render/index.d.ts

@@ -0,0 +1,6 @@
+import { Ripples } from '../ripplesClass';
+/**
+ * 开启绘制
+ *
+ */
+export declare function render(this: Ripples): void;

package/customHooks/useRipples/render/swapBufferIndices.d.ts

@@ -0,0 +1,5 @@
+import { Ripples } from '../ripplesClass';
+/**
+ * swap 缓冲区索引
+ */
+export declare function swapBufferIndices(this: Ripples): void;

package/customHooks/useRipples/render/update.d.ts

@@ -0,0 +1,5 @@
+import { Ripples } from '../ripplesClass';
+/**
+ * 更新
+ */
+export declare function update(this: Ripples): void;

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

@@ -0,0 +1,5 @@
+import { RipplesUseOptions } from '../types';
+/**
+ * 默认值
+ */
+export declare const defaultData: RipplesUseOptions;

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

@@ -0,0 +1,29 @@
+import { Ripples } from '../ripplesClass';
+/**  背景渐变的数据  */
+export declare class FadeData {
+    /**  背景页面的数据  */
+    backgroundInfo: {
+        width: number;
+        height: number;
+    };
+    /**  缺省背景图时的 id  */
+    transparentId: NodeJS.Timeout;
+    /**  最后使用
+     *
+     * 如果没有 toBeList 为空值，则当前渲染的为此纹理）绘制的图像
+     */
+    lastDrawImage: HTMLCanvasElement | HTMLImageElement;
+    /**  当前绘制的图像
+     *
+     * 该值仅出现在需要渐变过程中，一旦渐变完成，实际渲染的值就成了最后渲染的值
+     */
+    toBeList: (HTMLCanvasElement | HTMLImageElement)[];
+    /**  绘制进度  */
+    drawProgress: number;
+    /**  是否处于绘制过渡状态  */
+    isTransitioning: boolean;
+    /**  执行渐变  */
+    run(): void;
+    /**  创建背景渐变的数据  */
+    constructor(_Ripples: Ripples);
+}

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

@@ -0,0 +1,40 @@
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName website
+ * @FileName dataStore.ts
+ * @CreateDate  周六  12/07/2024
+ * @Description 数据库
+ ****************************************************************************/
+/**
+ * Ripple 使用的数据，Ripple 继承该类
+ */
+export declare class RipplesData {
+    /**
+     * canvas 元素
+     */
+    canvas: HTMLCanvasElement;
+    /**
+     * WebGL 绘图上下文
+     */
+    gl: WebGLRenderingContext;
+    /**
+     * 配置
+     */
+    config: {
+        type: number;
+        linearSupport: boolean;
+        extensions: string[];
+        arrayType: Float32ArrayConstructor | null;
+    } | null;
+    /**
+     * 初始化情况
+     */
+    initState: boolean;
+    /**
+     * 构造方法
+     *
+     * @param canvas  传入 canvas 元素来初始化必要的数据
+     */
+    constructor(canvas: HTMLCanvasElement);
+}

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,72 @@
+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);
+}