ketcher-react 2.9.0-rc.5-dev.1 → 2.9.0-rc.7

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, isAttachmentBond, findStereoAtoms, RxnArrowMode, SimpleObjectMode, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, SdfSerializer, Render, FunctionalGroup, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, fromAtomsAttrs, fracAngle, Vec2, Action, fromSgroupDeletion, fromFragmentDeletion, fromAtomAddition, fromBondAddition, Atom as Atom$2, fromOneBondDeletion, bondChangingAction, fromBondsAttrs, fromChain, getItemsToFuse, getHoverToFuse, fromItemsFuse, fromStereoFlagUpdate, Scale, checkOverlapping, fromSeveralSgroupAddition, SgContexts, fromSgroupAction, mergeMapOfItemsToSet, setExpandSGroup, fromSimpleObjectResizing, fromArrowResizing, fromMultipleMove, fromTextDeletion, fromTextUpdating, 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, Struct, fromDescriptorsAlign, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
+import { KetSerializer, MolSerializer, Ketcher, FormatterFactory, StereLabelStyleType, StereoColoringType, Bond as Bond$2, Elements, AtomList, StereoLabel, isAttachmentBond, findStereoAtoms, RxnArrowMode, SimpleObjectMode, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, SdfSerializer, Render, FunctionalGroup, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, fromAtomsAttrs, fracAngle, Vec2, Action, fromSgroupDeletion, fromFragmentDeletion, fromAtomAddition, fromBondAddition, Atom as Atom$2, fromOneBondDeletion, bondChangingAction, fromBondsAttrs, fromChain, getItemsToFuse, getHoverToFuse, fromItemsFuse, fromStereoFlagUpdate, Scale, checkOverlapping, fromSeveralSgroupAddition, SgContexts, fromSgroupAction, mergeMapOfItemsToSet, 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, Struct, 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 _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -2476,6 +2476,9 @@ var tools$1 = typeSchema$1["enum"].reduce(function (res, type, i) {
 
 var KETCHER_INIT_EVENT_NAME = 'ketcher-init';
 var KETCHER_SAVED_SETTINGS_KEY = 'ketcher_editor_saved_settings';
+var MODES = {
+  FG: 'fg'
+};
 
 function ownKeys$1a(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$1a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -3010,7 +3013,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.5-dev.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.9.0-rc.7\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -3035,7 +3038,7 @@ var functionalGroupsLib = {
       }
     },
     selected: function selected(editor) {
-      return editor._tool.mode === 'fg';
+      return editor._tool.mode === MODES.FG;
     },
     disabled: function disabled(_, __, options) {
       return !options.app.functionalGroups;
@@ -8065,7 +8068,7 @@ function _objectSpread$10(target) { for (var i = 1; i < arguments.length; i++) {
 var initialState$1 = {
   lib: [],
   functionalGroupInfo: null,
-  mode: 'fg'
+  mode: MODES.FG
 };
 var functionalGroupsReducer = function functionalGroupsReducer() {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$1;
@@ -8140,7 +8143,7 @@ function ownKeys$$(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initialState = {
   lib: [],
-  mode: 'fg'
+  mode: MODES.FG
 };
 var saltsAndSolventsReducer = function saltsAndSolventsReducer() {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
@@ -12134,7 +12137,9 @@ function dropAndMerge(editor, mergeItems, action) {
   editor.hover(null);
   if (isMerging) editor.selection(null);
   if (((_dropItemAction = dropItemAction) === null || _dropItemAction === void 0 ? void 0 : _dropItemAction.operations.length) > 0) {
-    editor.update(dropItemAction);
+    editor.update(dropItemAction, false, {
+      resizeCanvas: false
+    });
   }
 }
 function getExpandGroupsInMergeAction(restruct, mergeItems) {
@@ -12226,72 +12231,6 @@ function updateSelectedAtoms(_ref) {
   }
 }
 
-var edgeOffset = 150;
-function isCloseToEdgeOfScreen(event) {
-  var clientX = event.clientX,
-      clientY = event.clientY;
-  var body = document.body;
-  var isCloseToLeftEdgeOfScreen = clientX <= edgeOffset;
-  var isCloseToTopEdgeOfScreen = clientY <= edgeOffset;
-  var isCloseToRightEdgeOfScreen = body.clientWidth - clientX <= edgeOffset;
-  var isCloseToBottomEdgeOfScreen = body.clientHeight - clientY <= edgeOffset;
-  return {
-    isCloseToLeftEdgeOfScreen: isCloseToLeftEdgeOfScreen,
-    isCloseToTopEdgeOfScreen: isCloseToTopEdgeOfScreen,
-    isCloseToRightEdgeOfScreen: isCloseToRightEdgeOfScreen,
-    isCloseToBottomEdgeOfScreen: isCloseToBottomEdgeOfScreen
-  };
-}
-function isCloseToEdgeOfCanvas(event, canvasSize) {
-  var layerX = event.layerX,
-      layerY = event.layerY;
-  var isCloseToLeftEdgeOfCanvas = layerX <= edgeOffset;
-  var isCloseToTopEdgeOfCanvas = layerY <= edgeOffset;
-  var isCloseToRightEdgeOfCanvas = canvasSize.x - layerX <= edgeOffset;
-  var isCloseToBottomEdgeOfCanvas = canvasSize.y - layerY <= edgeOffset;
-  return {
-    isCloseToLeftEdgeOfCanvas: isCloseToLeftEdgeOfCanvas,
-    isCloseToTopEdgeOfCanvas: isCloseToTopEdgeOfCanvas,
-    isCloseToRightEdgeOfCanvas: isCloseToRightEdgeOfCanvas,
-    isCloseToBottomEdgeOfCanvas: isCloseToBottomEdgeOfCanvas
-  };
-}
-function calculateCanvasExtension(clientArea, currentCanvasSize, extensionVector) {
-  var newHorizontalScrollPosition = clientArea.scrollLeft + extensionVector.x;
-  var newVerticalScrollPosition = clientArea.scrollTop + extensionVector.y;
-  var horizontalExtension = 0;
-  var verticalExtension = 0;
-  if (newHorizontalScrollPosition > currentCanvasSize.x) {
-    horizontalExtension = newHorizontalScrollPosition - currentCanvasSize.x;
-  }
-  if (newHorizontalScrollPosition < 0) {
-    horizontalExtension = Math.abs(newHorizontalScrollPosition);
-  }
-  if (newVerticalScrollPosition > currentCanvasSize.y) {
-    verticalExtension = newVerticalScrollPosition - currentCanvasSize.y;
-  }
-  if (newVerticalScrollPosition < 0) {
-    verticalExtension = Math.abs(newVerticalScrollPosition);
-  }
-  return new Vec2(horizontalExtension, verticalExtension, 0);
-}
-function shiftAndExtendCanvasByVector(vector, render) {
-  var clientArea = render.clientArea;
-  var extensionVector = calculateCanvasExtension(clientArea, render.sz.scaled(render.options.zoom), vector).scaled(1 / render.options.zoom);
-  if (extensionVector.x > 0 || extensionVector.y > 0) {
-    render.setPaperSize(render.sz.add(extensionVector));
-    render.setOffset(render.options.offset.add(vector));
-    render.ctab.translate(vector);
-  }
-  scrollByVector(vector, render);
-  render.update(false);
-}
-function scrollByVector(vector, render) {
-  var clientArea = render.clientArea;
-  clientArea.scrollLeft += vector.x * render.options.scale;
-  clientArea.scrollTop += vector.y * render.options.scale;
-}
-
 function _createForOfIteratorHelper$6(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$6(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$6(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$6(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$6(o, minLen); }
 function _arrayLikeToArray$6(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -12431,8 +12370,10 @@ var SelectTool = function () {
         dragCtx.action = fromMultipleMove(restruct, expSel, editor.render.page2obj(event).sub(dragCtx.xy0));
         dragCtx.mergeItems = getMergeItems(editor, expSel);
         editor.hover(getHoverToFuse(dragCtx.mergeItems));
-        extendCanvas(rnd, event);
-        editor.update(dragCtx.action, true);
+        resizeCanvas(rnd, event);
+        editor.update(dragCtx.action, true, {
+          resizeCanvas: false
+        });
         return true;
       }
       if (_classPrivateFieldGet(this, _lassoHelper).running()) {
@@ -12631,7 +12572,7 @@ var SelectTool = function () {
   }]);
   return SelectTool;
 }();
-function extendCanvas(render, event) {
+function resizeCanvas(render, event) {
   var offset = 1;
   var _isCloseToEdgeOfCanva = isCloseToEdgeOfCanvas(event, render.sz),
       isCloseToLeftEdgeOfCanvas = _isCloseToEdgeOfCanva.isCloseToLeftEdgeOfCanvas,
@@ -12643,34 +12584,39 @@ function extendCanvas(render, event) {
       isCloseToTopEdgeOfScreen = _isCloseToEdgeOfScree.isCloseToTopEdgeOfScreen,
       isCloseToRightEdgeOfScreen = _isCloseToEdgeOfScree.isCloseToRightEdgeOfScreen,
       isCloseToBottomEdgeOfScreen = _isCloseToEdgeOfScree.isCloseToBottomEdgeOfScreen;
-  if (isCloseToLeftEdgeOfCanvas) {
+  var _getDirections = getDirections(event),
+      isMovingLeft = _getDirections.isMovingLeft,
+      isMovingRight = _getDirections.isMovingRight,
+      isMovingTop = _getDirections.isMovingTop,
+      isMovingBottom = _getDirections.isMovingBottom;
+  if (isCloseToLeftEdgeOfCanvas && isMovingLeft) {
     shiftAndExtendCanvasByVector(new Vec2(-offset, 0, 0), render);
   }
-  if (isCloseToTopEdgeOfCanvas) {
+  if (isCloseToTopEdgeOfCanvas && isMovingTop) {
     shiftAndExtendCanvasByVector(new Vec2(0, -offset, 0), render);
   }
-  if (isCloseToRightEdgeOfCanvas) {
+  if (isCloseToRightEdgeOfCanvas && isMovingRight) {
     shiftAndExtendCanvasByVector(new Vec2(offset, 0, 0), render);
   }
-  if (isCloseToBottomEdgeOfCanvas) {
+  if (isCloseToBottomEdgeOfCanvas && isMovingBottom) {
     shiftAndExtendCanvasByVector(new Vec2(0, offset, 0), render);
   }
-  var isCloseToSomeEdgeOfCanvas = [isCloseToTopEdgeOfCanvas, isCloseToRightEdgeOfCanvas, isCloseToBottomEdgeOfCanvas, isCloseToLeftEdgeOfCanvas].some(function (isCloseToEdge) {
+  var isCloseToSomeEdgeOfCanvas = [isCloseToTopEdgeOfCanvas && isMovingTop, isCloseToRightEdgeOfCanvas && isMovingRight, isCloseToBottomEdgeOfCanvas && isMovingBottom, isCloseToLeftEdgeOfCanvas && isMovingLeft].some(function (isCloseToEdge) {
     return isCloseToEdge;
   });
   if (isCloseToSomeEdgeOfCanvas) {
     return;
   }
-  if (isCloseToTopEdgeOfScreen) {
+  if (isCloseToTopEdgeOfScreen && isMovingTop) {
     scrollByVector(new Vec2(0, -offset), render);
   }
-  if (isCloseToBottomEdgeOfScreen) {
+  if (isCloseToBottomEdgeOfScreen && isMovingBottom) {
     scrollByVector(new Vec2(0, offset), render);
   }
-  if (isCloseToLeftEdgeOfScreen) {
+  if (isCloseToLeftEdgeOfScreen && isMovingLeft) {
     scrollByVector(new Vec2(-offset, 0), render);
   }
-  if (isCloseToRightEdgeOfScreen) {
+  if (isCloseToRightEdgeOfScreen && isMovingRight) {
     scrollByVector(new Vec2(offset, 0), render);
   }
 }
@@ -13214,7 +13160,7 @@ var PasteTool = function () {
             pasteItems = _fromPaste6[1];
         this.action = _action;
         this.editor.update(this.action, true, {
-          extendCanvas: false
+          resizeCanvas: false
         });
         this.mergeItems = getMergeItems(this.editor, pasteItems);
         this.editor.hover(getHoverToFuse(this.mergeItems));
@@ -14095,7 +14041,7 @@ var TemplateTool = function () {
       this.findItems.push('atoms');
     }
     var bond = frag.bonds.get(this.template.bid);
-    if (bond && this.mode !== 'fg') {
+    if (bond && !this.isModeFunctionalGroup) {
       this.template.sign = getSign(frag, bond, this.template.xy0);
       this.findItems.push('bonds');
     }
@@ -14109,73 +14055,119 @@ var TemplateTool = function () {
     editor.hoverIcon.updatePosition();
   }
   _createClass(TemplateTool, [{
+    key: "showRemoveAbbreviationPopup",
+    value: function showRemoveAbbreviationPopup() {
+      var _this = this;
+      return this.editor.event.removeFG.dispatch({
+        fgIds: this.targetGroupsIds
+      }).then(function () {
+        _this.targetGroupsIds.length = 0;
+        return Promise.resolve();
+      });
+    }
+  }, {
+    key: "isModeFunctionalGroup",
+    get: function get() {
+      return this.mode === MODES.FG;
+    }
+  }, {
     key: "mousedown",
-    value: function mousedown(event) {
-      var closestItem = this.editor.findItem(event, ['atoms', 'bonds', 'sgroups', 'functionalGroups']);
-      var ctab = this.editor.render.ctab;
-      var struct = ctab.molecule;
-      if (struct.functionalGroups.size) {
-        this.targetGroupsIds = getGroupIdsFromItemArrays(struct, _objectSpread$N(_objectSpread$N({}, (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'atoms' && {
-          atoms: [closestItem.id]
-        }), (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'bonds' && {
-          bonds: [closestItem.id]
-        }));
-        if ((closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(closestItem.id, struct.functionalGroups)) {
-          this.targetGroupsIds.push(closestItem.id);
-        }
-      }
-      this.editor.hover(null);
-      this.dragCtx = {
-        xy0: this.editor.render.page2obj(event),
-        item: this.editor.findItem(event, this.findItems)
-      };
-      var dragCtx = this.dragCtx;
-      var ci = dragCtx.item;
-      if (!ci || this.isSaltOrSolvent) {
-        delete dragCtx.item;
-        return;
-      }
-      if (ci.map === 'bonds' && this.mode !== 'fg') {
-        var _struct$atoms$get, _struct$halfBonds$get;
-        var xy0 = new Vec2();
-        var bond = struct.bonds.get(ci.id);
-        var frid = (_struct$atoms$get = struct.atoms.get(bond === null || bond === void 0 ? void 0 : bond.begin)) === null || _struct$atoms$get === void 0 ? void 0 : _struct$atoms$get.fragment;
-        var frIds = struct.getFragmentIds(frid);
-        var count = 0;
-        var loop = (_struct$halfBonds$get = struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb1)) === null || _struct$halfBonds$get === void 0 ? void 0 : _struct$halfBonds$get.loop;
-        if (loop && loop < 0) {
-          var _struct$halfBonds$get2;
-          loop = (_struct$halfBonds$get2 = struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb2)) === null || _struct$halfBonds$get2 === void 0 ? void 0 : _struct$halfBonds$get2.loop;
-        }
-        if (loop && loop >= 0) {
-          var _struct$loops$get;
-          var loopHbs = (_struct$loops$get = struct.loops.get(loop)) === null || _struct$loops$get === void 0 ? void 0 : _struct$loops$get.hbs;
-          loopHbs === null || loopHbs === void 0 ? void 0 : loopHbs.forEach(function (hb) {
-            var _struct$halfBonds$get3;
-            var halfBondBegin = (_struct$halfBonds$get3 = struct.halfBonds.get(hb)) === null || _struct$halfBonds$get3 === void 0 ? void 0 : _struct$halfBonds$get3.begin;
-            if (halfBondBegin) {
-              var hbbAtom = struct.atoms.get(halfBondBegin);
-              if (hbbAtom) {
-                xy0.add_(hbbAtom.pp);
-                count++;
-              }
-            }
-          });
-        } else {
-          frIds.forEach(function (id) {
-            var atomById = struct.atoms.get(id);
-            if (atomById) {
-              xy0.add_(atomById.pp);
-              count++;
+    value: function () {
+      var _mousedown = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(event) {
+        var _struct$functionalGro;
+        var closestItem, ctab, struct, isTargetExpanded, isTargetAtomOrBond, dragCtx, ci, _struct$atoms$get, _struct$halfBonds$get, xy0, bond, frid, frIds, count, loop, _struct$halfBonds$get2, _struct$loops$get, loopHbs, sign;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                closestItem = this.editor.findItem(event, ['atoms', 'bonds', 'sgroups', 'functionalGroups']);
+                ctab = this.editor.render.ctab;
+                struct = ctab.molecule;
+                if (struct.functionalGroups.size) {
+                  this.targetGroupsIds = getGroupIdsFromItemArrays(struct, _objectSpread$N(_objectSpread$N({}, (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'atoms' && {
+                    atoms: [closestItem.id]
+                  }), (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'bonds' && {
+                    bonds: [closestItem.id]
+                  }));
+                  if (
+                  (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(closestItem.id, struct.functionalGroups)) {
+                    this.targetGroupsIds.push(closestItem.id);
+                  }
+                }
+                isTargetExpanded = (_struct$functionalGro = struct.functionalGroups.get(this.targetGroupsIds[0])) === null || _struct$functionalGro === void 0 ? void 0 : _struct$functionalGro.isExpanded;
+                isTargetAtomOrBond = this.targetGroupsIds.length && !this.isModeFunctionalGroup;
+                if (!(isTargetAtomOrBond || isTargetExpanded)) {
+                  _context.next = 10;
+                  break;
+                }
+                _context.next = 9;
+                return this.showRemoveAbbreviationPopup();
+              case 9:
+                return _context.abrupt("return");
+              case 10:
+                this.editor.hover(null);
+                this.dragCtx = {
+                  xy0: this.editor.render.page2obj(event),
+                  item: this.editor.findItem(event, this.findItems)
+                };
+                dragCtx = this.dragCtx;
+                ci = dragCtx.item;
+                if (!(!ci || this.isSaltOrSolvent)) {
+                  _context.next = 17;
+                  break;
+                }
+                delete dragCtx.item;
+                return _context.abrupt("return");
+              case 17:
+                if (ci.map === 'bonds' && !this.isModeFunctionalGroup) {
+                  xy0 = new Vec2();
+                  bond = struct.bonds.get(ci.id);
+                  frid = (_struct$atoms$get = struct.atoms.get(bond === null || bond === void 0 ? void 0 : bond.begin)) === null || _struct$atoms$get === void 0 ? void 0 : _struct$atoms$get.fragment;
+                  frIds = struct.getFragmentIds(frid);
+                  count = 0;
+                  loop = (_struct$halfBonds$get = struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb1)) === null || _struct$halfBonds$get === void 0 ? void 0 : _struct$halfBonds$get.loop;
+                  if (loop && loop < 0) {
+                    loop = (_struct$halfBonds$get2 = struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb2)) === null || _struct$halfBonds$get2 === void 0 ? void 0 : _struct$halfBonds$get2.loop;
+                  }
+                  if (loop && loop >= 0) {
+                    loopHbs = (_struct$loops$get = struct.loops.get(loop)) === null || _struct$loops$get === void 0 ? void 0 : _struct$loops$get.hbs;
+                    loopHbs === null || loopHbs === void 0 ? void 0 : loopHbs.forEach(function (hb) {
+                      var _struct$halfBonds$get3;
+                      var halfBondBegin = (_struct$halfBonds$get3 = struct.halfBonds.get(hb)) === null || _struct$halfBonds$get3 === void 0 ? void 0 : _struct$halfBonds$get3.begin;
+                      if (halfBondBegin) {
+                        var hbbAtom = struct.atoms.get(halfBondBegin);
+                        if (hbbAtom) {
+                          xy0.add_(hbbAtom.pp);
+                          count++;
+                        }
+                      }
+                    });
+                  } else {
+                    frIds.forEach(function (id) {
+                      var atomById = struct.atoms.get(id);
+                      if (atomById) {
+                        xy0.add_(atomById.pp);
+                        count++;
+                      }
+                    });
+                  }
+                  dragCtx.v0 = xy0.scaled(1 / count);
+                  sign = getSign(struct, bond, dragCtx.v0);
+                  dragCtx.sign1 = sign || 1;
+                  dragCtx.sign2 = this.template.sign;
+                }
+              case 18:
+              case "end":
+                return _context.stop();
             }
-          });
-        }
-        dragCtx.v0 = xy0.scaled(1 / count);
-        var sign = getSign(struct, bond, dragCtx.v0);
-        dragCtx.sign1 = sign || 1;
-        dragCtx.sign2 = this.template.sign;
+          }
+        }, _callee, this);
+      }));
+      function mousedown(_x) {
+        return _mousedown.apply(this, arguments);
       }
-    }
+      return mousedown;
+    }()
   }, {
     key: "mousemove",
     value: function mousemove(event) {
@@ -14190,7 +14182,7 @@ var TemplateTool = function () {
       var targetPos = null;
       var eventPos = this.editor.render.page2obj(event);
       var struct = this.editor.render.ctab.molecule;
-      if (ci && ci.map === 'bonds' && this.mode !== 'fg') {
+      if (ci && ci.map === 'bonds' && !this.isModeFunctionalGroup) {
         var bond = struct.bonds.get(ci.id);
         var sign = getSign(struct, bond, eventPos);
         if (dragCtx.sign1 * this.template.sign > 0) {
@@ -14221,7 +14213,7 @@ var TemplateTool = function () {
           var atom = struct.atoms.get(atomId);
           targetPos = atom === null || atom === void 0 ? void 0 : atom.pp;
           if (targetPos) {
-            extraBond = this.mode === 'fg' ? true : Vec2.dist(targetPos, eventPos) > 1;
+            extraBond = this.isModeFunctionalGroup ? true : Vec2.dist(targetPos, eventPos) > 1;
           }
         }
       }
@@ -14267,7 +14259,7 @@ var TemplateTool = function () {
       }
       dragCtx.action = action;
       this.editor.update(dragCtx.action, true);
-      if (this.mode !== 'fg') {
+      if (!this.isModeFunctionalGroup) {
         dragCtx.mergeItems = getItemsToFuse(this.editor, pasteItems);
         this.editor.hover(getHoverToFuse(dragCtx.mergeItems));
       }
@@ -14277,15 +14269,9 @@ var TemplateTool = function () {
   }, {
     key: "mouseup",
     value: function mouseup(event) {
-      var _this = this,
+      var _this2 = this,
           _ci;
       var dragCtx = this.dragCtx;
-      if (this.targetGroupsIds.length && this.mode !== 'fg') {
-        this.editor.event.removeFG.dispatch({
-          fgIds: this.targetGroupsIds
-        });
-        return;
-      }
       if (!dragCtx) {
         return true;
       }
@@ -14294,16 +14280,16 @@ var TemplateTool = function () {
       var struct = restruct.molecule;
       var ci = dragCtx.item;
       var functionalGroups = struct.functionalGroups;
-      if (dragCtx.action && ci && ci.map === 'bonds' && this.mode !== 'fg') {
+      if (dragCtx.action && ci && ci.map === 'bonds' && !this.isModeFunctionalGroup) {
         dragCtx.action.perform(restruct);
         var promise = fromTemplateOnBondAction(restruct, this.template, ci.id, this.editor.event, dragCtx.sign1 * dragCtx.sign2 > 0, true);
         promise.then(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
               action = _ref2[0],
               pasteItems = _ref2[1];
-          var mergeItems = getItemsToFuse(_this.editor, pasteItems);
+          var mergeItems = getItemsToFuse(_this2.editor, pasteItems);
           action = fromItemsFuse(restruct, mergeItems).mergeWith(action);
-          _this.editor.update(action);
+          _this2.editor.update(action);
         });
         return true;
       }
@@ -14312,7 +14298,7 @@ var TemplateTool = function () {
       if (this.isSaltOrSolvent) {
         addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
         return true;
-      } else if (((_ci = ci) === null || _ci === void 0 ? void 0 : _ci.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.mode === 'fg' && this.targetGroupsIds.length) {
+      } else if (((_ci = ci) === null || _ci === void 0 ? void 0 : _ci.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.isModeFunctionalGroup && this.targetGroupsIds.length) {
         functionalGroupRemoveAction = new Action();
         var _struct = this.editor.struct();
         var _restruct = this.editor.render.ctab;
@@ -14360,23 +14346,23 @@ var TemplateTool = function () {
             action = functionalGroupRemoveAction.mergeWith(action);
           }
           dragCtx.action = action;
-        } else if (ci.map === 'bonds' && this.mode !== 'fg') {
+        } else if (ci.map === 'bonds' && !this.isModeFunctionalGroup) {
           var _promise = fromTemplateOnBondAction(restruct, this.template, ci.id, this.editor.event, dragCtx.sign1 * dragCtx.sign2 > 0, true);
           _promise.then(function (_ref3) {
             var _ref4 = _slicedToArray(_ref3, 2),
                 action = _ref4[0],
                 pasteItems = _ref4[1];
-            if (_this.mode !== 'fg') {
-              var mergeItems = getItemsToFuse(_this.editor, pasteItems);
+            if (!_this2.isModeFunctionalGroup) {
+              var mergeItems = getItemsToFuse(_this2.editor, pasteItems);
               action = fromItemsFuse(restruct, mergeItems).mergeWith(action);
-              _this.editor.update(action);
+              _this2.editor.update(action);
             }
           });
           return true;
         }
       }
       this.editor.selection(null);
-      if (!dragCtx.mergeItems && pasteItems && this.mode !== 'fg') {
+      if (!dragCtx.mergeItems && pasteItems && !this.isModeFunctionalGroup) {
         dragCtx.mergeItems = getItemsToFuse(this.editor, pasteItems);
       }
       dragCtx.action = dragCtx.action ? fromItemsFuse(restruct, dragCtx.mergeItems).mergeWith(dragCtx.action) : fromItemsFuse(restruct, dragCtx.mergeItems);
@@ -14417,8 +14403,12 @@ function addSaltsAndSolventsOnCanvasWithoutMerge(restruct, template, dragCtx, ed
 }
 function getTemplateMode(tmpl) {
   var _tmpl$props;
-  if (tmpl.mode) return tmpl.mode;
-  if (['Functional Groups', 'Salts and Solvents'].includes((_tmpl$props = tmpl.props) === null || _tmpl$props === void 0 ? void 0 : _tmpl$props.group)) return 'fg';
+  if (tmpl.mode) {
+    return tmpl.mode;
+  }
+  if (['Functional Groups', 'Salts and Solvents'].includes((_tmpl$props = tmpl.props) === null || _tmpl$props === void 0 ? void 0 : _tmpl$props.group)) {
+    return MODES.FG;
+  }
   return null;
 }
 function getSign(molecule, bond, v) {
@@ -15937,7 +15927,7 @@ var HoverIcon = function () {
   }, {
     key: "onMouseLeave",
     value: function onMouseLeave(event) {
-      if (!this.isOverLoader(event)) {
+      if (!this.isOverLoader(event) && this.isShown) {
         this.shouldBeShownWhenMouseBack = true;
         this.hide();
       }
@@ -15962,9 +15952,12 @@ var HoverIcon = function () {
     }
   }, {
     key: "hide",
-    value: function hide() {
+    value: function hide(restShouldBeShownWhenMouseBack) {
       this.element.hide();
       this.isShown = false;
+      if (restShouldBeShownWhenMouseBack) {
+        this.shouldBeShownWhenMouseBack = false;
+      }
     }
   }, {
     key: "initialize",
@@ -15989,9 +15982,8 @@ var HoverIcon = function () {
       this.element = icon.element;
       this._fill = icon.fill;
       this._label = icon.label;
-      this.isShown = true;
       this.shouldBeShownWhenMouseBack = false;
-      this.updatePosition();
+      this.hide();
     }
   }]);
   return HoverIcon;
@@ -16096,7 +16088,7 @@ var Editor$3 = function () {
       var tool = new tools[name](this, opts);
       var isAtomToolChosen = name === 'atom';
       if (!isAtomToolChosen) {
-        this.hoverIcon.hide();
+        this.hoverIcon.hide(true);
       }
       if (!tool || tool.isNotActiveTool) {
         return null;
@@ -16155,7 +16147,7 @@ var Editor$3 = function () {
       this.render = new Render(this.render.clientArea, Object.assign({
         scale: SCALE
       }, value));
-      this.render.setMolecule(struct);
+      this.struct(struct);
       this.render.setZoom(zoom);
       this.render.update();
       return this.render.options;
@@ -16209,7 +16201,9 @@ var Editor$3 = function () {
       }
       this.render.ctab.setSelection(this._selection);
       this.event.selectionChange.dispatch(this._selection);
-      this.render.update();
+      this.render.update(false, null, {
+        resizeCanvas: false
+      });
       return this._selection;
     }
   }, {
@@ -16228,7 +16222,7 @@ var Editor$3 = function () {
     key: "update",
     value: function update(action, ignoreHistory) {
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-        extendCanvas: true
+        resizeCanvas: true
       };
       if (action === true) {
         this.render.update(true, null, options);
@@ -17991,8 +17985,7 @@ function ownKeys$A(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function GenericInput(_ref) {
   _ref.schema;
-      var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
+      var value = _ref.value,
       onChange = _ref.onChange,
       innerRef = _ref.innerRef,
       _ref$type = _ref.type,
@@ -18014,7 +18007,7 @@ function GenericInput(_ref) {
   return jsxs(Fragment, {
     children: [jsx("input", _objectSpread$A({
       type: type,
-      value: value,
+      value: value !== null && value !== void 0 ? value : '',
       onInput: onChange,
       onChange: onChange,
       className: clsx(classes$A.input, classes$A.genericInput),
@@ -24055,8 +24048,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.9.0-rc.5-dev.1" ,
-                    buildDate: "2023-03-30T12:13:55" ,
+                    version: "2.9.0-rc.7" ,
+                    buildDate: "2023-04-19T07:45:20" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });
@@ -24166,5 +24159,5 @@ function Editor(props) {
   });
 }
 
-export { Editor, KETCHER_INIT_EVENT_NAME, KETCHER_SAVED_SETTINGS_KEY };
+export { Editor, KETCHER_INIT_EVENT_NAME, KETCHER_SAVED_SETTINGS_KEY, MODES };
 //# sourceMappingURL=index.modern.js.map