@configuratorware/configurator-frontendgui 1.41.2 → 1.42.2

package/App/Modules/Designer/Components/ImageColorPicker/ImageColorPicker.js

@@ -1,60 +1,36 @@
 "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["default"] = exports.ImageColorPicker = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _pointerEvent = require("../../../../../Utils/Events/pointerEvent");
-
 var _ResizeDetect = require("../../../../../Shared/HOCs/ResizeDetect/ResizeDetect");
-
 var _Selectors = require("../../../../Reducers/DesignArea/Selectors");
-
 var _Progress = _interopRequireDefault(require("../../../../Shared/Components/Progress/Progress"));
-
 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 _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); }
 function getColorAt(ctx, x, y) {
   var p = ctx.getImageData(x, y, 1, 1).data;
   return {
@@ -67,29 +43,27 @@ function getColorAt(ctx, x, y) {
     hex: (0, _Selectors.rgbToHex)(p[0], p[1], p[2])
   };
 }
+
 /**
  * Saves the imageData of the source context, and returns a function which can clear the
  * given area and restore the original data.
  * @param sourceCtx
  * @returns {function(*, *=, *=, *=, *=)}
  */
-
-
 var createAreaClearer = function createAreaClearer(sourceCtx) {
   var imageData;
-
   if (sourceCtx) {
     var _sourceCtx$canvas = sourceCtx.canvas,
-        width = _sourceCtx$canvas.width,
-        height = _sourceCtx$canvas.height;
+      width = _sourceCtx$canvas.width,
+      height = _sourceCtx$canvas.height;
     imageData = sourceCtx.getImageData(0, 0, width, height);
   }
-
   return function (ctx, x, y, w, h) {
     ctx.clearRect(x, y, w, h);
     imageData && ctx.putImageData(imageData, 0, 0, x, y, w + 1, h + 1);
   };
 };
+
 /**
  * By default the indicator is shown on the left side, but if the user moves the pointer close to it,
  * it jumps to the right side.
@@ -98,24 +72,21 @@ var createAreaClearer = function createAreaClearer(sourceCtx) {
  * @param y
  * @returns {{size: number, offsetX: number, offsetY: number}}
  */
-
-
 var getIndicatorPosition = function getIndicatorPosition(ctx, x, y) {
   var offsetX = 10;
   var offsetY = 10;
   var size = 50;
   var tolerance = 50;
-
   if (x < offsetX + size + tolerance && y < offsetY + size + tolerance) {
     offsetX = ctx.canvas.width - offsetX - size;
   }
-
   return {
     size: size,
     offsetX: offsetX,
     offsetY: offsetY
   };
 };
+
 /**
  * Draws the indicator on the given context depending on the mouse position (x, y).
  * It returns the dirty area as an array to clear: [x, y, size].
@@ -124,14 +95,11 @@ var getIndicatorPosition = function getIndicatorPosition(ctx, x, y) {
  * @param y
  * @returns {[number,number,number]}
  */
-
-
 var drawIndicator = function drawIndicator(ctx, x, y) {
   var _getIndicatorPosition = getIndicatorPosition(ctx, x, y),
-      offsetX = _getIndicatorPosition.offsetX,
-      offsetY = _getIndicatorPosition.offsetY,
-      size = _getIndicatorPosition.size;
-
+    offsetX = _getIndicatorPosition.offsetX,
+    offsetY = _getIndicatorPosition.offsetY,
+    size = _getIndicatorPosition.size;
   var lineWidth = 2;
   var shadowBlur = 1;
   ctx.fillStyle = "rgba(".concat(Object.values(getColorAt(ctx, x, y).rgba), ")");
@@ -144,6 +112,7 @@ var drawIndicator = function drawIndicator(ctx, x, y) {
   var padding = lineWidth + shadowBlur;
   return [offsetX - padding, offsetY - padding, size + 2 * padding];
 };
+
 /**
  * Draws the marker circle on the given context (from the center x and y).
  * It returns the dirty area as an array to clear: [x, y, size].
@@ -152,8 +121,6 @@ var drawIndicator = function drawIndicator(ctx, x, y) {
  * @param y
  * @returns {[number,number,number]}
  */
-
-
 var drawMarker = function drawMarker(ctx, x, y) {
   var lineWidth = 2;
   var shadowBlur = 1;
@@ -169,100 +136,75 @@ var drawMarker = function drawMarker(ctx, x, y) {
   var padding = Math.ceil(lineWidth + shadowBlur + size);
   return [x - padding, y - padding, (padding + shadowBlur) * 2];
 };
-
-var ImageColorPicker = /*#__PURE__*/function (_React$Component) {
+var ImageColorPicker = exports.ImageColorPicker = /*#__PURE__*/function (_React$Component) {
   _inherits(ImageColorPicker, _React$Component);
-
   var _super = _createSuper(ImageColorPicker);
-
   function ImageColorPicker() {
     var _this;
-
     _classCallCheck(this, ImageColorPicker);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
       loadingImage: false
     });
-
     _defineProperty(_assertThisInitialized(_this), "canvasRef", /*#__PURE__*/_react["default"].createRef());
-
     _defineProperty(_assertThisInitialized(_this), "reportError", function (e) {
       // eslint-disable-next-line no-console
       console.error(e);
       var onError = _this.props.onError;
       onError && onError(e);
     });
-
     _defineProperty(_assertThisInitialized(_this), "redrawMarker", function (evt) {
       return setTimeout(function () {
         var _this$getRelativePosi = _this.getRelativePosition(evt),
-            x = _this$getRelativePosi.x,
-            y = _this$getRelativePosi.y;
-
+          x = _this$getRelativePosi.x,
+          y = _this$getRelativePosi.y;
         if (_this.indicatorPosition) {
           var _this$indicatorPositi = _slicedToArray(_this.indicatorPosition, 3),
-              _x = _this$indicatorPositi[0],
-              _y = _this$indicatorPositi[1],
-              size = _this$indicatorPositi[2];
-
+            _x = _this$indicatorPositi[0],
+            _y = _this$indicatorPositi[1],
+            size = _this$indicatorPositi[2];
           _this.clearArea(_this.ctx, _x, _y, size, size);
         }
-
         if (_this.markerPosition) {
           var _this$markerPosition = _slicedToArray(_this.markerPosition, 3),
-              _x2 = _this$markerPosition[0],
-              _y2 = _this$markerPosition[1],
-              _size = _this$markerPosition[2];
-
+            _x2 = _this$markerPosition[0],
+            _y2 = _this$markerPosition[1],
+            _size = _this$markerPosition[2];
           _this.clearArea(_this.ctx, _x2, _y2, _size, _size);
         }
-
         _this.markerPosition = drawMarker(_this.ctx, x, y);
         _this.indicatorPosition = drawIndicator(_this.ctx, x, y);
       });
     });
-
     return _this;
   }
-
   _createClass(ImageColorPicker, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       var src = this.props.src;
-
       if (src) {
         this.loadImage(src);
       }
-
       var canvas = this.canvasRef.current;
       this.ctx = canvas.getContext('2d');
       this.removeStartListener = (0, _pointerEvent.createPointerEventListener)(canvas, 'start', function (evt) {
         if (!_this2.props.enabled || !_this2.img) {
           return;
         }
-
         evt.preventDefault();
-
         _this2.redrawMarker(evt);
-
         var removeMoveListener = (0, _pointerEvent.createPointerEventListener)(canvas, 'move', _this2.redrawMarker);
         var removeEndListener = (0, _pointerEvent.createPointerEventListener)(canvas, 'end', function (evt) {
           removeMoveListener();
           removeEndListener();
           var onChange = _this2.props.onChange;
-
           var _this2$getRelativePos = _this2.getRelativePosition(evt),
-              x = _this2$getRelativePos.x,
-              y = _this2$getRelativePos.y;
-
+            x = _this2$getRelativePos.x,
+            y = _this2$getRelativePos.y;
           onChange && onChange(getColorAt(_this2.ctx, x, y));
         });
       });
@@ -276,13 +218,11 @@ var ImageColorPicker = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props = this.props,
-          src = _this$props.src,
-          size = _this$props.size;
-
+        src = _this$props.src,
+        size = _this$props.size;
       if (prevProps.src !== src) {
         src && this.loadImage(src);
       }
-
       if (prevProps.size !== size) {
         this.updateCanvas();
       }
@@ -291,37 +231,29 @@ var ImageColorPicker = /*#__PURE__*/function (_React$Component) {
     key: "loadImage",
     value: function loadImage(src) {
       var _this3 = this;
-
       this.currentSrc = src;
       this.setState({
         loadingImage: true
       });
       var img = document.createElement('img');
       img.crossOrigin = 'anonymous';
-
       img.onload = function () {
         // skip if the src is outdated
         if (_this3.currentSrc !== src) {
           return;
         }
-
         _this3.img = img;
-
         _this3.setState({
           loadingImage: false
         });
-
         _this3.updateCanvas();
       };
-
       img.onerror = function (e) {
         _this3.setState({
           loadingImage: false
         });
-
         _this3.reportError(e);
       };
-
       img.src = src;
     }
   }, {
@@ -329,32 +261,24 @@ var ImageColorPicker = /*#__PURE__*/function (_React$Component) {
     value: function updateCanvas() {
       var img = this.img;
       var canvas = this.canvasRef.current;
-
       if (!canvas || !img) {
         return;
       }
-
       var container = canvas.parentElement;
-
       var _container$getBoundin = container.getBoundingClientRect(),
-          pw = _container$getBoundin.width,
-          ph = _container$getBoundin.height;
-
+        pw = _container$getBoundin.width,
+        ph = _container$getBoundin.height;
       var ow = img.width,
-          oh = img.height;
-
+        oh = img.height;
       if (ow / oh <= pw / ph) {
         var height = ph;
         var width = height * (ow / oh);
         this.updateCanvasDimensionsAndContent(canvas, img, width, height);
       } else {
         var _width = pw;
-
         var _height = _width * (oh / ow);
-
         this.updateCanvasDimensionsAndContent(canvas, img, _width, _height);
       }
-
       try {
         this.clearArea = createAreaClearer(this.ctx);
       } catch (e) {
@@ -375,15 +299,12 @@ var ImageColorPicker = /*#__PURE__*/function (_React$Component) {
     key: "getRelativePosition",
     value: function getRelativePosition(evt) {
       var canvas = this.canvasRef.current;
-
       var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-          offsetX = _canvas$getBoundingCl.left,
-          offsetY = _canvas$getBoundingCl.top;
-
+        offsetX = _canvas$getBoundingCl.left,
+        offsetY = _canvas$getBoundingCl.top;
       var _getPointFromPointerE = (0, _pointerEvent.getPointFromPointerEvent)(evt),
-          eX = _getPointFromPointerE.x,
-          eY = _getPointFromPointerE.y;
-
+        eX = _getPointFromPointerE.x,
+        eY = _getPointFromPointerE.y;
       var x = eX - offsetX;
       var y = eY - offsetY;
       return {
@@ -404,25 +325,9 @@ var ImageColorPicker = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-
   return ImageColorPicker;
 }(_react["default"].Component);
-
-exports.ImageColorPicker = ImageColorPicker;
-
-_defineProperty(ImageColorPicker, "propTypes", {
-  className: _propTypes["default"].string,
-  enabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  onError: _propTypes["default"].func,
-  src: _propTypes["default"].string,
-  size: _propTypes["default"].object
-});
-
 _defineProperty(ImageColorPicker, "defaultProps", {
   enabled: true
 });
-
-var _default = (0, _ResizeDetect.withResizeDetectWrapper)(ImageColorPicker);
-
-exports["default"] = _default;
+var _default = exports["default"] = (0, _ResizeDetect.withResizeDetectWrapper)(ImageColorPicker);