ketcher-react 2.13.0-rc.3-dev.2 → 2.14.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$2 from '@babel/runtime/helpers/classCallCheck';
 import _createClass$1 from '@babel/runtime/helpers/createClass';
-import { KetSerializer, MolSerializer, Ketcher, FormatterFactory, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, Bond as Bond$2, Elements, AtomList, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, SimpleObjectMode, emitEventRequestIsFinished, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, RenderStruct, Struct, SdfSerializer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, Vec2, fromMultipleMove, scrollByVector, FunctionalGroup, Scale, fracAngle, fromSgroupDeletion, fromFragmentDeletion, mergeMapOfItemsToSet, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, fromSgroupAction, fromItemsFuse, ReBond, setExpandSGroup, fromBondsAttrs, OperationType, ReStruct, fromSimpleObjectResizing, fromArrowResizing, getItemsToFuse, getHoverToFuse, fromTextDeletion, fromTextUpdating, isCloseToEdgeOfCanvas, isCloseToEdgeOfScreen, getDirections, shiftAndExtendCanvasByVector, formatProperties, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromPaste, fromTemplateOnAtom, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTemplateOnBondAction, fromTemplateOnCanvas, fromTextCreation, fromHighlightCreate, fromHighlightClear, fromNewCanvas, Render, fromDescriptorsAlign, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
+import { KetSerializer, MolSerializer, Ketcher, defaultBondThickness, FormatterFactory, StereLabelStyleType, StereoColoringType, ShowHydrogenLabels, ShowHydrogenLabelNames, Bond as Bond$2, Elements, AtomList, StereoLabel, isAttachmentBond, Atom as Atom$2, findStereoAtoms, RxnArrowMode, SimpleObjectMode, emitEventRequestIsFinished, SGroup as SGroup$1, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, RenderStruct, Struct, SdfSerializer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, Vec2, fromMultipleMove, scrollByVector, FunctionalGroup, Scale, fromSgroupDeletion, fromFragmentDeletion, mergeMapOfItemsToSet, vectorUtils, fromBondAddition, Action, fromAtomAddition, fromAtomsAttrs, checkOverlapping, fromSeveralSgroupAddition, expandSGroupWithMultipleAttachmentPoint, SgContexts, fromSgroupAction, fromItemsFuse, ReBond, setExpandSGroup, fromBondsAttrs, OperationType, ReStruct, fromSimpleObjectResizing, fromArrowResizing, getItemsToFuse, getHoverToFuse, fromTextDeletion, fromTextUpdating, isCloseToEdgeOfCanvas, isCloseToEdgeOfScreen, getDirections, shiftAndExtendCanvasByVector, formatProperties, Fragment as Fragment$1, fromRGroupAttachmentPointUpdate, fromOneBondDeletion, bondChangingAction, fromChain, fromStereoFlagUpdate, fromOneAtomDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromRGroupAttachmentPointDeletion, fromPaste, fromTemplateOnAtom, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromSimpleObjectAddition, fromTemplateOnBondAction, fromTemplateOnCanvas, fromTextCreation, fromHighlightCreate, fromHighlightClear, fromNewCanvas, Render, fromDescriptorsAlign, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, b64toBlob, Generics, TextCommand, DefaultStructServiceOptions } from 'ketcher-core';
 import * as React from 'react';
 import React__default, { createRef, Component, useRef, useEffect, useState, useMemo, createElement, forwardRef, useCallback, useLayoutEffect, Fragment as Fragment$2, PureComponent, lazy, Suspense } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -210,7 +210,8 @@ function _copyImageToClipboard() {
             _context.next = 15;
             return ketcher.generateImage(structStr, {
               outputFormat: 'png',
-              backgroundColor: '255, 255, 255'
+              backgroundColor: '255, 255, 255',
+              bondThickness: options.settings.bondThickness || defaultBondThickness
             });
           case 15:
             image = _context.sent;
@@ -370,7 +371,6 @@ function _copy(cb, data) {
         cb.setData(fmt, data[fmt]);
       });
     } catch (ex) {
-      console.info("Could not write exact type ".concat(curFmt));
     }
   }
 }
@@ -555,7 +555,7 @@ var render = {
   bondThickness: {
     title: 'Bond thickness',
     type: 'integer',
-    "default": 2,
+    "default": defaultBondThickness,
     minimum: 1,
     maximum: 96
   },
@@ -703,7 +703,6 @@ var storage = {
     try {
       item = JSON.parse(localStorage.getItem(key));
     } catch (ex) {
-      console.info('LocalStorage:', ex.name);
     }
     return item;
   },
@@ -713,7 +712,6 @@ var storage = {
       localStorage.setItem(key, JSON.stringify(data));
       isSet = true;
     } catch (ex) {
-      console.info('LocalStorage:', ex.name);
       isSet = false;
     }
     return isSet;
@@ -821,9 +819,11 @@ function optionsReducer() {
   if (type === 'APP_OPTIONS') return _objectSpread$1j(_objectSpread$1j({}, state), {}, {
     app: _objectSpread$1j(_objectSpread$1j({}, state.app), data)
   });
-  if (type === 'SAVE_SETTINGS') return _objectSpread$1j(_objectSpread$1j({}, state), {}, {
-    settings: data
-  });
+  if (type === 'SAVE_SETTINGS') {
+    return _objectSpread$1j(_objectSpread$1j({}, state), {}, {
+      settings: _objectSpread$1j(_objectSpread$1j({}, state.settings), data)
+    });
+  }
   if (type === 'SAVE_CHECK_OPTS') return _objectSpread$1j(_objectSpread$1j({}, state), {}, {
     check: data
   });
@@ -848,7 +848,6 @@ function constant(schema, prop) {
   return desc.constant || desc["enum"][0];
 }
 function mapOf(schema, prop) {
-  console.assert(schema.oneOf);
   return schema.oneOf.reduce(function (res, desc) {
     res[constant(desc, prop)] = desc;
     return res;
@@ -2161,7 +2160,7 @@ var toolActions = {
     }
   },
   'reaction-arrow-filled-triangle': {
-    title: 'Arrow Filled Triangle',
+    title: 'Arrow Filled Triangle Tool',
     action: {
       tool: 'reactionarrow',
       opts: RxnArrowMode.FilledTriangle
@@ -2540,7 +2539,6 @@ function onAction(action) {
   };
 }
 function parseStruct(struct, server, options) {
-  console.log('shared.ts::parseStruct::struct', struct);
   if (typeof struct === 'string') {
     options = options || {};
     var _options = options;
@@ -2548,9 +2546,7 @@ function parseStruct(struct, server, options) {
       _options.fragment;
       var formatterOptions = _objectWithoutProperties(_options, _excluded$y);
     var format = identifyStructFormat(struct);
-    console.log('shared.ts::parseStruct::format', format);
     if (format === SupportedFormat.cdx) {
-      console.log('shared.ts::parseStruct::format === SupportedFormat.cdx');
       struct = "base64::".concat(struct.replace(/\s/g, ''));
     }
     var factory = new FormatterFactory(server);
@@ -2572,7 +2568,6 @@ function load(struct, options) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              console.log('shared.ts::load::struct', struct);
               state = getState();
               editor = state.editor;
               server = state.server;
@@ -2584,26 +2579,26 @@ function load(struct, options) {
                 ignoreChiralFlag: editor.options().ignoreChiralFlag
               });
               dispatch(setAnalyzingFile(true));
-              _context.prev = 9;
-              _context.next = 12;
+              _context.prev = 8;
+              _context.next = 11;
               return parseStruct(struct, server, otherOptions);
-            case 12:
+            case 11:
               parsedStruct = _context.sent;
               _otherOptions = otherOptions, fragment = _otherOptions.fragment;
               hasUnsupportedGroups = parsedStruct.sgroups.some(function (sGroup) {
                 return !supportedSGroupTypes[sGroup.type];
               });
               if (!hasUnsupportedGroups) {
-                _context.next = 19;
+                _context.next = 18;
                 break;
               }
-              _context.next = 18;
+              _context.next = 17;
               return editor.event.confirm.dispatch();
-            case 18:
+            case 17:
               parsedStruct.sgroups = parsedStruct.sgroups.filter(function (_key, sGroup) {
                 return supportedSGroupTypes[sGroup.type];
               });
-            case 19:
+            case 18:
               parsedStruct.rescale();
               if (editor.struct().atoms.size) {
                 oldStruct = editor.struct().clone();
@@ -2656,23 +2651,23 @@ function load(struct, options) {
               dispatch({
                 type: 'MODAL_CLOSE'
               });
-              _context.next = 37;
+              _context.next = 36;
               break;
-            case 33:
-              _context.prev = 33;
-              _context.t0 = _context["catch"](9);
+            case 32:
+              _context.prev = 32;
+              _context.t0 = _context["catch"](8);
               dispatch(setAnalyzingFile(false));
               _context.t0 && errorHandler && errorHandler(_context.t0.message);
-            case 37:
-              _context.prev = 37;
+            case 36:
+              _context.prev = 36;
               emitEventRequestIsFinished();
-              return _context.finish(37);
-            case 40:
+              return _context.finish(36);
+            case 39:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[9, 33, 37, 40]]);
+      }, _callee, null, [[8, 32, 36, 39]]);
     }));
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
@@ -3047,7 +3042,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.13.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.14.0-rc.1\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -5376,7 +5371,7 @@ function SvgClose(props) {
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
     d: "M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z",
-    fill: "#333"
+    fill: "currentColor"
   })));
 }
 
@@ -7190,7 +7185,8 @@ var ActionButton = function ActionButton(props) {
     disableableButtons = props.disableableButtons,
     indigoVerification = props.indigoVerification,
     className = props.className,
-    onAction = props.onAction;
+    onAction = props.onAction,
+    dataTestId = props.dataTestId;
   if (status.hidden) {
     return null;
   }
@@ -7202,7 +7198,7 @@ var ActionButton = function ActionButton(props) {
     }
   };
   return jsxs("button", {
-    "data-testid": name,
+    "data-testid": dataTestId || name,
     disabled: disabled,
     onClick: handleClick,
     title: shortcut ? "".concat(action === null || action === void 0 ? void 0 : action.title, " (").concat(shortcut, ")") : action === null || action === void 0 ? void 0 : action.title,
@@ -7471,7 +7467,8 @@ var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
     className = props.className,
     vertical = props.vertical,
     onAction = props.onAction,
-    onOpen = props.onOpen;
+    onOpen = props.onOpen,
+    dataTestId = props.dataTestId;
   var ref = useRef(null);
   var _usePortalOpening = usePortalOpening([id, opened, options]),
     _usePortalOpening2 = _slicedToArray$1(_usePortalOpening, 1),
@@ -7536,7 +7533,7 @@ var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
       action: config[currentId],
       status: currentStatus,
       selected: selected,
-      "data-testid": iconName
+      dataTestId: dataTestId || iconName
     })), !isOpen && jsx(Icon, {
       className: "".concat(classes$N.icon, " ").concat((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.selected) && classes$N.iconSelected),
       name: "dropdown",
@@ -7567,7 +7564,8 @@ var ToolbarGroupItem = function ToolbarGroupItem(props) {
     disableableButtons = props.disableableButtons,
     vertical = props.vertical,
     onAction = props.onAction,
-    onOpen = props.onOpen;
+    onOpen = props.onOpen,
+    dataTestId = props.dataTestId;
   if (!(options !== null && options !== void 0 && options.length)) {
     var _status$id;
     var iconName = getIconName(id);
@@ -7579,7 +7577,8 @@ var ToolbarGroupItem = function ToolbarGroupItem(props) {
       selected: !!((_status$id = status[id]) !== null && _status$id !== void 0 && _status$id.selected),
       indigoVerification: indigoVerification,
       disableableButtons: disableableButtons,
-      onAction: onAction
+      onAction: onAction,
+      dataTestId: dataTestId
     });
   }
   return jsx(ToolbarMultiToolItem, {
@@ -7592,7 +7591,8 @@ var ToolbarGroupItem = function ToolbarGroupItem(props) {
     indigoVerification: indigoVerification,
     onAction: onAction,
     onOpen: onOpen,
-    vertical: vertical
+    vertical: vertical,
+    dataTestId: dataTestId
   });
 };
 
@@ -8068,9 +8068,7 @@ function execute(activeTool, _ref) {
     }
   } else if (typeof action === 'function') {
     action(editor, server, options);
-  } else {
-    console.info('no action');
-  }
+  } else ;
   return activeTool;
 }
 function selected(actObj, activeTool, _ref2) {
@@ -8162,28 +8160,22 @@ function fileOpener(server) {
 }
 function throughFileReader(file) {
   var isCDX = file.name.endsWith('cdx') && !file.name.endsWith('b64cdx');
-  console.log('fileOpener.js::throughFileReader::file', file);
   return new Promise(function (resolve, reject) {
     var rd = new FileReader();
     rd.onload = function () {
-      console.log('fileOpener.js::throughFileReader::onload::rd.result', rd.result);
       var content;
       if (isCDX) {
         var base64String = rd.result.split(',').at(-1);
-        console.log('fileOpener.js::throughFileReader::onload::base64String', base64String);
         content = base64String;
       } else {
         content = rd.result;
       }
-      console.log('fileOpener.js::throughFileReader::onload::content', content);
-      console.log('fileOpener.js::throughFileReader::onload::file.msClose', file.msClose);
       if (file.msClose) file.msClose();
       resolve(content);
     };
     rd.onerror = function (event) {
       reject(event);
     };
-    console.log('fileOpener.js::throughFileReader::isCdx', isCDX);
     isCDX ? rd.readAsDataURL(file) : rd.readAsText(file, 'UTF-8');
   });
 }
@@ -13024,9 +13016,7 @@ var useSubscriptionOnEvents = function useSubscriptionOnEvents() {
     var unsubscribeOnUnMount = function unsubscribeOnUnMount() {
       unsubscribe(getKetcherInstance());
     };
-    window.addEventListener(KETCHER_INIT_EVENT_NAME, function () {
-      subscribeOnInit();
-    });
+    window.addEventListener(KETCHER_INIT_EVENT_NAME, subscribeOnInit);
     return function () {
       unsubscribeOnUnMount();
       window.removeEventListener(KETCHER_INIT_EVENT_NAME, subscribeOnInit);
@@ -13174,10 +13164,12 @@ var LeftToolbar = function LeftToolbar(props) {
   var sizeRef = useRef();
   var Item = function Item(_ref) {
     var id = _ref.id,
-      options = _ref.options;
+      options = _ref.options,
+      dataTestId = _ref.dataTestId;
     return ToolbarGroupItem(_objectSpread$V({
       id: id,
-      options: options
+      options: options,
+      dataTestId: dataTestId
     }, rest));
   };
   var scrollUp = function scrollUp() {
@@ -13223,6 +13215,12 @@ var LeftToolbar = function LeftToolbar(props) {
             return createElement(Shape, _objectSpread$V(_objectSpread$V({}, rest), {}, {
               key: item.id
             }));
+          case 'bonds':
+            return jsx(Item, {
+              id: item.id,
+              options: item.options,
+              dataTestId: "bonds"
+            }, item.id);
           default:
             return jsx(Item, {
               id: item.id,
@@ -14091,7 +14089,6 @@ var TopToolbar = function TopToolbar(_ref) {
       isCollapsed: width < collapseLimit
     }), jsx(SystemControls, {
       onHistoryClick: function onHistoryClick() {
-        console.log('History button clicked');
       },
       onSettingsOpen: onSettingsOpen,
       onFullscreen: onFullscreen,
@@ -14751,38 +14748,6 @@ var LassoHelper = function () {
   return LassoHelper;
 }();
 
-function calcAngle$1(pos0, pos1) {
-  var v = Vec2.diff(pos1, pos0);
-  return Math.atan2(v.y, v.x);
-}
-function calcNewAtomPos(pos0, pos1, ctrlKey) {
-  var v = new Vec2(1, 0).rotate(ctrlKey ? calcAngle$1(pos0, pos1) : fracAngle(pos0, pos1));
-  v.add_(pos0);
-  return v;
-}
-function degrees(angle) {
-  var degree = Math.round(angle / Math.PI * 180);
-  if (degree > 180) degree -= 360;else if (degree <= -180) degree += 360;
-  return degree;
-}
-function normalizeAngle(angle) {
-  var angleWithinFullCircle = angle % (2 * Math.PI);
-  if (angleWithinFullCircle > Math.PI) {
-    return angleWithinFullCircle - 2 * Math.PI;
-  }
-  if (angleWithinFullCircle <= -Math.PI) {
-    return angleWithinFullCircle + 2 * Math.PI;
-  }
-  return angleWithinFullCircle;
-}
-var utils = {
-  calcAngle: calcAngle$1,
-  fracAngle: fracAngle,
-  calcNewAtomPos: calcNewAtomPos,
-  degrees: degrees,
-  normalizeAngle: normalizeAngle
-};
-
 function deleteFunctionalGroups(sGroupsId, struct, action) {
   var deletedAtoms = [];
   var functionalGroups = struct.molecule.functionalGroups;
@@ -14935,13 +14900,13 @@ var AtomTool = function () {
       }
       if (atomId !== undefined) {
         var atom = molecule.atoms.get(atomId);
-        var angle = utils.calcAngle(atom === null || atom === void 0 ? void 0 : atom.pp, rnd.page2obj(event));
-        if (!event.ctrlKey) angle = utils.fracAngle(angle, null);
-        var degrees = utils.degrees(angle);
+        var angle = vectorUtils.calcAngle(atom.pp, rnd.page2obj(event));
+        if (!event.ctrlKey) angle = vectorUtils.fracAngle(angle, null);
+        var degrees = vectorUtils.degrees(angle);
         editor.event.message.dispatch({
           info: degrees + 'º'
         });
-        var newAtomPos = utils.calcNewAtomPos(atom === null || atom === void 0 ? void 0 : atom.pp, rnd.page2obj(event), event.ctrlKey);
+        var newAtomPos = vectorUtils.calcNewAtomPos(atom.pp, rnd.page2obj(event), event.ctrlKey);
         if (dragCtx.action) {
           dragCtx.action.perform(reStruct);
         }
@@ -15468,7 +15433,6 @@ var SGroupTool = function () {
           editor.selection(null);
         }
       })["catch"](function (error) {
-        console.error(error);
       });
     }
   }]);
@@ -15908,7 +15872,6 @@ function getStructCenter(ReStruct, selection) {
   return Vec2.lc2(bb.p0, 0.5, bb.p1, 0.5);
 }
 function recoordinate(editor, rp) {
-  console.assert(rp, 'Reference point not specified');
   if (rp) {
     editor.render.setScrollOffset(rp.x, rp.y);
   } else {
@@ -16037,8 +16000,8 @@ var SelectTool = function () {
         var shouldDisplayDegree = dragCtx.item.map === 'atoms' && (atoms === null || atoms === void 0 ? void 0 : (_atoms$get = atoms.get(dragCtx.item.id)) === null || _atoms$get === void 0 ? void 0 : _atoms$get.neighbors.length) === 1 && (selection === null || selection === void 0 ? void 0 : (_selection$atoms = selection.atoms) === null || _selection$atoms === void 0 ? void 0 : _selection$atoms.length) === 1 && !selection.bonds;
         if (shouldDisplayDegree) {
           var pos = rnd.page2obj(event);
-          var angle = utils.calcAngle(dragCtx.xy0, pos);
-          var degrees = utils.degrees(angle);
+          var angle = vectorUtils.calcAngle(dragCtx.xy0, pos);
+          var degrees = vectorUtils.degrees(angle);
           editor.event.message.dispatch({
             info: degrees + 'º'
           });
@@ -17963,9 +17926,9 @@ var BondTool = function () {
       if ('dragCtx' in this) {
         var dragCtx = this.dragCtx;
         var pos = rnd.page2obj(event);
-        var angle = utils.calcAngle(dragCtx.xy0, pos);
-        if (!event.ctrlKey) angle = utils.fracAngle(angle, null);
-        var degrees = utils.degrees(angle);
+        var angle = vectorUtils.calcAngle(dragCtx.xy0, pos);
+        if (!event.ctrlKey) angle = vectorUtils.fracAngle(angle, null);
+        var degrees = vectorUtils.degrees(angle);
         this.editor.event.message.dispatch({
           info: degrees + 'º'
         });
@@ -18053,10 +18016,11 @@ var BondTool = function () {
             var xy1 = rnd.page2obj(event);
             dist = Vec2.dist(dragCtx.xy0, xy1);
             if (beginPos) {
-              endPos = utils.calcNewAtomPos(beginPos, xy1, event.ctrlKey);
+              endPos = vectorUtils.calcNewAtomPos(beginPos, xy1, event.ctrlKey);
             } else {
               var atom = rnd.ctab.molecule.atoms.get(beginAtom);
-              endPos = utils.calcNewAtomPos(atom === null || atom === void 0 ? void 0 : atom.pp.get_xy0(), xy1, event.ctrlKey);
+              endPos = vectorUtils.calcNewAtomPos(
+              atom.pp.get_xy0(), xy1, event.ctrlKey);
             }
           }
           if (dist > 0.3) {
@@ -18289,7 +18253,7 @@ var ChainTool = function () {
         var pos0 = dragCtx.item ? (_atoms$get = atoms.get(dragCtx.item.id)) === null || _atoms$get === void 0 ? void 0 : _atoms$get.pp : dragCtx.xy0;
         var pos1 = editor.render.page2obj(event);
         var sectCount = Math.ceil(Vec2.diff(pos1, pos0).length());
-        var angle = event.ctrlKey ? utils.calcAngle(pos0, pos1) : utils.fracAngle(pos0, pos1);
+        var angle = event.ctrlKey ? vectorUtils.calcAngle(pos0, pos1) : vectorUtils.fracAngle(pos0, pos1);
         var _fromChain = fromChain(restruct, pos0, angle, sectCount, dragCtx.item ? dragCtx.item.id : null),
           _fromChain2 = _slicedToArray$1(_fromChain, 2),
           action = _fromChain2[0],
@@ -18795,7 +18759,6 @@ var EraserTool = function () {
       } else if (ci.map === 'rgroupAttachmentPoints') {
         this.editor.update(fromRGroupAttachmentPointDeletion(restruct, ci.id));
       } else {
-        console.error('EraserTool: unable to delete the object ' + ci.map + '[' + ci.id + ']');
         return;
       }
       this.editor.selection(null);
@@ -18974,11 +18937,11 @@ var PasteTool = function () {
           var atom = this.editor.struct().atoms.get(atomId);
           pos0 = atom === null || atom === void 0 ? void 0 : atom.pp;
         }
-        var angle = utils.calcAngle(pos0, pos1);
+        var angle = vectorUtils.calcAngle(pos0, pos1);
         if (!event.ctrlKey) {
-          angle = utils.fracAngle(angle, null);
+          angle = vectorUtils.fracAngle(angle, null);
         }
-        var degrees = utils.degrees(angle);
+        var degrees = vectorUtils.degrees(angle);
         if (
         this.dragCtx.hasOwnProperty('angle') && this.dragCtx.angle === degrees) return;
         if (this.dragCtx.action) {
@@ -19038,7 +19001,7 @@ var PasteTool = function () {
         var action = this.action;
         delete this.action;
         if (!this.isSingleContractedGroup || !this.mergeItems) {
-          this.editor.update(dropAndMerge(this.editor, this.mergeItems, action, true));
+          dropAndMerge(this.editor, this.mergeItems, action, true);
         }
       }
     }
@@ -19073,7 +19036,7 @@ function prepareTemplateFromSingleGroup(molecule) {
   template.xy0 = xy0.scaled(1 / (molecule.atoms.size || 1));
   var atom = molecule.atoms.get(template.aid);
   if (atom) {
-    template.angle0 = utils.calcAngle(atom.pp, template.xy0);
+    template.angle0 = vectorUtils.calcAngle(atom.pp, template.xy0);
   }
   return template;
 }
@@ -19661,6 +19624,17 @@ var ReactionUnmapTool = function () {
   return ReactionUnmapTool;
 }();
 
+function normalizeAngle(angle) {
+  var angleWithinFullCircle = angle % (2 * Math.PI);
+  if (angleWithinFullCircle > Math.PI) {
+    return angleWithinFullCircle - 2 * Math.PI;
+  }
+  if (angleWithinFullCircle <= -Math.PI) {
+    return angleWithinFullCircle + 2 * Math.PI;
+  }
+  return angleWithinFullCircle;
+}
+
 function ownKeys$N(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$N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SNAP_ANGLES_RELATIVE_TO_FIXED_BOND = [Math.PI / 2, -Math.PI / 2, 2 * Math.PI / 3, -(2 * Math.PI) / 3, Math.PI];
@@ -19679,7 +19653,7 @@ var RotateTool = function () {
       }
       var dragCtx = _this.dragCtx;
       var mousePos = _this.editor.render.page2obj(event);
-      var mouseMoveAngle = utils.calcAngle(dragCtx.xy0, mousePos) - dragCtx.angle1;
+      var mouseMoveAngle = vectorUtils.calcAngle(dragCtx.xy0, mousePos) - dragCtx.angle1;
       var rotateAngle = mouseMoveAngle;
       _this.reStruct.clearSnappingBonds();
       if (_this.snapInfo) {
@@ -19690,9 +19664,9 @@ var RotateTool = function () {
           _this$snap2 = _slicedToArray$1(_this$snap, 2),
           isSnapping = _this$snap2[0],
           rotateAngleWithSnapping = _this$snap2[1];
-        rotateAngle = isSnapping ? rotateAngleWithSnapping : utils.fracAngle(mouseMoveAngle, null);
+        rotateAngle = isSnapping ? rotateAngleWithSnapping : vectorUtils.fracAngle(mouseMoveAngle, null);
       }
-      var rotateAngleInDegrees = utils.degrees(rotateAngle);
+      var rotateAngleInDegrees = vectorUtils.degrees(rotateAngle);
       if ('angle' in dragCtx && dragCtx.angle === rotateAngleInDegrees) {
         return true;
       }
@@ -19750,7 +19724,7 @@ var RotateTool = function () {
     value: function mousedownHandle(handleCenter, center) {
       this.dragCtx = {
         xy0: center,
-        angle1: utils.calcAngle(center, handleCenter)
+        angle1: vectorUtils.calcAngle(center, handleCenter)
       };
       this.initSnapInfo();
     }
@@ -19897,7 +19871,7 @@ var RotateTool = function () {
       var absoluteSnapAngles = [];
       var snapAngleToHalfBonds = new Map();
       SNAP_ANGLES_RELATIVE_TO_FIXED_BOND.forEach(function (angle) {
-        var snapAngle = utils.normalizeAngle(fixedHalfBondAngle + angle);
+        var snapAngle = normalizeAngle(fixedHalfBondAngle + angle);
         absoluteSnapAngles.push(snapAngle);
         snapAngleToHalfBonds.set(snapAngle, [rotatableHalfBondId, fixedHalfBondId]);
       });
@@ -19916,8 +19890,8 @@ var RotateTool = function () {
           var currentHalfBondId = fixedHalfBondIds[j];
           var currentHalfBondAngle = fixedHalfBondAngles[j];
           var difference = currentHalfBondAngle - previousHalfBondAngle;
-          var bisectorAngle = utils.normalizeAngle(currentHalfBondAngle - difference / 2);
-          var snapAngle = difference > Math.PI ? bisectorAngle : utils.normalizeAngle(bisectorAngle + Math.PI);
+          var bisectorAngle = normalizeAngle(currentHalfBondAngle - difference / 2);
+          var snapAngle = difference > Math.PI ? bisectorAngle : normalizeAngle(bisectorAngle + Math.PI);
           absoluteSnapAngles.push(snapAngle);
           snapAngleToHalfBonds.set(snapAngle, [rotatableHalfBondId, previousHalfBondId, currentHalfBondId]);
         }
@@ -19963,7 +19937,7 @@ var RotateTool = function () {
       if (!this.snapInfo) {
         return [isSnapping, rotateAngle];
       }
-      var newRotatedHalfBondAngle = utils.normalizeAngle(this.snapInfo.rotatableHalfBondAngle + mouseMoveAngle);
+      var newRotatedHalfBondAngle = normalizeAngle(this.snapInfo.rotatableHalfBondAngle + mouseMoveAngle);
       this.snapInfo.absoluteSnapAngles.some(function (snapAngle, index) {
         if (Math.abs(newRotatedHalfBondAngle - snapAngle) <= MAX_SNAP_DELTA) {
           isSnapping = true;
@@ -20094,11 +20068,74 @@ var SimpleObjectTool = function () {
 
 function ownKeys$M(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$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var PREVIEW_DELAY = 300;
+function getBondFlipSign(struct, bond) {
+  var _struct$atoms$get, _struct$halfBonds$get;
+  var xy0 = new Vec2();
+  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++;
+      }
+    });
+  }
+  var v0 = xy0.scaled(1 / count);
+  return getSign(struct, bond, v0) || 1;
+}
+function getAngleFromEvent(event, ci, restruct) {
+  var _restruct$atoms$get;
+  var degree = (_restruct$atoms$get = restruct.atoms.get(ci.id)) === null || _restruct$atoms$get === void 0 ? void 0 : _restruct$atoms$get.a.neighbors.length;
+  var angle;
+  if (degree && degree > 1) {
+    angle = null;
+  } else if (degree === 1) {
+    var _restruct$molecule$ha;
+    var atom = restruct.molecule.atoms.get(ci.id);
+    var neiId = atom && ((_restruct$molecule$ha = restruct.molecule.halfBonds.get(atom.neighbors[0])) === null || _restruct$molecule$ha === void 0 ? void 0 : _restruct$molecule$ha.end);
+    var nei = (neiId || neiId === 0) && restruct.molecule.atoms.get(neiId);
+    angle = event.ctrlKey ? vectorUtils.calcAngle(nei === null || nei === void 0 ? void 0 : nei.pp, atom === null || atom === void 0 ? void 0 : atom.pp) : vectorUtils.fracAngle(vectorUtils.calcAngle(nei.pp, atom === null || atom === void 0 ? void 0 : atom.pp), null);
+  } else {
+    angle = 0;
+  }
+  return angle;
+}
+function getUniqueCiId(ci) {
+  return "".concat(ci.id, "-").concat(ci.map);
+}
 var TemplateTool = function () {
   function TemplateTool(editor, tmpl) {
     _classCallCheck$2(this, TemplateTool);
+    _defineProperty$1(this, "previewTimeout", null);
     _defineProperty$1(this, "targetGroupsIds", []);
     this.editor = editor;
+    this.isPreviewVisible = false;
+    this.previewRemoveAction = new Action();
+    this.previewTimeout = null;
+    this.lastPreviewId = null;
     this.mode = getTemplateMode(tmpl);
     this.editor.selection(null);
     this.isSaltOrSolvent = SGroup$1.isSaltOrSolvent(tmpl.struct.name);
@@ -20118,7 +20155,7 @@ var TemplateTool = function () {
     this.template.xy0 = xy0.scaled(1 / (frag.atoms.size || 1));
     var atom = frag.atoms.get(this.template.aid);
     if (atom) {
-      this.template.angle0 = utils.calcAngle(atom.pp, this.template.xy0);
+      this.template.angle0 = vectorUtils.calcAngle(atom.pp, this.template.xy0);
       this.findItems.push('atoms');
     }
     var bond = frag.bonds.get(this.template.bid);
@@ -20191,13 +20228,13 @@ var TemplateTool = function () {
     key: "mousedown",
     value: function () {
       var _mousedown = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(event) {
-        var _this2 = this;
-        var _this$closestItem2, _this$closestItem3, _this$closestItem4, dragCtx, ci, _this$struct$atoms$ge, _this$struct$halfBond, xy0, bond, frid, frIds, count, loop, _this$struct$halfBond2, _this$struct$loops$ge, loopHbs, sign;
+        var _this$closestItem2, _this$closestItem3, _this$closestItem4, dragCtx, ci, bond;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 this.event = event;
+                this.hidePreview();
                 if (this.functionalGroups.size) {
                   this.targetGroupsIds = getGroupIdsFromItemArrays(this.struct, _objectSpread$M(_objectSpread$M({}, ((_this$closestItem2 = this.closestItem) === null || _this$closestItem2 === void 0 ? void 0 : _this$closestItem2.map) === 'atoms' && {
                     atoms: [this.closestItem.id]
@@ -20210,14 +20247,14 @@ var TemplateTool = function () {
                   }
                 }
                 if (!this.isNeedToShowRemoveAbbreviationPopup) {
-                  _context.next = 6;
+                  _context.next = 7;
                   break;
                 }
-                _context.next = 5;
+                _context.next = 6;
                 return this.showRemoveAbbreviationPopup();
-              case 5:
-                return _context.abrupt("return");
               case 6:
+                return _context.abrupt("return");
+              case 7:
                 this.editor.hover(null);
                 this.dragCtx = {
                   xy0: this.editor.render.page2obj(event),
@@ -20226,50 +20263,18 @@ var TemplateTool = function () {
                 dragCtx = this.dragCtx;
                 ci = dragCtx.item;
                 if (ci) {
-                  _context.next = 13;
+                  _context.next = 14;
                   break;
                 }
                 delete dragCtx.item;
                 return _context.abrupt("return");
-              case 13:
+              case 14:
                 if (ci.map === 'bonds' && !this.isModeFunctionalGroup) {
-                  xy0 = new Vec2();
                   bond = this.struct.bonds.get(ci.id);
-                  frid = (_this$struct$atoms$ge = this.struct.atoms.get(bond === null || bond === void 0 ? void 0 : bond.begin)) === null || _this$struct$atoms$ge === void 0 ? void 0 : _this$struct$atoms$ge.fragment;
-                  frIds = this.struct.getFragmentIds(frid);
-                  count = 0;
-                  loop = (_this$struct$halfBond = this.struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb1)) === null || _this$struct$halfBond === void 0 ? void 0 : _this$struct$halfBond.loop;
-                  if (loop && loop < 0) {
-                    loop = (_this$struct$halfBond2 = this.struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb2)) === null || _this$struct$halfBond2 === void 0 ? void 0 : _this$struct$halfBond2.loop;
-                  }
-                  if (loop && loop >= 0) {
-                    loopHbs = (_this$struct$loops$ge = this.struct.loops.get(loop)) === null || _this$struct$loops$ge === void 0 ? void 0 : _this$struct$loops$ge.hbs;
-                    loopHbs === null || loopHbs === void 0 ? void 0 : loopHbs.forEach(function (hb) {
-                      var _this2$struct$halfBon;
-                      var halfBondBegin = (_this2$struct$halfBon = _this2.struct.halfBonds.get(hb)) === null || _this2$struct$halfBon === void 0 ? void 0 : _this2$struct$halfBon.begin;
-                      if (halfBondBegin) {
-                        var hbbAtom = _this2.struct.atoms.get(halfBondBegin);
-                        if (hbbAtom) {
-                          xy0.add_(hbbAtom.pp);
-                          count++;
-                        }
-                      }
-                    });
-                  } else {
-                    frIds.forEach(function (id) {
-                      var atomById = _this2.struct.atoms.get(id);
-                      if (atomById) {
-                        xy0.add_(atomById.pp);
-                        count++;
-                      }
-                    });
-                  }
-                  dragCtx.v0 = xy0.scaled(1 / count);
-                  sign = getSign(this.struct, bond, dragCtx.v0);
-                  dragCtx.sign1 = sign || 1;
+                  dragCtx.sign1 = getBondFlipSign(this.struct, bond);
                   dragCtx.sign2 = this.template.sign;
                 }
-              case 14:
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -20284,10 +20289,31 @@ var TemplateTool = function () {
   }, {
     key: "mousemove",
     value: function mousemove(event) {
+      var _this2 = this;
       if (!this.dragCtx) {
-        this.editor.hoverIcon.show();
         this.editor.hoverIcon.updatePosition();
         this.editor.hover(this.editor.findItem(event, this.findItems), null, event);
+        var restruct = this.editor.render.ctab;
+        var _ci = this.editor.findItem(event, ['atoms', 'bonds']);
+        if (!_ci) {
+          this.editor.hoverIcon.show();
+        }
+        var isMouseAwayFromAtomsAndBonds = !_ci;
+        var isPreviewTargetChanged = _ci && this.lastPreviewId !== getUniqueCiId(_ci);
+        var shouldHidePreview = isMouseAwayFromAtomsAndBonds || isPreviewTargetChanged;
+        if (shouldHidePreview) {
+          this.hidePreview();
+          if (!this.editor.hoverIcon.isShown) {
+            this.editor.hoverIcon.show();
+          }
+        }
+        var shouldShowPreview = _ci && !this.isSaltOrSolvent && !this.isPreviewVisible && !this.previewTimeout;
+        if (shouldShowPreview) {
+          this.lastPreviewId = getUniqueCiId(_ci);
+          this.previewTimeout = setTimeout(function () {
+            _this2.showPreview(_ci, restruct);
+          }, PREVIEW_DELAY);
+        }
         return true;
       }
       if (this.isSaltOrSolvent) {
@@ -20336,11 +20362,11 @@ var TemplateTool = function () {
       if (!targetPos) {
         return true;
       }
-      var angle = utils.calcAngle(targetPos, eventPos);
+      var angle = vectorUtils.calcAngle(targetPos, eventPos);
       if (!event.ctrlKey) {
-        angle = utils.fracAngle(angle, null);
+        angle = vectorUtils.fracAngle(angle, null);
       }
-      var degrees = utils.degrees(angle);
+      var degrees = vectorUtils.degrees(angle);
       this.editor.event.message.dispatch({
         info: degrees + 'º'
       });
@@ -20386,7 +20412,7 @@ var TemplateTool = function () {
     key: "mouseup",
     value: function mouseup(event) {
       var _this3 = this,
-        _ci;
+        _ci2;
       var dragCtx = this.dragCtx;
       if (!dragCtx) {
         return true;
@@ -20409,7 +20435,7 @@ var TemplateTool = function () {
       }
       var action, functionalGroupRemoveAction;
       var pasteItems = null;
-      if (((_ci = ci) === null || _ci === void 0 ? void 0 : _ci.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(ci.id, this.functionalGroups) && this.isModeFunctionalGroup && this.targetGroupsIds.length) {
+      if (((_ci2 = ci) === null || _ci2 === void 0 ? void 0 : _ci2.map) === 'functionalGroups' && FunctionalGroup.isContractedFunctionalGroup(ci.id, this.functionalGroups) && this.isModeFunctionalGroup && this.targetGroupsIds.length) {
         var _restruct = this.editor.render.ctab;
         var functionalGroupToReplace = this.struct.sgroups.get(ci.id);
         if (this.isSaltOrSolvent && functionalGroupToReplace.isGroupAttached(this.struct)) {
@@ -20439,24 +20465,13 @@ var TemplateTool = function () {
           pasteItems = _fromTemplateOnCanvas4[1];
           dragCtx.action = action;
         } else if (ci.map === 'atoms') {
-          var _restruct$atoms$get;
-          var degree = (_restruct$atoms$get = restruct.atoms.get(ci.id)) === null || _restruct$atoms$get === void 0 ? void 0 : _restruct$atoms$get.a.neighbors.length;
+          var _restruct$atoms$get2;
+          var degree = (_restruct$atoms$get2 = restruct.atoms.get(ci.id)) === null || _restruct$atoms$get2 === void 0 ? void 0 : _restruct$atoms$get2.a.neighbors.length;
           if (degree && degree >= 1 && this.isSaltOrSolvent) {
             addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
             return true;
           }
-          var angle;
-          if (degree && degree > 1) {
-            angle = null;
-          } else if (degree === 1) {
-            var _this$struct$halfBond3;
-            var atom = this.struct.atoms.get(ci.id);
-            var neiId = atom && ((_this$struct$halfBond3 = this.struct.halfBonds.get(atom.neighbors[0])) === null || _this$struct$halfBond3 === void 0 ? void 0 : _this$struct$halfBond3.end);
-            var nei = (neiId || neiId === 0) && this.struct.atoms.get(neiId);
-            angle = event.ctrlKey ? utils.calcAngle(nei === null || nei === void 0 ? void 0 : nei.pp, atom === null || atom === void 0 ? void 0 : atom.pp) : utils.fracAngle(utils.calcAngle(nei.pp, atom === null || atom === void 0 ? void 0 : atom.pp), null);
-          } else {
-            angle = 0;
-          }
+          var angle = getAngleFromEvent(event, ci, restruct);
           var _fromTemplateOnAtom3 = fromTemplateOnAtom(restruct, this.template, ci.id, angle, false);
           var _fromTemplateOnAtom4 = _slicedToArray$1(_fromTemplateOnAtom3, 2);
           action = _fromTemplateOnAtom4[0];
@@ -20499,6 +20514,7 @@ var TemplateTool = function () {
   }, {
     key: "cancel",
     value: function cancel() {
+      this.hidePreview();
       this.mouseup();
     }
   }, {
@@ -20506,6 +20522,59 @@ var TemplateTool = function () {
     value: function mouseleave(e) {
       this.mouseup(e);
     }
+  }, {
+    key: "hidePreview",
+    value: function hidePreview() {
+      if (this.isPreviewVisible && this.previewRemoveAction) {
+        this.previewRemoveAction.perform(this.editor.render.ctab);
+        this.previewRemoveAction = null;
+        this.isPreviewVisible = false;
+        this.editor.render.update();
+      }
+      if (this.previewTimeout) {
+        clearTimeout(this.previewTimeout);
+        this.previewTimeout = null;
+      }
+    }
+  }, {
+    key: "showPreview",
+    value: function showPreview(ci, restruct) {
+      var _this4 = this;
+      if (ci.map === 'bonds' && !this.isModeFunctionalGroup) {
+        this.isPreviewVisible = true;
+        this.editor.hoverIcon.hide();
+        var bond = this.struct.bonds.get(ci.id);
+        var sign1 = getBondFlipSign(this.struct, bond);
+        var sign2 = this.template.sign;
+        var shouldFlip = sign1 * sign2 > 0;
+        var promise = fromTemplateOnBondAction(restruct, this.template, ci.id, this.editor.event, shouldFlip, true, true);
+        promise.then(function (_ref5) {
+          var _ref6 = _slicedToArray$1(_ref5, 2),
+            action = _ref6[0],
+            pasteItems = _ref6[1];
+          if (!_this4.isModeFunctionalGroup) {
+            var mergeItems = getItemsToFuse(_this4.editor, pasteItems);
+            action = fromItemsFuse(restruct, mergeItems).mergeWith(action);
+            _this4.editor.update(action, true);
+            _this4.previewRemoveAction = action;
+          }
+        });
+      } else if (ci.map === 'atoms') {
+        this.isPreviewVisible = true;
+        this.editor.hoverIcon.hide();
+        var angle = getAngleFromEvent(event, ci, restruct);
+        var _fromTemplateOnAtom5 = fromTemplateOnAtom(restruct, this.template, ci.id, angle, false, true),
+          _fromTemplateOnAtom6 = _slicedToArray$1(_fromTemplateOnAtom5, 2),
+          action = _fromTemplateOnAtom6[0],
+          pasteItems = _fromTemplateOnAtom6[1];
+        if (pasteItems && !this.isModeFunctionalGroup) {
+          var mergeItems = getItemsToFuse(this.editor, pasteItems);
+          action = fromItemsFuse(restruct, mergeItems).mergeWith(action);
+        }
+        this.editor.update(action, true);
+        this.previewRemoveAction = action;
+      }
+    }
   }]);
   return TemplateTool;
 }();
@@ -21486,7 +21555,7 @@ var RotateController = function () {
       this.snapAngleIndicator = this.paper.set();
       var LINE_LENGTH = 30;
       var TEXT_FONT_SIZE = 12;
-      var relativeSnapAngleInDegrees = utils.degrees(relativeSnapAngle);
+      var relativeSnapAngleInDegrees = vectorUtils.degrees(relativeSnapAngle);
       var drawText = function drawText(textPosition) {
         return _this3.paper.text(textPosition.x, textPosition.y, "".concat(Math.abs(relativeSnapAngleInDegrees), "\xB0")).attr({
           'font-size': TEXT_FONT_SIZE
@@ -21502,7 +21571,7 @@ var RotateController = function () {
       switch (state) {
         case 'noLine':
           {
-            var textAngle = utils.normalizeAngle(absoluteSnapAngle - relativeSnapAngle / 2);
+            var textAngle = normalizeAngle(absoluteSnapAngle - relativeSnapAngle / 2);
             var textPosition = new Vec2(20, 0).rotate(textAngle);
             var text = drawText(textPosition).attr({
               fill: STYLE.ACTIVE_COLOR
@@ -21687,7 +21756,7 @@ var Editor$3 = function () {
     key: "setOptions",
     value: function setOptions(opts) {
       var options = JSON.parse(opts);
-      this.event.apiSettings.dispatch(_objectSpread$L(_objectSpread$L({}, this.options()), options));
+      this.event.apiSettings.dispatch(_objectSpread$L({}, options));
       return this.render.updateOptions(opts);
     }
   }, {
@@ -22075,7 +22144,10 @@ function domEventSetup(editor, clientArea) {
       toolEventHandler = _ref.toolEventHandler;
     editor.event[eventName] = new DOMSubscription();
     var subs = editor.event[eventName];
-    target.addEventListener(eventName, subs.dispatch.bind(subs));
+    target.addEventListener(eventName, function () {
+      if (window.isPolymerEditorTurnedOn) return;
+      subs.dispatch.apply(subs, arguments);
+    });
     subs.add(function (event) {
       updateLastCursorPosition(editor, event);
       if (['mouseup', 'mousedown', 'click', 'dbclick'].includes(event.type) && !isMouseMainButtonPressed(event)) {
@@ -24692,6 +24764,7 @@ var SaveButton$1 = function SaveButton(props) {
     _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,
@@ -24721,7 +24794,8 @@ var SaveButton$1 = function SaveButton(props) {
     var ketcherInstance = getKetcherInstance();
     if (outputFormat) {
       ketcherInstance.generateImage(data, {
-        outputFormat: outputFormat
+        outputFormat: outputFormat,
+        bondThickness: bondThickness || defaultBondThickness
       }).then(function (blob) {
         saveAs(blob, "".concat(filename, ".").concat(outputFormat));
         onSave();
@@ -25182,7 +25256,6 @@ var mapDispatchToProps$d = function mapDispatchToProps(dispatch, ownProps) {
           result: JSON.parse(newOpts)
         }));
       } catch (ex) {
-        console.info('Bad file');
       }
     },
     onReset: function onReset() {
@@ -25894,7 +25967,7 @@ var MiewDialog = function MiewDialog(_ref) {
       miew.setOptions(miewOpts);
       setIsIsInitialized(true);
     })["catch"](function (ex) {
-      return console.error(ex.message);
+      return (void 0);
     });
   }, [miewOpts, server, struct]);
   var exportCML = useCallback(function () {
@@ -26636,16 +26709,13 @@ var Open = function Open(props) {
     }
   }, [server]);
   var onFileLoad = function onFileLoad(files) {
-    console.log('Open.tsx::onFileLoad::files', files);
     var onLoad = function onLoad(fileContent) {
-      console.log('Open.tsx::onLoad::fileContent', fileContent);
       setStructStr(fileContent);
       setCurrentState(MODAL_STATES.textEditor);
     };
     var onError = function onError() {
       return errorHandler('Error processing file');
     };
-    console.log('Open.tsx::onLoad::files[0].name', files[0].name);
     setFileName(files[0].name);
     opener.chosenOpener(files[0]).then(onLoad, onError);
   };
@@ -26655,14 +26725,12 @@ var Open = function Open(props) {
   };
   var onOk = rest.onOk;
   var copyHandler = function copyHandler() {
-    console.log('Open.tsx::copyHandler::structStr', structStr);
     onOk({
       structStr: structStr,
       fragment: true
     });
   };
   var openHandler = function openHandler() {
-    console.log('Open.tsx::openHandler::structStr', structStr);
     onOk({
       structStr: structStr,
       fragment: false
@@ -26721,7 +26789,6 @@ var mapDispatchToProps$7 = function mapDispatchToProps(dispatch) {
   return {
     onOk: function onOk(result) {
       if (result.fragment) exec('copy');
-      console.log('Open.container.ts::mapDispatchToProps::result', result);
       dispatch(load(result.structStr, {
         badHeaderRecover: true,
         fragment: result.fragment
@@ -26925,7 +26992,8 @@ var SaveDialog = function (_Component) {
         server = _this$props.server,
         options = _this$props.options,
         formState = _this$props.formState,
-        ignoreChiralFlag = _this$props.ignoreChiralFlag;
+        ignoreChiralFlag = _this$props.ignoreChiralFlag,
+        bondThickness = _this$props.bondThickness;
       var errorHandler = _this.context.errorHandler;
       if (_this.isImageFormat(type)) {
         var ketSerialize = new KetSerializer();
@@ -26939,6 +27007,7 @@ var SaveDialog = function (_Component) {
         });
         var _options = {};
         _options.outputFormat = type;
+        _options.bondThickness = bondThickness;
         return server.generateImageAsBase64(structStr, _options).then(function (base64) {
           _this.setState({
             disableControls: false,
@@ -27128,7 +27197,9 @@ var SaveDialog = function (_Component) {
         imageFormat = _this$state2.imageFormat,
         isLoading = _this$state2.isLoading,
         structStr = _this$state2.structStr;
-      var formState = _this.props.formState;
+      var _this$props3 = _this.props,
+        formState = _this$props3.formState,
+        bondThickness = _this$props3.bondThickness;
       var _formState$result2 = formState.result,
         filename = _formState$result2.filename,
         format = _formState$result2.format;
@@ -27158,6 +27229,7 @@ var SaveDialog = function (_Component) {
           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,
@@ -27243,6 +27315,7 @@ var mapStateToProps$4 = function mapStateToProps(state) {
     formState: state.modal.form,
     moleculeErrors: state.modal.form.moleculeErrors,
     checkState: state.options.check,
+    bondThickness: state.options.settings.bondThickness,
     ignoreChiralFlag: state.editor.render.options.ignoreChiralFlag
   };
 };
@@ -30252,13 +30325,12 @@ function handleRightClick(getState) {
   }
 }
 
-function initApp(element, staticResourcesUrl, options, server, setEditor) {
+function initApp(element, appRoot, staticResourcesUrl, options, server, setEditor) {
   var store = createStore(options, server, setEditor);
   store.dispatch(initKeydownListener(element));
   store.dispatch(initMouseListener(element));
   store.dispatch(initResize());
-  var root = createRoot(element);
-  root.render(jsx(Provider, {
+  appRoot.render(jsx(Provider, {
     store: store,
     children: jsx(settingsContext.Provider, {
       value: {
@@ -30318,7 +30390,7 @@ var KetcherBuilder = function () {
   }, {
     key: "appendUiAsync",
     value: function () {
-      var _appendUiAsync = _asyncToGenerator( _regeneratorRuntime.mark(function _callee2(element, staticResourcesUrl, errorHandler, buttons) {
+      var _appendUiAsync = _asyncToGenerator( _regeneratorRuntime.mark(function _callee2(element, appRoot, staticResourcesUrl, errorHandler, buttons) {
         var structService, editor;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
@@ -30327,11 +30399,11 @@ var KetcherBuilder = function () {
                 structService = this.structService;
                 _context2.next = 3;
                 return new Promise(function (resolve) {
-                  initApp(element, staticResourcesUrl, {
+                  initApp(element, appRoot, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.13.0-rc.3-dev.2" ,
-                    buildDate: "2023-08-11T07:09:24" ,
+                    version: "2.14.0-rc.1" ,
+                    buildDate: "2023-08-15T11:24:53" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });
@@ -30348,7 +30420,7 @@ var KetcherBuilder = function () {
           }
         }, _callee2, this);
       }));
-      function appendUiAsync(_x2, _x3, _x4, _x5) {
+      function appendUiAsync(_x2, _x3, _x4, _x5, _x6) {
         return _appendUiAsync.apply(this, arguments);
       }
       return appendUiAsync;
@@ -30383,19 +30455,19 @@ function buildKetcherAsync(_x) {
 }
 function _buildKetcherAsync() {
   _buildKetcherAsync = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(_ref) {
-    var element, staticResourcesUrl, structServiceProvider, buttons, errorHandler, builder;
+    var element, appRoot, staticResourcesUrl, structServiceProvider, buttons, errorHandler, builder;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            element = _ref.element, staticResourcesUrl = _ref.staticResourcesUrl, structServiceProvider = _ref.structServiceProvider, buttons = _ref.buttons, errorHandler = _ref.errorHandler;
+            element = _ref.element, appRoot = _ref.appRoot, staticResourcesUrl = _ref.staticResourcesUrl, structServiceProvider = _ref.structServiceProvider, buttons = _ref.buttons, errorHandler = _ref.errorHandler;
             builder = new KetcherBuilder();
             _context.next = 4;
             return builder.appendApiAsync(structServiceProvider);
           case 4:
             builder.appendServiceMode(structServiceProvider.mode);
             _context.next = 7;
-            return builder.appendUiAsync(element, staticResourcesUrl, errorHandler, buttons);
+            return builder.appendUiAsync(element, appRoot, staticResourcesUrl, errorHandler, buttons);
           case 7:
             return _context.abrupt("return", builder.build());
           case 8:
@@ -30426,14 +30498,21 @@ function Editor(props) {
     width = _useResizeObserver.width;
   var ketcherInitEvent = new Event(KETCHER_INIT_EVENT_NAME);
   useEffect(function () {
+    var appRoot = createRoot(rootElRef.current);
     buildKetcherAsync(_objectSpread(_objectSpread({}, props), {}, {
-      element: rootElRef.current
+      element: rootElRef.current,
+      appRoot: appRoot
     })).then(function (ketcher) {
       if (typeof onInit === 'function') {
         onInit(ketcher);
         window.dispatchEvent(ketcherInitEvent);
       }
     });
+    return function () {
+      setTimeout(function () {
+        appRoot.unmount();
+      });
+    };
   }, []);
   return jsx("div", {
     ref: rootElRef,