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

package/dist/index.modern.js

@@ -26,7 +26,7 @@ import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import { KetSerializer, MolSerializer, Ketcher, FormatterFactory, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, Bond as Bond$2, Elements, AtomList, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, SimpleObjectMode, emitEventRequestIsFinished, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, SdfSerializer, Render, Struct, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, FunctionalGroup, fromAtomsAttrs, fracAngle, Vec2, fromBondAddition, Action, fromAtomAddition, fromSgroupDeletion, fromFragmentDeletion, fromOneBondDeletion, bondChangingAction, fromBondsAttrs, fromChain, getItemsToFuse, getHoverToFuse, fromItemsFuse, fromStereoFlagUpdate, Scale, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, fromSgroupAction, mergeMapOfItemsToSet, ReBond, setExpandSGroup, fromSimpleObjectResizing, fromArrowResizing, fromMultipleMove, fromTextDeletion, fromTextUpdating, isCloseToEdgeOfCanvas, isCloseToEdgeOfScreen, getDirections, shiftAndExtendCanvasByVector, scrollByVector, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromPaste, fromTemplateOnAtom, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromBondAlign, fromSimpleObjectAddition, fromTemplateOnBondAction, fromTemplateOnCanvas, fromTextCreation, formatProperties, Fragment as Fragment$1, OperationType, fromHighlightCreate, fromHighlightClear, fromNewCanvas, fromDescriptorsAlign, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
 import * as React from 'react';
-import React__default, { createRef, Component, useState, useEffect, useRef, useMemo, createElement, forwardRef, useCallback, useLayoutEffect, Fragment as Fragment$2, PureComponent } from 'react';
+import React__default, { createRef, Component, useState, useEffect, useRef, useMemo, createElement, forwardRef, useCallback, useLayoutEffect, Fragment as Fragment$2, PureComponent, lazy, Suspense } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _inherits from '@babel/runtime/helpers/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
@@ -61,7 +61,6 @@ import MenuItem from '@mui/material/MenuItem';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import { saveAs } from 'file-saver';
 import FontFaceObserver from 'font-face-observer';
-import Viewer from 'miew-react';
 import { useDropzone } from 'react-dropzone';
 import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
 import { css } from '@emotion/react';
@@ -1577,8 +1576,8 @@ var sgroup = {
         title: 'Polymer label',
         type: 'string',
         "default": 'n',
-        pattern: '^[a-zA-Z]$',
-        invalidMessage: 'SRU subscript should consist of a single letter'
+        pattern: '^(?!\\s*$)[^"]+$',
+        invalidMessage: 'SRU subscript should not be empty and contain double quotes'
       },
       connectivity: {
         title: 'Repeat Pattern',
@@ -3011,7 +3010,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.11.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.11.0-rc.2\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -7531,7 +7530,6 @@ var RenderStruct = function () {
           autoScale: true
         }, options));
         rnd.setMolecule(preparedStruct);
-        rnd.update(true, options.viewSz);
         if (needCache) {
           renderCache.set(cacheKey, rnd.clientArea.innerHTML);
         }
@@ -13544,7 +13542,7 @@ var RotateTool = function () {
   _createClass(RotateTool, [{
     key: "mousedown",
     value: function mousedown(event, handleCenter, center) {
-      var xy0 = center || this.getCenter(this.editor, event)[0];
+      var xy0 = center || this.getCenter(this.editor)[0] || this.editor.render.page2obj(event);
       this.dragCtx = {
         xy0: xy0,
         angle1: utils.calcAngle(xy0, handleCenter || this.editor.render.page2obj(event))
@@ -13553,56 +13551,51 @@ var RotateTool = function () {
     }
   }, {
     key: "getCenter",
-    value: function getCenter(editor, event) {
-      var _this$editor$selectio,
-        _this$editor$selectio2,
-        _this = this,
-        _struct$atoms;
-      var visibleAtoms = ((_this$editor$selectio = this.editor.selection()) === null || _this$editor$selectio === void 0 ? void 0 : (_this$editor$selectio2 = _this$editor$selectio.atoms) === null || _this$editor$selectio2 === void 0 ? void 0 : _this$editor$selectio2.filter(function (atomId) {
-        var struct = _this.editor.render.ctab.molecule;
+    value: function getCenter(editor) {
+      var _selection$atoms;
+      var selection = editor.selection();
+      var struct = editor.render.ctab.molecule;
+      var _ref = selection || {},
+        texts = _ref.texts,
+        rxnArrows = _ref.rxnArrows,
+        rxnPluses = _ref.rxnPluses;
+      var visibleAtoms = (selection === null || selection === void 0 ? void 0 : (_selection$atoms = selection.atoms) === null || _selection$atoms === void 0 ? void 0 : _selection$atoms.filter(function (atomId) {
         var atom = struct.atoms.get(atomId);
         return !FunctionalGroup.isAtomInContractedFunctionalGroup(atom, struct.sgroups, struct.functionalGroups, false) || FunctionalGroup.isAttachmentPointAtom(atomId, struct);
       })) || [];
-      var xy0 = new Vec2();
-      var struct = editor.render.ctab.molecule;
-      if (visibleAtoms.length > 0) {
-        var rotId = null;
-        var rotAll = false;
-        visibleAtoms.forEach(function (aid) {
-          var atom = struct.atoms.get(aid);
-          if (rotAll) return;
-          atom === null || atom === void 0 ? void 0 : atom.neighbors.find(function (nei) {
-            var hb = struct.halfBonds.get(nei);
-            if (hb) {
-              var _editor$selection2, _editor$selection2$at;
-              if (((_editor$selection2 = editor.selection()) === null || _editor$selection2 === void 0 ? void 0 : (_editor$selection2$at = _editor$selection2.atoms) === null || _editor$selection2$at === void 0 ? void 0 : _editor$selection2$at.indexOf(hb.end)) === -1) {
-                if (rotId == null) {
-                  rotId = aid;
-                } else if (rotId !== aid) {
-                  rotAll = true;
-                  return true;
-                }
+      var xy0;
+      var attachAtomId = null;
+      var isMoreThanOneAttachAtom = false;
+      visibleAtoms.forEach(function (aid) {
+        var atom = struct.atoms.get(aid);
+        if (isMoreThanOneAttachAtom) return;
+        atom === null || atom === void 0 ? void 0 : atom.neighbors.find(function (nei) {
+          var hb = struct.halfBonds.get(nei);
+          if (hb) {
+            var _editor$selection2, _editor$selection2$at;
+            if (((_editor$selection2 = editor.selection()) === null || _editor$selection2 === void 0 ? void 0 : (_editor$selection2$at = _editor$selection2.atoms) === null || _editor$selection2$at === void 0 ? void 0 : _editor$selection2$at.indexOf(hb.end)) === -1) {
+              if (attachAtomId === null) {
+                attachAtomId = aid;
+              } else if (attachAtomId !== aid) {
+                isMoreThanOneAttachAtom = true;
+                return true;
               }
             }
-            return false;
-          });
+          }
+          return false;
         });
-        if (!rotAll && rotId !== null) {
-          var _struct$atoms$get;
-          xy0 = (_struct$atoms$get = struct.atoms.get(rotId)) === null || _struct$atoms$get === void 0 ? void 0 : _struct$atoms$get.pp;
-        } else {
-          var selectionBoundingBox = editor.render.ctab.getVBoxObj({
-            atoms: visibleAtoms
-          });
-          xy0 = selectionBoundingBox.centre();
-        }
-      } else if ((_struct$atoms = struct.atoms) !== null && _struct$atoms !== void 0 && _struct$atoms.size) {
-        struct.atoms.forEach(function (atom) {
-          xy0.add_(atom.pp);
+      });
+      if (!isMoreThanOneAttachAtom && attachAtomId !== null) {
+        var _struct$atoms$get;
+        xy0 = (_struct$atoms$get = struct.atoms.get(attachAtomId)) === null || _struct$atoms$get === void 0 ? void 0 : _struct$atoms$get.pp;
+      } else if (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({
+          atoms: visibleAtoms,
+          texts: texts,
+          rxnArrows: rxnArrows,
+          rxnPluses: rxnPluses
         });
-        xy0 = xy0.scaled(1 / struct.atoms.size);
-      } else if (event) {
-        xy0 = editor.render.page2obj(event);
+        xy0 = selectionBoundingBox === null || selectionBoundingBox === void 0 ? void 0 : selectionBoundingBox.centre();
       }
       return [xy0, visibleAtoms];
     }
@@ -13883,7 +13876,7 @@ var TemplateTool = function () {
               case 6:
                 this.editor.hover(null);
                 this.dragCtx = {
-                  xy0: this.editor.render.page2obj(this.event),
+                  xy0: this.editor.render.page2obj(event),
                   item: this.editor.findItem(this.event, this.findItems)
                 };
                 dragCtx = this.dragCtx;
@@ -15965,12 +15958,7 @@ var RotateController = function () {
     value: function rerender() {
       this.clean();
       this.init();
-      var _this$rotateTool$getC = this.rotateTool.getCenter(this.editor),
-        _this$rotateTool$getC2 = _slicedToArray(_this$rotateTool$getC, 2),
-        originalCenter = _this$rotateTool$getC2[0],
-        visibleAtoms = _this$rotateTool$getC2[1];
-      this.originalCenter = originalCenter;
-      this.show(visibleAtoms);
+      this.show();
     }
   }, {
     key: "clean",
@@ -16019,13 +16007,23 @@ var RotateController = function () {
     }
   }, {
     key: "show",
-    value: function show(visibleAtoms) {
+    value: function show() {
       var _this$handle6, _this$handle7, _this$handle8, _this$handle9, _this$cross3;
-      var enable = visibleAtoms.length > 1 && this.editor.tool() instanceof SelectTool;
+      var _this$rotateTool$getC = this.rotateTool.getCenter(this.editor),
+        _this$rotateTool$getC2 = _slicedToArray(_this$rotateTool$getC, 2),
+        originalCenter = _this$rotateTool$getC2[0],
+        visibleAtoms = _this$rotateTool$getC2[1];
+      var _ref = this.editor.selection() || {},
+        texts = _ref.texts,
+        rxnArrows = _ref.rxnArrows,
+        rxnPluses = _ref.rxnPluses;
+      var isMoreThanOneItemBeingSelected = visibleAtoms.concat(texts || [], rxnArrows || [], rxnPluses || []).length > 1;
+      var enable = (isMoreThanOneItemBeingSelected || (rxnArrows === null || rxnArrows === void 0 ? void 0 : rxnArrows.length)) && this.editor.tool() instanceof SelectTool && originalCenter;
       if (!enable) {
         return;
       }
-      var rectStartY = this.drawBoundingRect(visibleAtoms);
+      this.originalCenter = originalCenter;
+      var rectStartY = this.drawBoundingRect(visibleAtoms, texts, rxnArrows, rxnPluses);
       this.handleCenter = new Vec2(this.center.x, rectStartY - STYLE.HANDLE_MARGIN - STYLE.HANDLE_RADIUS);
       this.drawLink();
       this.drawCross();
@@ -16092,11 +16090,14 @@ var RotateController = function () {
     }
   }, {
     key: "drawBoundingRect",
-    value: function drawBoundingRect(visibleAtoms) {
+    value: function drawBoundingRect(visibleAtoms, texts, rxnArrows, rxnPluses) {
       var RECT_RADIUS = 20;
       var RECT_PADDING = 10;
       var rectBox = this.render.ctab.getVBoxObj({
         atoms: visibleAtoms,
+        texts: texts,
+        rxnArrows: rxnArrows,
+        rxnPluses: rxnPluses,
         sgroups: getGroupIdsFromItemArrays(this.render.ctab.molecule, {
           atoms: visibleAtoms
         })
@@ -17373,6 +17374,7 @@ var useFunctionalGroupEoc = function useFunctionalGroupEoc() {
       }));
     });
     editor.update(action);
+    editor.rotateController.rerender();
     highlightFG(dispatch, {
       group: null,
       id: null
@@ -17930,11 +17932,10 @@ function _objectSpread$C(target) { for (var i = 1; i < arguments.length; i++) {
 var HOVER_PANEL_PADDING = 20;
 function getSGroupFirstAtom(sGroup, render) {
   var _render$ctab$atoms, _render$ctab$atoms$ge;
-  var firstSgroupAtom = sGroup.firstSgroupAtom;
+  var firstSgroupAtom = sGroup.firstSgroupAtom,
+    firstSgroupAtomId = sGroup.firstSgroupAtomId;
   if (firstSgroupAtom) return firstSgroupAtom.pp;
-  var _sGroup$atoms = _slicedToArray(sGroup.atoms, 1),
-    firstAtomId = _sGroup$atoms[0];
-  return ((_render$ctab$atoms = render.ctab.atoms) === null || _render$ctab$atoms === void 0 ? void 0 : (_render$ctab$atoms$ge = _render$ctab$atoms.get(firstAtomId)) === null || _render$ctab$atoms$ge === void 0 ? void 0 : _render$ctab$atoms$ge.a.pp) || new Vec2(0, 0);
+  return ((_render$ctab$atoms = render.ctab.atoms) === null || _render$ctab$atoms === void 0 ? void 0 : (_render$ctab$atoms$ge = _render$ctab$atoms.get(firstSgroupAtomId)) === null || _render$ctab$atoms$ge === void 0 ? void 0 : _render$ctab$atoms$ge.a.pp) || new Vec2(0, 0);
 }
 function getPanelPosition(clientX, clientY, render, sGroup) {
   var width = 0;
@@ -20486,9 +20487,12 @@ var mapDispatchToProps$8 = function mapDispatchToProps(dispatch) {
 };
 var Recognize = connect(mapStateToProps$b, mapDispatchToProps$8)(RecognizeDialog);
 
-var classes$t = {"button-common-styles":"Miew-module_button-common-styles__8FE-p","scrollbar":"Miew-module_scrollbar__ZMWH-","warning":"Miew-module_warning__IDl5F","applyButton":"Miew-module_applyButton__ZDE-i","miewDialog":"Miew-module_miewDialog__gHvYc","miewContainer":"Miew-module_miewContainer__2SNw3","miewDarkTheme":"Miew-module_miewDarkTheme__kMFzc"};
+var classes$t = {"button-common-styles":"Miew-module_button-common-styles__8FE-p","scrollbar":"Miew-module_scrollbar__ZMWH-","warning":"Miew-module_warning__IDl5F","applyButton":"Miew-module_applyButton__ZDE-i","miewDialog":"Miew-module_miewDialog__gHvYc","miewContainer":"Miew-module_miewContainer__2SNw3","loadingContainer":"Miew-module_loadingContainer__cVF-M","miewDarkTheme":"Miew-module_miewDarkTheme__kMFzc"};
 
 var _excluded$g = ["miewOpts", "server", "struct", "onExportCML", "miewTheme"];
+var Viewer = lazy(function () {
+  return import('miew-react');
+});
 var BACKGROUND_COLOR = {
   dark: '0x202020',
   light: '0xcccccc'
@@ -20557,6 +20561,10 @@ var MiewDialog = function MiewDialog(_ref) {
     miewTheme = _ref$miewTheme === void 0 ? 'light' : _ref$miewTheme,
     prop = _objectWithoutProperties(_ref, _excluded$g);
   var miewRef = useRef();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInitialized = _useState2[0],
+    setIsIsInitialized = _useState2[1];
   var onMiewInit = useCallback(function (miew) {
     miewRef.current = miew;
     var factory = new FormatterFactory(server);
@@ -20567,7 +20575,8 @@ var MiewDialog = function MiewDialog(_ref) {
         fileType: 'cml'
       });
     }).then(function () {
-      return miew.setOptions(miewOpts);
+      miew.setOptions(miewOpts);
+      setIsIsInitialized(true);
     })["catch"](function (ex) {
       return (void 0);
     });
@@ -20587,6 +20596,7 @@ var MiewDialog = function MiewDialog(_ref) {
     buttons: ['Cancel', jsx("button", {
       onClick: exportCML,
       className: classes$t.applyButton,
+      disabled: !isInitialized,
       children: "Apply"
     }, "apply")],
     footerContent: jsx(FooterContent$2, {}),
@@ -20594,8 +20604,14 @@ var MiewDialog = function MiewDialog(_ref) {
     children: jsx("div", {
       children: jsx("div", {
         className: "".concat(classes$t.miewContainer, " ").concat(miewTheme === 'dark' ? classes$t.miewDarkTheme : ''),
-        children: jsx(Viewer, {
-          onInit: onMiewInit
+        children: jsx(Suspense, {
+          fallback: jsx("div", {
+            className: classes$t.loadingContainer,
+            children: jsx(LoadingCircles, {})
+          }),
+          children: jsx(Viewer, {
+            onInit: onMiewInit
+          })
         })
       })
     })
@@ -24590,8 +24606,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.11.0-rc.1" ,
-                    buildDate: "2023-05-23T14:46:26" ,
+                    version: "2.11.0-rc.2" ,
+                    buildDate: "2023-05-30T13:30:11" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });