redhotmagma-visualization 1.28.0-beta.2 → 1.28.2

package/Three/Three2D.js

@@ -1,1778 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Three2D = exports.allowZooming = void 0;
-
-var _three = require("three");
-
-var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));
-
-var _get2 = _interopRequireDefault(require("lodash/get"));
-
-var _first = _interopRequireDefault(require("lodash/first"));
-
-var _find = _interopRequireDefault(require("lodash/find"));
-
-var _size = _interopRequireDefault(require("lodash/size"));
-
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
-var _ThreeBase2 = require("./ThreeBase");
-
-var _createCanvas = require("../Utils/createCanvas");
-
-var _Deferred = require("../CommonUtils/Deferred");
-
-var _PropertyObserver = require("../CommonUtils/PropertyObserver");
-
-var _SyncCurrentFunction = require("../CommonUtils/SyncCurrentFunction");
-
-var _pointerEvent = require("../CommonUtils/pointerEvent");
-
-var _Constants = require("../Constants");
-
-var _createTextureBuilder = require("../Utils/TextureBuilder/createTextureBuilder");
-
-var _getDesignAreaCanvasSize = require("../Utils/DesignArea/getDesignAreaCanvasSize");
-
-var _disposeMaterial = require("../Utils/disposeMaterial");
-
-var _createImageRepository = require("../Utils/createImageRepository");
-
-var _createCache = require("../Utils/createCache");
-
-var _getImageSize = require("../Utils/getImageSize");
-
-var _removeObject = require("../Utils/removeObject");
-
-var _setOrthographicCameraSize = require("../Utils/setOrthographicCameraSize");
-
-var _optimizeTextureImage = require("../Utils/optimizeTextureImage");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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); }
-
-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 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 _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 _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 _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 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
-
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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 DESIGN_AREA_PIXEL_RATIO = 2;
-var MIN_TEXTURE_SIZE = 2048;
-var MAX_TEXTURE_SIZE = 2048;
-var cameraZ = 100000;
-var planeZ = -100000;
-var cameraFar = cameraZ - planeZ + 1000;
-
-var allowZooming = function allowZooming(zoom, originalZoom, minZoom, maxZoom) {
-  return originalZoom > zoom && zoom >= minZoom || originalZoom < zoom && zoom <= maxZoom;
-};
-
-exports.allowZooming = allowZooming;
-
-var Three2D = /*#__PURE__*/function (_ThreeBase) {
-  _inherits(Three2D, _ThreeBase);
-
-  var _super = _createSuper(Three2D);
-
-  function Three2D() {
-    var _this;
-
-    var cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-    _classCallCheck(this, Three2D);
-
-    _this = _super.call(this, cfg);
-
-    _defineProperty(_assertThisInitialized(_this), "_materialMap", new Map());
-
-    _defineProperty(_assertThisInitialized(_this), "_designAreaList", []);
-
-    _defineProperty(_assertThisInitialized(_this), "_currentDesignView", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_currentDesignArea", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_viewPath", "");
-
-    _defineProperty(_assertThisInitialized(_this), "_model", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_containerGroup", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_size", {
-      width: 0,
-      height: 0
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "_fitSize", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_minZoom", 0.5);
-
-    _defineProperty(_assertThisInitialized(_this), "_maxZoom", 2);
-
-    _defineProperty(_assertThisInitialized(_this), "_pointerMoveEventListener", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_mouseWheelEventListener", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_redraw", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_modelBasePath", "");
-
-    _defineProperty(_assertThisInitialized(_this), "_modelPath", null);
-
-    _defineProperty(_assertThisInitialized(_this), "_imageRepository", (0, _createImageRepository.createImageRepository)((0, _createCache.createCache)(20), function (src) {
-      return new Promise(function (resolve, reject) {
-        return new _three.ImageLoader(_this._loadingManager).load(src, resolve, undefined, reject);
-      });
-    }));
-
-    _defineProperty(_assertThisInitialized(_this), "redraw", function () {
-      return _this._redraw && _this._redraw();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateView", (0, _SyncCurrentFunction.syncCurrent)( /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(designView) {
-        var options,
-            _options$forceUpdate,
-            forceUpdate,
-            _options$updateMateri,
-            updateMaterial,
-            designViewIdentifier,
-            oldModelPath,
-            modelPath,
-            modelPathChanged,
-            needsUpdate,
-            availableDesignAreas,
-            containerGroup,
-            _args = arguments;
-
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
-                _options$forceUpdate = options.forceUpdate, forceUpdate = _options$forceUpdate === void 0 ? false : _options$forceUpdate, _options$updateMateri = options.updateMaterial, updateMaterial = _options$updateMateri === void 0 ? true : _options$updateMateri;
-                designViewIdentifier = designView && designView.identifier;
-
-                if (designViewIdentifier) {
-                  _context.next = 6;
-                  break;
-                }
-
-                // eslint-disable-next-line no-console
-                console.log("No design view identifier! Skipping update.");
-                return _context.abrupt("return");
-
-              case 6:
-                try {
-                  oldModelPath = _this.getModelPath();
-                } catch (e) {// ignore errors for the old value
-                } // if the variant has an explicit image path, use it as the model path
-
-
-                modelPath = _this.getModelPathFromDesignView(designView);
-                modelPath && _this.setModelPath(modelPath);
-
-                _this.setViewPath(designViewIdentifier);
-
-                modelPathChanged = _this.getModelPath() !== oldModelPath;
-                needsUpdate = forceUpdate || modelPathChanged || _this._currentDesignView !== designView;
-
-                if (needsUpdate) {
-                  _context.next = 14;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 14:
-                _this._currentDesignView = designView; // skip view update if the design view is the same
-
-                if (!(forceUpdate || modelPathChanged)) {
-                  _context.next = 18;
-                  break;
-                }
-
-                _context.next = 18;
-                return _this.loadView();
-
-              case 18:
-                _this.clearScene();
-
-                availableDesignAreas = (0, _get2["default"])(designView, "designAreas") || [];
-                containerGroup = _this.createObjectsForDesignAreas(availableDesignAreas);
-                _this._containerGroup = containerGroup;
-                _this.scene && _this.scene.add(containerGroup);
-                _context.t0 = updateMaterial;
-
-                if (!_context.t0) {
-                  _context.next = 27;
-                  break;
-                }
-
-                _context.next = 27;
-                return _this.dispatchMaterialUpdateEvent();
-
-              case 27:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }()));
-
-    if (cfg.modelBasePath) {
-      _this._modelBasePath = cfg.modelBasePath;
-    }
-
-    (0, _PropertyObserver.observeProperty)(_assertThisInitialized(_this), "_size", function (_ref2) {
-      var value = _ref2.value,
-          dispose = _ref2.dispose;
-
-      if (value.width > 0 && value.height > 0) {
-        dispose();
-
-        _this.updateZoom();
-      }
-    });
-    return _this;
-  }
-
-  _createClass(Three2D, [{
-    key: "createRenderer",
-    value: function createRenderer() {
-      var renderer = new _three.WebGLRenderer({
-        alpha: true,
-        antialias: true,
-        stencil: false,
-        depth: true // needed only for the admin area, consider to make it configurable
-
-      });
-      renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);
-      return renderer;
-    }
-  }, {
-    key: "createCameraBase",
-    value: function createCameraBase() {
-      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var _options$redrawOnZoom = options.redrawOnZoomChange,
-          redrawOnZoomChange = _options$redrawOnZoom === void 0 ? false : _options$redrawOnZoom,
-          _options$redrawDeboun = options.redrawDebounceWait,
-          redrawDebounceWait = _options$redrawDeboun === void 0 ? 100 : _options$redrawDeboun;
-      var camera = new _three.OrthographicCamera();
-      camera.near = 0.01;
-      camera.far = cameraFar;
-      camera.position.set(0, 0, cameraZ);
-      redrawOnZoomChange && (0, _PropertyObserver.observeProperty)(camera, "zoom", (0, _debounce["default"])(this.redraw, redrawDebounceWait));
-      return camera;
-    }
-  }, {
-    key: "createCamera",
-    value: function createCamera() {
-      return this.createCameraBase({
-        redrawOnZoomChange: true
-      });
-    }
-  }, {
-    key: "setSize",
-    value: function setSize(_ref3) {
-      var width = _ref3.width,
-          height = _ref3.height;
-      var rerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-      _get(_getPrototypeOf(Three2D.prototype), "setSize", this).call(this, {
-        width: width,
-        height: height
-      }, rerender);
-
-      if (this.camera.zoom < 1) {
-        this.updateZoom(rerender);
-      }
-    }
-  }, {
-    key: "setMinZoom",
-    value: function setMinZoom(value) {
-      this._minZoom = value;
-    }
-  }, {
-    key: "setMaxZoom",
-    value: function setMaxZoom(value) {
-      this._maxZoom = value;
-    }
-  }, {
-    key: "setFitSize",
-    value: function setFitSize(sizeObj) {
-      this._fitSize = sizeObj;
-    }
-  }, {
-    key: "setCameraPositionToCurrentDesignArea",
-    value: function setCameraPositionToCurrentDesignArea() {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-        animate: false,
-        duration: {}
-      },
-          animate = _ref4.animate,
-          duration = _ref4.duration;
-
-      var designArea = this._currentDesignArea || (0, _first["default"])(this._designAreaList);
-      var obj = designArea && this.findAreaObjectByName(designArea.identifier);
-      var zoom = this.calculateZoomForObject(obj);
-      var position = new _three.Vector3();
-
-      if (obj) {
-        obj.getWorldPosition(position);
-      }
-
-      position.z = this.camera.position.z;
-
-      if (animate) {
-        this.moveCamera(position, zoom, duration);
-      } else {
-        this.stopAnimation("camera");
-        this.setCameraPosition(position, zoom);
-      }
-    }
-  }, {
-    key: "updateCamera",
-    value: function updateCamera(width, height) {
-      (0, _setOrthographicCameraSize.setOrthographicCameraSize)(this.camera, width, height);
-      this.camera.updateProjectionMatrix();
-    }
-  }, {
-    key: "getZoomForSize",
-    value: function getZoomForSize(targetSize) {
-      var tWidth = targetSize.width,
-          tHeight = targetSize.height;
-      var _this$_size = this._size,
-          width = _this$_size.width,
-          height = _this$_size.height;
-      var scale = Math.max(1, width / tWidth, height / tHeight);
-      return 1 / scale;
-    }
-  }, {
-    key: "getDefaultZoom",
-    value: function getDefaultZoom() {
-      var _this2 = this;
-
-      return this._size ? this.getZoomForSize(this._fitSize || function () {
-        var size = new _three.Vector2();
-
-        _this2.renderer.getSize(size);
-
-        return size;
-      }()) : 1;
-    }
-  }, {
-    key: "updateZoom",
-    value: function updateZoom() {
-      var rerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.cleanUpCameraAnimations();
-      this.camera.zoom = this.getDefaultZoom();
-      this.setMinZoom(this.camera.zoom / 2);
-      this.camera.updateProjectionMatrix();
-
-      if (rerender && !this.isAnimating()) {
-        this.render();
-      }
-    }
-  }, {
-    key: "isObjectSmallerThanCanvas",
-    value: function isObjectSmallerThanCanvas(zoom) {
-      if (!this._size) {
-        return true;
-      }
-
-      var realWidth = Math.floor(this._size.width * zoom);
-      var realHeight = Math.floor(this._size.height * zoom);
-      var size = new _three.Vector2();
-      this.renderer.getSize(size);
-      var canvasWidth = size.width,
-          canvasHeight = size.height;
-      return realWidth <= canvasWidth && realHeight <= canvasHeight;
-    }
-  }, {
-    key: "getPositionBetweenBoundaries",
-    value: function getPositionBetweenBoundaries(x, y, zoom) {
-      if (this.isObjectSmallerThanCanvas(zoom)) {
-        return {
-          x: 0,
-          y: 0
-        };
-      }
-
-      var size = new _three.Vector2();
-      this.renderer.getSize(size);
-
-      var _ref5 = this.camera.view ? this.camera.view : {
-        width: size.x,
-        height: size.y,
-        offsetX: 0,
-        offsetY: 0
-      },
-          width = _ref5.width,
-          height = _ref5.height,
-          offsetX = _ref5.offsetX,
-          offsetY = _ref5.offsetY;
-
-      var realWidth = this._size.width * zoom;
-      var realHeight = this._size.height * zoom;
-      var widthDiff = Math.abs(width / 2 - realWidth / 2);
-      var heightDiff = Math.abs(height / 2 - realHeight / 2);
-      var minX = -widthDiff / zoom - offsetX;
-      var maxX = widthDiff / zoom + offsetX;
-      var minY = -heightDiff / zoom - offsetY;
-      var maxY = heightDiff / zoom + offsetY;
-
-      if (y < minY) {
-        y = minY;
-      } else if (y > maxY) {
-        y = maxY;
-      }
-
-      if (x > maxX) {
-        x = maxX;
-      } else if (x < minX) {
-        x = minX;
-      }
-
-      return {
-        x: x,
-        y: y
-      };
-    }
-  }, {
-    key: "setPositionBetweenBoundaries",
-    value: function setPositionBetweenBoundaries(x, y, zoom) {
-      var position = this.getPositionBetweenBoundaries(x, y, zoom);
-      var positionVector = new _three.Vector3(position.x, position.y, this.camera.position.z);
-      var animate = this.isObjectSmallerThanCanvas(zoom) && this.camera.position.x !== 0 && this.camera.position.y !== 0;
-
-      if (animate) {
-        this.moveCamera(positionVector, zoom, 1000);
-      } else {
-        this.setCameraPosition(positionVector, zoom);
-        this.render();
-      }
-    } // eslint-disable-next-line no-unused-vars
-
-  }, {
-    key: "setupDefaultControls",
-    value: function setupDefaultControls(targetElement) {
-      var _this3 = this;
-
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      this.controls = {
-        enabled: true,
-        update: function update() {}
-      };
-      var element = targetElement || this.renderer.domElement;
-      this._pointerMoveEventListener = (0, _pointerEvent.createPointerMoveEventListener)(element, function (evt, change) {
-        evt.preventDefault();
-
-        if (!_this3.controls || !_this3.controls.enabled) {
-          return;
-        }
-
-        var x = _this3.camera.position.x - change.x / _this3.camera.zoom;
-        var y = _this3.camera.position.y + change.y / _this3.camera.zoom;
-        var zoom = _this3.camera.zoom;
-
-        if (change.zoom !== null) {
-          var newZoom = zoom * change.zoom;
-
-          if (allowZooming(newZoom, _this3.camera.zoom, _this3._minZoom, _this3._maxZoom)) {
-            zoom = newZoom;
-          }
-        }
-
-        _this3.setPositionBetweenBoundaries(x, y, zoom);
-      });
-      this._mouseWheelEventListener = (0, _pointerEvent.createMouseWheelEventListener)(element, function (evt) {
-        if (_this3._cameraMovementLocked) {
-          return;
-        }
-
-        var eventDelta = evt.deltaY || evt.detail;
-        var zoomIn = eventDelta < 0;
-        var zoomStep = 0.1;
-        var zoom = _this3.camera.zoom + (zoomIn ? 1 : -1) * zoomStep;
-
-        if (!allowZooming(zoom, _this3.camera.zoom, _this3._minZoom, _this3._maxZoom)) {
-          return;
-        }
-
-        _this3.setPositionBetweenBoundaries(_this3.camera.position.x, _this3.camera.position.y, zoom);
-      });
-    }
-  }, {
-    key: "setupDefaultLightning",
-    value: function setupDefaultLightning() {// no lightning needed since only basic material is used which is not affected by the light
-    }
-  }, {
-    key: "loadModel",
-    value: function loadModel() {
-      return this.loadView(true);
-    }
-  }, {
-    key: "dispatchMaterialUpdateEvent",
-    value: function () {
-      var _dispatchMaterialUpdateEvent = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-        var options,
-            _options$screenshot,
-            screenshot,
-            eventParams,
-            _args2 = arguments;
-
-        return regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                options = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
-                _options$screenshot = options.screenshot, screenshot = _options$screenshot === void 0 ? false : _options$screenshot;
-                eventParams = {
-                  variant: this._materialVariantPath,
-                  screenshot: screenshot
-                }; // the redrawing of the areas can be synced if the event handler returns a Promise
-
-                _context2.next = 5;
-                return this.observable.dispatch(_Constants.EventTypes.MaterialUpdated, eventParams, true);
-
-              case 5:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this);
-      }));
-
-      function dispatchMaterialUpdateEvent() {
-        return _dispatchMaterialUpdateEvent.apply(this, arguments);
-      }
-
-      return dispatchMaterialUpdateEvent;
-    }() // eslint-disable-next-line no-unused-vars
-
-  }, {
-    key: "updateMaterial",
-    value: function () {
-      var _updateMaterial = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-        var targetObject,
-            _args3 = arguments;
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                targetObject = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : this.scene;
-                _context3.next = 3;
-                return this.updateView(this._currentDesignView);
-
-              case 3:
-                return _context3.abrupt("return", _context3.sent);
-
-              case 4:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3, this);
-      }));
-
-      function updateMaterial() {
-        return _updateMaterial.apply(this, arguments);
-      }
-
-      return updateMaterial;
-    }()
-  }, {
-    key: "_getDrawingContext",
-    value: function () {
-      var _getDrawingContext2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(drawingFn) {
-        var _this4 = this;
-
-        var updateAlpha,
-            clearTexture,
-            materialName,
-            availableDesignAreas,
-            _args5 = arguments;
-        return regeneratorRuntime.wrap(function _callee5$(_context5) {
-          while (1) {
-            switch (_context5.prev = _context5.next) {
-              case 0:
-                updateAlpha = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : false;
-                clearTexture = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : false;
-                materialName = _args5.length > 3 && _args5[3] !== undefined ? _args5[3] : undefined;
-                availableDesignAreas = (0, _get2["default"])(this._currentDesignView, "designAreas") || [];
-                _context5.next = 6;
-                return Promise.all(availableDesignAreas.map( /*#__PURE__*/function () {
-                  var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(designArea) {
-                    var material, _this4$getCanvasConte, ctx, canvas, texture, getTextureBuilder, width, height;
-
-                    return regeneratorRuntime.wrap(function _callee4$(_context4) {
-                      while (1) {
-                        switch (_context4.prev = _context4.next) {
-                          case 0:
-                            material = _this4._materialMap.get(designArea.identifier);
-
-                            if (!(!material || !material.map || !material.map.image)) {
-                              _context4.next = 3;
-                              break;
-                            }
-
-                            throw new Error("Cannot get drawing context for material: ".concat(materialName, "! Is it prepared already?"));
-
-                          case 3:
-                            _this4$getCanvasConte = _this4.getCanvasContextForTexture(material.map), ctx = _this4$getCanvasConte.ctx, canvas = _this4$getCanvasConte.canvas, texture = _this4$getCanvasConte.texture;
-                            getTextureBuilder = (0, _createTextureBuilder.createTextureBuilder)(canvas, {
-                              currentZoom: _this4._screenshotCamera ? _this4._screenshotCamera.zoom : _this4.camera.zoom,
-                              useTextureSize: true
-                            });
-
-                            if (clearTexture) {
-                              width = canvas.width, height = canvas.height;
-                              ctx.clearRect(0, 0, width, height);
-                            }
-
-                            _context4.next = 8;
-                            return drawingFn(ctx, getTextureBuilder, [designArea]);
-
-                          case 8:
-                            texture.needsUpdate = true;
-
-                          case 9:
-                          case "end":
-                            return _context4.stop();
-                        }
-                      }
-                    }, _callee4);
-                  }));
-
-                  return function (_x3) {
-                    return _ref6.apply(this, arguments);
-                  };
-                }()));
-
-              case 6:
-                if (!this.isAnimating()) {
-                  this.render();
-                }
-
-              case 7:
-              case "end":
-                return _context5.stop();
-            }
-          }
-        }, _callee5, this);
-      }));
-
-      function _getDrawingContext(_x2) {
-        return _getDrawingContext2.apply(this, arguments);
-      }
-
-      return _getDrawingContext;
-    }()
-  }, {
-    key: "getDrawingContext",
-    value: function () {
-      var _getDrawingContext3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
-        var _this$_getDrawingCont,
-            _this5 = this;
-
-        var _args7 = arguments;
-        return regeneratorRuntime.wrap(function _callee7$(_context7) {
-          while (1) {
-            switch (_context7.prev = _context7.next) {
-              case 0:
-                this._redraw = (_this$_getDrawingCont = this._getDrawingContext).bind.apply(_this$_getDrawingCont, [this].concat(Array.prototype.slice.call(_args7)));
-
-                if (!this._redrawPromise) {
-                  window.cancelAnimationFrame(this._redrawFrame);
-                  this._redrawPromise = new Promise(function (resolve, reject) {
-                    _this5._redrawFrame = window.requestAnimationFrame( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-                      return regeneratorRuntime.wrap(function _callee6$(_context6) {
-                        while (1) {
-                          switch (_context6.prev = _context6.next) {
-                            case 0:
-                              _context6.prev = 0;
-                              _context6.next = 3;
-                              return _this5.redraw();
-
-                            case 3:
-                              resolve();
-                              _context6.next = 9;
-                              break;
-
-                            case 6:
-                              _context6.prev = 6;
-                              _context6.t0 = _context6["catch"](0);
-                              reject(_context6.t0);
-
-                            case 9:
-                              _context6.prev = 9;
-                              delete _this5._redrawPromise;
-                              return _context6.finish(9);
-
-                            case 12:
-                            case "end":
-                              return _context6.stop();
-                          }
-                        }
-                      }, _callee6, null, [[0, 6, 9, 12]]);
-                    })));
-                  });
-                }
-
-                _context7.next = 4;
-                return this._redrawPromise;
-
-              case 4:
-              case "end":
-                return _context7.stop();
-            }
-          }
-        }, _callee7, this);
-      }));
-
-      function getDrawingContext() {
-        return _getDrawingContext3.apply(this, arguments);
-      }
-
-      return getDrawingContext;
-    }()
-  }, {
-    key: "getCanvasContextForTexture",
-    value: function getCanvasContextForTexture(texture) {
-      var canvas = texture.image;
-
-      if (canvas instanceof HTMLCanvasElement) {
-        var ctx = canvas.getContext("2d");
-        return {
-          ctx: ctx,
-          canvas: canvas,
-          texture: texture
-        };
-      }
-
-      throw new Error("Cannot get drawing context for canvas. Is it prepared already?");
-    }
-  }, {
-    key: "setViewPath",
-    value: function setViewPath(path) {
-      this._viewPath = path;
-    }
-  }, {
-    key: "getModelPath",
-    value: function getModelPath() {
-      var _this6 = this;
-
-      if (this._modelPath) {
-        return [this._modelBasePath, this._modelPath].join("/");
-      }
-
-      var pathChunks = ["_basePath", "_itemPath", "_viewPath", "_materialVariantPath"];
-      var parts = pathChunks.map(function (pathName) {
-        return _this6[pathName];
-      }).filter(function (p) {
-        return p;
-      });
-      var path = parts.join("/");
-
-      if (parts.length !== pathChunks.length) {
-        throw new Error("Incomplete path: ".concat(path, ", required parts: ").concat(pathChunks.join("/")));
-      }
-
-      return "".concat(path, ".jpg");
-    }
-  }, {
-    key: "setModelPath",
-    value: function setModelPath(path) {
-      this._modelPath = path.replace(/^\//, "");
-    }
-  }, {
-    key: "loadView",
-    value: function () {
-      var _loadView = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
-        var rerender,
-            url,
-            image,
-            tex,
-            _args8 = arguments;
-        return regeneratorRuntime.wrap(function _callee8$(_context8) {
-          while (1) {
-            switch (_context8.prev = _context8.next) {
-              case 0:
-                rerender = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : false;
-
-                if (this._itemPath && this._viewPath) {
-                  _context8.next = 3;
-                  break;
-                }
-
-                return _context8.abrupt("return", false);
-
-              case 3:
-                url = this.getModelPath();
-                this.onLoadStart();
-                _context8.next = 7;
-                return this._imageRepository.loadImage(url);
-
-              case 7:
-                image = _context8.sent;
-                this.onLoadFinished();
-                tex = new _three.Texture((0, _optimizeTextureImage.optimizeTextureImage)(image, MAX_TEXTURE_SIZE, MIN_TEXTURE_SIZE));
-                tex.premultiplyAlpha = true;
-                tex.originalSize = (0, _getImageSize.getImageSize)(image);
-                tex.needsUpdate = true;
-                this.initModelWithTexture(tex);
-
-                if (rerender) {
-                  this.render();
-                }
-
-              case 15:
-              case "end":
-                return _context8.stop();
-            }
-          }
-        }, _callee8, this);
-      }));
-
-      function loadView() {
-        return _loadView.apply(this, arguments);
-      }
-
-      return loadView;
-    }()
-  }, {
-    key: "initModelWithTexture",
-    value: function initModelWithTexture(tex) {
-      var _tex$originalSize = tex.originalSize,
-          width = _tex$originalSize.width,
-          height = _tex$originalSize.height;
-      var planeMaterial = new _three.MeshBasicMaterial({
-        map: tex
-      });
-      var planeGeometry = new _three.PlaneGeometry(width, height, 1, 1);
-      var plane = new _three.Mesh(planeGeometry, planeMaterial);
-      plane.position.z = planeZ; // remove the current model first
-
-      this.scene.remove(this._model);
-      this.scene.add(plane);
-      this._model = plane;
-      this._size = {
-        width: width,
-        height: height
-      };
-    }
-  }, {
-    key: "getOffset",
-    value: function getOffset() {
-      var _this$_size2 = this._size,
-          width = _this$_size2.width,
-          height = _this$_size2.height;
-      return {
-        x: -width / 2,
-        y: height / 2
-      };
-    }
-  }, {
-    key: "createCanvasMaterial",
-    value: function createCanvasMaterial(designArea) {
-      var originalSize = (0, _getDesignAreaCanvasSize.getDesignAreaCanvasSize)(designArea);
-      var size;
-
-      try {
-        size = (0, _createTextureBuilder.optimizeSizeToTexture)(originalSize, DESIGN_AREA_PIXEL_RATIO, true, MAX_TEXTURE_SIZE);
-      } catch (e) {
-        this.observable.dispatch(_Constants.EventTypes.Error, e);
-        throw e;
-      }
-
-      var _createWorkingCanvas = (0, _createCanvas.createWorkingCanvas)(size),
-          _createWorkingCanvas2 = _slicedToArray(_createWorkingCanvas, 1),
-          canvas = _createWorkingCanvas2[0];
-
-      var tex = new _three.Texture(canvas);
-      tex.anisotropy = this.renderer.capabilities.getMaxAnisotropy();
-      tex.originalSize = originalSize;
-      var mat = new _three.MeshBasicMaterial({
-        map: tex
-      });
-      mat.transparent = true;
-      mat.name = designArea.identifier; // if the "inside" prop is true, use the BackSide
-
-      if ((0, _get2["default"])(designArea, "baseShape.inside", false)) {
-        mat.side = _three.BackSide;
-      }
-
-      this._customizableMaterialKeys.push(mat.name);
-
-      this._customizableMaterials.push(mat);
-
-      this._materialMap.set(designArea.identifier, mat);
-
-      return mat;
-    }
-    /**
-     * Animates the camera position and zoom to the given target
-     * @param {Vector3} position
-     * @param {number} zoom
-     * @param {{[position]: number, [zoom]: number}} duration The animation duration in ms
-     */
-
-  }, {
-    key: "moveCamera",
-    value: function moveCamera(position, zoom) {
-      var _this7 = this;
-
-      var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      this.cleanUpCameraAnimations();
-      var animationDef = new _Deferred.DeferredGroup();
-
-      if (zoom) {
-        new _tween["default"].Tween(this.camera, this.cameraTweenGroup).to({
-          zoom: zoom
-        }, duration.zoom || 1000).easing(_tween["default"].Easing.Quadratic.Out).onUpdate(function () {
-          return _this7.camera.updateProjectionMatrix();
-        }).onComplete(animationDef.createResolver()).start();
-      }
-
-      if (position) {
-        new _tween["default"].Tween(this.camera.position, this.cameraTweenGroup).to(position, duration.position || 1000).easing(_tween["default"].Easing.Quadratic.Out).onComplete(animationDef.createResolver()).start();
-      }
-
-      animationDef.then(function () {
-        return _this7.stopAnimation("camera");
-      });
-      this.startAnimation("camera");
-    }
-  }, {
-    key: "findAreaObjectByName",
-    value: function findAreaObjectByName(name) {
-      return this._containerGroup && this._containerGroup.getObjectByName(name);
-    }
-  }, {
-    key: "calculateZoomForObject",
-    value: function calculateZoomForObject(obj) {
-      if (!obj) {
-        return this.getDefaultZoom();
-      }
-
-      var _Box3$setFromObject = new _three.Box3().setFromObject(obj),
-          min = _Box3$setFromObject.min,
-          max = _Box3$setFromObject.max;
-
-      var _max$sub = max.sub(min),
-          w = _max$sub.x,
-          h = _max$sub.y;
-
-      var _ref8 = this._fitSize || this.renderer.getSize(new _three.Vector2()),
-          cWidth = _ref8.width,
-          cHeight = _ref8.height;
-
-      return Math.max(cWidth / w, cHeight / h);
-    }
-  }, {
-    key: "createObjectsForDesignAreas",
-    value: function createObjectsForDesignAreas(designAreas) {
-      var _this8 = this;
-
-      var containerGroup = new _three.Group();
-      var EPS = 10;
-      var index = 1;
-      designAreas.forEach(function (designArea) {
-        var baseShape = designArea.baseShape;
-        var geometry;
-
-        try {
-          geometry = createBaseShapeGeometry(designArea);
-        } catch (e) {
-          _this8.observable.dispatch(_Constants.EventTypes.Error, e);
-
-          throw e;
-        }
-
-        var _x$y$z$rotation$baseS = _objectSpread({
-          x: 0,
-          y: 0,
-          z: 0,
-          rotation: {
-            x: 0,
-            y: 0,
-            z: 0
-          }
-        }, baseShape),
-            x = _x$y$z$rotation$baseS.x,
-            y = _x$y$z$rotation$baseS.y,
-            z = _x$y$z$rotation$baseS.z,
-            rotation = _x$y$z$rotation$baseS.rotation;
-
-        var mat = _this8.createCanvasMaterial(designArea);
-
-        var obj = new _three.Mesh(geometry, mat);
-        Object.assign(obj.rotation, rotation);
-        obj.position.x = x;
-        obj.position.y = y;
-        obj.position.z = z || EPS * index;
-        obj.name = designArea.identifier;
-        containerGroup.add(obj);
-        index++;
-      });
-      return containerGroup;
-    }
-  }, {
-    key: "getModelPathFromDesignView",
-    value: function getModelPathFromDesignView(designView) {
-      return this._materialVariantPath ? (0, _get2["default"])(designView, "images[".concat(this._materialVariantPath, "]")) : (0, _get2["default"])(designView, "images[".concat(this._itemPath, "]"));
-    }
-  }, {
-    key: "clearScene",
-    value: function clearScene() {
-      delete this._redraw; // remove the redraw function to prevent drawing on non-existing textures
-
-      this.scene && this.scene.remove(this._containerGroup);
-      (0, _removeObject.removeObject)(this._containerGroup);
-      this._customizableMaterialKeys = [];
-      this._customizableMaterials = [];
-
-      this._materialMap.forEach(_disposeMaterial.disposeMaterial);
-
-      this._materialMap.clear();
-    }
-  }, {
-    key: "updateViewForArea",
-    value: function () {
-      var _updateViewForArea = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(selectedDesignArea) {
-        var options,
-            designView,
-            _args9 = arguments;
-        return regeneratorRuntime.wrap(function _callee9$(_context9) {
-          while (1) {
-            switch (_context9.prev = _context9.next) {
-              case 0:
-                options = _args9.length > 1 && _args9[1] !== undefined ? _args9[1] : {};
-                designView = (0, _get2["default"])(selectedDesignArea, "designView");
-                _context9.next = 4;
-                return this.updateView(designView, options);
-
-              case 4:
-                return _context9.abrupt("return", _context9.sent);
-
-              case 5:
-              case "end":
-                return _context9.stop();
-            }
-          }
-        }, _callee9, this);
-      }));
-
-      function updateViewForArea(_x4) {
-        return _updateViewForArea.apply(this, arguments);
-      }
-
-      return updateViewForArea;
-    }()
-    /**
-     * Tries to find a design view with the given identifier. If there are no matches, tries to find a design area.
-     * @param {string} identifier
-     * @return {T}
-     */
-
-  }, {
-    key: "findDesignArea",
-    value: function findDesignArea(identifier) {
-      return this._designAreaList.filter(function (designArea) {
-        return (0, _get2["default"])(designArea, "designView.identifier") === identifier;
-      })[0] || this._designAreaList.filter(function (designArea) {
-        return designArea.identifier === identifier;
-      })[0];
-    }
-  }, {
-    key: "setActiveDesignArea",
-    value: function setActiveDesignArea(designArea) {
-      this._currentDesignArea = designArea;
-    }
-  }, {
-    key: "getActiveDesignArea",
-    value: function getActiveDesignArea() {
-      return this._currentDesignArea;
-    }
-    /**
-     *
-     * @param {string} designAreaIdentifier
-     * @param {boolean} animate
-     * @param {{[position]: number, [zoom]: number}} duration The animation duration in ms when animated
-     * @param {boolean} forceUpdate True if DesignArea-DesignProduction Method height/width differs as update required
-     * @return {boolean} False if the operation is not possible, otherwise true
-     */
-
-  }, {
-    key: "jumpToArea",
-    value: function () {
-      var _jumpToArea = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(designAreaIdentifier) {
-        var animate,
-            duration,
-            forceUpdate,
-            designArea,
-            obj,
-            zoom,
-            position,
-            _args10 = arguments;
-        return regeneratorRuntime.wrap(function _callee10$(_context10) {
-          while (1) {
-            switch (_context10.prev = _context10.next) {
-              case 0:
-                animate = _args10.length > 1 && _args10[1] !== undefined ? _args10[1] : true;
-                duration = _args10.length > 2 && _args10[2] !== undefined ? _args10[2] : {};
-                forceUpdate = _args10.length > 3 && _args10[3] !== undefined ? _args10[3] : false;
-                // use the current design area if present, otherwise try to find it by the designViewIdentifier
-                designArea = (0, _size["default"])(this._currentDesignArea) > 0 ? this._currentDesignArea : this.findDesignArea(designAreaIdentifier);
-
-                if (!(designAreaIdentifier !== "default")) {
-                  _context10.next = 8;
-                  break;
-                }
-
-                _context10.next = 7;
-                return this.updateViewForArea(designArea, {
-                  forceUpdate: forceUpdate
-                });
-
-              case 7:
-                this.render();
-
-              case 8:
-                if (this._containerGroup) {
-                  _context10.next = 11;
-                  break;
-                }
-
-                // eslint-disable-next-line no-console
-                console.log("Container group is not available, skipping jump to view!");
-                return _context10.abrupt("return", false);
-
-              case 11:
-                obj = designArea && this.findAreaObjectByName(designArea.identifier);
-                zoom = this.calculateZoomForObject(obj);
-                position = new _three.Vector3();
-
-                if (obj) {
-                  obj.getWorldPosition(position);
-                }
-
-                position.z = this.camera.position.z;
-
-                if (animate) {
-                  this.moveCamera(position, zoom, duration);
-                } else {
-                  this.setCameraPosition(position, zoom);
-                }
-
-                return _context10.abrupt("return", true);
-
-              case 18:
-              case "end":
-                return _context10.stop();
-            }
-          }
-        }, _callee10, this);
-      }));
-
-      function jumpToArea(_x5) {
-        return _jumpToArea.apply(this, arguments);
-      }
-
-      return jumpToArea;
-    }()
-    /**
-     * Jump to the selected view
-     * @param {object} designView The design view object
-     * @return {boolean} False if the operation is not possible, otherwise true
-     */
-
-  }, {
-    key: "setView",
-    value: function () {
-      var _setView = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(designView) {
-        return regeneratorRuntime.wrap(function _callee11$(_context11) {
-          while (1) {
-            switch (_context11.prev = _context11.next) {
-              case 0:
-                _context11.next = 2;
-                return this.updateView(designView);
-
-              case 2:
-                if (this._containerGroup) {
-                  _context11.next = 5;
-                  break;
-                }
-
-                // eslint-disable-next-line no-console
-                console.log("Container group is not available, skipping jump to view!");
-                return _context11.abrupt("return", false);
-
-              case 5:
-                this.render();
-                return _context11.abrupt("return", true);
-
-              case 7:
-              case "end":
-                return _context11.stop();
-            }
-          }
-        }, _callee11, this);
-      }));
-
-      function setView(_x6) {
-        return _setView.apply(this, arguments);
-      }
-
-      return setView;
-    }()
-  }, {
-    key: "updateMaxZoomSetting",
-    value: function updateMaxZoomSetting(maxZoom) {
-      this.setMaxZoom(maxZoom > this._minZoom ? maxZoom : this._minZoom);
-    }
-  }, {
-    key: "setCameraPosition",
-    value: function setCameraPosition(position, zoom) {
-      Object.assign(this.camera.position, position);
-      Object.assign(this.camera, {
-        zoom: zoom
-      });
-      this.camera.updateProjectionMatrix();
-    }
-  }, {
-    key: "updateDesignAreaList",
-    value: function () {
-      var _updateDesignAreaList = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(designAreaList) {
-        var updateView,
-            identifier,
-            activeArea,
-            _args12 = arguments;
-        return regeneratorRuntime.wrap(function _callee12$(_context12) {
-          while (1) {
-            switch (_context12.prev = _context12.next) {
-              case 0:
-                updateView = _args12.length > 1 && _args12[1] !== undefined ? _args12[1] : false;
-                this._designAreaList = designAreaList;
-
-                if (!updateView) {
-                  _context12.next = 9;
-                  break;
-                }
-
-                identifier = this._currentDesignArea && this._currentDesignArea.identifier;
-                activeArea = (0, _find["default"])(designAreaList, {
-                  identifier: identifier
-                }) || (0, _first["default"])(designAreaList);
-
-                if (!activeArea) {
-                  _context12.next = 9;
-                  break;
-                }
-
-                _context12.next = 8;
-                return this.updateViewForArea(activeArea);
-
-              case 8:
-                // update the zoom to the initial value only if there is no designArea selected
-                !identifier && this.updateZoom();
-
-              case 9:
-              case "end":
-                return _context12.stop();
-            }
-          }
-        }, _callee12, this);
-      }));
-
-      function updateDesignAreaList(_x7) {
-        return _updateDesignAreaList.apply(this, arguments);
-      }
-
-      return updateDesignAreaList;
-    }()
-  }, {
-    key: "getScreenshotSize",
-    value: function getScreenshotSize(targetSize) {
-      var width = (0, _get2["default"])(targetSize, "width", 1024);
-      var height = (0, _get2["default"])(targetSize, "height", 768);
-      var initialRatio = width / height;
-      var modelRatio = this._size.width / this._size.height;
-
-      if (modelRatio > initialRatio) {
-        height = width / modelRatio;
-      } else {
-        width = height * modelRatio;
-      }
-
-      return {
-        width: width,
-        height: height
-      };
-    }
-  }, {
-    key: "getScreenshots",
-    value: function () {
-      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(callback, _ref9) {
-        var _this9 = this;
-
-        var designViewList, areaList, variantList, size, removeTempOverlay, origDesignView, designAreaList, variants, screenshots, origVariantPath, origSize, origPixelRatio, restoreOriginalValues, camera, views, _iterator, _step, _loop, _ret;
-
-        return regeneratorRuntime.wrap(function _callee15$(_context17) {
-          while (1) {
-            switch (_context17.prev = _context17.next) {
-              case 0:
-                designViewList = _ref9.designViewList, areaList = _ref9.areaList, variantList = _ref9.variantList, size = _ref9.size;
-
-                if (this.renderer) {
-                  _context17.next = 3;
-                  break;
-                }
-
-                return _context17.abrupt("return", callback({}));
-
-              case 3:
-                this._screenshottingInProgress = true;
-                this.endAnimation();
-                _context17.next = 7;
-                return this.animationRunning();
-
-              case 7:
-                _context17.next = 9;
-                return this.createTempOverlay();
-
-              case 9:
-                removeTempOverlay = _context17.sent;
-                origDesignView = this._currentDesignView; // if the areaList option is provided, use it to filter the design areas
-
-                designAreaList = areaList instanceof Array && areaList.length > 0 ? this._designAreaList.filter(function (designArea) {
-                  return areaList.indexOf(designArea.identifier) !== -1;
-                }) : this._designAreaList;
-                variants = variantList instanceof Array && variantList.length > 0 ? variantList : [this._materialVariantPath];
-                screenshots = {}; // store the original camera, variant and renderer size
-
-                origVariantPath = this._materialVariantPath;
-                origSize = new _three.Vector2();
-                this.renderer.getSize(origSize);
-                origPixelRatio = this.renderer.getPixelRatio();
-
-                restoreOriginalValues = /*#__PURE__*/function () {
-                  var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
-                    return regeneratorRuntime.wrap(function _callee13$(_context13) {
-                      while (1) {
-                        switch (_context13.prev = _context13.next) {
-                          case 0:
-                            _this9._screenshotCamera = null;
-                            _this9._screenshottingInProgress = false;
-                            _this9._materialVariantPath = origVariantPath;
-                            _this9._currentDesignView = null;
-                            _context13.next = 6;
-                            return _this9.setView(origDesignView);
-
-                          case 6:
-                            _this9.renderer.setSize(origSize.width, origSize.height);
-
-                            _this9.renderer.setPixelRatio(origPixelRatio);
-
-                            _this9.render();
-
-                            removeTempOverlay();
-
-                          case 10:
-                          case "end":
-                            return _context13.stop();
-                        }
-                      }
-                    }, _callee13);
-                  }));
-
-                  return function restoreOriginalValues() {
-                    return _ref10.apply(this, arguments);
-                  };
-                }();
-
-                camera = this.createCameraBase();
-                this._screenshotCamera = camera;
-                views = designViewList || designAreaList.map(function (_ref11) {
-                  var designView = _ref11.designView;
-                  return designView;
-                });
-                _iterator = _createForOfIteratorHelper(variants);
-                _context17.prev = 23;
-                _loop = /*#__PURE__*/regeneratorRuntime.mark(function _loop() {
-                  var variant, data, _iterator2, _step2, _loop2, _ret2;
-
-                  return regeneratorRuntime.wrap(function _loop$(_context16) {
-                    while (1) {
-                      switch (_context16.prev = _context16.next) {
-                        case 0:
-                          variant = _step.value;
-                          data = {};
-
-                          _this9.setMaterialVariantPath(variant);
-
-                          _this9._currentDesignView = null;
-                          _iterator2 = _createForOfIteratorHelper(views);
-                          _context16.prev = 5;
-                          _loop2 = /*#__PURE__*/regeneratorRuntime.mark(function _loop2() {
-                            var view;
-                            return regeneratorRuntime.wrap(function _loop2$(_context15) {
-                              while (1) {
-                                switch (_context15.prev = _context15.next) {
-                                  case 0:
-                                    view = _step2.value;
-
-                                    if (!_this9._abortScreenshotting) {
-                                      _context15.next = 7;
-                                      break;
-                                    }
-
-                                    _context15.next = 4;
-                                    return restoreOriginalValues();
-
-                                  case 4:
-                                    _context15.t0 = _context15.sent;
-                                    _context15.t1 = {
-                                      v: _context15.t0
-                                    };
-                                    return _context15.abrupt("return", {
-                                      v: _context15.t1
-                                    });
-
-                                  case 7:
-                                    _context15.prev = 7;
-                                    _context15.next = 10;
-                                    return new Promise(function (resolve) {
-                                      window.setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
-                                        var _this9$getScreenshotS, width, height;
-
-                                        return regeneratorRuntime.wrap(function _callee14$(_context14) {
-                                          while (1) {
-                                            switch (_context14.prev = _context14.next) {
-                                              case 0:
-                                                _context14.next = 2;
-                                                return _this9.updateView(view, {
-                                                  forceUpdate: false,
-                                                  updateMaterial: false
-                                                });
-
-                                              case 2:
-                                                _this9$getScreenshotS = _this9.getScreenshotSize(size), width = _this9$getScreenshotS.width, height = _this9$getScreenshotS.height;
-                                                (0, _setOrthographicCameraSize.setOrthographicCameraSize)(camera, width, height);
-
-                                                _this9.renderer.setSize(width, height);
-
-                                                _this9.renderer.setPixelRatio(1);
-
-                                                camera.zoom = _this9.getZoomForSize({
-                                                  width: width,
-                                                  height: height
-                                                });
-                                                camera.updateProjectionMatrix();
-                                                _context14.next = 10;
-                                                return _this9.dispatchMaterialUpdateEvent({
-                                                  screenshot: true
-                                                });
-
-                                              case 10:
-                                                // set size and pixel ratio right before rendering, to make sure they are correct
-                                                _this9.renderer.setSize(width, height);
-
-                                                _this9.renderer.setPixelRatio(1);
-
-                                                _this9.renderer.render(_this9.scene, camera);
-
-                                                data[view.identifier] = _this9.renderer.domElement.toDataURL();
-                                                resolve();
-
-                                              case 15:
-                                              case "end":
-                                                return _context14.stop();
-                                            }
-                                          }
-                                        }, _callee14);
-                                      })));
-                                    });
-
-                                  case 10:
-                                    _context15.next = 14;
-                                    break;
-
-                                  case 12:
-                                    _context15.prev = 12;
-                                    _context15.t2 = _context15["catch"](7);
-
-                                  case 14:
-                                  case "end":
-                                    return _context15.stop();
-                                }
-                              }
-                            }, _loop2, null, [[7, 12]]);
-                          });
-
-                          _iterator2.s();
-
-                        case 8:
-                          if ((_step2 = _iterator2.n()).done) {
-                            _context16.next = 15;
-                            break;
-                          }
-
-                          return _context16.delegateYield(_loop2(), "t0", 10);
-
-                        case 10:
-                          _ret2 = _context16.t0;
-
-                          if (!(_typeof(_ret2) === "object")) {
-                            _context16.next = 13;
-                            break;
-                          }
-
-                          return _context16.abrupt("return", _ret2.v);
-
-                        case 13:
-                          _context16.next = 8;
-                          break;
-
-                        case 15:
-                          _context16.next = 20;
-                          break;
-
-                        case 17:
-                          _context16.prev = 17;
-                          _context16.t1 = _context16["catch"](5);
-
-                          _iterator2.e(_context16.t1);
-
-                        case 20:
-                          _context16.prev = 20;
-
-                          _iterator2.f();
-
-                          return _context16.finish(20);
-
-                        case 23:
-                          screenshots[variant] = data;
-
-                        case 24:
-                        case "end":
-                          return _context16.stop();
-                      }
-                    }
-                  }, _loop, null, [[5, 17, 20, 23]]);
-                });
-
-                _iterator.s();
-
-              case 26:
-                if ((_step = _iterator.n()).done) {
-                  _context17.next = 33;
-                  break;
-                }
-
-                return _context17.delegateYield(_loop(), "t0", 28);
-
-              case 28:
-                _ret = _context17.t0;
-
-                if (!(_typeof(_ret) === "object")) {
-                  _context17.next = 31;
-                  break;
-                }
-
-                return _context17.abrupt("return", _ret.v);
-
-              case 31:
-                _context17.next = 26;
-                break;
-
-              case 33:
-                _context17.next = 38;
-                break;
-
-              case 35:
-                _context17.prev = 35;
-                _context17.t1 = _context17["catch"](23);
-
-                _iterator.e(_context17.t1);
-
-              case 38:
-                _context17.prev = 38;
-
-                _iterator.f();
-
-                return _context17.finish(38);
-
-              case 41:
-                _context17.next = 43;
-                return restoreOriginalValues();
-
-              case 43:
-                callback(screenshots);
-
-              case 44:
-              case "end":
-                return _context17.stop();
-            }
-          }
-        }, _callee15, this, [[23, 35, 38, 41]]);
-      }));
-
-      function getScreenshots(_x8, _x9) {
-        return _getScreenshots.apply(this, arguments);
-      }
-
-      return getScreenshots;
-    }()
-  }, {
-    key: "textureHitFormatter",
-    value: function textureHitFormatter(intersect, position) {
-      var designAreaIdentifier = (0, _get2["default"])(intersect, "object.material.name");
-      var texture = intersect.object.material.map;
-      var flipY = texture.flipY,
-          originalSize = texture.originalSize;
-      var width = originalSize.width,
-          height = originalSize.height;
-      var x = Math.round(intersect.uv.x * width);
-      var y = Math.round((flipY ? 1 - intersect.uv.y : intersect.uv.y) * height);
-      return _objectSpread(_objectSpread({}, position), {}, {
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        designAreaIdentifier: designAreaIdentifier,
-        currentView: this._currentDesignView
-      });
-    }
-  }, {
-    key: "addCylinder",
-    value: function addCylinder(r, width, height) {
-      var theta = width / r;
-      var cylinder = new _three.CylinderGeometry(r, r, height, 0, 1, true, -theta / 2, theta);
-      var mat = new _three.MeshBasicMaterial({
-        color: 0x55ff55
-      });
-      var obj = new _three.Mesh(cylinder, mat);
-      obj.position.x = 1200;
-      obj.position.y = -400;
-      this.scene.add(obj);
-      this.render();
-      return obj;
-    }
-  }, {
-    key: "dispose",
-    value: function dispose() {
-      if (this._pointerMoveEventListener) {
-        this._pointerMoveEventListener();
-      }
-
-      if (this._mouseWheelEventListener) {
-        this._mouseWheelEventListener();
-      }
-
-      this._designAreaList = [];
-      this._currentDesignView = null;
-      this._currentDesignArea = null;
-      this._model = null;
-      this._containerGroup = null;
-      this._redraw = null;
-
-      this._materialMap.clear();
-
-      _get(_getPrototypeOf(Three2D.prototype), "dispose", this).call(this);
-    }
-  }]);
-
-  return Three2D;
-}(_ThreeBase2.ThreeBase);
-
-exports.Three2D = Three2D;
-
-var createBaseShapeGeometry = function createBaseShapeGeometry(designArea) {
-  var baseShape = designArea.baseShape;
-  var type = baseShape.type;
-
-  switch (type) {
-    case "Plane":
-      {
-        var _getDesignAreaCanvasS = (0, _getDesignAreaCanvasSize.getDesignAreaCanvasSize)(designArea),
-            width = _getDesignAreaCanvasS.width,
-            height = _getDesignAreaCanvasS.height;
-
-        return new _three.PlaneGeometry(width, height, 1, 1);
-      }
-
-    case "Cylinder":
-      {
-        var _getDesignAreaCanvasS2 = (0, _getDesignAreaCanvasSize.getDesignAreaCanvasSize)(designArea),
-            _width = _getDesignAreaCanvasS2.width,
-            _height = _getDesignAreaCanvasS2.height;
-
-        var _r$thetaOffset$baseSh = _objectSpread({
-          r: 100,
-          thetaOffset: 0
-        }, baseShape),
-            r = _r$thetaOffset$baseSh.r,
-            thetaOffset = _r$thetaOffset$baseSh.thetaOffset;
-
-        var theta = Math.min(_width / r, _Constants.Numeric.TwoPI);
-        var radiusSegments = Math.round(theta * r);
-        return new _three.CylinderGeometry(r, r, _height, radiusSegments, 1, true, -theta / 2 + thetaOffset, theta);
-      }
-
-    default:
-      throw new Error("Unknown shape type: ".concat(type));
-  }
-};