#3667 – Monomers are stacked and difficult to read after importing a…

… file

ketcher-autotests/tests/Structure-Creating-&-Editing/Actions-With-Structures/Erase-Tool/erase-tool.spec.ts

@@ -79,7 +79,7 @@ test.describe('Erase Tool', () => {
       const [plusElement] = window.ketcher.editor.struct().rxnPluses.values();
       return {
         plusElement: plusElement || null,
-        scale: window.ketcher.editor.options().scale,
+        scale: window.ketcher.editor.options().microModeScale,
       };
     });
 
@@ -110,7 +110,7 @@ test.describe('Erase Tool', () => {
       const [element] = window.ketcher.editor.struct().rxnArrows.values();
       return {
         arrowElement: element || null,
-        scale: window.ketcher.editor.options().scale,
+        scale: window.ketcher.editor.options().microModeScale,
       };
     });
 

ketcher-autotests/tests/utils/canvas/atoms/getAtomsCoordinatesByAttributes/getAtomsCoordinatesByAttributes.ts

@@ -29,7 +29,7 @@ export async function getAtomsCoordinatesByAttributes(
     return {
       // eslint-disable-next-line no-unsafe-optional-chaining
       atoms: [...window.ketcher?.editor?.struct()?.atoms?.values()],
-      scale: window.ketcher?.editor?.options()?.scale,
+      scale: window.ketcher?.editor?.options()?.microModeScale,
       offset: window.ketcher?.editor?.options()?.offset,
     };
   });

ketcher-autotests/tests/utils/canvas/bonds/getBondsCoordinatesByAttributes/getBondsCoordinatesByAttributes.ts

@@ -29,7 +29,7 @@ export async function getBondsCoordinatesByAttributes(
     return {
       // eslint-disable-next-line no-unsafe-optional-chaining
       bonds: [...window.ketcher?.editor?.struct()?.bonds?.values()],
-      scale: window.ketcher?.editor?.options()?.scale,
+      scale: window.ketcher?.editor?.options()?.microModeScale,
       offset: window.ketcher?.editor?.options()?.offset,
     };
   });

ketcher-autotests/tests/utils/canvas/helpers.ts

@@ -124,7 +124,7 @@ export async function getCoordinatesTopAtomOfBenzeneRing(page: Page) {
     const onlyCarbons = allAtoms.filter((a) => a.label === 'C');
     return {
       carbonAtoms: onlyCarbons,
-      scale: window.ketcher.editor.options().scale,
+      scale: window.ketcher.editor.options().microModeScale,
       offset: window.ketcher?.editor?.options()?.offset,
     };
   });
@@ -169,7 +169,7 @@ export async function getCoordinatesOfTopMostCarbon(page: Page) {
     const onlyCarbons = allAtoms.filter((a) => a.label === 'C');
     return {
       carbonAtoms: onlyCarbons,
-      scale: window.ketcher.editor.options().scale,
+      scale: window.ketcher.editor.options().microModeScale,
       offset: window.ketcher?.editor?.options()?.offset,
     };
   });

packages/ketcher-core/__tests__/application/render/restruct/resimpleObject.test.ts

@@ -51,7 +51,7 @@ const line = {
 it('should get hover path and style for simple objects correctly', () => {
   [ellipse, rectangle, line].forEach((simpleObject) => {
     const reSimpleObject = new ReSimpleObject(simpleObject);
-    const option = { scale: 20, width: 100, height: 100 } as RenderOptions;
+    const option = { microModeScale: 20, width: 100, height: 100 } as RenderOptions;
     const render = new Render(document as unknown as HTMLElement, option);
     const paths = reSimpleObject.hoverPath(render);
     expect(
@@ -63,7 +63,7 @@ it('should get hover path and style for simple objects correctly', () => {
 it('should get selection plate for simple objects correctly with selection points in a separated set', () => {
   const reSimpleObject = new ReSimpleObject(ellipse);
   const initialPathLength = reSimpleObject.visel.paths.length;
-  const option = { scale: 20, width: 100, height: 100 } as RenderOptions;
+  const option = { microModeScale: 20, width: 100, height: 100 } as RenderOptions;
   const render = new Render(document as unknown as HTMLElement, option);
   const restruct = new ReStruct(new Struct(), render);
   reSimpleObject.makeSelectionPlate(restruct, render.paper, render.options);

packages/ketcher-core/__tests__/application/render/restruct/restruct.test.ts

@@ -20,7 +20,7 @@ describe('show selection', () => {
   };
   const reSimpleObject = new ReSimpleObject(ellipse);
   reSimpleObject.togglePoints = jest.fn();
-  const option = { scale: 20, width: 100, height: 100 } as RenderOptions;
+  const option = { microModeScale: 20, width: 100, height: 100 } as RenderOptions;
   const render = new Render(document as unknown as HTMLElement, option);
   const restruct = new ReStruct(new Struct(), render);
   it('should show selection simple objects correctly when selected', () => {

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

@@ -1,5 +1,6 @@
 const editorSettings = {
-  scale: 40, // Angstroms To Pixels Factor
+  microModeScale: 40, // Angstroms To Pixels Factor
+  macroModeScale: 200, // Angstroms To Pixels Factor
 };
 
 export function provideEditorSettings() {

packages/ketcher-core/src/application/editor/operations/rxn/RxnArrowRotate.ts

@@ -34,7 +34,7 @@ export class RxnArrowRotate extends Base {
 
     const options = reStruct.render.options;
     const drawingCenter = this.data.center
-      .scaled(options.scale)
+      .scaled(options.microModeScale)
       .add(options.offset);
 
     reStruct.rxnArrows.get(arrowId)?.visel.rotate(degree, drawingCenter);

packages/ketcher-core/src/application/editor/shared/closest.js

@@ -98,7 +98,10 @@ function findClosestSimpleObject(restruct, pos) {
   let ret = null;
 
   restruct.simpleObjects.forEach((simpleObject, id) => {
-    const dist = simpleObject.calcDistance(pos, restruct.render.options.scale);
+    const dist = simpleObject.calcDistance(
+      pos,
+      restruct.render.options.microModeScale,
+    );
 
     if (dist.minDist < 0.3 && (!ret || dist.minDist < minDist)) {
       minDist = dist.minDist;
@@ -323,7 +326,10 @@ function findClosestRxnArrow(restruct, pos) {
   let ret = null;
 
   restruct.rxnArrows.forEach((rxnArrow, id) => {
-    const dist = rxnArrow.calcDistance(pos, restruct.render.options.scale);
+    const dist = rxnArrow.calcDistance(
+      pos,
+      restruct.render.options.microModeScale,
+    );
 
     if (dist.minDist < 0.3 && (!ret || dist.minDist < minDist)) {
       minDist = dist.minDist;

packages/ketcher-core/src/application/editor/shared/coordinates.ts

@@ -9,23 +9,25 @@ import ZoomTool from '../tools/Zoom';
 class Coordinates {
   static canvasToModel(position: Vec2) {
     const settings = provideEditorSettings();
-    return position.scaled(1 / settings.scale);
+    return position.scaled(1 / settings.macroModeScale);
   }
 
   static viewToModel(position: Vec2) {
     const settings = provideEditorSettings();
     const pos = ZoomTool.instance.invertZoom(position);
-    return pos.scaled(1 / settings.scale);
+    return pos.scaled(1 / settings.macroModeScale);
   }
 
   static modelToView(position: Vec2) {
     const settings = provideEditorSettings();
-    return ZoomTool.instance.scaleCoordinates(position.scaled(settings.scale));
+    return ZoomTool.instance.scaleCoordinates(
+      position.scaled(settings.macroModeScale),
+    );
   }
 
   static modelToCanvas(position: Vec2) {
     const settings = provideEditorSettings();
-    return position.scaled(settings.scale);
+    return position.scaled(settings.macroModeScale);
   }
 
   // convert the original coordinates to transformed coordinates after the d3 transformation

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

@@ -957,7 +957,7 @@ function arrowUnbalancedEquilibriumFilledHalfTriangle(
 }
 
 function plus(paper: RaphaelPaper, point: Vec2, options: RenderOptions) {
-  const s = options.scale / 5;
+  const s = options.microModeScale / 5;
   return paper
     .path(
       'M{0},{4}L{0},{5}M{2},{1}L{3},{1}',
@@ -1543,7 +1543,7 @@ function rgroupAttachmentPoint(
     getSvgCurveShapeAttachmentPoint(
       attachmentPointEnd,
       directionVector,
-      options.scale,
+      options.microModeScale,
     ),
   );
 

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

@@ -20,13 +20,14 @@ import { ShowHydrogenLabels } from './restruct/reatom';
 import { RenderOptions } from './render.types';
 
 function defaultOptions(options: RenderOptions): RenderOptions {
-  const scaleFactor = options.scale || 100;
+  const scaleFactorMicro = options.microModeScale || 100;
+  const scaleFactorMacro = options.macroModeScale || 200;
 
   if (options.rotationStep) {
     utils.setFracAngle(options.rotationStep);
   }
 
-  const labelFontSize = Math.ceil(1.9 * (scaleFactor / 6));
+  const labelFontSize = Math.ceil(1.9 * (scaleFactorMicro / 6));
   const subFontSize = Math.ceil(0.5 * labelFontSize);
 
   const defaultOptions: Partial<RenderOptions> = {
@@ -55,13 +56,14 @@ function defaultOptions(options: RenderOptions): RenderOptions {
     // bonds
     aromaticCircle: true,
 
-    scale: scaleFactor,
+    microModeScale: scaleFactorMicro,
+    macroModeScale: scaleFactorMacro,
     zoom: 1.0,
     offset: new Vec2(),
 
-    lineWidth: scaleFactor / 20,
-    bondSpace: options.doubleBondWidth || scaleFactor / 7,
-    stereoBond: options.stereoBondWidth || scaleFactor / 7,
+    lineWidth: scaleFactorMicro / 20,
+    bondSpace: options.doubleBondWidth || scaleFactorMicro / 7,
+    stereoBond: options.stereoBondWidth || scaleFactorMicro / 7,
     subFontSize,
     font: '30px Arial',
     fontsz: labelFontSize,
@@ -74,7 +76,7 @@ function defaultOptions(options: RenderOptions): RenderOptions {
     /* styles */
     lineattr: {
       stroke: '#000',
-      'stroke-width': options.bondThickness || scaleFactor / 20,
+      'stroke-width': options.bondThickness || scaleFactorMicro / 20,
       'stroke-linecap': 'round',
       'stroke-linejoin': 'round',
     },
@@ -95,19 +97,19 @@ function defaultOptions(options: RenderOptions): RenderOptions {
     hoverStyle: {
       stroke: '#0097A8',
       fill: '#CCFFDD',
-      'stroke-width': (0.6 * scaleFactor) / 20,
+      'stroke-width': (0.6 * scaleFactorMicro) / 20,
     },
     sgroupBracketStyle: {
       stroke: 'darkgray',
-      'stroke-width': (0.5 * scaleFactor) / 20,
+      'stroke-width': (0.5 * scaleFactorMicro) / 20,
     },
     lassoStyle: {
       stroke: 'gray',
       'stroke-width': '1px',
     },
     selectionStyleSimpleObject: {
       stroke: '#57FF8F',
-      'stroke-width': scaleFactor / 4,
+      'stroke-width': scaleFactorMicro / 4,
       'stroke-linecap': 'round',
     },
     movingStyle: {

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

@@ -36,7 +36,8 @@ export type RenderOptions = {
   showHydrogenLabels: string;
   showValence: boolean;
   aromaticCircle: boolean;
-  scale: number;
+  microModeScale: number;
+  macroModeScale: number;
   zoom: number;
   offset: Vec2;
   lineWidth: number;

packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts

@@ -4,12 +4,12 @@ import { DrawingEntity } from 'domain/entities/DrawingEntity';
 import assert from 'assert';
 import { D3SvgElementSelection } from 'application/render/types';
 import { editorEvents } from 'application/editor/editorEvents';
-import { Scale } from 'domain/helpers';
 import { Vec2 } from 'domain/entities';
 import { Peptide } from 'domain/entities/Peptide';
 import { Chem } from 'domain/entities/Chem';
 import { BaseMonomer } from 'domain/entities/BaseMonomer';
 import { SnakeMode } from 'application/editor/modes/internal';
+import Coordinates from 'application/editor/shared/coordinates';
 
 const LINE_FROM_MONOMER_LENGTH = 15;
 const VERTICAL_LINE_LENGTH = 42;
@@ -89,14 +89,12 @@ export class PolymerBondRenderer extends BaseRenderer {
   private get scaledPosition() {
     // we need to convert monomer coordinates(stored in angstroms) to pixels.
     // it needs to be done in view layer of application (like renderers)
-    const startPositionInPixels = Scale.modelToCanvas(
+    const startPositionInPixels = Coordinates.modelToCanvas(
       this.polymerBond.startPosition,
-      this.editorSettings,
     );
 
-    const endPositionInPixels = Scale.modelToCanvas(
+    const endPositionInPixels = Coordinates.modelToCanvas(
       this.polymerBond.endPosition,
-      this.editorSettings,
     );
 
     return {

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

@@ -1105,11 +1105,11 @@ function getBondAromaticPath(
 
   if (bond.b.type === Bond.PATTERN.TYPE.SINGLE_OR_AROMATIC) {
     mask = bondShift > 0 ? 1 : 2;
-    dash = dashdotPattern.map((v) => v * options.scale);
+    dash = dashdotPattern.map((v) => v * options.microModeScale);
   }
   if (bond.b.type === Bond.PATTERN.TYPE.DOUBLE_OR_AROMATIC) {
     mask = 3;
-    dash = dashdotPattern.map((v) => v * options.scale);
+    dash = dashdotPattern.map((v) => v * options.microModeScale);
   }
   const paths = getAromaticBondPaths(
     hb1,

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

@@ -273,7 +273,7 @@ function showAttachmentPointShape(
   );
   const attachmentPointEnd = atomPositionVector.addScaled(
     directionVector,
-    options.scale * 0.85,
+    options.microModeScale * 0.85,
   );
 
   const resultShape = draw.rgroupAttachmentPoint(
@@ -350,7 +350,7 @@ function showAttachmentPointLabel(
   const labelPosition = getLabelPositionForAttachmentPoint(
     atomPositionVector,
     directionVector,
-    options.scale,
+    options.microModeScale,
   );
   const labelPath = draw.rgroupAttachmentPointLabel(
     paper,

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

@@ -126,7 +126,7 @@ class ReRxnArrow extends ReObject {
   }
 
   makeAdditionalInfo(restruct: ReStruct) {
-    const scaleFactor = restruct.render.options.scale;
+    const scaleFactor = restruct.render.options.microModeScale;
     const refPoints = this.getReferencePoints();
     const selectionSet = restruct.render.paper.set();
 
@@ -160,7 +160,7 @@ class ReRxnArrow extends ReObject {
     const item = this.item;
     const height =
       RxnArrow.isElliptical(item) && item.height
-        ? item.height * options.scale
+        ? item.height * options.microModeScale
         : 0;
     const pos = item.pos.map((p) => {
       return Scale.modelToCanvas(p, options) || new Vec2();

packages/ketcher-core/src/application/render/restruct/rerxnplus.js

@@ -33,7 +33,7 @@ class ReRxnPlus extends ReObject {
 
   hoverPath(render) {
     const p = Scale.modelToCanvas(this.item.pp, render.options);
-    const s = render.options.scale;
+    const s = render.options.microModeScale;
     /* eslint-disable no-mixed-operators */
     return render.paper.rect(p.x - s / 4, p.y - s / 4, s / 2, s / 2, s / 8);
     /* eslint-enable no-mixed-operators */

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

@@ -412,7 +412,7 @@ function drawAbsoluteDat(restruct: ReStruct, sgroup: SGroup): any {
   const paper = render.paper;
   const set = paper.set();
 
-  const ps = sgroup?.pp?.scaled(options.scale);
+  const ps = sgroup?.pp?.scaled(options.microModeScale);
   const name = showValue(paper, ps, sgroup, options);
 
   if (sgroup.data.context !== SgContexts.Bond) {

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

@@ -209,7 +209,7 @@ class ReSimpleObject extends ReObject {
     this.item.pos.forEach((p, index) => {
       point[index] = Scale.modelToCanvas(p, render.options);
     });
-    const scaleFactor = render.options.scale;
+    const scaleFactor = render.options.microModeScale;
 
     const paths: Array<StyledPath> = [];
 
@@ -373,7 +373,7 @@ class ReSimpleObject extends ReObject {
     });
 
     const refPoints = this.getReferencePoints();
-    const scaleFactor = restruct.render.options.scale;
+    const scaleFactor = restruct.render.options.microModeScale;
     this.selectionSet = restruct.render.paper.set();
     this.selectionPointsSet = restruct.render.paper.set();
     this.selectionSet.push(

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

@@ -169,7 +169,7 @@ function drawCIPLabel({
   const { options, paper } = restruct.render;
   const path = paper.set();
 
-  const cipLabelPosition = position.scaled(options.scale);
+  const cipLabelPosition = position.scaled(options.microModeScale);
   const cipValuePath = getCIPValuePath({
     paper,
     cipLabelPosition,

packages/ketcher-core/src/domain/helpers/scale.ts

@@ -17,15 +17,16 @@
 import { Vec2 } from 'domain/entities';
 
 export interface ScaleOptions {
-  scale: number;
+  microModeScale: number;
+  macroModeScale: number;
 }
 
 function canvasToModel(point: Vec2, options: ScaleOptions): Vec2 {
-  return point.scaled(1 / options.scale);
+  return point.scaled(1 / options.microModeScale);
 }
 
 function modelToCanvas(vector: Vec2, options: ScaleOptions): Vec2 {
-  return vector.scaled(options.scale);
+  return vector.scaled(options.microModeScale);
 }
 
 export const Scale = {