Add keep-height and keep-width to Stage Size Options

scaffolding-api-docs/README.md

@@ -111,7 +111,7 @@ Certain Scaffolding options must be configured before you can finish setting up
 ```js
 scaffolding.width = 480; // Custom stage width
 scaffolding.height = 360; // Custom stage height
-scaffolding.resizeMode = 'preserve-ratio'; // or 'dynamic-resize' or 'stretch'
+scaffolding.resizeMode = 'preserve-ratio'; // or 'dynamic-resize' or 'stretch' or 'keep-height' or 'keep-width'
 scaffolding.editableLists = false; // Affects list monitors
 ```
 

src/locales/en.json

@@ -214,6 +214,12 @@
     "dynamicResize": {
       "string": "Dynamically resize size to match window size (experimental)"
     },
+    "keepHeight": {
+      "string": "Preserve height when resized (experimental)"
+    },
+    "keepWidth": {
+      "string": "Preserve width when resized (experimental)"
+    },
     "username": {
       "string": "Username (each \"#\" gets replaced with a random number)"
     },

src/p4/PackagerOptions.svelte

@@ -440,6 +440,16 @@
         {$_('options.dynamicResize')}
         <LearnMore slug="packager/dynamic-stage-resize" />
       </label>
+      <label class="option">
+        <input type="radio" name="resize-mode" value="keep-height" bind:group={$options.resizeMode}>
+        {$_('options.keepHeight')}
+        <LearnMore slug="packager/dynamic-stage-resize" />
+      </label>
+      <label class="option">
+        <input type="radio" name="resize-mode" value="keep-width" bind:group={$options.resizeMode}>
+        {$_('options.keepWidth')}
+        <LearnMore slug="packager/dynamic-stage-resize" />
+      </label>
     </div>
   </div>
 </Section>

src/scaffolding/scaffolding.js

@@ -283,7 +283,35 @@ class Scaffolding extends EventTarget {
 
     let width = projectAreaWidth;
     let height = projectAreaHeight;
-    if (this.resizeMode !== 'stretch') {
+    if (this.resizeMode === 'keep-height') {
+      // setStageSize is a TurboWarp-specific method
+      if (this.vm.setStageSize) {
+        if(width / height * this.height > 8640) {// clamp this.width to a size that doesn't break the project
+          this.width = 8640;
+        } else{
+          this.width = width / height * this.height;
+        }
+        this.vm.setStageSize(this.width, this.height);
+      } else {
+        console.warn('keep-height not supported: vm does not implement setStageSize');
+      }
+    }
+
+    if (this.resizeMode === 'keep-width') {
+      // setStageSize is a TurboWarp-specific method
+      if (this.vm.setStageSize) {
+        if(height / width * this.width > 8640) {// clamp this.height to a size that doesn't break the project
+          this.height = 8640
+        } else{
+          this.height = height / width * this.width;
+        }
+        this.vm.setStageSize(this.width, this.height);
+      } else {
+        console.warn('keep-width not supported: vm does not implement setStageSize');
+      }
+    }
+
+    if (this.resizeMode !== 'stretch' && this.resizeMode !== 'keep_width' && this.resizeMode !== 'keep_height') {
       width = height / this.height * this.width;
       if (width > projectAreaWidth) {
         height = projectAreaWidth / this.width * this.height;