@archvisioninc/canvas 3.3.8 → 3.3.10

package/dist/helpers/cameraHelpers.js

@@ -0,0 +1,86 @@
+import * as BABYLON from 'babylonjs';
+import { newVector } from './utilityHelpers';
+import { scene, engine, canvas, selectedMeshes, getParamOfSelectedMeshes, getUserMeshes, defaultCameraPosition, getBoundingMeshData } from '../helpers';
+import { CAMERAS, MESH_PARAMS } from '../constants';
+import { focusCamera, toggleTurntable } from '../actions';
+import { orthoOptions, ratios } from '../enums';
+import _ from 'lodash';
+export const newCamera = (name, location, type, meta = {}) => {
+  const defaultName = `camera_${getSceneCameras().length + 1}`;
+  if (type === CAMERAS.ArcRotateCamera) {
+    return new BABYLON.ArcRotateCamera(name || defaultName, meta.alpha || 0, meta.beta || 0, meta.radius || 0, newVector(location.x, location.y, location.z), scene);
+  }
+  if (CAMERAS[type] && typeof BABYLON[type] === 'function') {
+    return new BABYLON[type](name || defaultName, newVector(location.x, location.y, location.z), scene);
+  }
+};
+export const prepareCamera = () => {
+  const camera = scene.activeCamera;
+  const canvasDimensions = engine?.getRenderingCanvasClientRect?.();
+  const width = canvasDimensions?.width || ratios.square.value;
+  const height = canvasDimensions?.height || ratios.square.value;
+  const aspect = height / width;
+  const userMeshes = getUserMeshes();
+  camera.orthoLeft = -camera.radius;
+  camera.orthoTop = camera.radius * aspect;
+  camera.orthoRight = camera.radius;
+  camera.orthoBottom = -camera.radius * aspect;
+  camera.lowerRadiusLimit = 1;
+  camera.upperRadiusLimit = 5000;
+  camera.minZ = 0.1;
+  camera.setPosition?.(defaultCameraPosition());
+  camera.setTarget(BABYLON.Vector3.Zero());
+  camera.attachControl(canvas, true);
+  _.isEmpty(userMeshes) ? toggleTurntable(true) : focusCamera();
+};
+export const prepareMaterialCamera = () => {
+  const camera = scene.activeCamera;
+  const sphere = scene.getMeshById('node0');
+  camera.position = defaultCameraPosition();
+  if (sphere) {
+    const primarySurfaces = [sphere];
+    const meshCenter = getBoundingMeshData(primarySurfaces).center;
+    camera.setTarget(meshCenter);
+    camera.alpha = 1.57;
+    camera.beta = 1.65;
+    camera.lowerRadiusLimit = 0.3239;
+    camera.upperRadiusLimit = 5000;
+    camera.minZ = 0.1;
+    camera.maxZ = 10000;
+    camera.radius = 4;
+  }
+};
+export const toggleCameraMode = (orthoCamera, requestedMode) => {
+  const camera = scene.activeCamera;
+  const babylonOrthographic = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
+  const ratio = canvas.height / canvas.width;
+  if (!camera) return;
+  camera.mode = requestedMode;
+  if (camera.mode === babylonOrthographic) {
+    if (!_.isEmpty(selectedMeshes)) {
+      camera.target = getParamOfSelectedMeshes(MESH_PARAMS.center);
+    }
+    camera.alpha = orthoOptions[orthoCamera].alpha;
+    camera.beta = orthoOptions[orthoCamera].beta;
+
+    // Zooming
+    camera.lowerRadiusLimit = 5;
+    camera.upperRadiusLimit = 5000;
+    camera.minZ = 0.1;
+    camera.maxZ = 10000;
+    camera.wheelDeltaPercentage = 0.01;
+    let oldRadius = camera.radius;
+    scene.onBeforeRenderObservable.add(() => {
+      if (oldRadius !== camera.radius) {
+        const radiusChangeRatio = camera.radius / oldRadius;
+        camera.orthoLeft *= radiusChangeRatio;
+        camera.orthoRight *= radiusChangeRatio;
+        oldRadius = camera.radius;
+        camera.orthoTop = camera.orthoRight * ratio;
+        camera.orthoBottom = camera.orthoLeft * ratio;
+      }
+    });
+  }
+  focusCamera?.();
+};
+export const getSceneCameras = () => scene.cameras;

package/dist/helpers/canvasAddHelpers.js

@@ -0,0 +1,161 @@
+import { scene } from './initHelpers';
+import { newMetaDataEntry, newTexture } from './utilityHelpers';
+import { selectedMeshes } from './viewportHelpers';
+import { singleMeshTNode, toDegrees } from '../helpers';
+import { MESSAGE_TYPES } from '../constants';
+import { reactProps as props } from '../Canvas';
+import _ from 'lodash';
+export const addToMaterial = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id,
+    albedoTexture,
+    metallicTexture,
+    microSurfaceTexture,
+    emissiveTexture,
+    bumpTexture
+  } = payload;
+  const material = scene.getMaterialByName(id, true);
+  if (material) {
+    // Basic attribute textures.
+    if (_.isString(albedoTexture)) material.albedoTexture = newTexture(albedoTexture);
+    if (_.isString(metallicTexture)) material.metallicTexture = newTexture(metallicTexture);
+    if (_.isString(microSurfaceTexture)) material.microSurfaceTexture = newTexture(microSurfaceTexture);
+    if (_.isString(emissiveTexture)) material.emissiveTexture = newTexture(emissiveTexture);
+    if (_.isString(bumpTexture)) material.bumpTexture = newTexture(bumpTexture);
+  }
+};
+export const addToMesh = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id
+  } = payload;
+  if (_.isEmpty(selectedMeshes) || selectedMeshes.length > 1) {
+    return;
+  }
+  const mesh = selectedMeshes[0];
+  if (mesh) {
+    // Custom user mesh positions.
+    const duplicate = scene.metadata?.userMeshPositions?.find(meshPos => meshPos.meshId === mesh.id && meshPos.positionId === id);
+    if (_.isString(id) && !duplicate) {
+      const {
+        position,
+        rotation,
+        scaling
+      } = singleMeshTNode;
+      const [tx, ty, tz] = position.asArray();
+      const [rx, ry, rz] = rotation.asArray().map(val => toDegrees(val * -1));
+      const [sx, sy, sz] = scaling.asArray();
+      const positionObj = {
+        meshId: mesh.id,
+        positionId: id,
+        tx,
+        ty,
+        tz,
+        rx,
+        ry,
+        rz,
+        sx,
+        sy,
+        sz
+      };
+      const updatedPositions = [...(scene.metadata?.userMeshPositions || {}), positionObj];
+      const selectedUserMeshPositions = scene.metadata.selectedUserMeshPositions;
+      const filteredPositions = selectedUserMeshPositions.filter(pos => pos.meshId !== mesh.id);
+      filteredPositions.push(positionObj);
+      newMetaDataEntry('userMeshPositions', updatedPositions.filter(item => item));
+      newMetaDataEntry('selectedUserMeshPositions', filteredPositions);
+    }
+  }
+};
+export const addToCamera = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id
+  } = payload;
+  const camera = scene.activeCamera;
+  if (camera) {
+    // Custom user camera views.
+    const duplicate = scene.metadata?.userCameraViews.find(cameraPos => cameraPos.id === id);
+    if (_.isString(id) && !duplicate) {
+      const {
+        position,
+        rotation,
+        target
+      } = scene.activeCamera;
+      const [tx, ty, tz] = [position.x, position.y, position.z];
+      const [rx, ry, rz] = [rotation.x, rotation.y, rotation.z];
+      const [tarX, tarY, tarZ] = [target.x, target.y, target.z];
+      const updatedPositions = [...(scene.metadata?.userCameraViews || []), {
+        id,
+        tx,
+        ty,
+        tz,
+        rx,
+        ry,
+        rz,
+        tarX,
+        tarY,
+        tarZ
+      }];
+      newMetaDataEntry('userCameraViews', updatedPositions.filter(item => item));
+      newMetaDataEntry('selectedUserCameraView', {
+        id,
+        tx,
+        ty,
+        tz,
+        rx,
+        ry,
+        rz,
+        tarX,
+        tarY,
+        tarZ
+      });
+    }
+  }
+};
+export const addToEnvironment = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id,
+    url
+  } = payload;
+  const skyBox = scene.getMaterialById('skyBox', true);
+  if (skyBox) {
+    // Add custom user environment.
+    const duplicate = scene.metadata?.userEnvironments.find(env => env.id === id);
+    const isNotDefault = url !== scene.metadata.defaultEnvironment;
+    const isValid = isNotDefault && _.isString(id) && _.isString(url) && !duplicate;
+    if (isValid) {
+      const message = 'Adding custom environment...';
+      const clearExisting = true;
+      const isUserFile = true;
+      const config = {
+        type: MESSAGE_TYPES.loading,
+        showModal: true,
+        closeButton: false
+      };
+      props.addNotification?.([{
+        message,
+        config
+      }], clearExisting);
+      newTexture(url, isUserFile);
+      const updatedEnvironments = [...(scene.metadata?.userEnvironments || {}), {
+        id,
+        url
+      }];
+      newMetaDataEntry('userEnvironments', updatedEnvironments.filter(item => item));
+    }
+  }
+};
+export const addToViewport = () => {
+  // Add functions here...
+};

package/dist/helpers/canvasCommunicationHelpers.js

@@ -0,0 +1,52 @@
+import { UPDATABLE_ITEMS } from '../constants';
+import { updateMaterial, addToMaterial, removeFromMaterial, updateMesh, addToMesh, removeFromMesh, updateCamera, addToCamera, removeFromCamera, updateEnvironment, addToEnvironment, removeFromEnvironment, updateViewport, addToViewport, removeFromViewport, serializeScene, updatePublish, newMetaDataEntry, buildMeshIdArray, updateLighting } from '../helpers';
+import { reactProps as props } from '../Canvas';
+export const updateItem = inboundData => {
+  const {
+    type,
+    method
+  } = inboundData;
+  const types = Object.keys(UPDATABLE_ITEMS);
+  const isValidType = types.includes(type);
+  const hidden = true;
+  if (isValidType) {
+    switch (type) {
+      case UPDATABLE_ITEMS.material:
+        if (method === 'update') updateMaterial(inboundData);
+        if (method === 'add') addToMaterial(inboundData);
+        if (method === 'remove') removeFromMaterial(inboundData);
+        break;
+      case UPDATABLE_ITEMS.mesh:
+        if (method === 'update') updateMesh(inboundData);
+        if (method === 'add') addToMesh(inboundData);
+        if (method === 'remove') removeFromMesh(inboundData);
+        break;
+      case UPDATABLE_ITEMS.camera:
+        if (method === 'update') updateCamera(inboundData);
+        if (method === 'add') addToCamera(inboundData);
+        if (method === 'remove') removeFromCamera(inboundData);
+        break;
+      case UPDATABLE_ITEMS.environment:
+        if (method === 'update') updateEnvironment(inboundData);
+        if (method === 'add') addToEnvironment(inboundData);
+        if (method === 'remove') removeFromEnvironment(inboundData);
+        break;
+      case UPDATABLE_ITEMS.viewport:
+        if (method === 'update') updateViewport(inboundData);
+        if (method === 'add') addToViewport(inboundData);
+        if (method === 'remove') removeFromViewport(inboundData);
+        break;
+      case UPDATABLE_ITEMS.publish:
+        if (method === 'update') updatePublish(inboundData);
+        break;
+      case UPDATABLE_ITEMS.lighting:
+        if (method === 'update') updateLighting(inboundData);
+        break;
+      default:
+        break;
+    }
+    newMetaDataEntry('hiddenMeshes', buildMeshIdArray(hidden));
+    props.setSerializedData?.(serializeScene());
+    props.clearUpdateData?.();
+  }
+};

package/dist/helpers/canvasRemoveHelpers.js

@@ -0,0 +1,230 @@
+import { scene, newMetaDataEntry, selectedMeshes, updateCamera, updateEnvironment, buildMaterialsArray, buildSelectedMaterialArray, serializeScene } from '../helpers';
+import { reactProps as props } from '../Canvas';
+import { deleteSelected } from '../actions';
+import { TRANSPARENCY_MODES } from '../constants';
+import * as BABYLON from 'babylonjs';
+import _ from 'lodash';
+const removeChannelFromTexture = (image, channel) => {
+  const imageHeight = image?.naturalHeight ?? 0;
+  const imageWidth = image?.naturalWidth ?? 0;
+  let imageData;
+  const maxHeight = Math.max(...[imageHeight, 1024]);
+  const maxWidth = Math.max(...[imageWidth, 1024]);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  canvas.width = maxWidth;
+  canvas.height = maxHeight;
+  if (image) {
+    ctx.drawImage(image, 0, 0, maxWidth, maxHeight);
+    imageData = ctx.getImageData(0, 0, maxWidth, maxHeight).data;
+  }
+  const combinedImageData = ctx.createImageData(maxWidth, maxHeight);
+  const combinedData = combinedImageData.data;
+  for (let i = 0; i < combinedData.length; i += 4) {
+    combinedData[i] = channel === 'R' ? 0 : imageData[i];
+    combinedData[i + 1] = channel === 'G' ? 0 : imageData[i + 1];
+    combinedData[i + 2] = channel === 'B' ? 0 : imageData[i + 2];
+    combinedData[i + 3] = channel === 'A' ? 255 : imageData[i + 3];
+  }
+  ctx.putImageData(combinedImageData, 0, 0);
+  return canvas.toDataURL('image/png');
+};
+const textureToImage = texture => {
+  return new Promise(resolve => {
+    if (!texture.readPixels()) {
+      resolve(null);
+      return;
+    }
+    texture.readPixels().then(pixels => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const {
+        width,
+        height
+      } = texture.getSize();
+      canvas.width = width;
+      canvas.height = height;
+      const img = new Image();
+      const imageData = ctx.createImageData(width, height);
+      imageData.data.set(new Uint8ClampedArray(pixels));
+      ctx.putImageData(imageData, 0, 0);
+      img.onload = () => {
+        resolve(img);
+      };
+      img.onerror = () => {
+        resolve(null);
+      };
+      img.src = canvas.toDataURL();
+    }).catch(() => {
+      resolve(null);
+    });
+  });
+};
+export const removeFromMaterial = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id,
+    removeAlbedoTexture,
+    removeMetallicTexture,
+    removeMicroSurfaceTexture,
+    removeEmissiveTexture,
+    removeBumpTexture,
+    removeOpacityTexture,
+    removeRoughnessTexture,
+    removeAmbientTexture
+  } = payload;
+  const material = scene.getMaterialByName(id, true);
+  if (material) {
+    // Basic attribute textures.
+    if (removeAlbedoTexture) {
+      const isStencil = material.transparencyType === TRANSPARENCY_MODES.stencil;
+      if (isStencil) {
+        material.albedoTexture.hasAlpha = false;
+        material.albedoTexture.useAlphaFromAlbedoTexture = false;
+        material.transparencyMode = BABYLON.PBRMaterial.PBRMATERIAL_ALPHABLEND;
+        material.transparencyType = TRANSPARENCY_MODES.simple;
+      }
+      material.albedoTexture?.dispose();
+      material.albedoTexture = null;
+    }
+    if (removeMetallicTexture) {
+      if (material.metallicTexture) {
+        textureToImage(material.metallicTexture).then(data => {
+          const updatedTexture = removeChannelFromTexture(data, 'B');
+          material.metallicTexture.updateURL(updatedTexture);
+          newMetaDataEntry('materials', buildMaterialsArray());
+          newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+          props.clearNotifications?.();
+          props.setSerializedData?.(serializeScene());
+        }).catch(() => {
+          console.log('Failed to remove metallic texture');
+        });
+      }
+    }
+    if (removeMicroSurfaceTexture) {
+      material.microSurfaceTexture?.dispose();
+      material.microSurfaceTexture = null;
+    }
+    if (removeEmissiveTexture) {
+      material.emissiveTexture?.dispose();
+      material.emissiveTexture = null;
+    }
+    if (removeBumpTexture) {
+      material.bumpTexture?.dispose();
+      material.bumpTexture = null;
+    }
+    if (removeOpacityTexture) {
+      material.opacityTexture?.dispose();
+      material.opacityTexture = null;
+    }
+    if (removeAmbientTexture) {
+      material.ambientTexture?.dispose();
+      material.ambientTexture = null;
+    }
+    if (removeRoughnessTexture) {
+      if (material.metallicTexture) {
+        textureToImage(material.metallicTexture).then(data => {
+          const updatedTexture = removeChannelFromTexture(data, 'G');
+          material.metallicTexture.updateURL(updatedTexture);
+          newMetaDataEntry('materials', buildMaterialsArray());
+          newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+          props.clearNotifications?.();
+          props.setSerializedData?.(serializeScene());
+        }).catch(() => {
+          console.log('Failed to remove roughness texture');
+        });
+      }
+    }
+    newMetaDataEntry('materials', buildMaterialsArray());
+    newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+  }
+};
+export const removeFromMesh = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id
+  } = payload;
+  if (_.isString(id)) {
+    if (_.isEmpty(selectedMeshes) || selectedMeshes.length > 1) {
+      return;
+    }
+    const selectedMesh = selectedMeshes[0];
+
+    // Remove custom user mesh positions.
+    const userMeshPositions = scene.metadata?.userMeshPositions?.filter(mesh => mesh.meshId !== selectedMesh.id || mesh.positionId !== id) || [];
+    const filteredSelectedPositions = scene.metadata.selectedUserMeshPositions.filter(pos => pos.meshId !== selectedMesh.id || pos.positionId !== id);
+    const defaultPosition = userMeshPositions.find(pos => pos.meshId === selectedMesh.id && pos.positionId === 'Default');
+    filteredSelectedPositions.push(defaultPosition);
+    newMetaDataEntry('userMeshPositions', userMeshPositions);
+    newMetaDataEntry('selectedUserMeshPositions', filteredSelectedPositions);
+  }
+};
+export const removeFromCamera = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id
+  } = payload;
+  if (_.isString(id)) {
+    // Custom user camera views.
+    const filteredPositions = scene.metadata?.userCameraViews.filter(cameraPos => cameraPos.id !== id) || [];
+    const inboundData = {
+      payload: {
+        resetCamera: true
+      }
+    };
+    newMetaDataEntry('userCameraViews', filteredPositions);
+    updateCamera(inboundData);
+  }
+};
+export const removeFromEnvironment = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    id
+  } = payload;
+  const userEnv = scene.metadata?.userEnvironments.find(env => env.id === id);
+
+  // remove custom user environment.
+  if (_.isString(id) && _.isString(userEnv?.url)) {
+    const filteredEnvs = scene.metadata?.userEnvironments.filter(env => env.id != id) || [];
+    const inboundData = {
+      payload: {
+        url: scene.metadata.defaultEnvironment,
+        transforms: {
+          rotation: {
+            ry: scene.metadata.environmentRotation
+          }
+        }
+      }
+    };
+    newMetaDataEntry('userEnvironments', filteredEnvs);
+    updateEnvironment(inboundData);
+  }
+};
+export const removeFromViewport = inboundData => {
+  const {
+    payload
+  } = inboundData;
+  const {
+    deleteSelectedMesh
+  } = payload;
+  const hasSelection = selectedMeshes.length > 0;
+
+  // Delete selected mesh.
+  if (deleteSelectedMesh !== undefined && hasSelection) {
+    const multiSelection = selectedMeshes.length > 1;
+    const confirmConfig = {
+      message: `Are you sure you want to delete ${multiSelection ? 'these meshes' : 'this mesh'}?`,
+      onConfirm: () => deleteSelected(),
+      onClose: () => props.setConfirmMessage?.(null)
+    };
+    props.setConfirmMessage?.(confirmConfig);
+  }
+};