@archvisioninc/canvas 2.6.4 → 2.6.6

package/dist/helpers/utilityHelpers.js

@@ -406,18 +406,48 @@ export const buildMeshPositionsArray = args => {
     return defaultMeshPosition;
   });
 };
-export const getImageFileFromBuffer = buffer => {
+export const getImageFileFromBuffer = args => {
+  const {
+    buffer,
+    asBase64Data
+  } = args || {};
   if (_.isEmpty(buffer)) return '';
-  const blob = new Blob([buffer], {
-    type: 'image/png'
-  });
-  const url = URL.createObjectURL(blob);
-  return url;
+  try {
+    const blob = new Blob([buffer], {
+      type: 'image/png'
+    });
+    const url = URL.createObjectURL(blob);
+    if (asBase64Data) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.onerror = error => {
+          console.error('Error reading buffer: ', error);
+          reject(error);
+        };
+        reader.readAsDataURL(blob);
+      });
+    }
+    return Promise.resolve(url);
+  } catch (error) {
+    console.error('Unable to get image from buffer: ', error);
+    return Promise.reject(error);
+  }
 };
-export const getTextureUrl = texture => {
+export const getTextureUrl = async args => {
+  const {
+    texture,
+    asBase64Data
+  } = args || {};
   const buffer = texture?._buffer;
   if (_.isEmpty(buffer)) return texture?.url || '';
-  return getImageFileFromBuffer(buffer);
+  const url = await getImageFileFromBuffer({
+    buffer,
+    asBase64Data
+  });
+  return url;
 };
 export const materialData = material => {
   const meshesWithMaterial = getUserMeshes().map(mesh => {
@@ -440,30 +470,45 @@ export const materialData = material => {
     albedoColor: material.albedoColor?.toHexString() || props?.theme?.colors?.[props.$selectedTheme]?.black,
     albedoTexture: {
       name: material.albedoTexture?.name,
-      url: getTextureUrl(material.albedoTexture)
+      url: getTextureUrl({
+        texture: material.albedoTexture,
+        asBase64Data: true
+      })
     },
     albedoHasAlpha: material.albedoTexture?.hasAlpha || false,
     environmentIntensity: material.environmentIntensity,
     metallic: material.metallic,
     metallicTexture: {
       name: material.metallicTexture?.name,
-      url: getTextureUrl(material.metallicTexture)
+      url: getTextureUrl({
+        texture: material.metallicTexture,
+        asBase64Data: true
+      })
     },
     roughness: material.roughness,
     microSurfaceTexture: {
       name: material.microSurfaceTexture?.name,
-      url: getTextureUrl(material.microSurfaceTexture)
+      url: getTextureUrl({
+        texture: material.microSurfaceTexture,
+        asBase64Data: true
+      })
     },
     emissiveColor: material.emissiveColor?.toHexString() || props?.theme?.colors?.[props.$selectedTheme]?.black,
     emissiveIntensity: material.emissiveIntensity,
     emissiveTexture: {
       name: material.emissiveTexture?.name,
-      url: getTextureUrl(material.emissiveTexture)
+      url: getTextureUrl({
+        texture: material.emissiveTexture,
+        asBase64Data: true
+      })
     },
     bumpIntensity: material.bumpTexture?.level || 0.5,
     bumpTexture: {
       name: material.bumpTexture?.name,
-      url: getTextureUrl(material.bumpTexture)
+      url: getTextureUrl({
+        texture: material.bumpTexture,
+        asBase64Data: true
+      })
     },
     // Advanced
     clearCoatEnabled: material.clearCoat?.isEnabled || false,
@@ -473,7 +518,10 @@ export const materialData = material => {
     alpha: material.alpha,
     opacityTexture: {
       name: material.opacityTexture?.name,
-      url: getTextureUrl(material.opacityTexture)
+      url: getTextureUrl({
+        texture: material.opacityTexture,
+        asBase64Data: true
+      })
     },
     transparencyMode: material.transparencyMode,
     sssRefractionEnabled: material.subSurface?.isRefractionEnabled || false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archvisioninc/canvas",
-  "version": "2.6.4",
+  "version": "2.6.6",
   "private": false,
   "main": "dist/Canvas.js",
   "module": "dist/Canvas.js",

package/src/package/helpers/utilityHelpers.js

@@ -466,20 +466,46 @@ export const buildMeshPositionsArray = args => {
   });
 };
 
-export const getImageFileFromBuffer = buffer => {
+export const getImageFileFromBuffer = args => {
+  const { buffer, asBase64Data } = args || {};
+
   if (_.isEmpty(buffer)) return '';
 
-  const blob = new Blob([ buffer ], { type: 'image/png' });
-  const url = URL.createObjectURL(blob);
+  try {
+    const blob = new Blob([ buffer ], { type: 'image/png' });
+    const url = URL.createObjectURL(blob);
 
-  return url;
+    if (asBase64Data) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+
+        reader.onerror = error => {
+          console.error('Error reading buffer: ', error);
+          reject(error);
+        };
+
+        reader.readAsDataURL(blob);
+      });
+    }
+
+    return Promise.resolve(url);
+  } catch (error) {
+    console.error('Unable to get image from buffer: ', error);
+    return Promise.reject(error);
+  }
 };
 
-export const getTextureUrl = texture => {
+export const getTextureUrl = async args => {
+  const { texture, asBase64Data } = args || {};
   const buffer = texture?._buffer;
 
   if (_.isEmpty(buffer)) return texture?.url || '';
-  return getImageFileFromBuffer(buffer);
+  const url = await getImageFileFromBuffer({ buffer, asBase64Data });
+  return url;
 };
 
 export const materialData = material => {
@@ -508,30 +534,30 @@ export const materialData = material => {
     albedoColor: material.albedoColor?.toHexString() || props?.theme?.colors?.[props.$selectedTheme]?.black,
     albedoTexture: {
       name: material.albedoTexture?.name,
-      url: getTextureUrl(material.albedoTexture),
+      url: getTextureUrl({ texture: material.albedoTexture, asBase64Data: true }),
     },
     albedoHasAlpha: material.albedoTexture?.hasAlpha || false,
     environmentIntensity: material.environmentIntensity,
     metallic: material.metallic,
     metallicTexture: {
       name: material.metallicTexture?.name,
-      url: getTextureUrl(material.metallicTexture),
+      url: getTextureUrl({ texture: material.metallicTexture, asBase64Data: true }),
     },
     roughness: material.roughness,
     microSurfaceTexture: {
       name: material.microSurfaceTexture?.name,
-      url: getTextureUrl(material.microSurfaceTexture),
+      url: getTextureUrl({ texture: material.microSurfaceTexture, asBase64Data: true }),
     },
     emissiveColor: material.emissiveColor?.toHexString() || props?.theme?.colors?.[props.$selectedTheme]?.black,
     emissiveIntensity: material.emissiveIntensity,
     emissiveTexture: {
       name: material.emissiveTexture?.name,
-      url: getTextureUrl(material.emissiveTexture),
+      url: getTextureUrl({ texture: material.emissiveTexture, asBase64Data: true }),
     },
     bumpIntensity: material.bumpTexture?.level || 0.5,
     bumpTexture: {
       name: material.bumpTexture?.name,
-      url: getTextureUrl(material.bumpTexture),
+      url: getTextureUrl({ texture: material.bumpTexture, asBase64Data: true }),
     },
 
     // Advanced
@@ -542,7 +568,7 @@ export const materialData = material => {
     alpha: material.alpha,
     opacityTexture: {
       name: material.opacityTexture?.name,
-      url: getTextureUrl(material.opacityTexture),
+      url: getTextureUrl({ texture: material.opacityTexture, asBase64Data: true }),
     },
     transparencyMode: material.transparencyMode,
     sssRefractionEnabled: material.subSurface?.isRefractionEnabled || false,