feat: Renamed misleading method setCropzoneRect to setCropzoneRatio and created a setCropzoneRect method

apps/image-editor/index.d.ts

@@ -316,7 +316,8 @@ declare namespace tuiImageEditor {
  public rotate(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
  public setAngle(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
  public setBrush(option: IBrushOptions): void;
- public setCropzoneRect(mode?: number): void;
+ public setCropzoneRect(rect: IRectConfig): void;
+ public setCropzoneRatio(mode?: number): void;
  public setDrawingShape(type: string, options?: IShapeOptions): void;
  public setObjectPosition(id: number, posInfo?: IPositionConfig): Promise<void>;
  public setObjectProperties(id: number, keyValue?: IGraphicObjectProps): Promise<void>;

apps/image-editor/src/js/action.js

@@ -378,25 +378,25 @@ export default {
  preset: (presetType) => {
  switch (presetType) {
  case 'preset-square':
- this.setCropzoneRect(1 / 1);
+ this.setCropzoneRatio(1 / 1);
  break;
  case 'preset-3-2':
- this.setCropzoneRect(3 / 2);
+ this.setCropzoneRatio(3 / 2);
  break;
  case 'preset-4-3':
- this.setCropzoneRect(4 / 3);
+ this.setCropzoneRatio(4 / 3);
  break;
  case 'preset-5-4':
- this.setCropzoneRect(5 / 4);
+ this.setCropzoneRatio(5 / 4);
  break;
  case 'preset-7-5':
- this.setCropzoneRect(7 / 5);
+ this.setCropzoneRatio(7 / 5);
  break;
  case 'preset-16-9':
- this.setCropzoneRect(16 / 9);
+ this.setCropzoneRatio(16 / 9);
  break;
  default:
- this.setCropzoneRect();
+ this.setCropzoneRatio();
  this.ui.crop.changeApplyButtonStatus(false);
  break;
  }

apps/image-editor/src/js/component/cropper.js

@@ -298,10 +298,10 @@ class Cropper extends Component {
  }
 
  /**
- * Set a cropzone square
+ * Set a cropzone rectangle ratio
  * @param {number} [presetRatio] - preset ratio
  */
- setCropzoneRect(presetRatio) {
+ setCropzoneRatio(presetRatio) {
  const canvas = this.getCanvas();
  const cropzone = this._cropzone;
 
@@ -319,6 +319,14 @@ class Cropper extends Component {
  }
  }
 
+ /**
+ * Set cropzone rectangle
+ * @param {Object} [rect] {{left: number, top: number, width: number, height: number}} rect
+ */
+ setCropzoneRect(rect) {
+ this._cropzone.set(rect);
+ }
+
  /**
  * get a cropzone square info
  * @param {number} presetRatio - preset ratio

apps/image-editor/src/js/graphics.js

@@ -709,11 +709,19 @@ class Graphics {
  }
 
  /**
- * Get cropped rect
- * @param {number} [mode] cropzone rect mode
+ * Set cropped ratio
+ * @param {number} [mode] cropzone rect ratio
+ */
+ setCropzoneRatio(mode) {
+ this.getComponent(components.CROPPER).setCropzoneRatio(mode);
+ }
+
+ /**
+ * Set the cropping rect
+ * @param {Object} [rect] {{left: number, top: number, width: number, height: number}} rect
  */
- setCropzoneRect(mode) {
- this.getComponent(components.CROPPER).setCropzoneRect(mode);
+ setCropzoneRect(rect) {
+ this.getComponent(components.CROPPER).setCropzoneRect(rect);
  }
 
  /**

apps/image-editor/src/js/imageEditor.js

@@ -839,11 +839,19 @@ class ImageEditor {
  }
 
  /**
- * Set the cropping rect
+ * Set the cropping ratio
  * @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777]
  */
- setCropzoneRect(mode) {
- this._graphics.setCropzoneRect(mode);
+ setCropzoneRatio(mode) {
+ this._graphics.setCropzoneRatio(mode);
+ }
+
+ /**
+ * Set the cropping rect
+ * @param {Object} [rect] {{left: number, top: number, width: number, height: number}} rect
+ */
+ setCropzoneRect(rect) {
+ this._graphics.setCropzoneRect(rect);
  }
 
  /**

apps/image-editor/tests/cropper.spec.js

@@ -222,7 +222,7 @@ describe('Cropper', () => {
  });
  });
 
- describe('presets - setCropzoneRect()', () => {
+ describe('presets - setCropzoneRatio()', () => {
  beforeEach(() => {
  cropper.start();
  });
@@ -233,47 +233,47 @@ describe('Cropper', () => {
 
  it('should return cropzone rect as a square', () => {
  jest.spyOn(cropper._cropzone, 'isValid').mockReturnValue(true);
- cropper.setCropzoneRect(1);
+ cropper.setCropzoneRatio(1);
  const { width, height } = cropper.getCropzoneRect();
 
  expect(width).toBe(height);
  });
 
  it('should return cropzone rect as a 3:2 aspect box', () => {
  jest.spyOn(cropper._cropzone, 'isValid').mockReturnValue(true);
- cropper.setCropzoneRect(3 / 2);
+ cropper.setCropzoneRatio(3 / 2);
  const { width, height } = cropper.getCropzoneRect();
 
  expect((width / height).toFixed(1)).toBe((3 / 2).toFixed(1));
  });
 
  it('should return cropzone rect as a 4:3 aspect box', () => {
  jest.spyOn(cropper._cropzone, 'isValid').mockReturnValue(true);
- cropper.setCropzoneRect(4 / 3);
+ cropper.setCropzoneRatio(4 / 3);
  const { width, height } = cropper.getCropzoneRect();
 
  expect((width / height).toFixed(1)).toBe((4 / 3).toFixed(1));
  });
 
  it('should return cropzone rect as a 5:4 aspect box', () => {
  jest.spyOn(cropper._cropzone, 'isValid').mockReturnValue(true);
- cropper.setCropzoneRect(5 / 4);
+ cropper.setCropzoneRatio(5 / 4);
  const { width, height } = cropper.getCropzoneRect();
 
  expect((width / height).toFixed(1)).toBe((5 / 4).toFixed(1));
  });
 
  it('should return cropzone rect as a 7:5 aspect box', () => {
  jest.spyOn(cropper._cropzone, 'isValid').mockReturnValue(true);
- cropper.setCropzoneRect(7 / 5);
+ cropper.setCropzoneRatio(7 / 5);
  const { width, height } = cropper.getCropzoneRect();
 
  expect((width / height).toFixed(1)).toBe((7 / 5).toFixed(1));
  });
 
  it('should return cropzone rect as a 16:9 aspect box', () => {
  jest.spyOn(cropper._cropzone, 'isValid').mockReturnValue(true);
- cropper.setCropzoneRect(16 / 9);
+ cropper.setCropzoneRatio(16 / 9);
  const { width, height } = cropper.getCropzoneRect();
 
  expect((width / height).toFixed(1)).toBe((16 / 9).toFixed(1));
@@ -284,23 +284,36 @@ describe('Cropper', () => {
  jest.spyOn(canvas, 'getHeight').mockReturnValue(312);
  const setSpy = jest.spyOn(cropper._cropzone, 'set');
 
- cropper.setCropzoneRect(16 / 9);
+ cropper.setCropzoneRatio(16 / 9);
 
  expect(setSpy).toHaveBeenCalledWith(expect.objectContaining({ width: 408 }));
  });
 
  it('should remove cropzone of cropper when falsy is passed', () => {
- cropper.setCropzoneRect();
+ cropper.setCropzoneRatio();
  expect(cropper.getCropzoneRect()).toBeNull();
 
- cropper.setCropzoneRect(0);
+ cropper.setCropzoneRatio(0);
  expect(cropper.getCropzoneRect()).toBeNull();
 
- cropper.setCropzoneRect(null);
+ cropper.setCropzoneRatio(null);
  expect(cropper.getCropzoneRect()).toBeNull();
  });
  });
 
+ describe('setCropzoneRect()', () => {
+ it('should set cropzone rectangle', () => {
+ const [left, top, width, height] = [5, 5, 50, 50];
+ cropper.setCropzoneRect({left, top, width, height});
+
+ const rect = cropper.getCropzoneRect();
+ expect(rect.left).toBe(left);
+ expect(rect.top).toBe(top);
+ expect(rect.width).toBe(width);
+ expect(rect.height).toBe(height);
+ });
+ });
+
  describe('end()', () => {
  it('should set cropzone of cropper to null', () => {
  cropper.start();

apps/image-editor/tests/types/type-tests.ts

@@ -258,7 +258,7 @@ imageEditor.setBrush({
  width: 20,
  color: '#FFFFFF',
 });
-imageEditor.setCropzoneRect(1 / 1);
+imageEditor.setCropzoneRatio(1 / 1);
 imageEditor.setDrawingShape('rect', {
  fill: 'red',
  width: 100,