ketcher-react 2.12.0-rc.1 → 2.12.0-rc.2

package/dist/index.modern.js

@@ -49,6 +49,7 @@ import useResizeObserver from 'use-resize-observer/polyfilled';
 import { useInView } from 'react-intersection-observer';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import { IconButton as IconButton$1, Collapse, ClickAwayListener, Button, Popover, createTheme, ThemeProvider } from '@mui/material';
+import { createSelector } from 'reselect';
 import * as KN from 'w3c-keyname';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
@@ -68,7 +69,6 @@ import { css } from '@emotion/react';
 import Accordion$1 from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
-import { createSelector } from 'reselect';
 import Tabs$1 from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import 'draft-js/dist/Draft.css';
@@ -2920,7 +2920,7 @@ var templates$1 = ["Benzene\n  Ketcher  5112215552D 1   1.00000     0.00000
 var templateLib = {
   'template-lib': {
     shortcut: 'Shift+t',
-    title: 'Custom Templates',
+    title: 'Structure Library',
     action: {
       dialog: 'templates',
       prop: {
@@ -3009,7 +3009,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.12.0-rc.1\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.12.0-rc.2\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -6711,7 +6711,7 @@ var getIconName = function getIconName(name) {
 
 var color = {
   white: '#FFFFFF',
-  primaryWhite: 'EFF2F5',
+  primaryWhite: '#EFF2F5',
   green: '#167782',
   lightGreen: '#188794',
   graphite: '#333333',
@@ -7281,14 +7281,14 @@ var BottomToolbar = function BottomToolbar(props) {
   return jsx("div", {
     className: clsx(classes$M.root, className),
     children: jsxs(Group$1, {
-      children: [jsx(ToolbarGroupItem, _objectSpread$16({
-        id: "template-lib"
-      }, rest)), jsx(TemplatesList, {
+      children: [jsx(TemplatesList, {
         active: active,
         indigoVerification: indigoVerification,
         disableableButtons: disableableButtons,
         onAction: onAction
-      })]
+      }), jsx(ToolbarGroupItem, _objectSpread$16({
+        id: "template-lib"
+      }, rest))]
     })
   });
 };
@@ -7938,7 +7938,9 @@ function setFunctionalGroupsTooltip(_ref) {
   if (closestCollapsibleStructures && event) {
     var _editor$struct;
     var sGroup = (_editor$struct = editor.struct()) === null || _editor$struct === void 0 ? void 0 : _editor$struct.sgroups.get(closestCollapsibleStructures.id);
-    if (sGroup && !sGroup.data.expanded && sGroup.hovering) {
+    var isSGroupPresent = sGroup === null || sGroup === void 0 ? void 0 : sGroup.hovering;
+    var isShowingTooltip = !(sGroup !== null && sGroup !== void 0 && sGroup.data.expanded) || SGroup$1.isDataSGroup(sGroup);
+    if (isSGroupPresent && isShowingTooltip) {
       var groupName = sGroup.data.name;
       var groupStruct = makeStruct(editor, sGroup);
       groupStruct.name = groupName;
@@ -8308,13 +8310,14 @@ function createStore (options, server, setEditor) {
   return createStore$1(rootReducer, initState, applyMiddleware.apply(void 0, middleware));
 }
 
+var disableableButtons$3 = [];
 var mapStateToProps$k = function mapStateToProps(state) {
   return {
     active: state.actionState && state.actionState.activeTool,
     status: state.actionState || {},
     opened: state.toolbar.opened,
     indigoVerification: state.requestsStatuses.indigoVerification,
-    disableableButtons: []
+    disableableButtons: disableableButtons$3
   };
 };
 var mapDispatchToProps$j = function mapDispatchToProps(dispatch) {
@@ -8683,12 +8686,12 @@ var LeftToolbar = function LeftToolbar(props) {
           options: [].concat(_toConsumableArray(bondCommon), _toConsumableArray(bondQuery), _toConsumableArray(bondSpecial), _toConsumableArray(bondStereo))
         }, {
           id: 'chain'
+        }, {
+          id: 'enhanced-stereo'
         }, {
           id: 'charge-plus'
         }, {
           id: 'charge-minus'
-        }, {
-          id: 'enhanced-stereo'
         }]
       }), jsx("div", {
         className: classes$K.listener,
@@ -8734,13 +8737,13 @@ var LeftToolbar = function LeftToolbar(props) {
   });
 };
 
-var disableableButtons = [];
+var disableableButtons$2 = [];
 var mapStateToProps$j = function mapStateToProps(state) {
   return {
     status: state.actionState || {},
     opened: state.toolbar.opened,
     indigoVerification: state.requestsStatuses.indigoVerification,
-    disableableButtons: disableableButtons
+    disableableButtons: disableableButtons$2
   };
 };
 var mapDispatchToProps$i = function mapDispatchToProps(dispatch) {
@@ -8876,42 +8879,47 @@ var RightToolbar = function RightToolbar(props) {
     ref: ref,
     children: [jsxs("div", {
       ref: scrollRef,
-      children: [jsxs(Group, {
-        className: clsx(classes$I.atomsList, classes$I.buttons, classes$I.groupItem),
-        children: [jsx(ToolbarGroupItem, _objectSpread$S({
-          id: "period-table"
-        }, rest)), jsx(AtomsList, {
-          ref: startRef,
-          atoms: basicAtoms.slice(0, 1),
-          active: active,
-          onAction: onAction
-        }), jsx(AtomsList, {
-          atoms: basicAtoms.slice(1, 5),
-          active: active,
-          onAction: onAction
-        }), jsx(HorizontalDivider, {}), jsx(AtomsList, {
-          atoms: basicAtoms.slice(5),
-          active: active,
-          onAction: onAction
-        }), jsx(AtomsList, {
-          atoms: freqAtoms,
-          active: active,
-          onAction: onAction
-        })]
-      }), jsx(Group, {
-        className: clsx(classes$I.buttons, classes$I.groupItem),
-        children: jsxs("div", {
-          ref: sizeRef,
-          children: [jsx("div", {
-            ref: endRef,
-            className: classes$I.button,
-            children: jsx(ToolbarGroupItem, _objectSpread$S({
-              id: "extended-table"
-            }, rest))
+      className: classes$I.buttons,
+      children: [jsx("div", {
+        ref: startRef,
+        children: jsxs(Group, {
+          className: clsx(classes$I.atomsList, classes$I.buttons, classes$I.groupItem),
+          children: [jsx(AtomsList, {
+            atoms: basicAtoms.slice(0, 1),
+            active: active,
+            onAction: onAction
+          }), jsx(AtomsList, {
+            atoms: basicAtoms.slice(1, 5),
+            active: active,
+            onAction: onAction
+          }), jsx(HorizontalDivider, {}), jsx(AtomsList, {
+            atoms: basicAtoms.slice(5),
+            active: active,
+            onAction: onAction
+          }), jsx(AtomsList, {
+            atoms: freqAtoms,
+            active: active,
+            onAction: onAction
           }), jsx(ToolbarGroupItem, _objectSpread$S({
-            id: "any-atom"
+            id: "period-table"
           }, rest))]
         })
+      }), jsx("div", {
+        ref: endRef,
+        children: jsx(Group, {
+          className: classes$I.groupItem,
+          children: jsxs("div", {
+            ref: sizeRef,
+            children: [jsx(ToolbarGroupItem, _objectSpread$S({
+              id: "any-atom"
+            }, rest)), jsx("div", {
+              className: classes$I.button,
+              children: jsx(ToolbarGroupItem, _objectSpread$S({
+                id: "extended-table"
+              }, rest))
+            })]
+          })
+        })
       })]
     }), height && (scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollHeight) > height && jsx(ArrowScroll, {
       startInView: startInView,
@@ -8922,6 +8930,7 @@ var RightToolbar = function RightToolbar(props) {
   });
 };
 
+var disableableButtons$1 = [];
 var mapStateToProps$i = function mapStateToProps(state) {
   return {
     active: state.actionState && state.actionState.activeTool,
@@ -8929,7 +8938,7 @@ var mapStateToProps$i = function mapStateToProps(state) {
     freqAtoms: state.toolbar.freqAtoms,
     opened: state.toolbar.opened,
     indigoVerification: state.requestsStatuses.indigoVerification,
-    disableableButtons: []
+    disableableButtons: disableableButtons$1
   };
 };
 var mapDispatchToProps$h = function mapDispatchToProps(dispatch) {
@@ -9421,7 +9430,7 @@ var ExternalFuncControls = function ExternalFuncControls(_ref) {
 
 var _templateObject$2;
 var collapseLimit = 650;
-var ControlsPanel = styled('div')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0px;\n  height: 36px;\n  padding: 0px 22px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 5px rgba(103, 104, 132, 0.15);\n\n  .group {\n    display: flex;\n    flex-direction: row;\n    gap: 0px;\n  }\n\n  & * {\n    box-sizing: border-box;\n  }\n\n  @media only screen and (min-width: 1024px) {\n    height: 40px;\n    gap: 0px;\n    padding-bottom: 10px;\n    .group {\n      gap: 4px;\n    }\n  }\n\n  @media only screen and (min-width: 1920px) {\n    height: 64px;\n    gap: 12px;\n  }\n"])));
+var ControlsPanel = styled('div')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0px;\n  height: 36px;\n  padding: 0px 22px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 5px rgba(103, 104, 132, 0.15);\n\n  .group {\n    display: flex;\n    flex-direction: row;\n    gap: 0px;\n  }\n\n  & * {\n    box-sizing: border-box;\n  }\n\n  @media only screen and (min-width: 1024px) {\n    height: 40px;\n    gap: 0px;\n    padding-bottom: 0;\n    .group {\n      gap: 4px;\n    }\n  }\n\n  @media only screen and (min-width: 1920px) {\n    height: 64px;\n    gap: 12px;\n  }\n"])));
 var TopToolbar = function TopToolbar(_ref) {
   var className = _ref.className,
     disabledButtons = _ref.disabledButtons,
@@ -9524,41 +9533,48 @@ var TopToolbar = function TopToolbar(_ref) {
   });
 };
 
-var shortcuts = Object.keys(config).reduce(function (acc, key) {
-  var _action$key;
-  if ((_action$key = config[key]) !== null && _action$key !== void 0 && _action$key.shortcut) {
-    var shortcut = config[key].shortcut;
-    var processedShortcut = shortcutStr(shortcut);
-    acc[key] = processedShortcut;
-  }
-  return acc;
-}, {});
-var mapStateToProps$h = function mapStateToProps(state) {
-  var _state$actionState, _state$actionState$zo;
-  var actionState = state.actionState || {};
-  var disabledButtons = Object.keys(actionState).reduce(function (acc, item) {
+var getActionState = function getActionState(state) {
+  return state.actionState || {};
+};
+var disabledButtonsSelector = createSelector([getActionState], function (actionState) {
+  return Object.keys(actionState).reduce(function (acc, item) {
     var _actionState$item;
     if ((_actionState$item = actionState[item]) !== null && _actionState$item !== void 0 && _actionState$item.disabled) {
       acc.push(item);
     }
     return acc;
   }, []);
-  var hiddenButtons = Object.keys(actionState).reduce(function (acc, item) {
+});
+var hiddenButtonsSelector = createSelector([getActionState], function (actionState) {
+  return Object.keys(actionState).reduce(function (acc, item) {
     var _actionState$item2;
     if ((_actionState$item2 = actionState[item]) !== null && _actionState$item2 !== void 0 && _actionState$item2.hidden) {
       acc.push(item);
     }
     return acc;
   }, []);
+});
+var disableableButtons = ['layout', 'clean', 'arom', 'dearom', 'cip', 'enhanced-stereo'];
+var shortcuts = Object.keys(config).reduce(function (acc, key) {
+  var _action$key;
+  if ((_action$key = config[key]) !== null && _action$key !== void 0 && _action$key.shortcut) {
+    var shortcut = config[key].shortcut;
+    var processedShortcut = shortcutStr(shortcut);
+    acc[key] = processedShortcut;
+  }
+  return acc;
+}, {});
+var mapStateToProps$h = function mapStateToProps(state) {
+  var _state$actionState, _state$actionState$zo;
   return {
     currentZoom: Math.round(((_state$actionState = state.actionState) === null || _state$actionState === void 0 ? void 0 : (_state$actionState$zo = _state$actionState.zoom) === null || _state$actionState$zo === void 0 ? void 0 : _state$actionState$zo.selected) * 100),
-    disabledButtons: disabledButtons,
-    hiddenButtons: hiddenButtons,
+    disabledButtons: disabledButtonsSelector(state),
+    hiddenButtons: hiddenButtonsSelector(state),
     shortcuts: shortcuts,
     status: state.actionState || {},
     opened: state.toolbar.opened,
     indigoVerification: state.requestsStatuses.indigoVerification,
-    disableableButtons: ['layout', 'clean', 'arom', 'dearom', 'cip', 'enhanced-stereo']
+    disableableButtons: disableableButtons
   };
 };
 var mapDispatchToProps$f = function mapDispatchToProps(dispatch) {
@@ -9828,16 +9844,16 @@ function isCloseToTheEdgeOfCanvas(selectedItems, editor, key) {
     var atom = restruct.atoms.get(atomId);
     var position = atom === null || atom === void 0 ? void 0 : atom.a.pp;
     if (position && theMostTopAtom) {
-      theMostTopAtom = position.y > theMostTopAtom.a.pp.y ? atom : theMostTopAtom;
+      theMostTopAtom = position.y < theMostTopAtom.a.pp.y ? atom : theMostTopAtom;
     }
     if (position && theMostBottomAtom) {
-      theMostBottomAtom = position.y < theMostBottomAtom.a.pp.y ? atom : theMostBottomAtom;
+      theMostBottomAtom = position.y > theMostBottomAtom.a.pp.y ? atom : theMostBottomAtom;
     }
     if (position && theMostRightAtom) {
-      theMostRightAtom = position.x > theMostRightAtom.a.pp.y ? atom : theMostRightAtom;
+      theMostRightAtom = position.x > theMostRightAtom.a.pp.x ? atom : theMostRightAtom;
     }
     if (position && theMostLeftAtom) {
-      theMostLeftAtom = position.x < theMostLeftAtom.a.pp.y ? atom : theMostLeftAtom;
+      theMostLeftAtom = position.x < theMostLeftAtom.a.pp.x ? atom : theMostLeftAtom;
     }
   });
   if (theMostTopAtom && theMostBottomAtom && theMostRightAtom && theMostLeftAtom) {
@@ -19148,13 +19164,12 @@ var RotateTool = function () {
         center = (_struct$atoms$get2 = struct.atoms.get(rotatePoint)) === null || _struct$atoms$get2 === void 0 ? void 0 : _struct$atoms$get2.pp;
       }
       if (!center && (visibleAtoms.length || texts !== null && texts !== void 0 && texts.length || rxnArrows !== null && rxnArrows !== void 0 && rxnArrows.length || rxnPluses !== null && rxnPluses !== void 0 && rxnPluses.length)) {
-        var selectionBoundingBox = editor.render.ctab.getVBoxObj({
+        center = editor.render.ctab.getSelectionRotationCenter({
           atoms: visibleAtoms,
           texts: texts,
           rxnArrows: rxnArrows,
           rxnPluses: rxnPluses
         });
-        center = selectionBoundingBox === null || selectionBoundingBox === void 0 ? void 0 : selectionBoundingBox.centre();
       }
       return [center, visibleAtoms];
     }
@@ -21104,9 +21119,10 @@ function resetSelectionOnCanvasClick(editor, eventName, clientArea, event) {
 function updateLastCursorPosition(editor, event) {
   var events = ['mousemove', 'click', 'mousedown', 'mouseup', 'mouseover'];
   if (events.includes(event.type)) {
+    var clientAreaBoundingBox = editor.render.clientArea.getBoundingClientRect();
     editor.lastCursorPosition = {
-      x: event.layerX,
-      y: event.layerY
+      x: event.pageX - clientAreaBoundingBox.x,
+      y: event.pageY - clientAreaBoundingBox.y
     };
   }
 }
@@ -24982,9 +24998,15 @@ var MiewDialog = function MiewDialog(_ref) {
     })
   });
 };
+var getOptionsSettings = function getOptionsSettings(state) {
+  return state.options.settings;
+};
+var miewOptionsSelector = createSelector([getOptionsSettings], function (settings) {
+  return createMiewOptions(pick(MIEW_OPTIONS, settings));
+});
 var mapStateToProps$a = function mapStateToProps(state) {
   return {
-    miewOpts: createMiewOptions(pick(MIEW_OPTIONS, state.options.settings)),
+    miewOpts: miewOptionsSelector(state),
     server: state.options.app.server ? state.server : null,
     struct: state.editor.struct(),
     miewTheme: state.options.settings.miewTheme
@@ -26267,11 +26289,17 @@ var SaveDialog = function (_Component) {
   return SaveDialog;
 }(Component);
 _defineProperty$1(SaveDialog, "contextType", errorsContext);
+var getOptions = function getOptions(state) {
+  return state.options;
+};
+var serverSettingsSelector = createSelector([getOptions], function (options) {
+  return options.getServerSettings();
+});
 var mapStateToProps$3 = function mapStateToProps(state) {
   return {
     server: state.options.app.server ? state.server : null,
     struct: state.editor.struct(),
-    options: state.options.getServerSettings(),
+    options: serverSettingsSelector(state),
     formState: state.modal.form,
     moleculeErrors: state.modal.form.moleculeErrors,
     checkState: state.options.check,
@@ -29266,8 +29294,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.12.0-rc.1" ,
-                    buildDate: "2023-06-28T12:14:56" ,
+                    version: "2.12.0-rc.2" ,
+                    buildDate: "2023-07-03T14:37:11" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });