From 4b40c8cdeccbfd93a91b18db4143a90a055c1659 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Tue, 11 Jun 2024 17:46:28 +0300 Subject: [PATCH] work for #8396 - calculate title width --- src/panel.ts | 2 +- src/question.ts | 12 +++++++++- src/utils/utils.ts | 24 +++++++++++--------- tests/layout_tests.ts | 51 +++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 75 insertions(+), 14 deletions(-) diff --git a/src/panel.ts b/src/panel.ts index bfdd984102..ed3967c99c 100644 --- a/src/panel.ts +++ b/src/panel.ts @@ -1132,7 +1132,7 @@ export class PanelModelBase extends SurveyElement 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 index 5d094b74f3..87a4f8b742 100644 --- a/src/question.ts +++ b/src/question.ts @@ -684,7 +684,17 @@ export class Question extends SurveyElement } 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 index 84b1ee201f..d1898316d2 100644 --- 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(oldValue: Array, newValue: Array, getKey: const commonItemsInOldMap = new Map(); 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(oldValue: Array, newValue: Array, 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(oldValue: Array, newValue: Array, 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(oldValue: Array, newValue: Array, 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(oldValue: Array, newValue: Array, 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(oldValue: Array, newValue: Array, 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(oldValue: Array, newValue: Array, getKey: let tempValuesArray: Array = []; 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(oldValue: Array, newValue: Array, getKey: const mergedItems = new Array(); 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(oldValue: Array, newValue: Array, 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 index a333f39644..d509342e59 100644 --- 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%"); }); \ No newline at end of file