@configuratorware/configurator-frontendgui 1.28.1 → 1.29.0

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

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