Work for #316: fix image overlaps when image is not loaded (#321)

surveyjs · Jul 3, 2024 · e931a27 · e931a27
1 parent f88384a
commit e931a27
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/src/flat_layout/flat_file.ts b/src/flat_layout/flat_file.ts
@@ -50,13 +50,11 @@ export class FlatFile extends FlatQuestion {
         const rowsFlats: CompositeBrick[] = [new CompositeBrick()];
         const currPoint: IPoint = SurveyHelper.clone(point);
         let yBot: number = currPoint.yTop;
-        const fullAvailableWidth = this.controller.paperWidth -
-        this.controller.margins.right - currPoint.xLeft;
         for (let i: number = 0; i < this.question.previewValue.length; i++) {
             let item: { name: string, type: string, content: string, imageSize?: ISize } = { ...this.question.previewValue[i] };
             const canPreviewImage = SurveyHelper.canPreviewImage(this.question, item, item.content);
             if (canPreviewImage) {
-                item.imageSize = await SurveyHelper.getCorrectedImageSize(this.controller, { imageWidth: this.question.imageWidth, imageHeight: this.question.imageHeight, imageLink: this.question.previewValue[i].content });
+                item.imageSize = await SurveyHelper.getCorrectedImageSize(this.controller, { imageWidth: this.question.imageWidth, imageHeight: this.question.imageHeight, imageLink: this.question.previewValue[i].content, defaultImageWidth: 200, defaultImageHeight: 150 });
             }
             const availableWidth: number = this.controller.paperWidth -
                 this.controller.margins.right - currPoint.xLeft;

diff --git a/src/helper_survey.ts b/src/helper_survey.ts
@@ -731,12 +731,17 @@ export class SurveyHelper {
     public static isHeightEmpty(val: any): boolean {
         return this.isSizeEmpty(val) || val == '100%';
     }
-    public static async getCorrectedImageSize(controller: DocController, imageOptions: { imageWidth: any, imageHeight: any, imageLink: string }): Promise<ISize> {
-        let { imageWidth, imageLink, imageHeight } = imageOptions;
+    public static async getCorrectedImageSize(controller: DocController, imageOptions: { imageWidth?: any, imageHeight?: any, imageLink: string, defaultImageWidth?: any, defaultImageHeight?: any }): Promise<ISize> {
+        let { imageWidth, imageLink, imageHeight, defaultImageWidth, defaultImageHeight } = imageOptions;
         imageWidth = typeof imageWidth === 'number' ? imageWidth.toString() : imageWidth;
         imageHeight = typeof imageHeight === 'number' ? imageHeight.toString() : imageHeight;
         let widthPt: number = imageWidth && SurveyHelper.parseWidth(imageWidth, SurveyHelper.getPageAvailableWidth(controller), 1, 'px');
         let heightPt: number = imageHeight && SurveyHelper.parseWidth(imageHeight, SurveyHelper.getPageAvailableWidth(controller), 1, 'px');
+        defaultImageWidth = typeof defaultImageWidth === 'number' ? defaultImageWidth.toString() : defaultImageWidth;
+        defaultImageHeight = typeof defaultImageHeight === 'number' ? defaultImageHeight.toString() : defaultImageHeight;
+        let defaultWidthPt: number = defaultImageWidth && SurveyHelper.parseWidth(defaultImageWidth, SurveyHelper.getPageAvailableWidth(controller), 1, 'px');
+        let defaultHeightPt: number = defaultImageHeight && SurveyHelper.parseWidth(defaultImageHeight, SurveyHelper.getPageAvailableWidth(controller), 1, 'px');
+
         if(SurveyHelper.isSizeEmpty(imageWidth) || SurveyHelper.isHeightEmpty(imageHeight)) {
             const imageSize = await SurveyHelper.getImageSize(imageLink);
             if(!SurveyHelper.isSizeEmpty(imageWidth)) {
@@ -754,6 +759,6 @@ export class SurveyHelper {
                 widthPt = SurveyHelper.parseWidth(imageSize.width.toString(), SurveyHelper.getPageAvailableWidth(controller), 1, 'px');
             }
         }
-        return { width: widthPt || 0, height: heightPt || 0 };
+        return { width: widthPt || defaultWidthPt || 0, height: heightPt || defaultHeightPt || 0 };
     }
 }
diff --git a/tests/flat_file.test.ts b/tests/flat_file.test.ts
@@ -286,9 +286,9 @@ test('Check one image 16x16px file server-side', async () => {
 
     const assumeFile: IRect = {
         xLeft: controller.leftTopPoint.xLeft,
-        xRight: controller.leftTopPoint.xLeft + controller.measureText(json.elements[0].defaultValue[0].name).width,
+        xRight: controller.leftTopPoint.xLeft + 150,
         yTop: controller.leftTopPoint.yTop,
-        yBot: controller.leftTopPoint.yTop + controller.unitHeight * (1.0 + FlatFile.IMAGE_GAP_SCALE)
+        yBot: controller.leftTopPoint.yTop + 112.5 + controller.unitHeight * (1.0 + FlatFile.IMAGE_GAP_SCALE)
     };
     TestHelper.equalRect(expect, flats[0][0], assumeFile);
     SurveyHelper.inBrowser = true;
@@ -391,9 +391,9 @@ test('Test file question doesnt throw exception if could not load image preview'
 
     const assumeFile: IRect = {
         xLeft: controller.leftTopPoint.xLeft,
-        xRight: controller.leftTopPoint.xLeft + controller.measureText(json.elements[0].defaultValue[0].name).width,
+        xRight: controller.leftTopPoint.xLeft + 150,
         yTop: controller.leftTopPoint.yTop,
-        yBot: controller.leftTopPoint.yTop + controller.unitHeight * (1.0 + FlatFile.IMAGE_GAP_SCALE)
+        yBot: controller.leftTopPoint.yTop + 112.5 + controller.unitHeight * (1.0 + FlatFile.IMAGE_GAP_SCALE)
     };
     TestHelper.equalRect(expect, flats[0][0], assumeFile);
 });

diff --git a/tests/survey_helper.test.ts b/tests/survey_helper.test.ts
@@ -411,4 +411,25 @@ test('Check chooseHtmlFont method', async () => {
         { fontName: 'custom_font2', useCustomFontInHtml: true }
     );
     expect(SurveyHelper.chooseHtmlFont(controller)).toBe('custom_font2');
+});
+
+test('check getCorrectedImageSize works incorrectly if image could not be loaded', async () => {
+    const controller = new DocController(
+        { fontName: 'custom_font' }
+    );
+    const oldInBrowser = SurveyHelper.inBrowser;
+    SurveyHelper.inBrowser = false;
+    let imageSize = await SurveyHelper.getCorrectedImageSize(controller, { imageLink: '' });
+    expect(imageSize.width).toBe(0);
+    expect(imageSize.height).toBe(0);
+    imageSize = await SurveyHelper.getCorrectedImageSize(controller, { imageLink: '', imageWidth: 100, imageHeight: 200 });
+    expect(imageSize.width).toBe(75);
+    expect(imageSize.height).toBe(150);
+    imageSize = await SurveyHelper.getCorrectedImageSize(controller, { imageLink: '', imageWidth: 100, imageHeight: 200, defaultImageWidth: 300, defaultImageHeight: 400 });
+    expect(imageSize.width).toBe(75);
+    expect(imageSize.height).toBe(150);
+    imageSize = await SurveyHelper.getCorrectedImageSize(controller, { imageLink: '', defaultImageWidth: 300, defaultImageHeight: 400 });
+    expect(imageSize.width).toBe(225);
+    expect(imageSize.height).toBe(300);
+    SurveyHelper.inBrowser = oldInBrowser;
 });