@configuratorware/configurator-admingui 1.41.2 → 1.42.2

package/Screens/Assemblypointeditor/Components/Assemblypointeditor.js

@@ -1,75 +1,44 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateAssemblypointeditor = exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _lodash = _interopRequireDefault(require("lodash"));
-
 var _i18n = require("../../../App/i18n");
-
 var _RaisedButton = _interopRequireDefault(require("../../../UIComponents/RaisedButton"));
-
 var _IconButton = _interopRequireDefault(require("../../../UIComponents/IconButton"));
-
 var _ZoomResetIcon = _interopRequireDefault(require("../../../UIComponents/icons/ZoomResetIcon"));
-
 var _AssemblypointTable = _interopRequireDefault(require("./AssemblypointTable"));
-
 var _Select = _interopRequireDefault(require("../../../Components/FormFragments/Select"));
-
 var _network = _interopRequireDefault(require("../../../App/Config/network"));
-
 var _CopyPaste = _interopRequireDefault(require("../../../Components/CopyPaste"));
-
 require("./Styles.scss");
-
 require("./fabric.min.js");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
+function _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); } /* global fabric */
 var baseUrl = _network["default"].assemblyPointEditorBaseURL;
 var DEVICE_PIXEL_RATIO = window.devicePixelRatio || 1;
-
 /**
  * AssemblyImage fabric class that extends the fabric.Image, used to render the assembly points
  */
@@ -84,8 +53,9 @@ var AssemblyImage = fabric.util.createClass(fabric.Image, {
     this.transparentCorners = false;
     this.lockUniScaling = true;
     this.lockScalingX = true;
-    this.lockScalingY = true; // we just need the rotation control
+    this.lockScalingY = true;
 
+    // we just need the rotation control
     this.setControlsVisibility({
       bl: false,
       // bottom left
@@ -102,7 +72,6 @@ var AssemblyImage = fabric.util.createClass(fabric.Image, {
       tl: false,
       // top left
       tr: false // top right
-
     });
   },
 
@@ -126,19 +95,17 @@ var AssemblyImage = fabric.util.createClass(fabric.Image, {
   _render: function _render(ctx) {
     // render the image
     this.callSuper('_render', ctx);
-
     if (this.isMain) {
       return; // nothing more to do...
-    } // draw the crosshair
-
+    }
 
+    // draw the crosshair
     var scale = this.canvas.getZoom() * DEVICE_PIXEL_RATIO;
     var size = 10;
     var viewportTransform = this.canvas.viewportTransform;
     ctx.save();
     ctx.beginPath();
     ctx.setTransform(1, 0, 0, 1, 0, 0); // resetTransform polyfill
-
     ctx.setTransform(1, 0, 0, 1, viewportTransform[4] * DEVICE_PIXEL_RATIO, viewportTransform[5] * DEVICE_PIXEL_RATIO);
     ctx.translate(this.left * scale, this.top * scale);
     ctx.lineWidth = 1;
@@ -157,30 +124,28 @@ var AssemblyImage = fabric.util.createClass(fabric.Image, {
  * @param {string} url - The image to load
  * @param {function} callback - The callback function to call with the AssemblyImage object
  */
-
 AssemblyImage.fromURL = function (url, callback) {
   return fabric.util.loadImage(url, function (img) {
     var obj = new AssemblyImage(img);
     callback(obj);
   });
 };
-
-var Assemblypointeditor = /*#__PURE__*/function (_Component) {
+var Assemblypointeditor = exports["default"] = /*#__PURE__*/function (_Component) {
   _inherits(Assemblypointeditor, _Component);
-
   var _super = _createSuper(Assemblypointeditor);
-
   function Assemblypointeditor(props) {
     var _this;
-
     _classCallCheck(this, Assemblypointeditor);
+    _this = _super.call(this, props);
 
-    _this = _super.call(this, props); // the fabric canvas object
-
+    // the fabric canvas object
+    /**
+     * Lock or release objects (to make canvas draggable when clicking on active element)
+     * @param {boolean} lock
+     */
     _defineProperty(_assertThisInitialized(_this), "lockObjectMovement", function (lock) {
       var _iterator = _createForOfIteratorHelper(_this.canvas.getObjects()),
-          _step;
-
+        _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var o = _step.value;
@@ -195,33 +160,31 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
         _iterator.f();
       }
     });
-
+    /**
+     * Modify the position of the active object (rerenders the canvas, updates related AssemblyPoints)
+     * @param {('left'|'top')} positionProp
+     * @param {number} value
+     */
     _defineProperty(_assertThisInitialized(_this), "modifyPosition", function (positionProp, value) {
       var aobj = _this.canvas.getActiveObject() || _this.canvas.getActiveGroup();
-
       if (!aobj) {
         return;
       }
-
       aobj.set(positionProp, aobj[positionProp] + value);
       aobj.setCoords();
       var objs = aobj.identifier ? [aobj] : aobj.getObjects();
       var assemblyPoints = _this.state.assemblyPoints;
-
       var _iterator2 = _createForOfIteratorHelper(objs),
-          _step2;
-
+        _step2;
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var obj = _step2.value;
-
           if (obj.identifier) {
             var ap = _lodash["default"].find(assemblyPoints, {
-              identifier: obj.identifier
-            }),
-                matrix = obj.calcTransformMatrix(),
-                options = fabric.util.qrDecompose(matrix);
-
+                identifier: obj.identifier
+              }),
+              matrix = obj.calcTransformMatrix(),
+              options = fabric.util.qrDecompose(matrix);
             ap.y = Math.round(options.translateY);
             ap.x = Math.round(options.translateX);
             ap.rotation = Math.round(options.angle);
@@ -232,62 +195,57 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
       } finally {
         _iterator2.f();
       }
-
       _this.onAssemblyPointChange(assemblyPoints);
-
       _this.canvas.renderAll();
     });
-
+    /**
+     * Wheel handler for zooming
+     * @param {object} e - The mouse wheel event object
+     */
     _defineProperty(_assertThisInitialized(_this), "wheelHandler", function (e) {
       var zoom = _this.state.zoom + (e.wheelDelta > 0 ? 1 : -1);
-
       if (zoom >= 0 && zoom < _this.zoomValues.length) {
         var zoomValue = _this.zoomValues[zoom];
-
         _this.canvas.zoomToPoint(_this.canvas.getPointer(e), _this.zoomBase * zoomValue / 100);
-
         _this.setState({
           zoom: zoom,
           zoomValue: zoomValue
         });
       }
     });
-
+    /**
+     * KeyDown handler to move the active object and drag the canvas
+     * @param {object} e - The keydown event object
+     */
     _defineProperty(_assertThisInitialized(_this), "keyDownHandler", function (e) {
       var value = e.ctrlKey ? 10 : 1; // move more when ctrlKey is down
-
       switch (e.keyCode) {
         case 37:
           // left arrow
           _this.modifyPosition('left', -value);
-
           break;
-
         case 38:
           // up arrow
           _this.modifyPosition('top', -value);
-
           break;
-
         case 39:
           // right arrow
           _this.modifyPosition('left', value);
-
           break;
-
         case 40:
           // down arrow
           _this.modifyPosition('top', value);
-
           break;
-
         case 32:
           // space
           _this._forceDragCanvas = true;
           break;
       }
     });
-
+    /**
+     * KeyUp handler to stop forced canvas dragging
+     * @param {object} e - The keyup event object
+     */
     _defineProperty(_assertThisInitialized(_this), "keyUpHandler", function (e) {
       switch (e.keyCode) {
         case 32:
@@ -296,32 +254,33 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
           break;
       }
     });
-
+    /**
+     * Resize handler to adjust canvas width to the maximum available width
+     */
     _defineProperty(_assertThisInitialized(_this), "resizeHandler", function () {
       if (_this.refs.canvasContainer) {
         _this.canvas.setWidth(_this.refs.canvasContainer.clientWidth);
       }
     });
-
+    /**
+     * Update assembly point data when modifying object on canvas
+     * @param {object} target - The fabric object (or group)
+     */
     _defineProperty(_assertThisInitialized(_this), "updateAssemblyPointData", function (_ref) {
       var target = _ref.target;
       var assemblyPoints = _this.state.assemblyPoints;
       var objs = target.identifier ? [target] : target.getObjects();
-
       var _iterator3 = _createForOfIteratorHelper(objs),
-          _step3;
-
+        _step3;
       try {
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var obj = _step3.value;
-
           if (obj.identifier) {
             var ap = _lodash["default"].find(assemblyPoints, {
-              identifier: obj.identifier
-            }),
-                matrix = obj.calcTransformMatrix(),
-                options = fabric.util.qrDecompose(matrix);
-
+                identifier: obj.identifier
+              }),
+              matrix = obj.calcTransformMatrix(),
+              options = fabric.util.qrDecompose(matrix);
             ap.y = Math.round(options.translateY);
             ap.x = Math.round(options.translateX);
             ap.rotation = Math.round(options.angle);
@@ -332,117 +291,111 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
       } finally {
         _iterator3.f();
       }
-
       _this.onAssemblyPointChange(assemblyPoints);
     });
-
+    /**
+     * Update the related object on the canvas by the given AssemblyPoint data
+     * @param {object} assemblyPoint - AssemblyPoint object
+     * @param {boolean} [rerender=true] - rerender canvas after update element
+     */
     _defineProperty(_assertThisInitialized(_this), "updateCanvasObject", function (assemblyPoint) {
       var rerender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var element = _this.canvasObjects[assemblyPoint.identifier];
-
       if (!element) {
         // eslint-disable-next-line no-console
         console.warn('Canvas element is missing for identifier: ' + assemblyPoint.identifier);
         return;
       }
-
       element.setLeft(parseInt(assemblyPoint.x) || 0);
       element.setTop(parseInt(assemblyPoint.y) || 0);
       element.setAngle(parseInt(assemblyPoint.rotation) || 0);
       rerender && _this.canvas.renderAll();
     });
-
+    /**
+     * Update all the canvas objects by the current AssemblyPoint data
+     */
     _defineProperty(_assertThisInitialized(_this), "updateAllCanvasObjects", function () {
       var aps = _this.state.assemblyPoints;
-
       if (_lodash["default"].size(_this.canvasObjects) !== aps.length) {
         // skipping, canvas objects are not added yet..
         // eslint-disable-next-line no-console
         console.log('skipping update, canvas objects are not added yet..');
         return;
       }
-
-      var _loop = function _loop(api) {
+      var _loop = function _loop() {
         var ap = aps[api];
-
         if (!ap.product) {
           // if no product it cannot be displayed
           // eslint-disable-next-line no-console
           console.log('skipping update, no product for assembly point: ' + ap.identifier);
-          return "continue";
+          return 1; // continue
         }
-
         if (ap.product !== _this._selectedElementLastState.assemblyPoints[api].product) {
           AssemblyImage.fromURL(baseUrl + ap.imageDirectory + '/' + ap.product + ap.imageSuffix + '.png', function (assemblyPart) {
             assemblyPart.setAssemblyPoint(ap);
+            _this.canvas.add(assemblyPart).moveTo(assemblyPart, ap.imageSequenceNumber).setActiveObject(assemblyPart);
 
-            _this.canvas.add(assemblyPart).moveTo(assemblyPart, ap.imageSequenceNumber).setActiveObject(assemblyPart); // remove previous object
-
-
-            _this.canvas.remove(_this.canvasObjects[ap.identifier]); // store object reference (key = assembly part identifier)
-
-
+            // remove previous object
+            _this.canvas.remove(_this.canvasObjects[ap.identifier]);
+            // store object reference (key = assembly part identifier)
             _this.canvasObjects[ap.identifier] = assemblyPart;
           });
         } else {
           _this.updateCanvasObject(aps[api], false);
         }
       };
-
       for (var api in aps) {
-        var _ret = _loop(api);
-
-        if (_ret === "continue") continue;
+        if (_loop()) continue;
       }
-
       _this.canvas.renderAll();
     });
-
+    /**
+     * Set activeAssemblyPoints by selection target
+     * @param {object} target - Canvas selection event target
+     */
     _defineProperty(_assertThisInitialized(_this), "updateSelection", function (_ref2) {
       var target = _ref2.target;
       var activeAssemblyPoints = target ? target.identifier ? [target.identifier] : target.getObjects().map(function (obj) {
         return obj.identifier;
       }) : [];
-
       _this.setState({
         activeAssemblyPoints: activeAssemblyPoints
       });
     });
-
+    /**
+     * Load and add AssemblyImage elements to the canvas (in initial phase)
+     */
     _defineProperty(_assertThisInitialized(_this), "addElementsToCanvas", function () {
       var selectedElement = _this.state.selectedElement;
-      _this.canvasObjects = {}; // Load the main (parent) element
+      _this.canvasObjects = {};
 
+      // Load the main (parent) element
       AssemblyImage.fromURL(baseUrl + selectedElement.imageDirectory + '/' + selectedElement.imageName + '.png', function (assemblyPart) {
-        assemblyPart.setAsMain(); // set zoom and zoomValue to fit the main element within the canvas
+        assemblyPart.setAsMain();
 
+        // set zoom and zoomValue to fit the main element within the canvas
         if (assemblyPart.height > _this.canvas.getHeight() || assemblyPart.width > _this.canvas.getWidth()) {
           _this.zoomBase = Math.min(_this.canvas.getHeight() / assemblyPart.height, _this.canvas.getWidth() / assemblyPart.width);
-
           var center = _this.canvas.getCenter();
-
           _this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), _this.zoomBase);
         }
-
         _this.canvas.add(assemblyPart).moveTo(assemblyPart, selectedElement.imageSequenceNumber);
-      }); // Load all the other assembly points belonging to the main element
+      });
 
+      // Load all the other assembly points belonging to the main element
       var _iterator4 = _createForOfIteratorHelper(_this.state.assemblyPoints),
-          _step4;
-
+        _step4;
       try {
         var _loop2 = function _loop2() {
           var ap = _step4.value;
           AssemblyImage.fromURL(baseUrl + ap.imageDirectory + '/' + ap.product + ap.imageSuffix + '.png', function (assemblyPart) {
             assemblyPart.setAssemblyPoint(ap);
+            _this.canvas.add(assemblyPart).moveTo(assemblyPart, ap.imageSequenceNumber);
 
-            _this.canvas.add(assemblyPart).moveTo(assemblyPart, ap.imageSequenceNumber); // store object reference (key = assembly part identifier)
-
-
+            // store object reference (key = assembly part identifier)
             _this.canvasObjects[ap.identifier] = assemblyPart;
           });
         };
-
         for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
           _loop2();
         }
@@ -452,82 +405,77 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
         _iterator4.f();
       }
     });
-
+    /**
+     * Update redux state when AssemblyPoint data changes
+     * @param {object} [assemblyPoint] - The AssemblyPoint object to update on canvas
+     */
     _defineProperty(_assertThisInitialized(_this), "onAssemblyPointChange", function () {
       var setData = _this.props.setData;
       var elements = _this.state.elements;
       setData('visualizationdata', elements);
     });
-
+    /**
+     * Set the active AssemblyPoint from outside of the canvas (eg. with selecting it from the list)
+     * @param {string} identifier - The AssemblyPoint identifier
+     */
     _defineProperty(_assertThisInitialized(_this), "setActiveAssemblyPoint", function (identifier) {
       var obj = _this.canvasObjects[identifier];
-
       _this.canvas.deactivateAll().setActiveObject(obj);
     });
-
     _defineProperty(_assertThisInitialized(_this), "selectElement", function (name, index) {
       var selectedElementIndex = index;
       var selectedElement = _this.state.elements[index];
-
       if (!selectedElement) {
         throw new Error('Element does not exist at index: ' + index);
       }
-
       var assemblyPoints = _lodash["default"].get(selectedElement, 'assemblyPoints', []) || [];
-
       _this.setState({
         selectedElement: selectedElement,
         selectedElementIndex: selectedElementIndex,
         assemblyPoints: assemblyPoints
       }, function () {
         _this.canvas.clear();
-
         _this.addElementsToCanvas();
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "resetZoom", function () {
       var center = _this.canvas.getCenter();
-
       var viewportTransform = _this.canvas.viewportTransform;
       viewportTransform[4] = center.left;
       viewportTransform[5] = center.top;
-
       _this.canvas.setViewportTransform(viewportTransform);
-
       _this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), _this.zoomBase);
-
       _this.setState({
         zoom: 0,
         zoomValue: _this.zoomValues[0]
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "pasteAssemblyPoints", function (assemblyPoints) {
       var _this$props = _this.props,
-          entityState = _this$props.entityState,
-          setData = _this$props.setData;
-      var selectedElementIndex = _this.state.selectedElementIndex; // cloning elements to keep the state clean
-
-      var elements = _lodash["default"].cloneDeep(_lodash["default"].get(entityState, 'data.visualizationdata.value', [])) || []; // make the first element selected by default
-
-      var selectedElement = elements.length > 0 ? elements[selectedElementIndex] : null; // just a reference to the current assemblyPoints
-
+        entityState = _this$props.entityState,
+        setData = _this$props.setData;
+      var selectedElementIndex = _this.state.selectedElementIndex;
+
+      // cloning elements to keep the state clean
+      var elements = _lodash["default"].cloneDeep(_lodash["default"].get(entityState, 'data.visualizationdata.value', [])) || [];
+      // make the first element selected by default
+      var selectedElement = elements.length > 0 ? elements[selectedElementIndex] : null;
+      // just a reference to the current assemblyPoints
       _lodash["default"].set(selectedElement, 'assemblyPoints', assemblyPoints);
-
       setData('visualizationdata', elements);
     });
-
-    _this.canvas = null; // canvas object map (keys are AssemblyPoint identifiers)
-
-    _this.canvasObjects = {}; // drag canvas flag (currently dragging)
-
-    _this._dragCanvas = false; // force drag flag (want to start dragging)
-
-    _this._forceDragCanvas = false; // last position of dragging (helper in movement calculation)
-
-    _this._position = {}; // reference to the last state of the selected visualizationdata element
-
+    _this.canvas = null;
+    // canvas object map (keys are AssemblyPoint identifiers)
+    _this.canvasObjects = {};
+
+    // drag canvas flag (currently dragging)
+    _this._dragCanvas = false;
+    // force drag flag (want to start dragging)
+    _this._forceDragCanvas = false;
+    // last position of dragging (helper in movement calculation)
+    _this._position = {};
+
+    // reference to the last state of the selected visualizationdata element
     _this._selectedElementLastState = null;
     _this.zoomValues = [100, 110, 125, 150, 175, 200, 250, 300, 500];
     _this.zoomBase = 1;
@@ -536,6 +484,7 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
       // the zoom level
       zoomValue: _this.zoomValues[0],
       // the zoom value (given by zoom level)
+
       elements: [],
       // visualizationdata elements
       selectedElement: null,
@@ -550,57 +499,56 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
     };
     return _this;
   }
-
   _createClass(Assemblypointeditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       // register handlers
       this.refs.canvasContainer.addEventListener('wheel', this.wheelHandler);
       document.addEventListener('keydown', this.keyDownHandler);
       document.addEventListener('keyup', this.keyUpHandler);
       window.addEventListener('resize', this.resizeHandler);
-      var canvasElement = this.refs.canvas; // the main canvas element
+      var canvasElement = this.refs.canvas;
 
+      // the main canvas element
       this.canvas = new fabric.Canvas(canvasElement, {
         width: canvasElement.offsetWidth,
         height: canvasElement.offsetHeight,
         selection: false
-      }); // set (0,0) as the center
+      });
 
+      // set (0,0) as the center
       var center = this.canvas.getCenter();
       var viewportTransform = this.canvas.viewportTransform;
       viewportTransform[4] = center.left;
       viewportTransform[5] = center.top;
-      this.canvas.setViewportTransform(viewportTransform); // register mouse:down to detect start of dragging canvas
+      this.canvas.setViewportTransform(viewportTransform);
 
+      // register mouse:down to detect start of dragging canvas
       this.canvas.on('mouse:down', function (e) {
         // ctrlKey forces it (canvas can be moved when object is selected)
         if (!e.target || !e.target.selectable || e.e.ctrlKey || _this2._forceDragCanvas) {
           _this2.lockObjectMovement(true);
-
           _this2._dragCanvas = true;
           _this2._position = {
             x: e.e.clientX,
             y: e.e.clientY
           };
         }
-      }); // register mouse:up to finish dragging
-
+      });
+      // register mouse:up to finish dragging
       this.canvas.on('mouse:up', function () {
         if (_this2._dragCanvas) {
           _this2._dragCanvas = false;
-
           _this2.lockObjectMovement(false);
         }
-      }); // register mouse:move to translate canvas when dragging
-
+      });
+      // register mouse:move to translate canvas when dragging
       this.canvas.on('mouse:move', function (e) {
         if (_this2._dragCanvas) {
           var _this2$_position = _this2._position,
-              x = _this2$_position.x,
-              y = _this2$_position.y;
+            x = _this2$_position.x,
+            y = _this2$_position.y;
           _this2._position = {
             x: e.e.clientX,
             y: e.e.clientY
@@ -608,16 +556,16 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
           var movement = {
             x: _this2._position.x - x,
             y: _this2._position.y - y
-          }; // translating viewport x and y
+          };
 
+          // translating viewport x and y
           var _viewportTransform = _this2.canvas.viewportTransform;
           _viewportTransform[4] += movement.x;
           _viewportTransform[5] += movement.y;
-
           _this2.canvas.setViewportTransform(_viewportTransform);
         }
-      }); // register canvas object and selection events
-
+      });
+      // register canvas object and selection events
       this.canvas.on({
         'object:moving': this.updateAssemblyPointData,
         'object:rotating': this.updateAssemblyPointData,
@@ -628,7 +576,6 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
       this._resizeCheckInterval = setInterval(function () {
         if (_this2.refs.canvasContainer.clientWidth !== _this2._lastCanvasContainerWidth) {
           _this2._lastCanvasContainerWidth = _this2.refs.canvasContainer.clientWidth;
-
           _this2.canvas.setWidth(_this2._lastCanvasContainerWidth);
         }
       }, 500);
@@ -653,27 +600,24 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
     key: "handleProps",
     value: function handleProps(prevProps, props) {
       var _this3 = this;
-
       var entityState = props.entityState;
-      var selectedElementIndex = this.state.selectedElementIndex; // cloning elements to keep the state clean
-
-      var elements = _lodash["default"].cloneDeep(_lodash["default"].get(entityState, 'data.visualizationdata.value', [])) || []; // make the first element selected by default
-
-      var selectedElement = elements.length > 0 ? elements[selectedElementIndex] : null; // just a reference to the current assemblyPoints
+      var selectedElementIndex = this.state.selectedElementIndex;
 
+      // cloning elements to keep the state clean
+      var elements = _lodash["default"].cloneDeep(_lodash["default"].get(entityState, 'data.visualizationdata.value', [])) || [];
+      // make the first element selected by default
+      var selectedElement = elements.length > 0 ? elements[selectedElementIndex] : null;
+      // just a reference to the current assemblyPoints
       var assemblyPoints = _lodash["default"].get(selectedElement, 'assemblyPoints', []) || [];
+      var sampleOptions = _lodash["default"].get(entityState, 'dataSources.sampleOptions', {});
 
-      var sampleOptions = _lodash["default"].get(entityState, 'dataSources.sampleOptions', {}); // init canvas when entity state becomes ready
-
-
-      var initCanvas = !_lodash["default"].get(prevProps, 'entityState.isReady', false) && entityState.isReady; // setting a reference to the last state
-
-      this._selectedElementLastState = _lodash["default"].get(this, "props.entityState.data.visualizationdata.value[".concat(selectedElementIndex, "]")); // update when element data has changed
-
+      // init canvas when entity state becomes ready
+      var initCanvas = !_lodash["default"].get(prevProps, 'entityState.isReady', false) && entityState.isReady;
+      // setting a reference to the last state
+      this._selectedElementLastState = _lodash["default"].get(this, "props.entityState.data.visualizationdata.value[".concat(selectedElementIndex, "]"));
+      // update when element data has changed
       var updateElements = entityState.isReady && !_lodash["default"].isEqual(selectedElement, this._selectedElementLastState);
-
       var optionId = _lodash["default"].get(entityState, 'data.id.value');
-
       this.setState({
         elements: elements,
         selectedElement: selectedElement,
@@ -682,7 +626,6 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
       }, function () {
         if (initCanvas) {
           _this3.canvas.clear();
-
           _this3.props.fetchSampleOptions(assemblyPoints, optionId).then(function () {
             _this3.addElementsToCanvas();
           });
@@ -691,23 +634,18 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
         }
       });
     }
-    /**
-     * Lock or release objects (to make canvas draggable when clicking on active element)
-     * @param {boolean} lock
-     */
-
   }, {
     key: "render",
     value: function render() {
       var _this$state = this.state,
-          elements = _this$state.elements,
-          selectedElement = _this$state.selectedElement,
-          selectedElementIndex = _this$state.selectedElementIndex,
-          assemblyPoints = _this$state.assemblyPoints,
-          activeAssemblyPoints = _this$state.activeAssemblyPoints;
+        elements = _this$state.elements,
+        selectedElement = _this$state.selectedElement,
+        selectedElementIndex = _this$state.selectedElementIndex,
+        assemblyPoints = _this$state.assemblyPoints,
+        activeAssemblyPoints = _this$state.activeAssemblyPoints;
       var _this$props2 = this.props,
-          postData = _this$props2.postData,
-          hideDetails = _this$props2.hideDetails;
+        postData = _this$props2.postData,
+        hideDetails = _this$props2.hideDetails;
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           height: '100%',
@@ -795,19 +733,13 @@ var Assemblypointeditor = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-
   return Assemblypointeditor;
 }(_react.Component);
-
-exports["default"] = Assemblypointeditor;
-
-var generateAssemblypointeditor = function generateAssemblypointeditor() {
+var generateAssemblypointeditor = exports.generateAssemblypointeditor = function generateAssemblypointeditor() {
   var formFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return function (props) {
     return /*#__PURE__*/_react["default"].createElement(Assemblypointeditor, _extends({}, props, {
       formFields: formFields
     }));
   };
-};
-
-exports.generateAssemblypointeditor = generateAssemblypointeditor;
+};