Skip to content

Commit 557407f

Browse files
raheeliftikhar5raheeliftikhar5
committed
fixed canvas settings
1 parent f560a9a commit 557407f

File tree

3 files changed

+37
-8
lines changed

3 files changed

+37
-8
lines changed

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

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ const EmptySet = new Set<string>();
9292

9393
export const CanvasView = React.memo((props: ContainerBaseProps) => {
9494
const currentTheme = useContext(ThemeContext)?.theme;
95+
const isDefaultTheme = useContext(ThemeContext)?.themeId === 'default-theme-id';
96+
const isPreviewTheme = useContext(ThemeContext)?.themeId === 'preview-theme';
9597
const editorState = useContext(EditorContext);
9698
const [dragSelectedComps, setDragSelectedComp] = useState(EmptySet);
9799
const scrollContainerRef = useRef(null);
@@ -124,6 +126,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
124126

125127
const bgColor = useMemo(
126128
() => {
129+
if (isPreviewTheme) return currentTheme?.canvas ?? defaultTheme.canvas;
130+
127131
const themeGridBgColor = preventStylesOverwriting ? undefined : currentTheme?.canvas;
128132
return themeGridBgColor || appSettings.gridBg || defaultTheme.canvas;
129133
},
@@ -132,6 +136,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
132136

133137
const bgImage = useMemo(
134138
() => {
139+
if (isPreviewTheme) return currentTheme?.gridBgImage;
140+
135141
const themeGridBgImage = preventStylesOverwriting ? undefined : currentTheme?.gridBgImage;
136142
return themeGridBgImage || appSettings.gridBgImage;
137143
},
@@ -140,34 +146,44 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
140146

141147
const bgImageRepeat = useMemo(
142148
() => {
149+
if (isPreviewTheme) return currentTheme?.gridBgImageRepeat ?? defaultTheme.gridBgImageRepeat;
150+
143151
const themeGridBgImageRepeat = preventStylesOverwriting ? undefined : currentTheme?.gridBgImageRepeat;
144152
return themeGridBgImageRepeat || appSettings.gridBgImageRepeat || defaultTheme?.gridBgImageRepeat;
145153
},
146154
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
147155
);
148156
const bgImageSize = useMemo(
149157
() => {
158+
if (isPreviewTheme) return currentTheme?.gridBgImageSize ?? defaultTheme.gridBgImageSize;
159+
150160
const themeGridBgImageSize = preventStylesOverwriting ? undefined : currentTheme?.gridBgImageSize;
151161
return themeGridBgImageSize || appSettings.gridBgImageSize || defaultTheme?.gridBgImageSize;
152162
},
153163
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
154164
);
155165
const bgImagePosition = useMemo(
156166
() => {
167+
if (isPreviewTheme) return currentTheme?.gridBgImagePosition ?? defaultTheme.gridBgImagePosition;
168+
157169
const themeGridBgImagePosition = preventStylesOverwriting ? undefined : currentTheme?.gridBgImagePosition;
158170
return themeGridBgImagePosition || appSettings.gridBgImagePosition || defaultTheme?.gridBgImagePosition;
159171
},
160172
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
161173
);
162174
const bgImageOrigin = useMemo(
163175
() => {
176+
if (isPreviewTheme) return currentTheme?.gridBgImageOrigin ?? defaultTheme.gridBgImageOrigin;
177+
164178
const themeGridBgImageOrigin = preventStylesOverwriting ? undefined : currentTheme?.gridBgImageOrigin;
165179
return themeGridBgImageOrigin || appSettings.gridBgImageOrigin || defaultTheme?.gridBgImageOrigin;
166180
},
167181
[preventStylesOverwriting, appSettings, currentTheme, defaultTheme],
168182
);
169183

170184
const defaultGrid = useMemo(() => {
185+
if (isPreviewTheme) return currentTheme?.gridColumns ?? defaultTheme.gridColumns ?? String(DEFAULT_GRID_COLUMNS);
186+
171187
const themeGridColumns = preventStylesOverwriting ? undefined : currentTheme?.gridColumns;
172188
return themeGridColumns
173189
|| String(appSettings?.gridColumns)
@@ -176,6 +192,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
176192
}, [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]);
177193

178194
const defaultRowHeight = useMemo(() => {
195+
if (isPreviewTheme) return currentTheme?.gridRowHeight ?? defaultTheme.gridRowHeight ?? String(DEFAULT_ROW_HEIGHT);
196+
179197
const themeGridRowHeight = preventStylesOverwriting ? undefined : currentTheme?.gridRowHeight;
180198
return themeGridRowHeight
181199
|| String(appSettings?.gridRowHeight)
@@ -184,6 +202,8 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
184202
}, [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]);
185203

186204
const defaultRowCount = useMemo(() => {
205+
if (isPreviewTheme) return currentTheme?.gridRowCount ?? defaultTheme.gridRowCount;
206+
187207
const themeGridRowCount = preventStylesOverwriting ? undefined : currentTheme?.gridRowCount;
188208
return themeGridRowCount
189209
|| appSettings?.gridRowCount
@@ -192,13 +212,20 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
192212
}, [preventStylesOverwriting, appSettings, currentTheme, defaultTheme]);
193213

194214
const defaultContainerPadding: [number, number] = useMemo(() => {
195-
if (isMobile) return DEFAULT_MOBILE_PADDING;
215+
const DEFAULT_PADDING = isMobile ? DEFAULT_MOBILE_PADDING : DEFAULT_CONTAINER_PADDING;
216+
217+
if (isPreviewTheme) {
218+
return [
219+
currentTheme?.gridPaddingX ?? defaultTheme.gridPaddingX ?? DEFAULT_PADDING[0],
220+
currentTheme?.gridPaddingY ?? defaultTheme.gridPaddingY ?? DEFAULT_PADDING[1],
221+
];
222+
}
196223

197-
const themeGridPaddingX = preventStylesOverwriting ? undefined : currentTheme?.gridPaddingX;
198-
const themeGridPaddingY = preventStylesOverwriting ? undefined : currentTheme?.gridPaddingY;
224+
const themeGridPaddingX = preventStylesOverwriting || isDefaultTheme ? undefined : currentTheme?.gridPaddingX;
225+
const themeGridPaddingY = preventStylesOverwriting || isDefaultTheme ? undefined : currentTheme?.gridPaddingY;
199226

200-
let paddingX = themeGridPaddingX || appSettings?.gridPaddingX || defaultTheme?.gridPaddingX || DEFAULT_CONTAINER_PADDING[0];
201-
let paddingY = themeGridPaddingY || appSettings?.gridPaddingY || defaultTheme?.gridPaddingY || DEFAULT_CONTAINER_PADDING[1];
227+
let paddingX = themeGridPaddingX ?? appSettings?.gridPaddingX ?? defaultTheme?.gridPaddingX ?? DEFAULT_PADDING[0];
228+
let paddingY = themeGridPaddingY ?? appSettings?.gridPaddingY ?? defaultTheme?.gridPaddingY ?? DEFAULT_PADDING[1];
202229

203230
return [paddingX, paddingY];
204231
}, [preventStylesOverwriting, appSettings, isMobile, currentTheme, defaultTheme]);

‎client/packages/lowcoder/src/layout/compSelectionWrapper.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,10 @@ function getLineStyle(
8989

9090
return `
9191
border: ${GRID_ITEM_BORDER_WIDTH}px ${borderStyle} ${borderColor};
92-
padding: ${isHidden || !isSelected ? 0 : padding[1] - GRID_ITEM_BORDER_WIDTH}px;
93-
padding-left: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
94-
padding-right: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
92+
padding: 0px;
93+
// padding: ${isHidden || !isSelected ? 0 : padding[1] - GRID_ITEM_BORDER_WIDTH}px;
94+
// padding-left: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
95+
// padding-right: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
9596
`;
9697
}
9798

‎client/packages/lowcoder/src/pages/setting/theme/detail/previewDsl.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -677,6 +677,7 @@ const dsl = {
677677
settings: {
678678
maxWidth: { dropdown: "3200", input: "3200" },
679679
themeId: "",
680+
preventStylesOverwriting: false,
680681
},
681682
preload: { libs: [], script: "", css: "" },
682683
};

0 commit comments

Comments
 (0)