function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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); }
import { debounce, find, get, some, isArray } from "lodash";
// import sizeMe from "react-sizeme";
import { showContextMenu } from "teselagen-react-components";
import { Button, ButtonGroup, Intent, Icon, Tooltip, ContextMenu } from "@blueprintjs/core";
import PropTypes from "prop-types";
import VersionHistoryView from "../VersionHistoryView";
import { importSequenceFromFile } from "../withEditorProps";
import getAdditionalEnzymesSelector from "../selectors/getAdditionalEnzymesSelector";
import { showAddOrEditAnnotationDialog } from "../GlobalDialogUtils";
import "../Reflex/reflex-styles.css";
import React from "react";
import AlignmentView from "../AlignmentView";
// import * as customIcons from "teselagen-react-components";
// import { Button } from "@blueprintjs/core";
import { compose } from "redux";
//tnr: this can be removed once https://github.com/leefsmp/Re-Flex/pull/30 is merged and deployed
/* eslint-disable */
import { connectToEditor, handleSave } from "../withEditorProps";
import { withHandlers } from "recompose";
import CommandHotkeyHandler from "./CommandHotkeyHandler";
import { ReflexContainer, ReflexSplitter, ReflexElement } from "../Reflex";
/* eslint-enable */

import { flatMap, map, filter, pick, camelCase } from "lodash";
import { ToolBar } from "../ToolBar";
import CircularView from "../CircularView";
import LinearView from "../LinearView";
import RowView from "../RowView";
import StatusBar from "../StatusBar";
import DropHandler from "./DropHandler";
import Properties from "../helperComponents/PropertiesDialog";
import "./style.css";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
import DigestTool from "../DigestTool/DigestTool";
import { insertItem, removeItem } from "../utils/arrayUtils";
import Mismatches from "../AlignmentView/Mismatches";
import SimpleCircularOrLinearView from "../SimpleCircularOrLinearView";
import { userDefinedHandlersAndOpts } from "./userDefinedHandlersAndOpts";
import { GlobalDialog } from "../GlobalDialog";
import isMobile from "is-mobile";
import { getClientX, getClientY } from "../utils/editorUtils";
import PCRTool from "../PCRTool/PCRTool";
import classNames from "classnames";

// if (process.env.NODE_ENV !== 'production') {
//   const {whyDidYouUpdate} = require('why-did-you-update');
//   whyDidYouUpdate(React);
// }

var _panelMap = {
  circular: {
    comp: CircularView,
    panelSpecificProps: ["extraAnnotationProps"]
  },
  sequence: {
    comp: RowView,
    panelSpecificProps: ["extraAnnotationProps"]
  },
  rail: {
    comp: LinearView,
    panelSpecificProps: ["extraAnnotationProps"]
  },
  // alignmentTool: AlignmentTool,
  alignment: AlignmentView,
  digestTool: DigestTool,
  pcrTool: PCRTool,
  properties: {
    comp: Properties,
    panelSpecificPropsToSpread: ["PropertiesProps"]
  },
  mismatches: Mismatches
};

// fake data generator
// a little function to help us with reordering the result
var reorder = function reorder(list, startIndex, endIndex) {
  var result = Array.from(list);
  var _result$splice = result.splice(startIndex, 1),
    removed = _result$splice[0];
  result.splice(endIndex, 0, removed);
  return result;
};
var tabHeight = 34;
var getSplitScreenListStyle = function getSplitScreenListStyle(isDraggingOver, isDragging) {
  return _extends({
    position: "absolute",
    // top: "-20px",
    height: "100%",
    // background: "lightgreen",
    width: "50%",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    wordWrap: "normal",
    opacity: 0
  }, isDragging && {
    opacity: 0.7,
    zIndex: 10000,
    background: "lightgrey"
  }, isDraggingOver && {
    background: "lightblue"
  }, {
    left: "50%"
  });
};
export var Editor = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Editor, _React$Component);
  function Editor() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _defineProperty(_assertThisInitialized(_this), "state", {
      rotationRadians: 0,
      zoomLevel: 1,
      isHotkeyDialogOpen: false,
      tabDragging: false,
      previewModeFullscreen: false
    });
    _defineProperty(_assertThisInitialized(_this), "getExtraPanel", function /*panelOptions */
    () {
      return [];
    });
    _defineProperty(_assertThisInitialized(_this), "updateDimensions", debounce(function () {
      // (this.hasFullscreenPanel || this.fitHeight) &&
      _this.setState({
        randomRerenderTrigger: Math.random()
      });
    }, 100));
    _defineProperty(_assertThisInitialized(_this), "onTabDragStart", function () {
      _this.setState({
        tabDragging: true
      });
    });
    _defineProperty(_assertThisInitialized(_this), "onTabDragEnd", function (result) {
      _this.setState({
        tabDragging: false
      });
      var _this$props = _this.props,
        panelsShownUpdate = _this$props.panelsShownUpdate,
        panelsShown = _this$props.panelsShown;
      // dropped outside the list
      if (!result.destination) {
        return;
      }
      var newPanelsShown;
      if (result.destination.droppableId !== result.source.droppableId) {
        //we're moving a tab from one group to another group
        var secondPanel = panelsShown.length === 1 ? [[]] : [];
        var panelsToMapOver = [].concat(panelsShown, secondPanel);
        newPanelsShown = map(panelsToMapOver, function (panelGroup, groupIndex) {
          var panelToMove = panelsShown[Number(result.source.droppableId.replace("droppable-id-", ""))][result.source.index];
          if (Number(groupIndex) === Number(result.destination.droppableId.replace("droppable-id-", ""))) {
            //we're adding to this group
            return insertItem(panelGroup.map(function (tabPanel) {
              return _extends({}, tabPanel, {
                active: false
              });
            }), _extends({}, panelToMove, {
              active: true
            }), result.destination.index);
          } else if (Number(groupIndex) === Number(result.source.droppableId.replace("droppable-id-", ""))) {
            // we're removing from this group
            return removeItem(panelGroup, result.source.index).map(function (tabPanel, index) {
              return _extends({}, tabPanel, panelToMove.active && index === 0 && {
                active: true
              });
            });
          } else {
            return panelGroup;
          }
        });
      } else {
        //we're moving tabs within the same group
        newPanelsShown = map(panelsShown, function (panelGroup, groupIndex) {
          if (Number(groupIndex) === Number(result.destination.droppableId.replace("droppable-id-", ""))) {
            //we'removing a tab around in this group
            return reorder(panelGroup.map(function (tabPanel, i) {
              return _extends({}, tabPanel, {
                active: result.source.index === i
              });
            }), result.source.index, result.destination.index);
          }
          return panelGroup;
        });
      }
      filter(newPanelsShown, function (panelGroup) {
        return panelGroup.length;
      });
      panelsShownUpdate(newPanelsShown);
    });
    _defineProperty(_assertThisInitialized(_this), "getPanelsToShow", function () {
      var panelsShown = _this.props.panelsShown;
      if (isMobile()) return [flatMap(panelsShown)];
      return map(panelsShown);
    });
    _defineProperty(_assertThisInitialized(_this), "onPreviewModeButtonContextMenu", function (event) {
      var previewModeButtonMenu = _this.props.previewModeButtonMenu;
      event.preventDefault();
      if (previewModeButtonMenu) {
        ContextMenu.show(previewModeButtonMenu, {
          left: getClientX(event),
          top: getClientY(event)
        });
      }
    });
    _defineProperty(_assertThisInitialized(_this), "closeHotkeyDialog", function () {
      _this.setState({
        isHotkeyDialogOpen: false
      });
    });
    _defineProperty(_assertThisInitialized(_this), "openHotkeyDialog", function () {
      _this.setState({
        isHotkeyDialogOpen: true
      });
    });
    _defineProperty(_assertThisInitialized(_this), "togglePreviewFullscreen", function () {
      var _this$props2 = _this.props,
        togglePreviewFullscreen = _this$props2.togglePreviewFullscreen,
        onPreviewModeFullscreenClose = _this$props2.onPreviewModeFullscreenClose,
        controlledPreviewModeFullscreen = _this$props2.previewModeFullscreen;
      if (togglePreviewFullscreen) togglePreviewFullscreen();
      var previewModeFullscreen = _this.state.previewModeFullscreen;
      if (controlledPreviewModeFullscreen === undefined ? previewModeFullscreen : controlledPreviewModeFullscreen) {
        onPreviewModeFullscreenClose && onPreviewModeFullscreenClose();
      }
      _this.setState({
        previewModeFullscreen: !previewModeFullscreen
      });
    });
    return _this;
  }
  var _proto = Editor.prototype;
  _proto.getChildContext = function getChildContext() {
    //tnrtodo this will need to be updated once blueprint uses the react 16 api
    return {
      blueprintPortalClassName: "ove-portal"
    };
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this2 = this;
    if (this.props.initialAnnotationToEdit && !this.hasShownInitialAnnotationToEditDialog && !this.inPreviewMode) {
      ["part", "feature", "primer"].forEach(function (type) {
        if (_this2.props.initialAnnotationToEdit.startsWith(type)) {
          var annid = _this2.props.initialAnnotationToEdit.replace(type + "-", "");
          var anns = _this2.props.sequenceData[type + "s"];
          var annotation = find(anns, function (a) {
            return a.id === annid;
          });
          if (annotation) {
            showAddOrEditAnnotationDialog({
              type: type,
              annotation: annotation
            });
            _this2.hasShownInitialAnnotationToEditDialog = true;
          }
        }
      });
    }
    //autosave if necessary!
    if (this.props.shouldAutosave && prevProps.sequenceData && prevProps.sequenceData.stateTrackingId && this.props.sequenceData.stateTrackingId !== prevProps.sequenceData.stateTrackingId) {
      this.props.handleSave();
    }
  };
  _proto.componentDidMount = function componentDidMount() {
    var _this$props$sequenceD;
    if (isMobile()) {
      var firstActivePanelId;
      some(this.getPanelsToShow()[0], function (panel) {
        if (panel.active) {
          firstActivePanelId = panel.id;
          return true;
        }
      });
      this.props.collapseSplitScreen(firstActivePanelId);
    }
    if ((_this$props$sequenceD = this.props.sequenceData) === null || _this$props$sequenceD === void 0 ? void 0 : _this$props$sequenceD.id) {
      var hasSetSpecificFilter;
      try {
        try {
          var _this$props$sequenceD2;
          var cutsiteFilterDefaultForThisSpecificSeq = JSON.parse(localStorage.getItem("tgInitialCutsiteFilter-" + ((_this$props$sequenceD2 = this.props.sequenceData) === null || _this$props$sequenceD2 === void 0 ? void 0 : _this$props$sequenceD2.id)));
          if (cutsiteFilterDefaultForThisSpecificSeq && isArray(cutsiteFilterDefaultForThisSpecificSeq)) {
            hasSetSpecificFilter = true;
            this.props.filteredRestrictionEnzymesUpdate(cutsiteFilterDefaultForThisSpecificSeq);
          }
          // eslint-disable-next-line no-empty
        } catch (e) {}
        var cutsiteFilterDefaultForAllSeqs = JSON.parse(localStorage.getItem("tgInitialCutsiteFilter"));
        if (!hasSetSpecificFilter && cutsiteFilterDefaultForAllSeqs && isArray(cutsiteFilterDefaultForAllSeqs)) {
          this.props.filteredRestrictionEnzymesUpdate(cutsiteFilterDefaultForAllSeqs);
        }
        // eslint-disable-next-line no-empty
      } catch (e) {}
    }
    window.addEventListener("resize", this.updateDimensions);
    this.forceUpdate(); //we need to do this to get an accurate height measurement on first render
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions);
  };
  _proto.render = function render() {
    var _this3 = this;
    var uncontrolledPreviewModeFullscreen = this.state.previewModeFullscreen;
    var _this$props3 = this.props,
      _this$props3$ToolBarP = _this$props3.ToolBarProps,
      ToolBarProps = _this$props3$ToolBarP === void 0 ? {} : _this$props3$ToolBarP,
      _this$props3$StatusBa = _this$props3.StatusBarProps,
      StatusBarProps = _this$props3$StatusBa === void 0 ? {} : _this$props3$StatusBa,
      extraRightSidePanel = _this$props3.extraRightSidePanel,
      editorName = _this$props3.editorName,
      _height = _this$props3.height,
      showCircularity = _this$props3.showCircularity,
      hideSingleImport = _this$props3.hideSingleImport,
      _this$props3$minHeigh = _this$props3.minHeight,
      minHeight = _this$props3$minHeigh === void 0 ? 400 : _this$props3$minHeigh,
      showMenuBar = _this$props3.showMenuBar,
      annotationsToSupport = _this$props3.annotationsToSupport,
      _this$props3$withRota = _this$props3.withRotateCircularView,
      withRotateCircularView = _this$props3$withRota === void 0 ? true : _this$props3$withRota,
      _this$props3$withZoom = _this$props3.withZoomCircularView,
      withZoomCircularView = _this$props3$withZoom === void 0 ? true : _this$props3$withZoom,
      _this$props3$withZoom2 = _this$props3.withZoomLinearView,
      withZoomLinearView = _this$props3$withZoom2 === void 0 ? true : _this$props3$withZoom2,
      _this$props3$displayM = _this$props3.displayMenuBarAboveTools,
      displayMenuBarAboveTools = _this$props3$displayM === void 0 ? true : _this$props3$displayM,
      updateSequenceData = _this$props3.updateSequenceData,
      readOnly = _this$props3.readOnly,
      setPanelAsActive = _this$props3.setPanelAsActive,
      _this$props3$style = _this$props3.style,
      style = _this$props3$style === void 0 ? {} : _this$props3$style,
      maxAnnotationsToDisplay = _this$props3.maxAnnotationsToDisplay,
      togglePanelFullScreen = _this$props3.togglePanelFullScreen,
      collapseSplitScreen = _this$props3.collapseSplitScreen,
      expandTabToSplitScreen = _this$props3.expandTabToSplitScreen,
      closePanel = _this$props3.closePanel,
      onSave = _this$props3.onSave,
      hideStatusBar = _this$props3.hideStatusBar,
      caretPositionUpdate = _this$props3.caretPositionUpdate,
      getVersionList = _this$props3.getVersionList,
      getSequenceAtVersion = _this$props3.getSequenceAtVersion,
      selectionLayer = _this$props3.selectionLayer,
      VersionHistoryViewProps = _this$props3.VersionHistoryViewProps,
      _this$props3$sequence = _this$props3.sequenceData,
      sequenceData = _this$props3$sequence === void 0 ? {} : _this$props3$sequence,
      fullScreenOffsets = _this$props3.fullScreenOffsets,
      withPreviewMode = _this$props3.withPreviewMode,
      isFullscreen = _this$props3.isFullscreen,
      hoveredId = _this$props3.hoveredId,
      handleFullscreenClose = _this$props3.handleFullscreenClose,
      _this$props3$onlyShow = _this$props3.onlyShowLabelsThatDoNotFit,
      onlyShowLabelsThatDoNotFit = _this$props3$onlyShow === void 0 ? true : _this$props3$onlyShow,
      controlledPreviewModeFullscreen = _this$props3.previewModeFullscreen,
      previewModeButtonMenu = _this$props3.previewModeButtonMenu,
      _this$props3$allowPan = _this$props3.allowPanelTabDraggable,
      allowPanelTabDraggable = _this$props3$allowPan === void 0 ? true : _this$props3$allowPan;
    if (!this.props.noVersionHistory && this.props.versionHistory && this.props.versionHistory.viewVersionHistory) {
      return /*#__PURE__*/React.createElement(VersionHistoryView, _extends({
        onSave: onSave,
        //we need to pass this user defined handler
        updateSequenceData: updateSequenceData,
        caretPositionUpdate: caretPositionUpdate,
        editorName: editorName,
        sequenceData: sequenceData,
        getVersionList: getVersionList,
        getSequenceAtVersion: getSequenceAtVersion
      }, VersionHistoryViewProps));
    }
    var previewModeFullscreen = !!((controlledPreviewModeFullscreen === undefined ? uncontrolledPreviewModeFullscreen : controlledPreviewModeFullscreen) || isFullscreen);
    var editorNode = document.querySelector(".veEditor") || document.querySelector(".preview-mode-container");
    var height = Math.max(minHeight, editorNode && editorNode.parentNode && editorNode.parentNode.clientHeight || 0);
    if (_height) height = Math.max(minHeight, _height);
    var editorDimensions = {
      height: height,
      dimensions: {
        height: height
      }
    };
    try {
      //tnr: fixes https://github.com/TeselaGen/openVectorEditor/issues/689
      if (previewModeFullscreen) {
        window.document.body.classList.add("tg-no-scroll-body");
      } else {
        window.document.body.classList.remove("tg-no-scroll-body");
      }
    } catch (e) {
      console.warn("Error 3839458:", e);
    }
    if (withPreviewMode && !previewModeFullscreen) {
      this.inPreviewMode = true;
      return /*#__PURE__*/React.createElement("div", {
        style: _extends({}, style),
        className: "preview-mode-container"
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          position: "relative"
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "preview-mode-buttons"
      }, /*#__PURE__*/React.createElement(ButtonGroup, {
        className: "preview-mode-view-fullscreen"
      }, /*#__PURE__*/React.createElement(Button, {
        text: "Open Editor",
        intent: Intent.PRIMARY,
        onClick: this.togglePreviewFullscreen
      }), previewModeButtonMenu && /*#__PURE__*/React.createElement(Button, {
        icon: "caret-down",
        intent: Intent.PRIMARY,
        onClick: this.onPreviewModeButtonContextMenu
      }))), /*#__PURE__*/React.createElement("div", {
        style: {
          padding: 40
        },
        className: "preview-mode-simple-sequence-view"
      }, /*#__PURE__*/React.createElement(SimpleCircularOrLinearView, {
        sequenceData: sequenceData,
        hoveredId: hoveredId,
        tabHeight: tabHeight,
        selectionLayer: selectionLayer,
        editorName: editorName,
        height: null,
        isProtein: sequenceData.isProtein,
        annotationLabelVisibility: {
          features: false,
          parts: false,
          cutsites: false,
          primers: false
        }
      }))));
    } else {
      this.inPreviewMode = false;
    }
    var tabDraggable = allowPanelTabDraggable && !isMobile();
    var tabDragging = this.state.tabDragging;
    var xOffset = 0;
    var yOffset = 0;
    if (fullScreenOffsets && previewModeFullscreen) {
      xOffset = fullScreenOffsets.xOffset || 0;
      yOffset = fullScreenOffsets.yOffset || 0;
    }
    var w = window,
      d = document,
      e = d.documentElement,
      g = d.getElementsByTagName("body")[0],
      x = w.innerWidth || e.clientWidth || g.clientWidth,
      y = w.innerHeight || e.clientHeight || g.clientHeight;
    var windowDimensions = {
      width: x - xOffset,
      height: Math.max(y, minHeight) - yOffset
    };
    var reflexElementProps = {
      propagateDimensions: true,
      // resizeHeight: true,
      renderOnResizeRate: 50,
      renderOnResize: true,
      className: "ve-panel"
    };
    var panelsToShow = this.getPanelsToShow();
    this.hasFullscreenPanel = false;
    map(panelsToShow, function (panelGroup) {
      panelGroup.forEach(function (_ref) {
        var fullScreen = _ref.fullScreen;
        if (fullScreen) _this3.hasFullscreenPanel = true;
      });
    });
    var pickedUserDefinedHandlersAndOpts = pick(this.props, userDefinedHandlersAndOpts);
    var panels = flatMap(panelsToShow, function (panelGroup, index) {
      // let activePanelId
      var activePanelId;
      var activePanelType;
      var isFullScreen;
      var panelPropsToSpread = {};
      panelGroup.forEach(function (panelProps) {
        var type = panelProps.type,
          id = panelProps.id,
          active = panelProps.active,
          fullScreen = panelProps.fullScreen;
        if (fullScreen) isFullScreen = true;
        if (active) {
          activePanelType = type || id;
          activePanelId = id;
          panelPropsToSpread = panelProps;
        }
      });
      if (_this3.hasFullscreenPanel && !isFullScreen) {
        return;
      }
      if (isFullScreen) {
        editorDimensions = _extends({}, editorDimensions, windowDimensions, {
          dimensions: windowDimensions
        });
      }
      var panelMap = _extends({}, _panelMap, _this3.props.panelMap);
      var Panel = panelMap[activePanelType] && panelMap[activePanelType].comp || panelMap[activePanelType];
      var panelSpecificProps = panelMap[activePanelType] && panelMap[activePanelType].panelSpecificProps;
      var panelSpecificPropsToSpread = panelMap[activePanelType] && panelMap[activePanelType].panelSpecificPropsToSpread;
      var panel = Panel ? /*#__PURE__*/React.createElement(Panel, _extends({
        withZoomLinearView: withZoomLinearView,
        withRotateCircularView: withRotateCircularView,
        withZoomCircularView: withZoomCircularView
      }, pickedUserDefinedHandlersAndOpts, panelSpecificProps && pick(_this3.props, panelSpecificProps), panelSpecificPropsToSpread && panelSpecificPropsToSpread.reduce(function (acc, key) {
        acc = _extends({}, acc, get(_this3.props, key));
        return acc;
      }, {}), {
        circ_rotationRadians: _this3.state.rotationRadians,
        circ_setRotationRadians: function circ_setRotationRadians(val) {
          _this3.setState({
            rotationRadians: val
          });
        },
        circ_zoomLevel: _this3.state.zoomLevel,
        circ_setZoomLevel: function circ_setZoomLevel(val) {
          _this3.setState({
            zoomLevel: val
          });
        },
        maxAnnotationsToDisplay: maxAnnotationsToDisplay,
        key: activePanelId,
        fontHeightMultiplier: _this3.props.fontHeightMultiplier,
        rightClickOverrides: _this3.props.rightClickOverrides,
        clickOverrides: _this3.props.clickOverrides
      }, panelPropsToSpread, {
        editorName: editorName,
        isProtein: sequenceData.isProtein,
        onlyShowLabelsThatDoNotFit: onlyShowLabelsThatDoNotFit,
        tabHeight: tabHeight,
        nameFontSizeCircularView: _this3.props.nameFontSizeCircularView
      }, editorDimensions, {
        isInsideEditor: true //pass this prop to let the sub components know they're being rendered as an editor tab
      })) : /*#__PURE__*/React.createElement("div", null, " No Panel Found!");
      var showTabRightClickContextMenu = function showTabRightClickContextMenu(e, id) {
        var tabIdToUse = id || activePanelId;
        showContextMenu([{
          onClick: function onClick() {
            panelsToShow.length > 1 ? collapseSplitScreen(tabIdToUse) : expandTabToSplitScreen(tabIdToUse);
          },
          text: panelsToShow.length > 1 ? "Collapse Split Screen" : "View in Split Screen"
        }, {
          onClick: function onClick() {
            togglePanelFullScreen(tabIdToUse);
          },
          text: "View in Fullscreen"
        }], undefined, e);
        e.preventDefault();
        e.stopPropagation();
      };
      var toReturn = [];
      if (index > 0) {
        toReturn.push( /*#__PURE__*/React.createElement(ReflexSplitter, {
          key: activePanelId + "splitter",
          style: {
            // height: height + 38,
            zIndex: 1
          },
          propagate: true
        }));
      }
      toReturn.push( /*#__PURE__*/React.createElement(ReflexElement, _extends({
        key: activePanelId,
        activePanelId: activePanelId,
        minSize: "200"
      }, reflexElementProps), [/*#__PURE__*/React.createElement(Droppable //the tab holder
      , {
        key: "droppable-id-" + index.toString(),
        direction: "horizontal",
        droppableId: "droppable-id-" + index.toString()
      }, function (drop_provided, drop_snapshot) {
        return /*#__PURE__*/React.createElement("div", {
          className: classNames("ve-draggable-tabs", {
            "is-dragging-over": drop_snapshot.isDraggingOver
          }),
          "data-test": "ve-draggable-tabs" + index,
          ref: drop_provided.innerRef,
          style: {
            height: tabHeight,
            paddingLeft: 3
          }
        }, panelGroup.map(function (_ref2, index) {
          var id = _ref2.id,
            name = _ref2.name,
            canClose = _ref2.canClose;
          var nameToShow = name || id;
          if (isMobile()) {
            nameToShow = nameToShow.replace("Map", "");
          }
          return /*#__PURE__*/React.createElement(Draggable, {
            isDragDisabled: !tabDraggable,
            key: id,
            index: index,
            draggableId: id
          }, function (provided) {
            return /*#__PURE__*/React.createElement("div", {
              style: {
                wordWrap: "normal",
                flex: "0 0 auto",
                maxWidth: "100%",
                fontSize: "14px"
              },
              onClick: function onClick() {
                setPanelAsActive(id);
              }
            }, /*#__PURE__*/React.createElement("div", _extends({
              onContextMenu: function onContextMenu(e) {
                showTabRightClickContextMenu(e, id);
              },
              ref: provided.innerRef
            }, provided.draggableProps, provided.dragHandleProps, {
              style: _extends({
                // some basic styles to make the items look a bit nicer
                userSelect: "none",
                cursor: tabDraggable ? "move" : "pointer",
                flex: "0 0 auto"
              }, provided.draggableProps.style)
            }), /*#__PURE__*/React.createElement("div", {
              style: {
                padding: 3,
                borderBottom: id === activePanelId ? "2px solid #106ba3" : "none",
                color: id === activePanelId ? "#106ba3" : "undefined",
                marginLeft: 13,
                marginRight: 13
              },
              className: (id === activePanelId ? "veTabActive " : "") + camelCase("veTab-" + nameToShow)
            }, isFullScreen && /*#__PURE__*/React.createElement("div", {
              //we need this div to wrap the tooltip to help the tooltip stay in the correct position https://github.com/TeselaGen/openVectorEditor/issues/436
              style: {
                zIndex: 15002,
                position: "fixed",
                top: 15,
                right: 25
              }
            }, /*#__PURE__*/React.createElement(Tooltip, {
              position: "left",
              content: "Minimize Tab"
            }, /*#__PURE__*/React.createElement(Button, {
              minimal: true,
              icon: "minimize",
              onClick: function onClick(e) {
                e.stopPropagation();
                togglePanelFullScreen(activePanelId);
              }
            }))), nameToShow, canClose && /*#__PURE__*/React.createElement(Icon, {
              icon: "small-cross",
              onClick: function onClick() {
                closePanel(id);
              },
              style: {
                paddingLeft: 5
              },
              className: "ve-clickable"
            }))));
          });
        }), drop_provided.placeholder);
      })].concat(panelsToShow.length === 1 ? [/*#__PURE__*/React.createElement(Droppable //extra add tab box (only shown when there is 1 tab being shown)!
      , {
        key: "extra-drop-box",
        direction: "horizontal",
        droppableId: "droppable-id-" + (index + 1).toString()
      }, function (drop_provided, drop_snapshot) {
        return /*#__PURE__*/React.createElement("div", {
          ref: drop_provided.innerRef,
          style: getSplitScreenListStyle(drop_snapshot.isDraggingOver, tabDragging)
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            position: "absolute",
            left: "45%",
            top: "45%",
            fontSize: 26
          }
        }, " ", "+ Add Tab"), drop_provided.placeholder);
      })] : [], [isFullScreen ? /*#__PURE__*/React.createElement("div", {
        key: "veWhiteBackground",
        className: "veWhiteBackground",
        style: _extends({
          zIndex: 15000,
          position: "fixed",
          top: 0,
          left: 0
        }, windowDimensions)
      }, panel) : panel])));
      return toReturn;
    });
    if (extraRightSidePanel) {
      panels.push( /*#__PURE__*/React.createElement(ReflexSplitter, {
        key: "extraRightSidePanelSplitter",
        style: {
          zIndex: 1
        },
        propagate: true
      }));
      panels.push( /*#__PURE__*/React.createElement(ReflexElement, _extends({
        key: "extraRightSidePanel",
        minSize: "350",
        maxSize: "350"
      }, reflexElementProps), extraRightSidePanel));
    }
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropHandler, {
      key: "dropHandler",
      importSequenceFromFile: this.props.importSequenceFromFile,
      disabled: readOnly || hideSingleImport,
      style: _extends({
        width: "100%",
        maxWidth: "100%",
        // ...(fitHeight && {
        // height: "100%",
        //  }),
        position: "relative",
        // height: "100%",
        // ...(fitHeight && {
        height: height,
        minHeight: minHeight,
        display: "flex",
        flexDirection: "column"
      }, previewModeFullscreen && _extends({
        background: "white",
        zIndex: 15000,
        position: "fixed",
        // paddingTop: 20,
        top: yOffset || 0,
        left: xOffset || 0
      }, windowDimensions), style),
      className: "veEditor " + editorName + " " + (previewModeFullscreen ? "previewModeFullscreen" : "")
    }, /*#__PURE__*/React.createElement(ToolBar, _extends({}, pickedUserDefinedHandlersAndOpts, {
      openHotkeyDialog: this.openHotkeyDialog,
      key: "toolbar",
      showMenuBar: showMenuBar,
      displayMenuBarAboveTools: displayMenuBarAboveTools,
      handleFullscreenClose: handleFullscreenClose || this.togglePreviewFullscreen,
      isProtein: sequenceData.isProtein,
      userDefinedHandlersAndOpts: userDefinedHandlersAndOpts,
      annotationsToSupport: annotationsToSupport,
      closeFullscreen: !!(isFullscreen ? handleFullscreenClose : previewModeFullscreen),
      modifyTools: this.props.modifyTools,
      contentLeft: this.props.contentLeft,
      editorName: editorName,
      withDigestTool: true
    }, ToolBarProps)), /*#__PURE__*/React.createElement(CommandHotkeyHandler, _extends({
      menuSearchHotkey: this.props.menuSearchHotkey,
      hotkeyDialogProps: {
        isOpen: this.state.isHotkeyDialogOpen,
        onClose: this.closeHotkeyDialog
      }
    }, pickedUserDefinedHandlersAndOpts, {
      editorName: editorName
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        position: "relative",
        flexGrow: "1",
        minHeight: 0,
        display: "flex"
      },
      className: "tg-editor-container",
      id: "section-to-print"
    }, /*#__PURE__*/React.createElement(DragDropContext, {
      onDragStart: this.onTabDragStart,
      onDragEnd: this.onTabDragEnd
    }, /*#__PURE__*/React.createElement(ReflexContainer, {
      onPanelCollapse: function onPanelCollapse(_ref3) {
        var activePanelId = _ref3.activePanelId;
        _this3.props.collapsePanel(activePanelId);
      }
      /* style={{}} */,
      orientation: "vertical"
    }, panels))), !hideStatusBar && /*#__PURE__*/React.createElement(StatusBar, _extends({}, pickedUserDefinedHandlersAndOpts, {
      isProtein: sequenceData.isProtein,
      showCircularity: !!(showCircularity && !sequenceData.isProtein && !sequenceData.isOligo && !sequenceData.isRna),
      editorName: editorName
    }, StatusBarProps))), /*#__PURE__*/React.createElement(GlobalDialog, _extends({
      editorName: editorName
    }, pickedUserDefinedHandlersAndOpts, {
      dialogOverrides: pick(this.props, ["AddOrEditFeatureDialogOverride", "AddOrEditPartDialogOverride", "AddOrEditPrimerDialogOverride"])
    })));
  };
  return Editor;
}(React.Component);
Editor.childContextTypes = {
  blueprintPortalClassName: PropTypes.string
};
export default compose(connectToEditor(function (_ref4, _ref5) {
  var panelsShown = _ref4.panelsShown,
    annotationsToSupport = _ref4.annotationsToSupport,
    versionHistory = _ref4.versionHistory,
    _ref4$sequenceData = _ref4.sequenceData,
    sequenceData = _ref4$sequenceData === void 0 ? {} : _ref4$sequenceData,
    selectionLayer = _ref4.selectionLayer;
  var additionalEnzymes = _ref5.additionalEnzymes;
  return {
    additionalEnzymes: getAdditionalEnzymesSelector(null, additionalEnzymes),
    annotationsToSupport: annotationsToSupport,
    selectionLayer: selectionLayer,
    panelsShown: panelsShown,
    versionHistory: versionHistory,
    sequenceData: sequenceData
  };
}), withHandlers({
  handleSave: handleSave,
  importSequenceFromFile: importSequenceFromFile
}))(Editor);