Backmerge: #5685 - The diagonal bond in the molecule is displayed incorrect with ACS style

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

@@ -205,6 +205,35 @@ class ReAtom extends ReObject {
     return this.getSelectionContour(render, false).attr(options.selectionStyle);
   }
 
+  private isNeedShiftForCharge(showCharge: boolean, bondLength: number) {
+    const MIN_BOND_LENGTH = 24;
+    const isBondLengthTooShort = bondLength <= MIN_BOND_LENGTH;
+    const hasCharge = this.a.charge !== null && this.a.charge !== 0;
+    return showCharge && isBondLengthTooShort && hasCharge;
+  }
+
+  private getRatio(
+    renderOptions: RenderOptions,
+    bondLen: number | null,
+  ): number {
+    const DEFAULT_BOND_LENGTH = 40;
+    const DEFAULT_SUB_FONT_SIZE = 13;
+    const subFontSize = renderOptions.fontszsubInPx || DEFAULT_SUB_FONT_SIZE;
+    if (!bondLen) return 1;
+    const showCharge = renderOptions.showCharge;
+
+    const isNeedShift = this.isNeedShiftForCharge(showCharge, bondLen);
+
+    if (!isNeedShift) {
+      return 1;
+    }
+
+    const DEFAULT_PROPORTION = DEFAULT_BOND_LENGTH / DEFAULT_SUB_FONT_SIZE;
+    const currentProportion = bondLen / subFontSize;
+    const ratio = currentProportion / DEFAULT_PROPORTION;
+    return ratio;
+  }
+
   /**
    * if atom is rendered as Abbreviation: O, NH, ...
    * In this case we need to shift the bond render start position to free space for Atom,
@@ -214,21 +243,22 @@ class ReAtom extends ReObject {
     renderOptions: RenderOptions,
     direction: Vec2,
     _atomPosition?: Vec2,
+    bondLen: number | null = null,
   ): Vec2 {
     const atomPosition = Scale.modelToCanvas(
       _atomPosition || this.a.pp,
       renderOptions,
     );
     let atomSymbolShift = 0;
     const exts = this.visel.exts;
+    const ratio = this.getRatio(renderOptions, bondLen);
     for (let k = 0; k < exts.length; ++k) {
       const box = exts[k].translate(atomPosition);
-
-      atomSymbolShift = Math.max(
-        atomSymbolShift,
-        util.shiftRayBox(atomPosition, direction, box),
-      );
+      const shiftRayBox = util.shiftRayBox(atomPosition, direction, box);
+      const shift = shiftRayBox * ratio;
+      atomSymbolShift = Math.max(atomSymbolShift, shift);
     }
+
     if (atomSymbolShift > 0) {
       return atomPosition.addScaled(
         direction,

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

@@ -110,13 +110,20 @@ class ReBond extends ReObject {
 
     if (!hb1?.dir || !hb2?.dir) return;
 
-    hb1.p = beginAtom.getShiftedSegmentPosition(options, hb1.dir, p1);
-    hb2.p = endAtom.getShiftedSegmentPosition(options, hb2.dir, p2);
     bond.b.center = Vec2.lc2(p1, 0.5, p2, 0.5);
     bond.b.len = Vec2.dist(
       Scale.modelToCanvas(p1, render.options),
       Scale.modelToCanvas(p2, render.options),
     );
+
+    hb1.p = beginAtom.getShiftedSegmentPosition(
+      options,
+      hb1.dir,
+      p1,
+      bond.b.len,
+    );
+    hb2.p = endAtom.getShiftedSegmentPosition(options, hb2.dir, p2, bond.b.len);
+
     bond.b.sb = options.lineWidth * 5;
     /* eslint-disable no-mixed-operators */
     bond.b.sa = Math.max(bond.b.sb, bond.b.len / 2 - options.lineWidth * 2);