#3902 - Macro: If open a macro file and put in center of canvas in mi…

…cro mode then switch to macro, structure is not in center of canvas

ketcher-autotests/tests/Macromolecule-editor/Undo-Redo/undo-redo.spec.ts

@@ -126,16 +126,16 @@ test.describe('Undo Redo', () => {
     await clickUndo(page);
     await takeEditorScreenshot(page);
 
-    const startX = 100;
-    const startY = 100;
-    const endX = 900;
-    const endY = 900;
+    const startX = 10;
+    const startY = 10;
+    const endX = 1900;
+    const endY = 1900;
     await selectRectangleArea(page, startX, startY, endX, endY);
 
-    const coords = { x: 840, y: 470 };
+    const coords = { x: 100, y: 100 };
     await page.mouse.move(coords.x, coords.y);
 
-    await dragMouseTo(coords.x + 100, coords.y + 100, page);
+    await dragMouseTo(coords.x + 500, coords.y + 500, page);
     await takeEditorScreenshot(page);
   });
 });

packages/ketcher-core/__tests__/application/editor/shared/coordinates.test.ts

@@ -11,25 +11,25 @@ describe('Coordinates', () => {
 
   it('should convert page coordinates to model coordinates', () => {
     const converted = Coordinates.canvasToModel(position);
-    const coordinates = new Vec2(0.6666666666666667, 0.6666666666666667, 0);
+    const coordinates = new Vec2(2.5, 2.5, 0);
     expect(converted).toEqual(coordinates);
   });
 
   it('should convert view coordinates to model coordinates', () => {
     const converted = Coordinates.viewToModel(position);
-    const coordinates = new Vec2(0.33333333333333337, 0.33333333333333337, 0);
+    const coordinates = new Vec2(1.25, 1.25, 0);
     expect(converted).toEqual(coordinates);
   });
 
   it('should convert modal coordinates to view coordinates', () => {
     const coordinates = Coordinates.modelToView(position);
-    const converted = new Vec2(18040, 18040, 0);
+    const converted = new Vec2(4840, 4840, 0);
     expect(coordinates).toEqual(converted);
   });
 
   it('should convert modal coordinates to page coordinates', () => {
     const coordinates = Coordinates.modelToCanvas(position);
-    const converted = new Vec2(15000, 15000, 0);
+    const converted = new Vec2(4000, 4000, 0);
     expect(coordinates).toEqual(converted);
   });
 

packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PeptideRenderer.test.ts.snap

@@ -29,9 +29,9 @@ exports[`PeptideRenderer should render peptide 1`] = `
       />
       <text
         fill="black"
-        font-size="12px"
+        font-size="6px"
         font-weight="700"
-        line-height="12px"
+        line-height="6px"
         pointer-events="none"
         style="cursor: pointer; user-select: none;"
         x="0"
@@ -42,22 +42,22 @@ exports[`PeptideRenderer should render peptide 1`] = `
       <text
         direction="rtl"
         fill="#7C7C7F"
-        font-size="12px"
+        font-size="8px"
         font-weight="500"
-        line-height="14px"
+        line-height="10px"
         text-align="right"
-        x="20"
+        x="10"
         y="-1"
       />
       <text
         direction="rtl"
         fill="#0097A8"
-        font-size="12px"
+        font-size="8px"
         font-weight="700"
-        line-height="14px"
+        line-height="10px"
         text-align="right"
-        x="-13"
-        y="20"
+        x="-6"
+        y="10"
       />
     </g>
   </g>

packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PolymerBondRenderer.test.ts.snap

@@ -26,18 +26,18 @@ exports[`Polymer Bond Renderer should render bond 1`] = `
         pointer-events="stroke"
         stroke="#333333"
         stroke-width="2"
-        x1="1500"
-        x2="13500"
-        y1="1500"
-        y2="15000"
+        x1="400"
+        x2="3600"
+        y1="400"
+        y2="4000"
       />
       <line
         stroke="transparent"
         stroke-width="10"
-        x1="1500"
-        x2="13500"
-        y1="1500"
-        y2="15000"
+        x1="400"
+        x2="3600"
+        y1="400"
+        y2="4000"
       />
     </g>
   </g>

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

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

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

@@ -32,3 +32,4 @@ export * from './Editor';
 export * from './EditorHistory';
 export * from './modes';
 export * from './editorEvents';
+export * from './editorSettings';

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

@@ -261,8 +261,8 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
       .append('text')
       .text(this.monomer.label)
       .attr('fill', this.textColor)
-      .attr('font-size', '12px')
-      .attr('line-height', '12px')
+      .attr('font-size', '6px')
+      .attr('line-height', '6px')
       .attr('font-weight', '700')
       .style('cursor', 'pointer')
       .style('user-select', 'none')
@@ -315,7 +315,7 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
 
       this.selectionCircle = this.canvas
         ?.insert('circle', ':first-child')
-        .attr('r', '42px')
+        .attr('r', '21px')
         .attr('opacity', '0.7')
         .attr('cx', this.center.x)
         .attr('cy', this.center.y)
@@ -379,8 +379,8 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
       .append('text')
       .attr('direction', 'rtl')
       .attr('fill', '#7C7C7F')
-      .attr('font-size', '12px')
-      .attr('line-height', '14px')
+      .attr('font-size', '8px')
+      .attr('line-height', '10px')
       .attr('font-weight', '500')
       .attr('text-align', 'right')
       .attr('x', this.enumerationElementPosition.x)
@@ -404,8 +404,8 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
       .append('text')
       .attr('direction', 'rtl')
       .attr('fill', '#0097A8')
-      .attr('font-size', '12px')
-      .attr('line-height', '14px')
+      .attr('font-size', '8px')
+      .attr('line-height', '10px')
       .attr('font-weight', '700')
       .attr('text-align', 'right')
       .attr('x', this.beginningElementPosition.x)

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

@@ -38,10 +38,10 @@ export class PeptideRenderer extends BaseMonomerRenderer {
   }
 
   protected get enumerationElementPosition() {
-    return { x: 20, y: -1 };
+    return { x: 10, y: -1 };
   }
 
   protected get beginningElementPosition() {
-    return { x: -13, y: 20 };
+    return { x: -6, y: 10 };
   }
 }

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

@@ -34,7 +34,7 @@ export class RNABaseRenderer extends BaseMonomerRenderer {
   }
 
   protected get enumerationElementPosition() {
-    return { x: 23, y: 10 };
+    return { x: 11, y: 5 };
   }
 
   protected get beginningElementPosition() {

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

@@ -40,6 +40,6 @@ export class SugarRenderer extends BaseMonomerRenderer {
   }
 
   protected get beginningElementPosition() {
-    return { x: -11, y: 15 };
+    return { x: -5, y: 7 };
   }
 }

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Chem.tsx

@@ -19,20 +19,24 @@ export const ChemAvatar = () => (
     <symbol id="chem" viewBox="0 0 59 59" width="59" height="59">
       <rect
         className="monomer-body"
-        width="59"
-        height="59"
-        rx="1.5"
+        width="29.5"
+        height="29.5"
+        x="0.5"
+        y="0.5"
+        rx="0.75"
         fill="#F5F6F7"
       />
     </symbol>
     <symbol id="chem-selection" viewBox="0 0 59 59" width="59" height="59">
       <rect
-        width="59"
-        height="59"
-        rx="1.5"
+        width="29.5"
+        height="29.5"
+        x="0.5"
+        y="0.5"
+        rx="0.75"
         stroke="#0097A8"
         fill="none"
-        strokeWidth="3"
+        strokeWidth="1.5"
       />
     </symbol>
   </>

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Peptide.tsx

@@ -19,13 +19,15 @@ export const PeptideAvatar = () => (
     <symbol id="peptide" viewBox="0 0 70 61" width="70" height="61">
       <path
         className="monomer-body"
+        transform="scale(0.5)"
         d="M16.9236 1.00466C17.2801 0.383231 17.9418 6.10888e-07 18.6583 5.98224e-07L51.3417 2.04752e-08C52.0582 7.81036e-09 52.7199 0.383234 53.0764 1.00466L69.4289 29.5047C69.7826 30.1211 69.7826 30.8789 69.4289 31.4953L53.0764 59.9953C52.7199 60.6168 52.0582 61 51.3417 61H18.6583C17.9418 61 17.2801 60.6168 16.9236 59.9953L0.571095 31.4953C0.217407 30.8789 0.217408 30.1211 0.571096 29.5047L16.9236 1.00466Z"
       ></path>
     </symbol>
     <symbol id="peptide-hover" viewBox="0 0 70 61" width="70" height="61">
       <path
         d="M18.2246 1.75116C18.3137 1.59581 18.4792 1.5 18.6583 1.5L51.3417 1.5C51.5208 1.5 51.6863 1.59581 51.7754 1.75116L53.06 1.01408L51.7754 1.75117L68.1279 30.2512C68.2163 30.4053 68.2163 30.5947 68.1279 30.7488L51.7754 59.2488C51.6863 59.4042 51.5208 59.5 51.3417 59.5H18.6583C18.4792 59.5 18.3137 59.4042 18.2246 59.2488L1.87215 30.7488C1.78372 30.5947 1.78372 30.4053 1.87215 30.2512L18.2246 1.75116Z"
         fill="none"
+        transform="scale(0.5)"
         stroke="#0097A8"
         strokeWidth="3"
       />{' '}
@@ -35,6 +37,7 @@ export const PeptideAvatar = () => (
         xmlns="http://www.w3.org/2000/svg"
         d="M17.3572 1.25349C17.6247 0.787424 18.1209 0.500001 18.6583 0.500001L51.3417 0.5C51.8791 0.5 52.3753 0.787425 52.6428 1.2535L53.0665 1.01035L52.6428 1.2535L68.9952 29.7535C69.2605 30.2158 69.2605 30.7842 68.9952 31.2465L52.6428 59.7465C52.3753 60.2126 51.8791 60.5 51.3417 60.5H18.6583C18.1209 60.5 17.6247 60.2126 17.3572 59.7465L1.00478 31.2465C0.739513 30.7842 0.739513 30.2158 1.00478 29.7535L17.3572 1.25349Z"
         fill="none"
+        transform="scale(0.5)"
         stroke="#0097A8"
       />
     </symbol>

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Phosphate.tsx

@@ -17,21 +17,21 @@
 export const PhosphateAvatar = () => (
   <>
     <symbol id="phosphate" viewBox="0 0 70 70" width="70" height="70">
-      <rect className="monomer-body" width="56" height="56" rx="30" />
+      <rect className="monomer-body" width="28" height="28" rx="15" />
     </symbol>
     <symbol
       id="phosphate-selection"
-      viewBox="-2 -2 75 75"
+      viewBox="-1 -1 75 75"
       width="70"
       height="70"
     >
       <rect
-        width="56"
-        height="56"
-        rx="30"
+        width="28"
+        height="28"
+        rx="15"
         fill="none"
         stroke="#0097A8"
-        strokeWidth="3"
+        strokeWidth="2"
       />
     </symbol>
   </>

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/RNABase.tsx

@@ -16,25 +16,32 @@
 
 export const RNABaseAvatar = () => (
   <>
-    <symbol id="rna-base" viewBox="0 0 65 65" width="65" height="95">
+    <symbol id="rna-base" viewBox="-16 0 65 65" width="65" height="95">
       <rect
-        width="45"
-        height="45"
-        rx="2"
-        transform-origin="center"
+        width="22.5"
+        height="22.5"
+        rx="1"
+        x="-11.25"
+        y="-11.25"
         transform="rotate(45)"
         className="monomer-body"
       />
     </symbol>
-    <symbol id="rna-base-selection" viewBox="0 0 65 65" width="65" height="95">
+    <symbol
+      id="rna-base-selection"
+      viewBox="-15.75 -0.25 65 65"
+      width="65"
+      height="95"
+    >
       <rect
-        width="45"
-        height="45"
-        rx="2"
-        transform-origin="center"
+        width="21"
+        height="21"
+        rx="1"
+        x="-10.5"
+        y="-10.5"
         transform="rotate(45)"
         stroke="#0097A8"
-        strokeWidth="3"
+        strokeWidth="2"
         fill="none"
       />
     </symbol>

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Sugar.tsx

@@ -17,16 +17,16 @@
 export const SugarAvatar = () => (
   <>
     <symbol id="sugar" viewBox="0 0 70 70" width="70" height="70">
-      <rect className="monomer-body" width="57" height="57" rx="10" />
+      <rect className="monomer-body" width="28.5" height="28.5" rx="5" />
     </symbol>
-    <symbol id="sugar-selection" viewBox="-2 -2 100 100" width="70" height="70">
+    <symbol id="sugar-selection" viewBox="-1 -1 100 100" width="70" height="70">
       <rect
-        width="78"
-        height="78"
-        rx="10"
+        width="39"
+        height="39"
+        rx="5"
         fill="none"
         stroke="#0097A8"
-        strokeWidth="5"
+        strokeWidth="2"
       />
     </symbol>
   </>

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

@@ -26,6 +26,7 @@ import {
   fromDescriptorsAlign,
   fromMultipleMove,
   fromNewCanvas,
+  provideEditorSettings,
 } from 'ketcher-core';
 import {
   DOMSubscription,
@@ -49,7 +50,7 @@ import {
 } from './tool/Tool';
 import { getSelectionMap, getStructCenter } from './utils/structLayout';
 
-const SCALE = 40;
+const SCALE = provideEditorSettings().microModeScale;
 const HISTORY_SIZE = 32; // put me to options
 
 const structObjects = [