From 0eff2053917f06d3dd3dc62930ab0bac6709d531 Mon Sep 17 00:00:00 2001 From: Sean Kelly Date: Tue, 24 Oct 2023 01:15:15 +0100 Subject: [PATCH 1/7] message --- apps/ui/src/main-page.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/ui/src/main-page.ts b/apps/ui/src/main-page.ts index cc025764d2..545f491440 100644 --- a/apps/ui/src/main-page.ts +++ b/apps/ui/src/main-page.ts @@ -39,6 +39,7 @@ export function pageLoaded(args: EventData) { examples.set('date-picker', 'date-picker/date-picker-page'); examples.set('nested-frames', 'nested-frames/main-page'); examples.set('screen-qualifiers', 'screen-qualifiers/main-page'); + examples.set('grid-layout', 'grid-layout/grid-layout-page'); page.bindingContext = new MainPageViewModel(wrapLayout, examples); const parent = page.getViewById('parentLayout'); From 0b901823647d859181403bd65473658ce127140d Mon Sep 17 00:00:00 2001 From: Sean Kelly Date: Tue, 24 Oct 2023 01:15:30 +0100 Subject: [PATCH 2/7] message --- apps/ui/src/grid-layout/grid-layout-page.ts | 37 ++++++ apps/ui/src/grid-layout/grid-layout-page.xml | 79 +++++++++++++ .../core/ui/layouts/grid-layout/index.ios.ts | 105 ++++++++++-------- 3 files changed, 173 insertions(+), 48 deletions(-) create mode 100644 apps/ui/src/grid-layout/grid-layout-page.ts create mode 100644 apps/ui/src/grid-layout/grid-layout-page.xml diff --git a/apps/ui/src/grid-layout/grid-layout-page.ts b/apps/ui/src/grid-layout/grid-layout-page.ts new file mode 100644 index 0000000000..df2b2296e2 --- /dev/null +++ b/apps/ui/src/grid-layout/grid-layout-page.ts @@ -0,0 +1,37 @@ +import { EventData, GestureStateTypes, PanGestureEventData, Page, View, ScrollView, GridLayout } from '@nativescript/core'; + +var page; +export function pageLoaded(args: EventData) { + page = args.object; +} + +let currentDeltaY = 0; +export function panLayout(args: PanGestureEventData) { + const view = args.object; + const scrollView = view.parent; + + if (args.state === GestureStateTypes.began) { + currentDeltaY = 0; + scrollView.isScrollEnabled = false; + } else if (args.state === GestureStateTypes.changed) { + const diff = args.deltaY - currentDeltaY; + view.translateY += diff; + currentDeltaY = args.deltaY; + } else if (args.state === GestureStateTypes.ended) { + scrollView.isScrollEnabled = true; + } +} + +let isShowingGridLayout: boolean = true; + +export function showHide() { + let gridContainer = page.getViewById('grid-container'); + console.log('tap tap'); + isShowingGridLayout = !isShowingGridLayout; + + if (!isShowingGridLayout) { + gridContainer.visibility = 'hidden'; + } else { + gridContainer.visibility = 'visible'; + } +} diff --git a/apps/ui/src/grid-layout/grid-layout-page.xml b/apps/ui/src/grid-layout/grid-layout-page.xml new file mode 100644 index 0000000000..d6963a3546 --- /dev/null +++ b/apps/ui/src/grid-layout/grid-layout-page.xml @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/core/ui/layouts/grid-layout/index.ios.ts b/packages/core/ui/layouts/grid-layout/index.ios.ts index ca2e253ec2..1a4d671550 100644 --- a/packages/core/ui/layouts/grid-layout/index.ios.ts +++ b/packages/core/ui/layouts/grid-layout/index.ios.ts @@ -410,10 +410,14 @@ class MeasureHelper { } public addMeasureSpec(measureSpec: MeasureSpecs): void { + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + // Get column stats - let size = measureSpec.getColumnIndex() + measureSpec.getColumnSpan(); - for (let i = measureSpec.getColumnIndex(); i < size; i++) { - const columnGroup: ItemGroup = this.columns[i]; + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = this.columns[i]; if (columnGroup.getIsAuto()) { measureSpec.autoColumnsCount++; } else if (columnGroup.getIsStar()) { @@ -425,8 +429,8 @@ class MeasureHelper { if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0) { // Determine which auto columns are affected by this element - for (let i = measureSpec.getColumnIndex(); i < size; i++) { - const columnGroup: ItemGroup = this.columns[i]; + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = this.columns[i]; if (columnGroup.getIsAuto()) { columnGroup.measureToFix++; } @@ -434,9 +438,8 @@ class MeasureHelper { } // Get row stats - size = measureSpec.getRowIndex() + measureSpec.getRowSpan(); - for (let i = measureSpec.getRowIndex(); i < size; i++) { - const rowGroup: ItemGroup = this.rows[i]; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = this.rows[i]; if (rowGroup.getIsAuto()) { measureSpec.autoRowsCount++; } else if (rowGroup.getIsStar()) { @@ -448,25 +451,24 @@ class MeasureHelper { if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0) { // Determine which auto rows are affected by this element - for (let i = measureSpec.getRowIndex(); i < size; i++) { - const rowGroup: ItemGroup = this.rows[i]; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = this.rows[i]; if (rowGroup.getIsAuto()) { rowGroup.measureToFix++; } } } - - this.columns[measureSpec.getColumnIndex()].children.push(measureSpec); - this.rows[measureSpec.getRowIndex()].children.push(measureSpec); + this.columns[columnIndex].children.push(measureSpec); + this.rows[rowIndex].children.push(measureSpec); } public clearMeasureSpecs(): void { for (let i = 0, size = this.columns.length; i < size; i++) { - this.columns[i].children.length = 0; + this.columns[i].children.splice(0); } for (let i = 0, size = this.rows.length; i < size; i++) { - this.rows[i].children.length = 0; + this.rows[i].children.splice(0); } } @@ -479,23 +481,21 @@ class MeasureHelper { } init(): void { - const rows = this.rows.length; - if (rows === 0) { + if (this.rows.length === 0) { this.singleRowGroup.setIsLengthInfinity(this.infinityHeight); this.rows.push(this.singleRowGroup); this.fakeRowAdded = true; - } else if (rows > 1 && this.fakeRowAdded) { - this.rows.splice(0, 1); + } else if (this.rows.length > 1 && this.fakeRowAdded) { + this.rows.shift(); this.fakeRowAdded = false; } - const cols = this.columns.length; - if (cols === 0) { + if (this.columns.length === 0) { this.fakeColumnAdded = true; this.singleColumnGroup.setIsLengthInfinity(this.infinityWidth); this.columns.push(this.singleColumnGroup); - } else if (cols > 1 && this.fakeColumnAdded) { - this.columns.splice(0, 1); + } else if (this.columns.length > 1 && this.fakeColumnAdded) { + this.columns.shift(); this.fakeColumnAdded = false; } @@ -509,29 +509,32 @@ class MeasureHelper { } private itemMeasured(measureSpec: MeasureSpecs, isFakeMeasure: boolean): void { + const columnIndex = measureSpec.getColumnIndex(); + const rowIndex = measureSpec.getRowIndex(); + if (!isFakeMeasure) { - this.columns[measureSpec.getColumnIndex()].measuredCount++; - this.rows[measureSpec.getRowIndex()].measuredCount++; + const column = this.columns[columnIndex]; + const row = this.rows[rowIndex]; + + column.measuredCount++; + row.measuredCount++; measureSpec.measured = true; } - if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0) { - const size = measureSpec.getColumnIndex() + measureSpec.getColumnSpan(); - for (let i = measureSpec.getColumnIndex(); i < size; i++) { - const columnGroup: ItemGroup = this.columns[i]; - if (columnGroup.getIsAuto()) { - columnGroup.currentMeasureToFixCount++; - } + const sizeColumns = columnIndex + measureSpec.getColumnSpan(); + const sizeRows = rowIndex + measureSpec.getRowSpan(); + + for (let i = columnIndex; i < sizeColumns; i++) { + const columnGroup = this.columns[i]; + if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0 && columnGroup.getIsAuto()) { + columnGroup.currentMeasureToFixCount++; } } - if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0) { - const size = measureSpec.getRowIndex() + measureSpec.getRowSpan(); - for (let i = measureSpec.getRowIndex(); i < size; i++) { - const rowGroup: ItemGroup = this.rows[i]; - if (rowGroup.getIsAuto()) { - rowGroup.currentMeasureToFixCount++; - } + for (let i = rowIndex; i < sizeRows; i++) { + const rowGroup = this.rows[i]; + if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0 && rowGroup.getIsAuto()) { + rowGroup.currentMeasureToFixCount++; } } } @@ -901,36 +904,41 @@ class MeasureHelper { const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); let measureWidth = 0; + let measureHeight = 0; + for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - measureWidth += columnGroup.length; + measureWidth += this.columns[i].length; } - let measureHeight = 0; for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - measureHeight += rowGroup.length; + measureHeight += this.rows[i].length; } - // if (have stars) & (not stretch) - at most + // Determine width and height measure spec based on star columns/rows and stretching const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, measureSpec.starColumnsCount > 0 && !this.stretchedHorizontally ? layout.AT_MOST : layout.EXACTLY); - const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, measureSpec.starRowsCount > 0 && !this.stretchedVertically ? layout.AT_MOST : layout.EXACTLY); + // Measure the child view const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); const childMeasuredWidth = childSize.measuredWidth; const childMeasuredHeight = childSize.measuredHeight; + // Update minimum column and row star values if needed this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); + + // Notify that the item has been measured this.itemMeasured(measureSpec, false); } private updateMinRowStarValueIfNeeded(measureSpec: MeasureSpecs, childMeasuredHeight: number): void { if (!this.stretchedVertically && measureSpec.starRowsCount > 0) { - let remainingSpace = childMeasuredHeight; const rowIndex = measureSpec.getRowIndex(); const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + + let remainingSpace = childMeasuredHeight; + let minRowStarValue = this.minRowStarValue; + for (let i = rowIndex; i < rowSpanEnd; i++) { const rowGroup = this.rows[i]; if (!rowGroup.getIsStar()) { @@ -939,8 +947,9 @@ class MeasureHelper { } if (remainingSpace > 0) { - this.minRowStarValue = Math.max(remainingSpace / measureSpec.starRowsCount, this.minRowStarValue); + minRowStarValue = Math.max(remainingSpace / measureSpec.starRowsCount, minRowStarValue); } + this.minRowStarValue = minRowStarValue; } } From 7236808bbccbac626bd839c2a3b373b4d4536563 Mon Sep 17 00:00:00 2001 From: Sean Kelly Date: Tue, 24 Oct 2023 01:23:28 +0100 Subject: [PATCH 3/7] Revert "message" This reverts commit 0b901823647d859181403bd65473658ce127140d. --- apps/ui/src/grid-layout/grid-layout-page.ts | 37 ------ apps/ui/src/grid-layout/grid-layout-page.xml | 79 ------------- .../core/ui/layouts/grid-layout/index.ios.ts | 105 ++++++++---------- 3 files changed, 48 insertions(+), 173 deletions(-) delete mode 100644 apps/ui/src/grid-layout/grid-layout-page.ts delete mode 100644 apps/ui/src/grid-layout/grid-layout-page.xml diff --git a/apps/ui/src/grid-layout/grid-layout-page.ts b/apps/ui/src/grid-layout/grid-layout-page.ts deleted file mode 100644 index df2b2296e2..0000000000 --- a/apps/ui/src/grid-layout/grid-layout-page.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { EventData, GestureStateTypes, PanGestureEventData, Page, View, ScrollView, GridLayout } from '@nativescript/core'; - -var page; -export function pageLoaded(args: EventData) { - page = args.object; -} - -let currentDeltaY = 0; -export function panLayout(args: PanGestureEventData) { - const view = args.object; - const scrollView = view.parent; - - if (args.state === GestureStateTypes.began) { - currentDeltaY = 0; - scrollView.isScrollEnabled = false; - } else if (args.state === GestureStateTypes.changed) { - const diff = args.deltaY - currentDeltaY; - view.translateY += diff; - currentDeltaY = args.deltaY; - } else if (args.state === GestureStateTypes.ended) { - scrollView.isScrollEnabled = true; - } -} - -let isShowingGridLayout: boolean = true; - -export function showHide() { - let gridContainer = page.getViewById('grid-container'); - console.log('tap tap'); - isShowingGridLayout = !isShowingGridLayout; - - if (!isShowingGridLayout) { - gridContainer.visibility = 'hidden'; - } else { - gridContainer.visibility = 'visible'; - } -} diff --git a/apps/ui/src/grid-layout/grid-layout-page.xml b/apps/ui/src/grid-layout/grid-layout-page.xml deleted file mode 100644 index d6963a3546..0000000000 --- a/apps/ui/src/grid-layout/grid-layout-page.xml +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/core/ui/layouts/grid-layout/index.ios.ts b/packages/core/ui/layouts/grid-layout/index.ios.ts index 1a4d671550..ca2e253ec2 100644 --- a/packages/core/ui/layouts/grid-layout/index.ios.ts +++ b/packages/core/ui/layouts/grid-layout/index.ios.ts @@ -410,14 +410,10 @@ class MeasureHelper { } public addMeasureSpec(measureSpec: MeasureSpecs): void { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - // Get column stats - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup = this.columns[i]; + let size = measureSpec.getColumnIndex() + measureSpec.getColumnSpan(); + for (let i = measureSpec.getColumnIndex(); i < size; i++) { + const columnGroup: ItemGroup = this.columns[i]; if (columnGroup.getIsAuto()) { measureSpec.autoColumnsCount++; } else if (columnGroup.getIsStar()) { @@ -429,8 +425,8 @@ class MeasureHelper { if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0) { // Determine which auto columns are affected by this element - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup = this.columns[i]; + for (let i = measureSpec.getColumnIndex(); i < size; i++) { + const columnGroup: ItemGroup = this.columns[i]; if (columnGroup.getIsAuto()) { columnGroup.measureToFix++; } @@ -438,8 +434,9 @@ class MeasureHelper { } // Get row stats - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup = this.rows[i]; + size = measureSpec.getRowIndex() + measureSpec.getRowSpan(); + for (let i = measureSpec.getRowIndex(); i < size; i++) { + const rowGroup: ItemGroup = this.rows[i]; if (rowGroup.getIsAuto()) { measureSpec.autoRowsCount++; } else if (rowGroup.getIsStar()) { @@ -451,24 +448,25 @@ class MeasureHelper { if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0) { // Determine which auto rows are affected by this element - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup = this.rows[i]; + for (let i = measureSpec.getRowIndex(); i < size; i++) { + const rowGroup: ItemGroup = this.rows[i]; if (rowGroup.getIsAuto()) { rowGroup.measureToFix++; } } } - this.columns[columnIndex].children.push(measureSpec); - this.rows[rowIndex].children.push(measureSpec); + + this.columns[measureSpec.getColumnIndex()].children.push(measureSpec); + this.rows[measureSpec.getRowIndex()].children.push(measureSpec); } public clearMeasureSpecs(): void { for (let i = 0, size = this.columns.length; i < size; i++) { - this.columns[i].children.splice(0); + this.columns[i].children.length = 0; } for (let i = 0, size = this.rows.length; i < size; i++) { - this.rows[i].children.splice(0); + this.rows[i].children.length = 0; } } @@ -481,21 +479,23 @@ class MeasureHelper { } init(): void { - if (this.rows.length === 0) { + const rows = this.rows.length; + if (rows === 0) { this.singleRowGroup.setIsLengthInfinity(this.infinityHeight); this.rows.push(this.singleRowGroup); this.fakeRowAdded = true; - } else if (this.rows.length > 1 && this.fakeRowAdded) { - this.rows.shift(); + } else if (rows > 1 && this.fakeRowAdded) { + this.rows.splice(0, 1); this.fakeRowAdded = false; } - if (this.columns.length === 0) { + const cols = this.columns.length; + if (cols === 0) { this.fakeColumnAdded = true; this.singleColumnGroup.setIsLengthInfinity(this.infinityWidth); this.columns.push(this.singleColumnGroup); - } else if (this.columns.length > 1 && this.fakeColumnAdded) { - this.columns.shift(); + } else if (cols > 1 && this.fakeColumnAdded) { + this.columns.splice(0, 1); this.fakeColumnAdded = false; } @@ -509,32 +509,29 @@ class MeasureHelper { } private itemMeasured(measureSpec: MeasureSpecs, isFakeMeasure: boolean): void { - const columnIndex = measureSpec.getColumnIndex(); - const rowIndex = measureSpec.getRowIndex(); - if (!isFakeMeasure) { - const column = this.columns[columnIndex]; - const row = this.rows[rowIndex]; - - column.measuredCount++; - row.measuredCount++; + this.columns[measureSpec.getColumnIndex()].measuredCount++; + this.rows[measureSpec.getRowIndex()].measuredCount++; measureSpec.measured = true; } - const sizeColumns = columnIndex + measureSpec.getColumnSpan(); - const sizeRows = rowIndex + measureSpec.getRowSpan(); - - for (let i = columnIndex; i < sizeColumns; i++) { - const columnGroup = this.columns[i]; - if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0 && columnGroup.getIsAuto()) { - columnGroup.currentMeasureToFixCount++; + if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0) { + const size = measureSpec.getColumnIndex() + measureSpec.getColumnSpan(); + for (let i = measureSpec.getColumnIndex(); i < size; i++) { + const columnGroup: ItemGroup = this.columns[i]; + if (columnGroup.getIsAuto()) { + columnGroup.currentMeasureToFixCount++; + } } } - for (let i = rowIndex; i < sizeRows; i++) { - const rowGroup = this.rows[i]; - if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0 && rowGroup.getIsAuto()) { - rowGroup.currentMeasureToFixCount++; + if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0) { + const size = measureSpec.getRowIndex() + measureSpec.getRowSpan(); + for (let i = measureSpec.getRowIndex(); i < size; i++) { + const rowGroup: ItemGroup = this.rows[i]; + if (rowGroup.getIsAuto()) { + rowGroup.currentMeasureToFixCount++; + } } } } @@ -904,41 +901,36 @@ class MeasureHelper { const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); let measureWidth = 0; - let measureHeight = 0; - for (let i = columnIndex; i < columnSpanEnd; i++) { - measureWidth += this.columns[i].length; + const columnGroup: ItemGroup = this.columns[i]; + measureWidth += columnGroup.length; } + let measureHeight = 0; for (let i = rowIndex; i < rowSpanEnd; i++) { - measureHeight += this.rows[i].length; + const rowGroup: ItemGroup = this.rows[i]; + measureHeight += rowGroup.length; } - // Determine width and height measure spec based on star columns/rows and stretching + // if (have stars) & (not stretch) - at most const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, measureSpec.starColumnsCount > 0 && !this.stretchedHorizontally ? layout.AT_MOST : layout.EXACTLY); + const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, measureSpec.starRowsCount > 0 && !this.stretchedVertically ? layout.AT_MOST : layout.EXACTLY); - // Measure the child view const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); const childMeasuredWidth = childSize.measuredWidth; const childMeasuredHeight = childSize.measuredHeight; - // Update minimum column and row star values if needed this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); - - // Notify that the item has been measured this.itemMeasured(measureSpec, false); } private updateMinRowStarValueIfNeeded(measureSpec: MeasureSpecs, childMeasuredHeight: number): void { if (!this.stretchedVertically && measureSpec.starRowsCount > 0) { + let remainingSpace = childMeasuredHeight; const rowIndex = measureSpec.getRowIndex(); const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - - let remainingSpace = childMeasuredHeight; - let minRowStarValue = this.minRowStarValue; - for (let i = rowIndex; i < rowSpanEnd; i++) { const rowGroup = this.rows[i]; if (!rowGroup.getIsStar()) { @@ -947,9 +939,8 @@ class MeasureHelper { } if (remainingSpace > 0) { - minRowStarValue = Math.max(remainingSpace / measureSpec.starRowsCount, minRowStarValue); + this.minRowStarValue = Math.max(remainingSpace / measureSpec.starRowsCount, this.minRowStarValue); } - this.minRowStarValue = minRowStarValue; } } From 88f2d627cbf909af24f333600095575171f608e9 Mon Sep 17 00:00:00 2001 From: Sean Kelly Date: Tue, 24 Oct 2023 01:23:59 +0100 Subject: [PATCH 4/7] Revert "Revert "message"" This reverts commit 7236808bbccbac626bd839c2a3b373b4d4536563. --- apps/ui/src/grid-layout/grid-layout-page.ts | 37 ++++++ apps/ui/src/grid-layout/grid-layout-page.xml | 79 +++++++++++++ .../core/ui/layouts/grid-layout/index.ios.ts | 105 ++++++++++-------- 3 files changed, 173 insertions(+), 48 deletions(-) create mode 100644 apps/ui/src/grid-layout/grid-layout-page.ts create mode 100644 apps/ui/src/grid-layout/grid-layout-page.xml diff --git a/apps/ui/src/grid-layout/grid-layout-page.ts b/apps/ui/src/grid-layout/grid-layout-page.ts new file mode 100644 index 0000000000..df2b2296e2 --- /dev/null +++ b/apps/ui/src/grid-layout/grid-layout-page.ts @@ -0,0 +1,37 @@ +import { EventData, GestureStateTypes, PanGestureEventData, Page, View, ScrollView, GridLayout } from '@nativescript/core'; + +var page; +export function pageLoaded(args: EventData) { + page = args.object; +} + +let currentDeltaY = 0; +export function panLayout(args: PanGestureEventData) { + const view = args.object; + const scrollView = view.parent; + + if (args.state === GestureStateTypes.began) { + currentDeltaY = 0; + scrollView.isScrollEnabled = false; + } else if (args.state === GestureStateTypes.changed) { + const diff = args.deltaY - currentDeltaY; + view.translateY += diff; + currentDeltaY = args.deltaY; + } else if (args.state === GestureStateTypes.ended) { + scrollView.isScrollEnabled = true; + } +} + +let isShowingGridLayout: boolean = true; + +export function showHide() { + let gridContainer = page.getViewById('grid-container'); + console.log('tap tap'); + isShowingGridLayout = !isShowingGridLayout; + + if (!isShowingGridLayout) { + gridContainer.visibility = 'hidden'; + } else { + gridContainer.visibility = 'visible'; + } +} diff --git a/apps/ui/src/grid-layout/grid-layout-page.xml b/apps/ui/src/grid-layout/grid-layout-page.xml new file mode 100644 index 0000000000..d6963a3546 --- /dev/null +++ b/apps/ui/src/grid-layout/grid-layout-page.xml @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/core/ui/layouts/grid-layout/index.ios.ts b/packages/core/ui/layouts/grid-layout/index.ios.ts index ca2e253ec2..1a4d671550 100644 --- a/packages/core/ui/layouts/grid-layout/index.ios.ts +++ b/packages/core/ui/layouts/grid-layout/index.ios.ts @@ -410,10 +410,14 @@ class MeasureHelper { } public addMeasureSpec(measureSpec: MeasureSpecs): void { + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + // Get column stats - let size = measureSpec.getColumnIndex() + measureSpec.getColumnSpan(); - for (let i = measureSpec.getColumnIndex(); i < size; i++) { - const columnGroup: ItemGroup = this.columns[i]; + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = this.columns[i]; if (columnGroup.getIsAuto()) { measureSpec.autoColumnsCount++; } else if (columnGroup.getIsStar()) { @@ -425,8 +429,8 @@ class MeasureHelper { if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0) { // Determine which auto columns are affected by this element - for (let i = measureSpec.getColumnIndex(); i < size; i++) { - const columnGroup: ItemGroup = this.columns[i]; + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = this.columns[i]; if (columnGroup.getIsAuto()) { columnGroup.measureToFix++; } @@ -434,9 +438,8 @@ class MeasureHelper { } // Get row stats - size = measureSpec.getRowIndex() + measureSpec.getRowSpan(); - for (let i = measureSpec.getRowIndex(); i < size; i++) { - const rowGroup: ItemGroup = this.rows[i]; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = this.rows[i]; if (rowGroup.getIsAuto()) { measureSpec.autoRowsCount++; } else if (rowGroup.getIsStar()) { @@ -448,25 +451,24 @@ class MeasureHelper { if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0) { // Determine which auto rows are affected by this element - for (let i = measureSpec.getRowIndex(); i < size; i++) { - const rowGroup: ItemGroup = this.rows[i]; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = this.rows[i]; if (rowGroup.getIsAuto()) { rowGroup.measureToFix++; } } } - - this.columns[measureSpec.getColumnIndex()].children.push(measureSpec); - this.rows[measureSpec.getRowIndex()].children.push(measureSpec); + this.columns[columnIndex].children.push(measureSpec); + this.rows[rowIndex].children.push(measureSpec); } public clearMeasureSpecs(): void { for (let i = 0, size = this.columns.length; i < size; i++) { - this.columns[i].children.length = 0; + this.columns[i].children.splice(0); } for (let i = 0, size = this.rows.length; i < size; i++) { - this.rows[i].children.length = 0; + this.rows[i].children.splice(0); } } @@ -479,23 +481,21 @@ class MeasureHelper { } init(): void { - const rows = this.rows.length; - if (rows === 0) { + if (this.rows.length === 0) { this.singleRowGroup.setIsLengthInfinity(this.infinityHeight); this.rows.push(this.singleRowGroup); this.fakeRowAdded = true; - } else if (rows > 1 && this.fakeRowAdded) { - this.rows.splice(0, 1); + } else if (this.rows.length > 1 && this.fakeRowAdded) { + this.rows.shift(); this.fakeRowAdded = false; } - const cols = this.columns.length; - if (cols === 0) { + if (this.columns.length === 0) { this.fakeColumnAdded = true; this.singleColumnGroup.setIsLengthInfinity(this.infinityWidth); this.columns.push(this.singleColumnGroup); - } else if (cols > 1 && this.fakeColumnAdded) { - this.columns.splice(0, 1); + } else if (this.columns.length > 1 && this.fakeColumnAdded) { + this.columns.shift(); this.fakeColumnAdded = false; } @@ -509,29 +509,32 @@ class MeasureHelper { } private itemMeasured(measureSpec: MeasureSpecs, isFakeMeasure: boolean): void { + const columnIndex = measureSpec.getColumnIndex(); + const rowIndex = measureSpec.getRowIndex(); + if (!isFakeMeasure) { - this.columns[measureSpec.getColumnIndex()].measuredCount++; - this.rows[measureSpec.getRowIndex()].measuredCount++; + const column = this.columns[columnIndex]; + const row = this.rows[rowIndex]; + + column.measuredCount++; + row.measuredCount++; measureSpec.measured = true; } - if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0) { - const size = measureSpec.getColumnIndex() + measureSpec.getColumnSpan(); - for (let i = measureSpec.getColumnIndex(); i < size; i++) { - const columnGroup: ItemGroup = this.columns[i]; - if (columnGroup.getIsAuto()) { - columnGroup.currentMeasureToFixCount++; - } + const sizeColumns = columnIndex + measureSpec.getColumnSpan(); + const sizeRows = rowIndex + measureSpec.getRowSpan(); + + for (let i = columnIndex; i < sizeColumns; i++) { + const columnGroup = this.columns[i]; + if (measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0 && columnGroup.getIsAuto()) { + columnGroup.currentMeasureToFixCount++; } } - if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0) { - const size = measureSpec.getRowIndex() + measureSpec.getRowSpan(); - for (let i = measureSpec.getRowIndex(); i < size; i++) { - const rowGroup: ItemGroup = this.rows[i]; - if (rowGroup.getIsAuto()) { - rowGroup.currentMeasureToFixCount++; - } + for (let i = rowIndex; i < sizeRows; i++) { + const rowGroup = this.rows[i]; + if (measureSpec.autoRowsCount > 0 && measureSpec.starRowsCount === 0 && rowGroup.getIsAuto()) { + rowGroup.currentMeasureToFixCount++; } } } @@ -901,36 +904,41 @@ class MeasureHelper { const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); let measureWidth = 0; + let measureHeight = 0; + for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - measureWidth += columnGroup.length; + measureWidth += this.columns[i].length; } - let measureHeight = 0; for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - measureHeight += rowGroup.length; + measureHeight += this.rows[i].length; } - // if (have stars) & (not stretch) - at most + // Determine width and height measure spec based on star columns/rows and stretching const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, measureSpec.starColumnsCount > 0 && !this.stretchedHorizontally ? layout.AT_MOST : layout.EXACTLY); - const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, measureSpec.starRowsCount > 0 && !this.stretchedVertically ? layout.AT_MOST : layout.EXACTLY); + // Measure the child view const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); const childMeasuredWidth = childSize.measuredWidth; const childMeasuredHeight = childSize.measuredHeight; + // Update minimum column and row star values if needed this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); + + // Notify that the item has been measured this.itemMeasured(measureSpec, false); } private updateMinRowStarValueIfNeeded(measureSpec: MeasureSpecs, childMeasuredHeight: number): void { if (!this.stretchedVertically && measureSpec.starRowsCount > 0) { - let remainingSpace = childMeasuredHeight; const rowIndex = measureSpec.getRowIndex(); const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + + let remainingSpace = childMeasuredHeight; + let minRowStarValue = this.minRowStarValue; + for (let i = rowIndex; i < rowSpanEnd; i++) { const rowGroup = this.rows[i]; if (!rowGroup.getIsStar()) { @@ -939,8 +947,9 @@ class MeasureHelper { } if (remainingSpace > 0) { - this.minRowStarValue = Math.max(remainingSpace / measureSpec.starRowsCount, this.minRowStarValue); + minRowStarValue = Math.max(remainingSpace / measureSpec.starRowsCount, minRowStarValue); } + this.minRowStarValue = minRowStarValue; } } From c98f70dcb18b870bca6ef9e4759e7c2a8cc091b9 Mon Sep 17 00:00:00 2001 From: Sean Kelly Date: Tue, 24 Oct 2023 01:31:29 +0100 Subject: [PATCH 5/7] message --- apps/ui/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/ui/package.json b/apps/ui/package.json index 1287ebbdae..dfc789bc99 100644 --- a/apps/ui/package.json +++ b/apps/ui/package.json @@ -7,8 +7,9 @@ "url": "https://github.com/NativeScript/NativeScript.git" }, "dependencies": { + "@nativescript/core": "file:../../packages/core", "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core", - "@nativescript/core": "file:../../packages/core" + "pre-commit": "^1.2.2" }, "devDependencies": { "@nativescript/android": "~8.5.0", From 600149973cff2779d7434a78e9b191e04efa4a90 Mon Sep 17 00:00:00 2001 From: Sean Kelly <{ID}+{username}@users.noreply.github.com> Date: Thu, 2 Nov 2023 22:07:24 +0000 Subject: [PATCH 6/7] gridlayout for ios optimisations --- .../core/ui/layouts/grid-layout/index.ios.ts | 465 +++++++++--------- 1 file changed, 245 insertions(+), 220 deletions(-) diff --git a/packages/core/ui/layouts/grid-layout/index.ios.ts b/packages/core/ui/layouts/grid-layout/index.ios.ts index 1a4d671550..e2b0a31a5a 100644 --- a/packages/core/ui/layouts/grid-layout/index.ios.ts +++ b/packages/core/ui/layouts/grid-layout/index.ios.ts @@ -208,19 +208,36 @@ export class GridLayout extends GridLayoutBase { this.rowOffsets.push(roundedOffset); } - for (let i = 0, columns = this.helper.columns.length; i < columns; i++) { - const columnGroup = this.helper.columns[i]; - for (let j = 0, children = columnGroup.children.length; j < children; j++) { - const measureSpec = columnGroup.children[j]; - const childLeft = this.columnOffsets[measureSpec.getColumnIndex()]; - const childRight = this.columnOffsets[measureSpec.getColumnIndex() + measureSpec.getColumnSpan()]; - const childTop = this.rowOffsets[measureSpec.getRowIndex()]; - const childBottom = this.rowOffsets[measureSpec.getRowIndex() + measureSpec.getRowSpan()]; - - // No need to include margins in the width, height - View.layoutChild(this, measureSpec.child, childLeft, childTop, childRight, childBottom); - } - } + for (let i = 0, columns = this.helper.columns.length; i < columns; i++) { + const columnGroup = this.helper.columns[i]; + for (let j = 0, children = columnGroup.children.length; j < children; j++) { + const measureSpec = columnGroup.children[j]; + const columnIndex = measureSpec.getColumnIndex(); + const columnSpan = measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpan = measureSpec.getRowSpan(); + + // Check for NaN values in position values + if ( + isNaN(columnIndex) || + isNaN(columnSpan) || + isNaN(rowIndex) || + isNaN(rowSpan) + ) { + // Handle NaN values here + console.error("Invalid position values: NaN"); + continue; + } + + const childLeft = this.columnOffsets[columnIndex]; + const childRight = this.columnOffsets[columnIndex + columnSpan]; + const childTop = this.rowOffsets[rowIndex]; + const childBottom = this.rowOffsets[rowIndex + rowSpan]; + + // No need to include margins in the width, height + View.layoutChild(this, measureSpec.child, childLeft, childTop, childRight, childBottom); + } + } } } @@ -556,7 +573,6 @@ class MeasureHelper { const widthForStarColumns = Math.max(0, this.width - currentColumnWidth); this.maxColumnStarValue = columnStarCount > 0 ? widthForStarColumns / columnStarCount : 0; - MeasureHelper.updateStarLength(this.columns, this.maxColumnStarValue); } @@ -577,7 +593,6 @@ class MeasureHelper { const heightForStarRows = Math.max(0, this.height - currentRowHeight); this.maxRowStarValue = rowStarCount > 0 ? heightForStarRows / rowStarCount : 0; - MeasureHelper.updateStarLength(this.rows, this.maxRowStarValue); } @@ -587,31 +602,29 @@ class MeasureHelper { for (let i = 0, rowCount = list.length; i < rowCount; i++) { const item = list[i]; if (item.getIsStar()) { - offset += item.rowOrColumn.value * starValue; - - const actualLength = offset - roundedOffset; - const roundedLength = Math.round(actualLength); - item.length = roundedLength; - roundedOffset += roundedLength; + const roundedLength = Math.round(item.rowOrColumn.value * starValue); + item.length = roundedLength; + offset += roundedLength; + roundedOffset += roundedLength; } } } private fakeMeasure(): void { - // Fake measure - measure all elements that have star rows and auto columns - with infinity Width and infinity Height - for (let i = 0, size = this.columns.length; i < size; i++) { - const columnGroup: ItemGroup = this.columns[i]; - if (columnGroup.getAllMeasured()) { - continue; - } - - for (let j = 0, childrenCount = columnGroup.children.length; j < childrenCount; j++) { - const measureSpec: MeasureSpecs = columnGroup.children[j]; - if (measureSpec.starRowsCount > 0 && measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0) { - this.measureChild(measureSpec, true); - } - } - } + // Fake measure - measure all elements that have star rows and auto columns - with infinity Width and infinity Height + for (let i = 0, size = this.columns.length; i < size; i++) { + const columnGroup = this.columns[i]; + if (columnGroup.getAllMeasured()) { + continue; + } + for (let j = 0, childrenCount = columnGroup.children.length; j < childrenCount; j++) { + const measureSpec = columnGroup.children[j]; + const hasStarRowsAndAutoColumns = measureSpec.starRowsCount > 0 && measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0; + if (hasStarRowsAndAutoColumns) { + this.measureChild(measureSpec, true); + } + } + } } private measureFixedColumnsNoStarRows(): void { @@ -703,18 +716,16 @@ class MeasureHelper { // Fake measure - measure all elements that have star rows and auto columns - with infinity Width and infinity Height // should be able to fix rows after that this.fakeMeasure(); - this.fixColumns(); // Measure all elements that have star columns(already fixed), but no stars at the rows this.measureFixedColumnsNoStarRows(); - this.fixRows(); } else if (fixColumns && !fixRows) { // Measure all elements that have star columns(already fixed) but no stars at the rows this.measureFixedColumnsNoStarRows(); - // Then + // Then fix rows this.fixRows(); } else if (!fixColumns && fixRows) { // Measure all elements that have star rows(already fixed) but no star at the columns @@ -753,182 +764,191 @@ class MeasureHelper { } private measureChild(measureSpec: MeasureSpecs, isFakeMeasure: boolean): void { - const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); - const heightMeasureSpec = isFakeMeasure || measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); - - const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); - const childMeasuredWidth: number = childSize.measuredWidth; - const childMeasuredHeight: number = childSize.measuredHeight; - - const columnSpanEnd: number = measureSpec.getColumnIndex() + measureSpec.getColumnSpan(); - const rowSpanEnd: number = measureSpec.getRowIndex() + measureSpec.getRowSpan(); - - if (measureSpec.autoColumnsCount > 0) { - let remainingSpace = childMeasuredWidth; - - for (let i = measureSpec.getColumnIndex(); i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - remainingSpace -= columnGroup.length; - } - - if (remainingSpace > 0) { - const growSize = remainingSpace / measureSpec.autoColumnsCount; - for (let i = measureSpec.getColumnIndex(); i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - if (columnGroup.getIsAuto()) { - columnGroup.length += growSize; - } - } - } - } - - if (!isFakeMeasure && measureSpec.autoRowsCount > 0) { - let remainingSpace: number = childMeasuredHeight; - - for (let i = measureSpec.getRowIndex(); i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - remainingSpace -= rowGroup.length; - } - - if (remainingSpace > 0) { - const growSize = remainingSpace / measureSpec.autoRowsCount; - for (let i = measureSpec.getRowIndex(); i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - if (rowGroup.getIsAuto()) { - rowGroup.length += growSize; - } - } - } - } - - this.itemMeasured(measureSpec, isFakeMeasure); + const { child } = measureSpec; + const columnIndex = measureSpec.getColumnIndex(); + const columnSpan = measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpan = measureSpec.getRowSpan(); + + const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); + const heightMeasureSpec = isFakeMeasure || measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); + + const { measuredWidth: childMeasuredWidth, measuredHeight: childMeasuredHeight } = View.measureChild(this.grid, child, widthMeasureSpec, heightMeasureSpec); + + const columnStart = columnIndex; + const columnEnd = columnIndex + columnSpan; + const rowStart = rowIndex; + const rowEnd = rowIndex + rowSpan; + + let remainingSpace; + + if (measureSpec.autoColumnsCount > 0) { + remainingSpace = childMeasuredWidth; + for (let i = columnStart; i < columnEnd; i++) { + const columnGroup = this.columns[i]; + remainingSpace -= columnGroup.length; + } + if (remainingSpace > 0) { + const growSize = remainingSpace / measureSpec.autoColumnsCount; + for (let i = columnStart; i < columnEnd; i++) { + const columnGroup = this.columns[i]; + if (columnGroup.getIsAuto()) { + columnGroup.length += growSize; + } + } + } + } + + if (!isFakeMeasure && measureSpec.autoRowsCount > 0) { + remainingSpace = childMeasuredHeight; + for (let i = rowStart; i < rowEnd; i++) { + const rowGroup = this.rows[i]; + remainingSpace -= rowGroup.length; + } + if (remainingSpace > 0) { + const growSize = remainingSpace / measureSpec.autoRowsCount; + for (let i = rowStart; i < rowEnd; i++) { + const rowGroup = this.rows[i]; + if (rowGroup.getIsAuto()) { + rowGroup.length += growSize; + } + } + } + } + + this.itemMeasured(measureSpec, isFakeMeasure); } private measureChildFixedColumns(measureSpec: MeasureSpecs): void { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - - let measureWidth = 0; - let growSize = 0; - - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - measureWidth += columnGroup.length; - } - - const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, this.stretchedHorizontally ? layout.EXACTLY : layout.AT_MOST); - const heightMeasureSpec = measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); - - const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); - const childMeasuredWidth = childSize.measuredWidth; - const childMeasuredHeight = childSize.measuredHeight; - - this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); - - // Distribute height over auto rows - if (measureSpec.autoRowsCount > 0) { - let remainingSpace = childMeasuredHeight; - - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - remainingSpace -= rowGroup.length; - } - - if (remainingSpace > 0) { - growSize = remainingSpace / measureSpec.autoRowsCount; - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - if (rowGroup.getIsAuto()) { - rowGroup.length += growSize; - } - } - } - } - - this.itemMeasured(measureSpec, false); + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + + let measureWidth = 0; + let remainingSpace = 0; + let growSize = 0; + + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup: ItemGroup = this.columns[i]; + measureWidth += columnGroup.length; + } + + const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, this.stretchedHorizontally ? layout.EXACTLY : layout.AT_MOST); + const heightMeasureSpec = measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); + + const { measuredWidth: childMeasuredWidth, measuredHeight: childMeasuredHeight } = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); + + this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); + + // Distribute height over auto rows + if (measureSpec.autoRowsCount > 0) { + remainingSpace = childMeasuredHeight; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = this.rows[i]; + remainingSpace -= rowGroup.length; + } + if (remainingSpace > 0) { + growSize = remainingSpace / measureSpec.autoRowsCount; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup: ItemGroup = this.rows[i]; + if (rowGroup.getIsAuto()) { + rowGroup.length += growSize; + } + } + } + } + this.itemMeasured(measureSpec, false); } private measureChildFixedRows(measureSpec: MeasureSpecs): void { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - let measureHeight = 0; - - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - measureHeight += rowGroup.length; - } - - const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); - const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, this.stretchedVertically ? layout.EXACTLY : layout.AT_MOST); - - const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); - const childMeasuredWidth = childSize.measuredWidth; - const childMeasuredHeight = childSize.measuredHeight; - - let remainingSpace = 0; - let growSize = 0; - - // Distribute width over auto columns - if (measureSpec.autoColumnsCount > 0) { - remainingSpace = childMeasuredWidth; - - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - remainingSpace -= columnGroup.length; - } - - if (remainingSpace > 0) { - growSize = remainingSpace / measureSpec.autoColumnsCount; - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - - if (columnGroup.getIsAuto()) { - columnGroup.length += growSize; - } - } - } - } - - this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); - this.itemMeasured(measureSpec, false); + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + let measureHeight = 0; + + const rows = this.rows; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = rows[i]; + measureHeight += rowGroup.length; + } + + const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); + const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, this.stretchedVertically ? layout.EXACTLY : layout.AT_MOST); + + const child = measureSpec.child; + const childSize = View.measureChild(this.grid, child, widthMeasureSpec, heightMeasureSpec); + const childMeasuredWidth = childSize.measuredWidth; + const childMeasuredHeight = childSize.measuredHeight; + + let remainingSpace = 0; + let growSize = 0; + + // Distribute width over auto columns + if (measureSpec.autoColumnsCount > 0) { + remainingSpace = childMeasuredWidth; + + const columns = this.columns; + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = columns[i]; + remainingSpace -= columnGroup.length; + } + + if (remainingSpace > 0) { + growSize = remainingSpace / measureSpec.autoColumnsCount; + + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = columns[i]; + if (columnGroup.getIsAuto()) { + columnGroup.length += growSize; + } + } + } + } + + this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); + this.itemMeasured(measureSpec, false); } private measureChildFixedColumnsAndRows(measureSpec: MeasureSpecs): void { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - - let measureWidth = 0; - let measureHeight = 0; - - for (let i = columnIndex; i < columnSpanEnd; i++) { - measureWidth += this.columns[i].length; - } - - for (let i = rowIndex; i < rowSpanEnd; i++) { - measureHeight += this.rows[i].length; - } - - // Determine width and height measure spec based on star columns/rows and stretching - const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, measureSpec.starColumnsCount > 0 && !this.stretchedHorizontally ? layout.AT_MOST : layout.EXACTLY); - const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, measureSpec.starRowsCount > 0 && !this.stretchedVertically ? layout.AT_MOST : layout.EXACTLY); - - // Measure the child view - const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); - const childMeasuredWidth = childSize.measuredWidth; - const childMeasuredHeight = childSize.measuredHeight; - - // Update minimum column and row star values if needed - this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); - this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); - - // Notify that the item has been measured - this.itemMeasured(measureSpec, false); + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + + let measureWidth = 0; + let measureHeight = 0; + + // Calculate total width and height + for (let i = columnIndex; i < columnSpanEnd; i++) { + measureWidth += this.columns[i].length; + } + for (let i = rowIndex; i < rowSpanEnd; i++) { + measureHeight += this.rows[i].length; + } + + // Determine width and height measure spec based on star columns/rows and stretching + const widthMeasureSpec = layout.makeMeasureSpec( + measureWidth, + measureSpec.starColumnsCount > 0 && !this.stretchedHorizontally ? layout.AT_MOST : layout.EXACTLY + ); + const heightMeasureSpec = layout.makeMeasureSpec( + measureHeight, + measureSpec.starRowsCount > 0 && !this.stretchedVertically ? layout.AT_MOST : layout.EXACTLY + ); + + // Measure the child view + const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); + const childMeasuredWidth = childSize.measuredWidth; + const childMeasuredHeight = childSize.measuredHeight; + + // Update minimum column and row star values if needed + this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); + this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); + + // Notify that the item has been measured + this.itemMeasured(measureSpec, false); } private updateMinRowStarValueIfNeeded(measureSpec: MeasureSpecs, childMeasuredHeight: number): void { @@ -956,20 +976,25 @@ class MeasureHelper { private updateMinColumnStarValueIfNeeded(measureSpec: MeasureSpecs, childMeasuredWidth: number): void { // When not stretched star columns are not fixed so we may grow them here // if there is an element that spans on multiple columns - if (!this.stretchedHorizontally && measureSpec.starColumnsCount > 0) { - let remainingSpace = childMeasuredWidth; - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup = this.columns[i]; - if (!columnGroup.getIsStar()) { - remainingSpace -= columnGroup.length; - } - } - - if (remainingSpace > 0) { - this.minColumnStarValue = Math.max(remainingSpace / measureSpec.starColumnsCount, this.minColumnStarValue); - } - } + if (!this.stretchedHorizontally && measureSpec.starColumnsCount > 0) { + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + + let remainingSpace = childMeasuredWidth; + let minColumnStarValue = this.minColumnStarValue; + + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = this.columns[i]; + if (!columnGroup.getIsStar()) { + remainingSpace -= columnGroup.length; + } + } + + if (remainingSpace > 0) { + minColumnStarValue = Math.max(remainingSpace / measureSpec.starColumnsCount, minColumnStarValue); + } + + this.minColumnStarValue = minColumnStarValue; + } } } From 232f0f264e602bf2dc55fc28e15858b761b2569f Mon Sep 17 00:00:00 2001 From: Sean Kelly <36159246+SeanKelly369@users.noreply.github.com> Date: Thu, 2 Nov 2023 23:16:15 +0000 Subject: [PATCH 7/7] Update index.ios.ts Formatting fixes --- .../core/ui/layouts/grid-layout/index.ios.ts | 386 +++++++++--------- 1 file changed, 193 insertions(+), 193 deletions(-) diff --git a/packages/core/ui/layouts/grid-layout/index.ios.ts b/packages/core/ui/layouts/grid-layout/index.ios.ts index e2b0a31a5a..fa5c4db7f6 100644 --- a/packages/core/ui/layouts/grid-layout/index.ios.ts +++ b/packages/core/ui/layouts/grid-layout/index.ios.ts @@ -602,29 +602,29 @@ class MeasureHelper { for (let i = 0, rowCount = list.length; i < rowCount; i++) { const item = list[i]; if (item.getIsStar()) { - const roundedLength = Math.round(item.rowOrColumn.value * starValue); - item.length = roundedLength; - offset += roundedLength; - roundedOffset += roundedLength; + const roundedLength = Math.round(item.rowOrColumn.value * starValue); + item.length = roundedLength; + offset += roundedLength; + roundedOffset += roundedLength; } } } private fakeMeasure(): void { - // Fake measure - measure all elements that have star rows and auto columns - with infinity Width and infinity Height - for (let i = 0, size = this.columns.length; i < size; i++) { - const columnGroup = this.columns[i]; - if (columnGroup.getAllMeasured()) { - continue; - } - for (let j = 0, childrenCount = columnGroup.children.length; j < childrenCount; j++) { - const measureSpec = columnGroup.children[j]; - const hasStarRowsAndAutoColumns = measureSpec.starRowsCount > 0 && measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0; - if (hasStarRowsAndAutoColumns) { - this.measureChild(measureSpec, true); - } - } - } + // Fake measure - measure all elements that have star rows and auto columns - with infinity Width and infinity Height + for (let i = 0, size = this.columns.length; i < size; i++) { + const columnGroup = this.columns[i]; + if (columnGroup.getAllMeasured()) { + continue; + } + for (let j = 0, childrenCount = columnGroup.children.length; j < childrenCount; j++) { + const measureSpec = columnGroup.children[j]; + const hasStarRowsAndAutoColumns = measureSpec.starRowsCount > 0 && measureSpec.autoColumnsCount > 0 && measureSpec.starColumnsCount === 0; + if (hasStarRowsAndAutoColumns) { + this.measureChild(measureSpec, true); + } + } + } } private measureFixedColumnsNoStarRows(): void { @@ -764,191 +764,191 @@ class MeasureHelper { } private measureChild(measureSpec: MeasureSpecs, isFakeMeasure: boolean): void { - const { child } = measureSpec; - const columnIndex = measureSpec.getColumnIndex(); - const columnSpan = measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpan = measureSpec.getRowSpan(); - - const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); - const heightMeasureSpec = isFakeMeasure || measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); - - const { measuredWidth: childMeasuredWidth, measuredHeight: childMeasuredHeight } = View.measureChild(this.grid, child, widthMeasureSpec, heightMeasureSpec); - - const columnStart = columnIndex; - const columnEnd = columnIndex + columnSpan; - const rowStart = rowIndex; - const rowEnd = rowIndex + rowSpan; - - let remainingSpace; - - if (measureSpec.autoColumnsCount > 0) { - remainingSpace = childMeasuredWidth; - for (let i = columnStart; i < columnEnd; i++) { - const columnGroup = this.columns[i]; - remainingSpace -= columnGroup.length; - } - if (remainingSpace > 0) { - const growSize = remainingSpace / measureSpec.autoColumnsCount; - for (let i = columnStart; i < columnEnd; i++) { - const columnGroup = this.columns[i]; - if (columnGroup.getIsAuto()) { - columnGroup.length += growSize; - } - } - } - } + const { child } = measureSpec; + const columnIndex = measureSpec.getColumnIndex(); + const columnSpan = measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpan = measureSpec.getRowSpan(); + + const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); + const heightMeasureSpec = isFakeMeasure || measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); + + const { measuredWidth: childMeasuredWidth, measuredHeight: childMeasuredHeight } = View.measureChild(this.grid, child, widthMeasureSpec, heightMeasureSpec); + + const columnStart = columnIndex; + const columnEnd = columnIndex + columnSpan; + const rowStart = rowIndex; + const rowEnd = rowIndex + rowSpan; + + let remainingSpace; + + if (measureSpec.autoColumnsCount > 0) { + remainingSpace = childMeasuredWidth; + for (let i = columnStart; i < columnEnd; i++) { + const columnGroup = this.columns[i]; + remainingSpace -= columnGroup.length; + } + if (remainingSpace > 0) { + const growSize = remainingSpace / measureSpec.autoColumnsCount; + for (let i = columnStart; i < columnEnd; i++) { + const columnGroup = this.columns[i]; + if (columnGroup.getIsAuto()) { + columnGroup.length += growSize; + } + } + } + } - if (!isFakeMeasure && measureSpec.autoRowsCount > 0) { - remainingSpace = childMeasuredHeight; - for (let i = rowStart; i < rowEnd; i++) { - const rowGroup = this.rows[i]; - remainingSpace -= rowGroup.length; - } - if (remainingSpace > 0) { - const growSize = remainingSpace / measureSpec.autoRowsCount; - for (let i = rowStart; i < rowEnd; i++) { - const rowGroup = this.rows[i]; - if (rowGroup.getIsAuto()) { - rowGroup.length += growSize; - } - } - } - } + if (!isFakeMeasure && measureSpec.autoRowsCount > 0) { + remainingSpace = childMeasuredHeight; + for (let i = rowStart; i < rowEnd; i++) { + const rowGroup = this.rows[i]; + remainingSpace -= rowGroup.length; + } + if (remainingSpace > 0) { + const growSize = remainingSpace / measureSpec.autoRowsCount; + for (let i = rowStart; i < rowEnd; i++) { + const rowGroup = this.rows[i]; + if (rowGroup.getIsAuto()) { + rowGroup.length += growSize; + } + } + } + } - this.itemMeasured(measureSpec, isFakeMeasure); + this.itemMeasured(measureSpec, isFakeMeasure); } private measureChildFixedColumns(measureSpec: MeasureSpecs): void { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - - let measureWidth = 0; - let remainingSpace = 0; - let growSize = 0; - - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup: ItemGroup = this.columns[i]; - measureWidth += columnGroup.length; - } + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + + let measureWidth = 0; + let remainingSpace = 0; + let growSize = 0; + + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup: ItemGroup = this.columns[i]; + measureWidth += columnGroup.length; + } - const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, this.stretchedHorizontally ? layout.EXACTLY : layout.AT_MOST); - const heightMeasureSpec = measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); + const widthMeasureSpec = layout.makeMeasureSpec(measureWidth, this.stretchedHorizontally ? layout.EXACTLY : layout.AT_MOST); + const heightMeasureSpec = measureSpec.autoRowsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelHeight, layout.EXACTLY); - const { measuredWidth: childMeasuredWidth, measuredHeight: childMeasuredHeight } = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); + const { measuredWidth: childMeasuredWidth, measuredHeight: childMeasuredHeight } = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); - this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); + this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); - // Distribute height over auto rows - if (measureSpec.autoRowsCount > 0) { - remainingSpace = childMeasuredHeight; - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup = this.rows[i]; - remainingSpace -= rowGroup.length; - } - if (remainingSpace > 0) { - growSize = remainingSpace / measureSpec.autoRowsCount; - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup: ItemGroup = this.rows[i]; - if (rowGroup.getIsAuto()) { - rowGroup.length += growSize; - } - } - } - } - this.itemMeasured(measureSpec, false); + // Distribute height over auto rows + if (measureSpec.autoRowsCount > 0) { + remainingSpace = childMeasuredHeight; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = this.rows[i]; + remainingSpace -= rowGroup.length; + } + if (remainingSpace > 0) { + growSize = remainingSpace / measureSpec.autoRowsCount; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup: ItemGroup = this.rows[i]; + if (rowGroup.getIsAuto()) { + rowGroup.length += growSize; + } + } + } + } + this.itemMeasured(measureSpec, false); } private measureChildFixedRows(measureSpec: MeasureSpecs): void { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - let measureHeight = 0; - - const rows = this.rows; - for (let i = rowIndex; i < rowSpanEnd; i++) { - const rowGroup = rows[i]; - measureHeight += rowGroup.length; - } + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + let measureHeight = 0; + + const rows = this.rows; + for (let i = rowIndex; i < rowSpanEnd; i++) { + const rowGroup = rows[i]; + measureHeight += rowGroup.length; + } - const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); - const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, this.stretchedVertically ? layout.EXACTLY : layout.AT_MOST); + const widthMeasureSpec = measureSpec.autoColumnsCount > 0 ? this.infinity : layout.makeMeasureSpec(measureSpec.pixelWidth, layout.EXACTLY); + const heightMeasureSpec = layout.makeMeasureSpec(measureHeight, this.stretchedVertically ? layout.EXACTLY : layout.AT_MOST); - const child = measureSpec.child; - const childSize = View.measureChild(this.grid, child, widthMeasureSpec, heightMeasureSpec); - const childMeasuredWidth = childSize.measuredWidth; - const childMeasuredHeight = childSize.measuredHeight; + const child = measureSpec.child; + const childSize = View.measureChild(this.grid, child, widthMeasureSpec, heightMeasureSpec); + const childMeasuredWidth = childSize.measuredWidth; + const childMeasuredHeight = childSize.measuredHeight; - let remainingSpace = 0; - let growSize = 0; + let remainingSpace = 0; + let growSize = 0; - // Distribute width over auto columns - if (measureSpec.autoColumnsCount > 0) { - remainingSpace = childMeasuredWidth; + // Distribute width over auto columns + if (measureSpec.autoColumnsCount > 0) { + remainingSpace = childMeasuredWidth; - const columns = this.columns; - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup = columns[i]; - remainingSpace -= columnGroup.length; - } + const columns = this.columns; + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = columns[i]; + remainingSpace -= columnGroup.length; + } - if (remainingSpace > 0) { - growSize = remainingSpace / measureSpec.autoColumnsCount; + if (remainingSpace > 0) { + growSize = remainingSpace / measureSpec.autoColumnsCount; - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup = columns[i]; - if (columnGroup.getIsAuto()) { - columnGroup.length += growSize; - } - } - } - } + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = columns[i]; + if (columnGroup.getIsAuto()) { + columnGroup.length += growSize; + } + } + } + } - this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); - this.itemMeasured(measureSpec, false); + this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); + this.itemMeasured(measureSpec, false); } private measureChildFixedColumnsAndRows(measureSpec: MeasureSpecs): void { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - const rowIndex = measureSpec.getRowIndex(); - const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); - - let measureWidth = 0; - let measureHeight = 0; - - // Calculate total width and height - for (let i = columnIndex; i < columnSpanEnd; i++) { - measureWidth += this.columns[i].length; - } - for (let i = rowIndex; i < rowSpanEnd; i++) { - measureHeight += this.rows[i].length; - } - - // Determine width and height measure spec based on star columns/rows and stretching - const widthMeasureSpec = layout.makeMeasureSpec( - measureWidth, - measureSpec.starColumnsCount > 0 && !this.stretchedHorizontally ? layout.AT_MOST : layout.EXACTLY - ); - const heightMeasureSpec = layout.makeMeasureSpec( - measureHeight, - measureSpec.starRowsCount > 0 && !this.stretchedVertically ? layout.AT_MOST : layout.EXACTLY - ); + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + const rowIndex = measureSpec.getRowIndex(); + const rowSpanEnd = rowIndex + measureSpec.getRowSpan(); + + let measureWidth = 0; + let measureHeight = 0; + + // Calculate total width and height + for (let i = columnIndex; i < columnSpanEnd; i++) { + measureWidth += this.columns[i].length; + } + for (let i = rowIndex; i < rowSpanEnd; i++) { + measureHeight += this.rows[i].length; + } + + // Determine width and height measure spec based on star columns/rows and stretching + const widthMeasureSpec = layout.makeMeasureSpec( + measureWidth, + measureSpec.starColumnsCount > 0 && !this.stretchedHorizontally ? layout.AT_MOST : layout.EXACTLY + ); + const heightMeasureSpec = layout.makeMeasureSpec( + measureHeight, + measureSpec.starRowsCount > 0 && !this.stretchedVertically ? layout.AT_MOST : layout.EXACTLY + ); - // Measure the child view - const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); - const childMeasuredWidth = childSize.measuredWidth; - const childMeasuredHeight = childSize.measuredHeight; + // Measure the child view + const childSize = View.measureChild(this.grid, measureSpec.child, widthMeasureSpec, heightMeasureSpec); + const childMeasuredWidth = childSize.measuredWidth; + const childMeasuredHeight = childSize.measuredHeight; - // Update minimum column and row star values if needed - this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); - this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); + // Update minimum column and row star values if needed + this.updateMinColumnStarValueIfNeeded(measureSpec, childMeasuredWidth); + this.updateMinRowStarValueIfNeeded(measureSpec, childMeasuredHeight); - // Notify that the item has been measured - this.itemMeasured(measureSpec, false); + // Notify that the item has been measured + this.itemMeasured(measureSpec, false); } private updateMinRowStarValueIfNeeded(measureSpec: MeasureSpecs, childMeasuredHeight: number): void { @@ -976,25 +976,25 @@ class MeasureHelper { private updateMinColumnStarValueIfNeeded(measureSpec: MeasureSpecs, childMeasuredWidth: number): void { // When not stretched star columns are not fixed so we may grow them here // if there is an element that spans on multiple columns - if (!this.stretchedHorizontally && measureSpec.starColumnsCount > 0) { - const columnIndex = measureSpec.getColumnIndex(); - const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); + if (!this.stretchedHorizontally && measureSpec.starColumnsCount > 0) { + const columnIndex = measureSpec.getColumnIndex(); + const columnSpanEnd = columnIndex + measureSpec.getColumnSpan(); - let remainingSpace = childMeasuredWidth; - let minColumnStarValue = this.minColumnStarValue; + let remainingSpace = childMeasuredWidth; + let minColumnStarValue = this.minColumnStarValue; - for (let i = columnIndex; i < columnSpanEnd; i++) { - const columnGroup = this.columns[i]; - if (!columnGroup.getIsStar()) { - remainingSpace -= columnGroup.length; - } - } + for (let i = columnIndex; i < columnSpanEnd; i++) { + const columnGroup = this.columns[i]; + if (!columnGroup.getIsStar()) { + remainingSpace -= columnGroup.length; + } + } - if (remainingSpace > 0) { - minColumnStarValue = Math.max(remainingSpace / measureSpec.starColumnsCount, minColumnStarValue); - } + if (remainingSpace > 0) { + minColumnStarValue = Math.max(remainingSpace / measureSpec.starColumnsCount, minColumnStarValue); + } - this.minColumnStarValue = minColumnStarValue; - } + this.minColumnStarValue = minColumnStarValue; + } } }