ketcher-react 2.26.0-rc.1 → 2.26.0-rc.3

package/dist/index.modern.js

@@ -3733,7 +3733,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.26.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.26.0-rc.3\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -8040,7 +8040,7 @@ var style$1 = {
   text: text
 };
 
-var _templateObject$d, _templateObject2$9, _templateObject3$7;
+var _templateObject$c, _templateObject2$8, _templateObject3$6;
 var StyledButton$1 = styled('button', {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'isActive';
@@ -8073,9 +8073,9 @@ var StyledButton$1 = styled('button', {
     }
   };
 });
-var IconStyles = css(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n"])));
-var StyledIcon = styled(Icon)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  ", ";\n"])), IconStyles);
-var StyledCustomIcon = styled('img')(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  ", ";\n"])), IconStyles);
+var IconStyles = css(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n"])));
+var StyledIcon = styled(Icon)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  ", ";\n"])), IconStyles);
+var StyledCustomIcon = styled('img')(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  ", ";\n"])), IconStyles);
 
 var IconButtonBase = function IconButtonBase(_ref) {
   var onClick = _ref.onClick,
@@ -8165,8 +8165,8 @@ var Button = function Button(_ref) {
   }));
 };
 
-var _templateObject$c;
-var Container$2 = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+var _templateObject$b;
+var Container$2 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
   if (props.fullsize) {
     return "\n          > svg {\n            height: 100%;\n            width: 100%;\n          }\n        ";
   } else {
@@ -8423,10 +8423,10 @@ var Dialog = function Dialog(props) {
   }));
 };
 
-var _templateObject$b, _templateObject2$8, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$2;
-var Container = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: 16px;\n  padding: 8px;\n  background: #ffffff;\n  border: 1px solid #cad3dd;\n  border-radius: 4px;\n  box-shadow: 0px 1px 1px rgba(197, 203, 207, 0.7);\n"])));
-var Header$1 = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  font-weight: 600;\n"])));
-var Content = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var _templateObject$a, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$2;
+var Container = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: 16px;\n  padding: 8px;\n  background: #ffffff;\n  border: 1px solid #cad3dd;\n  border-radius: 4px;\n  box-shadow: 0px 1px 1px rgba(197, 203, 207, 0.7);\n"])));
+var Header$1 = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  font-weight: 600;\n"])));
+var Content = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
 var ContentLine = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n"])));
 var RatioBar = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 36px;\n  border-right: 0.5px solid #b4b9d6;\n  background: ", ";\n"])), function (_ref) {
   var ratio = _ref.ratio;
@@ -8434,20 +8434,12 @@ var RatioBar = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTem
 });
 var MonomerName = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
 
-var _templateObject$a, _templateObject2$7, _templateObject3$5;
-var UnstyledAmbiguousMonomerPreview = function UnstyledAmbiguousMonomerPreview(_ref) {
+var AmbiguousMonomerPreview = function AmbiguousMonomerPreview(_ref) {
   var className = _ref.className,
     preview = _ref.preview;
   var monomer = preview.monomer,
-    presetMonomers = preview.presetMonomers,
-    style = preview.style;
+    presetMonomers = preview.presetMonomers;
   var isAlternatives = monomer.subtype === 'alternatives';
-  var ContainerDynamic = useMemo(function () {
-    if (!style) {
-      return styled(Container)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral([""])));
-    }
-    return styled(Container)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n      top: ", ";\n      left: ", ";\n      right: ", ";\n      transform: ", ";\n    "])), (style === null || style === void 0 ? void 0 : style.top) || '', (style === null || style === void 0 ? void 0 : style.left) || '', (style === null || style === void 0 ? void 0 : style.right) || '', style.transform || '');
-  }, [style]);
   var header = isAlternatives ? 'Alternatives' : 'Mixed';
   var aminoAcidFallback = monomer.label === 'X' ? 'Any amino acid' : null;
   var baseFallback = monomer.label === 'N' ? 'Any base' : null;
@@ -8501,7 +8493,7 @@ var UnstyledAmbiguousMonomerPreview = function UnstyledAmbiguousMonomerPreview(_
     }
     return sortedData.slice(0, 5);
   }, [previewData, isAlternatives]);
-  return jsxs(ContainerDynamic, {
+  return jsxs(Container, {
     className: className,
     "data-testid": "polymer-library-preview",
     children: [jsx(Header$1, {
@@ -8518,7 +8510,6 @@ var UnstyledAmbiguousMonomerPreview = function UnstyledAmbiguousMonomerPreview(_
     })]
   });
 };
-var AmbiguousMonomerPreview = styled(UnstyledAmbiguousMonomerPreview)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  z-index: 5;\n  position: absolute;\n"])));
 
 var PreviewType;
 (function (PreviewType) {
@@ -12948,12 +12939,16 @@ function calculateAmbiguousMonomerPreviewLeft(initialLeft) {
   return initialLeft + PREVIEW_WIDTH / 2 > canvasWrapperRight ? canvasWrapperRight - PREVIEW_WIDTH : initialLeft - PREVIEW_WIDTH / 2 < canvasWrapperLeft ? canvasWrapperLeft : initialLeft - PREVIEW_WIDTH / 2;
 }
 var calculateBondPreviewPosition = function calculateBondPreviewPosition(bond, bondCoordinates) {
-  var _firstMonomer$rendere, _secondMonomer$render;
+  var _firstMonomer$rendere, _secondMonomer$render, _ZoomTool$instance;
   var firstMonomer = bond.firstMonomer,
     secondMonomer = bond.secondMonomer;
   assert_1(secondMonomer);
   var firstMonomerCoordinates = (_firstMonomer$rendere = firstMonomer.renderer) === null || _firstMonomer$rendere === void 0 ? void 0 : _firstMonomer$rendere.rootBoundingClientRect;
   var secondMonomerCoordinates = (_secondMonomer$render = secondMonomer.renderer) === null || _secondMonomer$render === void 0 ? void 0 : _secondMonomer$render.rootBoundingClientRect;
+  var canvasWrapperBoundingClientRect = (_ZoomTool$instance = ZoomTool.instance) === null || _ZoomTool$instance === void 0 || (_ZoomTool$instance = _ZoomTool$instance.canvasWrapper.node()) === null || _ZoomTool$instance === void 0 ? void 0 : _ZoomTool$instance.getBoundingClientRect();
+  var canvasWrapperBottom = (canvasWrapperBoundingClientRect === null || canvasWrapperBoundingClientRect === void 0 ? void 0 : canvasWrapperBoundingClientRect.bottom) || 0;
+  var canvasWrapperTop = (canvasWrapperBoundingClientRect === null || canvasWrapperBoundingClientRect === void 0 ? void 0 : canvasWrapperBoundingClientRect.top) || 0;
+  var canvasWrapperRight = (canvasWrapperBoundingClientRect === null || canvasWrapperBoundingClientRect === void 0 ? void 0 : canvasWrapperBoundingClientRect.right) || 0;
   assert_1(firstMonomerCoordinates);
   assert_1(secondMonomerCoordinates);
   var left = Math.min(bondCoordinates.left, firstMonomerCoordinates.left, secondMonomerCoordinates.left);
@@ -12964,26 +12959,30 @@ var calculateBondPreviewPosition = function calculateBondPreviewPosition(bond, b
   var height = bottom - top;
   var style = {};
   if (width > height) {
+    var leftValue = left + width / 2;
     var topValue;
-    if (top > preview.height + preview.gap) {
+    if (top + canvasWrapperTop > preview.height) {
       topValue = top - preview.heightForBond - preview.gap;
     } else {
       topValue = bottom + preview.gap;
     }
     style = {
       top: "".concat(topValue, "px"),
-      left: "".concat(left + width / 2, "px")
+      left: "".concat(leftValue, "px"),
+      transform: "translate(".concat(leftValue + preview.width > canvasWrapperRight ? '-100%' : leftValue > preview.width / 2 ? '-50%' : 0, ", 0)")
     };
   } else {
-    var leftValue;
+    var _topValue = top + height / 2;
+    var _leftValue;
     if (left > preview.widthForBond + preview.gap) {
-      leftValue = left - preview.widthForBond / 2 - preview.gap;
+      _leftValue = left - preview.widthForBond / 2 - preview.gap;
     } else {
-      leftValue = right + preview.widthForBond / 2 + preview.gap;
+      _leftValue = right + preview.widthForBond / 2 + preview.gap;
     }
     style = {
-      top: "".concat(top + height / 2, "px"),
-      left: "".concat(leftValue, "px")
+      top: "".concat(_topValue, "px"),
+      left: "".concat(_leftValue, "px"),
+      transform: "translate(".concat(_leftValue > preview.width / 2 ? '-50%' : 0, ", ").concat(_topValue + preview.height / 2 > canvasWrapperBottom ? '-100%' : _topValue > preview.height / 2 ? '-50%' : 0, ")")
     };
   }
   return style;
@@ -18113,7 +18112,7 @@ var SelectTool = function () {
           xy0: currentPosition
         };
       }
-      if (!ci || ci.map === 'atoms') {
+      if (!ci || ci.map === 'atoms' && !event.ctrlKey) {
         atomLongtapEvent(this, rnd);
       }
       var sel = closestToSel(ci);
@@ -18246,6 +18245,7 @@ var SelectTool = function () {
         return;
       }
       this.isMouseDown = false;
+      this.isReadyForCopy = false;
       var editor = this.editor;
       var selected = editor.selection();
       var struct = editor.render.ctab;
@@ -24352,12 +24352,13 @@ function selectStereoFlagsIfNecessary(atoms, expAtoms) {
 }
 var _origin = new WeakMap();
 var Editor$3 = function () {
-  function Editor(clientArea, options) {
+  function Editor(clientArea, options, serverSettings) {
     _classCallCheck$2(this, Editor);
     _classPrivateFieldInitSpec(this, _origin, {
       writable: true,
       value: void 0
     });
+    _defineProperty$1(this, "serverSettings", {});
     this.render = new Render(clientArea, Object.assign({
       microModeScale: SCALE
     }, options), options.reuseRestructIfExist !== false);
@@ -24369,6 +24370,7 @@ var Editor$3 = function () {
     this.highlights = new Highlighter(this);
     this.renderAndRecoordinateStruct = this.renderAndRecoordinateStruct.bind(this);
     this.setOptions = this.setOptions.bind(this);
+    this.setServerSettings(serverSettings);
     this.lastCursorPosition = {
       x: 0,
       y: 0
@@ -24508,6 +24510,11 @@ var Editor$3 = function () {
       this.render.update();
       return this.render.options;
     }
+  }, {
+    key: "setServerSettings",
+    value: function setServerSettings(serverSettings) {
+      this.serverSettings = serverSettings;
+    }
   }, {
     key: "updateToolAfterOptionsChange",
     value: function updateToolAfterOptionsChange(wasViewOnlyEnabled) {
@@ -25155,6 +25162,7 @@ function ButtonGroup(_ref) {
         },
         className: clsx(classes$F.button, _defineProperty$1({}, classes$F.selected, buttonValue === value)),
         style: {
+          display: 'flex',
           flex: '1 0 25%',
           margin: '2px',
           borderRadius: '3px'
@@ -26199,11 +26207,6 @@ var useMonomerExpansionHandlers = function useMonomerExpansionHandlers() {
     });
     editor.update(action);
     editor.rotateController.rerender();
-    editor.selection({
-      sgroups: selectedFunctionalGroups === null || selectedFunctionalGroups === void 0 ? void 0 : selectedFunctionalGroups.map(function (fg) {
-        return fg.relatedSGroup;
-      })
-    });
   }, [getKetcherInstance]);
   var hidden = useCallback(function (_ref2, toExpand) {
     var _props$functionalGrou;
@@ -26937,7 +26940,7 @@ var InfoTooltip$1 = connect(function (store) {
   };
 })(InfoTooltip);
 
-var _excluded$o = ["Tag", "className", "indigoVerification", "struct", "tool", "toolOpts", "options", "onInit", "onSelectionChange", "onElementEdit", "onEnhancedStereoEdit", "onQuickEdit", "onBondEdit", "onZoomIn", "onZoomOut", "onRgroupEdit", "onSgroupEdit", "onRemoveFG", "onMessage", "onAromatizeStruct", "onDearomatizeStruct", "onAttachEdit", "onCipChange", "onConfirm", "onShowInfo", "onApiSettings", "showAttachmentPoints", "onUpdateFloatingTools", "onShowMacromoleculesErrorMessage"];
+var _excluded$o = ["Tag", "className", "indigoVerification", "struct", "tool", "toolOpts", "options", "onInit", "onSelectionChange", "onElementEdit", "onEnhancedStereoEdit", "onQuickEdit", "onBondEdit", "onZoomIn", "onZoomOut", "onRgroupEdit", "onSgroupEdit", "onRemoveFG", "onMessage", "onAromatizeStruct", "onDearomatizeStruct", "onAttachEdit", "onCipChange", "onConfirm", "onShowInfo", "onApiSettings", "showAttachmentPoints", "onUpdateFloatingTools", "onShowMacromoleculesErrorMessage", "serverSettings"];
 function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper$9(t, o, e) { return o = _getPrototypeOf$2(o), _possibleConstructorReturn$2(t, _isNativeReflectConstruct$9() ? Reflect.construct(o, e || [], _getPrototypeOf$2(t).constructor) : o.apply(t, e)); }
@@ -26957,7 +26960,10 @@ function setupEditor(editor, props) {
       });
     }
   }
-  if (oldProps.options && options !== oldProps.options) editor.options(options);
+  if (oldProps.options && options !== oldProps.options) {
+    editor.options(options);
+    editor.setServerSettings(props.serverSettings);
+  }
   Object.keys(editor.event).forEach(function (name) {
     var eventName = "on".concat(upperFirst(name));
     if (props[eventName] !== oldProps[eventName]) {
@@ -27055,7 +27061,7 @@ var StructEditor = function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this4 = this;
-      this.editor = new Editor$3(this.editorRef.current, _objectSpread$F({}, this.props.options));
+      this.editor = new Editor$3(this.editorRef.current, _objectSpread$F({}, this.props.options), _objectSpread$F({}, this.props.serverSettings));
       var ketcher = ketcherProvider.getKetcher();
       if (ketcher !== null && ketcher !== void 0 && ketcher.editor.macromoleculeConvertionError) {
         this.props.onShowMacromoleculesErrorMessage(ketcher.editor.macromoleculeConvertionError);
@@ -27181,6 +27187,7 @@ var StructEditor = function (_Component) {
         _this$props.showAttachmentPoints;
         _this$props.onUpdateFloatingTools;
         _this$props.onShowMacromoleculesErrorMessage;
+        _this$props.serverSettings;
         var props = _objectWithoutProperties(_this$props, _excluded$o);
       var _this$state = this.state,
         _this$state$clientX = _this$state.clientX,
@@ -28515,12 +28522,11 @@ var SaveButton$1 = function SaveButton(props) {
   var server = props.server,
     _props$filename = props.filename,
     filename = _props$filename === void 0 ? 'unnamed' : _props$filename,
-    outputFormat = props.outputFormat,
-    bondThickness = props.bondThickness,
     data = props.data,
     type = props.type,
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'saveFile' : _props$mode,
+    options = props.options,
     _props$onSave = props.onSave,
     onSave = _props$onSave === void 0 ? noop : _props$onSave,
     _props$onError = props.onError,
@@ -28545,12 +28551,9 @@ var SaveButton$1 = function SaveButton(props) {
   };
   var saveImage = function saveImage() {
     var ketcherInstance = getKetcherInstance();
-    if (outputFormat) {
-      ketcherInstance.generateImage(data, {
-        outputFormat: outputFormat,
-        bondThickness: bondThickness || defaultBondThickness
-      }).then(function (blob) {
-        saveAs(blob, "".concat(filename, ".").concat(outputFormat));
+    if (options !== null && options !== void 0 && options.outputFormat) {
+      ketcherInstance.generateImage(data, options).then(function (blob) {
+        saveAs(blob, "".concat(filename, ".").concat(options.outputFormat));
         onSave();
       })["catch"](function (e) {
         KetcherLogger.error('savebutton.tsx::SaveButton::saveImage', e);
@@ -28992,7 +28995,7 @@ var SettingsDialog = function SettingsDialog(props) {
   var ACSStyleButton = jsx("button", {
     className: classes$x.acsStyleButton,
     onClick: onACSStyle,
-    children: "ACS Style"
+    children: "Set ACS Settings"
   }, "acsstylebutton");
   var tabs = [generalTab, stereoTab, atomsTab, bondsTab, serverTab, threeDViewerTab, debuggingTab];
   return jsx(Dialog, {
@@ -31469,12 +31472,13 @@ var SaveDialog = function (_Component) {
         isLoading = _this$state2.isLoading,
         structStr = _this$state2.structStr;
       var _this$props3 = _this.props,
-        formState = _this$props3.formState,
-        bondThickness = _this$props3.bondThickness;
+        options = _this$props3.options,
+        formState = _this$props3.formState;
       var _formState$result2 = formState.result,
         filename = _formState$result2.filename,
         format = _formState$result2.format;
       var isCleanStruct = _this.props.struct.isBlank();
+      options.outputFormat = imageFormat;
       var savingStruct = _this.isBinaryCdxFormat(format) && !isLoading ? b64toBlob(structStr) : structStr;
       var isMoleculeContain = _this.props.struct.atoms.size && _this.props.struct.bonds.size;
       var buttons = [jsx("button", {
@@ -31497,10 +31501,9 @@ var SaveDialog = function (_Component) {
       if (_this.isImageFormat(format)) {
         buttons.push( jsx(SaveButton$1, {
           mode: "saveImage",
+          options: options,
           data: structStr,
           filename: filename,
-          outputFormat: imageFormat,
-          bondThickness: bondThickness,
           type: "image/".concat(format, "+xml"),
           onSave: _this.props.onOk,
           disabled: disableControls || !formState.valid || isCleanStruct || !_this.props.server,
@@ -34041,7 +34044,7 @@ function initEditor(dispatch, getState) {
     return function (dispatch) {
       var state = global.currentState;
       var activeTool = state.actionState.activeTool.tool;
-      if (activeTool === 'select') return;
+      if (activeTool === 'select' && !force) return;
       var selectMode = state.toolbar.visibleTools.select;
       var resetOption = state.options.settings.resetToSelect;
       if (resetOption === true || resetOption === activeTool || force === true)
@@ -34247,8 +34250,10 @@ var mapDispatchToProps$1 = function mapDispatchToProps(dispatch) {
   });
 };
 var Editor$1 = connect(function (state) {
+  var serverSettings = state.options.getServerSettings();
   return {
     options: state.options.settings,
+    serverSettings: serverSettings,
     indigoVerification: state.requestsStatuses.indigoVerification
   };
 }, mapDispatchToProps$1)(StructEditor);
@@ -34773,8 +34778,8 @@ var KetcherBuilder = function () {
                 cleanup = initApp(element, appRoot, staticResourcesUrl, {
                   buttons: buttons || {},
                   errorHandler: errorHandler || null,
-                  version: "2.26.0-rc.1" ,
-                  buildDate: "2024-10-04T18:52:31" ,
+                  version: "2.26.0-rc.3" ,
+                  buildDate: "2024-10-16T14:44:22" ,
                   buildNumber: '',
                   customButtons: customButtons || []
                 }, structService, resolve, togglerComponent);