#2369 – added zoom for preview and selection

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

@@ -51,6 +51,9 @@ export class CoreEditor {
     this.zoom = zoomProvider.getZoomTool(this.drawingEntitiesManager);
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     editor = this;
+    window.ketcher.macromolecules = {
+      editor: this,
+    };
   }
 
   static provideEditorInstance(): CoreEditor {
@@ -189,7 +192,6 @@ export class CoreEditor {
         x: event.pageX - clientAreaBoundingBox.x,
         y: event.pageY - clientAreaBoundingBox.y,
       });
-      console.log(this.lastCursorPosition);
     }
   }
 

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

@@ -14,9 +14,8 @@ class Coordinates {
 
   static viewToModel(position: Vec2) {
     const settings = provideEditorSettings();
-    return zoomProvider
-      .getZoomTool()
-      .invertZoom(position.scaled(1 / settings.scale));
+    const pos = zoomProvider.getZoomTool().invertZoom(position);
+    return pos.scaled(1 / settings.scale);
   }
 
   static modelToView(position: Vec2) {

packages/ketcher-core/src/application/editor/tools/Monomer.ts

@@ -26,6 +26,7 @@ import { MonomerItemType } from 'domain/types';
 import { monomerFactory } from '../operations/monomer/monomerFactory';
 import assert from 'assert';
 import Coordinates from '../shared/coordinates';
+import { zoomProvider } from './Zoom';
 
 class MonomerTool implements Tool {
   private monomerPreview:
@@ -47,32 +48,33 @@ class MonomerTool implements Tool {
 
   mousedown() {
     assert(this.monomerPreviewRenderer);
+    const zoomLevel = zoomProvider.getZoomTool().zoomLevel;
+    const position = Coordinates.viewToModel(
+      new Vec2(
+        this.editor.lastCursorPosition.x -
+          (this.monomerPreviewRenderer.width * zoomLevel) / 2,
+        this.editor.lastCursorPosition.y -
+          (this.monomerPreviewRenderer.height * zoomLevel) / 2,
+      ),
+    );
     const modelChanges = this.editor.drawingEntitiesManager.addMonomer(
       this.monomer,
       // We convert monomer coordinates from pixels to angstroms
       // because the model layer (like BaseMonomer) should not work with pixels
-      Coordinates.pageToModel(
-        new Vec2(
-          this.editor.lastCursorPosition.x -
-            this.monomerPreviewRenderer.width / 2,
-          this.editor.lastCursorPosition.y -
-            this.monomerPreviewRenderer.height / 2,
-        ),
-      ),
+      position,
     );
 
     this.editor.renderersContainer.update(modelChanges);
   }
 
   mousemove() {
-    this.monomerPreview?.moveAbsolute(
-      Coordinates.pageToModel(
-        new Vec2(
-          this.editor.lastCursorPosition.x + this.MONOMER_PREVIEW_OFFSET_X,
-          this.editor.lastCursorPosition.y + this.MONOMER_PREVIEW_OFFSET_Y,
-        ),
+    const position = Coordinates.viewToModel(
+      new Vec2(
+        this.editor.lastCursorPosition.x + this.MONOMER_PREVIEW_OFFSET_X,
+        this.editor.lastCursorPosition.y + this.MONOMER_PREVIEW_OFFSET_Y,
       ),
     );
+    this.monomerPreview?.moveAbsolute(position);
     this.monomerPreviewRenderer?.move();
   }
 

packages/ketcher-core/src/application/editor/tools/SelectRectangle.ts

@@ -21,6 +21,7 @@ import { Command } from 'domain/entities/Command';
 import { BaseTool } from 'application/editor/tools/Tool';
 import { Scale } from 'domain/helpers';
 import { provideEditorSettings } from 'application/editor/editorSettings';
+import Coordinates from '../shared/coordinates';
 
 class SelectRectangle implements BaseTool {
   private brush;
@@ -38,12 +39,12 @@ class SelectRectangle implements BaseTool {
       if (!selection) return;
 
       requestAnimationFrame(() => {
-        const topLeftPoint = new Vec2(selection[0][0], selection[0][1]);
-        const bottomRightPoint = new Vec2(selection[1][0], selection[1][1]);
-        // const topLeftPointZoomed = utils.pageCoordinatesToView(topLeftPoint);
-        // const bottomRightPointZoomed =
-        //   utils.pageCoordinatesToView(bottomRightPoint);
-        console.log('bottomRightCorner', bottomRightPoint);
+        const topLeftPoint = Coordinates.pageToView(
+          new Vec2(selection[0][0], selection[0][1]),
+        );
+        const bottomRightPoint = Coordinates.pageToView(
+          new Vec2(selection[1][0], selection[1][1]),
+        );
         const modelChanges =
           this.editor.drawingEntitiesManager.selectIfLocatedInRectangle(
             topLeftPoint,

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

@@ -29,9 +29,10 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
   }
 
   public get center() {
+    const zoom = zoomProvider.getZoomTool().zoomLevel;
     return {
-      x: this.scaledMonomerPosition.x + this.bodyWidth / 2,
-      y: this.scaledMonomerPosition.y + this.bodyHeight / 2,
+      x: this.scaledMonomerPosition.x + this.bodyWidth / zoom / 2,
+      y: this.scaledMonomerPosition.y + this.bodyHeight / zoom / 2,
     };
   }
 
@@ -113,7 +114,6 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
   public appendR1AttachmentPoint(
     rootElement: D3SvgElementSelection<SVGGElement, void>,
   ) {
-    console.log(this.bodyHeight / zoomProvider.getZoomTool().zoomLevel);
     const attachmentPoint = this.appendAttachmentPoint(
       rootElement,
       { x: 0, y: zoomProvider.getZoomTool().unzoomValue(this.bodyHeight) / 2 },
@@ -217,7 +217,7 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
   private get scaledMonomerPosition() {
     // we need to convert monomer coordinates(stored in angstroms) to pixels.
     // it needs to be done in view layer of application (like renderers)
-    return Coordinates.modelToView(this.monomer.position);
+    return Coordinates.modelToPage(this.monomer.position);
   }
 
   public appendSelection() {
@@ -229,13 +229,11 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
       .attr('stroke', '#57FF8F')
       .attr('pointer-events', 'none');
 
-    const defaultRadius = 42;
-    const radius = zoomProvider.getZoomTool().zoomLevel * defaultRadius;
-    this.selectionCircle = this.canvasWrapper
+    this.selectionCircle = this.canvas
       ?.insert('circle', ':first-child')
-      .attr('r', `${radius}px`)
-      .attr('cx', this.scaledMonomerPosition.x + this.bodyWidth / 2)
-      .attr('cy', this.scaledMonomerPosition.y + this.bodyHeight / 2)
+      .attr('r', '42px')
+      .attr('cx', this.center.x)
+      .attr('cy', this.center.y)
       .attr('fill', '#57FF8F');
   }
 

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

@@ -65,7 +65,6 @@ export abstract class BaseRenderer implements IBaseRenderer {
 
   public get bodyBBox() {
     const rootNode = this.bodyElement?.node();
-    // console.log(rootNode);
     const canvasWrapperNode = this.canvasWrapper.node();
     assert(canvasWrapperNode);
     if (!rootNode) return;
@@ -75,8 +74,6 @@ export abstract class BaseRenderer implements IBaseRenderer {
       rootBbox.x - canvasBbox.x,
       rootBbox.y - canvasBbox.y,
     );
-    console.log('bodyBBox topLeft', position);
-    // const zoomedPosition = utils.pageCoordinatesToView(position);
 
     return {
       x: position.x,

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

@@ -1,6 +1,8 @@
 import { Vec2 } from 'domain/entities/vec2';
 import { BaseRenderer } from 'application/render/renderers/BaseRenderer';
 import assert from 'assert';
+import { zoomProvider } from 'application/editor/tools/Zoom';
+import Coordinates from 'application/editor/shared/coordinates';
 let id = 1;
 
 export abstract class DrawingEntity {
@@ -50,8 +52,15 @@ export abstract class DrawingEntity {
   ) {
     assert(this.baseRenderer);
     const prevSelectedValue = this.selected;
-    const centerX = this.baseRenderer.bodyX + this.baseRenderer.bodyWidth / 2;
-    const centerY = this.baseRenderer.bodyY + this.baseRenderer.bodyHeight / 2;
+    const zoom = zoomProvider.getZoomTool().zoomLevel;
+    const center = Coordinates.pageToView(
+      new Vec2(
+        this.baseRenderer.bodyX + (this.baseRenderer.bodyWidth * zoom) / 2,
+        this.baseRenderer.bodyY + (this.baseRenderer.bodyHeight * zoom) / 2,
+      ),
+    );
+    const centerX = center.x;
+    const centerY = center.y;
     if (
       rectangleBottomRightPoint.x > centerX &&
       rectangleBottomRightPoint.y > centerY &&