ketcher-react 2.5.1 → 2.6.0-rc.1

package/dist/index.modern.js

@@ -24,7 +24,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
-import { KetSerializer, MolSerializer, Ketcher, FormatterFactory, StereLabelStyleType, StereoColoringType, Bond as Bond$2, Elements, AtomList, StereoLabel, findStereoAtoms, RxnArrowMode, SimpleObjectMode, SGroup, Pile, getStereoAtomsMap, identifyStructFormat, ChemicalMimeType, SdfSerializer, FunctionalGroupsProvider, ElementColor, formatProperties, Vec2, FunctionalGroup, Fragment as Fragment$1, OperationType, fromAtomsAttrs, fracAngle, Action, fromSgroupDeletion, fromFragmentDeletion, fromAtomAddition, fromBondAddition, Atom as Atom$2, bondChangingAction, fromBondsAttrs, fromChain, getItemsToFuse, getHoverToFuse, fromItemsFuse, fromStereoFlagUpdate, Scale, checkOverlapping, fromSeveralSgroupAddition, SgContexts, fromSgroupAction, fromSimpleObjectResizing, fromArrowResizing, fromMultipleMove, fromTextDeletion, fromTextUpdating, fromOneAtomDeletion, fromOneBondDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromPaste, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromBondAlign, fromSimpleObjectAddition, fromTemplateOnBondAction, fromTemplateOnCanvas, fromTemplateOnAtom, fromTextCreation, fromHighlightCreate, fromHighlightClear, Struct, fromNewCanvas, Render, fromDescriptorsAlign, setExpandSGroup, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, Generics, TextCommand } from 'ketcher-core';
+import { KetSerializer, MolSerializer, Ketcher, FormatterFactory, StereLabelStyleType, StereoColoringType, Bond as Bond$2, Elements, AtomList, StereoLabel, findStereoAtoms, RxnArrowMode, SimpleObjectMode, SGroup, Pile, getStereoAtomsMap, identifyStructFormat, ChemicalMimeType, SdfSerializer, FunctionalGroupsProvider, KetcherAsyncEvents, ElementColor, formatProperties, Vec2, FunctionalGroup, Fragment as Fragment$1, OperationType, fromAtomsAttrs, fracAngle, Action, fromSgroupDeletion, fromFragmentDeletion, fromAtomAddition, fromBondAddition, Atom as Atom$2, bondChangingAction, fromBondsAttrs, fromChain, getItemsToFuse, getHoverToFuse, fromItemsFuse, fromStereoFlagUpdate, Scale, checkOverlapping, fromSeveralSgroupAddition, SgContexts, fromSgroupAction, fromSimpleObjectResizing, fromArrowResizing, fromMultipleMove, fromTextDeletion, fromTextUpdating, fromOneAtomDeletion, fromOneBondDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromPaste, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromBondAlign, fromSimpleObjectAddition, fromTemplateOnBondAction, fromTemplateOnCanvas, fromTemplateOnAtom, fromTextCreation, fromHighlightCreate, fromHighlightClear, fromNewCanvas, Struct, Render, fromDescriptorsAlign, setExpandSGroup, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, Generics, TextCommand } 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 } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -37,7 +37,7 @@ import Ajv from 'ajv';
 import { pick, range, capitalize, omit, without, findLastIndex, findIndex, pickBy, isEmpty, isEqual, throttle, debounce, xor, upperFirst, escapeRegExp, flow, filter, reduce } from 'lodash/fp';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import ReactDOM from 'react-dom';
-import { connect, useSelector, useDispatch, Provider } from 'react-redux';
+import { connect, useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore as createStore$1, applyMiddleware } from 'redux';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import 'redux-logger';
@@ -275,7 +275,9 @@ var ClipArea = function (_Component) {
       this.target = this.props.target || el.parentNode;
       this.listeners = {
         mouseup: function mouseup(event) {
-          if (el === event.target || !isActiveElement(event.target) && _this2.props.focused()) autofocus(el);
+          if (el === event.target || !isActiveElement(event.target) && _this2.props.focused()) {
+            autoselect(el);
+          }
         },
         mousedown: function mousedown(event) {
           if (event.shiftKey && !isActiveElement(event.target)) event.preventDefault();
@@ -338,9 +340,8 @@ function isActiveElement(el) {
   if (el.tagName === 'INPUT' && el.type === 'button') return false;
   return ['INPUT', 'SELECT', 'TEXTAREA', 'OPTION', 'LABEL'].includes(el.tagName);
 }
-function autofocus(cliparea) {
+function autoselect(cliparea) {
   cliparea.value = ' ';
-  cliparea.focus();
   cliparea.select();
 }
 function _copy(cb, data) {
@@ -2837,7 +2838,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.5.0\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.6.0-rc.1\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -8023,6 +8024,45 @@ var useInterval = function useInterval(callback, delay) {
   }, [delay]);
 };
 
+var KETCHER_INIT_EVENT_NAME = 'ketcher-init';
+
+var useSubscriptionOnEvents = function useSubscriptionOnEvents() {
+  var dispatch = useDispatch();
+  var _useAppContext = useAppContext(),
+      getKetcherInstance = _useAppContext.getKetcherInstance;
+  var loadingHandler = function loadingHandler() {
+    dispatch(indigoVerification(true));
+  };
+  var actionResultHandler = function actionResultHandler() {
+    dispatch(indigoVerification(false));
+  };
+  var subscribe = function subscribe(ketcher) {
+    ketcher.eventBus.addListener(KetcherAsyncEvents.LOADING, loadingHandler);
+    ketcher.eventBus.addListener(KetcherAsyncEvents.SUCCESS, actionResultHandler);
+    ketcher.eventBus.addListener(KetcherAsyncEvents.FAILURE, actionResultHandler);
+  };
+  var unsubscribe = function unsubscribe(ketcher) {
+    ketcher.eventBus.removeListener(KetcherAsyncEvents.LOADING, loadingHandler);
+    ketcher.eventBus.removeListener(KetcherAsyncEvents.SUCCESS, actionResultHandler);
+    ketcher.eventBus.removeListener(KetcherAsyncEvents.FAILURE, actionResultHandler);
+  };
+  useEffect(function () {
+    var subscribeOnInit = function subscribeOnInit() {
+      subscribe(getKetcherInstance());
+    };
+    var unsubscribeOnUnMount = function unsubscribeOnUnMount() {
+      unsubscribe(getKetcherInstance());
+    };
+    window.addEventListener(KETCHER_INIT_EVENT_NAME, function () {
+      subscribeOnInit();
+    });
+    return function () {
+      unsubscribeOnUnMount();
+      window.removeEventListener(KETCHER_INIT_EVENT_NAME, subscribeOnInit);
+    };
+  }, []);
+};
+
 var ArrowScroll = function ArrowScroll(_ref) {
   var startInView = _ref.startInView,
       endInView = _ref.endInView,
@@ -10498,10 +10538,10 @@ var APointTool = function () {
     key: "mousemove",
     value: function mousemove(event) {
       var struct = this.editor.render.ctab.molecule;
-      var ci = this.editor.findItem(event, ['atoms']);
-      if (ci) {
-        var atom = struct.atoms.get(ci.id);
-        if ((atom === null || atom === void 0 ? void 0 : atom.label) !== 'R#' && (atom === null || atom === void 0 ? void 0 : atom.rglabel) === null) this.editor.hover(ci);
+      var closestItem = this.editor.findItem(event, ['atoms']);
+      if (closestItem) {
+        var atom = struct.atoms.get(closestItem.id);
+        if ((atom === null || atom === void 0 ? void 0 : atom.label) !== 'R#' && (atom === null || atom === void 0 ? void 0 : atom.rglabel) === null) this.editor.hover(closestItem);
       } else {
         this.editor.hover(null);
       }
@@ -14438,12 +14478,12 @@ var TextTool = function () {
     key: "mousedown",
     value: function mousedown(event) {
       var render = this.editor.render;
-      var ci = this.editor.findItem(event, ['texts']);
+      var closestItem = this.editor.findItem(event, ['texts']);
       this.editor.selection(null);
-      if (ci && ci.map === 'texts') {
+      if (closestItem && closestItem.map === 'texts') {
         this.editor.hover(null);
         this.editor.selection({
-          texts: [ci.id]
+          texts: [closestItem.id]
         });
         this.dragCtx = {
           xy0: render.page2obj(event),
@@ -14478,27 +14518,27 @@ var TextTool = function () {
     key: "click",
     value: function click(event) {
       var render = this.editor.render;
-      var ci = this.editor.findItem(event, ['texts']);
+      var closestItem = this.editor.findItem(event, ['texts']);
       this.editor.hover(null);
-      if (!ci) {
-        propsDialog(this.editor, null, render.page2obj(event));
+      if (!closestItem) {
+        propsDialog(this.editor, null, render.page2obj(event), []);
       }
       return true;
     }
   }, {
     key: "dblclick",
     value: function dblclick(event) {
-      var ci = this.editor.findItem(event, ['texts']);
+      var closestItem = this.editor.findItem(event, ['texts']);
       this.editor.hover(null);
-      if (ci.map === 'texts') {
-        propsDialog(this.editor, ci.id, ci.position);
+      if (closestItem.map === 'texts') {
+        propsDialog(this.editor, closestItem.id, closestItem.position, closestItem.pos);
       }
       return true;
     }
   }]);
   return TextTool;
 }();
-function propsDialog(editor, id, position) {
+function propsDialog(editor, id, position, pos) {
   var struct = editor.render.ctab.molecule;
   var text = id || id === 0 ? struct.texts.get(id) : null;
   var origilContent = text ? text.content : '';
@@ -14506,12 +14546,13 @@ function propsDialog(editor, id, position) {
     content: origilContent,
     id: id,
     position: position,
+    pos: pos,
     type: 'text'
   });
   res.then(function (_ref) {
     var content = _ref.content;
     if (!id && id !== 0 && content) {
-      editor.update(fromTextCreation(editor.render.ctab, content, position));
+      editor.update(fromTextCreation(editor.render.ctab, content, position, pos));
     } else if (!content) {
       editor.update(fromTextDeletion(editor.render.ctab, id));
     } else if (content !== origilContent) {
@@ -14673,6 +14714,7 @@ var Editor$3 = function () {
     this.historyPtr = 0;
     this.errorHandler = null;
     this.highlights = new Highlighter(this);
+    this.renderAndRecoordinateStruct = this.renderAndRecoordinateStruct.bind(this);
     this.event = {
       message: new Subscription(),
       elementEdit: new PipelineSubscription(),
@@ -14730,6 +14772,15 @@ var Editor$3 = function () {
     value: function clear() {
       this.struct(undefined);
     }
+  }, {
+    key: "renderAndRecoordinateStruct",
+    value: function renderAndRecoordinateStruct(struct) {
+      var action = fromNewCanvas(this.render.ctab, struct);
+      this.update(action);
+      getStructCenter(this.render.ctab);
+      recoordinate(this);
+      return this.render.ctab.molecule;
+    }
   }, {
     key: "struct",
     value: function struct(value) {
@@ -14738,11 +14789,13 @@ var Editor$3 = function () {
       }
       this.selection(null);
       var struct = value || new Struct();
-      var action = fromNewCanvas(this.render.ctab, struct);
-      this.update(action);
-      getStructCenter(this.render.ctab);
-      recoordinate(this);
-      return this.render.ctab.molecule;
+      return this.renderAndRecoordinateStruct(struct);
+    }
+  }, {
+    key: "structToAddFragment",
+    value: function structToAddFragment(value) {
+      var superStruct = value.mergeInto(this.render.ctab.molecule);
+      return this.renderAndRecoordinateStruct(superStruct);
     }
   }, {
     key: "options",
@@ -15257,8 +15310,12 @@ function setupEditor(editor, props) {
   Object.keys(editor.event).forEach(function (name) {
     var eventName = "on".concat(upperFirst(name));
     if (props[eventName] !== oldProps[eventName]) {
-      if (oldProps[eventName]) editor.event[name].remove(oldProps[eventName]);
-      if (props[eventName]) editor.event[name].add(props[eventName]);
+      if (oldProps[eventName]) {
+        editor.event[name].remove(oldProps[eventName]);
+      }
+      if (props[eventName]) {
+        editor.event[name].add(props[eventName]);
+      }
     }
   });
 }
@@ -18986,7 +19043,8 @@ var SaveDialog = function (_Component) {
       }) : _this.isImageFormat(format) ? jsx("div", {
         className: classes$j.imageContainer,
         children: !isCleanStruct && jsx("img", {
-          src: "data:image/".concat(format, "+xml;base64,").concat(imageSrc)
+          src: "data:image/".concat(format, "+xml;base64,").concat(imageSrc),
+          alt: "".concat(format, " preview")
         })
       }) : jsx("div", {
         className: classes$j.previewBackground,
@@ -19081,7 +19139,7 @@ var SaveDialog = function (_Component) {
     _this.isRxn = _this.props.struct.hasRxnArrow();
     _this.textAreaRef = createRef();
     var formats = [_this.isRxn ? 'rxn' : 'mol', 'smiles', 'ket'];
-    if (_this.props.server) formats.push(_this.isRxn ? 'rxnV3000' : 'molV3000', 'smilesExt', 'smarts', 'inChI', 'inChIAuxInfo', 'cml', 'svg', 'png');
+    if (_this.props.server) formats.push(_this.isRxn ? 'rxnV3000' : 'molV3000', 'smilesExt', 'smarts', 'inChI', 'inChIAuxInfo', 'cml', 'svg', 'png', 'cdxml');
     _this.saveSchema = saveSchema;
     _this.saveSchema.properties.format = Object.assign(_this.saveSchema.properties.format, {
       "enum": formats,
@@ -21140,7 +21198,7 @@ var Text = function Text(props) {
     };
   };
   var keyBindingFn = function keyBindingFn(e) {
-    if (e.keyCode === 13) {
+    if (e.key === 'Enter') {
       e.stopPropagation();
     }
     return getDefaultKeyBinding(e);
@@ -21558,6 +21616,7 @@ var App = function App(props) {
   var checkServer = props.checkServer;
   var _useSettingsContext = useSettingsContext(),
       staticResourcesUrl = _useSettingsContext.staticResourcesUrl;
+  useSubscriptionOnEvents();
   useEffect(function () {
     checkServer();
     dispatch(initFGTemplates(staticResourcesUrl));
@@ -21668,8 +21727,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.5.1" ,
-                    buildDate: "2022-06-17T15:19:17" ,
+                    version: "2.6.0-rc.1" ,
+                    buildDate: "2022-10-14T12:12:12" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });
@@ -21762,12 +21821,14 @@ function Editor(props) {
   }),
       height = _useResizeObserver.height,
       width = _useResizeObserver.width;
+  var ketcherInitEvent = new Event(KETCHER_INIT_EVENT_NAME);
   useEffect(function () {
     buildKetcherAsync(_objectSpread(_objectSpread({}, props), {}, {
       element: rootElRef.current
     })).then(function (ketcher) {
       if (typeof onInit === 'function') {
         onInit(ketcher);
+        window.dispatchEvent(ketcherInitEvent);
       }
     });
   }, []);
@@ -21777,5 +21838,5 @@ function Editor(props) {
   });
 }
 
-export { Editor };
+export { Editor, KETCHER_INIT_EVENT_NAME };
 //# sourceMappingURL=index.modern.js.map