#4212 - Limit size of structures in preview

- fixed calculation of structure size for previews
epam · Sep 5, 2024 · 99c4757 · 99c4757
1 parent 32e33e0
commit 99c4757
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git a/packages/ketcher-core/src/application/render/raphaelRender.ts b/packages/ketcher-core/src/application/render/raphaelRender.ts
@@ -76,10 +76,7 @@ export class Render {
 
   observeCanvasResize = () => {
     this.resizeObserver = new ResizeObserver(() => {
-      this.sz = new Vec2(
-        this.clientArea.clientWidth,
-        this.clientArea.clientHeight,
-      );
+      this.sz = this.getCanvasSizeVector();
       this.resizeViewBox();
     });
 
@@ -138,7 +135,9 @@ export class Render {
   }
 
   private getCanvasSizeVector() {
-    return new Vec2(this.clientArea.clientWidth, this.clientArea.clientHeight);
+    return this.userOpts.width
+      ? new Vec2(this.userOpts.width, this.userOpts.height)
+      : new Vec2(this.clientArea.clientWidth, this.clientArea.clientHeight);
   }
 
   resizeViewBox() {
@@ -211,8 +210,8 @@ export class Render {
     viewSz =
       viewSz ||
       new Vec2(
-        this.clientArea.clientWidth || 100,
-        this.clientArea.clientHeight || 100,
+        this.userOpts.width || this.clientArea.clientWidth || 100,
+        this.userOpts.height || this.clientArea.clientHeight || 100,
       );
 
     const changes = this.ctab.update(force);

diff --git a/packages/ketcher-core/src/application/render/renderStruct.ts b/packages/ketcher-core/src/application/render/renderStruct.ts
@@ -1,7 +1,8 @@
-import { Struct } from 'domain/entities';
+import { Struct, Vec2 } from 'domain/entities';
 import { isEqual } from 'lodash';
 import { Render } from './raphaelRender';
 import ReAtom from './restruct/reatom';
+import { Coordinates } from 'application/editor';
 
 /**
  * Is used to improve search and opening tab performance in Template Dialog
@@ -58,11 +59,11 @@ export class RenderStruct {
   }
 
   static render(
-    el: HTMLElement | null,
+    wrapperElement: HTMLElement | null,
     struct: Struct | null,
     options: any = {},
   ) {
-    if (el && struct) {
+    if (wrapperElement && struct) {
       const { cachePrefix = '', needCache = true } = options;
       const cacheKey = `${cachePrefix}${struct.name}`;
 
@@ -72,7 +73,7 @@ export class RenderStruct {
       }
 
       if (renderCache.has(cacheKey) && needCache) {
-        el.innerHTML = renderCache.get(cacheKey);
+        wrapperElement.innerHTML = renderCache.get(cacheKey);
         return;
       }
 
@@ -81,13 +82,42 @@ export class RenderStruct {
       preparedStruct.initNeighbors();
       preparedStruct.setImplicitHydrogen();
       preparedStruct.markFragments();
-
-      const rnd = new Render(el, {
+      const structureSize = preparedStruct.getCoordBoundingBox();
+      const structureSizeInPixels = Coordinates.modelToCanvas(
+        new Vec2(
+          structureSize.max.x - structureSize.min.x,
+          structureSize.max.y - structureSize.min.y,
+        ),
+      );
+      const wrapperElementBoundingRect = wrapperElement.getBoundingClientRect();
+      const isStructureLessThanWrapper =
+        structureSizeInPixels.x < wrapperElementBoundingRect.width &&
+        structureSizeInPixels.y < wrapperElementBoundingRect.height;
+      const structureRectangleSize = Math.max(
+        structureSizeInPixels.x,
+        structureSizeInPixels.y,
+      );
+      const svgSize = isStructureLessThanWrapper
+        ? Math.min(
+            structureRectangleSize,
+            wrapperElementBoundingRect.width,
+            wrapperElementBoundingRect.height,
+          )
+        : undefined;
+      const extendedOptions = {
         autoScale: true,
         ...options,
-      });
+        width: svgSize,
+        height: svgSize,
+      };
+
+      if (window.isPolymerEditorTurnedOn) {
+        extendedOptions.fontsz = 40;
+        extendedOptions.fontszsub = 30;
+      }
+
+      const rnd = new Render(wrapperElement, extendedOptions);
 
-      preparedStruct.rescale();
       rnd.setMolecule(preparedStruct);
       this.removeSmallAttachmentPointLabelsInModal(rnd, options);
 

diff --git a/packages/ketcher-react/src/components/StructRender/styles.ts b/packages/ketcher-react/src/components/StructRender/styles.ts
@@ -17,8 +17,7 @@
 import styled from '@emotion/styled';
 
 export const Container = styled.div`
-  > svg {
-    height: 100%;
-    width: 100%;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;