Resolved surveyjs/service#1834 - There is no documentation for survey…

….fitToContainer property - updated default (#7718)

* Resolved surveyjs/service#1834 - There is no documentation for survey.fitToContainer property - updated default

* Work for surveyjs/service#1834 - ipdated etalon

* work for surveyjs/service#1834 (ranking issue proposal)

* work for the surveyjs/service#1834

* Work for surveyjs/service#1834 - removed duplicated progress vr-tests

* Work for surveyjs/service#1834 - fixed u-test

* Updated etalons

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
Co-authored-by: dmitrykurmanov <kurmanov.work@gmail.com>

src/dragdrop/core.ts

@@ -32,15 +32,15 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
     return `[data-sv-drop-target-${this.draggedElementType}]`;
   }
   protected get survey(): SurveyModel {
-    return this.surveyValue || this.creator.survey;
+    return this.surveyValue || this.creator?.survey;
   }
 
   public prevDropTarget: any = null;
   protected allowDropHere = false;
 
   protected domAdapter: IDragDropDOMAdapter;
   constructor(private surveyValue?: ISurvey, private creator?: any, longTap?: boolean, domAdapter?: IDragDropDOMAdapter) {
-    this.domAdapter = domAdapter || new DragDropDOMAdapter(this, longTap);
+    this.domAdapter = domAdapter || new DragDropDOMAdapter(this, longTap, this.survey?.fitToContainer);
   }
 
   public startDrag(event: PointerEvent, draggedElement: any, parentElement?: any, draggedElementNode?: HTMLElement, preventSaveTargetNode: boolean = false): void {

src/dragdrop/dom-adapter.ts

@@ -40,7 +40,7 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
   private savedTargetNodeIndex: any;
   private scrollIntervalId: number = null;
 
-  constructor(private dd: IDragDropEngine, private longTap: boolean = true) {}
+  constructor(private dd: IDragDropEngine, private longTap: boolean = true, private fitToContainer:boolean = false) {}
 
   private get rootElement() {
     if(isShadowDOM(settings.environment.root)) {
@@ -124,8 +124,13 @@ export class DragDropDOMAdapter implements IDragDropDOMAdapter {
     event.stopPropagation();
   }
   private moveShortcutElement(event: PointerEvent) {
-    const rootElementX= this.rootElement.getBoundingClientRect().x;
-    const rootElementY = this.rootElement.getBoundingClientRect().y;
+    let rootElementX= this.rootElement.getBoundingClientRect().x;
+    let rootElementY = this.rootElement.getBoundingClientRect().y;
+
+    if (!!this.fitToContainer) {
+      rootElementX = 0;
+      rootElementY = 0;
+    }
 
     this.doScroll(event.clientY, event.clientX);
 

src/survey.ts

@@ -7950,7 +7950,7 @@ Serializer.addClass("survey", [
     choices: ["auto", "static", "responsive"],
   },
   { name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } },
-  { name: "fitToContainer:boolean", default: false },
+  { name: "fitToContainer:boolean", default: true },
   { name: "headerView", default: "basic", choices: ["basic", "advanced"], visible: false },
   { name: "backgroundImage:file", visible: false },
   { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },

tests/markup/snapshots/survey-theme-backgroundImage.snap.html

@@ -1,2 +1,2 @@
-<div style="background-attachment:fixed; background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABQCAYAAAC6aDOxAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATkSURBVHgB5ZxNUhNBFIBf9xBBccFWQulwAvEAUuEEFidQTyCsXIonUE+gN9AbEEOVW3DnjlhGXRo3EBKm2+7AxEmnf2aGzLxX8G0IMxNIPV5/3fNeDwCE+XX78Q4gw4EovUZrQwA8AWRIBuj3UivmDfGRAfQBGZIBklzsS4AYGDsCZMgFqLe8+XYcHIVk0AVkFoAQP+9s7oGEF+n3USK7gAyZDNJSVl9eZY9JSLqADAMCaClPvJOhedJB/3wkMsgWHAW6oDXoAcpKOYuUEn2K16BK2pTyFBx/itegZZBNylm4wJ/iNSgZdCnlj9JzjWT4U7wGJYMcUp6+ZhR9BwLUHiCXlE1GyzdwiHmlPE1/vd8mMYvVlkEhKWdRUzyJGUxTSwblkXIWCmWOlFoCJFRwIId3JhAoc6RUPsS0lNWXjSLvoVDmSKk0QLqmzPxStg4lCmWOlMoCpKUsGXvjvEDAnusUhTJHSiUBSmvK7ivkh+ESf6derNjOrg6+kFgkaioJkLiYsWLrSQnd4a1otzFySpuMoDVzD5BXyjo4km/pRaDg9gBRKXOkzDVAISknjO+uD9pd/XrhXDywXkSkzJEytwDlkfL9k/anzG+ObZepAJPKoLksFMMrZfmhOTh4PX2MbegxZ7n2+mVQHinPHpbWGUwVyq6Xg/JK2XLO+p7BUvQVCHGltoqWss87CfDtKe9cooekyrpjII6U8LZ0BhWWcobzhQI3rngcrZ12dktJupyU/6Nmqhgoc6GGbf2yVAaVkXIWJh1rICLIc76drtcKByhQvug7pTwFK1T+qBOWwM7aqD1ZahQKUHClDPx5Gnnvh2D2m1RstJRXzzrvssdyz2JayqwhDp0XKCk3B53XQJTjldbK4lAcejoqR82TziPzYC5Jh6TMpPy06pEyBRojsef15qWUTXINsZCUzxaj50AY3W7yqSErZZNggOYjZTx+3G21wNNuMqVs4g3QvKSMhVZDJMR713mblE2ckr72UlZqaJ521kM/xyrpGyLlLciBdYjdZCmbzAwxLWWWb4NBrahadXvt9CD4V9dS5kLsOy8oqIapDMrR6EMjT78+j5SLenMSoGD5Apsc/XrvxiylBl2+gIKMJV109wUGoWL+eGOWvLqUTcYBKrz7AgHm2TMU2pg1lvKo3HqNl9l9gUGSRH9tx4Mbs5SUfSvlECQeRUjRi7tbQ/HHds72WILrEYYULeUy3slC6nGohXNnJlszoAopm5AKkHQU0mz9eu9u2StI2YTU82K6Xy9tg97YcVallE1oPXHo6tcD66avq5ayCakMCvXrQ+u1sZTnXGGg5aBAv74OKZvQyiBPv74XVbNSDhEBEcbDh8kdy6l+lKi7RICXrvcqKW89GLa/QQWQGWKBfn1tUjYhEyBPv97ZZCxTvigKoQAV7Ncr74wWeeVlX0KzWIF+vW9j1pyhk0EF+vVcymd1tZvIBEjdb+XLICXle4ODz1ATlBaKwQyqQ8omJALUW26Fs6cmKZvQ+NcUIf/UKGUTEgGKEvHQd75OKc/8bqAA96yia5ayCY0hJllsP16/lE1oZBCT8cwxJCmb0AiQeR+GKGUT9ADpVg8YayBMKZugB2im1YMsZRP0AGXXQBSkbIIeoMkaiIiUTQhImsWUpGyCHiBV5ogpSZkcvaXNp0CYf3BxyTNPele9AAAAAElFTkSuQmCC&quot;); background-size:cover; opacity:0.4;">
+<div style="background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABQCAYAAAC6aDOxAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATkSURBVHgB5ZxNUhNBFIBf9xBBccFWQulwAvEAUuEEFidQTyCsXIonUE+gN9AbEEOVW3DnjlhGXRo3EBKm2+7AxEmnf2aGzLxX8G0IMxNIPV5/3fNeDwCE+XX78Q4gw4EovUZrQwA8AWRIBuj3UivmDfGRAfQBGZIBklzsS4AYGDsCZMgFqLe8+XYcHIVk0AVkFoAQP+9s7oGEF+n3USK7gAyZDNJSVl9eZY9JSLqADAMCaClPvJOhedJB/3wkMsgWHAW6oDXoAcpKOYuUEn2K16BK2pTyFBx/itegZZBNylm4wJ/iNSgZdCnlj9JzjWT4U7wGJYMcUp6+ZhR9BwLUHiCXlE1GyzdwiHmlPE1/vd8mMYvVlkEhKWdRUzyJGUxTSwblkXIWCmWOlFoCJFRwIId3JhAoc6RUPsS0lNWXjSLvoVDmSKk0QLqmzPxStg4lCmWOlMoCpKUsGXvjvEDAnusUhTJHSiUBSmvK7ivkh+ESf6derNjOrg6+kFgkaioJkLiYsWLrSQnd4a1otzFySpuMoDVzD5BXyjo4km/pRaDg9gBRKXOkzDVAISknjO+uD9pd/XrhXDywXkSkzJEytwDlkfL9k/anzG+ObZepAJPKoLksFMMrZfmhOTh4PX2MbegxZ7n2+mVQHinPHpbWGUwVyq6Xg/JK2XLO+p7BUvQVCHGltoqWss87CfDtKe9cooekyrpjII6U8LZ0BhWWcobzhQI3rngcrZ12dktJupyU/6Nmqhgoc6GGbf2yVAaVkXIWJh1rICLIc76drtcKByhQvug7pTwFK1T+qBOWwM7aqD1ZahQKUHClDPx5Gnnvh2D2m1RstJRXzzrvssdyz2JayqwhDp0XKCk3B53XQJTjldbK4lAcejoqR82TziPzYC5Jh6TMpPy06pEyBRojsef15qWUTXINsZCUzxaj50AY3W7yqSErZZNggOYjZTx+3G21wNNuMqVs4g3QvKSMhVZDJMR713mblE2ckr72UlZqaJ521kM/xyrpGyLlLciBdYjdZCmbzAwxLWWWb4NBrahadXvt9CD4V9dS5kLsOy8oqIapDMrR6EMjT78+j5SLenMSoGD5Apsc/XrvxiylBl2+gIKMJV109wUGoWL+eGOWvLqUTcYBKrz7AgHm2TMU2pg1lvKo3HqNl9l9gUGSRH9tx4Mbs5SUfSvlECQeRUjRi7tbQ/HHds72WILrEYYULeUy3slC6nGohXNnJlszoAopm5AKkHQU0mz9eu9u2StI2YTU82K6Xy9tg97YcVallE1oPXHo6tcD66avq5ayCakMCvXrQ+u1sZTnXGGg5aBAv74OKZvQyiBPv74XVbNSDhEBEcbDh8kdy6l+lKi7RICXrvcqKW89GLa/QQWQGWKBfn1tUjYhEyBPv97ZZCxTvigKoQAV7Ncr74wWeeVlX0KzWIF+vW9j1pyhk0EF+vVcymd1tZvIBEjdb+XLICXle4ODz1ATlBaKwQyqQ8omJALUW26Fs6cmKZvQ+NcUIf/UKGUTEgGKEvHQd75OKc/8bqAA96yia5ayCY0hJllsP16/lE1oZBCT8cwxJCmb0AiQeR+GKGUT9ADpVg8YayBMKZugB2im1YMsZRP0AGXXQBSkbIIeoMkaiIiUTQhImsWUpGyCHiBV5ogpSZkcvaXNp0CYf3BxyTNPele9AAAAAElFTkSuQmCC&quot;); background-size:cover; opacity:0.4;">
 </div>

tests/surveytests.ts

@@ -16012,12 +16012,23 @@ QUnit.test("Check survey getRootCss function - defaultV2Css", function (assert)
     ]
   });
   survey.css = defaultV2Css;
+  assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--full-container");
+
+  survey.fitToContainer = false;
   assert.equal(survey.getRootCss(), "sd-root-modern");
 
   survey.setIsMobile(true);
+  survey.fitToContainer = true;
+  assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--mobile sd-root-modern--full-container");
+
+  survey.fitToContainer = false;
   assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--mobile");
 
   survey.mode = "display";
+  survey.fitToContainer = true;
+  assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--mobile sd-root--readonly sd-root-modern--full-container");
+
+  survey.fitToContainer = false;
   assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--mobile sd-root--readonly");
 
   survey.mode = "edit";
@@ -19290,7 +19301,7 @@ QUnit.test("Display mode in design time", function (assert) {
   assert.equal(survey.css.rootReadOnly, "sd-root--readonly");
   assert.equal(survey.mode, "edit");
   assert.equal(survey.isDisplayMode, false);
-  assert.equal(survey.getRootCss(), "sd-root-modern");
+  assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--full-container");
 
   survey.mode = "display";
   assert.equal(survey.mode, "display");
@@ -19300,5 +19311,5 @@ QUnit.test("Display mode in design time", function (assert) {
   survey.setDesignMode(true);
   assert.equal(survey.mode, "display");
   assert.equal(survey.isDisplayMode, false);
-  assert.equal(survey.getRootCss(), "sd-root-modern");
+  assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--full-container");
 });

visualRegressionTests/tests/defaultV2/survey.ts

@@ -18,65 +18,6 @@ const insertDiv = ClientFunction(() => {
 
 const theme = "defaultV2";
 
-const json = {
-  focusFirstQuestionAutomatic: true,
-  "title": "Minimum data reporting form – for suspected and probable cases of COVID-19",
-  "pages": [{
-    "name": "page1",
-    "navigationTitle": "Sign In",
-    "navigationDescription": "... to continue purchasing.",
-    "elements": [
-      {
-        "name": "q1",
-        type: "text"
-      }
-    ]
-  }, {
-    "name": "page2",
-    "navigationTitle": "Shipping",
-    "title": "Shipping",
-    "navigationDescription": "Enter shipping information.",
-    "elements": [
-      {
-        "type": "radiogroup",
-        "name": "q1",
-        "title": "Select a shipping method.",
-        "choices": ["FedEx", "DHL", "USP", "In-Store Pickup"]
-      },
-    ]
-  }, {
-    "name": "page3",
-    "navigationTitle": "Payment",
-    "navigationDescription": "Select a payment method.",
-    "elements": [
-      {
-        "name": "q1",
-        type: "text"
-      }
-    ]
-  }, {
-    "name": "page4",
-    "navigationTitle": "Gift Options",
-    "navigationDescription": "Choose your gift.",
-    "elements": [
-      {
-        "name": "q1",
-        type: "text"
-      }
-    ]
-  }, {
-    "name": "page5",
-    "navigationTitle": "Place Order",
-    "navigationDescription": "Finish your purchasing.",
-    "elements": [{
-      "name": "q1",
-      type: "text"
-    }]
-  }],
-  "showProgressBar": "top",
-  "progressBarType": "buttons"
-};
-
 frameworks.forEach(framework => {
   fixture`${framework} ${title} ${theme}`
     .page`${url_test}${theme}/${framework}`