ketcher-react 2.18.0-rc.4 → 2.18.0-rc.6

package/dist/index.modern.js

@@ -40,7 +40,7 @@ import styled from '@emotion/styled';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import * as KN from 'w3c-keyname';
 import _slicedToArray$1 from '@babel/runtime/helpers/slicedToArray';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore as createStore$1, applyMiddleware } from 'redux';
 import _, { throttle as throttle$1, intersection, difference, debounce as debounce$1, cloneDeep, isEqual as isEqual$1, capitalize as capitalize$1, range as range$2, isEmpty as isEmpty$1, uniqBy } from 'lodash';
@@ -3595,7 +3595,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.18.0-rc.4\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.18.0-rc.6\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -9014,9 +9014,11 @@ function throughFileReader(file) {
           cfb.FullPaths.forEach(function (path) {
             if (path.endsWith('.bin')) {
               var ole = CFB.find(cfb, path);
-              var sdf = CFB.find(CFB.parse(ole.content), 'CONTENTS');
-              var base64String = arrayBufferToBase64(sdf.content);
-              structures.push(base64String);
+              var sdf = CFB.find(CFB.parse(ole === null || ole === void 0 ? void 0 : ole.content), 'CONTENTS');
+              var base64String = arrayBufferToBase64(sdf === null || sdf === void 0 ? void 0 : sdf.content);
+              if (base64String.startsWith('VmpDRDAxMDAEAw')) {
+                structures.push(base64String);
+              }
             }
           });
           content = {
@@ -24524,14 +24526,32 @@ var props = {
 var ContextMenu = function ContextMenu() {
   var _useAppContext = useAppContext(),
     getKetcherInstance = _useAppContext.getKetcherInstance;
+  var resetMenuPosition = function resetMenuPosition() {
+    var contextMenuElement = document.querySelector('.contexify:last-of-type');
+    var ketcherRootElement = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
+    if (!contextMenuElement || !ketcherRootElement) {
+      return;
+    }
+    var contextMenuElementBoundingBox = contextMenuElement.getBoundingClientRect();
+    var ketcherRootElementBoundingBox = ketcherRootElement.getBoundingClientRect();
+    if (!contextMenuElementBoundingBox || !ketcherRootElementBoundingBox) {
+      return;
+    }
+    var left = contextMenuElementBoundingBox.right > ketcherRootElementBoundingBox.right ? contextMenuElementBoundingBox.x - (contextMenuElementBoundingBox.right - ketcherRootElementBoundingBox.right) : contextMenuElementBoundingBox.x;
+    var top = contextMenuElementBoundingBox.bottom > ketcherRootElementBoundingBox.bottom ? contextMenuElementBoundingBox.y - (contextMenuElementBoundingBox.bottom - ketcherRootElementBoundingBox.bottom) : contextMenuElementBoundingBox.y;
+    contextMenuElement.style.left = "".concat(left, "px");
+    contextMenuElement.style.top = "".concat(top, "px");
+  };
   var trackVisibility = useCallback(function (id, visible) {
     var editor = getKetcherInstance().editor;
     if (visible) {
       editor.hoverIcon.hide();
+      resetMenuPosition();
     }
     editor.contextMenu[id] = visible;
   }, [getKetcherInstance]);
-  return jsxs(Fragment, {
+  var ketcherEditorRootElement = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
+  return ketcherEditorRootElement ? createPortal(jsxs(Fragment, {
     children: [jsx(Menu, _objectSpread$H(_objectSpread$H({}, props), {}, {
       id: CONTEXT_MENU_ID.FOR_BONDS,
       onVisibilityChange: function onVisibilityChange(visible) {
@@ -24563,7 +24583,7 @@ var ContextMenu = function ContextMenu() {
       },
       children: jsx(RGroupAttachmentPointMenuItems, {})
     }))]
-  });
+  }), ketcherEditorRootElement) : null;
 };
 
 var getIsItemInSelection = function getIsItemInSelection(_ref) {
@@ -28590,7 +28610,7 @@ var mapStateToProps$6 = function mapStateToProps(state) {
 };
 var RgroupLogicContainer = connect(mapStateToProps$6)(RgroupLogic);
 
-var classes$n = {"button-common-styles":"Open-module_button-common-styles__NBSQP","scrollbar":"Open-module_scrollbar__sRvYM","open":"Open-module_open__m8V9g","textareaEditor":"Open-module_textareaEditor__ZbEVj","footerContent":"Open-module_footerContent__Q0hTw","buttonsContainer":"Open-module_buttonsContainer__L1HqU","openButton":"Open-module_openButton__cj3oU","cancelButton":"Open-module_cancelButton__0TQzA","copyButton":"Open-module_copyButton__KlXKd"};
+var classes$n = {"button-common-styles":"Open-module_button-common-styles__NBSQP","scrollbar":"Open-module_scrollbar__sRvYM","open":"Open-module_open__m8V9g","textareaEditor":"Open-module_textareaEditor__ZbEVj","footerContent":"Open-module_footerContent__Q0hTw","buttonsContainer":"Open-module_buttonsContainer__L1HqU","openButton":"Open-module_openButton__cj3oU","cancelButton":"Open-module_cancelButton__0TQzA","copyButton":"Open-module_copyButton__KlXKd","loadingContainer":"Open-module_loadingContainer__Y354t"};
 
 var styles$b = {"analyzingFileWrapper":"AnalyzingFile-module_analyzingFileWrapper__j0Ltf","fileBox":"AnalyzingFile-module_fileBox__ywFIh"};
 
@@ -28776,37 +28796,40 @@ var CDXStructuresViewer = function CDXStructuresViewer(_ref) {
       inputHandler(itemsMap[selectedIndex].base64struct);
     }
   }, [inputHandler, itemsMap, selectedIndex]);
-  var getImages = useCallback(function () {
-    var itemsList = {};
+  var getImage = function getImage(str, index) {
     setLoading(true);
-    var promises = structList.map(function (str) {
-      return parseStruct(str, server).then(function (struct) {
-        return {
-          base64struct: str,
-          struct: struct
-        };
-      })["catch"](function (error) {
-        return {
-          base64struct: str,
-          error: error.message || error
-        };
+    parseStruct(str, server).then(function (struct) {
+      var object = {
+        base64struct: str,
+        struct: struct
+      };
+      setItemsMap(function (state) {
+        return _objectSpread$p(_objectSpread$p({}, state), {}, _defineProperty$1({}, index, object));
       });
-    });
-    Promise.allSettled(promises).then(function (values) {
-      values.forEach(function (el, index) {
-        if (el.status === 'fulfilled') {
-          itemsList[index] = el.value;
-        }
+    })["catch"](function (error) {
+      var object = {
+        base64struct: str,
+        error: error.message || error
+      };
+      setItemsMap(function (state) {
+        return _objectSpread$p(_objectSpread$p({}, state), {}, _defineProperty$1({}, index, object));
       });
-      setItemsMap(itemsList);
+    })["finally"](function () {
       setLoading(false);
-      setSelectedIndex(0);
     });
-  }, [server, structList]);
+  };
   useEffect(function () {
-    getImages();
-  }, [getImages]);
+    if (structList[selectedIndex] && !itemsMap[selectedIndex]) {
+      getImage(structList[selectedIndex], selectedIndex);
+    }
+  }, [itemsMap, selectedIndex]);
   var renderStructure = function renderStructure(structure) {
+    if (loading) {
+      return jsx("div", {
+        className: styles$8.centerWrapper,
+        children: jsx(LoadingCircles, {})
+      });
+    }
     if (structure !== null && structure !== void 0 && structure.error) {
       var _itemsMap$selectedInd;
       return jsxs("div", {
@@ -28834,7 +28857,6 @@ var CDXStructuresViewer = function CDXStructuresViewer(_ref) {
         })
       });
     }
-    var menuList = Object.values(itemsMap) || [];
     return jsxs("div", {
       className: styles$8.structuresWrapper,
       children: [jsxs("div", {
@@ -28843,16 +28865,17 @@ var CDXStructuresViewer = function CDXStructuresViewer(_ref) {
           className: styles$8.header,
           children: "Select structure"
         }), jsx(MenuList, {
-          children: menuList.map(function (value, index) {
+          children: structList.map(function (value, index) {
+            var _itemsMap$index;
             return jsxs(MenuItem, {
               selected: index === selectedIndex,
               onClick: function onClick() {
                 return setSelectedIndex(index);
               },
-              children: ["Structure ".concat(index + 1), value.error && jsx(Icon, {
+              children: ["Structure ".concat(index + 1), ((_itemsMap$index = itemsMap[index]) === null || _itemsMap$index === void 0 ? void 0 : _itemsMap$index.error) && jsx(Icon, {
                 name: "error"
               })]
-            }, value.base64struct + index);
+            }, value + index);
           })
         })]
       }), jsx("div", {
@@ -28868,10 +28891,7 @@ var CDXStructuresViewer = function CDXStructuresViewer(_ref) {
         className: styles$8.fileName,
         children: fileName
       })]
-    }), loading ? jsx("div", {
-      className: styles$8.centerWrapper,
-      children: jsx(LoadingCircles, {})
-    }) : renderStructures()]
+    }), renderStructures()]
   });
 };
 
@@ -28961,6 +28981,10 @@ var Open = function Open(props) {
     _useState10 = _slicedToArray$1(_useState9, 2),
     currentState = _useState10[0],
     setCurrentState = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray$1(_useState11, 2),
+    isLoading = _useState12[0],
+    setIsLoading = _useState12[1];
   useEffect(function () {
     if (server) {
       fileOpener(server).then(function (chosenOpener) {
@@ -28971,6 +28995,7 @@ var Open = function Open(props) {
     }
   }, [server]);
   var onFileLoad = function onFileLoad(files) {
+    setIsLoading(true);
     var onLoad = function onLoad(fileContent) {
       if (fileContent.isPPTX) {
         setStructStr('');
@@ -28980,9 +29005,11 @@ var Open = function Open(props) {
         setStructStr(fileContent);
         setCurrentState(MODAL_STATES.textEditor);
       }
+      setIsLoading(false);
     };
     var onError = function onError() {
-      return errorHandler('Error processing file');
+      setIsLoading(false);
+      errorHandler('Error processing file');
     };
     setFileName(files[0].name);
     opener.chosenOpener(files[0]).then(onLoad, onError);
@@ -29010,7 +29037,7 @@ var Open = function Open(props) {
   if (currentState === MODAL_STATES.imageRec) {
     return jsx(Recognize, _objectSpread$n({}, rest));
   }
-  return jsx(Dialog, {
+  return jsxs(Dialog, {
     title: "Open structure",
     className: classes$n.open,
     params: rest,
@@ -29026,7 +29053,7 @@ var Open = function Open(props) {
     }) : undefined,
     buttons: [],
     withDivider: true,
-    children: jsx(ViewSwitcher, {
+    children: [jsx(ViewSwitcher, {
       isAnalyzingFile: isAnalyzingFile,
       fileName: fileName,
       currentState: currentState,
@@ -29042,7 +29069,10 @@ var Open = function Open(props) {
       inputHandler: setStructStr,
       autoFocus: true,
       structList: structList
-    })
+    }), isLoading && jsx("div", {
+      className: classes$n.loadingContainer,
+      children: jsx(LoadingCircles, {})
+    })]
   });
 };
 
@@ -32417,8 +32447,7 @@ var AbbreviationLookup = function AbbreviationLookup(_ref) {
     loweredLookupValue = _useState6[0],
     setLoweredLookupValue = _useState6[1];
   useLayoutEffect(function () {
-    var _inputRef$current, _autocompleteRef$curr, _autocompleteRef$curr2, _autocompleteRef$curr3, _autocompleteRef$curr4;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    var _autocompleteRef$curr, _autocompleteRef$curr2, _autocompleteRef$curr3, _autocompleteRef$curr4, _inputRef$current;
     var containerHeight = (_autocompleteRef$curr = (_autocompleteRef$curr2 = autocompleteRef.current) === null || _autocompleteRef$curr2 === void 0 ? void 0 : _autocompleteRef$curr2.offsetHeight) !== null && _autocompleteRef$curr !== void 0 ? _autocompleteRef$curr : 0;
     var containerWidth = (_autocompleteRef$curr3 = (_autocompleteRef$curr4 = autocompleteRef.current) === null || _autocompleteRef$curr4 === void 0 ? void 0 : _autocompleteRef$curr4.offsetWidth) !== null && _autocompleteRef$curr3 !== void 0 ? _autocompleteRef$curr3 : 0;
     var parentNode = document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR);
@@ -32434,6 +32463,7 @@ var AbbreviationLookup = function AbbreviationLookup(_ref) {
       left: "".concat(left, "px"),
       top: "".concat(top, "px")
     });
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     return function () {
       var _inputRef$current2;
       (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || (_inputRef$current2 = _inputRef$current2.closest(KETCHER_ROOT_NODE_CSS_SELECTOR)) === null || _inputRef$current2 === void 0 || _inputRef$current2.getElementsByClassName(CLIP_AREA_BASE_CLASS)[0].focus();
@@ -32748,8 +32778,8 @@ var KetcherBuilder = function () {
                 initApp(element, appRoot, staticResourcesUrl, {
                   buttons: buttons || {},
                   errorHandler: errorHandler || null,
-                  version: "2.18.0-rc.4" ,
-                  buildDate: "2024-02-06T12:50:19" ,
+                  version: "2.18.0-rc.6" ,
+                  buildDate: "2024-02-13T18:53:18" ,
                   buildNumber: ''
                 }, structService, resolve, togglerComponent);
               });