@configuratorware/configurator-admingui 1.41.2 → 1.42.2

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

@@ -3,96 +3,70 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createThree2DEditor = exports.fixIncompletePosition = exports.scaleAreaProps = exports.getAreaProps = void 0;
-
+exports.scaleAreaProps = exports.getAreaProps = exports.fixIncompletePosition = exports.createThree2DEditor = 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 _point = _interopRequireDefault(require("./resources/point.svg"));
 var _excluded = ["width", "height", "x", "y"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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 _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 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; }
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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;
+  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 getAreaProps = exports.getAreaProps = function getAreaProps(designArea) {
   var _designArea$baseShape = designArea.baseShape,
-      wBase = _designArea$baseShape.width,
-      hBase = _designArea$baseShape.height;
-
+    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;
-
+      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,
@@ -100,16 +74,12 @@ var getAreaProps = function getAreaProps(designArea) {
     y: y
   });
 };
-
-exports.getAreaProps = getAreaProps;
-
-var scaleAreaProps = function scaleAreaProps(_ref, scaling) {
+var scaleAreaProps = exports.scaleAreaProps = function scaleAreaProps(_ref, scaling) {
   var width = _ref.width,
-      height = _ref.height,
-      x = _ref.x,
-      y = _ref.y,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    height = _ref.height,
+    x = _ref.x,
+    y = _ref.y,
+    others = _objectWithoutProperties(_ref, _excluded);
   return _objectSpread({
     width: width * scaling,
     height: height * scaling,
@@ -117,73 +87,57 @@ var scaleAreaProps = function scaleAreaProps(_ref, scaling) {
     y: y * scaling
   }, others);
 };
-
-exports.scaleAreaProps = scaleAreaProps;
-
-var fixIncompletePosition = function fixIncompletePosition(designArea) {
+var fixIncompletePosition = exports.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 _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;
+      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;
-            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();
-        }
+            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] : {};
@@ -193,7 +147,6 @@ var controlFactory = function controlFactory(textureRepo) {
     control.name = name;
     control.isControl = true;
     Object.assign(control, props);
-
     if (props.icon) {
       material.map = textureRepo.get(props.icon);
       material.side = DoubleSide;
@@ -201,11 +154,9 @@ var controlFactory = function controlFactory(textureRepo) {
     } else {
       material.color = 0x00ff00;
     }
-
     return control;
   };
 };
-
 var watchZoomChange = function watchZoomChange(threeInstance, callback) {
   var zoom = threeInstance.camera.zoom;
   Object.defineProperty(threeInstance.camera, 'zoom', {
@@ -218,585 +169,607 @@ var watchZoomChange = function watchZoomChange(threeInstance, callback) {
     }
   });
 };
-
-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;
+var createThree2DEditor = exports.createThree2DEditor = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(threeInstance, onChange) {
+    var baseShapeData, advancedMode, controls, maskObject, controlPointMode, textureRepo, triggerChange, createHelper, _clearScene, addControls, addControlPoints, createChessboardPattern, clearContextCanvas, addCenterLines, redrawCanvas, getIntersection, setupHitTest, getData, _prevBaseShapeData, updateBaseShapeData, removeHitTestListener, init, update, dispose, setAdvancedMode, setMask, setControlPointMode;
+    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"], _point["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);
             };
-
-            _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"]
+          }();
+          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
               });
-              rotateY.position.y = boundingBox.max.y * 1.2 + EPS; // rotate-x
+              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;
 
-              var rotateX = createControl('rotate', {
-                axis: 'x',
-                icon: _rotateX["default"]
+            // 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);
               });
-              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
-              };
+              threeInstance.render();
             };
-
-            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');
+            update();
+            watchZoomChange(threeInstance, update);
+            threeInstance._containerGroup = containerGroup;
+            threeInstance.scene.add(containerGroup);
+            threeInstance.clearScene = function () {
+              containerGroup.remove(group);
+              _clearScene();
             };
-
-            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);
+            return {
+              update: update
+            };
+          };
+          addControlPoints = function addControlPoints() {
+            if (!threeInstance._containerGroup) {
+              // eslint-disable-next-line no-console
+              console.log('No container group, skipping addControlPoints 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);
+            obj.rotation.set(0, 0, 0);
+            obj.position.set(0, 0, 0);
+            group.add(obj);
+            containerGroup.add(group);
+            var controlPoints = baseShapeObj.geometry.getControlPoints();
+            var keys = Object.keys(controlPoints);
+            for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+              var key = _keys[_i];
+              var cp = createControl("controlPoint:".concat(key), {
+                icon: _point["default"]
+              });
+              cp.position.set(controlPoints[key].x, controlPoints[key].y);
+              group.add(cp);
+            }
+            group.updateControlPoint = function (key) {
+              var cp = controlPoints[key];
+              var cpObj = group.getObjectByName("controlPoint:".concat(key));
+              if (cp && cpObj) {
+                cpObj.position.set(cp.x, cp.y, 0);
               }
+              return cpObj;
             };
-
-            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();
+            var update = function update() {
+              keys.map(group.updateControlPoint).forEach(function (o) {
+                o.scale.setScalar(1 / threeInstance.camera.zoom);
+              });
+              threeInstance.render();
             };
-
-            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();
-                                }
+            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;
                               }
-                            }, _callee3);
-                          }));
-
-                          return function (_x3, _x4, _x5) {
-                            return _ref8.apply(this, arguments);
-                          };
-                        }(), false, true);
-
-                      case 2:
-                      case "end":
-                        return _context4.stop();
+                              _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
                     }
-                  }
-                }, _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 = {
+            }
+            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 = {
+                      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;
+                      _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 if (name.startsWith('controlPoint:')) {
+                    var shape = obj.children[0];
+                    if (!shape.geometry.getControlPoints || !shape.geometry.update) {
+                      throw new Error('Geometry does not support control points!');
                     }
-
-                    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) {
+                    var pKey = name.split(':')[1];
+                    var p = shape.geometry.getControlPoints()[pKey];
+                    if (!p) {
+                      throw new Error('Control point does not exist for key: ' + pKey);
+                    }
+                    p.x += (point.x - startPoint.x) / zoom;
+                    p.y += -(point.y - startPoint.y) / zoom;
+                    shape.geometry.update();
+                    obj.updateControlPoint(pKey);
+                  } 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:
-                        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));
+                        removeMoveListener();
+                        removeEndListener();
+
+                        // update data
+                        getShapeSpecificData = function getShapeSpecificData(baseShape) {
+                          if (baseShape.type === 'Cylinder') {
+                            return {
+                              r: (baseShape.r || CYLINDER_DEFAULT_RADIUS) * targetObj.scale.x
+                            };
+                          }
+                          if (baseShape.type === 'Plane' && baseShape.useControlPoints) {
+                            var shape = obj.children[0];
+                            var points = shape.geometry.getControlPoints();
+                            return {
+                              points: Object.keys(points).reduce(function (result, key) {
+                                return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, key, {
+                                  x: points[key].x * targetObj.scale.x,
+                                  y: points[key].y * targetObj.scale.y
+                                }));
+                              }, {})
+                            };
+                          }
+                          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
                           })
-                        });
-                        _context6.next = 12;
+                        }, getShapeSpecificData(baseShapeData));
+                        _context5.next = 6;
                         return triggerChange();
-
-                      case 12:
+                      case 6:
                       case "end":
-                        return _context6.stop();
+                        return _context5.stop();
                     }
-                  }
-                }, _callee6);
-              }));
-
-              return function update() {
-                return _ref12.apply(this, arguments);
-              };
-            }();
-
-            dispose = function dispose() {
-              if (removeHitTestListener) {
-                removeHitTestListener();
+                  }, _callee5);
+                })));
               }
-            };
-
-            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();
-        }
+          };
+          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();
+                    if (baseShapeData.type !== 'Plane' && controlPointMode) {
+                      controlPointMode = false;
+                    }
+                    controls = controlPointMode ? addControlPoints() : addControls();
+                    _context6.next = 5;
+                    return redrawCanvas();
+                  case 5:
+                    // 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 = 13;
+                      break;
+                    }
+                    if (!(baseShapeData.type === 'Cylinder')) {
+                      _context6.next = 13;
+                      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 = 13;
+                    return triggerChange();
+                  case 13:
+                  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;
+            controlPointMode = false;
+            controls && controls.update();
+          };
+          setMask = function setMask(value) {
+            maskObject = value;
+          };
+          setControlPointMode = function setControlPointMode(on) {
+            controlPointMode = on;
+            if (on) {
+              baseShapeData = _objectSpread(_objectSpread({}, baseShapeData), {}, {
+                useControlPoints: true
+              });
+            }
+            triggerChange();
+          };
+          return _context7.abrupt("return", {
+            init: init,
+            update: update,
+            redrawCanvas: redrawCanvas,
+            getData: getData,
+            dispose: dispose,
+            setAdvancedMode: setAdvancedMode,
+            setMask: setMask,
+            setControlPointMode: setControlPointMode
+          });
+        case 23:
+        case "end":
+          return _context7.stop();
       }
     }, _callee7);
   }));
-
   return function createThree2DEditor(_x, _x2) {
     return _ref3.apply(this, arguments);
   };
-}();
-
-exports.createThree2DEditor = createThree2DEditor;
+}();