ketcher-react 2.9.0-rc.4 → 2.9.0-rc.5

package/dist/index.js

@@ -3073,7 +3073,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.9.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.9.0-rc.5\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -10415,6 +10415,7 @@ function _checkPrivateRedeclaration$2(obj, privateCollection) { if (privateColle
 var _bondProps = new WeakMap();
 var AtomTool = function () {
   function AtomTool(editor, atomProps) {
+    var _ElementColor$atomPro;
     _classCallCheck__default["default"](this, AtomTool);
     _classPrivateFieldInitSpec$2(this, _bondProps, {
       writable: true,
@@ -10426,8 +10427,10 @@ var AtomTool = function () {
       type: 1,
       stereo: ketcherCore.Bond.PATTERN.STEREO.NONE
     });
-    this.editor.hoverIcon.show().attr('text', "".concat(atomProps.label)).attr('fill', "".concat(ketcherCore.ElementColor[atomProps.label]));
-    this.editor.updateHoverIconPosition();
+    this.editor.hoverIcon.show();
+    this.editor.hoverIcon.label = atomProps.label;
+    this.editor.hoverIcon.fill = (_ElementColor$atomPro = ketcherCore.ElementColor[atomProps.label]) !== null && _ElementColor$atomPro !== void 0 ? _ElementColor$atomPro : '#000000';
+    this.editor.hoverIcon.updatePosition();
     if (editor.selection()) {
       var _editor$selection;
       if ((_editor$selection = editor.selection()) !== null && _editor$selection !== void 0 && _editor$selection.atoms) {
@@ -10511,32 +10514,13 @@ var AtomTool = function () {
         };
       }
     }
-  }, {
-    key: "mouseLeaveClientArea",
-    value: function mouseLeaveClientArea() {
-      this.editor.hoverIcon.hide();
-    }
-  }, {
-    key: "mouseover",
-    value: function mouseover() {
-      this.editor.hoverIcon.show();
-      this.editor.updateHoverIconPosition();
-    }
   }, {
     key: "mousemove",
     value: function mousemove(event) {
       this.editor.hoverIcon.show();
       var rnd = this.editor.render;
-      var layerX = event.layerX,
-          layerY = event.layerY;
       if (!this.dragCtx || !this.dragCtx.item) {
-        var _this$editor$hoverIco = this.editor.hoverIcon.getBBox(),
-            height = _this$editor$hoverIco.height,
-            width = _this$editor$hoverIco.width;
-        this.editor.hoverIcon.attr({
-          x: layerX - width / 2,
-          y: layerY - height / 2
-        });
+        this.editor.hoverIcon.updatePosition();
         this.editor.hover(this.editor.findItem(event, ['atoms', 'functionalGroups']), null, event);
         return;
       }
@@ -14182,14 +14166,14 @@ var TemplateTool = function () {
     if (sgroup) {
       this.findItems.push('functionalGroups');
     }
+    editor.hoverIcon.label = tmpl.struct.name;
+    editor.hoverIcon.fill = '#000000';
+    editor.hoverIcon.show();
+    editor.hoverIcon.updatePosition();
   }
   _createClass__default["default"](TemplateTool, [{
     key: "mousedown",
     value: function mousedown(event) {
-      if (this.followAction) {
-        this.followAction.perform(this.editor.render.ctab);
-        delete this.followAction;
-      }
       var closestItem = this.editor.findItem(event, ['atoms', 'bonds', 'sgroups', 'functionalGroups']);
       var ctab = this.editor.render.ctab;
       var struct = ctab.molecule;
@@ -14204,10 +14188,9 @@ var TemplateTool = function () {
         }
       }
       this.editor.hover(null);
-      var dragCtxItem = getDragCtxItem(this.editor, event, this.mode, this.mergeItems, this.findItems);
       this.dragCtx = {
         xy0: this.editor.render.page2obj(event),
-        item: dragCtxItem
+        item: this.editor.findItem(event, this.findItems)
       };
       var dragCtx = this.dragCtx;
       var ci = dragCtx.item;
@@ -14260,26 +14243,10 @@ var TemplateTool = function () {
     key: "mousemove",
     value: function mousemove(event) {
       if (!this.dragCtx) {
-        if (this.followAction) {
-          this.followAction.perform(this.editor.render.ctab);
-        }
-        var _fromPaste = ketcherCore.fromPaste(this.editor.render.ctab, this.template.molecule, this.editor.render.page2obj(event)),
-            _fromPaste2 = _slicedToArray__default["default"](_fromPaste, 2),
-            followAction = _fromPaste2[0],
-            _pasteItems = _fromPaste2[1];
-        this.followAction = followAction;
-        this.editor.update(followAction, true, {
-          extendCanvas: false
-        });
-        if (this.mode === 'fg') {
-          var skip = getIgnoredGroupItem(this.editor.struct(), _pasteItems);
-          var _ci = this.editor.findItem(event, this.findItems, skip);
-          this.editor.hover(_ci !== null && _ci !== void 0 ? _ci : null, null, event);
-        } else {
-          this.mergeItems = getMergeItems(this.editor, _pasteItems);
-          this.editor.hover(ketcherCore.getHoverToFuse(this.mergeItems));
-        }
-        return;
+        this.editor.hoverIcon.show();
+        this.editor.hoverIcon.updatePosition();
+        this.editor.hover(this.editor.findItem(event, this.findItems), null, event);
+        return true;
       }
       var dragCtx = this.dragCtx;
       var ci = dragCtx.item;
@@ -14300,10 +14267,10 @@ var TemplateTool = function () {
           var _fromTemplateOnBondAc = ketcherCore.fromTemplateOnBondAction(this.editor.render.ctab, this.template, ci.id, this.editor.event, dragCtx.sign1 * dragCtx.sign2 > 0, false),
               _fromTemplateOnBondAc2 = _slicedToArray__default["default"](_fromTemplateOnBondAc, 2),
               _action = _fromTemplateOnBondAc2[0],
-              _pasteItems2 = _fromTemplateOnBondAc2[1];
+              _pasteItems = _fromTemplateOnBondAc2[1];
           dragCtx.action = _action;
           this.editor.update(dragCtx.action, true);
-          dragCtx.mergeItems = ketcherCore.getItemsToFuse(this.editor, _pasteItems2);
+          dragCtx.mergeItems = ketcherCore.getItemsToFuse(this.editor, _pasteItems);
           this.editor.hover(ketcherCore.getHoverToFuse(dragCtx.mergeItems));
         }
         return true;
@@ -14374,7 +14341,7 @@ var TemplateTool = function () {
     key: "mouseup",
     value: function mouseup(event) {
       var _this = this,
-          _ci2;
+          _ci;
       var dragCtx = this.dragCtx;
       if (this.targetGroupsIds.length && this.mode !== 'fg') {
         this.editor.event.removeFG.dispatch({
@@ -14408,7 +14375,7 @@ var TemplateTool = function () {
       if (this.isSaltOrSolvent) {
         addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
         return true;
-      } else if (((_ci2 = ci) === null || _ci2 === void 0 ? void 0 : _ci2.map) === 'functionalGroups' && ketcherCore.FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.mode === 'fg' && this.targetGroupsIds.length) {
+      } else if (((_ci = ci) === null || _ci === void 0 ? void 0 : _ci.map) === 'functionalGroups' && ketcherCore.FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.mode === 'fg' && this.targetGroupsIds.length) {
         functionalGroupRemoveAction = new ketcherCore.Action();
         var _struct = this.editor.struct();
         var _restruct = this.editor.render.ctab;
@@ -14490,10 +14457,6 @@ var TemplateTool = function () {
   }, {
     key: "cancel",
     value: function cancel(e) {
-      if (this.followAction) {
-        this.followAction.perform(this.editor.render.ctab);
-        delete this.followAction;
-      }
       this.mouseup(e);
     }
   }, {
@@ -14542,23 +14505,6 @@ function getTargetAtomId(struct, ci) {
     return group === null || group === void 0 ? void 0 : group.getAttAtomId(struct);
   }
 }
-function getIgnoredGroupItem(struct, pasteItems) {
-  var groupId = struct.getGroupIdFromAtomId(pasteItems.atoms[0]);
-  return {
-    map: 'functionalGroups',
-    id: groupId
-  };
-}
-function getDragCtxItem(editor, event, mode, mergeItems, findItems) {
-  if (mode === 'fg') return editor.findItem(event, findItems);
-  if ((mergeItems === null || mergeItems === void 0 ? void 0 : mergeItems.atoms.size) === 1 && mergeItems.bonds.size === 0) {
-    return {
-      map: 'atoms',
-      id: mergeItems.atoms.values().next().value
-    };
-  }
-  return null;
-}
 
 var TextTool = function () {
   function TextTool(editor) {
@@ -16000,13 +15946,126 @@ function getValidInputOnly(struct, atoms, bonds) {
   };
 }
 
+var HOVER_ICON_OPACITY = 0.7;
+var HoverIcon = function () {
+  function HoverIcon(editor) {
+    _classCallCheck__default["default"](this, HoverIcon);
+    this.editor = editor;
+    var icon = this.initialize();
+    this.element = icon.element;
+    this._fill = icon.fill;
+    this._label = icon.label;
+    this.isShown = true;
+    this.shouldBeShownWhenMouseBack = false;
+    this.updatePosition();
+    var clientArea = this.editor.render.clientArea;
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseLeave = this.onMouseLeave.bind(this);
+    document.addEventListener('mousemove', this.onMouseMove);
+    clientArea.addEventListener('mouseover', this.onMouseMove);
+    clientArea.addEventListener('mouseleave', this.onMouseLeave);
+  }
+  _createClass__default["default"](HoverIcon, [{
+    key: "fill",
+    get: function get() {
+      return this._fill;
+    },
+    set: function set(fillColor) {
+      this._fill = fillColor;
+      this.element.attr('fill', fillColor);
+    }
+  }, {
+    key: "label",
+    get: function get() {
+      return this._label;
+    },
+    set: function set(label) {
+      this._label = label;
+      this.element.attr('text', label);
+    }
+  }, {
+    key: "isOverLoader",
+    value: function isOverLoader(event) {
+      var target = (event === null || event === void 0 ? void 0 : event.relatedTarget) || event.target;
+      return target === null || target === void 0 ? void 0 : target.classList.contains('loading-spinner');
+    }
+  }, {
+    key: "onMouseMove",
+    value: function onMouseMove(event) {
+      if (this.isShown || this.isOverLoader(event) && this.shouldBeShownWhenMouseBack) {
+        this.show();
+        this.updatePosition();
+      }
+    }
+  }, {
+    key: "onMouseLeave",
+    value: function onMouseLeave(event) {
+      if (!this.isOverLoader(event)) {
+        this.shouldBeShownWhenMouseBack = true;
+        this.hide();
+      }
+    }
+  }, {
+    key: "updatePosition",
+    value: function updatePosition() {
+      var _this$editor$lastCurs = this.editor.lastCursorPosition,
+          x = _this$editor$lastCurs.x,
+          y = _this$editor$lastCurs.y;
+      this.element.attr({
+        x: x,
+        y: y
+      });
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.element.show();
+      this.isShown = true;
+      this.shouldBeShownWhenMouseBack = false;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.element.hide();
+      this.isShown = false;
+    }
+  }, {
+    key: "initialize",
+    value: function initialize() {
+      var _this$fill;
+      var render = this.editor.render;
+      var fillColor = (_this$fill = this.fill) !== null && _this$fill !== void 0 ? _this$fill : '#000000';
+      var element = render.paper.text(0, 0, this.label || '');
+      element.attr('fill', fillColor);
+      element.attr('font-size', this.editor.options().fontsz);
+      element.attr('opacity', HOVER_ICON_OPACITY);
+      return {
+        element: element,
+        fill: fillColor,
+        label: (this === null || this === void 0 ? void 0 : this.label) || ''
+      };
+    }
+  }, {
+    key: "create",
+    value: function create() {
+      var icon = this.initialize();
+      this.element = icon.element;
+      this._fill = icon.fill;
+      this._label = icon.label;
+      this.isShown = true;
+      this.shouldBeShownWhenMouseBack = false;
+      this.updatePosition();
+    }
+  }]);
+  return HoverIcon;
+}();
+
 function ownKeys$J(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$J(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 var SCALE = 40;
 var HISTORY_SIZE = 32;
-var HOVER_ICON_OPACITY = 0.7;
 var structObjects = ['atoms', 'bonds', 'frags', 'sgroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'];
 var highlightTargets = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'functionalGroups', 'frags', 'merge', 'rgroups', 'sgroups', 'sgroupData', 'enhancedFlags', 'simpleObjects', 'texts'];
 function selectStereoFlagsIfNecessary(atoms, expAtoms) {
@@ -16047,7 +16106,8 @@ var Editor$3 = function () {
       x: 0,
       y: 0
     };
-    this.createHoverIcon();
+    this.hoverIcon = new HoverIcon(this);
+    this.hoverIcon.updatePosition();
     this.contextMenu = {};
     this.event = {
       message: new subscription.Subscription(),
@@ -16107,26 +16167,6 @@ var Editor$3 = function () {
       this._tool = tool;
       return this._tool;
     }
-  }, {
-    key: "updateHoverIconPosition",
-    value: function updateHoverIconPosition() {
-      var _this$lastCursorPosit = this.lastCursorPosition,
-          x = _this$lastCursorPosit.x,
-          y = _this$lastCursorPosit.y;
-      var _this$hoverIcon$getBB = this.hoverIcon.getBBox(),
-          height = _this$hoverIcon$getBB.height,
-          width = _this$hoverIcon$getBB.width;
-      this.hoverIcon.attr({
-        x: x - width / 2,
-        y: y - height / 2
-      });
-    }
-  }, {
-    key: "createHoverIcon",
-    value: function createHoverIcon() {
-      this.hoverIcon = this.render.paper.text(0, 0, '').attr('font-size', this.options().fontsz).attr('opacity', HOVER_ICON_OPACITY);
-      this.updateHoverIconPosition();
-    }
   }, {
     key: "clear",
     value: function clear() {
@@ -16150,7 +16190,7 @@ var Editor$3 = function () {
       this.selection(null);
       var struct = value || new ketcherCore.Struct();
       var molecule = this.renderAndRecoordinateStruct(struct);
-      this.createHoverIcon();
+      this.hoverIcon.create();
       return molecule;
     }
   }, {
@@ -17798,7 +17838,7 @@ var StructEditor = function (_Component) {
           className: classes$D.measureLog,
           ref: this.logRef
         }), indigoVerification && jsxRuntime.jsx("div", {
-          className: classes$D.spinnerOverlay,
+          className: "".concat(classes$D.spinnerOverlay, " loading-spinner"),
           children: jsxRuntime.jsx(LoadingCircles, {})
         }), jsxRuntime.jsx(InfoPanel$1, {
           clientX: clientX,
@@ -24078,8 +24118,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.9.0-rc.4" ,
-                    buildDate: "2023-03-20T17:32:42" ,
+                    version: "2.9.0-rc.5" ,
+                    buildDate: "2023-03-27T12:30:17" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });