feat: allow component to have a lock ratio

packages/core/src/commands/view/Resize.ts

@@ -253,8 +253,8 @@ export default class CommandResize extends CommandAbstract<
 
         const { store, selectedHandler, config, resizer, event } = updateOptions;
         const { keyHeight, keyWidth, autoHeight, autoWidth, unitWidth, unitHeight } = config;
-        const onlyHeight = ['tc', 'bc'].indexOf(selectedHandler!) >= 0;
-        const onlyWidth = ['cl', 'cr'].indexOf(selectedHandler!) >= 0;
+        const onlyHeight = !options.ratioLock && ['tc', 'bc'].indexOf(selectedHandler!) >= 0;
+        const onlyWidth = !options.ratioLock && ['cl', 'cr'].indexOf(selectedHandler!) >= 0;
         const partial = !store;
         const style: StyleProps = {};
 

packages/core/src/utils/Resizer.ts

@@ -61,6 +61,12 @@ export interface ResizerOptions {
    */
   ratioDefault?: boolean;
 
+  /**
+   * Indicate if the resizer should allow the ratio to change.
+   * @default false
+   */
+  ratioLock?: boolean;
+
   /**
    * On resize start callback.
    */
@@ -299,6 +305,7 @@ export default class Resizer {
   constructor(opts: ResizerOptions = {}) {
     this.defOpts = {
       ratioDefault: false,
+      ratioLock: false,
       onUpdateContainer: () => {},
       step: 1,
       minDim: 10,
@@ -751,7 +758,7 @@ export default class Resizer {
     }
 
     // Enforce aspect ratio (unless shift key is being held)
-    var ratioActive = opts.ratioDefault ? !data.keys!.shift : data.keys!.shift;
+    var ratioActive = opts.ratioLock || opts.ratioDefault ? !data.keys!.shift : data.keys!.shift;
     if (attr.indexOf('c') < 0 && ratioActive) {
       var ratio = startDim.w / startDim.h;
       if (box.w / box.h > ratio) {
@@ -759,6 +766,14 @@ export default class Resizer {
       } else {
         box.w = Math.round(box.h * ratio);
       }
+    } else if (opts.ratioLock) {
+      // Enforce aspect ratio for center resizer
+      var ratio = startDim.w / startDim.h;
+      if (['cl', 'cr'].indexOf(attr) >= 0) {
+        box.h = Math.round(box.w / ratio);
+      } else {
+        box.w = Math.round(box.h * ratio);
+      }
     }
 
     if (~attr.indexOf('l')) {