@archvisioninc/canvas 2.6.6 → 2.6.8

package/dist/helpers/canvasUpdateHelpers.js

@@ -153,7 +153,7 @@ export const updateMaterial = inboundData => {
     albedoHasAlpha,
     clearTextureChannels
   } = payload;
-  const material = scene.getMaterialByName(id, true);
+  const material = scene?.getMaterialByName?.(id, true);
   if (material) {
     // Renaming material.
     if (newId) {
@@ -182,7 +182,7 @@ export const updateMaterial = inboundData => {
 
     // Reset supported texture channels, useful when manually importing a new material.
     if (clearTextureChannels) {
-      const workingMaterial = scene.metadata.materials.find(mat => mat.materialId === id);
+      const workingMaterial = scene.metadata.materials.find(mat => mat.materialId === id) || {};
       Object.keys(workingMaterial)?.forEach(key => {
         if (key.endsWith('Texture')) {
           material[key] = null;

package/dist/helpers/utilityHelpers.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { GLTF2 } from 'babylonjs-loaders';
 import { GIZMOS, GUI, TRANSPARENCY_MODES } from '../constants';
 import { orthoOptions } from '../enums';
@@ -409,45 +410,50 @@ export const buildMeshPositionsArray = args => {
 export const getImageFileFromBuffer = args => {
   const {
     buffer,
-    asBase64Data
+    asDataUrl
   } = args || {};
   if (_.isEmpty(buffer)) return '';
-  try {
-    const blob = new Blob([buffer], {
+  if (asDataUrl) {
+    const ascii = new Uint8Array(buffer);
+    const Uint8ToString = u8a => {
+      if (_.isEmpty(u8a)) return '';
+      const maxChunkSize = 8192;
+      const chunks = [];
+      for (let i = 0; i < u8a.length; i += maxChunkSize) {
+        const newChunk = String.fromCharCode.apply(null, u8a.subarray(i, i + maxChunkSize));
+        chunks.push(newChunk);
+      }
+      return chunks.join('');
+    };
+    const dataString = btoa(Uint8ToString(ascii));
+    const blob = new Blob([dataString], {
       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);
+    const blobUrl = URL.createObjectURL(blob);
+    console.log({
+      dataString,
+      blob,
+      blobUrl
+    });
+    return blobUrl;
   }
+  const blob = new Blob([buffer], {
+    type: 'image/png'
+  });
+  const url = URL.createObjectURL(blob);
+  return url;
 };
-export const getTextureUrl = async args => {
+export const getTextureUrl = args => {
   const {
     texture,
-    asBase64Data
+    asDataUrl
   } = args || {};
   const buffer = texture?._buffer;
   if (_.isEmpty(buffer)) return texture?.url || '';
-  const url = await getImageFileFromBuffer({
+  return getImageFileFromBuffer({
     buffer,
-    asBase64Data
+    asDataUrl
   });
-  return url;
 };
 export const materialData = material => {
   const meshesWithMaterial = getUserMeshes().map(mesh => {
@@ -472,7 +478,7 @@ export const materialData = material => {
       name: material.albedoTexture?.name,
       url: getTextureUrl({
         texture: material.albedoTexture,
-        asBase64Data: true
+        asDataUrl: true
       })
     },
     albedoHasAlpha: material.albedoTexture?.hasAlpha || false,
@@ -482,7 +488,7 @@ export const materialData = material => {
       name: material.metallicTexture?.name,
       url: getTextureUrl({
         texture: material.metallicTexture,
-        asBase64Data: true
+        asDataUrl: true
       })
     },
     roughness: material.roughness,
@@ -490,7 +496,7 @@ export const materialData = material => {
       name: material.microSurfaceTexture?.name,
       url: getTextureUrl({
         texture: material.microSurfaceTexture,
-        asBase64Data: true
+        asDataUrl: true
       })
     },
     emissiveColor: material.emissiveColor?.toHexString() || props?.theme?.colors?.[props.$selectedTheme]?.black,
@@ -499,7 +505,7 @@ export const materialData = material => {
       name: material.emissiveTexture?.name,
       url: getTextureUrl({
         texture: material.emissiveTexture,
-        asBase64Data: true
+        asDataUrl: true
       })
     },
     bumpIntensity: material.bumpTexture?.level || 0.5,
@@ -507,7 +513,7 @@ export const materialData = material => {
       name: material.bumpTexture?.name,
       url: getTextureUrl({
         texture: material.bumpTexture,
-        asBase64Data: true
+        asDataUrl: true
       })
     },
     // Advanced
@@ -520,7 +526,7 @@ export const materialData = material => {
       name: material.opacityTexture?.name,
       url: getTextureUrl({
         texture: material.opacityTexture,
-        asBase64Data: true
+        asDataUrl: true
       })
     },
     transparencyMode: material.transparencyMode,

package/package.json

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

package/src/package/helpers/canvasUpdateHelpers.js

@@ -190,7 +190,7 @@ export const updateMaterial = inboundData => {
     clearTextureChannels,
   } = payload;
 
-  const material = scene.getMaterialByName(id, true);
+  const material = scene?.getMaterialByName?.(id, true);
 
   if (material) {
     // Renaming material.
@@ -220,7 +220,7 @@ export const updateMaterial = inboundData => {
 
     // Reset supported texture channels, useful when manually importing a new material.
     if (clearTextureChannels) {
-      const workingMaterial = scene.metadata.materials.find(mat => mat.materialId === id);
+      const workingMaterial = scene.metadata.materials.find(mat => mat.materialId === id) || {};
 
       Object.keys(workingMaterial)?.forEach(key => {
         if (key.endsWith('Texture')) {

package/src/package/helpers/utilityHelpers.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { GLTF2 } from 'babylonjs-loaders';
 import { GIZMOS, GUI, TRANSPARENCY_MODES } from '../constants';
 import { orthoOptions } from '../enums';
@@ -467,45 +468,47 @@ export const buildMeshPositionsArray = args => {
 };
 
 export const getImageFileFromBuffer = args => {
-  const { buffer, asBase64Data } = args || {};
+  const { buffer, asDataUrl } = args || {};
 
   if (_.isEmpty(buffer)) return '';
 
-  try {
-    const blob = new Blob([ buffer ], { type: 'image/png' });
-    const url = URL.createObjectURL(blob);
+  if (asDataUrl) {
+    const ascii = new Uint8Array(buffer);
 
-    if (asBase64Data) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
+    const Uint8ToString = u8a => {
+      if (_.isEmpty(u8a)) return '';
 
-        reader.onloadend = () => {
-          resolve(reader.result);
-        };
+      const maxChunkSize = 8192;
+      const chunks = [];
 
-        reader.onerror = error => {
-          console.error('Error reading buffer: ', error);
-          reject(error);
-        };
+      for (let i = 0; i < u8a.length; i += maxChunkSize) {
+        const newChunk = String.fromCharCode.apply(null, u8a.subarray(i, i + maxChunkSize));
+        chunks.push(newChunk);
+      }
 
-        reader.readAsDataURL(blob);
-      });
-    }
+      return chunks.join('');
+    };
 
-    return Promise.resolve(url);
-  } catch (error) {
-    console.error('Unable to get image from buffer: ', error);
-    return Promise.reject(error);
+    const dataString = btoa(Uint8ToString(ascii));
+    const blob = new Blob([ dataString ], { type: 'image/png' });
+    const blobUrl = URL.createObjectURL(blob);
+
+    console.log({ dataString, blob, blobUrl });
+    return blobUrl;
   }
+
+  const blob = new Blob([ buffer ], { type: 'image/png' });
+  const url = URL.createObjectURL(blob);
+
+  return url;
 };
 
-export const getTextureUrl = async args => {
-  const { texture, asBase64Data } = args || {};
+export const getTextureUrl = args => {
+  const { texture, asDataUrl } = args || {};
   const buffer = texture?._buffer;
 
   if (_.isEmpty(buffer)) return texture?.url || '';
-  const url = await getImageFileFromBuffer({ buffer, asBase64Data });
-  return url;
+  return getImageFileFromBuffer({ buffer, asDataUrl });
 };
 
 export const materialData = material => {
@@ -534,30 +537,30 @@ export const materialData = material => {
     albedoColor: material.albedoColor?.toHexString() || props?.theme?.colors?.[props.$selectedTheme]?.black,
     albedoTexture: {
       name: material.albedoTexture?.name,
-      url: getTextureUrl({ texture: material.albedoTexture, asBase64Data: true }),
+      url: getTextureUrl({ texture: material.albedoTexture, asDataUrl: true }),
     },
     albedoHasAlpha: material.albedoTexture?.hasAlpha || false,
     environmentIntensity: material.environmentIntensity,
     metallic: material.metallic,
     metallicTexture: {
       name: material.metallicTexture?.name,
-      url: getTextureUrl({ texture: material.metallicTexture, asBase64Data: true }),
+      url: getTextureUrl({ texture: material.metallicTexture, asDataUrl: true }),
     },
     roughness: material.roughness,
     microSurfaceTexture: {
       name: material.microSurfaceTexture?.name,
-      url: getTextureUrl({ texture: material.microSurfaceTexture, asBase64Data: true }),
+      url: getTextureUrl({ texture: material.microSurfaceTexture, asDataUrl: true }),
     },
     emissiveColor: material.emissiveColor?.toHexString() || props?.theme?.colors?.[props.$selectedTheme]?.black,
     emissiveIntensity: material.emissiveIntensity,
     emissiveTexture: {
       name: material.emissiveTexture?.name,
-      url: getTextureUrl({ texture: material.emissiveTexture, asBase64Data: true }),
+      url: getTextureUrl({ texture: material.emissiveTexture, asDataUrl: true }),
     },
     bumpIntensity: material.bumpTexture?.level || 0.5,
     bumpTexture: {
       name: material.bumpTexture?.name,
-      url: getTextureUrl({ texture: material.bumpTexture, asBase64Data: true }),
+      url: getTextureUrl({ texture: material.bumpTexture, asDataUrl: true }),
     },
 
     // Advanced
@@ -568,7 +571,7 @@ export const materialData = material => {
     alpha: material.alpha,
     opacityTexture: {
       name: material.opacityTexture?.name,
-      url: getTextureUrl({ texture: material.opacityTexture, asBase64Data: true }),
+      url: getTextureUrl({ texture: material.opacityTexture, asDataUrl: true }),
     },
     transparencyMode: material.transparencyMode,
     sssRefractionEnabled: material.subSurface?.isRefractionEnabled || false,