ketcher-react 2.5.1 → 2.6.0-rc.1

package/dist/constants.d.ts

@@ -0,0 +1,16 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+export declare const KETCHER_INIT_EVENT_NAME = "ketcher-init";

package/dist/hooks/index.d.ts

@@ -18,3 +18,4 @@ export * from './useResizeObserver';
 export * from './useFormContext';
 export * from './useAppContext';
 export * from './useInterval';
+export * from './useSubscribtionOnEvents';

package/dist/hooks/useSubscribtionOnEvents.d.ts

@@ -0,0 +1,16 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+export declare const useSubscriptionOnEvents: () => void;

package/dist/index.d.ts

@@ -15,3 +15,4 @@
  ***************************************************************************/
 export * from './Editor';
 export * from './script';
+export * from './constants';

package/dist/index.js

@@ -336,7 +336,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();
@@ -399,9 +401,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) {
@@ -2898,7 +2899,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: {
@@ -8084,6 +8085,45 @@ var useInterval = function useInterval(callback, delay) {
   }, [delay]);
 };
 
+var KETCHER_INIT_EVENT_NAME = 'ketcher-init';
+
+var useSubscriptionOnEvents = function useSubscriptionOnEvents() {
+  var dispatch = reactRedux.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(ketcherCore.KetcherAsyncEvents.LOADING, loadingHandler);
+    ketcher.eventBus.addListener(ketcherCore.KetcherAsyncEvents.SUCCESS, actionResultHandler);
+    ketcher.eventBus.addListener(ketcherCore.KetcherAsyncEvents.FAILURE, actionResultHandler);
+  };
+  var unsubscribe = function unsubscribe(ketcher) {
+    ketcher.eventBus.removeListener(ketcherCore.KetcherAsyncEvents.LOADING, loadingHandler);
+    ketcher.eventBus.removeListener(ketcherCore.KetcherAsyncEvents.SUCCESS, actionResultHandler);
+    ketcher.eventBus.removeListener(ketcherCore.KetcherAsyncEvents.FAILURE, actionResultHandler);
+  };
+  React.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,
@@ -10559,10 +10599,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);
       }
@@ -14499,12 +14539,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),
@@ -14539,27 +14579,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 : '';
@@ -14567,12 +14607,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(ketcherCore.fromTextCreation(editor.render.ctab, content, position));
+      editor.update(ketcherCore.fromTextCreation(editor.render.ctab, content, position, pos));
     } else if (!content) {
       editor.update(ketcherCore.fromTextDeletion(editor.render.ctab, id));
     } else if (content !== origilContent) {
@@ -14734,6 +14775,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.Subscription(),
       elementEdit: new subscription.PipelineSubscription(),
@@ -14791,6 +14833,15 @@ var Editor$3 = function () {
     value: function clear() {
       this.struct(undefined);
     }
+  }, {
+    key: "renderAndRecoordinateStruct",
+    value: function renderAndRecoordinateStruct(struct) {
+      var action = ketcherCore.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) {
@@ -14799,11 +14850,13 @@ var Editor$3 = function () {
       }
       this.selection(null);
       var struct = value || new ketcherCore.Struct();
-      var action = ketcherCore.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",
@@ -15318,8 +15371,12 @@ function setupEditor(editor, props) {
   Object.keys(editor.event).forEach(function (name) {
     var eventName = "on".concat(fp.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]);
+      }
     }
   });
 }
@@ -19047,7 +19104,8 @@ var SaveDialog = function (_Component) {
       }) : _this.isImageFormat(format) ? jsxRuntime.jsx("div", {
         className: classes$j.imageContainer,
         children: !isCleanStruct && jsxRuntime.jsx("img", {
-          src: "data:image/".concat(format, "+xml;base64,").concat(imageSrc)
+          src: "data:image/".concat(format, "+xml;base64,").concat(imageSrc),
+          alt: "".concat(format, " preview")
         })
       }) : jsxRuntime.jsx("div", {
         className: classes$j.previewBackground,
@@ -19142,7 +19200,7 @@ var SaveDialog = function (_Component) {
     _this.isRxn = _this.props.struct.hasRxnArrow();
     _this.textAreaRef = React.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,
@@ -21201,7 +21259,7 @@ var Text = function Text(props) {
     };
   };
   var keyBindingFn = function keyBindingFn(e) {
-    if (e.keyCode === 13) {
+    if (e.key === 'Enter') {
       e.stopPropagation();
     }
     return draftJs.getDefaultKeyBinding(e);
@@ -21619,6 +21677,7 @@ var App = function App(props) {
   var checkServer = props.checkServer;
   var _useSettingsContext = useSettingsContext(),
       staticResourcesUrl = _useSettingsContext.staticResourcesUrl;
+  useSubscriptionOnEvents();
   React.useEffect(function () {
     checkServer();
     dispatch(initFGTemplates(staticResourcesUrl));
@@ -21729,8 +21788,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);
                 });
@@ -21823,12 +21882,14 @@ function Editor(props) {
   }),
       height = _useResizeObserver.height,
       width = _useResizeObserver.width;
+  var ketcherInitEvent = new Event(KETCHER_INIT_EVENT_NAME);
   React.useEffect(function () {
     buildKetcherAsync(_objectSpread(_objectSpread({}, props), {}, {
       element: rootElRef.current
     })).then(function (ketcher) {
       if (typeof onInit === 'function') {
         onInit(ketcher);
+        window.dispatchEvent(ketcherInitEvent);
       }
     });
   }, []);
@@ -21839,4 +21900,5 @@ function Editor(props) {
 }
 
 exports.Editor = Editor;
+exports.KETCHER_INIT_EVENT_NAME = KETCHER_INIT_EVENT_NAME;
 //# sourceMappingURL=index.js.map