From a99e7bb8d9c5624e53db1273283233e5e86bca9f Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Mon, 10 Jun 2024 14:45:58 +0500 Subject: [PATCH 1/3] update comp height calculation on auto/fixed height --- client/packages/lowcoder/src/layout/gridItem.tsx | 2 +- client/packages/lowcoder/src/layout/utils.ts | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx index 8c22d2e53..ef380a877 100644 --- a/client/packages/lowcoder/src/layout/gridItem.tsx +++ b/client/packages/lowcoder/src/layout/gridItem.tsx @@ -441,7 +441,7 @@ export function GridItem(props: GridItemProps) { cssTransforms: true, }), style: { - ...setTransform(pos,props.name), + ...setTransform(pos, props.name, props.autoHeight), opacity: layoutHide ? 0 : undefined, pointerEvents: layoutHide ? "none" : "auto", }, diff --git a/client/packages/lowcoder/src/layout/utils.ts b/client/packages/lowcoder/src/layout/utils.ts index b8b200920..7db5cb0bb 100644 --- a/client/packages/lowcoder/src/layout/utils.ts +++ b/client/packages/lowcoder/src/layout/utils.ts @@ -199,12 +199,21 @@ export function getStatics(layout: Layout): Layout { return _.pickBy(layout, (l) => l.static); } -export function setTransform({ top, left, width, height }: Position,name?:string): Record { +export function setTransform( + {top, left, width, height }: Position, + name ?: string, + autoHeight?: boolean, +): Record { // Replace unitless items with px const translate = `translate(${left}px,${top}px)`; function containsChart(str:string) { return /chart/i.test(str); } + + let updatedHeight = 'auto'; + if (!autoHeight || (name && containsChart(name))) { + updatedHeight = `${height}px`; + } return { transform: translate, @@ -213,7 +222,7 @@ export function setTransform({ top, left, width, height }: Position,name?:string msTransform: translate, OTransform: translate, width: `${width}px`, - height: name ?containsChart(name)?`${height}px`:'auto':`${height}px`, + height: updatedHeight, position: 'absolute', }; } From 892fe077bd6ae591612e6d15b55a570e9e7bb604 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Mon, 10 Jun 2024 21:19:52 +0500 Subject: [PATCH 2/3] fix column layout comp's layout issues --- .../comps/comps/columnLayout/columnLayout.tsx | 53 +++++++++++++------ 1 file changed, 36 insertions(+), 17 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx index 7aaff303e..2302d31e5 100644 --- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx @@ -42,8 +42,20 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt import { DisabledContext } from "comps/generators/uiCompBuilder"; const ContainWrapper = styled.div<{ - $style: ContainerStyleType | undefined; + $style: ContainerStyleType & { + display: string, + gridTemplateColumns: string, + columnGap: string, + gridTemplateRows: string, + rowGap: string, + } | undefined; }>` + display: ${(props) => props.$style?.display}; + grid-template-columns: ${(props) => props.$style?.gridTemplateColumns}; + grid-template-rows: ${(props) => props.$style?.gridTemplateRows}; + column-gap: ${(props) => props.$style?.columnGap}; + row-gap: ${(props) => props.$style?.rowGap}; + background-color: ${(props) => props.$style?.background} !important; border-radius: ${(props) => props.$style?.radius}; border-width: ${(props) => props.$style?.borderWidth}; @@ -59,7 +71,7 @@ const ColWrapper = styled(Col)<{ $matchColumnsHeight: boolean, }>` > div { - height: ${(props) => props.$matchColumnsHeight ? '100%' : 'auto'}; + height: ${(props) => props.$matchColumnsHeight ? `calc(100% - ${props.$style?.padding || 0} - ${props.$style?.padding || 0})` : 'auto'}; background-color: ${(props) => props.$style?.background} !important; border-radius: ${(props) => props.$style?.radius}; border-width: ${(props) => props.$style?.borderWidth}; @@ -121,17 +133,24 @@ const ColumnLayout = (props: ColumnLayoutProps) => { } = props; return ( - + - -
- {columns.map(column => { - const id = String(column.id); - const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); - if(!containers[id]) return null - const containerProps = containers[id].children; - const noOfColumns = columns.length; - return ( + + {columns.map(column => { + const id = String(column.id); + const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); + if(!containers[id]) return null + const containerProps = containers[id].children; + const noOfColumns = columns.length; + return ( + { style={columnStyle} /> - ) - }) - } -
+ + ) + }) + } - + ); }; From 080c631735f6d07cf81044df8ae7e907758efc55 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 11 Jun 2024 11:42:02 +0500 Subject: [PATCH 3/3] maintain comp height on dragging --- client/packages/lowcoder/src/layout/gridItem.tsx | 7 ++++++- client/packages/lowcoder/src/layout/utils.ts | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx index ef380a877..42b278820 100644 --- a/client/packages/lowcoder/src/layout/gridItem.tsx +++ b/client/packages/lowcoder/src/layout/gridItem.tsx @@ -441,7 +441,12 @@ export function GridItem(props: GridItemProps) { cssTransforms: true, }), style: { - ...setTransform(pos, props.name, props.autoHeight), + ...setTransform( + pos, + props.name, + props.autoHeight, + Boolean(draggingUtils.isDragging()) + ), opacity: layoutHide ? 0 : undefined, pointerEvents: layoutHide ? "none" : "auto", }, diff --git a/client/packages/lowcoder/src/layout/utils.ts b/client/packages/lowcoder/src/layout/utils.ts index 7db5cb0bb..97fb38855 100644 --- a/client/packages/lowcoder/src/layout/utils.ts +++ b/client/packages/lowcoder/src/layout/utils.ts @@ -203,15 +203,15 @@ export function setTransform( {top, left, width, height }: Position, name ?: string, autoHeight?: boolean, + isDragging?: boolean, ): Record { // Replace unitless items with px const translate = `translate(${left}px,${top}px)`; function containsChart(str:string) { return /chart/i.test(str); } - let updatedHeight = 'auto'; - if (!autoHeight || (name && containsChart(name))) { + if (isDragging || !autoHeight || (name && containsChart(name))) { updatedHeight = `${height}px`; }