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

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

@@ -1,430 +0,0 @@
-"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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _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 _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 _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 getColorAt(ctx, x, y) {
-  var p = ctx.getImageData(x, y, 1, 1).data;
-  return {
-    rgba: {
-      r: p[0],
-      g: p[1],
-      b: p[2],
-      a: p[3]
-    },
-    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;
-    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.
- * @param ctx
- * @param x
- * @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].
- * @param ctx
- * @param x
- * @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;
-
-  var lineWidth = 2;
-  var shadowBlur = 1;
-  ctx.fillStyle = "rgba(".concat(Object.values(getColorAt(ctx, x, y).rgba), ")");
-  ctx.fillRect(offsetX, offsetY, size, size);
-  ctx.lineWidth = lineWidth;
-  ctx.strokeStyle = 'white';
-  ctx.shadowColor = 'black';
-  ctx.shadowBlur = shadowBlur;
-  ctx.strokeRect(offsetX, offsetY, size, size);
-  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].
- * @param ctx
- * @param x
- * @param y
- * @returns {[number,number,number]}
- */
-
-
-var drawMarker = function drawMarker(ctx, x, y) {
-  var lineWidth = 2;
-  var shadowBlur = 1;
-  var size = 5;
-  var posOffset = shadowBlur / 2;
-  ctx.strokeStyle = 'white';
-  ctx.lineWidth = lineWidth;
-  ctx.shadowBlur = shadowBlur;
-  ctx.shadowColor = 'black';
-  ctx.beginPath();
-  ctx.arc(x + posOffset, y + posOffset, size, 0, 2 * Math.PI);
-  ctx.stroke();
-  var padding = Math.ceil(lineWidth + shadowBlur + size);
-  return [x - padding, y - padding, (padding + shadowBlur) * 2];
-};
-
-var 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;
-
-        if (_this.indicatorPosition) {
-          var _this$indicatorPositi = _slicedToArray(_this.indicatorPosition, 3),
-              _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];
-
-          _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;
-
-          onChange && onChange(getColorAt(_this2.ctx, x, y));
-        });
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeStartListener();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-          src = _this$props.src,
-          size = _this$props.size;
-
-      if (prevProps.src !== src) {
-        src && this.loadImage(src);
-      }
-
-      if (prevProps.size !== size) {
-        this.updateCanvas();
-      }
-    }
-  }, {
-    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;
-    }
-  }, {
-    key: "updateCanvas",
-    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;
-
-      var ow = img.width,
-          oh = img.height;
-      var pa = pw / ph;
-      var oa = ow / oh;
-
-      if (pa >= oa) {
-        var height = Math.min(ph, oh);
-        var width = height * ow / oh;
-        this.updateCanvasDimensionsAndContent(canvas, img, width, height);
-      } else {
-        var _width = Math.min(pw, ow);
-
-        var _height = _width * oh / ow;
-
-        this.updateCanvasDimensionsAndContent(canvas, img, _width, _height);
-      }
-
-      try {
-        this.clearArea = createAreaClearer(this.ctx);
-      } catch (e) {
-        this.reportError(e);
-      }
-    }
-  }, {
-    key: "updateCanvasDimensionsAndContent",
-    value: function updateCanvasDimensionsAndContent(canvas, img, width, height) {
-      Object.assign(canvas, {
-        width: width,
-        height: height
-      });
-      this.ctx.clearRect(0, 0, width, height);
-      this.ctx.drawImage(img, 0, 0, width, height);
-    }
-  }, {
-    key: "getRelativePosition",
-    value: function getRelativePosition(evt) {
-      var canvas = this.canvasRef.current;
-
-      var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-          offsetX = _canvas$getBoundingCl.left,
-          offsetY = _canvas$getBoundingCl.top;
-
-      var _getPointFromPointerE = (0, _pointerEvent.getPointFromPointerEvent)(evt),
-          eX = _getPointFromPointerE.x,
-          eY = _getPointFromPointerE.y;
-
-      var x = eX - offsetX;
-      var y = eY - offsetY;
-      return {
-        x: x,
-        y: y
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var className = this.props.className;
-      var loadingImage = this.state.loadingImage;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Progress["default"], {
-        loading: loadingImage
-      }), /*#__PURE__*/_react["default"].createElement("canvas", {
-        ref: this.canvasRef,
-        className: className
-      }));
-    }
-  }]);
-
-  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;