From a6fb5cb40bf9c2dbef10bbf731437d85365aa654 Mon Sep 17 00:00:00 2001
From: T4rikA <talnawa@outlook.de>
Date: Mon, 14 Jun 2021 15:04:14 +0200
Subject: [PATCH] Fix saving issues with resizeable panels

Co-authored-by: frcroth <frcroth@gmail.com>
Co-authored-by: Paula-Kli <Paula-Kli@users.noreply.github.com>
---
 editor.js                     | 5 +++--
 interactive.js                | 1 -
 utilities/resizeable-panel.js | 9 +++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/editor.js b/editor.js
index 25cf9a90a..a60812ca4 100644
--- a/editor.js
+++ b/editor.js
@@ -38,7 +38,8 @@ const CONSTANTS = {
   MENU_BAR_WIDGET_WIDTH: 100,
   MENU_BAR_WIDGET_HEIGHT: 25,
   FONT_SIZE_TEXT: 18,
-  FONT_SIZE_HEADINGS: 20
+  FONT_SIZE_HEADINGS: 20,
+  SCROLL_BAR_HEIGHT: 10
 };
 CONSTANTS.SIDEBAR_WIDTH = (CONSTANTS.EDITOR_WIDTH - CONSTANTS.PREVIEW_WIDTH) / 2;
 CONSTANTS.TIMELINE_HEIGHT = CONSTANTS.EDITOR_HEIGHT - CONSTANTS.SUBWINDOW_HEIGHT - CONSTANTS.MENU_BAR_HEIGHT;
@@ -231,7 +232,7 @@ export class InteractivesEditor extends QinoqMorph {
       this._latestSubWindowRatio = this.ui.subWindow.height / this.height;
     }
 
-    const topWindowHeight = this.ui.subWindow.top;
+    const topWindowHeight = this.ui.subWindow.top - CONSTANTS.SCROLL_BAR_HEIGHT;
 
     this.ui.interactiveGraph.extent = pt(this.ui.interactiveGraph.width, topWindowHeight);
 
diff --git a/interactive.js b/interactive.js
index 02babbe92..6743ab934 100644
--- a/interactive.js
+++ b/interactive.js
@@ -56,7 +56,6 @@ export class Interactive extends DeserializationAwareMorph {
         defaultValue: 16 / 9,
         set (aspectRatio) {
           this.setProperty('fixedAspectRatio', aspectRatio);
-          // eslint-disable-next-line no-self-assign
           this.extent = this.applyAspectRatio(this.extent);
         }
       },
diff --git a/utilities/resizeable-panel.js b/utilities/resizeable-panel.js
index 9cb4efcd9..e2f481983 100644
--- a/utilities/resizeable-panel.js
+++ b/utilities/resizeable-panel.js
@@ -1,6 +1,7 @@
-import { Morph } from 'lively.morphic';
 import { pt, Color } from 'lively.graphics';
 import { connect, disconnectAll } from 'lively.bindings';
+import { DeserializationAwareMorph } from './deserialization-morph.js';
+import { Morph } from 'lively.morphic';
 
 const CONSTANTS = {
   DEFAULT_RESIZER_WIDTH: 4
@@ -12,7 +13,7 @@ These can be individually enabled programmatically and are layouted correctly wh
 E.g. the north resizer will position itself always at the top of the panels on resizements.
 It can be used e.g. as a container when creating applications with resizable sub-windows.
 */
-export class ResizeablePanel extends Morph {
+export class ResizeablePanel extends DeserializationAwareMorph {
   static get properties () {
     return {
       ui: {
@@ -41,7 +42,7 @@ export class ResizeablePanel extends Morph {
               }
             : resizersOrBoolean;
           this.setProperty('resizers', resizers);
-          this.updateResizers();
+          if (!this._deserializing) this.updateResizers();
         }
       },
       extent: {
@@ -206,7 +207,7 @@ export class ResizeablePanel extends Morph {
   }
 
   relayout () {
-    Object.keys(this.ui.resizers).forEach(side => {
+    Object.keys(this.ui.resizers).filter(key => key != '_rev').forEach(side => {
       const resizer = this.ui.resizers[side];
       switch (side) {
         case 'north':