#2482 – Ketcher with iFrame loads with scrollbars activated

epam · Apr 18, 2023 · 70bd243 · 70bd243
1 parent a359586
commit 70bd243
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 16 deletions.
diff --git a/packages/ketcher-core/src/application/render/raphaelRender.js b/packages/ketcher-core/src/application/render/raphaelRender.js
@@ -194,7 +194,7 @@ Render.prototype.update = function (
   force = false,
   viewSz = null,
   options = {
-    extendCanvas: true
+    resizeCanvas: true
   }
 ) {
   // eslint-disable-line max-statements
@@ -232,16 +232,17 @@ Render.prototype.update = function (
       const sz = cb.sz().floor()
       const delta = this.oldCb.p0.sub(cb.p0).ceil()
       this.oldBb = bb
-      // TO DO: decrease canvas size, when it has empty space. This logic needs to be defined in the future
-      if (
-        (!this.sz || sz.x > this.sz.x || sz.y > this.sz.y) &&
-        options.extendCanvas
-      ) {
+      const shouldResizeCanvas =
+        (!this.sz || sz.x !== this.sz.x || sz.y !== this.sz.y) &&
+        options.resizeCanvas
+      if (shouldResizeCanvas) {
         this.setPaperSize(sz)
       }
 
       this.options.offset = this.options.offset || new Vec2()
-      if ((delta.x !== 0 || delta.y !== 0) && options.extendCanvas) {
+      const shouldScrollCanvas =
+        (delta.x !== 0 || delta.y !== 0) && options.resizeCanvas
+      if (shouldScrollCanvas) {
         this.setOffset(this.options.offset.add(delta))
         this.ctab.translate(delta)
       }

diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -355,7 +355,7 @@ class Editor implements KetcherEditor {
     this.render.ctab.setSelection(this._selection) // eslint-disable-line
     this.event.selectionChange.dispatch(this._selection) // eslint-disable-line
 
-    this.render.update()
+    this.render.update(false, null, { resizeCanvas: false })
     return this._selection // eslint-disable-line
   }
 
@@ -380,7 +380,7 @@ class Editor implements KetcherEditor {
   update(
     action: Action | true,
     ignoreHistory?: boolean,
-    options = { extendCanvas: true }
+    options = { resizeCanvas: true }
   ) {
     if (action === true) {
       this.render.update(true, null, options) // force

diff --git a/packages/ketcher-react/src/script/editor/tool/helper/dropAndMerge.ts b/packages/ketcher-react/src/script/editor/tool/helper/dropAndMerge.ts
@@ -34,7 +34,7 @@ export function dropAndMerge(
   if (isMerging) editor.selection(null)
 
   if (dropItemAction?.operations.length > 0) {
-    editor.update(dropItemAction)
+    editor.update(dropItemAction, false, { resizeCanvas: false })
   }
 }
 

diff --git a/packages/ketcher-react/src/script/editor/tool/paste.ts b/packages/ketcher-react/src/script/editor/tool/paste.ts
@@ -163,7 +163,7 @@ class PasteTool {
         this.editor.render.page2obj(event)
       )
       this.action = action
-      this.editor.update(this.action, true, { extendCanvas: false })
+      this.editor.update(this.action, true, { resizeCanvas: false })
 
       this.mergeItems = getMergeItems(this.editor, pasteItems)
       this.editor.hover(getHoverToFuse(this.mergeItems))

diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts
@@ -211,8 +211,8 @@ class SelectTool {
       dragCtx.mergeItems = getMergeItems(editor, expSel)
       editor.hover(getHoverToFuse(dragCtx.mergeItems))
 
-      extendCanvas(rnd, event)
-      editor.update(dragCtx.action, true, { extendCanvas: false })
+      resizeCanvas(rnd, event)
+      editor.update(dragCtx.action, true, { resizeCanvas: false })
       return true
     }
 
@@ -463,7 +463,7 @@ class SelectTool {
   }
 }
 
-function extendCanvas(render, event) {
+function resizeCanvas(render, event) {
   const offset = 1
   const {
     isCloseToLeftEdgeOfCanvas,

diff --git a/packages/ketcher-react/src/script/ui/component/form/input.tsx b/packages/ketcher-react/src/script/ui/component/form/input.tsx
@@ -35,7 +35,7 @@ type Props = {
 
 export function GenericInput({
   schema,
-  value = '',
+  value,
   onChange,
   innerRef,
   type = 'text',
@@ -60,7 +60,7 @@ export function GenericInput({
     <>
       <input
         type={type}
-        value={value}
+        value={value ?? ''}
         onInput={onChange}
         onChange={onChange}
         className={clsx(classes.input, classes.genericInput)}