From 02455b061e96ba5ba1eb3a48dca1f651d0f57ecb Mon Sep 17 00:00:00 2001
From: Nikita <Nikita_Vozisov@epam.com>
Date: Tue, 18 Apr 2023 17:33:17 +0300
Subject: [PATCH] =?UTF-8?q?#2482=20=E2=80=93=20Ketcher=20with=20iFrame=20l?=
 =?UTF-8?q?oads=20with=20scrollbars=20activated=20(#2489)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/application/render/raphaelRender.js       | 15 ++++++++-------
 .../ketcher-react/src/script/editor/Editor.ts     |  4 ++--
 .../src/script/editor/tool/helper/dropAndMerge.ts |  2 +-
 .../ketcher-react/src/script/editor/tool/paste.ts |  2 +-
 .../src/script/editor/tool/select.ts              |  6 +++---
 .../src/script/ui/component/form/input.tsx        |  4 ++--
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/ketcher-core/src/application/render/raphaelRender.js b/packages/ketcher-core/src/application/render/raphaelRender.js
index 377abf6b6f..0c6d68b055 100644
--- 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
index 77ad3a4e44..2bb3f2186c 100644
--- 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
index fa45b46dd5..e36530e32e 100644
--- 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
index 0fab5f6e58..3993799d58 100644
--- 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
index 2446d6a4f1..3c9026b5b6 100644
--- 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
index ba90c14086..3e78c9448f 100644
--- 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)}