#3923 The scale of structures in "Select Attachment Points" Modal is …

…too big

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

@@ -199,58 +199,82 @@ export class Render {
   }
 
   update(force = false, viewSz: Vec2 | null = null) {
-    // eslint-disable-line max-statements
-    viewSz =
-      viewSz ||
-      new Vec2(
-        this.clientArea.clientWidth || 100,
-        this.clientArea.clientHeight || 100,
-      );
-
     const changes = this.ctab.update(force);
     this.ctab.setSelection(); // [MK] redraw the selection bits where necessary
     if (changes) {
-      const bb = this.ctab
-        .getVBoxObj()
-        .transform(Scale.modelToCanvas, this.options)
-        .translate(this.options.offset || new Vec2());
-
       if (this.options.downScale) {
         this.ctab.molecule.rescale();
       }
-
       const isAutoScale = this.options.autoScale || this.options.downScale;
       if (!isAutoScale) {
         if (!this.oldCb) this.oldCb = new Box2Abs();
         this.scrollbar.update();
         this.options.offset = this.options.offset || new Vec2();
       } else {
-        const sz1 = bb.sz();
+        viewSz = this.getViewSize(viewSz);
+        const boundingBox = this.getBoundingBox();
+        const boundingBoxSize = boundingBox.sz();
         const marg = this.options.autoScaleMargin;
-        const mv = new Vec2(marg, marg);
-        const csz = viewSz;
-        if (marg && (csz.x < 2 * marg + 1 || csz.y < 2 * marg + 1)) {
+        const margVector = new Vec2(marg, marg);
+        if (marg && (viewSz.x < 2 * marg + 1 || viewSz.y < 2 * marg + 1)) {
           throw new Error('View box too small for the given margin');
         }
-        let rescale =
-          this.options.rescaleAmount ||
-          Math.max(sz1.x / (csz.x - 2 * marg), sz1.y / (csz.y - 2 * marg));
-
-        const isForceDownscale = this.options.downScale && rescale < 1;
-        const isBondsLengthFit = this.options.maxBondLength / rescale > 1;
-        if (isBondsLengthFit || isForceDownscale) {
-          rescale = 1;
-        }
-        const sz2 = sz1.add(mv.scaled(2 * rescale));
+        const rescale = this.calculateRescale();
+        const scaledBoundingBoxSize = boundingBoxSize.add(
+          margVector.scaled(2 * rescale),
+        );
         this.paper.setViewBox(
-          bb.pos().x - marg * rescale - (csz.x * rescale - sz2.x) / 2,
-          bb.pos().y - marg * rescale - (csz.y * rescale - sz2.y) / 2,
-          csz.x * rescale,
-          csz.y * rescale,
+          boundingBox.pos().x -
+            marg * rescale -
+            (viewSz.x * rescale - scaledBoundingBoxSize.x) / 2,
+          boundingBox.pos().y -
+            marg * rescale -
+            (viewSz.y * rescale - scaledBoundingBoxSize.y) / 2,
+          viewSz.x * rescale,
+          viewSz.y * rescale,
         );
       }
 
       notifyRenderComplete();
     }
   }
+
+  private getViewSize(viewSz: Vec2 | null) {
+    viewSz =
+      viewSz ||
+      new Vec2(
+        this.clientArea.clientWidth || 100,
+        this.clientArea.clientHeight || 100,
+      );
+    return viewSz;
+  }
+
+  calculateRescale(viewSz: Vec2 | null = null) {
+    const marg = this.options.autoScaleMargin;
+    viewSz = this.getViewSize(viewSz);
+    const boundingBox = this.getBoundingBox();
+    const boundingBoxSize = boundingBox.sz();
+    let rescale =
+      this.options.rescaleAmount ||
+      Math.max(
+        boundingBoxSize.x / (viewSz.x - 2 * marg),
+        boundingBoxSize.y / (viewSz.y - 2 * marg),
+      );
+    if (this.ctab.molecule.minPreviewRescale) {
+      rescale = Math.min(this.ctab.molecule.minPreviewRescale, rescale);
+    }
+    const isForceDownscale = this.options.downScale && rescale < 1;
+    const isBondsLengthFit = this.options.maxBondLength / rescale > 1;
+    if (isBondsLengthFit || isForceDownscale) {
+      rescale = 1;
+    }
+    return rescale;
+  }
+
+  private getBoundingBox() {
+    return this.ctab
+      .getVBoxObj()
+      .transform(Scale.modelToCanvas, this.options)
+      .translate(this.options.offset || new Vec2());
+  }
 }

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

@@ -59,6 +59,9 @@ export class RenderStruct {
     el: HTMLElement | null,
     struct: Struct | null,
     options: any = {},
+    originalStruct: Struct,
+    update = false,
+    monomerConnectionMode = false,
   ) {
     if (el && struct) {
       const { cachePrefix = '', needCache = true } = options;
@@ -87,6 +90,14 @@ export class RenderStruct {
 
       preparedStruct.rescale();
       rnd.setMolecule(preparedStruct);
+      if (monomerConnectionMode) {
+        const rescale = rnd.calculateRescale();
+        if (update) {
+          originalStruct.previewRescale = rescale;
+        } else {
+          originalStruct.minPreviewRescale = rescale;
+        }
+      }
       this.removeSmallAttachmentPointLabelsInModal(rnd, options);
 
       if (needCache) {

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

@@ -75,6 +75,8 @@ export class Struct {
   texts: Pool<Text>;
   functionalGroups: Pool<FunctionalGroup>;
   highlights: Pool<Highlight>;
+  previewRescale: number;
+  minPreviewRescale: number;
 
   constructor() {
     this.atoms = new Pool<Atom>();
@@ -95,6 +97,8 @@ export class Struct {
     this.texts = new Pool<Text>();
     this.functionalGroups = new Pool<FunctionalGroup>();
     this.highlights = new Pool<Highlight>();
+    this.previewRescale = 0;
+    this.minPreviewRescale = 0;
   }
 
   hasRxnProps(): boolean {

packages/ketcher-macromolecules/src/components/modal/monomerConnection/MonomerConnections.tsx

@@ -94,6 +94,24 @@ const MonomerConnection = ({
     useState<string | null>(getDefaultAttachmentPoint(secondMonomer));
   const [modalExpanded, setModalExpanded] = useState(false);
 
+  const [rescaleForMonomers, setRescaleForMonomers] = useState<number | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (modalExpanded) {
+      const rescale = Math.max(
+        firstMonomer.monomerItem.struct.previewRescale,
+        secondMonomer.monomerItem.struct.previewRescale,
+      );
+      setRescaleForMonomers(rescale);
+    }
+  }, [
+    firstMonomer.monomerItem.struct.previewRescale,
+    modalExpanded,
+    secondMonomer.monomerItem.struct.previewRescale,
+  ]);
+
   const cancelBondCreationAndClose = () => {
     editor.events.cancelBondCreationViaModal.dispatch(secondMonomer);
     onClose();
@@ -114,6 +132,11 @@ const MonomerConnection = ({
     onClose();
   };
 
+  const handleExpanded = (expand: boolean) => {
+    setModalExpanded(expand);
+    setRescaleForMonomers(null);
+  };
+
   return (
     <StyledModal
       title="Select connection points"
@@ -122,7 +145,7 @@ const MonomerConnection = ({
       showExpandButton
       modalWidth="358px"
       expanded={modalExpanded}
-      setExpanded={setModalExpanded}
+      setExpanded={handleExpanded}
     >
       <Modal.Content>
         <ModalContent>
@@ -135,6 +158,7 @@ const MonomerConnection = ({
               selectedAttachmentPoint={firstSelectedAttachmentPoint}
               onSelectAttachmentPoint={setFirstSelectedAttachmentPoint}
               expanded={modalExpanded}
+              rescaleForMonomers={rescaleForMonomers}
             />
             <span />
             <ConnectionSymbol />
@@ -148,6 +172,7 @@ const MonomerConnection = ({
               selectedAttachmentPoint={secondSelectedAttachmentPoint}
               onSelectAttachmentPoint={setSecondSelectedAttachmentPoint}
               expanded={modalExpanded}
+              rescaleForMonomers={rescaleForMonomers}
             />
           </AttachmentPointsRow>
         </ModalContent>
@@ -176,13 +201,15 @@ interface AttachmentPointSelectionPanelProps {
   selectedAttachmentPoint: string | null;
   onSelectAttachmentPoint: (attachmentPoint: string) => void;
   expanded?: boolean;
+  rescaleForMonomers: number | null;
 }
 
 function AttachmentPointSelectionPanel({
   monomer,
   selectedAttachmentPoint,
   onSelectAttachmentPoint,
   expanded = false,
+  rescaleForMonomers,
 }: AttachmentPointSelectionPanelProps): React.ReactElement {
   const [bonds, setBonds] = useState(monomer.attachmentPointsToBonds);
   const [connectedAttachmentPoints, setConnectedAttachmentPoints] = useState(
@@ -236,8 +263,11 @@ function AttachmentPointSelectionPanel({
             selectedAttachmentPoint ?? undefined,
           labelInMonomerConnectionsModal: true,
           needCache: false,
+          autoScaleMargin: 1,
+          rescaleAmount: rescaleForMonomers,
         }}
         update={expanded}
+        monomerConnectionMode={true}
         isExpanded={expanded}
       />
       <AttachmentPointList>

packages/ketcher-react/src/components/StructRender/StructRender.tsx

@@ -42,6 +42,7 @@ const StructRender = ({
   options,
   className,
   update,
+  monomerConnectionMode,
 }: IStructRenderProps) => {
   const renderRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -50,7 +51,14 @@ const StructRender = ({
     if (container) {
       container.innerHTML = '';
       const normalizedStruct = normalizeStruct(struct);
-      RenderStruct.render(container, normalizedStruct, options);
+      RenderStruct.render(
+        container,
+        normalizedStruct,
+        options,
+        struct,
+        update,
+        monomerConnectionMode,
+      );
     }
   }, [struct, options, update]);
 

packages/ketcher-react/src/components/StructRender/types.ts

@@ -26,4 +26,5 @@ export interface IStructRenderProps {
   options?: (RenderOptions & CasheOptions) | CasheOptions;
   className?: string;
   update?: boolean;
+  monomerConnectionMode?: boolean;
 }