@configuratorware/configurator-admingui 1.28.4 → 1.29.0

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

@@ -0,0 +1,802 @@
+"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/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;