@archvisioninc/canvas 3.3.8 → 3.3.9

package/dist/helpers/loadHelpers.js

@@ -0,0 +1,269 @@
+import * as BABYLON from 'babylonjs';
+
+// GLTFFileLoader needs to be declared for the GLTF loader to work -- even if unused.
+// eslint-disable-next-line no-unused-vars
+import { GLTFFileLoader } from 'babylonjs-loaders';
+import { reactProps as props } from '../Canvas';
+import { DRAG_DROP_FORMATS } from '../enums';
+import { canvas, engine, scene, initSceneFromFile, blobToGLB, getUserMaterials, getUserTextures, getUserMeshes } from '../helpers';
+import { MESSAGE_TYPES, TEXTURE_SIZE_THRESHOLD, MATERIAL_COUNT_THRESHOLD, MESH_COUNT_THRESHOLD } from '../constants';
+import _ from 'lodash';
+import { modelToOrigin } from '../actions';
+const {
+  REACT_APP_NAME: name
+} = process.env;
+const inCanvasIDE = name === '@archvisioninc/canvas';
+const clearExisting = true;
+export const newEngine = async () => {
+  const webGLSupported = () => {
+    try {
+      const canvas = document.createElement('canvas');
+      return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
+    } catch (e) {
+      return false;
+    }
+  };
+  if (webGLSupported()) {
+    const webGLEngine = () => new BABYLON.Engine(canvas, true);
+    const enableWebGPU = false;
+    try {
+      const browserSupported = await BABYLON.WebGPUEngine.IsSupportedAsync;
+      if (browserSupported && enableWebGPU) {
+        const webGPUEngine = new BABYLON.WebGPUEngine(canvas);
+        await webGPUEngine.initAsync(canvas);
+        return webGPUEngine;
+      }
+      return webGLEngine();
+    } catch (e) {
+      console.error(e);
+      return webGLEngine();
+    }
+  }
+  return new BABYLON.NullEngine();
+};
+export const newScene = () => new BABYLON.Scene(engine);
+export const checkForLargeTextures = () => {
+  const userTextures = getUserTextures();
+  const largeTexture = userTextures.find(texture => {
+    const size = texture.getSize();
+    const isLargeTexture = size?.width >= TEXTURE_SIZE_THRESHOLD || size?.height >= TEXTURE_SIZE_THRESHOLD;
+    if (isLargeTexture) return texture;
+  });
+  return largeTexture;
+};
+export const warningChecks = () => {
+  const hasLargeFile = checkForLargeTextures();
+  const manyMaterials = getUserMaterials().length > MATERIAL_COUNT_THRESHOLD;
+  const manyMeshes = getUserMeshes().length > MESH_COUNT_THRESHOLD;
+  const messages = [];
+  const config = {
+    type: MESSAGE_TYPES.warning,
+    closeButton: true,
+    timer: 4
+  };
+  if (hasLargeFile) {
+    const message = `Large textures at or above ${TEXTURE_SIZE_THRESHOLD}, performance may be affected.`;
+    messages.push({
+      message,
+      config
+    });
+  }
+  if (manyMaterials) {
+    const message = 'High material count, performance may be affected.';
+    messages.push({
+      message,
+      config
+    });
+  }
+  if (manyMeshes) {
+    const message = 'High mesh count, shadows disabled for performance. Reenable in environments panel.';
+    const directionalLight = scene.getLightById('directional');
+    directionalLight.shadowEnabled = false;
+    messages.push({
+      message,
+      config
+    });
+  }
+  props.addNotification?.(messages, clearExisting);
+};
+const checkSupportedFileTypes = files => {
+  const config = {
+    type: MESSAGE_TYPES.error
+  };
+  let hasPrimaryFile = false;
+  if (files) {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const workingExtension = file.name.split('.').pop() || '';
+      if (!hasPrimaryFile && DRAG_DROP_FORMATS.includes(workingExtension)) {
+        hasPrimaryFile = true;
+        break;
+      }
+    }
+  }
+  if (!hasPrimaryFile) {
+    const message = 'Please upload a .gltf or .glb file.';
+    props.addNotification?.([{
+      message,
+      config
+    }], clearExisting);
+  }
+};
+export const progressConfig = (currentStep, bytesLoaded, bytesTotal) => {
+  const config = {
+    type: MESSAGE_TYPES.loading,
+    showModal: (inCanvasIDE || props.previewMode) && !props.integration ? false : true,
+    currentStep,
+    closeButton: false,
+    totalSteps: 2,
+    bytesLoaded,
+    bytesTotal
+  };
+  return config;
+};
+const onProgress = (e, args) => {
+  const {
+    addNotification
+  } = args;
+  const loaded = e.loaded;
+  const total = e.total || loaded;
+  const progress = (bytes, totalBytes) => {
+    const conversionUnit = 1024;
+    const unit = value => {
+      const inKB = value / conversionUnit;
+      const inMB = inKB / conversionUnit;
+      const inGB = inMB / conversionUnit;
+      const isGB = inMB >= conversionUnit;
+      const raw = isGB ? inGB : inMB;
+      const label = isGB ? 'GB' : 'MB';
+      return {
+        raw,
+        label
+      };
+    };
+    const label = unit(bytes).label;
+    const total = parseFloat(totalBytes || 0);
+    const stringOptions = {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    };
+    const size = `${unit(bytes).raw?.toLocaleString('en-US', stringOptions)} ${label}`;
+    const percent = `${Math.floor(bytes / total * 100)}%`;
+    const finalSize = `${unit(total).raw.toLocaleString('en-US', stringOptions)} ${unit(total).label}`;
+    const both = `${finalSize} ${percent}`;
+    return {
+      size,
+      percent,
+      both
+    };
+  };
+  const message = {
+    message: props.previewMode ? 'Building preview...' : `Loading... ${progress(loaded, total).both}`,
+    config: progressConfig(2, loaded, total)
+  };
+  addNotification?.([message], clearExisting);
+};
+export const loadFromGuidURL = url => {
+  try {
+    if (!url) throw new Error('No URL provided');
+    const sceneLoader = BABYLON.SceneLoader;
+    const handleProgress = e => onProgress(e, {
+      addNotification: props.addNotification
+    });
+    sceneLoader.ShowLoadingScreen = false;
+    sceneLoader.LoadAsync(url, null, engine, handleProgress).then(sceneData => {
+      props.clearNotifications?.();
+      initSceneFromFile(sceneData);
+    });
+  } catch (e) {
+    console.error(e);
+    props.addNotification?.([{
+      message: e,
+      config: {
+        type: MESSAGE_TYPES.error
+      }
+    }], clearExisting);
+  }
+};
+export const loadFromBlob = blob => {
+  try {
+    if (!blob) throw new Error('No file provided');
+    const file = blobToGLB(blob, 'downloadedModel');
+    const sceneLoader = BABYLON.SceneLoader;
+    const handleProgress = e => onProgress(e, {
+      addNotification: props.addNotification
+    });
+    sceneLoader.ShowLoadingScreen = false;
+    sceneLoader.LoadAsync('file:', file, engine, handleProgress).then(sceneData => {
+      props.clearNotifications?.();
+      initSceneFromFile(sceneData);
+    });
+  } catch (e) {
+    console.error(e);
+    props.addNotification?.([{
+      message: e,
+      config: {
+        type: MESSAGE_TYPES.error
+      }
+    }], clearExisting);
+  }
+};
+let filesInput;
+export const loadFromDragDrop = () => {
+  const handleCloseLoading = () => props.clearNotifications?.();
+  const sceneLoaded = (file, newScene) => {
+    const fileName = file.name.split('.').shift();
+    initSceneFromFile(newScene, fileName);
+    modelToOrigin();
+  };
+  const onProgress = null;
+  const additionalRenderLoopLogic = null;
+  const textureLoading = null;
+  const startingProcessingFiles = () => {
+    const hasGuid = !_.isEmpty(props.guidURL);
+    if (hasGuid) {
+      // eslint-disable-next-line max-len
+      const message = "This model has published data that can't be updated from a drag and drop operation. Use Create from gLTF to start a new file.";
+      const config = {
+        type: MESSAGE_TYPES.warning
+      };
+      props.addNotification?.([{
+        message,
+        config
+      }], clearExisting);
+      throw new Error(message);
+    }
+    checkSupportedFileTypes();
+  };
+  const onReload = null;
+  const onError = (file, scene, error) => {
+    const missingBin = error.includes('.bin');
+    const missingTextures = error.includes('textures/');
+    const missingMessage = `Missing ${missingTextures ? 'textures folder' : '.bin file'}.`;
+    const message = missingBin || missingTextures ? missingMessage : error;
+    const config = {
+      type: MESSAGE_TYPES.error
+    };
+    handleCloseLoading();
+    props.addNotification?.([{
+      message,
+      config
+    }], clearExisting);
+  };
+  const handleDisplayLoading = () => {
+    const message = 'Importing...';
+    const config = {
+      type: MESSAGE_TYPES.loading,
+      showModal: inCanvasIDE || props.previewMode ? false : true
+    };
+    props.addNotification?.([{
+      message,
+      config
+    }], clearExisting);
+  };
+  BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = handleDisplayLoading;
+  BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = _.noop;
+  if (filesInput) filesInput.dispose();
+  filesInput = new BABYLON.FilesInput(engine, scene, sceneLoaded, onProgress, additionalRenderLoopLogic, textureLoading, startingProcessingFiles, onReload, onError);
+  filesInput.monitorElementForDragNDrop(canvas);
+};

package/dist/helpers/materialHelpers.js

@@ -0,0 +1,34 @@
+import * as BABYLON from 'babylonjs';
+import * as MATERIALS from 'babylonjs-materials';
+import { scene, newColor } from '../helpers';
+import { exclusionMaterials } from '../enums';
+export const getUserMaterials = () => {
+  const materials = scene.materials.filter(material => !exclusionMaterials.includes(material.id));
+  return materials;
+};
+export const getUserTextures = () => {
+  const userMaterials = getUserMaterials();
+  const userTextures = userMaterials.map(material => material.getActiveTextures());
+  return userTextures.flat();
+};
+export const newPBRMaterial = name => {
+  const defaultName = `pbrMaterial_${getUserMaterials().length + 1}`;
+  return new BABYLON.PBRMaterial(name || defaultName, scene);
+};
+export const newStandardMaterial = name => {
+  const defaultName = `standardMaterial_${getUserMaterials().length + 1}`;
+  return new BABYLON.StandardMaterial(name || defaultName, scene);
+};
+export const newGridMaterial = name => {
+  const gridMaterialName = name || `grid_${getUserMaterials().length}`;
+  return new MATERIALS.GridMaterial(gridMaterialName, scene);
+};
+export const setDefaultGridProperties = material => {
+  material.majorUnitFrequency = 1;
+  material.minorUnitVisibility = 0.5;
+  material.gridRatio = 1;
+  material.backFaceCulling = false;
+  material.mainColor = newColor(0.25, 0.27, 0.33);
+  material.lineColor = newColor(0.33, 0.35, 0.42);
+  material.opacity = 0.95;
+};

package/dist/helpers/meshHelpers.js

@@ -0,0 +1,169 @@
+import * as BABYLON from 'babylonjs';
+import { scene, selectedMeshes, newVector, getRadius, getMidpoint, canvas } from '../helpers';
+import { exclusionMeshes, exclusionTNodes, scaleUnits } from '../enums';
+import { MESH_PARAMS } from '../constants';
+import _ from 'lodash';
+export const getUserNodes = () => {
+  const userNodes = scene.transformNodes.filter(node => {
+    const validNode = !exclusionTNodes.includes(node.id);
+    if (validNode) return node;
+  });
+  return userNodes;
+};
+export const getUserMeshes = () => {
+  const meshes = scene.meshes.filter(mesh => {
+    const validMesh = !exclusionMeshes.includes(mesh.id) && mesh.subMeshes;
+    if (validMesh) return mesh;
+  });
+  return meshes;
+};
+export const newGround = (name, groundOptions = {}) => {
+  const groundName = name || `ground_${getUserMeshes().length + 1}`;
+  return BABYLON.MeshBuilder.CreateGround(groundName, groundOptions, scene);
+};
+export const getScaleFactor = sourceUnit => {
+  const unit = _.toLower(sourceUnit);
+  const validUnit = sourceUnit && scaleUnits.find(item => item.name === unit || item.abbreviation === unit);
+  return validUnit ? validUnit.scaleFactor : 1;
+};
+export const getBoundingMeshData = meshArray => {
+  const meshes = meshArray || getUserMeshes();
+  const singleSelection = meshes.length === 1;
+  const singleBox = singleSelection && meshes[0]?.getBoundingInfo?.().boundingBox;
+  const scaling = singleSelection && meshes[0].scaling;
+  const rotation = singleSelection && meshes[0].rotation;
+  let minimum = newVector(0, 0, 0);
+  let maximum = newVector(0, 0, 0);
+  for (let i = 0; i < meshes.length; i++) {
+    const boundingInfo = meshes[i]?.getBoundingInfo?.();
+    if (boundingInfo) {
+      const workingBoundingBox = boundingInfo.boundingBox;
+      if (i === 0) {
+        maximum = workingBoundingBox.maximumWorld;
+        minimum = workingBoundingBox.minimumWorld;
+        continue;
+      }
+      maximum = maximum.maximizeInPlace(workingBoundingBox.maximumWorld);
+      minimum = minimum.minimizeInPlace(workingBoundingBox.minimumWorld);
+    }
+  }
+  const boundingBox = {
+    ...(singleBox || {}),
+    center: getMidpoint(minimum, maximum),
+    minimum,
+    maximum,
+    radius: getRadius(minimum, maximum),
+    scaling: scaling || newVector(1, 1, 1),
+    rotation: rotation || newVector(0, 0, 0)
+  };
+  if (!_.isEmpty(boundingBox)) return boundingBox;
+};
+export const getBoundingDistance = () => {
+  const sceneBoundingMesh = getBoundingMeshData();
+  if (sceneBoundingMesh) {
+    const boundingBox = sceneBoundingMesh;
+    const min = boundingBox.minimum;
+    const max = boundingBox.maximum;
+    const xDelta = Math.abs(max._x - min._x);
+    const yDelta = Math.abs(max._y - min._y);
+    const zDelta = Math.abs(max._z - min._z);
+    const distance = Math.sqrt(Math.pow(xDelta, 2) + Math.pow(yDelta, 2) + Math.pow(zDelta, 2));
+    return distance;
+  }
+};
+export const getParamOfSelectedMeshes = parameter => {
+  const meshes = selectedMeshes.length > 0 ? selectedMeshes : getUserMeshes();
+  const boundingBox = getBoundingMeshData(meshes);
+  if (boundingBox) {
+    const {
+      center,
+      radius,
+      rotation,
+      scaling,
+      centerWorld
+    } = boundingBox;
+    switch (parameter) {
+      case MESH_PARAMS.rotation:
+        return rotation;
+      case MESH_PARAMS.scaling:
+        return scaling;
+      case MESH_PARAMS.radius:
+        return radius;
+      default:
+        return centerWorld || center;
+    }
+  }
+};
+export const getMeshVertices = (meshes, kind = BABYLON.VertexBuffer.PositionKind) => {
+  const groupedVertices = [];
+  meshes.forEach(mesh => {
+    const buffer = mesh.getVerticesData(kind);
+    const vertices = [];
+    for (let i = 0; i < buffer.length; i += 3) {
+      const vertex = newVector(buffer[i], buffer[i + 1], buffer[i + 2]);
+      vertices.push(vertex);
+    }
+    groupedVertices.push({
+      mesh: mesh.id,
+      vertices
+    });
+  });
+  return groupedVertices;
+};
+export const getWorldPositionsByMesh = (meshName, vertices) => {
+  const mesh = scene.getMeshById(meshName);
+  const meshWorldMatrix = mesh.getWorldMatrix(true);
+  const positionArray = vertices.map(vertex => {
+    return BABYLON.Vector3.TransformCoordinates(vertex, meshWorldMatrix);
+  });
+  return positionArray;
+};
+
+// Below is from https://forum.unity.com/threads/calculating-world-to-screen-projection-manully.1197199/
+// It is converted to work specifically with BabylonJS
+
+const WorldToLocal = (aCamPos, aCamRot, aPos) => {
+  const inverse = BABYLON.Quaternion.Inverse(aCamRot);
+  const camToVertex = aPos.subtract(aCamPos);
+  const toLocal = camToVertex.applyRotationQuaternion(inverse);
+  return toLocal;
+};
+const Project = (aPos, aFov, aAspect) => {
+  let f = 1 / Math.tan(aFov * 0.5);
+  f = f / aPos.z;
+  aPos.x *= f / aAspect;
+  aPos.y *= f;
+  return aPos;
+};
+const ClipSpaceToViewport = aPos => {
+  aPos.x = aPos.x * 0.5 + 0.5;
+  aPos.y = aPos.y * 0.5 + 0.5;
+  return aPos;
+};
+const WorldToViewport = (aCamPos, aCamRot, aFov, aAspect, aPos) => {
+  let p = WorldToLocal(aCamPos, aCamRot, aPos);
+  p = Project(p, aFov, aAspect);
+  return ClipSpaceToViewport(p);
+};
+const WorldToScreenPos = (aCamPos, aCamRot, aFov, aScrWidth, aScrHeight, aPos) => {
+  const p = WorldToViewport(aCamPos, aCamRot, aFov, aScrWidth / aScrHeight, aPos);
+  p.x *= aScrWidth;
+  p.y *= aScrHeight;
+  return p;
+};
+export const WorldToGUIPos = (aCamPos, aCamRot, aFov, aScrWidth, aScrHeight, aPos) => {
+  const xScale = 1 / aScrWidth;
+  const yScale = 1 / aScrHeight;
+  let p = WorldToScreenPos(aCamPos, aCamRot, aFov, aScrWidth, aScrHeight, aPos);
+  p.y = aScrHeight - p.y;
+  p = p.multiplyByFloats(xScale, yScale, 1);
+  return p;
+};
+export const getScaleToZeroOne = vertices => {
+  const scaledVertices = vertices.map(vertex => {
+    const xScale = 1 / canvas.width;
+    const yScale = 1 / canvas.height;
+    return vertex.multiplyByFloats(xScale, yScale, 1);
+  });
+  return scaledVertices;
+};

package/dist/helpers/rayHelpers.js

@@ -0,0 +1,11 @@
+import * as BABYLON from 'babylonjs';
+import { scene, newColor } from '../helpers';
+const debug = false;
+export const newPickingRay = (x, y) => {
+  const ray = scene.createPickingRay(x, y, BABYLON.Matrix.Identity(), scene.activeCamera);
+  const rayHelper = new BABYLON.RayHelper(ray);
+  if (debug) {
+    rayHelper.show(scene, newColor('#359eff'));
+  }
+  return rayHelper;
+};

package/dist/helpers/shortcutHelpers.js

@@ -0,0 +1,35 @@
+import { LISTENERS } from '../constants';
+import { serializeScene, shortcutArray } from '../helpers';
+import { reactProps as props } from '../Canvas';
+import _ from 'lodash';
+let initiatedListeners = [];
+const actionFunction = args => {
+  const {
+    event,
+    shortcutArray
+  } = args;
+  const currentShortcut = shortcutArray.find(shortcut => shortcut.key === event.key);
+  const isInput = event?.target.localName === 'input';
+  if (!_.isEmpty(currentShortcut) && !isInput) {
+    event.preventDefault();
+    currentShortcut.action(event);
+    props.setSerializedData?.(serializeScene());
+  }
+};
+const shortcutListener = e => actionFunction({
+  event: e,
+  shortcutArray
+});
+export const handleShortcutListeners = remove => {
+  const keyup = LISTENERS.keyup;
+  if (remove) {
+    if (initiatedListeners.includes(keyup)) {
+      window.removeEventListener(keyup, shortcutListener);
+      initiatedListeners = [];
+    }
+    return;
+  }
+  if (initiatedListeners.includes(keyup)) return;
+  window.addEventListener(keyup, shortcutListener);
+  initiatedListeners.push(keyup);
+};