Oct 28, 2024 · Oct 11, 2024 · Oct 9, 2024 · Oct 9, 2024 · Oct 10, 2024 · Oct 11, 2024
diff --git a/client/VERSION b/client/VERSION
 2.4.10
 2.4.11
diff --git a/client/package.json b/client/package.json
 {
  "name": "lowcoder-frontend",
  "version": "2.4.9",
  "version": "2.4.11",
  "type": "module",
  "private": true,
  "workspaces": [
diff --git a/client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts b/client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

 extend([namesPlugin]);

 export const gradientColors = [
  "linear-gradient(0deg, #fdfbfb 0%, #ebedee 100%)",
  "linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)",
  "linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)",

  "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
  "linear-gradient(0deg, #fbc2eb 0%, #a6c1ee 100%)",
  "linear-gradient(45deg, #efd5ff 0%, #515ada 100%)",
  "linear-gradient(90deg, #4b6cb7 0%, #72afd3 100%)",
  "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",

  "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
  "linear-gradient(45deg, #d53369 0%, #daae51 100%)",
  "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",

  "linear-gradient(135deg, #00d2ff 0%, #3a47d5 100%)",
  "linear-gradient(0deg, #f8ff00 0%, #3ad59f 100%)",
  "linear-gradient(45deg, #fcff9e 0%, #c67700 100%)",
  "linear-gradient(90deg, #fad0c4 0%, #ffd1ff 100%)",
 ];

 // Color Palette
 export const constantColors = [
 { id: 1, color:"#6D83F2" },
 { id: 2, color:"#5589F2" },
 { id: 3, color:"#36B389" },
 { id: 4, color:"#E68E50" },
 { id: 5, color:"#E67373" },
 { id: 6, color:"#F5FFF7" },
 { id: 7, color:"#F3FAFF" },
 { id: 8, color:"#FFF6E6" },
 { id: 9, color:"#F5F5F6" },
 { id: 10, color:"#FFFFFF" },
  "#6D83F2",
  "#5589F2",
  "#36B389",
  "#E68E50",
  "#E67373",
  "#F5FFF7",
  "#F3FAFF",
  "#FFF6E6",
  "#F5F5F6",
  "#FFFFFF",
 ];

 export const chartColorPalette = [
  return colord(rgba).alpha().toString();
 };

 const isValidColor = (str: string) => {
 const isValidGradient = (color?: string) => {
  if (!color) return false;

  const linearGradientRegex = /^linear-gradient\((\d+deg|to\s+(top|right|bottom|left)(\s+(top|right|bottom|left))?)\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;
  const radialGradientRegex = /^radial-gradient\(\s*(circle|ellipse)?\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;

  return linearGradientRegex.test(color) || radialGradientRegex.test(color);
 }

 const isValidColor = (str?: string) => {
  if (!str) return false;
  return colord(str).isValid();
 };

  return color.darken(intensity).toHex().toUpperCase();
 };

 export { toRGBA, toHex, alphaOfRgba, isValidColor };
 export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient };
diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
 import { RgbaStringColorPicker } from "react-colorful";
 import { default as Popover } from "antd/es/popover";
 import ColorPicker, {useColorPicker} from 'react-best-gradient-color-picker';
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import {
  alphaOfRgba,
  toRGBA,
  toHex,
  constantColors,
  isValidColor,
  isValidGradient,
  gradientColors,
 } from "components/colorSelect/colorUtils";
 import styled, { css } from "styled-components";
 import { useCallback, useRef, useState } from "react";
 import { useCallback, useRef, useState, useEffect, useMemo, } from "react";
 import { throttle } from "lodash";
 import { changeValueAction } from "lowcoder-core";

  trigger?: ActionType;
  dispatch?: (value: any) => void;
  changeColor?: (value: any) => void;
  presetColors?: string[];
  allowGradient?: boolean;
 }

 export const ColorSelect = (props: ColorSelectProps) => {
  const { color, trigger = "click", dispatch, changeColor } = props;
  let pickerColor = useRef(toRGBA(color));
  const [visible, setVisible] = useState(false);
  const [ selectedColor, setSelectedColor ] = useState(color);
  const { getGradientObject } = useColorPicker(selectedColor, setSelectedColor);

  const presetColors = useMemo(() => {
    let colors = props.presetColors || [];
    if (props.allowGradient) {
      colors = colors.concat(gradientColors.slice(0, 16 - colors.length));
    }
    return colors;
  }, [props.presetColors, selectedColor, props.allowGradient]);

  const throttleChange = useCallback(
    throttle((rgbaColor: string) => {
      dispatch && dispatch(changeValueAction(toHex(rgbaColor), true));
      changeColor && changeColor(toHex(rgbaColor));
      dispatch && dispatch(changeValueAction(rgbaColor, true));
      changeColor && changeColor(rgbaColor);
    }, 200),
    [dispatch,changeColor]
  );

  useEffect(() => {
    if (color !== selectedColor) {
      const value = getGradientObject();
      if (!value?.isGradient) {
        return throttleChange(toHex(selectedColor));
      }
      throttleChange(selectedColor);
    }
  }, [selectedColor])

  return (
    <Popover
      trigger={trigger}
      placement="left"
      destroyTooltipOnHide={true}
      onOpenChange={(value) => {
        pickerColor.current = toRGBA(color);
        setVisible(value);
      }}
      content={
        <PopoverContainer>
          <div style={{ position: "relative" }}>
            <RgbaStringColorPicker color={pickerColor.current} onChange={throttleChange} />
            <AlphaDiv color={color?.substring(0, 7)}>
              <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
            </AlphaDiv>
          </div>
          <ConstantDiv>
            {constantColors.map((item) => {
              return (
                <ConstantBlock
                  color={item.color}
                  key={item.id}
                  onClick={() => {
                    throttleChange(item.color);
                    pickerColor.current = toRGBA(item.color);
                  }}
                />
              );
            })}
          </ConstantDiv>
          <StyledColorPicker
            disableDarkMode
            value={color}
            onChange={setSelectedColor}
            width={250}
            height={160}
            presets={presetColors}
            $allowGradient={props.allowGradient}
          />
        </PopoverContainer>
      }
    >
      <ColorBlock $color={color?.substring(0, 7)}>
        <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
      <ColorBlock $color={color}>
      </ColorBlock>
    </Popover>
  );
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
 `;
 // contrast block
 const AlphaDiv = styled.div.attrs((props) => ({
 `;
 // main block
 const ColorBlock = styled.div<{ $color: string }>`
  background-color: ${(props) => (isValidColor(props.$color) ? props.$color : "#FFFFFF")};
  background: ${(props) => (
    isValidColor(props.$color) || isValidGradient(props.$color)
    ? props.$color
    : "#FFFFFF"
  )};
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  background-clip: content-box;
  overflow: hidden;
 `;

 const StyledColorPicker = styled(ColorPicker)<{$allowGradient?: boolean}>`
  #rbgcp-wrapper > div:nth-child(2) > div:first-child > div:first-child {
    ${props => !props.$allowGradient && `visibility: hidden`};
  }
  #rbgcp-wrapper > div:last-child > div:last-child {
    justify-content: flex-start !important;
    gap: 3px;

    > div {
      border: 1px solid lightgray;
    }
  }
 `;
diff --git a/client/packages/lowcoder-design/src/icons/index.tsx b/client/packages/lowcoder-design/src/icons/index.tsx
 export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
 export { ReactComponent as LeftHelpIcon } from "./v1/icon-left-help.svg";
 export { ReactComponent as LeftPreloadIcon } from "./v1/icon-left-preload.svg";
 export { ReactComponent as LeftColorPaletteIcon } from "./remix/palette-line.svg";
 export { ReactComponent as LeftJSSettingIcon } from "./remix/javascript-line.svg";


 export { ReactComponent as HomeSettingsIcon } from "./v1/icon-home-settings.svg";
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
    "qrcode.react": "^3.1.0",
    "rc-trigger": "^5.3.1",
    "react": "^18.2.0",
    "react-best-gradient-color-picker": "^3.0.10",
    "react-colorful": "^5.5.1",
    "react-documents": "^1.2.1",
    "react-dom": "^18.2.0",
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
  chart?: string;
  margin?: string;
  padding?: string;
  gridColumns?: string; //Added By Aqib Mirza
  gridPaddingX?: number;
  gridPaddingY?: number;
  gridColumns?: string;
  gridRowHeight?: string;
  gridRowCount?: number;
  gridBgImage?: string;
  gridBgImageRepeat?: string;
  gridBgImageSize?: string;
  gridBgImagePosition?: string;
  gridBgImageOrigin?: string;
  text?: string;
  textSize?: string;
  fontFamily?: string;
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"name": "lowcoder-frontend",
		"version": "2.4.9",
		"version": "2.4.11",
		"type": "module",
		"private": true,
		"workspaces": [
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,18 +4,39 @@ import { generate } from "@ant-design/colors/es";

		extend([namesPlugin]);

		export const gradientColors = [
		"linear-gradient(0deg, #fdfbfb 0%, #ebedee 100%)",
		"linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)",
		"linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)",

		"linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
		"linear-gradient(0deg, #fbc2eb 0%, #a6c1ee 100%)",
		"linear-gradient(45deg, #efd5ff 0%, #515ada 100%)",
		"linear-gradient(90deg, #4b6cb7 0%, #72afd3 100%)",
		"linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",

		"linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
		"linear-gradient(45deg, #d53369 0%, #daae51 100%)",
		"linear-gradient(0deg, #f43b47 0%, #453a94 100%)",

		"linear-gradient(135deg, #00d2ff 0%, #3a47d5 100%)",
		"linear-gradient(0deg, #f8ff00 0%, #3ad59f 100%)",
		"linear-gradient(45deg, #fcff9e 0%, #c67700 100%)",
		"linear-gradient(90deg, #fad0c4 0%, #ffd1ff 100%)",
		];

		// Color Palette
		export const constantColors = [
		{ id: 1, color:"#6D83F2" },
		{ id: 2, color:"#5589F2" },
		{ id: 3, color:"#36B389" },
		{ id: 4, color:"#E68E50" },
		{ id: 5, color:"#E67373" },
		{ id: 6, color:"#F5FFF7" },
		{ id: 7, color:"#F3FAFF" },
		{ id: 8, color:"#FFF6E6" },
		{ id: 9, color:"#F5F5F6" },
		{ id: 10, color:"#FFFFFF" },
		"#6D83F2",
		"#5589F2",
		"#36B389",
		"#E68E50",
		"#E67373",
		"#F5FFF7",
		"#F3FAFF",
		"#FFF6E6",
		"#F5F5F6",
		"#FFFFFF",
		];

		export const chartColorPalette = [
Expand All		@@ -40,7 +61,17 @@ const alphaOfRgba = (rgba: string) => {
		return colord(rgba).alpha().toString();
		};

		const isValidColor = (str: string) => {
		const isValidGradient = (color?: string) => {
		if (!color) return false;

		const linearGradientRegex = /^linear-gradient\((\d+deg\|to\s+(top\|right\|bottom\|left)(\s+(top\|right\|bottom\|left))?)\s,\s((#[0-9a-fA-F]{3,6}\|rgba?\(\d+,\s\d+,\s\d+(,\s\d+(\.\d+)?)?\)\|[a-zA-Z]+)(\s+\d+%?)?,?\s)+\)$/i;
		const radialGradientRegex = /^radial-gradient\(\s(circle\|ellipse)?\s,\s((#[0-9a-fA-F]{3,6}\|rgba?\(\d+,\s\d+,\s\d+(,\s\d+(\.\d+)?)?\)\|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;

		return linearGradientRegex.test(color) \|\| radialGradientRegex.test(color);
		}

		const isValidColor = (str?: string) => {
		if (!str) return false;
		return colord(str).isValid();
		};

Expand DownExpand Up		@@ -91,4 +122,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
		return color.darken(intensity).toHex().toUpperCase();
		};

		export { toRGBA, toHex, alphaOfRgba, isValidColor };
		export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient };
Original file line number	Diff line number	Diff line change
		@@ -1,15 +1,17 @@
		import { RgbaStringColorPicker } from "react-colorful";
		import { default as Popover } from "antd/es/popover";
		import ColorPicker, {useColorPicker} from 'react-best-gradient-color-picker';
		import { ActionType } from '@rc-component/trigger/lib/interface';
		import {
		alphaOfRgba,
		toRGBA,
		toHex,
		constantColors,
		isValidColor,
		isValidGradient,
		gradientColors,
		} from "components/colorSelect/colorUtils";
		import styled, { css } from "styled-components";
		import { useCallback, useRef, useState } from "react";
		import { useCallback, useRef, useState, useEffect, useMemo, } from "react";
		import { throttle } from "lodash";
		import { changeValueAction } from "lowcoder-core";

Expand All		@@ -18,54 +20,65 @@ interface ColorSelectProps {
		trigger?: ActionType;
		dispatch?: (value: any) => void;
		changeColor?: (value: any) => void;
		presetColors?: string[];
		allowGradient?: boolean;
		}

		export const ColorSelect = (props: ColorSelectProps) => {
		const { color, trigger = "click", dispatch, changeColor } = props;
		let pickerColor = useRef(toRGBA(color));
		const [visible, setVisible] = useState(false);
		const [ selectedColor, setSelectedColor ] = useState(color);
		const { getGradientObject } = useColorPicker(selectedColor, setSelectedColor);

		const presetColors = useMemo(() => {
		let colors = props.presetColors \|\| [];
		if (props.allowGradient) {
		colors = colors.concat(gradientColors.slice(0, 16 - colors.length));
		}
		return colors;
		}, [props.presetColors, selectedColor, props.allowGradient]);

		const throttleChange = useCallback(
		throttle((rgbaColor: string) => {
		dispatch && dispatch(changeValueAction(toHex(rgbaColor), true));
		changeColor && changeColor(toHex(rgbaColor));
		dispatch && dispatch(changeValueAction(rgbaColor, true));
		changeColor && changeColor(rgbaColor);
		}, 200),
		[dispatch,changeColor]
		);

		useEffect(() => {
		if (color !== selectedColor) {
		const value = getGradientObject();
		if (!value?.isGradient) {
		return throttleChange(toHex(selectedColor));
		}
		throttleChange(selectedColor);
		}
		}, [selectedColor])

		return (
		<Popover
		trigger={trigger}
		placement="left"
		destroyTooltipOnHide={true}
		onOpenChange={(value) => {
		pickerColor.current = toRGBA(color);
		setVisible(value);
		}}
		content={
		<PopoverContainer>
		<div style={{ position: "relative" }}>
		<RgbaStringColorPicker color={pickerColor.current} onChange={throttleChange} />
		<AlphaDiv color={color?.substring(0, 7)}>
		<BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
		</AlphaDiv>
		</div>
		<ConstantDiv>
		{constantColors.map((item) => {
		return (
		<ConstantBlock
		color={item.color}
		key={item.id}
		onClick={() => {
		throttleChange(item.color);
		pickerColor.current = toRGBA(item.color);
		}}
		/>
		);
		})}
		</ConstantDiv>
		<StyledColorPicker
		disableDarkMode
		value={color}
		onChange={setSelectedColor}
		width={250}
		height={160}
		presets={presetColors}
		$allowGradient={props.allowGradient}
		/>
		</PopoverContainer>
		}
		>
		<ColorBlock $color={color?.substring(0, 7)}>
		<BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
		<ColorBlock $color={color}>
		</ColorBlock>
		</Popover>
		);
Expand DownExpand Up		@@ -139,7 +152,6 @@ const PopoverContainer = styled.div`
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
		`;
		// contrast block
		const AlphaDiv = styled.div.attrs((props) => ({
Expand DownExpand Up		@@ -169,12 +181,30 @@ const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string })
		`;
		// main block
		const ColorBlock = styled.div<{ $color: string }>`
		background-color: ${(props) => (isValidColor(props.$color) ? props.$color : "#FFFFFF")};
		background: ${(props) => (
		isValidColor(props.$color) \|\| isValidGradient(props.$color)
		? props.$color
		: "#FFFFFF"
		)};
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		height: 24px;
		width: 24px;
		cursor: pointer;
		background-clip: content-box;
		overflow: hidden;
		`;

		const StyledColorPicker = styled(ColorPicker)<{$allowGradient?: boolean}>`
		#rbgcp-wrapper > div:nth-child(2) > div:first-child > div:first-child {
		${props => !props.$allowGradient && `visibility: hidden`};
		}
		#rbgcp-wrapper > div:last-child > div:last-child {
		justify-content: flex-start !important;
		gap: 3px;

		> div {
		border: 1px solid lightgray;
		}
		}
		`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -172,6 +172,8 @@ export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
		export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
		export { ReactComponent as LeftHelpIcon } from "./v1/icon-left-help.svg";
		export { ReactComponent as LeftPreloadIcon } from "./v1/icon-left-preload.svg";
		export { ReactComponent as LeftColorPaletteIcon } from "./remix/palette-line.svg";
		export { ReactComponent as LeftJSSettingIcon } from "./remix/javascript-line.svg";


		export { ReactComponent as HomeSettingsIcon } from "./v1/icon-home-settings.svg";
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,6 +64,7 @@
		"qrcode.react": "^3.1.0",
		"rc-trigger": "^5.3.1",
		"react": "^18.2.0",
		"react-best-gradient-color-picker": "^3.0.10",
		"react-colorful": "^5.5.1",
		"react-documents": "^1.2.1",
		"react-dom": "^18.2.0",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,7 +53,16 @@ export interface ThemeDetail {
		chart?: string;
		margin?: string;
		padding?: string;
		gridColumns?: string; //Added By Aqib Mirza
		gridPaddingX?: number;
		gridPaddingY?: number;
		gridColumns?: string;
		gridRowHeight?: string;
		gridRowCount?: number;
		gridBgImage?: string;
		gridBgImageRepeat?: string;
		gridBgImageSize?: string;
		gridBgImagePosition?: string;
		gridBgImageOrigin?: string;
		text?: string;
		textSize?: string;
		fontFamily?: string;
Expand Down