work for #8396 - calculate title width

surveyjs · Jun 11, 2024 · 4b40c8c · 4b40c8c
1 parent 31c085a
commit 4b40c8c
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 14 deletions.
diff --git a/src/panel.ts b/src/panel.ts
@@ -1132,7 +1132,7 @@ export class PanelModelBase extends SurveyElement<Question>
       if (!userDefinedRow && curRowSpan > maxRowColSpan) maxRowColSpan = curRowSpan;
     });
 
-    const oneColumnWidth = Math.floor(10000 / maxRowColSpan) / 100;
+    const oneColumnWidth = 100 / maxRowColSpan;
     const columns = [];
     for (let index = 0; index < maxRowColSpan; index++) {
       columns.push({ width: oneColumnWidth });

diff --git a/src/question.ts b/src/question.ts
@@ -684,7 +684,17 @@ export class Question extends SurveyElement<Question>
   }
   public get titleWidth(): string {
     if (this.getTitleLocation() === "left") {
-      if (!!this.parent) return this.parent.getQuestionTitleWidth();
+      const percentWidth = this.getPercentQuestionTitleWidth();
+      if (!percentWidth && !!this.parent) return this.parent.getQuestionTitleWidth();
+      const columns = this.parent.getColumsForElement(this as any);
+      return (percentWidth / columns.length) + "%";
+    }
+    return undefined;
+  }
+  getPercentQuestionTitleWidth(): number {
+    const width = !!this.parent && this.parent.getQuestionTitleWidth();
+    if (!!width && width[width.length - 1] === "%") {
+      return parseInt(width);
     }
     return undefined;
   }

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -325,7 +325,7 @@ function preventDefaults(event: any) {
   event.stopPropagation();
 }
 function classesToSelector(str: string): string {
-  if(!str) return str;
+  if (!str) return str;
   const re = /\s*?([\w-]+)\s*?/g;
   return str.replace(re, ".$1");
 }
@@ -477,7 +477,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   const commonItemsInOldMap = new Map<any, number>();
   oldValue.forEach((item) => {
     const itemKey = getKey(item);
-    if(!oldItemsMap.has(itemKey)) {
+    if (!oldItemsMap.has(itemKey)) {
       oldItemsMap.set(getKey(item), item);
     } else {
       //if keys are set incorrectly do not process comparing
@@ -486,7 +486,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   });
   newValue.forEach((item) => {
     const itemKey = getKey(item);
-    if(!newItemsMap.has(itemKey)) {
+    if (!newItemsMap.has(itemKey)) {
       newItemsMap.set(itemKey, item);
     } else {
       //if keys are set incorrectly do not process comparing
@@ -498,7 +498,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
 
   //calculating addedItems and items that exist in both arrays
   newItemsMap.forEach((item, key) => {
-    if(!oldItemsMap.has(key)) {
+    if (!oldItemsMap.has(key)) {
       addedItems.push(item);
     } else {
       commonItemsInNewMap.set(key, commonItemsInNewMap.size);
@@ -508,7 +508,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   //calculating deletedItems and items that exist in both arrays
 
   oldItemsMap.forEach((item, key) => {
-    if(!newItemsMap.has(key)) {
+    if (!newItemsMap.has(key)) {
       deletedItems.push(item);
     } else {
       commonItemsInOldMap.set(key, commonItemsInOldMap.size);
@@ -520,7 +520,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   commonItemsInNewMap.forEach((index, key) => {
     const oldIndex = commonItemsInOldMap.get(key);
     const item = newItemsMap.get(key);
-    if(oldIndex !== index) reorderedItems.push({ item: item, movedForward: oldIndex < index });
+    if (oldIndex !== index) reorderedItems.push({ item: item, movedForward: oldIndex < index });
   });
 
   //calculating merged array if multiple operations are applied at once
@@ -529,7 +529,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   let commonItemsIndex = 0;
   const commonItemsKeysOrder = Array.from(commonItemsInNewMap.keys());
   oldValue.forEach((item, index) => {
-    if(commonItemsInNewMap.has(getKey(item))) {
+    if (commonItemsInNewMap.has(getKey(item))) {
       oldItemsWithCorrectOrder[index] = newItemsMap.get(commonItemsKeysOrder[commonItemsIndex]);
       commonItemsIndex++;
     } else {
@@ -541,8 +541,8 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   let tempValuesArray: Array<T> = [];
   oldItemsWithCorrectOrder.forEach((item) => {
     const itemKey = getKey(item);
-    if(newItemsMap.has(itemKey)) {
-      if(tempValuesArray.length > 0) {
+    if (newItemsMap.has(itemKey)) {
+      if (tempValuesArray.length > 0) {
         valuesToInsertBeforeKey.set(itemKey, tempValuesArray);
         tempValuesArray = [];
       }
@@ -553,7 +553,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
 
   const mergedItems = new Array<T>();
   newItemsMap.forEach((item, key) => {
-    if(valuesToInsertBeforeKey.has(key)) {
+    if (valuesToInsertBeforeKey.has(key)) {
       valuesToInsertBeforeKey.get(key).forEach((item) => {
         mergedItems.push(item);
       });
@@ -567,6 +567,10 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   return { reorderedItems, deletedItems, addedItems, mergedItems };
 }
 
+export function roundTo2Decimals(number: number): number {
+  return Math.round(number * 100) / 100;
+}
+
 export {
   mergeValues,
   getElementWidth,

diff --git a/tests/layout_tests.ts b/tests/layout_tests.ts
@@ -1,4 +1,5 @@
 import { SurveyModel } from "../src/survey";
+import { roundTo2Decimals } from "../src/utils/utils";
 
 export default QUnit.module("Layout");
 
@@ -32,7 +33,7 @@ QUnit.test("columns generate - simple", function (assert) {
 
   assert.equal(page.rows.length, 2, "There are two rows");
   assert.equal(page.columns.length, 3);
-  assert.equal(page.columns[0].width, 33.33);
+  assert.equal(roundTo2Decimals(page.columns[0].width), 33.33);
 
   assert.deepEqual(page.getColumsForElement(q1), [page.columns[0]]);
   assert.deepEqual(page.getColumsForElement(q2), [page.columns[1], page.columns[1]]);
@@ -71,10 +72,56 @@ QUnit.test("columns generate - complex", function (assert) {
 
   assert.equal(page.rows.length, 2, "There are two rows");
   assert.equal(page.columns.length, 3);
-  assert.equal(page.columns[0].width, 33.33);
+  assert.equal(roundTo2Decimals(page.columns[0].width), 33.33);
 
   assert.deepEqual(page.getColumsForElement(q1), [page.columns[0]]);
   assert.deepEqual(page.getColumsForElement(q2), [page.columns[1], page.columns[1]]);
   assert.deepEqual(page.getColumsForElement(q3), [page.columns[0], page.columns[1]]);
   assert.deepEqual(page.getColumsForElement(q4), [page.columns[1]]);
+});
+
+QUnit.test("columns generate - title width", function (assert) {
+  const surveyModel = new SurveyModel({
+    pages: [
+      {
+        name: "page1",
+        questionTitleWidth: "25%",
+        elements: [{
+          "name": "q1",
+          "type": "text",
+          colSpan: 1,
+        }, {
+          "name": "q2",
+          "type": "text",
+          colSpan: 2,
+          "startWithNewLine": false
+        },
+        {
+          "name": "q3",
+          "type": "text",
+          colSpan: 2,
+        },
+        {
+          "name": "q4",
+          "type": "text",
+          "startWithNewLine": false
+        }]
+      }]
+  });
+  const page = surveyModel.pages[0];
+  const q1 = surveyModel.getQuestionByName("q1");
+  const q2 = surveyModel.getQuestionByName("q2");
+  const q3 = surveyModel.getQuestionByName("q3");
+  const q4 = surveyModel.getQuestionByName("q4");
+
+  assert.deepEqual(q1.titleWidth, undefined);
+  assert.deepEqual(q2.titleWidth, undefined);
+  assert.deepEqual(q3.titleWidth, undefined);
+  assert.deepEqual(q4.titleWidth, undefined);
+
+  page.questionTitleLocation = "left";
+  assert.deepEqual(q1.titleWidth, "25%");
+  assert.deepEqual(q2.titleWidth, "12.5%");
+  assert.deepEqual(q3.titleWidth, "12.5%");
+  assert.deepEqual(q4.titleWidth, "25%");
 });