redhotmagma-visualization 1.28.4 → 1.29.0

package/DevApp.js

@@ -0,0 +1,1049 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _root = require("react-hot-loader/root");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _VisualizationProvider = require("./VisualizationProvider");
+
+var _VisualizationContainer = _interopRequireDefault(require("./VisualizationContainer"));
+
+var _visualizationAdapterCreator = require("./visualizationAdapterCreator");
+
+var _designAreaList2D = _interopRequireDefault(require("./__mocks__/designAreaList2D"));
+
+var _designAreaList2DVariant = _interopRequireDefault(require("./__mocks__/designAreaList2DVariant"));
+
+var _designAreaList3DVariant = _interopRequireDefault(require("./__mocks__/designAreaList3DVariant"));
+
+var _exportedSampleSvg = require("./__mocks__/exportedSampleSvg");
+
+var _AlignTargetProvider = require("./AlignTargetProvider");
+
+var _Constants = require("./Constants");
+
+var _three = require("three");
+
+var _makeStyles = _interopRequireDefault(require("@material-ui/core/styles/makeStyles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var adapterConfig = (0, _visualizationAdapterCreator.createAdapterConfig)({
+  host: "/"
+}, {
+  "2dVariant": {
+    modelBasePath: "/models/2dVariant"
+  }
+});
+var textureBuilderConfig = {
+  highlight: {
+    borderColor: "red",
+    lineWidth: 2
+  }
+};
+var effectOptions = {
+  engraving: {
+    fillColor: "rgba(250,250,200,0.7)"
+  }
+};
+var modelData = {
+  "3dScene": {
+    Customized: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [{
+            src: "models/3d/Sofa/base.gltf",
+            material: {
+              params: {
+                color: "#202020"
+              }
+            }
+          }, {
+            src: "models/3d/Sofa/side.gltf",
+            material: {
+              params: {
+                map: "textures/red.jpg"
+              }
+            }
+          }, {
+            src: "models/3d/Sofa/sitting_pads.gltf",
+            material: {
+              params: {
+                map: "textures/rhm.jpg"
+              }
+            }
+          }, {
+            src: "models/3d/Sofa/back_pads.gltf",
+            material: {
+              params: {
+                map: "textures/yellow.jpg"
+              }
+            }
+          }, {
+            src: "models/3d/Sofa/cylinders.gltf",
+            material: {
+              params: {
+                map: "textures/green.jpg"
+              }
+            }
+          }, {
+            src: "models/3d/Sofa/pillows.gltf",
+            material: {
+              params: {
+                map: "textures/blue.jpg"
+              }
+            }
+          }]
+        }
+      }
+    },
+    Designed: {
+      designAreaList: [{
+        identifier: "top",
+        baseShape: {
+          type: "Plane"
+        },
+        position: {
+          width: 580,
+          height: 290,
+          x: 1010,
+          y: 1500,
+          angle: -Math.PI / 2
+        },
+        height: 300,
+        width: 600,
+        designView: {
+          identifier: "top_view"
+        }
+      }],
+      configuration: {
+        visualizationData: {
+          sceneData: [{
+            src: "models/3d/GroundVehicle/SceneBase.gltf"
+          }, {
+            src: "models/3d/GroundVehicle/Body.gltf"
+          }, {
+            src: "models/3d/GroundVehicle/WheelsFront.gltf",
+            material: {
+              params: {
+                map: "FunnyWheel.jpg"
+              }
+            }
+          }, {
+            src: "models/3d/GroundVehicle/WheelsMid.gltf",
+            material: {
+              params: {
+                map: "FunnyWheel.jpg",
+                color: "#FF00FF"
+              }
+            }
+          }, {
+            src: "models/3d/GroundVehicle/WheelsRear.gltf",
+            material: {
+              params: {
+                map: "FunnyWheel.jpg",
+                color: "#00FF00"
+              }
+            }
+          }]
+        }
+      }
+    },
+    CreatorDesigner: {
+      designAreaList: [{
+        identifier: "top",
+        baseShape: {
+          type: "Plane"
+        },
+        position: {
+          width: 800,
+          height: 400,
+          x: 410,
+          y: 1500,
+          angle: -Math.PI / 2
+        },
+        height: 400,
+        width: 800,
+        designView: {
+          identifier: "top_view"
+        }
+      }],
+      configuration: {
+        visualizationData: {
+          sceneData: [{
+            src: "models/3d/Pouf/camera2.gltf"
+          }, {
+            src: "models/3d/Pouf/top.gltf",
+            material: {
+              params: {
+                color: "#BBBBBB",
+                metalness: 0.6,
+                roughness: 0.8
+              }
+            }
+          }, {
+            src: "models/3d/Pouf/bottom.gltf",
+            material: {
+              params: {
+                color: "#202020",
+                metalness: 0.6,
+                roughness: 0.8
+              }
+            }
+          }]
+        }
+      }
+    },
+    Animated: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [{
+            src: "models/3d/Soldier.glb"
+          }]
+        }
+      }
+    },
+    Large: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [{
+            src: "models/3d/LittlestTokyo.glb"
+          }]
+        }
+      }
+    },
+    FlexibleOptionsLocalParams: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [{
+            src: "models/3d/GroundVehicle/SceneBase.gltf"
+          }, {
+            src: "models/3d/GroundVehicle/WheelsFront.gltf",
+            params: {
+              material: {
+                params: {
+                  map: "FunnyWheel.jpg"
+                }
+              }
+            }
+          }, {
+            src: "models/3d/GroundVehicle/WheelsFront.gltf",
+            params: {
+              material: {
+                params: {
+                  map: "FunnyWheel.jpg",
+                  color: "#FF00FF"
+                }
+              },
+              position: {
+                z: -3
+              }
+            }
+          }, {
+            src: "models/3d/GroundVehicle/WheelsFront.gltf",
+            params: {
+              material: {
+                params: {
+                  map: "FunnyWheel.jpg",
+                  color: "#00FF00"
+                }
+              },
+              position: {
+                z: 3
+              }
+            }
+          }]
+        }
+      }
+    },
+    FlexibleOptionsGlobalParams: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [{
+            src: "models/3d/GroundVehicle/SceneBase.gltf"
+          }, {
+            src: "models/3d/GroundVehicle/Body.gltf"
+          }, {
+            model: "models/3d/GroundVehicle/WheelsFront.gltf",
+            params: {
+              position: {
+                z: 0
+              }
+            }
+          }, {
+            model: "models/3d/GroundVehicle/WheelsFront.gltf",
+            params: {
+              position: {
+                z: -3.75
+              }
+            }
+          }, {
+            model: "models/3d/GroundVehicle/WheelsFront.gltf",
+            params: {
+              position: {
+                z: -5.05
+              }
+            }
+          }, {
+            params: {
+              objectName: "Wheels",
+              material: {
+                params: {
+                  map: "FunnyWheel.jpg",
+                  color: "#FF00FF"
+                }
+              }
+            },
+            files: {
+              "FunnyWheel.jpg": "models/3d/GroundVehicle/FunnyWheel.jpg"
+            }
+          }, {
+            params: {
+              objectName: "GroundVehicleMesh_0",
+              material: {
+                params: {
+                  color: "#00FFFF"
+                }
+              }
+            }
+          }, {
+            params: {
+              material: {
+                params: {
+                  materialName: "CustomizableMaterial",
+                  color: "#FFFF00"
+                }
+              }
+            }
+          }]
+        }
+      }
+    }
+  }
+};
+
+var getDemoData = function getDemoData(mode, model) {
+  var demoData = {
+    "2dVariant": {
+      itemPath: "softshell",
+      materialPath: "softshell_red_s",
+      view: _designAreaList2DVariant["default"][0].designView,
+      designAreaList: _designAreaList2DVariant["default"]
+    },
+    "2dLayer": {
+      designAreaList: _designAreaList2D["default"],
+      configuration: {
+        visualizationData: {
+          viewImages: {
+            front_view: ["models/2d/front_view/softshell_avocado.png", "models/2d/front_view/hood_anthracite.png", "models/2d/front_view/zipper_avocado.png", "models/2d/front_view/applications_green.png"],
+            rear_view: ["models/2d/rear_view/softshell_avocado.png", "models/2d/rear_view/hood_anthracite.png", "models/2d/rear_view/applications_green.png"]
+          }
+        }
+      },
+      view: _designAreaList2D["default"][0].designView
+    },
+    "3dScene": _objectSpread({}, modelData["3dScene"][model]),
+    "3dVariant": {
+      materialPath: "base",
+      view: "default",
+      designAreaList: _designAreaList3DVariant["default"]
+    }
+  };
+  return demoData[mode];
+};
+
+var loadDemoModel = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(visualization, mode, model) {
+    var _getDemoData, configuration, view, designAreaList, itemPath, materialPath;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _getDemoData = getDemoData(mode, model), configuration = _getDemoData.configuration, view = _getDemoData.view, designAreaList = _getDemoData.designAreaList, itemPath = _getDemoData.itemPath, materialPath = _getDemoData.materialPath;
+            _context.t0 = visualization.update && configuration;
+
+            if (!_context.t0) {
+              _context.next = 5;
+              break;
+            }
+
+            _context.next = 5;
+            return visualization.update(configuration);
+
+          case 5:
+            _context.t1 = itemPath;
+
+            if (!_context.t1) {
+              _context.next = 9;
+              break;
+            }
+
+            _context.next = 9;
+            return visualization.updateItemPath(itemPath);
+
+          case 9:
+            _context.t2 = materialPath;
+
+            if (!_context.t2) {
+              _context.next = 13;
+              break;
+            }
+
+            _context.next = 13;
+            return visualization.updateMaterialVariantPath(materialPath);
+
+          case 13:
+            _context.t3 = designAreaList;
+
+            if (!_context.t3) {
+              _context.next = 17;
+              break;
+            }
+
+            _context.next = 17;
+            return visualization.updateDesignAreaList(designAreaList);
+
+          case 17:
+            _context.t4 = view;
+
+            if (!_context.t4) {
+              _context.next = 26;
+              break;
+            }
+
+            if (!visualization.setView) {
+              _context.next = 24;
+              break;
+            }
+
+            _context.next = 22;
+            return visualization.setView(view);
+
+          case 22:
+            _context.next = 26;
+            break;
+
+          case 24:
+            _context.next = 26;
+            return visualization.jumpToView(view);
+
+          case 26:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function loadDemoModel(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+function strokeStar(ctx, x, y, r, n, inset) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.translate(x, y);
+  ctx.moveTo(0, 0 - r);
+
+  for (var i = 0; i < n; i++) {
+    ctx.rotate(Math.PI / n);
+    ctx.lineTo(0, 0 - r * inset);
+    ctx.rotate(Math.PI / n);
+    ctx.lineTo(0, 0 - r);
+  }
+
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+function drawImage(ctx, scaling, effect) {
+  ctx.save();
+  ctx.scale(scaling, scaling);
+  ctx.fillStyle = effect === "color_embossing" ? "white" : "black";
+  ctx.font = "70px Arial";
+  ctx.fillText("Hello World", 20, 80);
+  strokeStar(ctx, 100, 20, 5, 5, 2);
+  ctx.restore();
+}
+
+var drawToTexture = function drawToTexture(effect, designAreaList) {
+  return /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(textureCtx, getTextureBuilder) {
+      var designAreas,
+          _getTextureBuilder,
+          drawCanvasToArea,
+          highlightDesignAreas,
+          drawOn,
+          _iterator,
+          _step,
+          _loop,
+          _args3 = arguments;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              designAreas = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : designAreaList;
+              _getTextureBuilder = getTextureBuilder(textureBuilderConfig), drawCanvasToArea = _getTextureBuilder.drawCanvasToArea, highlightDesignAreas = _getTextureBuilder.highlightDesignAreas, drawOn = _getTextureBuilder.drawOn;
+              highlightDesignAreas(designAreas);
+              _iterator = _createForOfIteratorHelper(designAreas);
+              _context3.prev = 4;
+              _loop = /*#__PURE__*/regeneratorRuntime.mark(function _loop() {
+                var designArea;
+                return regeneratorRuntime.wrap(function _loop$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        designArea = _step.value;
+                        _context2.next = 3;
+                        return drawCanvasToArea({
+                          drawToContext: function drawToContext(ctx, x, y, width) {
+                            drawImage(ctx, width / designArea.position.width, effect);
+                          },
+                          designArea: designArea,
+                          effect: effect,
+                          effectOptions: effectOptions[effect],
+                          getSvg: _exportedSampleSvg.getExportedSampleSvg
+                        });
+
+                      case 3:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _loop);
+              });
+
+              _iterator.s();
+
+            case 7:
+              if ((_step = _iterator.n()).done) {
+                _context3.next = 11;
+                break;
+              }
+
+              return _context3.delegateYield(_loop(), "t0", 9);
+
+            case 9:
+              _context3.next = 7;
+              break;
+
+            case 11:
+              _context3.next = 16;
+              break;
+
+            case 13:
+              _context3.prev = 13;
+              _context3.t1 = _context3["catch"](4);
+
+              _iterator.e(_context3.t1);
+
+            case 16:
+              _context3.prev = 16;
+
+              _iterator.f();
+
+              return _context3.finish(16);
+
+            case 19:
+              drawOn(textureCtx);
+
+            case 20:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee2, null, [[4, 13, 16, 19]]);
+    }));
+
+    return function (_x4, _x5) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+};
+
+var addTexture = function addTexture(visualization, mode, model, effect) {
+  visualization.getDrawingContext(drawToTexture(effect, getDemoData(mode, model).designAreaList), true
+  /* update alpha */
+  , true
+  /* clean up texture before drawing */
+  );
+};
+
+var expose = function expose(name, value) {
+  return window[name] = value;
+};
+
+var AlignTestComponent = (0, _AlignTargetProvider.withAlignTarget)(function (props) {
+  var ref = /*#__PURE__*/_react["default"].createRef();
+
+  (0, _react.useEffect)(function () {
+    props.alignTarget.add(ref.current);
+    return function () {
+      return props.alignTarget.remove(ref.current);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    style: {
+      position: "fixed",
+      top: "50%",
+      left: "40%",
+      transform: "translate(-50%,-50%)",
+      width: 300,
+      height: 150,
+      background: "yellow",
+      zIndex: 999,
+      opacity: 0.5,
+      padding: 50,
+      boxSizing: "border-box",
+      textAlign: "center"
+    }
+  }, typeof props.children === "function" ? props.children({
+    elementRef: ref
+  }) : props.children);
+});
+
+var MovementRestrictButton = function MovementRestrictButton(_ref3) {
+  var visualization = _ref3.visualization;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMovementRestricted = _useState2[0],
+      restrictMovement = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      if (isMovementRestricted) {
+        visualization.freeUserMovement();
+        restrictMovement(false);
+      } else {
+        visualization.restrictUserMovement();
+        restrictMovement(true);
+      }
+    }
+  }, isMovementRestricted ? "Release movement restriction" : "Restrict movement"));
+};
+
+var ViewSwitchOptions = function ViewSwitchOptions(_ref4) {
+  var visualization = _ref4.visualization,
+      mode = _ref4.mode;
+
+  var _useState3 = (0, _react.useState)(getDemoData(mode).view),
+      _useState4 = _slicedToArray(_useState3, 2),
+      designView = _useState4[0],
+      setDesignView = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = _slicedToArray(_useState5, 2),
+      designArea = _useState6[0],
+      setDesignArea = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    visualization.setView && visualization.setView(designView);
+    setDesignArea("");
+  }, [designView]);
+  (0, _react.useEffect)(function () {
+    designArea && visualization.jumpToArea(designArea);
+  }, [designArea]);
+  var designAreaList = getDemoData(mode).designAreaList;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("label", null, "Switch design views:"), designAreaList.map(function (_ref5) {
+    var designView = _ref5.designView;
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: designView.identifier,
+      value: designView.identifier,
+      onClick: function onClick() {
+        return setDesignView(designView);
+      }
+    }, designView.identifier);
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("label", null, "Switch design areas:"), designAreaList.filter(function (_ref6) {
+    var identifier = _ref6.designView.identifier;
+    return identifier === designView.identifier;
+  }).map(function (_ref7) {
+    var identifier = _ref7.identifier;
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: identifier,
+      value: identifier,
+      onClick: function onClick(_ref8) {
+        var value = _ref8.target.value;
+        return setDesignArea(value);
+      }
+    }, identifier);
+  })));
+};
+
+var CameraViews = function CameraViews(_ref9) {
+  var visualization = _ref9.visualization,
+      cameras = _ref9.cameras;
+  (0, _react.useEffect)(function () {
+    visualization && visualization.jumpToView && visualization.jumpToView("default");
+  }, [cameras]);
+  if (!visualization || !cameras || !cameras.length) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    onChange: function onChange(_ref10) {
+      var value = _ref10.target.value;
+      return visualization.jumpToView(value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("option", null, "Select view"), cameras.map(function (name) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: name,
+      value: name
+    }, name);
+  })));
+};
+
+var Animations = function Animations(_ref11) {
+  var visualization = _ref11.visualization,
+      animations = _ref11.animations;
+  if (!visualization || !animations || !animations.length) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    onChange: function onChange(_ref12) {
+      var value = _ref12.target.value;
+      return visualization.setActiveAnimation(value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("option", null, "Select animation"), animations.map(function (name) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: name,
+      value: name
+    }, name);
+  })));
+};
+
+var ColorVariants = function ColorVariants(_ref13) {
+  var visualization = _ref13.visualization,
+      variants = _ref13.variants;
+  if (!visualization) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    onChange: function onChange(_ref14) {
+      var value = _ref14.target.value;
+      return visualization.updateMaterialVariantPath(value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("option", null, "Select variant"), variants.map(function (name) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: name,
+      value: name
+    }, name);
+  })));
+};
+
+var FeatureAvailability = function FeatureAvailability(_ref15) {
+  var availableFor = _ref15.availableFor,
+      mode = _ref15.mode,
+      children = _ref15.children;
+
+  if (-1 !== availableFor.indexOf(mode)) {
+    return children;
+  }
+
+  return null;
+};
+
+var useStyles = (0, _makeStyles["default"])({
+  container: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 999,
+    padding: 8,
+    background: "rgba(255,255,255,0.5)",
+    fontFamily: "system-ui",
+    width: 500,
+    "& button, & select, & [type='checkbox']": {
+      fontFamily: "system-ui",
+      border: "1px solid",
+      borderColor: "rgb(106,101,80)",
+      background: "rgb(200,190,151)",
+      borderRadius: 3,
+      marginRight: 8,
+      fontSize: "1em"
+    },
+    "& label": {
+      marginRight: 8
+    },
+    "& .feature": {
+      marginTop: 8
+    }
+  },
+  features: {
+    fontWeight: "bold",
+    fontStyle: "italic"
+  }
+});
+
+var App = function App() {
+  var _useState7 = (0, _react.useState)("3dScene"),
+      _useState8 = _slicedToArray(_useState7, 2),
+      mode = _useState8[0],
+      setMode = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = _slicedToArray(_useState9, 2),
+      model = _useState10[0],
+      setModel = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      visualization = _useState12[0],
+      setVisualization = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      showAlignTestComponent = _useState14[0],
+      setShowAlignTestComponent = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(""),
+      _useState16 = _slicedToArray(_useState15, 2),
+      effect = _useState16[0],
+      setEffect = _useState16[1];
+
+  var _useState17 = (0, _react.useState)({}),
+      _useState18 = _slicedToArray(_useState17, 2),
+      features = _useState18[0],
+      setFeatures = _useState18[1];
+
+  (0, _react.useEffect)(function () {
+    visualization && visualization.dispose();
+    var mappedMode = {
+      "3dVariant": "3dScene" // the variant mode is deprecated, the demo is made with the 3dScene
+
+    }[mode] || mode;
+
+    var _visualization = (0, _visualizationAdapterCreator.createVisualizationAdapter)(adapterConfig, mappedMode);
+
+    setVisualization(_visualization);
+    setEffect("");
+    setModel("");
+  }, [mode]);
+  (0, _react.useEffect)(function () {
+    var drawFn = function drawFn() {
+      visualization.getDrawingContext(drawToTexture("print", getDemoData(mode, model).designAreaList), true
+      /* update alpha */
+      , true
+      /* clean up texture before drawing */
+      );
+    };
+
+    visualization && visualization.observable.on(_Constants.EventTypes.MaterialUpdated, drawFn);
+    return function () {
+      visualization && visualization.observable.off(_Constants.EventTypes.MaterialUpdated, drawFn);
+    };
+  }, [visualization, mode, model]); // highlight intersected (clicked) object
+
+  (0, _react.useEffect)(function () {
+    if (visualization) {
+      var restoreColor;
+      var to;
+      visualization.observable.on(_Constants.EventTypes.Intersection, function (v) {
+        // eslint-disable-next-line no-console
+        console.log("Intersection", v);
+        var mat = v.data.target.object.material;
+        window.clearTimeout(to);
+        restoreColor && restoreColor();
+        var col = mat.color;
+        mat.color = new _three.Color(1, 0.5, 0.5);
+        mat.updateNeeded = true;
+        visualization.render();
+
+        restoreColor = function restoreColor() {
+          mat.color = col;
+          mat.updateNeeded = true;
+          visualization.render();
+        };
+
+        to = window.setTimeout(restoreColor, 500);
+      });
+    }
+  }, [visualization]);
+  expose("visualization", visualization);
+  var classes = useStyles();
+  var modelList = modelData[mode] && Object.keys(modelData[mode]);
+  var designAreaList = getDemoData(mode, model).designAreaList;
+  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    onChange: function onChange(_ref16) {
+      var value = _ref16.target.value;
+      return setMode(value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("option", {
+    value: "3dScene"
+  }, "3D scene"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "3dVariant"
+  }, "3D variant"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "2dLayer"
+  }, "2D layer"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "2dVariant"
+  }, "2D variant")), modelList && /*#__PURE__*/_react["default"].createElement("select", {
+    value: model,
+    onChange: function onChange(_ref17) {
+      var value = _ref17.target.value;
+      return setModel(value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("option", null, "Select model"), modelList.map(function (model) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      value: model,
+      key: model
+    }, model);
+  })), (!modelList || model) && /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var foundFeatures;
+      return regeneratorRuntime.wrap(function _callee3$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return loadDemoModel(visualization, mode, model);
+
+            case 2:
+              foundFeatures = {};
+
+              if (visualization.getCameras) {
+                foundFeatures.cameras = visualization.getCameras().map(function (_ref19) {
+                  var name = _ref19.name;
+                  return name;
+                });
+              }
+
+              if (visualization.getAnimations) {
+                foundFeatures.animations = visualization.getAnimations().map(function (_ref20) {
+                  var name = _ref20.name;
+                  return name;
+                });
+              }
+
+              setFeatures(foundFeatures);
+
+            case 6:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee3);
+    }))
+  }, "Load demo model"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("label", null, "Use custom align target"), /*#__PURE__*/_react["default"].createElement("input", {
+    type: "checkbox",
+    onClick: function onClick(_ref21) {
+      var checked = _ref21.target.checked;
+      return setShowAlignTestComponent(checked);
+    }
+  })), designAreaList && designAreaList.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("label", null, "Texture content effect:"), /*#__PURE__*/_react["default"].createElement("select", {
+    value: effect,
+    onChange: function onChange(_ref22) {
+      var value = _ref22.target.value;
+      setEffect(value);
+      addTexture(visualization, mode, model, value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("option", null, "No effect"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "embossing"
+  }, "embossing"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "engraving"
+  }, "engraving"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "doming"
+  }, "doming"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "embroidery"
+  }, "embroidery"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "color_embossing"
+  }, "color embossing"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "feature"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: classes.features
+  }, "Features:"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FeatureAvailability, {
+    availableFor: ["3dScene", "3dVariant"],
+    mode: mode
+  }, /*#__PURE__*/_react["default"].createElement(MovementRestrictButton, {
+    visualization: visualization
+  })), /*#__PURE__*/_react["default"].createElement(FeatureAvailability, {
+    availableFor: ["3dScene", "3dVariant"],
+    mode: mode
+  }, /*#__PURE__*/_react["default"].createElement(CameraViews, {
+    visualization: visualization,
+    cameras: features.cameras
+  })), /*#__PURE__*/_react["default"].createElement(FeatureAvailability, {
+    availableFor: ["3dScene", "3dVariant"],
+    mode: mode
+  }, /*#__PURE__*/_react["default"].createElement(Animations, {
+    visualization: visualization,
+    animations: features.animations
+  })), /*#__PURE__*/_react["default"].createElement(FeatureAvailability, {
+    availableFor: ["2dLayer", "2dVariant"],
+    mode: mode
+  }, /*#__PURE__*/_react["default"].createElement(ViewSwitchOptions, {
+    visualization: visualization,
+    mode: mode
+  })), /*#__PURE__*/_react["default"].createElement(FeatureAvailability, {
+    availableFor: ["3dVariant"],
+    mode: mode
+  }, /*#__PURE__*/_react["default"].createElement(ColorVariants, {
+    visualization: visualization,
+    variants: ["base", "red", "green", "metallic", "glass"]
+  }))))), /*#__PURE__*/_react["default"].createElement(_VisualizationProvider.VisualizationProvider, {
+    visualization: visualization
+  }, /*#__PURE__*/_react["default"].createElement(_AlignTargetProvider.AlignTargetProvider, null, showAlignTestComponent && /*#__PURE__*/_react["default"].createElement(AlignTestComponent, null, "The camera offset should be aligned to this component."), /*#__PURE__*/_react["default"].createElement(_VisualizationContainer["default"], {
+    autoDispose: true
+  }))));
+};
+
+var _default = (0, _root.hot)(App);
+
+exports["default"] = _default;