@gamelearn/arcade-components 0.7.1 → 0.9.0

package/dist/components/image-click-wrapper-component/components/KonvaMapper/index.js

@@ -1,230 +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 = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactKonva = require("react-konva");
-
-var _Area = _interopRequireDefault(require("../Area"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 && (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; }
-
-var useWindowSize = function useWindowSize() {
-  var _useState = (0, _react.useState)([0, 0]),
-      _useState2 = _slicedToArray(_useState, 2),
-      size = _useState2[0],
-      setSize = _useState2[1];
-
-  (0, _react.useLayoutEffect)(function () {
-    function updateSize() {
-      setSize([window.innerWidth, window.innerHeight]);
-    }
-
-    window.addEventListener('resize', updateSize);
-    updateSize();
-    return function () {
-      return window.removeEventListener('resize', updateSize);
-    };
-  }, []);
-  return size;
-};
-
-var KonvaMapper = function KonvaMapper(_ref) {
-  var areas = _ref.areas,
-      badAreas = _ref.badAreas,
-      imageUrl = _ref.imageUrl,
-      completed = _ref.completed,
-      onClick = _ref.onClick,
-      onClickOutside = _ref.onClickOutside,
-      hasHighlights = _ref.hasHighlights,
-      clickedZones = _ref.clickedZones;
-  var stageRef = (0, _react.useRef)();
-  var areasStroke = (0, _react.useRef)();
-  var badAreasStroke = (0, _react.useRef)();
-  var goodAreasGroup = (0, _react.useRef)();
-  var badAreasGroup = (0, _react.useRef)();
-  var imageRef = (0, _react.useRef)();
-  var overlay = (0, _react.useRef)();
-
-  var _useState3 = (0, _react.useState)(new window.Image()),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentImage = _useState4[0],
-      setImage = _useState4[1];
-
-  var _useWindowSize = useWindowSize(),
-      _useWindowSize2 = _slicedToArray(_useWindowSize, 2),
-      width = _useWindowSize2[0],
-      height = _useWindowSize2[1];
-
-  var incorrectArea = badAreas.find(function (area) {
-    return area.id === 'AllArea';
-  }) || false;
-  var badAreasList = badAreas.filter(function (area) {
-    return area.id !== 'AllArea';
-  });
-  (0, _react.useEffect)(function () {
-    if (overlay.current && areasStroke.current && completed) {
-      overlay.current.to({
-        duration: 0.25,
-        opacity: 0.5
-      });
-      areasStroke.current.setAttr('visible', true); // badAreasStroke.current.setAttr('visible', true);
-    }
-  }, [completed]);
-
-  var handleStageClick = function handleStageClick(a) {
-    if (incorrectArea && !a.target.attrs.shape) {
-      onClickOutside();
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    currentImage.src = imageUrl;
-    currentImage.addEventListener('load', function () {
-      if (stageRef.current) {
-        var commonConfig = {
-          x: width / 2,
-          y: height / 2,
-          width: currentImage.width,
-          height: currentImage.height,
-          offsetX: currentImage.width / 2,
-          offsetY: currentImage.height / 2,
-          scale: {
-            x: Math.min(width / currentImage.width, height / currentImage.height),
-            y: Math.min(width / currentImage.width, height / currentImage.height)
-          }
-        };
-        if (goodAreasGroup.current) goodAreasGroup.current.setAttrs(commonConfig);
-        if (badAreasGroup.current) badAreasGroup.current.setAttrs(commonConfig);
-        if (areasStroke.current) areasStroke.current.setAttrs(commonConfig);
-        if (badAreasStroke.current) badAreasStroke.current.setAttrs(commonConfig);
-        if (imageRef.current) imageRef.current.setAttrs(commonConfig);
-        stageRef.current.batchDraw();
-        setImage(currentImage);
-      }
-    });
-  }, [currentImage, height, imageUrl, width]);
-  return /*#__PURE__*/_react.default.createElement(_reactKonva.Stage, {
-    ref: stageRef,
-    width: width,
-    height: height,
-    onClick: handleStageClick
-  }, /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, null, /*#__PURE__*/_react.default.createElement(_reactKonva.Image, {
-    ref: imageRef,
-    image: currentImage
-  })), /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, null, /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
-    ref: overlay,
-    width: width,
-    height: height,
-    fill: "black",
-    opacity: 0
-  }), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
-    ref: badAreasGroup
-  }, badAreasList.map(function (area, index) {
-    return /*#__PURE__*/_react.default.createElement(_Area.default, {
-      hasHighlights: hasHighlights,
-      completed: completed,
-      onClick: onClick,
-      onClickOutside: onClickOutside,
-      key: area.name + index,
-      area: area,
-      isBad: true
-    });
-  })), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
-    ref: goodAreasGroup
-  }, areas.map(function (area, index) {
-    return /*#__PURE__*/_react.default.createElement(_Area.default, {
-      hasHighlights: hasHighlights,
-      completed: completed,
-      onClick: onClick,
-      onClickOutside: onClickOutside,
-      key: area.name + index,
-      area: area,
-      isClicked: clickedZones.some(function (c) {
-        return c.index === area.index;
-      })
-    });
-  })), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
-    ref: badAreasStroke,
-    visible: false
-  }, badAreasList.map(function (area, ind) {
-    return /*#__PURE__*/_react.default.createElement(_Area.default, {
-      hasHighlights: hasHighlights,
-      completed: completed,
-      onClick: onClick,
-      onClickOutside: onClickOutside,
-      key: area.name + '_' + ind,
-      area: area,
-      isBad: true,
-      finished: true
-    });
-  })), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
-    ref: areasStroke,
-    visible: false
-  }, areas.map(function (area, ind) {
-    return /*#__PURE__*/_react.default.createElement(_Area.default, {
-      hasHighlights: hasHighlights,
-      completed: completed,
-      onClick: onClick,
-      onClickOutside: onClickOutside,
-      key: area.name + '_' + ind,
-      area: area,
-      finished: true
-    });
-  }))));
-};
-
-KonvaMapper.defaultProps = {
-  hasHighlights: false,
-  onClick: function onClick() {},
-  completed: false,
-  onClickOutside: function onClickOutside() {}
-};
-KonvaMapper.propTypes = {
-  areas: _propTypes.default.arrayOf(_propTypes.default.shape({
-    index: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number,
-    points: _propTypes.default.arrayOf(_propTypes.default.number),
-    name: _propTypes.default.string
-  })).isRequired,
-  badAreas: _propTypes.default.arrayOf(_propTypes.default.shape({
-    index: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number,
-    points: _propTypes.default.arrayOf(_propTypes.default.number),
-    name: _propTypes.default.string
-  })).isRequired,
-  imageUrl: _propTypes.default.string.isRequired,
-  hasHighlights: _propTypes.default.bool,
-  completed: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  onClickOutside: _propTypes.default.func,
-  clickedZones: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired
-};
-var _default = KonvaMapper;
-exports.default = _default;