Merge branch 'master' into #2423-hotkeys-for-atoms-dont-work-on-funct…

…ional-groups-and-salts-abbreviations

# Conflicts:
#	packages/ketcher-react/src/script/ui/state/hotkeys.ts

demo/package.json

@@ -20,7 +20,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --passWithNoTests",
+    "test": "react-scripts test --passWithNoTests --watchAll=false",
     "eject": "react-scripts eject",
     "serve": "serve -s build"
   },

example/package.json

@@ -22,7 +22,7 @@
     "build:remote:analyze": "cross-env MODE=remote run-s prebuild build:react:analyze postbuild",
     "test": "run-s test:prettier test:stylelint test:eslint test:unit",
     "test:eslint": "eslint . --ext .ts,.js,.jsx,.tsx",
-    "test:unit": "react-app-rewired test --passWithNoTests",
+    "test:unit": "react-app-rewired test --passWithNoTests --watchAll=false",
     "test:stylelint": "stylelint \"./**/*.{css,less}\" --formatter verbose",
     "test:prettier": "prettier --check \"./**/*.{js,ts,jsx,tsx,json}\"",
     "prettier:write": "prettier --write \"./**/*.{js,jsx,json,ts,tsx}\"",

package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "postinstall": "husky install",
     "precommit": "lint-staged --allow-empty && npm run prettier:write --workspaces --if-present",
-    "prepush": "npm run test:eslint --workspaces --if-present",
+    "prepush": "npm run test --workspaces --if-present",
     "build": "npm run build:packages && npm run build:example",
     "build:core": "npm run build -w ketcher-core",
     "build:standalone": "npm run build -w ketcher-standalone",

packages/ketcher-core/src/application/ketcher.ts

@@ -217,6 +217,22 @@ export class Ketcher {
     )
   }
 
+  getCDXml(): Promise<string> {
+    return getStructure(
+      SupportedFormat.cdxml,
+      this.#formatterFactory,
+      this.#editor.struct()
+    )
+  }
+
+  getCDX(): Promise<string> {
+    return getStructure(
+      SupportedFormat.cdx,
+      this.#formatterFactory,
+      this.#editor.struct()
+    )
+  }
+
   getInchi(withAuxInfo = false): Promise<string> {
     return getStructure(
       withAuxInfo ? SupportedFormat.inChIAuxInfo : SupportedFormat.inChI,

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

@@ -24,7 +24,7 @@ function defaultOptions(opt) {
   if (opt.rotationStep) utils.setFracAngle(opt.rotationStep)
 
   const labelFontSize = Math.ceil(1.9 * (scaleFactor / 6))
-  const subFontSize = Math.ceil(0.7 * labelFontSize)
+  const subFontSize = Math.ceil(0.5 * labelFontSize)
 
   const defaultOptions = {
     'dearomatize-on-load': false,
@@ -66,6 +66,8 @@ function defaultOptions(opt) {
     fontRLabel: labelFontSize * 1.2,
     fontRLogic: labelFontSize * 0.7,
 
+    radiusScaleFactor: 0.38,
+
     /* styles */
     lineattr: {
       stroke: '#000',
@@ -75,11 +77,13 @@ function defaultOptions(opt) {
     },
     /* eslint-enable quote-props */
     selectionStyle: {
-      fill: '#7f7',
-      stroke: 'none'
+      fill: '#57FF8F',
+      stroke: '#57FF8F'
     },
     hoverStyle: {
-      stroke: '#0c0',
+      stroke: '#0097A8',
+      fill: 'transparent',
+      fillSelected: '#CCFFDD',
       'stroke-width': (0.6 * scaleFactor) / 20
     },
     sgroupBracketStyle: {
@@ -96,7 +100,7 @@ function defaultOptions(opt) {
       'stroke-linecap': 'round',
       'stroke-opacity': 0.6
     },
-    atomSelectionPlateRadius: labelFontSize * 1.2,
+    atomSelectionPlateRadius: labelFontSize,
     contractedFunctionalGroupSize: 50
   }
 

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

@@ -104,11 +104,44 @@ class ReAtom extends ReObject {
     return ret
   }
 
-  makeHoverPlate(render: Render) {
-    const paper = render.paper
-    const options = render.options
+  getLabeledSelectionContour(render: Render) {
+    const { paper, ctab: restruct, options } = render
+    const { fontsz, radiusScaleFactor } = options
+    const padding = fontsz * radiusScaleFactor
+    const radius = fontsz * radiusScaleFactor * 2
+    const box = this.getVBoxObj(restruct.render)!
+    const ps1 = Scale.obj2scaled(box.p0, restruct.render.options)
+    const ps2 = Scale.obj2scaled(box.p1, restruct.render.options)
+    const width = ps2.x - ps1.x
+    const height = fontsz * 1.23
+    return paper.rect(
+      ps1.x - padding,
+      ps1.y - padding,
+      width + padding * 2,
+      height + padding * 2,
+      radius
+    )
+  }
+
+  getUnlabeledSelectionContour(render: Render) {
+    const { paper, options } = render
+    const { atomSelectionPlateRadius } = options
     const ps = Scale.obj2scaled(this.a.pp, options)
+    return paper.circle(ps.x, ps.y, atomSelectionPlateRadius)
+  }
+
+  getSelectionContour(render: Render) {
+    const hasLabel =
+      (this.a.pseudo && this.a.pseudo.length > 1) ||
+      (this.showLabel && this.a.implicitH !== 0)
+    return hasLabel
+      ? this.getLabeledSelectionContour(render)
+      : this.getUnlabeledSelectionContour(render)
+  }
+
+  makeHoverPlate(render: Render) {
     const atom = this.a
+    const { options } = render
     const sgroups = render.ctab.sgroups
     const functionalGroups = render.ctab.molecule.functionalGroups
     if (
@@ -121,15 +154,16 @@ class ReAtom extends ReObject {
     ) {
       return null
     }
-    return paper
-      .circle(ps.x, ps.y, options.atomSelectionPlateRadius)
-      .attr(options.hoverStyle)
+
+    return this.getSelectionContour(render).attr(options.hoverStyle)
   }
 
-  makeSelectionPlate(restruct: ReStruct, paper: any, styles: any) {
+  makeSelectionPlate(restruct: ReStruct) {
     const atom = this.a
-    const sgroups = restruct.render.ctab.sgroups
-    const functionalGroups = restruct.render.ctab.molecule.functionalGroups
+    const { render } = restruct
+    const { options } = render
+    const sgroups = render.ctab.sgroups
+    const functionalGroups = render.ctab.molecule.functionalGroups
     if (
       FunctionalGroup.isAtomInContractedFunctionalGroup(
         atom,
@@ -141,10 +175,7 @@ class ReAtom extends ReObject {
       return null
     }
 
-    const ps = Scale.obj2scaled(this.a.pp, restruct.render.options)
-    return paper
-      .circle(ps.x, ps.y, styles.atomSelectionPlateRadius)
-      .attr(styles.selectionStyle)
+    return this.getSelectionContour(render).attr(options.selectionStyle)
   }
 
   show(restruct: ReStruct, aid: number, options: any): void {