@gamelearn/arcade-components 1.3.6 → 1.3.7

package/dist/components/drag-item-puzzle-component/components/DragItemPuzzleComponent.js

@@ -13,6 +13,8 @@ var _interactjs = _interopRequireDefault(require("interactjs"));
 
 var _reactKonva = require("react-konva");
 
+var _reactKonvaUtils = require("react-konva-utils");
+
 var _Messages = require("./Messages");
 
 var _feedbackComponent = _interopRequireDefault(require("../../feedback-component"));
@@ -84,9 +86,14 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
       imageLoaded = _useState6[0],
       setImageLoaded = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(new window.Image()),
-      _useState8 = _slicedToArray(_useState7, 1),
-      currentImage = _useState8[0];
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      projectionConfig = _useState8[0],
+      setProjectionConfig = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(new window.Image()),
+      _useState10 = _slicedToArray(_useState9, 1),
+      currentImage = _useState10[0];
 
   var accRewards = (0, _react.useRef)([]);
 
@@ -325,6 +332,17 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     }
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    if (areaRef.current && imageLoaded) {
+      var rect = areaRef.current.getClientRect({
+        relativeTo: areaRef.current.getParent()
+      });
+      setProjectionConfig({
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2
+      });
+    }
+  }, [imageLoaded]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--drag__mask100"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -339,7 +357,24 @@ var DragItemPuzzleComponent = function DragItemPuzzleComponent(_ref) {
     height: canvas.current.clientHeight
   }, /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, null, /*#__PURE__*/_react.default.createElement(_reactKonva.Image, _extends({
     image: currentImage
-  }, layerConfig.current)), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, layerConfig.current, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, _extends({
+  }, layerConfig.current)), /*#__PURE__*/_react.default.createElement(_reactKonva.Group, layerConfig.current, projectionConfig ? /*#__PURE__*/_react.default.createElement(_reactKonvaUtils.Html, {
+    transform: true,
+    groupProps: _objectSpread({
+      id: 'projection'
+    }, projectionConfig),
+    divProps: {
+      style: {
+        pointerEvents: 'none'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '50px',
+      height: '50px',
+      pointerEvents: 'none'
+    },
+    id: "object-area-projection"
+  })) : null, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, _extends({
     onMouseEnter: mouseEnterArea,
     onMouseLeave: mouseLeaveArea,
     ref: handleAreaRef

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "main": "dist/index.js",
   "files": [
     "dist",