Merge branch 'master' of https://github.com/epam/ketcher into #1954-d…

…raw-selected-structure-at-mouse-cursor-as-pasting-does

.github/ISSUE_TEMPLATE/bug_report.md

@@ -35,5 +35,8 @@ If applicable, add screenshots to help explain your problem.
 **Ketcher version** [e.g. v2.4.2]. 
 To determine it, hover over the header of the Ketcher tab in a browser. 
 
+**Test case**
+Add test case number (in EPMLSOPKET-* format) if bug was found during test case run.
+
 **Additional context**
 Add any other context about the problem here.

packages/ketcher-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ketcher-core",
-  "version": "2.7.1",
+  "version": "2.8.0-rc.5",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

packages/ketcher-core/src/application/editor/actions/bond.ts

@@ -36,8 +36,7 @@ import { atomForNewBond, atomGetAttr } from './utils'
 import {
   fromAtomMerge,
   fromStereoAtomAttrs,
-  mergeFragmentsIfNeeded,
-  mergeSgroups
+  mergeFragmentsIfNeeded
 } from './atom'
 
 import { Action } from './action'
@@ -81,7 +80,8 @@ export function fromBondAddition(
     begin.fragment = frid
     begin = (action.addOp(new AtomAdd(begin, pos).perform(restruct)) as AtomAdd)
       .data.aid
-    if (typeof end === 'number') mergeSgroups(action, restruct, [begin], end)
+    if (typeof end === 'number')
+      mergeFragmentsIfNeeded(action, restruct, begin, end)
     pos = pos2
   } else if (atomGetAttr(restruct, begin, 'label') === '*') {
     action.addOp(new AtomAttr(begin, 'label', 'C').perform(restruct))
@@ -92,7 +92,8 @@ export function fromBondAddition(
     // TODO: <op>.data.aid here is a hack, need a better way to access the id of a created atom
     end = (action.addOp(new AtomAdd(end, pos).perform(restruct)) as AtomAdd)
       .data.aid
-    if (typeof begin === 'number') mergeSgroups(action, restruct, [end], begin)
+    if (typeof begin === 'number')
+      mergeFragmentsIfNeeded(action, restruct, end, begin)
   } else if (atomGetAttr(restruct, end, 'label') === '*') {
     action.addOp(new AtomAttr(end, 'label', 'C').perform(restruct))
   }

packages/ketcher-core/src/application/editor/actions/erase.ts

@@ -23,12 +23,8 @@ import {
   SimpleObjectDelete,
   TextDelete
 } from '../operations'
-import { Pile, RGroup } from 'domain/entities'
-import {
-  fromSgroupDeletion,
-  removeAtomFromSgroupIfNeeded,
-  removeSgroupIfNeeded
-} from './sgroup'
+import { RGroup } from 'domain/entities'
+import { removeAtomFromSgroupIfNeeded, removeSgroupIfNeeded } from './sgroup'
 
 import { Action } from './action'
 import assert from 'assert'
@@ -106,16 +102,6 @@ export function fromFragmentDeletion(restruct, selection) {
     texts: selection.texts || []
   }
 
-  const actionRemoveDataSGroups = new Action()
-  restruct.molecule.sgroups.forEach((sg, id) => {
-    if (
-      selection.sgroupData.includes(id) ||
-      new Pile(selection.atoms).isSuperset(new Pile(sg.atoms))
-    ) {
-      actionRemoveDataSGroups.mergeWith(fromSgroupDeletion(restruct, id))
-    }
-  })
-
   selection.atoms.forEach((aid) => {
     restruct.molecule.atomGetNeighbors(aid).forEach((nei) => {
       if (selection.bonds.indexOf(nei.bid) === -1) {
@@ -176,7 +162,5 @@ export function fromFragmentDeletion(restruct, selection) {
     )
   }
 
-  action.mergeWith(actionRemoveDataSGroups)
-
   return action
 }

packages/ketcher-core/src/application/render/raphaelRender.js

@@ -120,13 +120,17 @@ Render.prototype.setZoom = function (zoom) {
   this.setViewBox(zoom)
 }
 
-function calcExtend(sSz, x0, y0, x1, y1) {
+function calcExtend(canvasSize, x0, y0, newXSize, newYSize) {
   // eslint-disable-line max-params
   let ex = x0 < 0 ? -x0 : 0
   let ey = y0 < 0 ? -y0 : 0
 
-  if (sSz.x < x1) ex += x1 - sSz.x
-  if (sSz.y < y1) ey += y1 - sSz.y
+  if (canvasSize.x < newXSize) {
+    ex += newXSize - canvasSize.x
+  }
+  if (canvasSize.y < newYSize) {
+    ey += newYSize - canvasSize.y
+  }
   return new Vec2(ex, ey)
 }
 
@@ -138,8 +142,8 @@ Render.prototype.setScrollOffset = function (x, y) {
     this.sz.scaled(this.options.zoom),
     x,
     y,
-    cx + x,
-    cy + y
+    cx + Math.abs(x),
+    cy + Math.abs(y)
   ).scaled(1 / this.options.zoom)
   if (e.x > 0 || e.y > 0) {
     this.setPaperSize(this.sz.add(e))
@@ -198,7 +202,7 @@ Render.prototype.update = function (force = false, viewSz = null) {
   const changes = this.ctab.update(force)
   this.ctab.setSelection() // [MK] redraw the selection bits where necessary
   if (changes) {
-    const sf = this.options.scale
+    const scale = this.options.scale
     const bb = this.ctab
       .getVBoxObj()
       .transform(Scale.obj2scaled, this.options)
@@ -210,7 +214,7 @@ Render.prototype.update = function (force = false, viewSz = null) {
 
     const isAutoScale = this.options.autoScale || this.options.downScale
     if (!isAutoScale) {
-      const ext = Vec2.UNIT.scaled(sf)
+      const ext = Vec2.UNIT.scaled(scale)
       const eb = bb.sz().length() > 0 ? bb.extend(ext, ext) : bb
       const vb = new Box2Abs(
         this.scrollPos(),

packages/ketcher-core/src/application/render/restruct/rebond.ts

@@ -67,8 +67,7 @@ class ReBond extends ReObject {
       FunctionalGroup.isBondInContractedFunctionalGroup(
         bond,
         sgroups,
-        functionalGroups,
-        true
+        functionalGroups
       )
     ) {
       return null
@@ -89,8 +88,7 @@ class ReBond extends ReObject {
       FunctionalGroup.isBondInContractedFunctionalGroup(
         bond,
         sgroups,
-        functionalGroups,
-        true
+        functionalGroups
       )
     ) {
       return null
@@ -109,15 +107,13 @@ class ReBond extends ReObject {
     const bond = restruct.molecule.bonds.get(bid)
     const sgroups = restruct.molecule.sgroups
     const functionalGroups = restruct.molecule.functionalGroups
-    const sgroupsIds = struct.getGroupsIdsFromBondId(bid)
     if (
+      bond &&
       FunctionalGroup.isBondInContractedFunctionalGroup(
         bond,
         sgroups,
-        functionalGroups,
-        false
-      ) &&
-      sgroupsIds.length < 2
+        functionalGroups
+      )
     ) {
       return
     }

packages/ketcher-core/src/domain/entities/functionalGroup.ts

@@ -13,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
+import { ReSGroup } from 'application/render'
 import assert from 'assert'
 import { FunctionalGroupsProvider } from '../helpers'
+import { Bond } from './bond'
 import { Pool } from './pool'
 import { SGroup } from './sgroup'
 import { Struct } from './struct'
@@ -259,36 +261,23 @@ export class FunctionalGroup {
   }
 
   static isBondInContractedFunctionalGroup(
-    bond,
-    sgroups,
-    functionalGroups,
-    sgroupsFromReStruct: boolean
-  ): boolean {
-    const contractedFunctionalGroupsAtoms: number[] = []
-    if (sgroupsFromReStruct) {
-      sgroups.forEach((sg) => {
-        if (
-          FunctionalGroup.isContractedFunctionalGroup(
-            sg.item.id,
-            functionalGroups
-          )
-        ) {
-          contractedFunctionalGroupsAtoms.push(...sg.item.atoms)
-        }
-      })
-    } else {
-      sgroups.forEach((sg) => {
-        if (
-          FunctionalGroup.isContractedFunctionalGroup(sg.id, functionalGroups)
-        ) {
-          contractedFunctionalGroupsAtoms.push(...sg.atoms)
-        }
-      })
-    }
-    return (
-      contractedFunctionalGroupsAtoms.includes(bond.begin) &&
-      contractedFunctionalGroupsAtoms.includes(bond.end)
-    )
+    bond: Bond,
+    sGroups: Map<number, ReSGroup> | Pool<SGroup>,
+    functionalGroups: Pool<FunctionalGroup>
+  ) {
+    return [...sGroups.values()].some((sGroup) => {
+      const sGroupId = 'item' in sGroup ? sGroup.item.id : sGroup.id
+      const atomsInSGroup = 'item' in sGroup ? sGroup.item.atoms : sGroup.atoms
+      const isContracted = FunctionalGroup.isContractedFunctionalGroup(
+        sGroupId,
+        functionalGroups
+      )
+      return (
+        isContracted &&
+        atomsInSGroup.includes(bond.begin) &&
+        atomsInSGroup.includes(bond.end)
+      )
+    })
   }
 
   static isContractedFunctionalGroup(sgroupId, functionalGroups): boolean {

packages/ketcher-core/src/domain/serializers/ket/schema.json

@@ -161,6 +161,10 @@
         },
         "exactChangeFlag": {
           "type": "boolean"
+        },
+        "cip": {
+          "type": "string",
+          "enum": ["R", "S", "r", "s"]
         }
       },
       "additionalProperties": false
@@ -230,6 +234,10 @@
         "stereobox": {
           "type": "integer",
           "enum": [0, 1]
+        },
+        "cip": {
+          "type": "string",
+          "enum": ["Z", "E"]
         }
       }
     },

packages/ketcher-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ketcher-react",
-  "version": "2.7.1",
+  "version": "2.8.0-rc.5",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

packages/ketcher-react/src/hooks/useClickOutside.ts

@@ -0,0 +1,19 @@
+import { useEffect, RefObject } from 'react'
+
+export const useClickOutside = (
+  targetRef: RefObject<Node>,
+  callback: () => void
+): void => {
+  useEffect(() => {
+    document.addEventListener('click', onClickOutside)
+    return () => {
+      document.removeEventListener('click', onClickOutside)
+    }
+  }, [])
+
+  const onClickOutside = (e: Event) => {
+    if (!targetRef.current?.contains(e.target as Node)) {
+      callback()
+    }
+  }
+}

packages/ketcher-react/src/script/editor/Editor.ts

@@ -36,6 +36,7 @@ import { isEqual } from 'lodash/fp'
 import toolMap from './tool'
 import { Highlighter } from './highlighter'
 import { showFunctionalGroupsTooltip } from './utils/functionalGroupsTooltip'
+import { contextMenuInfo } from '../ui/views/components/ContextMenu/contextMenu.types'
 
 const SCALE = 40
 const HISTORY_SIZE = 32 // put me to options
@@ -113,6 +114,7 @@ class Editor implements KetcherEditor {
   highlights: Highlighter
   hoverIcon: any
   lastCursorPosition: { x: number; y: number }
+  contextMenu: contextMenuInfo
   event: {
     message: Subscription
     elementEdit: PipelineSubscription
@@ -161,6 +163,7 @@ class Editor implements KetcherEditor {
       y: 0
     }
     this.createHoverIcon()
+    this.contextMenu = {}
 
     this.event = {
       message: new Subscription(),
@@ -601,6 +604,10 @@ function updateLastCursorPosition(editor: Editor, event) {
   }
 }
 
+function isContextMenuClosed(editor: Editor) {
+  return !Object.values(editor.contextMenu).some(Boolean)
+}
+
 function useToolIfNeeded(
   editor: Editor,
   eventName: string,
@@ -612,7 +619,8 @@ function useToolIfNeeded(
   const conditions = [
     !!EditorTool,
     eventName in EditorTool,
-    clientArea.contains(event.target) || EditorTool.isSelectionRunning?.()
+    clientArea.contains(event.target) || EditorTool.isSelectionRunning?.(),
+    isContextMenuClosed(editor)
   ]
 
   if (conditions.every((condition) => condition)) {

packages/ketcher-react/src/script/editor/shared/closest.js

@@ -181,8 +181,7 @@ function findClosestBond(restruct, pos, skip, minDist, scale) {
       FunctionalGroup.isBondInContractedFunctionalGroup(
         bond.b,
         sGroups,
-        functionalGroups,
-        true
+        functionalGroups
       )
     )
       return null
@@ -202,8 +201,7 @@ function findClosestBond(restruct, pos, skip, minDist, scale) {
       FunctionalGroup.isBondInContractedFunctionalGroup(
         bond.b,
         sGroups,
-        functionalGroups,
-        true
+        functionalGroups
       )
     )
       return null

packages/ketcher-react/src/script/editor/tool/atom.ts

@@ -145,6 +145,7 @@ class AtomTool {
   }
 
   mousemove(event) {
+    this.editor.hoverIcon.show()
     const rnd = this.editor.render
     const { layerX, layerY } = event
 
@@ -240,6 +241,11 @@ class AtomTool {
     this.editor.event.message.dispatch({
       info: false
     })
+    this.editor.hover(
+      this.editor.findItem(event, ['atoms', 'functionalGroups']),
+      null,
+      event
+    )
   }
 }
 

packages/ketcher-react/src/script/editor/tool/attach.ts

@@ -43,9 +43,11 @@ class AttachTool {
       ((ci.map === 'atoms' &&
         Elements.get(struct.atoms.get(ci.id)?.label as string)) ||
         ci.map === 'bonds')
-    )
+    ) {
       this.editor.hover(ci)
-    else this.editor.hover(null)
+    } else {
+      this.editor.hover(null)
+    }
     return true
   }