Fix saving issues with resizeable panels

Co-authored-by: frcroth <[email protected]>
Co-authored-by: Paula-Kli <[email protected]>

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);
 

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);
         }
       },

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':