@vctrl/hooks 0.3.2 → 0.5.0

package/use-load-model/model-context.d.ts

@@ -8,9 +8,26 @@ declare const ModelContext: import('react').Context<{
     load: (filesOrDirectories: import('./types').InputFileOrDirectory) => Promise<void>;
     reset: () => void;
     optimize: {
+        simplifyOptimization: (options?: {
+            ratio?: number;
+            error?: number;
+        } | undefined) => Promise<void>;
+        dedupOptimization: (options?: import('@gltf-transform/functions').DedupOptions | undefined) => Promise<void>;
+        quantizeOptimization: (options?: import('@gltf-transform/functions').QuantizeOptions | undefined) => Promise<void>;
+        getSize: () => import('../use-optimize-model/types').ModelSize | null;
+        reset: () => void;
+        report: import('@gltf-transform/functions').InspectReport | null;
+        error: Error | null;
+        loading: boolean;
+    } | {
         simplifyOptimization: () => void;
         dedupOptimization: () => void;
         quantizeOptimization: () => void;
+        getSize: () => void;
+        reset: () => void;
+        report: null;
+        error: null;
+        loading: boolean;
     };
     file: import('./types').ModelFile | null;
     isFileLoading: boolean;
@@ -24,9 +41,26 @@ declare const useModelContext: () => {
     load: (filesOrDirectories: import('./types').InputFileOrDirectory) => Promise<void>;
     reset: () => void;
     optimize: {
+        simplifyOptimization: (options?: {
+            ratio?: number;
+            error?: number;
+        } | undefined) => Promise<void>;
+        dedupOptimization: (options?: import('@gltf-transform/functions').DedupOptions | undefined) => Promise<void>;
+        quantizeOptimization: (options?: import('@gltf-transform/functions').QuantizeOptions | undefined) => Promise<void>;
+        getSize: () => import('../use-optimize-model/types').ModelSize | null;
+        reset: () => void;
+        report: import('@gltf-transform/functions').InspectReport | null;
+        error: Error | null;
+        loading: boolean;
+    } | {
         simplifyOptimization: () => void;
         dedupOptimization: () => void;
         quantizeOptimization: () => void;
+        getSize: () => void;
+        reset: () => void;
+        report: null;
+        error: null;
+        loading: boolean;
     };
     file: import('./types').ModelFile | null;
     isFileLoading: boolean;

package/use-load-model/types.d.ts

@@ -38,10 +38,11 @@ export type Action = {
 } | {
     type: 'reset-state';
 };
-export type EventTypes = 'multiple-models' | 'not-loaded-files' | 'load-progress' | 'load-complete' | 'load-reset' | 'load-error';
+export type EventTypes = 'multiple-models' | 'not-loaded-files' | 'load-start' | 'load-progress' | 'load-complete' | 'load-reset' | 'load-error';
 export type EventData = {
     'multiple-models': File[];
     'not-loaded-files': File[];
+    'load-start': null;
     'load-progress': number;
     'load-complete': State['file'];
     'load-reset': null;

package/use-load-model/use-load-model.d.ts

@@ -1,14 +1,37 @@
 import { useOptimizeModel } from '../use-optimize-model';
 import { ModelFileTypes, InputFileOrDirectory, ModelFile } from './types';
+/**
+ * Custom hook to load and manage 3D models, integrating optimization functionalities.
+ *
+ * @param optimizer - Optional optimizer hook returned from useOptimizeModel.
+ * @returns An object containing the state, event handlers, and optimization functions.
+ */
 declare function useLoadModel(optimizer?: ReturnType<typeof useOptimizeModel>): {
     on: <T extends import('./types').EventTypes>(event: T, handler?: import('./types').EventHandler<T>) => void;
     off: <T extends import('./types').EventTypes>(event: T, handler?: import('./types').EventHandler<T>) => void;
     load: (filesOrDirectories: InputFileOrDirectory) => Promise<void>;
     reset: () => void;
     optimize: {
+        simplifyOptimization: (options?: {
+            ratio?: number;
+            error?: number;
+        } | undefined) => Promise<void>;
+        dedupOptimization: (options?: import('@gltf-transform/functions').DedupOptions | undefined) => Promise<void>;
+        quantizeOptimization: (options?: import('@gltf-transform/functions').QuantizeOptions | undefined) => Promise<void>;
+        getSize: () => import('../use-optimize-model/types').ModelSize | null;
+        reset: () => void;
+        report: import('@gltf-transform/functions').InspectReport | null;
+        error: Error | null;
+        loading: boolean;
+    } | {
         simplifyOptimization: () => void;
         dedupOptimization: () => void;
         quantizeOptimization: () => void;
+        getSize: () => void;
+        reset: () => void;
+        report: null;
+        error: null;
+        loading: boolean;
     };
     file: ModelFile | null;
     isFileLoading: boolean;

package/use-load-model.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./model-context-BmfXsk0j.cjs");exports.ModelContext=e.ModelContext;exports.ModelFileTypes=e.ModelFileTypes;exports.ModelProvider=e.ModelProvider;exports.useLoadModel=e.useLoadModel;exports.useModelContext=e.useModelContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./model-context-ChF_IVjD.cjs");exports.ModelContext=e.ModelContext;exports.ModelFileTypes=e.ModelFileTypes;exports.ModelProvider=e.ModelProvider;exports.useLoadModel=e.useLoadModel;exports.useModelContext=e.useModelContext;

package/use-load-model.es.js

@@ -1,4 +1,4 @@
-import { a as s, M as a, b as d, u as l, c as M } from "./model-context-qjRd1gfd.js";
+import { a as s, M as a, b as d, u as l, c as M } from "./model-context-DDCJu7oe.js";
 export {
   s as ModelContext,
   a as ModelFileTypes,

package/use-optimize-model/state.d.ts

@@ -0,0 +1,13 @@
+import { Action, State } from './types';
+/**
+ * Initial state for the reducer.
+ */
+export declare const initialState: State;
+/**
+ * Reducer function to manage state transitions.
+ *
+ * @param state - Current state.
+ * @param action - Action to perform.
+ * @returns New state after applying the action.
+ */
+export declare const reducer: (state: State, action: Action) => State;

package/use-optimize-model/types.d.ts

@@ -0,0 +1,37 @@
+import { Document } from '@gltf-transform/core';
+import { InspectReport } from '@gltf-transform/functions';
+/**
+ * Interface representing the size details of the model.
+ */
+export interface ModelSize {
+    /** The file size in bytes. */
+    fileSize: number;
+    /** The file size formatted as a human-readable string. */
+    displayFileSize: string;
+}
+/**
+ * Interface representing the state of the model optimizer.
+ */
+export interface State {
+    modelDoc: Document | null;
+    modelReport: InspectReport | null;
+    error: Error | null;
+    loading: boolean;
+}
+/**
+ * Types of actions for the reducer.
+ */
+export type Action = {
+    type: 'LOAD_START';
+} | {
+    type: 'LOAD_SUCCESS';
+    payload: {
+        modelDoc: Document;
+        modelReport: InspectReport;
+    };
+} | {
+    type: 'LOAD_ERROR';
+    payload: Error;
+} | {
+    type: 'RESET';
+};

package/use-optimize-model/use-optimize-model.d.ts

@@ -1,9 +1,27 @@
 import { Object3D } from 'three';
+import { dedup, quantize } from '@gltf-transform/functions';
+import { ModelSize } from './types';
+/**
+ * Custom React hook for optimizing Three.js models using glTF-Transform.
+ *
+ * This hook provides functions to load, optimize, and retrieve Three.js models.
+ * Optimizations include deduplication, quantization, and simplification of model meshes and textures.
+ *
+ * @returns An object containing functions to interact with the model optimizer.
+ */
 declare const useOptimizeModel: () => {
     load: (model: Object3D) => Promise<void>;
-    getModel: () => Promise<Uint8Array | undefined>;
-    simplifyOptimization: () => Promise<void>;
-    dedupOptimization: () => Promise<void>;
-    quantizeOptimization: () => Promise<void>;
+    getModel: () => Promise<ArrayBuffer | null>;
+    getSize: () => ModelSize | null;
+    report: import('@gltf-transform/functions').InspectReport | null;
+    simplifyOptimization: (options?: {
+        ratio?: number;
+        error?: number;
+    }) => Promise<void>;
+    dedupOptimization: (options?: Parameters<typeof dedup>[0]) => Promise<void>;
+    quantizeOptimization: (options?: Parameters<typeof quantize>[0]) => Promise<void>;
+    reset: () => void;
+    error: Error | null;
+    loading: boolean;
 };
 export default useOptimizeModel;

package/use-optimize-model-BN-fP4La.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react"),h=require("./GLTFExporter-ltc8rmzz.cjs"),L=require("@gltf-transform/core"),i=require("@gltf-transform/functions"),T=require("@gltf-transform/extensions"),k=require("meshoptimizer"),m={modelDoc:null,modelReport:null,error:null,loading:!1},q=(n,o)=>{switch(o.type){case"LOAD_START":return{...n,loading:!0,error:null};case"LOAD_SUCCESS":return{...n,loading:!1,modelDoc:o.payload.modelDoc,modelReport:o.payload.modelReport};case"LOAD_ERROR":return{...n,loading:!1,error:o.payload};case"RESET":return{...m};default:return n}},x=()=>{const[n,o]=t.useReducer(q,m),{modelDoc:s,modelReport:l,error:f,loading:R}=n,S=t.useRef(new h.GLTFExporter),y=t.useRef(new L.WebIO().registerExtensions([T.KHRMeshQuantization])),z=t.useCallback(async e=>{o({type:"LOAD_START"});try{const r={binary:!0},c=await S.current.parseAsync(e,r),u=new Uint8Array(c),p=await y.current.readBinary(u),d=i.inspect(p);o({type:"LOAD_SUCCESS",payload:{modelDoc:p,modelReport:d}})}catch(r){o({type:"LOAD_ERROR",payload:r}),console.error("Error loading model:",r)}},[]),a=t.useCallback(async e=>{if(s)try{await s.transform(...e);const r=i.inspect(s);o({type:"LOAD_SUCCESS",payload:{modelDoc:s,modelReport:r}})}catch(r){console.error("Error applying transforms:",r)}},[s]),E=t.useCallback(async e=>{const{ratio:r=.5,error:c=.001}=e||{};await a([i.weld(),i.simplify({simplifier:k.MeshoptSimplifier,ratio:r,error:c})])},[a]),O=t.useCallback(async e=>{await a([i.dedup(e)])},[a]),C=t.useCallback(async e=>{await a([i.quantize(e)])},[a]),w=t.useCallback(async()=>{if(!s)return null;try{return await y.current.writeBinary(s)}catch(e){return console.error("Error getting model binary:",e),null}},[s]),b=t.useCallback(()=>{if(!l)return null;const e=d=>d.reduce((D,A)=>D+A.size,0),r=e(l.meshes.properties),c=e(l.textures.properties),u=r+c,p=`${(u/(1024*1024)).toFixed(2)} MB`;return{fileSize:u,displayFileSize:p}},[l]),g=t.useCallback(()=>{o({type:"RESET"})},[]);return{load:z,getModel:w,getSize:b,report:l,simplifyOptimization:E,dedupOptimization:O,quantizeOptimization:C,reset:g,error:f,loading:R}};exports.useOptimizeModel=x;

package/use-optimize-model-C46Fr7jH.js

@@ -0,0 +1,111 @@
+import { useReducer as x, useRef as m, useCallback as n } from "react";
+import { G as C } from "./GLTFExporter-Q5UJ5eb1.js";
+import { WebIO as _ } from "@gltf-transform/core";
+import { inspect as y, weld as b, simplify as M, dedup as B, quantize as U } from "@gltf-transform/functions";
+import { KHRMeshQuantization as F } from "@gltf-transform/extensions";
+import { MeshoptSimplifier as q } from "meshoptimizer";
+const f = {
+  modelDoc: null,
+  modelReport: null,
+  error: null,
+  loading: !1
+}, G = (i, o) => {
+  switch (o.type) {
+    case "LOAD_START":
+      return { ...i, loading: !0, error: null };
+    case "LOAD_SUCCESS":
+      return {
+        ...i,
+        loading: !1,
+        modelDoc: o.payload.modelDoc,
+        modelReport: o.payload.modelReport
+      };
+    case "LOAD_ERROR":
+      return { ...i, loading: !1, error: o.payload };
+    case "RESET":
+      return { ...f };
+    default:
+      return i;
+  }
+}, $ = () => {
+  const [i, o] = x(G, f), { modelDoc: t, modelReport: a, error: R, loading: S } = i, E = m(new C()), u = m(
+    new _().registerExtensions([F])
+  ), O = n(async (r) => {
+    o({ type: "LOAD_START" });
+    try {
+      const e = { binary: !0 }, l = await E.current.parseAsync(r, e), c = new Uint8Array(l), p = await u.current.readBinary(c), d = y(p);
+      o({
+        type: "LOAD_SUCCESS",
+        payload: { modelDoc: p, modelReport: d }
+      });
+    } catch (e) {
+      o({ type: "LOAD_ERROR", payload: e }), console.error("Error loading model:", e);
+    }
+  }, []), s = n(
+    async (r) => {
+      if (t)
+        try {
+          await t.transform(...r);
+          const e = y(t);
+          o({
+            type: "LOAD_SUCCESS",
+            payload: { modelDoc: t, modelReport: e }
+          });
+        } catch (e) {
+          console.error("Error applying transforms:", e);
+        }
+    },
+    [t]
+  ), z = n(
+    async (r) => {
+      const { ratio: e = 0.5, error: l = 1e-3 } = r || {};
+      await s([
+        b(),
+        M({
+          simplifier: q,
+          ratio: e,
+          error: l
+        })
+      ]);
+    },
+    [s]
+  ), w = n(
+    async (r) => {
+      await s([B(r)]);
+    },
+    [s]
+  ), g = n(
+    async (r) => {
+      await s([U(r)]);
+    },
+    [s]
+  ), D = n(async () => {
+    if (!t) return null;
+    try {
+      return await u.current.writeBinary(t);
+    } catch (r) {
+      return console.error("Error getting model binary:", r), null;
+    }
+  }, [t]), A = n(() => {
+    if (!a) return null;
+    const r = (d) => d.reduce((L, T) => L + T.size, 0), e = r(a.meshes.properties), l = r(a.textures.properties), c = e + l, p = `${(c / (1024 * 1024)).toFixed(2)} MB`;
+    return { fileSize: c, displayFileSize: p };
+  }, [a]), h = n(() => {
+    o({ type: "RESET" });
+  }, []);
+  return {
+    load: O,
+    getModel: D,
+    getSize: A,
+    report: a,
+    simplifyOptimization: z,
+    dedupOptimization: w,
+    quantizeOptimization: g,
+    reset: h,
+    error: R,
+    loading: S
+  };
+};
+export {
+  $ as u
+};

package/use-optimize-model.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-optimize-model-BXIlJ5Yx.cjs");exports.useOptimizeModel=e.useOptimizeModel;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-optimize-model-BN-fP4La.cjs");exports.useOptimizeModel=e.useOptimizeModel;

package/use-optimize-model.es.js

@@ -1,4 +1,4 @@
-import { u as i } from "./use-optimize-model-BpcR9d1L.js";
+import { u as i } from "./use-optimize-model-C46Fr7jH.js";
 export {
   i as useOptimizeModel
 };