@archvisioninc/canvas 2.6.7 → 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) {

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';
@@ -406,18 +407,53 @@ export const buildMeshPositionsArray = args => {
     return defaultMeshPosition;
   });
 };
-export const getImageFileFromBuffer = buffer => {
+export const getImageFileFromBuffer = args => {
+  const {
+    buffer,
+    asDataUrl
+  } = args || {};
   if (_.isEmpty(buffer)) return '';
+  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 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 = texture => {
+export const getTextureUrl = args => {
+  const {
+    texture,
+    asDataUrl
+  } = args || {};
   const buffer = texture?._buffer;
   if (_.isEmpty(buffer)) return texture?.url || '';
-  return getImageFileFromBuffer(buffer);
+  return getImageFileFromBuffer({
+    buffer,
+    asDataUrl
+  });
 };
 export const materialData = material => {
   const meshesWithMaterial = getUserMeshes().map(mesh => {
@@ -440,30 +476,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,
+        asDataUrl: 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,
+        asDataUrl: true
+      })
     },
     roughness: material.roughness,
     microSurfaceTexture: {
       name: material.microSurfaceTexture?.name,
-      url: getTextureUrl(material.microSurfaceTexture)
+      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(material.emissiveTexture)
+      url: getTextureUrl({
+        texture: material.emissiveTexture,
+        asDataUrl: true
+      })
     },
     bumpIntensity: material.bumpTexture?.level || 0.5,
     bumpTexture: {
       name: material.bumpTexture?.name,
-      url: getTextureUrl(material.bumpTexture)
+      url: getTextureUrl({
+        texture: material.bumpTexture,
+        asDataUrl: true
+      })
     },
     // Advanced
     clearCoatEnabled: material.clearCoat?.isEnabled || false,
@@ -473,7 +524,10 @@ export const materialData = material => {
     alpha: material.alpha,
     opacityTexture: {
       name: material.opacityTexture?.name,
-      url: getTextureUrl(material.opacityTexture)
+      url: getTextureUrl({
+        texture: material.opacityTexture,
+        asDataUrl: true
+      })
     },
     transparencyMode: material.transparencyMode,
     sssRefractionEnabled: material.subSurface?.isRefractionEnabled || false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archvisioninc/canvas",
-  "version": "2.6.7",
+  "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.

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';
@@ -466,20 +467,48 @@ export const buildMeshPositionsArray = args => {
   });
 };
 
-export const getImageFileFromBuffer = buffer => {
+export const getImageFileFromBuffer = args => {
+  const { buffer, asDataUrl } = args || {};
+
   if (_.isEmpty(buffer)) return '';
 
+  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 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 = texture => {
+export const getTextureUrl = args => {
+  const { texture, asDataUrl } = args || {};
   const buffer = texture?._buffer;
 
   if (_.isEmpty(buffer)) return texture?.url || '';
-  return getImageFileFromBuffer(buffer);
+  return getImageFileFromBuffer({ buffer, asDataUrl });
 };
 
 export const materialData = material => {
@@ -508,30 +537,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, asDataUrl: 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, asDataUrl: true }),
     },
     roughness: material.roughness,
     microSurfaceTexture: {
       name: material.microSurfaceTexture?.name,
-      url: getTextureUrl(material.microSurfaceTexture),
+      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(material.emissiveTexture),
+      url: getTextureUrl({ texture: material.emissiveTexture, asDataUrl: true }),
     },
     bumpIntensity: material.bumpTexture?.level || 0.5,
     bumpTexture: {
       name: material.bumpTexture?.name,
-      url: getTextureUrl(material.bumpTexture),
+      url: getTextureUrl({ texture: material.bumpTexture, asDataUrl: true }),
     },
 
     // Advanced
@@ -542,7 +571,7 @@ export const materialData = material => {
     alpha: material.alpha,
     opacityTexture: {
       name: material.opacityTexture?.name,
-      url: getTextureUrl(material.opacityTexture),
+      url: getTextureUrl({ texture: material.opacityTexture, asDataUrl: true }),
     },
     transparencyMode: material.transparencyMode,
     sssRefractionEnabled: material.subSurface?.isRefractionEnabled || false,