xl-public-utils 1.0.4 → 1.0.5

package/index.d.ts

@@ -1,24 +1,4 @@
 import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
-
-/**
- * @typedef {Object} QrCodeOptions
- * @property {string} [bcid='qrcode'] - 二维码类型，具体支持请查看文档
- * @property {number} [width=1056] - 最终图片宽度
- * @property {number} [height=342] - 最终图片高度
- * @property {number} [qrcodeW=300] - 二维码宽度
- * @property {number} [qrcodeH=300] - 二维码高度
- * @property {boolean} [addText=true] - 是否在右侧添加文字
- * @property {number} [top=10] - 顶部距离
- * @property {number} [left=10] - 左侧距离
- * @property {number} [lineHeight=1] - 文字行高，换行后下一行文字的y位置计算为fontSize * lineHeight
- * @property {number} [fontSize=60] - 文字大小
- * @property {string} [fontFamily='黑体'] - 字体类型
- * @property {string} [bgColor='#fff'] - 背景颜色
- * @property {number} [textLeftMargin=20] - 文字距离二维码间隔
- * @property {boolean} [fontWeight=700] - 字体加粗
- * @property {string} [textColor='#000'] - 字体颜色
- * @property {string} [textContent] - 右侧文字内容
- */
 declare module "xl-public-utils" {
   export interface QrCodeOptions {
     /** 二维码类型，具体支持请查看文档 */
@@ -232,6 +212,21 @@ declare module "xl-public-utils" {
       end(): T;
     }
     
+    export function toSVG(opts: RenderOptions): string;
+    export function drawingSVG(): DrawingContext<string>;
+
+    // platform-specific exports
+    export function toCanvas(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
+    export function drawingCanvas(canvas: string | HTMLCanvasElement): DrawingContext<HTMLCanvasElement>;
+    
+    export function datamatrix(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
+    export function datamatrix<T>(opts: RenderOptions, drawing: DrawingContext<Promise<T>>): Promise<T>;
+    export function datamatrix<T>(opts: RenderOptions, drawing: DrawingContext<T>): T;
+
+    
+    export function qrcode(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
+    export function qrcode<T>(opts: RenderOptions, drawing: DrawingContext<Promise<T>>): Promise<T>;
+    export function qrcode<T>(opts: RenderOptions, drawing: DrawingContext<T>): T;
     export function render<T>(params: RenderOptions, drawing: DrawingContext<T>): T;
     export function raw(
       bcid: string,
@@ -285,19 +280,4 @@ declare module "xl-public-utils" {
       export function loadFont(name: string, mult: number, data: string | Uint8Array): void;
       export function loadFont(name: string, multy: number, multx: number, data: string | Uint8Array): void;
     }
-    export function toSVG(opts: RenderOptions): string;
-    export function drawingSVG(): DrawingContext<string>;
-
-    // platform-specific exports
-    export function toCanvas(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
-    export function drawingCanvas(canvas: string | HTMLCanvasElement): DrawingContext<HTMLCanvasElement>;
-    
-    export function datamatrix(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
-    export function datamatrix<T>(opts: RenderOptions, drawing: DrawingContext<Promise<T>>): Promise<T>;
-    export function datamatrix<T>(opts: RenderOptions, drawing: DrawingContext<T>): T;
-
-    
-    export function qrcode(canvas: string | HTMLCanvasElement, opts: RenderOptions): HTMLCanvasElement;
-    export function qrcode<T>(opts: RenderOptions, drawing: DrawingContext<Promise<T>>): Promise<T>;
-    export function qrcode<T>(opts: RenderOptions, drawing: DrawingContext<T>): T;
 }

package/index.js

@@ -2,4 +2,5 @@ import * as vtkUtils from './src/vtkUtils.mjs';
 import * as utils from './src/utils.mjs'
 import * as qrcode from './src/qrcode.mjs'
 import * as BwipJs from './src/bwip-js.mjs';
-export { vtkUtils, utils, qrcode, BwipJs };
+import * as drcUtils from './src/drcUtils.mjs';
+export { vtkUtils, utils, qrcode, BwipJs, drcUtils };

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "xl-public-utils",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
+  "type": "module",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
   "peerDependencies": {
-    "@kitware/vtk.js": ">=25.7.2"
+    "@kitware/vtk.js": ">=25.7.2",
+    "gl-matrix": ">=3.4.3"
   },
   "peerDependenciesMeta": {
     "@kitware/vtk.js": {
       "optional": true
+    },
+    "gl-matrix": {
+      "optional": true
     }
   },
   "exports": {
@@ -21,11 +26,14 @@
     "./bwipJs": "./src/bwip-js.mjs"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "keywords": [
     "一些通用方法"
   ],
   "author": "xl",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^5.6.3"
+  }
 }

package/src/drcUtils.mjs

@@ -0,0 +1,353 @@
+import { vec3 } from "gl-matrix";
+import { int8ArrayToBase64 } from './utils.mjs'
+import vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData";
+/**
+ * @typedef {Object} AttrOption
+ * @property {number[]} [colors] 颜色数组
+ * @property {number[]} [generics] 属性数组
+ * @property {number[]} [normals] 法向量数组
+ */
+
+/**
+ * 将数据进行压缩
+ * @param {number[]} vertices 网格点
+ * @param {number[]} faces 网格面，必须是三角化之后的面，每连续的三个点索引标识一个面
+ * @param {number} byteLength=14 byteLength 压缩率
+ * @param {AttrOption} [attr] 其他需要压缩的属性
+ * @returns {Int8Array} 压缩之后的DRC数据
+ */
+export function enCodeMeshByVF(vertices, faces, byteLength = 14, attr =undefined)  {
+  const facesFlat = faces;
+  const pointFlat = vertices;
+  const encoderModule = window.encoderModule
+  const encoder = new encoderModule.Encoder();
+  const meshBuilder = new encoderModule.MeshBuilder();
+  const dracoMesh = new encoderModule.Mesh();
+  const numberFaces = faces.length / 3;
+  const numberPoints = vertices.length / 3;
+  meshBuilder.AddFacesToMesh(dracoMesh, numberFaces, facesFlat);
+  meshBuilder.AddFloatAttributeToMesh(dracoMesh, encoderModule.POSITION, numberPoints, 3, pointFlat);
+  if (attr) {
+    if (attr.colors && attr.colors.length) {
+      meshBuilder.AddFloatAttributeToMesh(dracoMesh, encoderModule.COLOR, numberPoints, 3, attr.colors);
+    }
+    if (attr.normals && attr.normals.length) {
+      meshBuilder.AddFloatAttributeToMesh(dracoMesh, encoderModule.NORMAL, numberPoints, 3, attr.normals);
+    }
+    if (attr.generics && attr.generics.length) {
+      meshBuilder.AddFloatAttributeToMesh(dracoMesh, encoderModule.GENERIC, numberPoints, 3, attr.generics);
+    }
+  }
+  
+  // encoder.SetSpeedOptions(5, 5);
+  encoder.SetAttributeQuantization(encoderModule.POSITION, byteLength);
+  encoder.SetEncodingMethod(encoderModule.MESH_EDGEBREAKER_ENCODING);
+  const encodedData = new encoderModule.DracoInt8Array();
+  const encodedLen = encoder.EncodeMeshToDracoBuffer(dracoMesh, encodedData);
+  const outputBuffer = new ArrayBuffer(encodedLen);
+  const outputData = new Int8Array(outputBuffer);
+  for (let i = 0; i < encodedLen; ++i) {
+    outputData[i] = encodedData.GetValue(i);
+  }
+  encoderModule.destroy(dracoMesh);
+  encoderModule.destroy(encoder);
+  encoderModule.destroy(meshBuilder);
+  return outputData
+}
+
+/**
+ * 使用drc压缩点
+ * @param {vec3[] | number[]} points 点数组
+ * @returns {Int8Array} 压缩之后的drc data
+ */
+export function enCodePointCloud(points) {
+  const encoderModule = window.encoderModule
+  const encoder = new encoderModule.Encoder();
+  const pointCloudBuilder = new encoderModule.PointCloudBuilder();
+  const dracoPointCloud = new encoderModule.PointCloud();
+  const pointsFlat = [];
+  for(let i= 0; i <points.length; i++) {
+    if(typeof points[i] === 'object') {
+      pointsFlat.push(points[i][0], points[i][1], points[i][2]);
+    } else {
+      pointsFlat.push(points[i])
+    }
+  }
+  const numberPoints = pointsFlat.length / 3;
+  pointCloudBuilder.AddFloatAttribute(dracoPointCloud, encoderModule.POSITION, numberPoints, 3, pointsFlat);
+  
+  encoder.SetAttributeQuantization(encoderModule.POSITION, 14);
+  
+  encoder.SetEncodingMethod(encoderModule.MESH_SEQUENTIAL_ENCODING);
+  const encodedData = new encoderModule.DracoInt8Array();
+  const encodedLen = encoder.EncodePointCloudToDracoBuffer(dracoPointCloud, false, encodedData);
+  const outputBuffer = new ArrayBuffer(encodedLen);
+  const outputData = new Int8Array(outputBuffer);
+  for (let i = 0; i < encodedLen; ++i) {
+    outputData[i] = encodedData.GetValue(i);
+  }
+  encoderModule.destroy(dracoPointCloud);
+  encoderModule.destroy(encoder);
+  encoderModule.destroy(pointCloudBuilder);
+  return outputData
+}
+/**
+ * 解压drc格式的点云数据
+ * @param {ArrayBuffer} byteArray drc点数据
+ * @returns {Float32Array} 点数组
+ */
+export function decodePointCloud(byteArray) {
+  const dracoPointCloud = decodeBuffer(byteArray);
+  return getPointCloudFromDracoGeometry(dracoPointCloud);
+}
+
+/**
+ * @typedef {Object} DrcMeshData
+ * @property {Uint32Array} faces 网格面数组
+ * @property {Float32Array} vertices 网格点数组
+ * @property {Float32Array} [colors] 颜色数组
+ * @property {Float32Array} [generics] 属性数组
+ * @property {Float32Array} [normals] 法向量数组
+ */
+
+/**
+ * 解压drc格式的网格数据
+ * @param {ArrayBuffer} byteArray drc网格数据
+ * @returns {DrcMeshData} 网格数据
+ */
+export function decodeDrcBufferArray(byteArray) {
+  var dracoGeometry = decodeBuffer(byteArray);
+  return getPolyDataFromDracoGeometry(dracoGeometry);
+}
+/**
+ * @typedef {Object} Decoder
+ */
+
+/**
+ * 输入一个Drc数据，反会对应的解压器
+ * @param {ArrayBuffer} arrayBuffer 输入的数据
+ * @returns {Decoder} drc解压类
+ */
+export function decodeBuffer(arrayBuffer) {
+  const decoderModule = window.decoderModule;
+  var byteArray = new Int8Array(arrayBuffer);
+  var decoder = new decoderModule.Decoder();
+  var decoderBuffer = new decoderModule.DecoderBuffer();
+  decoderBuffer.Init(byteArray, byteArray.length);
+  var geometryType = decoder.GetEncodedGeometryType(decoderBuffer);
+  var dracoGeometry;
+
+  if (geometryType === decoderModule.TRIANGULAR_MESH) {
+    dracoGeometry = new decoderModule.Mesh();
+    var status = decoder.DecodeBufferToMesh(decoderBuffer, dracoGeometry);
+
+    if (!status.ok()) {
+      console.error("Could not decode Draco file: ".concat(status.error_msg()));
+    }
+  } else if ( geometryType === decoderModule.POINT_CLOUD ) {
+    dracoGeometry = new decoderModule.PointCloud();
+    var status =
+            decoder.DecodeBufferToPointCloud(decoderBuffer, dracoGeometry);
+    if(!status.ok()) {
+      console.error('Wrong geometry type, expected mesh, got point cloud.');
+    }
+  }
+
+  decoderModule.destroy(decoderBuffer);
+  decoderModule.destroy(decoder);
+  return dracoGeometry;
+}
+
+/**
+ * 获取drcDecoder中的网格信息
+ * @param {Decoder} dracoGeometry DRC网格的decoder
+ * @returns {DrcMeshData} decoder中的网格信息
+ */
+function getPolyDataFromDracoGeometry(dracoGeometry) {
+  const decoderModule = window.decoderModule;
+  var decoder = new decoderModule.Decoder(); // Get position attribute ID
+
+  var positionAttributeId = decoder.GetAttributeId(dracoGeometry, decoderModule.POSITION);
+
+  if (positionAttributeId === -1) {
+    console.error('No position attribute found in the decoded model.');
+    decoderModule.destroy(decoder);
+    decoderModule.destroy(dracoGeometry);
+    return null;
+  }
+  var positionArray = getDracoAttributeAsFloat32Array(dracoGeometry, positionAttributeId); // Read indices
+  var i = dracoGeometry.num_faces();
+  var indices = new Uint32Array(i * 4);
+  var indicesArray = new decoderModule.DracoInt32Array();
+  while (i--) {
+    decoder.GetFaceFromMesh(dracoGeometry, i, indicesArray);
+    var index = i * 4;
+    indices[index] = 3;
+    indices[index + 1] = indicesArray.GetValue(0);
+    indices[index + 2] = indicesArray.GetValue(1);
+    indices[index + 3] = indicesArray.GetValue(2);
+  } // Create polyData and add positions and indinces
+  var normalAttributeId = decoder.GetAttributeId(dracoGeometry, decoderModule.NORMAL);
+  var normals;
+  if (normalAttributeId !== -1) {
+    normals = getDracoAttributeAsFloat32Array(dracoGeometry, decoderModule.NORMAL);
+  } // Texture coordinates
+  var genericattributeId = decoder.GetAttributeId(dracoGeometry, decoderModule.GENERIC);
+  let generics;
+  if (genericattributeId !== -1) {
+    generics = getDracoAttributeAsFloat32Array(dracoGeometry, genericattributeId);
+  }
+
+  // var texCoordAttributeId = decoder.GetAttributeId(dracoGeometry, decoderModule.TEX_COORD);
+
+  // if (texCoordAttributeId !== -1) {
+  //   var texCoordArray = getDracoAttributeAsFloat32Array(dracoGeometry, texCoordAttributeId);
+  //   var texCoords = vtkDataArray.newInstance({
+  //     numberOfComponents: 2,
+  //     values: texCoordArray,
+  //     name: 'TCoords'
+  //   });
+  // } // Scalars
+
+
+  var colorAttributeId = decoder.GetAttributeId(dracoGeometry, decoderModule.COLOR);
+  let colors;
+  if (colorAttributeId !== -1) {
+    colors = getDracoAttributeAsFloat32Array(dracoGeometry, colorAttributeId);
+  }
+
+  decoderModule.destroy(decoder);
+  return {
+    faces: indices,
+    vertices: positionArray,
+    normals,
+    colors,
+    generics
+  };
+}
+
+/**
+ * 解压DRC点云数据
+ * @param {Decoder} dracoGeometry DRC点云的Decder
+ * @returns {Float32Array} 点
+ */
+function getPointCloudFromDracoGeometry(dracoGeometry) {
+  const decoderModule = window.decoderModule;
+  var decoder = new decoderModule.Decoder(); // Get position attribute ID
+
+  var positionAttributeId = decoder.GetAttributeId(dracoGeometry, decoderModule.POSITION);
+
+  if (positionAttributeId === -1) {
+    console.error('No position attribute found in the decoded model.');
+    decoderModule.destroy(decoder);
+    decoderModule.destroy(dracoGeometry);
+    return new Float32Array();
+  } else  {
+    const points = getDracoAttributeAsFloat32Array(dracoGeometry, positionAttributeId); // Read indices
+    decoderModule.destroy(decoder);
+    return points;
+  }
+}
+/**
+ * 获取decoder中的属性
+ * @param {Decoder} dracoGeometry DRC Decoder
+ * @param {number} attributeId 需要获取的属性id
+ * @returns {Float32Array} 对应decoder中的属性
+ */
+export function getDracoAttributeAsFloat32Array(dracoGeometry, attributeId) {
+  const decoderModule = window.decoderModule;
+  var decoder = new decoderModule.Decoder();
+  var attribute = decoder.GetAttribute(dracoGeometry, attributeId);
+  var numberOfComponents = attribute.num_components();
+  var numberOfPoints = dracoGeometry.num_points();
+  var attributeData = new decoderModule.DracoFloat32Array();
+  decoder.GetAttributeFloatForAllPoints(dracoGeometry, attribute, attributeData);
+  var i = numberOfPoints * numberOfComponents;
+  var attributeArray = new Float32Array(i);
+  while (i--) {
+    attributeArray[i] = attributeData.GetValue(i);
+  }
+
+  return attributeArray;
+}
+
+
+/**
+ * 将点数据使用drc压缩处理为 base64 string
+ * @param {vec3[] | number[]} points 点数据
+ * @returns {string} drc压缩之后的base64数据
+ */
+
+export function enCloudPointTobase64(points) {
+  return int8ArrayToBase64(enCodePointCloud(points));
+}
+
+
+/**
+ * @typedef {Object} Mesh
+ * @property {number[][]} vertices 点信息
+ * @property {number[][]} faces 面信息
+ */
+
+/**
+ * 使用drc压缩网格信息
+ * @param {Mesh | vtkPolyData} mesh 
+ * @param {number} byteLength=14  压缩率
+ * @param {AttrOption} [attr] 其他需要压缩的属性
+ * @returns {Int8Array} 压缩之后的DRC数据
+ */
+
+export function enCodeMesh(mesh, byteLength = 14, attr = undefined) {
+  let faces = [];
+  let vertices = [];
+  if(mesh.vertices && mesh.faces) {
+    vertices = mesh.vertices;
+    for(let i = 0; i < mesh.faces.length; i++) {
+      const face = mesh.faces[i];
+      faces.push(face[0]);
+      faces.push(face[1]);
+      faces.push(face[2]);
+    }
+  } else if(mesh.getClassName && mesh.getClassName() === 'vtkPolyData') {
+    vertices = mesh.getPoints().getData();
+    const _vtkFaces = mesh.getPolys().getData();
+    const nbFaces = _vtkFaces.length / 4;
+    for(let i = 0; i < nbFaces; i++) {
+      faces.push(_vtkFaces[i * 4 + 1]);
+      faces.push(_vtkFaces[i * 4 + 2]);
+      faces.push(_vtkFaces[i * 4 + 3]);
+    }
+  }
+  return enCodeMeshByVF(vertices, faces, byteLength, attr)
+}
+
+/**
+ * 初始化Draco文件
+ */
+export function initDrcCoder() {
+  if (!window.encoderModule) {
+    const timerEncoder = setInterval(() => {
+      if (window.DracoEncoderModule) {
+        window.DracoEncoderModule().then((res) => {
+          window.encoderModule = res;
+        });
+        clearInterval(timerEncoder);
+      }
+    }, 50);
+  }
+  if (!window.decoderModule) {
+    const timerDecoder = setInterval(() => {
+      if (window.DracoDecoderModule) {
+        window.DracoDecoderModule().then((res) => {
+          window.decoderModule = res;
+          function a() {
+            return res;
+          }
+          // show.value = true;
+          vtkDracoReader.setDracoDecoder(a);
+        });
+        clearInterval(timerDecoder);
+      }
+    }, 50);
+  }
+}