Decouple sequence extents from preview

editor.js

@@ -304,16 +304,7 @@ export class InteractivesEditor extends QinoqMorph {
   }
 
   onInteractiveZoomed () {
-    const previewExtent = this.ui.preview.extent;
-
-    // only show scrollbars if they are necessary
-    if (this.interactive.extent.x >= previewExtent.x) {
-      this.ui.preview.clipMode = 'scroll';
-    }
-    if (this.interactive.extent.y >= previewExtent.y) {
-      this.ui.preview.clipMode = 'scroll';
-    }
-    if (!(this.interactive.extent.x > previewExtent.x) && !(this.interactive.extent.y > previewExtent.y)) this.ui.preview.clipMode = 'hidden';
+    this.ui.preview.updateScrollbarVisibility();
   }
 
   // call this to propagate changes to the scrollPosition to the actual interactive
@@ -1040,7 +1031,12 @@ class Preview extends QinoqMorph {
         defaultValue: 'preview'
       },
       extent: {
-        defaultValue: pt(CONSTANTS.PREVIEW_WIDTH, CONSTANTS.SUBWINDOW_HEIGHT)
+        defaultValue: pt(CONSTANTS.PREVIEW_WIDTH, CONSTANTS.SUBWINDOW_HEIGHT),
+        after: ['_editor', 'ui'],
+        set (extent) {
+          this.setProperty('extent', extent);
+          if (!this._deserializing) this.updateScrollbarVisibility();
+        }
       },
       borderColor: {
         defaultValue: COLOR_SCHEME.ON_BACKGROUND_DARKER_VARIANT
@@ -1157,6 +1153,20 @@ class Preview extends QinoqMorph {
   removeAnimationPreview () {
     this.animationPreview = null;
   }
+
+  updateScrollbarVisibility () {
+    if (!this.interactive) return;
+
+    // only show scrollbars if they are necessary
+    if (this.interactive.width >= this.width ||
+        this.interactive.height >= this.height) {
+      this.clipMode = 'scroll';
+    }
+    if (!(this.interactive.width > this.width) &&
+        !(this.interactive.height > this.height)) {
+      this.clipMode = 'hidden';
+    }
+  }
 }
 
 class PositionAnimationPreview extends Canvas {

interactive.js

@@ -68,6 +68,7 @@ export class Interactive extends DeserializationAwareMorph {
           }
           this.setProperty('extent', extent);
           if (!this._deserializing) {
+            this.updateSequenceExtents();
             this.scaleText(previousHeight);
           }
         }
@@ -99,6 +100,10 @@ export class Interactive extends DeserializationAwareMorph {
     };
   }
 
+  updateSequenceExtents () {
+    this.sequences.forEach(sequence => sequence.extent = this.extent);
+  }
+
   applyAspectRatio (extent, calculateAspectRatio = false) {
     let aspectRatio;
     aspectRatio = calculateAspectRatio ? this.width / this.height : this.fixedAspectRatio;
@@ -277,12 +282,10 @@ export class Interactive extends DeserializationAwareMorph {
     sequence.interactive = this;
     this.updateInteractiveLength();
     signal(this, 'onSequenceAddition', sequence);
-    connect(this, 'extent', sequence, 'extent');
   }
 
   removeSequence (sequence) {
     disconnectAll(sequence);
-    disconnect(this, 'extent', sequence, 'extent');
     arr.remove(this.sequences, sequence);
     sequence.remove();
     signal(this, 'onSequenceRemoval', sequence);