@pie-element/hotspot 6.15.2-next.1 → 6.15.2-next.2

package/configure/lib/hotspot-circle.js

@@ -0,0 +1,246 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactKonva = require("react-konva");
+
+var _styles = require("@material-ui/core/styles");
+
+var _DeleteWidget = _interopRequireDefault(require("./DeleteWidget"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+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; } }
+
+var CircleComponent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(CircleComponent, _React$Component);
+
+  var _super = _createSuper(CircleComponent);
+
+  function CircleComponent(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, CircleComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
+      var _this$props = _this.props,
+          radius = _this$props.radius,
+          isDrawing = _this$props.isDrawing,
+          onClick = _this$props.onClick,
+          id = _this$props.id;
+
+      if (radius <= 0 && isDrawing) {
+        return;
+      }
+
+      e.cancelBubble = true;
+      onClick(id);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      document.body.style.cursor = 'pointer';
+
+      _this.setState({
+        hovered: true
+      });
+
+      _this.trRef.current.setNode(_this.shapeRef.current);
+
+      _this.trRef.current.getLayer().batchDraw();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        hovered: false
+      });
+
+      document.body.style.cursor = 'default';
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragEnd", function (e) {
+      var _this$props2 = _this.props,
+          onDragEnd = _this$props2.onDragEnd,
+          id = _this$props2.id;
+
+      _this.setState({
+        isDragging: false
+      });
+
+      onDragEnd(id, {
+        x: e.target.x(),
+        y: e.target.y()
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResizeEnd", function () {
+      var _this$props3 = _this.props,
+          onDragEnd = _this$props3.onDragEnd,
+          id = _this$props3.id;
+      var node = _this.shapeRef.current;
+      var scale = node.scaleX() !== 1 ? node.scaleX() : node.scaleY();
+      var newRadius = Math.max(node.radius() * scale, 5);
+
+      _this.setState({
+        isDragging: false
+      });
+
+      onDragEnd(id, {
+        x: node.x(),
+        y: node.y(),
+        radius: newRadius
+      });
+      node.scaleX(1);
+      node.scaleY(1);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDelete", function (id) {
+      var onDeleteShape = _this.props.onDeleteShape;
+      onDeleteShape(id);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTransform", function () {
+      var node = _this.shapeRef.current;
+      var avgScale = (node.scaleX() + node.scaleY()) / 2;
+      node.scaleX(avgScale);
+      node.scaleY(avgScale);
+    });
+    _this.state = {
+      hovered: false,
+      isDragging: false
+    };
+    _this.shapeRef = /*#__PURE__*/_react["default"].createRef();
+    _this.trRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(CircleComponent, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          correct = _this$props4.correct,
+          radius = _this$props4.radius,
+          hotspotColor = _this$props4.hotspotColor,
+          id = _this$props4.id,
+          outlineColor = _this$props4.outlineColor,
+          x = _this$props4.x,
+          y = _this$props4.y,
+          _this$props4$strokeWi = _this$props4.strokeWidth,
+          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        classes: classes.group,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseEnter: this.handleMouseEnter
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
+        classes: classes.base,
+        ref: this.shapeRef,
+        radius: radius,
+        fill: hotspotColor,
+        onClick: this.handleClick,
+        onTap: this.handleClick,
+        draggable: true,
+        stroke: outlineColor,
+        strokeWidth: correct ? strokeWidth : 0,
+        onDragStart: function onDragStart() {
+          return _this2.setState({
+            isDragging: true
+          });
+        },
+        onDragEnd: this.handleOnDragEnd,
+        onTransformStart: function onTransformStart() {
+          return _this2.setState({
+            isDragging: true
+          });
+        },
+        onTransformEnd: this.onResizeEnd,
+        x: x,
+        y: y
+      }), !this.state.isDragging && this.state.hovered && /*#__PURE__*/_react["default"].createElement(_DeleteWidget["default"], {
+        id: id,
+        radius: radius,
+        x: x,
+        y: y,
+        handleWidgetClick: this.handleDelete,
+        isCircle: true
+      }), this.state.hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Transformer, {
+        ref: this.trRef,
+        rotateEnabled: false,
+        keepRatio: true,
+        onTransform: this.onTransform,
+        enabledAnchors: ['middle-left', 'middle-right', 'top-center', 'bottom-center'],
+        boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
+          // Constraint to prevent resizing too small
+          if (newBox.width < 10 || newBox.height < 10) {
+            return oldBox;
+          }
+
+          var oldCenterX = oldBox.x + oldBox.width / 2;
+          var oldCenterY = oldBox.y + oldBox.height / 2;
+          var newCenterX = newBox.x + newBox.width / 2;
+          var newCenterY = newBox.y + newBox.height / 2;
+          var offsetX = oldCenterX - newCenterX;
+          var offsetY = oldCenterY - newCenterY;
+          newBox.x += offsetX;
+          newBox.y += offsetY;
+          return newBox;
+        }
+      }));
+    }
+  }]);
+  return CircleComponent;
+}(_react["default"].Component);
+
+var styles = function styles() {
+  return {
+    base: {
+      cursor: 'pointer',
+      opacity: 0.5
+    },
+    group: {
+      padding: '12px'
+    }
+  };
+};
+
+CircleComponent.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  correct: _propTypes["default"].bool,
+  isDrawing: _propTypes["default"].bool.isRequired,
+  id: _propTypes["default"].string.isRequired,
+  radius: _propTypes["default"].number.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  onDeleteShape: _propTypes["default"].func.isRequired,
+  onDragEnd: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired,
+  strokeWidth: _propTypes["default"].number
+};
+CircleComponent.defaultProps = {
+  correct: false
+};
+
+var _default = (0, _styles.withStyles)(styles)(CircleComponent);
+
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-circle.js.map

package/configure/lib/hotspot-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hotspot-circle.jsx"],"names":["CircleComponent","props","e","radius","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scale","scaleX","scaleY","newRadius","Math","max","onDeleteShape","avgScale","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","onTransform","oldBox","newBox","width","height","oldCenterX","oldCenterY","newCenterX","newCenterY","offsetX","offsetY","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport DeleteWidget from './DeleteWidget';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { radius, isDrawing, onClick, id } = this.props;\n    if (radius <= 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n    this.setState({ hovered: true });\n    this.trRef.current.setNode(this.shapeRef.current);\n    this.trRef.current.getLayer().batchDraw();\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  onResizeEnd = () => {\n    const { onDragEnd, id } = this.props;\n    const node = this.shapeRef.current;\n\n    const scale = node.scaleX() !== 1 ? node.scaleX() : node.scaleY();\n    const newRadius = Math.max(node.radius() * scale, 5);\n\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      radius: newRadius,\n    });\n\n    node.scaleX(1);\n    node.scaleY(1);\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  onTransform = () => {\n    const node = this.shapeRef.current;\n    const avgScale = (node.scaleX() + node.scaleY()) / 2;\n    node.scaleX(avgScale);\n    node.scaleY(avgScale);\n  };\n\n  render() {\n    const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          classes={classes.base}\n          ref={this.shapeRef}\n          radius={radius}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} radius={radius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            onTransform={this.onTransform}\n            enabledAnchors={['middle-left', 'middle-right', 'top-center', 'bottom-center']}\n            boundBoxFunc={(oldBox, newBox) => {\n              // Constraint to prevent resizing too small\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n\n              const oldCenterX = oldBox.x + oldBox.width / 2;\n              const oldCenterY = oldBox.y + oldBox.height / 2;\n              const newCenterX = newBox.x + newBox.width / 2;\n              const newCenterY = newBox.y + newBox.height / 2;\n\n              const offsetX = oldCenterX - newCenterX;\n              const offsetY = oldCenterY - newCenterY;\n\n              newBox.x += offsetX;\n              newBox.y += offsetY;\n\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nCircleComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"hotspot-circle.js"}