Add fill height mode for fixed-row canvas

Author: kungurovsergey

client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

@@ -221,6 +221,7 @@ const childrenMap = {
   gridRowCount: withDefault(NumberControl, DEFAULT_ROW_COUNT),
   gridPaddingX: withDefault(NumberControl, 0),
   gridPaddingY: withDefault(NumberControl, 0),
+  gridStretchHeight: withDefault(BoolControl, false),
   gridBg: ColorControl,
   gridBgImage: StringControl,
   gridBgImageRepeat: StringControl,
@@ -355,6 +356,7 @@ function AppCanvasSettingsModal(props: ChildrenInstance) {
     gridColumns,
     gridRowHeight,
     gridRowCount,
+    gridStretchHeight,
     gridPaddingX,
     gridPaddingY,
     gridBg,
@@ -478,6 +480,9 @@ function AppCanvasSettingsModal(props: ChildrenInstance) {
             label: trans("appSetting.gridRowCount"),
             placeholder: 'Infinity',
           })}
+          {gridRowCount.getView() !== DEFAULT_ROW_COUNT && gridStretchHeight.propertyView({
+            label: "Stretch canvas to available height",
+          })}
           {gridPaddingX.propertyView({
             label: trans("appSetting.gridPaddingX"),
             placeholder: '0',

client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.test.ts

@@ -0,0 +1,19 @@
+import { DEFAULT_ROW_COUNT } from "@lowcoder-ee/layout/calculateUtils";
+import {
+  shouldShowStretchCanvasHeight,
+  shouldStretchCanvasHeight,
+} from "./canvasView";
+
+describe("canvas stretch height helpers", () => {
+  it("shows stretch only for fixed row count", () => {
+    expect(shouldShowStretchCanvasHeight(DEFAULT_ROW_COUNT)).toBe(false);
+    expect(shouldShowStretchCanvasHeight(24)).toBe(true);
+  });
+
+  it("enables stretch only in runtime for fixed row count", () => {
+    expect(shouldStretchCanvasHeight(DEFAULT_ROW_COUNT, true, true)).toBe(false);
+    expect(shouldStretchCanvasHeight(24, false, true)).toBe(false);
+    expect(shouldStretchCanvasHeight(24, true, false)).toBe(false);
+    expect(shouldStretchCanvasHeight(24, true, true)).toBe(true);
+  });
+});

client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

@@ -27,6 +27,7 @@ import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 const UICompContainer = styled.div<{
   $maxWidth?: number;
   $rowCount?: number;
+  $fillHeight?: boolean;
   readOnly?: boolean;
   $bgColor: string;
   $bgImage?: string;
@@ -35,8 +36,8 @@ const UICompContainer = styled.div<{
   $bgImageOrigin?: string;
   $bgImagePosition?: string;
 }>`
-  height: auto;
-  min-height: ${props => props.$rowCount === Infinity ? '100%' : 'auto'};
+  height: ${props => props.$fillHeight ? '100%' : 'auto'};
+  min-height: ${props => props.$fillHeight ? '0' : props.$rowCount === Infinity ? '100%' : 'auto'};
   margin: 0 auto;
   max-width: ${(props) => props.$maxWidth || 1600}px;
   
@@ -68,6 +69,18 @@ const gridLayoutCanvasProps = {
   isCanvas: true,
 };
 
+export function shouldShowStretchCanvasHeight(rowCount: number) {
+  return rowCount !== DEFAULT_ROW_COUNT;
+}
+
+export function shouldStretchCanvasHeight(
+  rowCount: number,
+  readOnly: boolean,
+  gridStretchHeight?: boolean
+) {
+  return readOnly && Boolean(gridStretchHeight) && rowCount !== DEFAULT_ROW_COUNT;
+}
+
 function getDragSelectedNames(
   items: GridItemsType,
   layout: GridLayoutType,
@@ -176,7 +189,7 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
 
   const externalState = useContext(ExternalEditorContext);
   const {
-    readOnly,
+    readOnly = false,
     appType,
     rootContainerExtraHeight = DEFAULT_EXTRA_HEIGHT,
     rootContainerPadding,
@@ -271,6 +284,10 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
       || defaultTheme?.gridRowCount
       || DEFAULT_ROW_COUNT;
   }, [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]);
+  const isStretchCanvasHeight = useMemo(
+    () => shouldStretchCanvasHeight(defaultRowCount ?? DEFAULT_ROW_COUNT, readOnly, (appSettings as any).gridStretchHeight),
+    [appSettings, defaultRowCount, readOnly]
+  );
 
   const defaultContainerPadding: [number, number] = useMemo(() => {
     const DEFAULT_PADDING = isMobile ? DEFAULT_MOBILE_PADDING : DEFAULT_CONTAINER_PADDING;
@@ -305,10 +322,11 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
 
   if (readOnly) {
     return (
-      <UICompContainer
-        $maxWidth={maxWidth}
-        $rowCount={defaultRowCount}
-        readOnly={true}
+        <UICompContainer
+          $maxWidth={maxWidth}
+          $rowCount={defaultRowCount}
+          $fillHeight={isStretchCanvasHeight}
+          readOnly={true}
         className={CNRootContainer}
         $bgColor={bgColor}
         $bgImage={bgImage}
@@ -324,6 +342,9 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
             {...props}
             positionParams={positionParams}
             {...gridLayoutCanvasProps}
+            autoHeight={!isStretchCanvasHeight}
+            rowCount={defaultRowCount}
+            isRowCountLocked={isStretchCanvasHeight}
             bgColor={bgColor}
             radius="0px"
             emptyRows={defaultRowCount}
@@ -341,6 +362,7 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
         <UICompContainer
           $maxWidth={maxWidth}
           $rowCount={defaultRowCount}
+          $fillHeight={isStretchCanvasHeight}
           className={CNRootContainer}
           $bgColor={bgColor}
           $bgImage={bgImage}
@@ -360,6 +382,9 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
                 overflow={rootContainerOverflow}
                 {...props}
                 {...gridLayoutCanvasProps}
+                autoHeight={!isStretchCanvasHeight}
+                rowCount={defaultRowCount}
+                isRowCountLocked={isStretchCanvasHeight}
                 dragSelectedComps={dragSelectedComps}
                 scrollContainerRef={scrollContainerRef}
                 isDroppable={!isModule}

client/packages/lowcoder/src/pages/editor/editorView.tsx

@@ -116,6 +116,9 @@ const Height100Div = lazy(
   () => import('pages/common/styledComponent')
     .then(module => ({default: module.Height100Div}))
 );
+const PreviewContainer = styled.div`
+  height: 100%;
+`;
 const LeftPanel = lazy(
   () => import('pages/common/styledComponent')
     .then(module => ({default: module.LeftPanel}))
@@ -539,14 +542,14 @@ function EditorView(props: EditorViewProps) {
             deviceType={editorState.deviceType}
             deviceOrientation={editorState.deviceOrientation}
           >
-            <div id={PreviewContainerID}>
+            <PreviewContainer id={PreviewContainerID}>
               {uiComp.getView()}
-            </div>
+            </PreviewContainer>
         </DeviceWrapper>
       ) : (
-        <div id={PreviewContainerID}>
+        <PreviewContainer id={PreviewContainerID}>
           {uiComp.getView()}
-        </div>
+        </PreviewContainer>
       )
     )
   }, [
@@ -794,4 +797,3 @@ function EditorView(props: EditorViewProps) {
 export default React.memo(EditorView, (prevProps, newProps) => {
   return isEqual(prevProps, newProps);
 });
-