var _excluded = ["layerName", "maxToDisplay", "Comp", "Annotation", "fontStyle", "alwaysShow", "isAnnotation", "spaceBefore", "spaceAfter", "zIndex", "passLabels", "noTitle"];
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); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import { ZoomCircularViewSlider } from "./ZoomCircularViewSlider";
import VeWarning from "../helperComponents/VeWarning";
import Labels from "./Labels";
import SelectionLayer from "./SelectionLayer";
import Caret from "./Caret";
import Axis from "./Axis";
import Orf from "./Orf";
import Feature from "./Feature";
import Primer from "./Primer";
import Cutsite from "./Cutsite";
import sortBy from "lodash/sortBy";
import { normalizePositionByRangeLength, getPositionFromAngle, getRangeLength, getOverlapsOfPotentiallyCircularRanges, isRangeOrPositionWithinRange, getMiddleOfRange, getSequenceWithinRange, trimRangeByAnotherRange } from "@teselagen/range-utils";
import React, { useEffect, useRef, useState } from "react";
import Draggable from "react-draggable";
import withEditorInteractions from "../withEditorInteractions";
import drawAnnotations from "./drawAnnotations";
import "./style.css";
import draggableClassnames from "../constants/draggableClassnames";
import { getOrfColor } from "../constants/orfFrameToColorMap";
import { getSingular } from "../utils/annotationTypes";
import { upperFirst, map, flatMap } from "lodash";
import useAnnotationLimits from "../utils/useAnnotationLimits";
import { getClientX, getClientY, getParedDownWarning, pareDownAnnotations } from "../utils/editorUtils";
import { getAllSelectionLayers } from "../utils/selectionLayer";
import classNames from "classnames";
import calculateTickMarkPositionsForGivenRange from "../utils/calculateTickMarkPositionsForGivenRange";
import { RotateCircularViewSlider } from "./RotateCircularViewSlider";
import { AxisNumbers } from "./AxisNumbers";
import { positionCutsites } from "./positionCutsites";
import { usePinch } from "@use-gesture/react";
import { CircularZoomMinimap } from "./CircularZoomMinimap";
import { normalizeAngleRange } from "./normalizeAngleRange";
import { CircularDnaSequence } from "./CircularDnaSequence";
import { VeTopRightContainer } from "./VeTopRightContainer";
import { normalizeAngle } from "./normalizeAngle";
import { editorDragged, editorDragStarted, editorDragStopped } from "../withEditorInteractions/clickAndDragUtils";
// import { updateLabelsForInViewFeaturesCircView } from "../utils/updateLabelsForInViewFeaturesCircView";

function noop() {}
var BASE_RADIUS = 70;
function getNearestCursorPositionToMouseEvent(event, _ref, callback) {
  var updateSelectionOrCaret = _ref.updateSelectionOrCaret,
    caretPosition = _ref.caretPosition,
    selectionLayer = _ref.selectionLayer,
    caretPositionUpdate = _ref.caretPositionUpdate,
    selectionLayerUpdate = _ref.selectionLayerUpdate,
    sequenceData = _ref.sequenceData,
    sequenceLength = _ref.sequenceLength,
    circRef = _ref.circRef,
    rotationRadians = _ref.rotationRadians;
  var clientX = getClientX(event);
  var clientY = getClientY(event);
  if (!clientX) {
    return;
  }
  var boundingRect = circRef.current.getBoundingClientRect();
  //get relative click positions
  var clickX = clientX - boundingRect.left - boundingRect.width / 2;
  var clickY = clientY - boundingRect.top - boundingRect.height / 2;

  //get angle
  var angle = Math.atan2(clickY, clickX) + Math.PI / 2 - rotationRadians;
  if (angle < 0) angle += Math.PI * 2; //normalize the angle if necessary
  var nearestCaretPos = sequenceLength === 0 ? 0 : normalizePositionByRangeLength(getPositionFromAngle(angle, sequenceLength, true), sequenceLength); //true because we're in between positions
  if (sequenceData && sequenceData.isProtein) {
    nearestCaretPos = Math.round(nearestCaretPos / 3) * 3;
  }
  callback({
    updateSelectionOrCaret: updateSelectionOrCaret,
    caretPosition: caretPosition,
    selectionLayer: selectionLayer,
    caretPositionUpdate: caretPositionUpdate,
    selectionLayerUpdate: selectionLayerUpdate,
    sequenceLength: sequenceLength,
    event: event,
    doNotWrapOrigin: !(sequenceData && sequenceData.circular),
    className: event.target.parentNode.className.animVal,
    shiftHeld: event.shiftKey,
    nearestCaretPos: nearestCaretPos,
    selectionStartGrabbed: event.target.parentNode.classList.contains(draggableClassnames.selectionStart),
    selectionEndGrabbed: event.target.parentNode.classList.contains(draggableClassnames.selectionEnd)
  });
}
export function CircularView(props) {
  var _useAnnotationLimits = useAnnotationLimits(),
    limits = _useAnnotationLimits[0];
  var _useState = useState(0),
    rotationRadians = _useState[0],
    setRotationRadians = _useState[1];
  var _useState2 = useState(1),
    _zoomLevel = _useState2[0],
    setZoomLevel = _useState2[1];
  if (props.circ_zoomLevel !== undefined) {
    //override from the editor to not lose the state when the Circular View component isn't rendered
    rotationRadians = props.circ_rotationRadians;
    setRotationRadians = props.circ_setRotationRadians;
    _zoomLevel = props.circ_zoomLevel;
    setZoomLevel = props.circ_setZoomLevel;
  }
  var _props$sequenceData = props.sequenceData,
    sequenceData = _props$sequenceData === void 0 ? {} : _props$sequenceData,
    smallSlider = props.smallSlider;
  var _sequenceData$sequenc = sequenceData.sequence,
    sequence = _sequenceData$sequenc === void 0 ? "atgc" : _sequenceData$sequenc,
    circular = sequenceData.circular;
  var sequenceLength = sequenceData.noSequence ? sequenceData.size : sequenceData.sequence.length;
  var hasZoomableLength = sequenceLength >= 50;
  var hasRotateableLength = sequenceLength >= 10;
  if (!hasZoomableLength) _zoomLevel = 1;
  if (!hasRotateableLength) rotationRadians = 0;
  var circRef = useRef();
  var rotateHelper = useRef({});
  var zoomHelper = useRef({});
  useEffect(function () {
    rotateHelper.current.triggerChange && rotateHelper.current.triggerChange(function (_ref2) {
      var changeValue = _ref2.changeValue;
      changeValue(normalizeAngle(Math.PI * 2 - rotationRadians) / Math.PI * 180);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  var zoomLevel = _zoomLevel;
  var smallZoom = 1;
  if (_zoomLevel < 1) {
    smallZoom = _zoomLevel;
    zoomLevel = 1;
  }
  var _props$width = props.width,
    width = _props$width === void 0 ? 400 : _props$width,
    _props$height = props.height,
    height = _props$height === void 0 ? 400 : _props$height,
    noRedux = props.noRedux,
    readOnly = props.readOnly,
    _props$hideName = props.hideName,
    hideName = _props$hideName === void 0 ? false : _props$hideName,
    editorName = props.editorName,
    smartCircViewLabelRender = props.smartCircViewLabelRender,
    showCicularViewInternalLabels = props.showCicularViewInternalLabels,
    _withRotateCircularView = props.withRotateCircularView,
    withZoomCircularView = props.withZoomCircularView,
    _props$selectionLayer = props.selectionLayer,
    selectionLayer = _props$selectionLayer === void 0 ? {
      start: -1,
      end: -1
    } : _props$selectionLayer,
    _props$annotationHeig = props.annotationHeight,
    annotationHeight = _props$annotationHeig === void 0 ? 15 : _props$annotationHeig,
    _props$spaceBetweenAn = props.spaceBetweenAnnotations,
    spaceBetweenAnnotations = _props$spaceBetweenAn === void 0 ? 2 : _props$spaceBetweenAn,
    _props$annotationVisi = props.annotationVisibility,
    annotationVisibility = _props$annotationVisi === void 0 ? {} : _props$annotationVisi,
    _props$annotationLabe = props.annotationLabelVisibility,
    annotationLabelVisibility = _props$annotationLabe === void 0 ? {} : _props$annotationLabe,
    _props$caretPosition = props.caretPosition,
    caretPosition = _props$caretPosition === void 0 ? -1 : _props$caretPosition,
    _props$editorClicked = props.editorClicked,
    editorClicked = _props$editorClicked === void 0 ? noop : _props$editorClicked,
    _props$backgroundRigh = props.backgroundRightClicked,
    backgroundRightClicked = _props$backgroundRigh === void 0 ? noop : _props$backgroundRigh,
    _props$searchLayers = props.searchLayers,
    searchLayers = _props$searchLayers === void 0 ? [] : _props$searchLayers,
    _props$additionalSele = props.additionalSelectionLayers,
    additionalSelectionLayers = _props$additionalSele === void 0 ? [] : _props$additionalSele,
    maxAnnotationsToDisplay = props.maxAnnotationsToDisplay,
    _props$searchLayerRig = props.searchLayerRightClicked,
    searchLayerRightClicked = _props$searchLayerRig === void 0 ? noop : _props$searchLayerRig,
    _props$selectionLayer2 = props.selectionLayerRightClicked,
    selectionLayerRightClicked = _props$selectionLayer2 === void 0 ? noop : _props$selectionLayer2,
    _props$searchLayerCli = props.searchLayerClicked,
    searchLayerClicked = _props$searchLayerCli === void 0 ? noop : _props$searchLayerCli,
    instantiated = props.instantiated,
    noWarnings = props.noWarnings,
    labelLineIntensity = props.labelLineIntensity,
    fontHeightMultiplier = props.fontHeightMultiplier,
    hoveredId = props.hoveredId,
    labelSize = props.labelSize,
    _props$nameFontSizeCi = props.nameFontSizeCircularView,
    nameFontSizeCircularView = _props$nameFontSizeCi === void 0 ? 14 : _props$nameFontSizeCi,
    fullScreen = props.fullScreen;
  var withRotateCircularView = _withRotateCircularView || withZoomCircularView; //if we're showing zoom then we MUST show rotation as well

  var sequenceName = hideName ? "" : sequenceData.name || "";
  var annotationsSvgs = [];
  var labels = {};
  var isProtein = sequenceData.isProtein;
  var maxZoomLevel = Math.max(5, Math.floor(sequenceLength / 100));
  var svgWidth = Math.max(Number(width) || 300);
  var svgHeight = Math.max(Number(height) || 300);
  var percentOfCircle = 1 / zoomLevel * Math.min(svgWidth, 800) / 800;
  var isZoomedIn = zoomLevel !== 1;
  var radius = BASE_RADIUS;
  var rotation = 2 * Math.PI - rotationRadians; //get radians

  var rangeToShowLength = sequenceLength;
  var rangeToShow = {
    start: 0,
    end: Math.max(sequenceLength - 1, 0)
  };
  var visibleAngleRange;
  if (isZoomedIn) {
    var visibleAngle = Math.PI * percentOfCircle;
    radius = Math.max(BASE_RADIUS, svgWidth / Math.sin(visibleAngle / 2) / 2);
    visibleAngleRange = normalizeAngleRange({
      start: rotation - visibleAngle / 2,
      end: rotation + visibleAngle / 2
    });
    var rangeToShowStart = getPositionFromAngle(visibleAngleRange.start, sequenceLength);
    var rangeToShowEnd = getPositionFromAngle(visibleAngleRange.end, sequenceLength);
    rangeToShow = {
      start: normalizePositionByRangeLength(rangeToShowStart, sequenceLength),
      end: normalizePositionByRangeLength(rangeToShowEnd, sequenceLength)
    };
    rangeToShowLength = getRangeLength(rangeToShow, sequenceLength);
  }
  var innerRadius = radius - 10;
  var initialRadius = radius;
  var showSeq = isZoomedIn && rangeToShowLength < 140;
  var showSeqText = rangeToShowLength < 80;

  //RENDERING CONCEPTS:
  //-"Circular" annotations get a radius, and a curvature based on their radius:
  //<CircularFeature>
  //-Then we rotate the annotations as necessary (and optionally flip them):
  //<PositionAnnotationOnCircle>

  var layersToDraw = [{
    zIndex: 10,
    layerName: "sequenceChars"
  }, {
    zIndex: 20,
    layerName: "features",
    isAnnotation: true,
    // spaceBefore: 10,
    spaceAfter: 5
  }].concat(annotationVisibility.axis ? [{
    layerName: "axisNumbers",
    annotationType: "axisNumbers",
    Annotation: AxisNumbers,
    isAnnotation: true,
    noTitle: true,
    noHover: true,
    annotations: calculateTickMarkPositionsForGivenRange({
      increaseOffset: true,
      range: rangeToShow,
      tickSpacing: rangeToShowLength < 10 ? 2 : rangeToShowLength < 50 ? Math.ceil(rangeToShowLength / 25) * 5 : Math.ceil(rangeToShowLength / 100) * 10,
      sequenceLength: sequenceLength,
      isProtein: isProtein
    }).map(function (pos) {
      return {
        name: "Tick Mark",
        tickPosition: pos,
        start: pos,
        end: pos
      };
    }),
    annotationProps: {
      hideTicks: !annotationVisibility.axis,
      hideNumbers: !annotationVisibility.axisNumbers
    },
    useCenter: true,
    passAnnotation: true,
    allOnSameLevel: true,
    addHeight: true,
    alwaysShow: true,
    showLabels: false,
    spaceBefore: 0,
    spaceAfter: 0
  }, {
    zIndex: 0,
    layerName: "axis",
    Annotation: Axis,
    spaceBefore: 10,
    spaceAfter: 5
  }] : [], [{
    zIndex: 10,
    layerName: "cutsites",
    fontStyle: "italic",
    Annotation: Cutsite,
    hideAnnotation: showSeqText,
    useStartAngle: true,
    allOnSameLevel: true,
    noHeight: true,
    addHeight: false,
    positionBy: positionCutsites,
    isAnnotation: true
  }], showSeq && annotationVisibility.sequence ? [{
    layerName: "dnaSequences",
    annotationType: "dnaSequences",
    noTitle: true,
    Annotation: CircularDnaSequence,
    isAnnotation: true,
    annotationProps: {
      showReverseSequence: annotationVisibility.reverseSequence,
      showDnaColors: annotationVisibility.dnaColors,
      showSeqText: showSeqText
    },
    noHover: true,
    annotations: getSequenceWithinRange(rangeToShow, sequence).split("").map(function (letter, i) {
      var pos = rangeToShow.start + i;
      return {
        className: "ve-dna-letter-" + pos,
        start: pos,
        end: pos,
        letter: letter
      };
    }),
    useCenter: true,
    passAnnotation: true,
    allOnSameLevel: true,
    addHeight: true,
    alwaysShow: true,
    showLabels: false,
    spaceBefore: 5,
    spaceAfter: annotationVisibility.reverseSequence ? 20 : 5
  }] : [], [{
    zIndex: 15,
    alwaysShow: true,
    layerName: "caret",
    Annotation: drawCaret
  }, {
    zIndex: 10,
    alwaysShow: true,
    layerName: "selectionLayer",
    Annotation: drawSelectionLayer,
    spaceAfter: 10
  }, {
    zIndex: 20,
    layerName: "replacementLayers",
    isAnnotation: true,
    spaceAfter: 20
  }, {
    zIndex: 20,
    layerName: "deletionLayers",
    isAnnotation: true,
    spaceAfter: 20
  }, {
    zIndex: 20,
    Annotation: Orf,
    showLabels: false,
    getColor: getOrfColor,
    layerName: "orfs",
    isAnnotation: true,
    spaceBefore: 10
  }, {
    spaceBefore: 10,
    spaceAfter: 5,
    zIndex: 20,
    Annotation: Primer,
    isAnnotation: true,
    layerName: "primers"
  }, {
    zIndex: 20,
    layerName: "parts",
    isAnnotation: true,
    spaceBefore: 10,
    spaceAfter: 5
  }, {
    zIndex: 20,
    layerName: "lineageAnnotations",
    isAnnotation: true,
    spaceBefore: 10,
    spaceAfter: 5
  }, {
    zIndex: 20,
    layerName: "assemblyPieces",
    isAnnotation: true,
    spaceBefore: 10,
    spaceAfter: 5
  }, {
    zIndex: 20,
    layerName: "warnings",
    isAnnotation: true,
    spaceBefore: 10,
    spaceAfter: 5
  }, {
    zIndex: 30,
    alwaysShow: true,
    layerName: "labels",
    Annotation: Labels,
    circularViewWidthVsHeightRatio: width / height,
    passLabels: true,
    labelLineIntensity: labelLineIntensity,
    labelSize: labelSize,
    fontHeightMultiplier: fontHeightMultiplier,
    textScalingFactor: 700 / Math.min(width, height)
  }]);
  var paredDownMessages = [];
  var output = layersToDraw.map(function (layer) {
    var layerName = layer.layerName,
      maxToDisplay = layer.maxToDisplay,
      Comp = layer.Comp,
      Annotation = layer.Annotation,
      fontStyle = layer.fontStyle,
      alwaysShow = layer.alwaysShow,
      isAnnotation = layer.isAnnotation,
      _layer$spaceBefore = layer.spaceBefore,
      spaceBefore = _layer$spaceBefore === void 0 ? 0 : _layer$spaceBefore,
      _layer$spaceAfter = layer.spaceAfter,
      spaceAfter = _layer$spaceAfter === void 0 ? 0 : _layer$spaceAfter,
      zIndex = layer.zIndex,
      passLabels = layer.passLabels,
      noTitle = layer.noTitle,
      rest = _objectWithoutPropertiesLoose(layer, _excluded);
    if (!(alwaysShow || annotationVisibility[layerName])) {
      return null;
    }
    //DRAW FEATURES
    var comp;
    var results;
    var singularName = getSingular(layerName);
    var nameUpper = upperFirst(layerName);
    radius += spaceBefore;
    var sharedProps = _extends({
      radius: radius,
      innerRadius: BASE_RADIUS,
      outerRadius: radius,
      noRedux: noRedux,
      isProtein: isProtein,
      smartCircViewLabelRender: smartCircViewLabelRender,
      extraSideSpace: Math.max(0, width - height),
      onClick: props[singularName + "Clicked"],
      onDoubleClick: props[singularName + "DoubleClicked"],
      onRightClicked: props[singularName + "RightClicked"],
      sequenceLength: sequenceLength,
      editorName: editorName,
      showCicularViewInternalLabels: showCicularViewInternalLabels
    }, rest);
    if (isAnnotation) {
      //we're drawing features/cutsites/primers/orfs/etc (something that lives on the seqData)
      if (!map(sequenceData[layerName]).length && !alwaysShow) {
        radius -= spaceBefore;
        return null;
      }
      var trimmedAnnotations = flatMap(layer.annotations || sequenceData["filtered" + nameUpper] || sequenceData[layerName] || [], function (range) {
        var overlapOfRanges = getOverlapsOfPotentiallyCircularRanges(range, rangeToShow, sequenceLength, true);
        if (!overlapOfRanges || !overlapOfRanges.length) return [];
        return _extends({}, range);
      });
      var maxToShow = !isZoomedIn && ((maxAnnotationsToDisplay ? maxAnnotationsToDisplay[layerName] : limits[layerName]) || 50);
      var _ref3 = maxToShow ? pareDownAnnotations(trimmedAnnotations, maxToShow) : [trimmedAnnotations],
        trimmedAndParedAnns = _ref3[0],
        paredDown = _ref3[1];
      if (paredDown) {
        paredDownMessages.push(getParedDownWarning({
          nameUpper: nameUpper,
          maxToShow: maxToShow,
          isAdjustable: !maxAnnotationsToDisplay
        }));
      }
      results = drawAnnotations(_extends({
        readOnly: readOnly,
        noTitle: noTitle,
        rotationRadians: rotationRadians,
        visibleAngleRange: visibleAngleRange,
        isZoomedIn: isZoomedIn,
        Annotation: Annotation || Comp || Feature,
        fontStyle: fontStyle,
        hoveredId: hoveredId,
        annotationType: singularName,
        type: singularName,
        reverseAnnotations: true,
        showLabels: !(annotationLabelVisibility[layerName] === false),
        annotations: trimmedAndParedAnns,
        annotationHeight: annotationHeight,
        spaceBetweenAnnotations: spaceBetweenAnnotations
      }, sharedProps, props[singularName + "Options"]));
    } else {
      //we're drawing axis/selectionLayer/labels/caret/etc (something that doesn't live on the seqData)
      results = Annotation(_extends({
        rotationRadians: rotationRadians
      }, passLabels && {
        labels: labels
      }, sharedProps));
    }
    if (results) {
      // //update the radius, labels, and svg
      radius += results.height || 0;
      //tnr: we had been storing labels as a keyed-by-id object but that caused parts and features with the same id to override eachother
      labels = [].concat(map(labels), map(results.labels || {}));
      comp = results.component === undefined ? results : results.component;
    }
    radius += spaceAfter;
    // console.warn('radius after draw:',JSON.stringify(radius,null,4))
    return {
      result: comp,
      zIndex: zIndex
    };
  }).filter(function (i) {
    return !!i;
  });
  annotationsSvgs = sortBy(output, "zIndex").reduce(function (arr, _ref4) {
    var result = _ref4.result;
    return arr.concat(result);
  }, []);
  function drawSelectionLayer() {
    //DRAW SELECTION LAYER
    return getAllSelectionLayers({
      additionalSelectionLayers: additionalSelectionLayers,
      searchLayers: searchLayers,
      selectionLayer: selectionLayer
    }).map(function (selectionLayer, index) {
      if (selectionLayer.start >= 0 && selectionLayer.end >= 0 && sequenceLength > 0) {
        var _React$createElement;
        return /*#__PURE__*/React.createElement(SelectionLayer, (_React$createElement = {
          key: index,
          index: index,
          isDraggable: true,
          isProtein: isProtein
        }, _React$createElement["key"] = "veCircularViewSelectionLayer" + index, _React$createElement.selectionLayer = selectionLayer, _React$createElement.onRightClicked = selectionLayer.isSearchLayer ? searchLayerRightClicked : selectionLayerRightClicked, _React$createElement.onClick = selectionLayer.isSearchLayer ? searchLayerClicked : undefined, _React$createElement.sequenceLength = sequenceLength, _React$createElement.radius = radius, _React$createElement.innerRadius = innerRadius, _React$createElement));
      } else {
        return null;
      }
    }).filter(function (el) {
      return !!el;
    });
  }
  function drawCaret() {
    //DRAW CARET
    if (caretPosition !== -1 && selectionLayer.start < 0 && sequenceLength >= 0) {
      //only render if there is no selection layer
      return /*#__PURE__*/React.createElement(Caret, {
        caretPosition: caretPosition,
        sequenceLength: sequenceLength,
        isProtein: isProtein,
        innerRadius: innerRadius,
        outerRadius: radius,
        key: "veCircularViewCaret"
      });
    }
  }

  //tnr: Make the radius have a minimum so the empty yellow axis circle doesn't take up the entire screen
  if (radius < 150) radius = 150;
  var widthToUse = Math.max(Number(width) || 300);
  var heightToUse = Math.max(Number(height) || 300);
  var bpTitle = isProtein ? Math.floor(sequenceLength / 3) + " AAs" : sequenceLength + " bps";
  var nameEl = /*#__PURE__*/React.createElement("div", {
    className: "veSequenceName",
    style: {
      position: "absolute",
      width: "100%",
      height: "100%",
      pointerEvents: "none",
      display: "flex",
      justifyContent: "center",
      alignItems: isZoomedIn || smallZoom < 1 ? "end" : "center",
      paddingLeft: isZoomedIn || smallZoom < 1 ? 20 : 0,
      paddingRight: isZoomedIn || smallZoom < 1 ? 20 : 0,
      textAlign: "center",
      zIndex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: isZoomedIn || smallZoom < 1 ? 80 : 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    title: sequenceName,
    className: "veCircularViewTextWrapper",
    style: {
      textAlign: "center",
      display: "-webkit-box",
      WebkitLineClamp: "3",
      WebkitBoxOrient: "vertical",
      overflow: "hidden",
      wordBreak: "break-all",
      textOverflow: "ellipsis",
      width: isZoomedIn || smallZoom < 1 ? undefined : innerRadius,
      maxHeight: innerRadius - 15,
      fontSize: nameFontSizeCircularView
    }
  }, sequenceName), /*#__PURE__*/React.createElement("span", {
    title: bpTitle,
    style: {
      fontSize: 10
    }
  }, bpTitle)));
  var target = React.useRef();
  usePinch(function (_ref5) {
    var _ref5$delta = _ref5.delta,
      d = _ref5$delta[0],
      event = _ref5.event;
    if (d === 0) return;
    event.stopPropagation();
    zoomHelper.current.triggerChange && zoomHelper.current.triggerChange(function (_ref6) {
      var changeValue = _ref6.changeValue,
        value = _ref6.value;
      changeValue(value + d * 5);
    });
  }, {
    target: target,
    from: [zoomLevel]
  });
  var toPass = _extends({}, props, {
    sequenceLength: sequenceLength,
    circRef: circRef,
    rotationRadians: rotationRadians
  });
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: widthToUse,
      height: heightToUse,
      position: "relative",
      overflow: "hidden"
    },
    onWheel: withZoomCircularView && hasRotateableLength ? function (e) {
      var delta = e.deltaY;
      if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) {
        delta = e.deltaX;
      }
      rotateHelper.current.triggerChange && rotateHelper.current.triggerChange(function (_ref7) {
        var changeValue = _ref7.changeValue,
          value = _ref7.value;
        changeValue(normalizeAngle((value + delta / 4) * Math.PI / 180) / Math.PI * 180);
      });
      e.stopPropagation();
    } : undefined,
    className: classNames("veCircularView", props.className)
  }, !hideName && isZoomedIn && nameEl, withRotateCircularView && hasRotateableLength && /*#__PURE__*/React.createElement(RotateCircularViewSlider, {
    bindOutsideChangeHelper: rotateHelper.current,
    zoomLevel: zoomLevel,
    smallSlider: smallSlider,
    maxZoomLevel: maxZoomLevel,
    setRotationRadians: setRotationRadians
  }), withZoomCircularView && hasZoomableLength && /*#__PURE__*/React.createElement(ZoomCircularViewSlider, {
    zoomHelper: zoomHelper,
    smallSlider: smallSlider,
    onZoom: function onZoom() {
      var caret = caretPosition > -1 ? caretPosition : selectionLayer.start > -1 ? getMiddleOfRange(selectionLayer, sequenceLength) : undefined;
      if (caret !== undefined) {
        var radToRotateTo = caret / sequenceLength * Math.PI * 2;
        rotateHelper.current.triggerChange && rotateHelper.current.triggerChange(function (_ref8) {
          var changeValue = _ref8.changeValue;
          var isInView = isRangeOrPositionWithinRange(caret, rangeToShow, sequenceLength);
          if (!isInView) {
            if (selectionLayer.start > -1) {
              var trimmed = trimRangeByAnotherRange(selectionLayer, rangeToShow, sequenceLength);
              if (trimmed.start !== selectionLayer.start || trimmed.end !== selectionLayer.end) return;
            }
            changeValue(radToRotateTo / Math.PI * 180);
          }
        });
      }
      // updateLabelsForInViewFeaturesCircView({ radius });
    },

    zoomLevel: _zoomLevel,
    maxZoomLevel: maxZoomLevel,
    setZoomLevel: setZoomLevel
  }), /*#__PURE__*/React.createElement(Draggable
  // enableUserSelectHack={false} //needed to prevent the input bubble from losing focus post user drag
  , {
    bounds: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    },
    onDrag: function onDrag(event) {
      getNearestCursorPositionToMouseEvent(event, toPass, editorDragged);
    },
    onStart: function onStart(event) {
      getNearestCursorPositionToMouseEvent(event, toPass, editorDragStarted);
    },
    onStop: editorDragStopped
  }, /*#__PURE__*/React.createElement("div", {
    ref: withZoomCircularView && hasZoomableLength ? target : undefined
  }, /*#__PURE__*/React.createElement("svg", {
    key: "circViewSvg",
    onClick: function onClick(event) {
      instantiated && getNearestCursorPositionToMouseEvent(event, toPass, editorClicked);
    },
    onContextMenu: function onContextMenu(e) {
      getNearestCursorPositionToMouseEvent(e, toPass, backgroundRightClicked);
    },
    style: {
      overflow: "visible",
      display: "block"
    },
    className: "circularViewSvg",
    viewBox: isZoomedIn ? -svgWidth / 2 / smallZoom + "," + (-svgHeight / 2 / smallZoom - (!isZoomedIn ? 0 : initialRadius + BASE_RADIUS * 2 - 100)) + "," + svgWidth / smallZoom + "," + svgHeight / smallZoom : "-" + radius + " -" + radius + " " + radius * 2 + " " + radius * 2,
    width: svgWidth,
    height: svgHeight
  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("circle", {
    ref: circRef,
    r: radius,
    style: {
      opacity: 0,
      zIndex: -1
    },
    className: "veHiddenAxis"
  }), annotationsSvgs, !hideName && !isZoomedIn && /*#__PURE__*/React.createElement("foreignObject", {
    x: -72.5 / 2,
    y: -72.5 / 2,
    width: 72.5,
    height: 72.5,
    transform: "rotate(" + -rotationRadians * 180 / Math.PI + ")"
  }, /*#__PURE__*/React.createElement("div", {
    xmlns: "http://www.w3.org/1999/xhtml",
    key: "circViewSvgCenterText",
    className: "veCircularViewMiddleOfVectorText"
  }, /*#__PURE__*/React.createElement("div", {
    title: sequenceName,
    className: "veCircularViewTextWrapper",
    style: {
      display: "-webkit-box",
      WebkitLineClamp: "3",
      WebkitBoxOrient: "vertical",
      overflow: "hidden",
      wordBreak: "break-all",
      textOverflow: "ellipsis",
      width: 72.5,
      maxHeight: 72.5 - 15,
      fontSize: nameFontSizeCircularView
    }
  }, sequenceName), /*#__PURE__*/React.createElement("span", {
    title: bpTitle,
    style: {
      fontSize: 10
    }
  }, bpTitle))))), /*#__PURE__*/React.createElement(VeTopRightContainer, {
    fullScreen: fullScreen
  }, !circular && !noWarnings && /*#__PURE__*/React.createElement(VeWarning, {
    key: "ve-warning-circular-to-linear",
    "data-test": "ve-warning-circular-to-linear",
    intent: "warning",
    tooltip: "Warning! You're viewing a linear sequence in the Circular Map. Click on 'Linear Map' to view the linear sequence in a more intuitive way."
  }), !noWarnings && paredDownMessages, isZoomedIn && /*#__PURE__*/React.createElement(CircularZoomMinimap, {
    rotationRadians: rotationRadians,
    percentOfCircle: percentOfCircle
  })))));
}
export default withEditorInteractions(CircularView);