redhotmagma-visualization 1.28.3 → 1.29.1

package/src/Three/Loaders/MTLLoader.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 // original source: three/examples/js/loaders/MTLLoader
 
 import * as THREE_imp from "three";

package/src/Three/Loaders/OBJLoader.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 // original source: three/examples/js/loaders/OBJLoader
 
 import * as THREE_imp from "three";

package/src/Three/Three2D.js

@@ -48,8 +48,7 @@ const MIN_TEXTURE_SIZE = 2048;
 const MAX_TEXTURE_SIZE = 2048;
 
 const cameraZ = 100000;
-const planeZ = -100000;
-const cameraFar = cameraZ - planeZ + 1000;
+const getPlaneZ = overlayMode => (overlayMode ? 100 : -100000);
 
 export const allowZooming = (zoom, originalZoom, minZoom, maxZoom) =>
   (originalZoom > zoom && zoom >= minZoom) || (originalZoom < zoom && zoom <= maxZoom);
@@ -74,6 +73,7 @@ export class Three2D extends ThreeBase {
   _redraw = null;
   _modelBasePath = "";
   _modelPath = null;
+  _overlayMode = false;
   _imageRepository = createImageRepository(
     createCache(20),
     src =>
@@ -96,6 +96,10 @@ export class Three2D extends ThreeBase {
     });
   }
 
+  setOverlayMode(mode) {
+    this._overlayMode = mode;
+  }
+
   createRenderer() {
     const renderer = new WebGLRenderer({
       alpha: true,
@@ -111,7 +115,7 @@ export class Three2D extends ThreeBase {
     const { redrawOnZoomChange = false, redrawDebounceWait = 100 } = options;
     const camera = new OrthographicCamera();
     camera.near = 0.01;
-    camera.far = cameraFar;
+    camera.far = cameraZ - getPlaneZ(this._overlayMode) + 1000;
     camera.position.set(0, 0, cameraZ);
     redrawOnZoomChange &&
       observeProperty(camera, "zoom", debounce(this.redraw, redrawDebounceWait));
@@ -262,6 +266,7 @@ export class Three2D extends ThreeBase {
     }
   }
 
+  // eslint-disable-next-line no-unused-vars
   setupDefaultControls(targetElement, options = {}) {
     this.controls = {
       enabled: true,
@@ -327,12 +332,14 @@ export class Three2D extends ThreeBase {
     await this.observable.dispatch(EventTypes.MaterialUpdated, eventParams, true);
   }
 
+  // eslint-disable-next-line no-unused-vars
   async updateMaterial(targetObject = this.scene) {
     return await this.updateView(this._currentDesignView);
   }
 
   async _getDrawingContext(
     drawingFn,
+    // eslint-disable-next-line no-unused-vars
     updateAlpha = false,
     clearTexture = false,
     materialName = undefined
@@ -370,12 +377,7 @@ export class Three2D extends ThreeBase {
     }
   }
 
-  async getDrawingContext(
-    drawingFn,
-    updateAlpha = false,
-    clearTexture = false,
-    materialName = undefined
-  ) {
+  async getDrawingContext() {
     this._redraw = this._getDrawingContext.bind(this, ...arguments);
     if (!this._redrawPromise) {
       window.cancelAnimationFrame(this._redrawFrame);
@@ -453,11 +455,11 @@ export class Three2D extends ThreeBase {
 
   initModelWithTexture(tex) {
     const { width, height } = tex.originalSize;
-    const planeMaterial = new MeshBasicMaterial({ map: tex });
+    const planeMaterial = new MeshBasicMaterial({ map: tex, transparent: true });
 
     const planeGeometry = new PlaneGeometry(width, height, 1, 1);
     const plane = new Mesh(planeGeometry, planeMaterial);
-    plane.position.z = planeZ;
+    plane.position.z = getPlaneZ(this._overlayMode);
 
     // remove the current model first
     this.scene.remove(this._model);
@@ -608,6 +610,7 @@ export class Three2D extends ThreeBase {
 
     const designViewIdentifier = designView && designView.identifier;
     if (!designViewIdentifier) {
+      // eslint-disable-next-line no-console
       console.log("No design view identifier! Skipping update.");
       return;
     }
@@ -647,6 +650,7 @@ export class Three2D extends ThreeBase {
     const containerGroup = this.createObjectsForDesignAreas(availableDesignAreas);
 
     this._containerGroup = containerGroup;
+    this._intersectionRoot = containerGroup;
     this.scene && this.scene.add(containerGroup);
 
     updateMaterial && (await this.dispatchMaterialUpdateEvent());
@@ -656,6 +660,7 @@ export class Three2D extends ThreeBase {
     delete this._redraw; // remove the redraw function to prevent drawing on non-existing textures
     this.scene && this.scene.remove(this._containerGroup);
     removeObject(this._containerGroup);
+    this._intersectionRoot = null;
     this._customizableMaterialKeys = [];
     this._customizableMaterials = [];
     this._materialMap.forEach(disposeMaterial);
@@ -709,6 +714,7 @@ export class Three2D extends ThreeBase {
     }
 
     if (!this._containerGroup) {
+      // eslint-disable-next-line no-console
       console.log(`Container group is not available, skipping jump to view!`);
       return false;
     }
@@ -738,6 +744,7 @@ export class Three2D extends ThreeBase {
     await this.updateView(designView);
 
     if (!this._containerGroup) {
+      // eslint-disable-next-line no-console
       console.log(`Container group is not available, skipping jump to view!`);
       return false;
     }

package/src/Three/Three3D.js

@@ -9,7 +9,6 @@ import {
   Texture,
   Spherical,
   Vector2,
-  Vector3,
 } from "three";
 import TWEEN from "@tweenjs/tween.js";
 import first from "lodash/first";
@@ -168,6 +167,7 @@ export class Three3D extends ThreeBase {
         }
         const matches = ("" + obj.name).toLowerCase().match(/(.+)_(position|lookat)$/);
         if (!matches) {
+          // eslint-disable-next-line no-console
           console.warn(`Camera view object skipped: ${obj.name}`);
           continue;
         }
@@ -248,10 +248,12 @@ export class Three3D extends ThreeBase {
      */
     return src => {
       if (_src === src) {
+        // eslint-disable-next-line no-console
         console.log("Material is already loaded: " + src);
         return promise;
       }
       _src = src;
+      // eslint-disable-next-line no-console
       console.log("Loading material: " + src);
       promise = new Promise((resolve, reject) => {
         const { path, fileName } = this.getPathAndFileName(src);
@@ -260,6 +262,7 @@ export class Three3D extends ThreeBase {
           materialCreator => {
             const textureLoadingManager = new LoadingManager(
               () => {
+                // eslint-disable-next-line no-console
                 console.log("All textures have been lodaed.");
                 resolve(materialCreator);
               },
@@ -287,6 +290,7 @@ export class Three3D extends ThreeBase {
               false
             );
             if (!isTexture) {
+              // eslint-disable-next-line no-console
               console.log("Materials do not contain any texture.");
               resolve(materialCreator);
             }
@@ -338,10 +342,12 @@ export class Three3D extends ThreeBase {
   }
 
   async updateMaterial(targetObject = this.scene, options = {}) {
+    // eslint-disable-next-line no-console
     console.log("Updating materials...");
     const { mtlPath } = this.getModelPaths();
 
     if (!mtlPath) {
+      // eslint-disable-next-line no-console
       console.log("Missing material path!");
       return;
     }
@@ -410,6 +416,7 @@ export class Three3D extends ThreeBase {
    * @param {*} materialsObj
    */
   findCustomizableMaterials(materialsObj) {
+    // eslint-disable-next-line no-console
     console.log("Looking for customizable materials...");
     for (let key of this._customizableMaterialKeys) {
       const mat = materialsObj[key];
@@ -516,6 +523,7 @@ export class Three3D extends ThreeBase {
     const viewNameSafe = ("" + viewName).toLowerCase();
     const view = this.cameraViews[viewNameSafe];
     if (!view) {
+      // eslint-disable-next-line no-console
       console.error(`Camera view does not exist: ${viewNameSafe}`);
       return;
     }

package/src/Three/ThreeBase.js

@@ -3,7 +3,6 @@ import {
   Mesh,
   Vector2,
   BoxGeometry,
-  Material,
   MeshBasicMaterial,
   Raycaster,
   AxesHelper,
@@ -24,6 +23,7 @@ import Deferred from "../CommonUtils/Deferred";
 export const onProgress = xhr => {
   if (xhr.lengthComputable) {
     const percentComplete = (xhr.loaded / xhr.total) * 100;
+    // eslint-disable-next-line no-console
     console.log(percentComplete.toFixed(2) + "% downloaded");
   }
 };
@@ -104,6 +104,7 @@ export class ThreeBase extends VisualizationInterface {
    * @param {number} width
    * @param {number} height
    */
+  // eslint-disable-next-line no-unused-vars
   updateCamera(width, height) {}
 
   addToContainer(container) {
@@ -166,6 +167,7 @@ export class ThreeBase extends VisualizationInterface {
    * @param {HTMLElement} targetElement
    * @param {{}} options Custom options for the controls (see the OrbitControls.js file for details)
    */
+  // eslint-disable-next-line no-unused-vars
   setupDefaultControls(targetElement, options = {}) {}
 
   addAxesHelper() {
@@ -184,6 +186,7 @@ export class ThreeBase extends VisualizationInterface {
     this.controls.enabled = enabled;
   }
 
+  // eslint-disable-next-line no-unused-vars
   updateMaterial(targetObject = this.scene) {}
 
   /**
@@ -224,8 +227,11 @@ export class ThreeBase extends VisualizationInterface {
    */
   getDrawingContext(
     drawingFn,
+    // eslint-disable-next-line no-unused-vars
     updateAlpha = false,
+    // eslint-disable-next-line no-unused-vars
     clearTexture = false,
+    // eslint-disable-next-line no-unused-vars
     materialName = undefined
   ) {}
 
@@ -344,7 +350,10 @@ export class ThreeBase extends VisualizationInterface {
     );
     raycaster.setFromCamera(mouse, this.camera);
 
-    const intersects = raycaster.intersectObjects(this.scene.children, true);
+    const intersects = raycaster.intersectObjects(
+      this._intersectionRoot?.children || this.scene.children,
+      true
+    );
     if (intersects.length > 0) {
       const intersect = intersects[0]; // closest object
       return {
@@ -379,6 +388,7 @@ export class ThreeBase extends VisualizationInterface {
       event => {
         event.preventDefault();
         window.cancelAnimationFrame(_this._animationFrame);
+        // eslint-disable-next-line no-console
         console.warn("WEBGL CONTEXT LOST");
       },
       false
@@ -390,6 +400,7 @@ export class ThreeBase extends VisualizationInterface {
         if (_this._animationFrame) {
           _this.animate();
         }
+        // eslint-disable-next-line no-console
         console.warn("WEGL CONTEXT RESTORED");
       },
       false
@@ -446,6 +457,7 @@ export class ThreeBase extends VisualizationInterface {
     this._customizableMaterials = [];
     this._isInitialized = false;
 
+    // eslint-disable-next-line no-console
     console.info("Three instance has been successfully disposed.");
   }
 

package/src/Utils/DesignArea/getDesignAreaCanvasSize.js

@@ -9,6 +9,7 @@ export const getDesignAreaCanvasSize = designArea => {
     sourceObject = position;
   }
   if (!sourceObject) {
+    // eslint-disable-next-line no-console
     console.error(
       "Incomplete design area data, baseShape and position has to be set up correctly.",
       designArea

package/src/Utils/TextureBuilder/createTextureBuilder.js

@@ -26,6 +26,7 @@ export const createTextureBuilder = (textureImage, params = {}) => {
     }) => {
       const { baseShape, position } = designArea;
       if (!baseShape || !position) {
+        // eslint-disable-next-line no-console
         console.log("No design area provided.");
         return;
       }
@@ -55,6 +56,7 @@ export const createTextureBuilder = (textureImage, params = {}) => {
           break;
         }
         default: {
+          // eslint-disable-next-line no-console
           console.error(`Unknown baseShape type: ${type}. Texture update will be skipped.`);
           return;
         }

package/src/Utils/imagePreloader.js

@@ -19,6 +19,7 @@ export const createImagePreloader = srcArr => {
       );
       ready = true;
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error("Error while loading resource!", e);
     }
   });

package/src/Utils/initTextureCanvas.js

@@ -8,14 +8,17 @@ export function createCanvasFromImage(image) {
 
 export function initTextureCanvas(texture) {
   if (!texture.image) {
+    // eslint-disable-next-line no-console
     console.warn("There is no image for the given texture.", texture);
   }
   if (!texture.originalImage || texture.image.nodeName !== "CANVAS") {
     const originalImage = optimizeTextureImage(texture.image);
+    // eslint-disable-next-line no-console
     console.log(`Creating canvas from texture: ${originalImage.src}`);
     texture.image = createCanvasFromImage(originalImage);
     texture.originalImage = originalImage;
   } else {
+    // eslint-disable-next-line no-console
     console.log(`Texture for ${texture.originalImage.src} is already prepared, skipping.`);
   }
 }

package/src/Utils/isMobileDevice.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-useless-escape */
+
 export const isMobileDevice = () => {
   let check = false;
   (function(a) {

package/src/Utils/optimizeTextureImage.js

@@ -29,6 +29,7 @@ export const optimizeTextureImage = (image, maxTextureSize = 2048, minTextureSiz
     width = height * ratio;
   }
 
+  // eslint-disable-next-line no-console
   console.log(
     "Optimizing texture image for better mipmaps:",
     `${image.width}x${image.height} -> ${width}x${height}`

package/src/VisualizationContainer.js

@@ -51,6 +51,7 @@ export class VisualizationContainer extends React.Component {
     const { visualization } = this.props;
 
     if (!visualization) {
+      // eslint-disable-next-line no-console
       console.warn("Visualization component is not provided! Visualization will not be rendered.");
       return;
     }
@@ -65,7 +66,7 @@ export class VisualizationContainer extends React.Component {
     this.updateVisualization();
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
     this.updateVisualization(prevProps);
   }
 
@@ -161,6 +162,7 @@ export class VisualizationContainer extends React.Component {
 }
 
 export const VisualizationContainerSwitch = props => {
+  // eslint-disable-next-line react/prop-types
   const { visualization, VisualizationContainerComponent, FallbackComponent } = props;
   const Component = visualization ? VisualizationContainerComponent : FallbackComponent;
   return <Component {...props} />;

package/src/VisualizationInterface.js

@@ -22,8 +22,9 @@ export class VisualizationInterface {
    * This function is called from the container component.
    * It provides the opportunity to add any visualization element to the container, and do initial setup if needed.
    * @param {HTMLElement} [container=<div>]
-   * @param {boolean} useDefaultSetup
+   * @param {boolean} [useDefaultSetup]
    */
+  // eslint-disable-next-line no-unused-vars
   init(container, useDefaultSetup) {}
 
   /**
@@ -33,6 +34,7 @@ export class VisualizationInterface {
    * This function should add the visualization element to the container, and do other updates if needed.
    * @param container
    */
+  // eslint-disable-next-line no-unused-vars
   addToContainer(container) {}
 
   isInitialized() {
@@ -108,6 +110,7 @@ export class VisualizationInterface {
    * @param {number} height
    * @param {boolean} rerender
    */
+  // eslint-disable-next-line no-unused-vars
   setSize({ width, height }, rerender = true) {}
 
   /**
@@ -129,6 +132,7 @@ export class VisualizationInterface {
   /**
    * Handle updates of design area list if needed in the custom implementation
    */
+  // eslint-disable-next-line no-unused-vars
   updateDesignAreaList(designAreaList) {}
 
   /**
@@ -141,8 +145,11 @@ export class VisualizationInterface {
    */
   getDrawingContext(
     drawingFn,
+    // eslint-disable-next-line no-unused-vars
     updateAlpha = false,
+    // eslint-disable-next-line no-unused-vars
     clearTexture = false,
+    // eslint-disable-next-line no-unused-vars
     materialName = undefined
   ) {}
 
@@ -161,6 +168,7 @@ export class VisualizationInterface {
 
   onLoadError = url => {
     const errorMessage = `Could not load file: ${url}`;
+    // eslint-disable-next-line no-console
     console.error(errorMessage);
     this.observable.dispatch(EventTypes.LoadError, {
       url,
@@ -185,6 +193,7 @@ export class VisualizationInterface {
    * @param {function} callback The callback function should get the generated screenshots in the first arg
    * @param {object} options The options object to pass extra data
    */
+  // eslint-disable-next-line no-unused-vars
   async getScreenshots(callback, options) {
     callback && callback(null);
   }

package/visualizationAdapterCreator.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAdapterConfig = exports.createVisualizationAdapter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _ReactBase = require("./React/ReactBase");
+
+var _Three2DLayers = require("./Three/Three2DLayers");
+
+var _Three3DScene = require("./Three/Three3DScene");
+
+var _Three2D = require("./Three/Three2D");
+
+var _Three3D = require("./Three/Three3D");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var createVisualizationAdapter = function createVisualizationAdapter(adapterConfig, target) {
+  var cfg = adapterConfig[target];
+
+  if (!cfg) {
+    throw new Error("No adapter configuration for the following target: ".concat(target));
+  }
+
+  var Adapter = cfg.adapterClass;
+
+  if (Adapter) {
+    return new Adapter(cfg);
+  }
+};
+
+exports.createVisualizationAdapter = createVisualizationAdapter;
+
+var createAdapterConfig = function createAdapterConfig(_ref) {
+  var host = _ref.host;
+  var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return (0, _merge["default"])({
+    "2dVariant": {
+      adapterClass: _Three2D.Three2D,
+      modelBasePath: host,
+      basePath: "".concat(host, "/images/item/view") // only for conventional urls
+
+    },
+    "2dLayer": {
+      adapterClass: _Three2DLayers.Three2DLayers,
+      modelBasePath: host
+    },
+    "3dVariant": {
+      adapterClass: _Three3DScene.Three3DScene,
+      modelBasePath: host
+    },
+    "3dScene": {
+      adapterClass: _Three3DScene.Three3DScene,
+      modelBasePath: host
+    },
+    "3d": {
+      // deprecated, only for backward compatibility
+      adapterClass: _Three3D.Three3D,
+      modelBasePath: host
+    },
+    "default": {
+      adapterClass: _ReactBase.ReactBase,
+      Component: function Component() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "No visualization");
+      }
+    }
+  }, overrides);
+};
+
+exports.createAdapterConfig = createAdapterConfig;

package/babel.config.js

@@ -1,41 +0,0 @@
-module.exports = function(api) {
-  const presets = [
-    "@babel/preset-env",
-    "@babel/preset-typescript",
-    "@babel/preset-react" // Transpile React components to JavaScript
-  ];
-
-  const plugins = [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-syntax-dynamic-import",
-
-    [
-      "module-resolver",
-      {
-        root: ["./src"]
-      }
-    ]
-  ];
-
-  const ignore = [];
-
-  if (api.env("development")) {
-    plugins.push("react-hot-loader/babel"); // Enables React code to work with HMR.
-    api.cache(true);
-  } else if (api.env("production")) {
-    ignore.push(
-      "**/__tests__", // ignore the whole test directory
-      "**/*.test.js", // ignore test files only
-      "**/__mocks__"
-    );
-    api.cache(false);
-  } else {
-    api.cache(true);
-  }
-
-  return {
-    presets,
-    plugins,
-    ignore
-  };
-};