@visx/annotation/lib/components/EditableAnnotation.js

visx annotation

"use strict";

exports.__esModule = true;
exports.default = EditableAnnotation;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _useDrag = _interopRequireDefault(require("@visx/drag/lib/useDrag"));
var _Annotation = _interopRequireDefault(require("./Annotation"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var defaultDragHandleProps = {
  r: 10,
  fill: 'transparent',
  stroke: '#777',
  strokeDasharray: '4,2',
  strokeWidth: 2
};
function EditableAnnotation(_ref) {
  var _ref$canEditLabel = _ref.canEditLabel,
    canEditLabel = _ref$canEditLabel === void 0 ? true : _ref$canEditLabel,
    _ref$canEditSubject = _ref.canEditSubject,
    canEditSubject = _ref$canEditSubject === void 0 ? true : _ref$canEditSubject,
    children = _ref.children,
    _ref$dx = _ref.dx,
    labelDx = _ref$dx === void 0 ? 0 : _ref$dx,
    _ref$dy = _ref.dy,
    labelDy = _ref$dy === void 0 ? 0 : _ref$dy,
    height = _ref.height,
    labelDragHandleProps = _ref.labelDragHandleProps,
    onDragEnd = _ref.onDragEnd,
    onDragMove = _ref.onDragMove,
    onDragStart = _ref.onDragStart,
    subjectDragHandleProps = _ref.subjectDragHandleProps,
    width = _ref.width,
    _ref$x = _ref.x,
    subjectX = _ref$x === void 0 ? 0 : _ref$x,
    _ref$y = _ref.y,
    subjectY = _ref$y === void 0 ? 0 : _ref$y;
  // chicken before the egg, we need these to reference drag state
  // in drag callbacks which are defined before useDrag() state is available
  var subjectDragRef = (0, _react.useRef)();
  var labelDragRef = (0, _react.useRef)();
  var handleDragStart = (0, _react.useCallback)(function (_ref2) {
    var event = _ref2.event;
    if (onDragStart) {
      var _subjectDragRef$curre, _subjectDragRef$curre2, _subjectDragRef$curre3, _subjectDragRef$curre4, _labelDragRef$current, _labelDragRef$current2, _labelDragRef$current3, _labelDragRef$current4;
      onDragStart({
        event: event,
        x: subjectX + ((_subjectDragRef$curre = (_subjectDragRef$curre2 = subjectDragRef.current) == null ? void 0 : _subjectDragRef$curre2.dx) != null ? _subjectDragRef$curre : 0),
        y: subjectY + ((_subjectDragRef$curre3 = (_subjectDragRef$curre4 = subjectDragRef.current) == null ? void 0 : _subjectDragRef$curre4.dy) != null ? _subjectDragRef$curre3 : 0),
        dx: labelDx + ((_labelDragRef$current = (_labelDragRef$current2 = labelDragRef.current) == null ? void 0 : _labelDragRef$current2.dx) != null ? _labelDragRef$current : 0),
        dy: labelDy + ((_labelDragRef$current3 = (_labelDragRef$current4 = labelDragRef.current) == null ? void 0 : _labelDragRef$current4.dy) != null ? _labelDragRef$current3 : 0)
      });
    }
  }, [labelDx, labelDy, onDragStart, subjectX, subjectY]);
  var handleDragMove = (0, _react.useCallback)(function (_ref3) {
    var event = _ref3.event;
    if (onDragMove) {
      var _subjectDragRef$curre5, _subjectDragRef$curre6, _subjectDragRef$curre7, _subjectDragRef$curre8, _labelDragRef$current5, _labelDragRef$current6, _labelDragRef$current7, _labelDragRef$current8;
      onDragMove({
        event: event,
        x: subjectX + ((_subjectDragRef$curre5 = (_subjectDragRef$curre6 = subjectDragRef.current) == null ? void 0 : _subjectDragRef$curre6.dx) != null ? _subjectDragRef$curre5 : 0),
        y: subjectY + ((_subjectDragRef$curre7 = (_subjectDragRef$curre8 = subjectDragRef.current) == null ? void 0 : _subjectDragRef$curre8.dy) != null ? _subjectDragRef$curre7 : 0),
        dx: labelDx + ((_labelDragRef$current5 = (_labelDragRef$current6 = labelDragRef.current) == null ? void 0 : _labelDragRef$current6.dx) != null ? _labelDragRef$current5 : 0),
        dy: labelDy + ((_labelDragRef$current7 = (_labelDragRef$current8 = labelDragRef.current) == null ? void 0 : _labelDragRef$current8.dy) != null ? _labelDragRef$current7 : 0)
      });
    }
  }, [labelDx, labelDy, onDragMove, subjectX, subjectY]);
  var handleDragEnd = (0, _react.useCallback)(function (_ref4) {
    var event = _ref4.event;
    if (onDragEnd) {
      var _subjectDragRef$curre9, _subjectDragRef$curre10, _subjectDragRef$curre11, _subjectDragRef$curre12, _labelDragRef$current9, _labelDragRef$current10, _labelDragRef$current11, _labelDragRef$current12;
      onDragEnd({
        event: event,
        x: subjectX + ((_subjectDragRef$curre9 = (_subjectDragRef$curre10 = subjectDragRef.current) == null ? void 0 : _subjectDragRef$curre10.dx) != null ? _subjectDragRef$curre9 : 0),
        y: subjectY + ((_subjectDragRef$curre11 = (_subjectDragRef$curre12 = subjectDragRef.current) == null ? void 0 : _subjectDragRef$curre12.dy) != null ? _subjectDragRef$curre11 : 0),
        dx: labelDx + ((_labelDragRef$current9 = (_labelDragRef$current10 = labelDragRef.current) == null ? void 0 : _labelDragRef$current10.dx) != null ? _labelDragRef$current9 : 0),
        dy: labelDy + ((_labelDragRef$current11 = (_labelDragRef$current12 = labelDragRef.current) == null ? void 0 : _labelDragRef$current12.dy) != null ? _labelDragRef$current11 : 0)
      });
    }
  }, [labelDx, labelDy, onDragEnd, subjectX, subjectY]);
  var subjectDrag = (0, _useDrag.default)({
    onDragStart: handleDragStart,
    onDragMove: handleDragMove,
    onDragEnd: handleDragEnd,
    x: subjectX,
    y: subjectY
  });
  var labelDrag = (0, _useDrag.default)({
    onDragStart: handleDragStart,
    onDragMove: handleDragMove,
    onDragEnd: handleDragEnd,
    x: labelDx,
    y: labelDy
  });

  // enable referencing these in the callbacks defined before useDrag is called
  subjectDragRef.current = subjectDrag;
  labelDragRef.current = labelDrag;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Annotation.default, {
    x: subjectX + subjectDrag.dx,
    y: subjectY + subjectDrag.dy,
    dx: labelDx + labelDrag.dx,
    dy: labelDy + labelDrag.dy
  }, children), subjectDrag.isDragging && /*#__PURE__*/_react.default.createElement("rect", {
    width: width,
    height: height,
    onMouseMove: subjectDrag.dragMove,
    onMouseUp: subjectDrag.dragEnd,
    fill: "transparent"
  }), canEditSubject && /*#__PURE__*/_react.default.createElement("circle", _extends({
    cx: subjectX,
    cy: subjectY,
    transform: "translate(" + subjectDrag.dx + "," + subjectDrag.dy + ")",
    onMouseMove: subjectDrag.dragMove,
    onMouseUp: subjectDrag.dragEnd,
    onMouseDown: subjectDrag.dragStart,
    onTouchStart: subjectDrag.dragStart,
    onTouchMove: subjectDrag.dragMove,
    onTouchEnd: subjectDrag.dragEnd,
    cursor: subjectDrag.isDragging ? 'grabbing' : 'grab'
  }, defaultDragHandleProps, subjectDragHandleProps)), labelDrag.isDragging && /*#__PURE__*/_react.default.createElement("rect", {
    width: width,
    height: height,
    onMouseMove: labelDrag.dragMove,
    onMouseUp: labelDrag.dragEnd,
    fill: "transparent"
  }), canEditLabel && /*#__PURE__*/_react.default.createElement("circle", _extends({
    cx: subjectX + subjectDrag.dx + labelDx,
    cy: subjectY + subjectDrag.dy + labelDy,
    transform: "translate(" + labelDrag.dx + "," + labelDrag.dy + ")",
    onMouseMove: labelDrag.dragMove,
    onMouseUp: labelDrag.dragEnd,
    onMouseDown: labelDrag.dragStart,
    onTouchStart: labelDrag.dragStart,
    onTouchMove: labelDrag.dragMove,
    onTouchEnd: labelDrag.dragEnd,
    cursor: labelDrag.isDragging ? 'grabbing' : 'grab'
  }, defaultDragHandleProps, labelDragHandleProps)));
}
EditableAnnotation.propTypes = {
  width: _propTypes.default.number.isRequired,
  height: _propTypes.default.number.isRequired,
  children: _propTypes.default.node.isRequired,
  canEditLabel: _propTypes.default.bool,
  canEditSubject: _propTypes.default.bool,
  onDragStart: _propTypes.default.func,
  onDragMove: _propTypes.default.func,
  onDragEnd: _propTypes.default.func
};