@configuratorware/configurator-admingui 1.28.0-beta.2 → 1.28.2

package/Screens/Designer/SubScreens/Visualization/Components/Three2DEditor.js

@@ -1,802 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createThree2DEditor = exports.fixIncompletePosition = exports.scaleAreaProps = exports.getAreaProps = void 0;
-
-var _first = _interopRequireDefault(require("lodash/first"));
-
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _ExposedModules = require("redhotmagma-visualization/lib//ExposedModules");
-
-var _pointerEvent = require("../../../../../Utils/Events/pointerEvent");
-
-var _funDraw = require("../../../../../Utils/FunDraw/funDraw");
-
-var _createMask = require("../../../../../Utils/FunDraw/createMask");
-
-var _move = _interopRequireDefault(require("./resources/move.svg"));
-
-var _size = _interopRequireDefault(require("./resources/size.svg"));
-
-var _rotate = _interopRequireDefault(require("./resources/rotate.svg"));
-
-var _rotateX = _interopRequireDefault(require("./resources/rotate-x.svg"));
-
-var _rotateY = _interopRequireDefault(require("./resources/rotate-y.svg"));
-
-var _rotateZ = _interopRequireDefault(require("./resources/rotate-z.svg"));
-
-var _excluded = ["width", "height", "x", "y"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-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 Group = _ExposedModules.THREE.Group,
-    Raycaster = _ExposedModules.THREE.Raycaster,
-    Vector2 = _ExposedModules.THREE.Vector2,
-    Vector3 = _ExposedModules.THREE.Vector3,
-    MeshBasicMaterial = _ExposedModules.THREE.MeshBasicMaterial,
-    Mesh = _ExposedModules.THREE.Mesh,
-    CylinderGeometry = _ExposedModules.THREE.CylinderGeometry,
-    BackSide = _ExposedModules.THREE.BackSide,
-    PlaneBufferGeometry = _ExposedModules.THREE.PlaneBufferGeometry,
-    TextureLoader = _ExposedModules.THREE.TextureLoader,
-    DoubleSide = _ExposedModules.THREE.DoubleSide,
-    LinearFilter = _ExposedModules.THREE.LinearFilter;
-var EPS = 0.01;
-var TWO_PI = Math.PI * 2;
-var CONTROL_SIZE = 24;
-var CYLINDER_DEFAULT_RADIUS = 100;
-var MAX_ZOOM = 1.5;
-
-var getAreaProps = function getAreaProps(designArea) {
-  var _designArea$baseShape = designArea.baseShape,
-      wBase = _designArea$baseShape.width,
-      hBase = _designArea$baseShape.height;
-
-  var _width$height$x$y$des = _objectSpread({
-    width: wBase,
-    height: hBase,
-    x: wBase / 2,
-    y: hBase / 2
-  }, designArea.position),
-      width = _width$height$x$y$des.width,
-      height = _width$height$x$y$des.height,
-      x = _width$height$x$y$des.x,
-      y = _width$height$x$y$des.y;
-
-  return _objectSpread(_objectSpread({}, designArea.position), {}, {
-    width: width,
-    height: height,
-    x: x,
-    y: y
-  });
-};
-
-exports.getAreaProps = getAreaProps;
-
-var scaleAreaProps = function scaleAreaProps(_ref, scaling) {
-  var width = _ref.width,
-      height = _ref.height,
-      x = _ref.x,
-      y = _ref.y,
-      others = _objectWithoutProperties(_ref, _excluded);
-
-  return _objectSpread({
-    width: width * scaling,
-    height: height * scaling,
-    x: x * scaling,
-    y: y * scaling
-  }, others);
-};
-
-exports.scaleAreaProps = scaleAreaProps;
-
-var fixIncompletePosition = function fixIncompletePosition(designArea) {
-  return _objectSpread(_objectSpread({}, designArea), {}, {
-    position: getAreaProps(designArea)
-  });
-};
-
-exports.fixIncompletePosition = fixIncompletePosition;
-
-var createTextureRepo = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var cache,
-        preload,
-        _args = arguments;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            cache = {};
-
-            preload = function preload() {
-              for (var _len = arguments.length, textureList = new Array(_len), _key = 0; _key < _len; _key++) {
-                textureList[_key] = arguments[_key];
-              }
-
-              return Promise.all(textureList.map(function (src) {
-                return new Promise(function (resolve) {
-                  var texture = new TextureLoader().load(src, function () {
-                    resolve(cache[src]);
-                  });
-                  texture.minFilter = LinearFilter;
-                  cache[src] = texture;
-                });
-              }));
-            };
-
-            if (!(_args.length > 0)) {
-              _context.next = 5;
-              break;
-            }
-
-            _context.next = 5;
-            return preload.apply(void 0, _args);
-
-          case 5:
-            return _context.abrupt("return", {
-              preload: preload,
-              get: function get(src) {
-                return cache[src];
-              }
-            });
-
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-
-  return function createTextureRepo() {
-    return _ref2.apply(this, arguments);
-  };
-}();
-
-var controlFactory = function controlFactory(textureRepo) {
-  return function (name) {
-    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var geometry = new PlaneBufferGeometry(CONTROL_SIZE, CONTROL_SIZE);
-    var material = new MeshBasicMaterial();
-    var control = new Mesh(geometry, material);
-    control.name = name;
-    control.isControl = true;
-    Object.assign(control, props);
-
-    if (props.icon) {
-      material.map = textureRepo.get(props.icon);
-      material.side = DoubleSide;
-      material.transparent = true;
-    } else {
-      material.color = 0x00ff00;
-    }
-
-    return control;
-  };
-};
-
-var watchZoomChange = function watchZoomChange(threeInstance, callback) {
-  var zoom = threeInstance.camera.zoom;
-  Object.defineProperty(threeInstance.camera, 'zoom', {
-    get: function get() {
-      return zoom;
-    },
-    set: function set(value) {
-      zoom = value;
-      callback(zoom);
-    }
-  });
-};
-
-var createThree2DEditor = /*#__PURE__*/function () {
-  var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(threeInstance, onChange) {
-    var baseShapeData, advancedMode, controls, maskObject, textureRepo, triggerChange, createHelper, _clearScene, addControls, createChessboardPattern, clearContextCanvas, addCenterLines, redrawCanvas, getIntersection, setupHitTest, getData, _prevBaseShapeData, updateBaseShapeData, removeHitTestListener, init, update, dispose, setAdvancedMode, setMask;
-
-    return regeneratorRuntime.wrap(function _callee7$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            _context7.next = 2;
-            return createTextureRepo(_move["default"], _size["default"], _rotate["default"], _rotateX["default"], _rotateY["default"], _rotateZ["default"]);
-
-          case 2:
-            textureRepo = _context7.sent;
-
-            triggerChange = /*#__PURE__*/function () {
-              var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-                return regeneratorRuntime.wrap(function _callee2$(_context2) {
-                  while (1) {
-                    switch (_context2.prev = _context2.next) {
-                      case 0:
-                        _context2.next = 2;
-                        return onChange(baseShapeData);
-
-                      case 2:
-                        return _context2.abrupt("return", _context2.sent);
-
-                      case 3:
-                      case "end":
-                        return _context2.stop();
-                    }
-                  }
-                }, _callee2);
-              }));
-
-              return function triggerChange() {
-                return _ref4.apply(this, arguments);
-              };
-            }();
-
-            createHelper = function createHelper(obj) {
-              if (obj.geometry.type === 'CylinderGeometry') {
-                var inside = obj.material.side === BackSide;
-                var p = obj.geometry.parameters;
-                var geo = new CylinderGeometry(p.radiusTop + (inside ? 1 : -1), p.radiusBottom + (inside ? 1 : -1), p.height + 2, p.radialSegments, 1, // height segments
-                true, // open ended
-                p.thetaStart);
-                var mat = new MeshBasicMaterial({
-                  color: 0xff2222,
-                  transparent: true,
-                  opacity: 0.5,
-                  depthWrite: false
-                });
-                mat.side = DoubleSide;
-                return new Mesh(geo, mat);
-              }
-
-              return false;
-            };
-
-            _clearScene = threeInstance.clearScene.bind(threeInstance);
-
-            addControls = function addControls() {
-              if (!threeInstance._containerGroup) {
-                // eslint-disable-next-line no-console
-                console.log('No container group, skipping addControls step.');
-                return;
-              }
-
-              var createControl = controlFactory(textureRepo, threeInstance);
-              threeInstance.scene.remove(threeInstance._containerGroup);
-              var containerGroup = new Group(); // edit only one baseShape at a time
-
-              var baseShapeObj = (0, _first["default"])(threeInstance._containerGroup.children);
-              var obj = baseShapeObj.clone();
-              var group = new Group();
-              group.position.copy(obj.position);
-              group.rotation.copy(obj.rotation);
-              var geometry = obj.geometry;
-              geometry.computeBoundingBox();
-              var boundingBox = geometry.boundingBox;
-              obj.rotation.set(0, 0, 0);
-              obj.position.set(0, 0, 0);
-              group.add(obj); // move
-
-              var move = createControl('move', {
-                icon: _move["default"]
-              });
-              move.position.x = boundingBox.min.x;
-              move.position.y = boundingBox.max.y;
-              move.position.z = boundingBox.max.z + EPS;
-              group.add(move); // scale
-
-              var scale = createControl('scale', {
-                icon: _size["default"]
-              });
-              scale.position.x = boundingBox.max.x;
-              scale.position.y = boundingBox.min.y;
-              scale.position.z = boundingBox.max.z + EPS;
-              group.add(scale); // rotate
-
-              var rotate = createControl('rotate', {
-                axis: 'z',
-                icon: _rotate["default"]
-              });
-              rotate.position.x = boundingBox.max.x;
-              rotate.position.y = boundingBox.max.y;
-              rotate.position.z = boundingBox.max.z + EPS; // rotate-z
-
-              var rotateZ = createControl('rotate', {
-                axis: 'z',
-                icon: _rotateZ["default"]
-              });
-              rotateZ.position.x = boundingBox.max.x;
-              rotateZ.position.y = boundingBox.max.y;
-              rotateZ.position.z = boundingBox.max.z + EPS; // rotate-y
-
-              var rotateY = createControl('rotate', {
-                axis: 'y',
-                icon: _rotateY["default"]
-              });
-              rotateY.position.y = boundingBox.max.y * 1.2 + EPS; // rotate-x
-
-              var rotateX = createControl('rotate', {
-                axis: 'x',
-                icon: _rotateX["default"]
-              });
-              rotateX.position.x = boundingBox.min.x * 1.3 + EPS;
-              var helper = createHelper(obj);
-              helper && group.add(helper);
-
-              group.applyScale = function (value) {
-                obj.scale.multiplyScalar(value);
-                helper && helper.scale.multiplyScalar(value);
-                move.position.multiplyScalar(value);
-                scale.position.multiplyScalar(value);
-                rotate.position.multiplyScalar(value);
-                rotateZ.position.multiplyScalar(value);
-                rotateY.position.multiplyScalar(value);
-                rotateX.position.multiplyScalar(value);
-              };
-
-              containerGroup.add(group);
-
-              var update = function update() {
-                group.remove(rotate, rotateX, rotateY, rotateZ);
-
-                if (advancedMode) {
-                  group.add(rotateX, rotateY, rotateZ);
-                } else {
-                  group.add(rotate);
-                }
-
-                group.children.filter(function (o) {
-                  return o.isControl;
-                }).forEach(function (o) {
-                  o.scale.setScalar(1 / threeInstance.camera.zoom);
-                });
-                threeInstance.render();
-              };
-
-              update();
-              watchZoomChange(threeInstance, update);
-              threeInstance._containerGroup = containerGroup;
-              threeInstance.scene.add(containerGroup);
-
-              threeInstance.clearScene = function () {
-                containerGroup.remove(group);
-
-                _clearScene();
-              };
-
-              return {
-                update: update
-              };
-            };
-
-            createChessboardPattern = function createChessboardPattern(targetCtx, _ref5) {
-              var width = _ref5.width;
-              var canvas = document.createElement('canvas');
-              var ctx = canvas.getContext('2d');
-              var size = Math.max(20, Math.ceil(width / 20));
-              canvas.width = size * 2;
-              canvas.height = size * 2;
-              ctx.beginPath();
-              ctx.rect(0, 0, size, size);
-              ctx.rect(size, size, size, size);
-              ctx.closePath();
-              ctx.fillStyle = 'rgba(128, 128, 128, 0.2)';
-              ctx.fill();
-              ctx.beginPath();
-              ctx.rect(size, 0, size, size);
-              ctx.rect(0, size, size, size);
-              ctx.closePath();
-              ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
-              ctx.fill();
-              return targetCtx.createPattern(canvas, 'repeat');
-            };
-
-            clearContextCanvas = function clearContextCanvas(ctx, baseColor) {
-              var _ctx$canvas = ctx.canvas,
-                  width = _ctx$canvas.width,
-                  height = _ctx$canvas.height;
-              ctx.clearRect(0, 0, width, height);
-
-              if (baseColor) {
-                ctx.fillStyle = baseColor;
-                ctx.fillRect(0, 0, width, height);
-              }
-            };
-
-            addCenterLines = function addCenterLines(ctx, scaling, width, height) {
-              ctx.save();
-              ctx.lineWidth = 2 * scaling;
-              ctx.strokeStyle = 'rgba(57, 255, 20 , 1)';
-              ctx.beginPath();
-              var lineOffset = 3;
-              var lineY = height * 0.5 + lineOffset;
-              ctx.moveTo(0, lineY);
-              ctx.lineTo(width, lineY);
-              var lineX = width * 0.5 + lineOffset;
-              ctx.moveTo(lineX, 0);
-              ctx.lineTo(lineX, height);
-              ctx.stroke();
-              ctx.restore();
-            };
-
-            redrawCanvas = /*#__PURE__*/function () {
-              var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-                return regeneratorRuntime.wrap(function _callee4$(_context4) {
-                  while (1) {
-                    switch (_context4.prev = _context4.next) {
-                      case 0:
-                        _context4.next = 2;
-                        return threeInstance.getDrawingContext( /*#__PURE__*/function () {
-                          var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(textureCanvasCtx, getTextureBuilder, _ref7) {
-                            var _ref9, designArea, _getTextureBuilder, calculateDesignAreaSize, _calculateDesignAreaS, scaling, areaProps, width, height, area;
-
-                            return regeneratorRuntime.wrap(function _callee3$(_context3) {
-                              while (1) {
-                                switch (_context3.prev = _context3.next) {
-                                  case 0:
-                                    _ref9 = _slicedToArray(_ref7, 1), designArea = _ref9[0];
-                                    _getTextureBuilder = getTextureBuilder(), calculateDesignAreaSize = _getTextureBuilder.calculateDesignAreaSize;
-                                    _calculateDesignAreaS = calculateDesignAreaSize(designArea), scaling = _calculateDesignAreaS.scaling;
-                                    areaProps = scaleAreaProps(getAreaProps(designArea), scaling);
-                                    width = areaProps.width, height = areaProps.height;
-
-                                    if (!(maskObject && maskObject.maskData)) {
-                                      _context3.next = 14;
-                                      break;
-                                    }
-
-                                    _context3.t1 = _createMask.createAreaWithMask;
-                                    _context3.t2 = areaProps;
-                                    _context3.next = 10;
-                                    return (0, _createMask.createMask)({
-                                      width: width,
-                                      height: height
-                                    }, maskObject.maskSrc, maskObject.maskData);
-
-                                  case 10:
-                                    _context3.t3 = _context3.sent;
-                                    _context3.t0 = (0, _context3.t1)(_context3.t2, _context3.t3);
-                                    _context3.next = 17;
-                                    break;
-
-                                  case 14:
-                                    _context3.next = 16;
-                                    return (0, _funDraw.createAreaWithLogo)(_objectSpread(_objectSpread({}, areaProps), {}, {
-                                      name: 'area',
-                                      fillStyle: createChessboardPattern(textureCanvasCtx, areaProps)
-                                    }));
-
-                                  case 16:
-                                    _context3.t0 = _context3.sent;
-
-                                  case 17:
-                                    area = _context3.t0;
-                                    clearContextCanvas(textureCanvasCtx, 'rgba(128, 128, 128, 0.15)');
-                                    addCenterLines(textureCanvasCtx, scaling, width, height);
-                                    (0, _funDraw.draw)(_objectSpread(_objectSpread({}, area), {}, {
-                                      flipX: designArea.baseShape.inside
-                                    }), textureCanvasCtx);
-
-                                  case 21:
-                                  case "end":
-                                    return _context3.stop();
-                                }
-                              }
-                            }, _callee3);
-                          }));
-
-                          return function (_x3, _x4, _x5) {
-                            return _ref8.apply(this, arguments);
-                          };
-                        }(), false, true);
-
-                      case 2:
-                      case "end":
-                        return _context4.stop();
-                    }
-                  }
-                }, _callee4);
-              }));
-
-              return function redrawCanvas() {
-                return _ref6.apply(this, arguments);
-              };
-            }();
-
-            getIntersection = function getIntersection(pointerEvent) {
-              var raycaster = new Raycaster();
-
-              var _threeInstance$render = threeInstance.renderer.domElement.getBoundingClientRect(),
-                  elementWidth = _threeInstance$render.width,
-                  elementHeight = _threeInstance$render.height,
-                  offsetX = _threeInstance$render.left,
-                  offsetY = _threeInstance$render.top;
-
-              var point = (0, _pointerEvent.getPointFromPointerEvent)(pointerEvent);
-              var mouse = new Vector2((point.x - offsetX) / elementWidth * 2 - 1, -((point.y - offsetY) / elementHeight) * 2 + 1);
-              raycaster.setFromCamera(mouse, threeInstance.camera);
-              var intersects = raycaster.intersectObjects(threeInstance._containerGroup.children, true);
-
-              if (intersects.length > 0) {
-                // use the control if available, otherwise the closest object
-                var intersect = intersects.find(function (_ref10) {
-                  var object = _ref10.object;
-                  return object.isControl;
-                }) || intersects[0];
-                return {
-                  target: intersect,
-                  getTextureHit: function getTextureHit() {
-                    var material = intersect.object.material; // note: the texture Y is flipped by default in the webgl context
-                    // see (https://github.com/mrdoob/three.js/issues/5644)
-                    // so if it's flipped we need to flip it back to get the image coordinates
-
-                    var texture = material.map;
-                    var flipY = texture.flipY;
-                    var _texture$image = texture.image,
-                        width = _texture$image.width,
-                        height = _texture$image.height;
-                    var x = Math.round(intersect.uv.x * width);
-                    var y = Math.round((flipY ? 1 - intersect.uv.y : intersect.uv.y) * height);
-                    return {
-                      intersect: intersect,
-                      position: {
-                        width: width,
-                        height: height,
-                        x: x,
-                        y: y
-                      }
-                    };
-                  }
-                };
-              }
-
-              return null;
-            };
-
-            setupHitTest = function setupHitTest() {
-              var element = threeInstance.renderer.domElement;
-              return (0, _pointerEvent.createPointerEventListener)(element, 'start', function (evt) {
-                var is = getIntersection(evt);
-
-                if (is) {
-                  // prevent moving the camera with the shape transformation
-                  evt.stopImmediatePropagation();
-                  var handle = is.target.object;
-                  var name = handle.name,
-                      axis = handle.axis;
-                  var zoom = threeInstance.camera.zoom;
-                  var startPoint = (0, _pointerEvent.getPointFromPointerEvent)(evt, element);
-                  var size = new Vector2();
-                  threeInstance.renderer.getSize(size);
-                  var obj = handle.parent;
-                  var targetObj = (0, _first["default"])(obj.children);
-                  var removeMoveListener = (0, _pointerEvent.createPointerEventListener)(window, 'move', function (evt) {
-                    var point = (0, _pointerEvent.getPointFromPointerEvent)(evt, element);
-
-                    if (name === 'rotate') {
-                      var _x$y = {
-                        x: obj.position.x * zoom + size.x / 2,
-                        y: -obj.position.y * zoom + size.y / 2
-                      },
-                          ox = _x$y.x,
-                          oy = _x$y.y;
-                      var x1 = point.x,
-                          y1 = point.y;
-                      var _startPoint = startPoint,
-                          x = _startPoint.x,
-                          y = _startPoint.y;
-
-                      if (axis === 'y') {
-                        var position = new Vector3();
-                        handle.getWorldPosition(position);
-                        var _ox = position.x,
-                            _oy = position.y;
-                        var dAngle = (0, _funDraw.getDistance)(_ox, _oy, x1, y1) - (0, _funDraw.getDistance)(_ox, _oy, x, y);
-                        obj.rotateY(dAngle / TWO_PI / 10);
-                      } else if (axis === 'x') {
-                        var _position = new Vector3();
-
-                        handle.getWorldPosition(_position);
-                        var _ox2 = _position.x,
-                            _oy2 = _position.y;
-
-                        var _dAngle = (0, _funDraw.getDistance)(_ox2, _oy2, x1, y1) - (0, _funDraw.getDistance)(_ox2, _oy2, x, y);
-
-                        obj.rotateX(_dAngle / TWO_PI / 10);
-                      } else {
-                        var _dAngle2 = Math.atan2(y1 - oy, x1 - ox) - Math.atan2(y - oy, x - ox);
-
-                        obj.rotateZ(-_dAngle2);
-                      }
-                    } else if (name === 'scale') {
-                      var _x$y2 = {
-                        x: obj.position.x * zoom + size.x / 2,
-                        y: -obj.position.y * zoom + size.y / 2
-                      },
-                          _oy3 = _x$y2.y,
-                          _ox3 = _x$y2.x;
-                      var _x6 = point.x,
-                          _y = point.y;
-                      var _startPoint2 = startPoint,
-                          _x7 = _startPoint2.x,
-                          _y2 = _startPoint2.y;
-                      var scale = (0, _funDraw.getDistance)(_ox3, _oy3, _x6, _y) / (0, _funDraw.getDistance)(_ox3, _oy3, _x7, _y2);
-                      obj.applyScale(scale);
-                    } else {
-                      obj.position.x += (point.x - startPoint.x) / zoom;
-                      obj.position.y += -(point.y - startPoint.y) / zoom;
-                    }
-
-                    startPoint = point;
-                    threeInstance.render();
-                  });
-                  var removeEndListener = (0, _pointerEvent.createPointerEventListener)(window, 'end', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-                    var getShapeSpecificData;
-                    return regeneratorRuntime.wrap(function _callee5$(_context5) {
-                      while (1) {
-                        switch (_context5.prev = _context5.next) {
-                          case 0:
-                            removeMoveListener();
-                            removeEndListener(); // update data
-
-                            getShapeSpecificData = function getShapeSpecificData(baseShape) {
-                              if (baseShape.type === 'Cylinder') {
-                                return {
-                                  r: (baseShape.r || CYLINDER_DEFAULT_RADIUS) * targetObj.scale.x
-                                };
-                              }
-
-                              return {};
-                            };
-
-                            baseShapeData = _objectSpread(_objectSpread({}, baseShapeData), {}, {
-                              height: Math.round(baseShapeData.height * targetObj.scale.y),
-                              width: Math.round(baseShapeData.width * targetObj.scale.x),
-                              x: obj.position.x,
-                              y: obj.position.y,
-                              rotation: _objectSpread(_objectSpread({}, obj.rotation.toVector3()), {}, {
-                                order: obj.rotation.order
-                              })
-                            }, getShapeSpecificData(baseShapeData));
-                            _context5.next = 6;
-                            return triggerChange();
-
-                          case 6:
-                          case "end":
-                            return _context5.stop();
-                        }
-                      }
-                    }, _callee5);
-                  })));
-                }
-              });
-            };
-
-            getData = function getData() {
-              return baseShapeData;
-            };
-
-            updateBaseShapeData = function updateBaseShapeData() {
-              _prevBaseShapeData = baseShapeData;
-              baseShapeData = (0, _get["default"])(threeInstance, '_designAreaList[0].baseShape', {});
-            };
-
-            init = function init() {
-              threeInstance.setMaxZoom(MAX_ZOOM);
-              removeHitTestListener = setupHitTest();
-            };
-
-            update = /*#__PURE__*/function () {
-              var _ref12 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-                var obj;
-                return regeneratorRuntime.wrap(function _callee6$(_context6) {
-                  while (1) {
-                    switch (_context6.prev = _context6.next) {
-                      case 0:
-                        updateBaseShapeData();
-                        controls = addControls();
-                        _context6.next = 4;
-                        return redrawCanvas();
-
-                      case 4:
-                        // set the min zoom to fit the image in the area
-                        threeInstance.setMinZoom(threeInstance.getDefaultZoom());
-
-                        if (!(_prevBaseShapeData && baseShapeData.inside !== (0, _get["default"])(_prevBaseShapeData, 'inside'))) {
-                          _context6.next = 12;
-                          break;
-                        }
-
-                        if (!(baseShapeData.type === 'Cylinder')) {
-                          _context6.next = 12;
-                          break;
-                        }
-
-                        obj = (0, _first["default"])(threeInstance._containerGroup.children);
-                        obj.rotateY(Math.PI * (baseShapeData.inside ? 1 : -1));
-                        baseShapeData = _objectSpread(_objectSpread({}, baseShapeData), {}, {
-                          rotation: _objectSpread(_objectSpread({}, obj.rotation.toVector3()), {}, {
-                            order: obj.rotation.order
-                          })
-                        });
-                        _context6.next = 12;
-                        return triggerChange();
-
-                      case 12:
-                      case "end":
-                        return _context6.stop();
-                    }
-                  }
-                }, _callee6);
-              }));
-
-              return function update() {
-                return _ref12.apply(this, arguments);
-              };
-            }();
-
-            dispose = function dispose() {
-              if (removeHitTestListener) {
-                removeHitTestListener();
-              }
-            };
-
-            setAdvancedMode = function setAdvancedMode(value) {
-              advancedMode = value;
-              controls && controls.update();
-            };
-
-            setMask = function setMask(value) {
-              maskObject = value;
-            };
-
-            return _context7.abrupt("return", {
-              init: init,
-              update: update,
-              redrawCanvas: redrawCanvas,
-              getData: getData,
-              dispose: dispose,
-              setAdvancedMode: setAdvancedMode,
-              setMask: setMask
-            });
-
-          case 21:
-          case "end":
-            return _context7.stop();
-        }
-      }
-    }, _callee7);
-  }));
-
-  return function createThree2DEditor(_x, _x2) {
-    return _ref3.apply(this, arguments);
-  };
-}();
-
-exports.createThree2DEditor = createThree2DEditor;