Adding Shapes Component

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -23,7 +23,7 @@ export const en = {
     advanced: "Advanced",
     validation: "Validation",
     layout: "Layout",
-    labelStyle:"Label Style",
+    labelStyle: "Label Style",
     style: "Style",
     meetings: "Meeting Settings",
     data: "Data",
@@ -54,6 +54,10 @@ export const en = {
     title: "Select icon",
     searchPlaceholder: "Search icon",
   },
+  shapeSelect: {
+    title: "Select shape",
+    searchPlaceholder: "Search shape",
+  },
   eventHandler: {
     advanced: "Advanced",
   },

client/packages/lowcoder-design/src/index.ts

@@ -47,6 +47,7 @@ export * from "./components/tacoInput";
 export * from "./components/tacoPagination";
 export * from "./components/toolTip";
 export * from "./components/video";
+export * from "./components/shapeSelect";
 
 export * from "./icons";
 

client/packages/lowcoder/package.json

@@ -41,6 +41,7 @@
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",
     "cnchar": "^3.2.4",
+    "coolshapes-react": "lowcoder-org/coolshapes-react",
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.25.2",
     "echarts": "^5.4.3",
@@ -129,4 +130,4 @@
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.6.0"
   }
-}
+}

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

@@ -0,0 +1,159 @@
+import { CompParams } from "lowcoder-core";
+import { ToDataType } from "comps/generators/multi";
+import {
+  NameConfigHidden,
+  withExposingConfigs,
+} from "comps/generators/withExposing";
+import { NameGenerator } from "comps/utils/nameGenerator";
+import { Section, sectionNames } from "lowcoder-design";
+import { oldContainerParamsToNew } from "../containerBase";
+import { toSimpleContainerData } from "../containerBase/simpleContainerComp";
+import { ShapeTriContainer } from "./shapeTriContainer";
+import { ShapeControl } from "comps/controls/shapeControl";
+import { withDefault } from "../../generators";
+import {
+  ContainerChildren,
+  ContainerCompBuilder,
+} from "../triContainerComp/triContainerCompBuilder";
+import {
+  disabledPropertyView,
+  hiddenPropertyView,
+} from "comps/utils/propertyUtils";
+import { trans } from "i18n";
+import { BoolCodeControl } from "comps/controls/codeControl";
+import { DisabledContext } from "comps/generators/uiCompBuilder";
+import React, { useContext, useEffect, useState } from "react";
+import { EditorContext } from "comps/editorState";
+
+export const ContainerBaseComp = (function () {
+  const childrenMap = {
+    disabled: BoolCodeControl,
+    icon: withDefault(ShapeControl, ""),
+  };
+  return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
+
+
+    return (
+      <DisabledContext.Provider value={props.disabled}>
+        <ShapeTriContainer {...props} />
+      </DisabledContext.Provider>
+    );
+  })
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          <Section name={sectionNames.basic}>
+            {children.icon.propertyView({
+              label: trans("iconComp.icon"),
+              IconType: "All",
+            })}
+          </Section>
+          {(useContext(EditorContext).editorModeStatus === "logic" ||
+            useContext(EditorContext).editorModeStatus === "both") && (
+            <Section name={sectionNames.interaction}>
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
+
+          {(useContext(EditorContext).editorModeStatus === "layout" ||
+            useContext(EditorContext).editorModeStatus === "both") && (
+            <>
+              <Section name={sectionNames.layout}>
+                {children.container.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.style}>
+                {children.container.stylePropertyView()}
+              </Section>
+              {children.container.children.showHeader.getView() && (
+                <Section name={"Header Style"}>
+                  {children.container.headerStylePropertyView()}
+                </Section>
+              )}
+              {children.container.children.showBody.getView() && (
+                <Section name={"Body Style"}>
+                  {children.container.bodyStylePropertyView()}
+                </Section>
+              )}
+              {children.container.children.showFooter.getView() && (
+                <Section name={"Footer Style"}>
+                  {children.container.footerStylePropertyView()}
+                </Section>
+              )}
+            </>
+          )}
+        </>
+      );
+    })
+    .build();
+})();
+
+// Compatible with old data
+function convertOldContainerParams(params: CompParams<any>) {
+  // convert older params to old params
+  let tempParams = oldContainerParamsToNew(params);
+
+  if (tempParams.value) {
+    const container = tempParams.value.container;
+    // old params
+    if (
+      container &&
+      (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))
+    ) {
+      const autoHeight = tempParams.value.autoHeight;
+      const scrollbars = tempParams.value.scrollbars;
+      return {
+        ...tempParams,
+        value: {
+          container: {
+            showHeader: true,
+            body: { 0: { view: container } },
+            showBody: true,
+            showFooter: false,
+            autoHeight: autoHeight,
+            scrollbars: scrollbars,
+          },
+        },
+      };
+    }
+  }
+  return tempParams;
+}
+
+class ContainerTmpComp extends ContainerBaseComp {
+  constructor(params: CompParams<any>) {
+    super(convertOldContainerParams(params));
+  }
+}
+
+export const ShapeComp = withExposingConfigs(ContainerTmpComp, [NameConfigHidden]);
+
+type ContainerDataType = ToDataType<ContainerChildren<{}>>;
+
+export function defaultContainerData(
+  compName: string,
+  nameGenerator: NameGenerator
+): ContainerDataType {
+  return {
+    container: {
+      header: toSimpleContainerData([
+        {
+          item: {
+            compType: "text",
+            name: nameGenerator.genItemName("containerTitle"),
+            comp: {
+              text: "### " + trans("container.title"),
+            },
+          },
+          layoutItem: {
+            i: "",
+            h: 5,
+            w: 24,
+            x: 0,
+            y: 0,
+          },
+        },
+      ]),
+    },
+  };
+}

client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx

@@ -0,0 +1,160 @@
+import { ContainerStyleType } from "comps/controls/styleControlConstants";
+import { EditorContext } from "comps/editorState";
+import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
+import { HintPlaceHolder, ScrollBar } from "lowcoder-design";
+import { ReactNode, useContext, useEffect, useState } from "react";
+import styled, { css } from "styled-components";
+import { checkIsMobile } from "util/commonUtils";
+import {
+  gridItemCompToGridItems,
+  InnerGrid,
+} from "../containerComp/containerView";
+import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
+import { Coolshape } from "coolshapes-react";
+
+const getStyle = (style: ContainerStyleType) => {
+  return css`
+    border-color: ${style.border};
+    border-width: ${style.borderWidth};
+    border-radius: ${style.radius};
+    overflow: hidden;
+    padding: ${style.padding};
+    ${style.background && `background-color: ${style.background};`}
+    ${style.backgroundImage && `background-image: ${style.backgroundImage};`}
+    ${style.backgroundImageRepeat &&
+    `background-repeat: ${style.backgroundImageRepeat};`}
+    ${style.backgroundImageSize &&
+    `background-size: ${style.backgroundImageSize};`}
+    ${style.backgroundImagePosition &&
+    `background-position: ${style.backgroundImagePosition};`}
+    ${style.backgroundImageOrigin &&
+    `background-origin: ${style.backgroundImageOrigin};`}
+  `;
+};
+
+const Wrapper = styled.div<{ $style: ContainerStyleType }>`
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  border: 1px solid #d7d9e0;
+  border-radius: 4px;
+  ${(props) => props.$style && getStyle(props.$style)}
+`;
+
+const BodyInnerGrid = styled(InnerGrid)<{
+  $showBorder: boolean;
+  $backgroundColor: string;
+  $borderColor: string;
+  $borderWidth: string;
+  $backgroundImage: string;
+  $backgroundImageRepeat: string;
+  $backgroundImageSize: string;
+  $backgroundImagePosition: string;
+  $backgroundImageOrigin: string;
+}>`
+  border-top: ${(props) =>
+    `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
+  flex: 1;
+  ${(props) =>
+    props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
+  border-radius: 0;
+  ${(props) =>
+    props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
+  ${(props) =>
+    props.$backgroundImageRepeat &&
+    `background-repeat: ${props.$backgroundImageRepeat};`}
+  ${(props) =>
+    props.$backgroundImageSize &&
+    `background-size: ${props.$backgroundImageSize};`}
+  ${(props) =>
+    props.$backgroundImagePosition &&
+    `background-position: ${props.$backgroundImagePosition};`}
+  ${(props) =>
+    props.$backgroundImageOrigin &&
+    `background-origin: ${props.$backgroundImageOrigin};`}
+`;
+
+export type TriContainerProps = TriContainerViewProps & {
+  hintPlaceholder?: ReactNode;
+  icon: any;
+};
+
+export function ShapeTriContainer(props: TriContainerProps) {
+  const { container, icon } = props;
+  const { showHeader, showFooter } = container;
+  // When the header and footer are not displayed, the body must be displayed
+  const showBody = container.showBody || (!showHeader && !showFooter);
+  const scrollbars = container.scrollbars;
+
+  const { items: headerItems, ...otherHeaderProps } = container.header;
+  const { items: bodyItems, ...otherBodyProps } =
+    container.body["0"].children.view.getView();
+  const { items: footerItems, ...otherFooterProps } = container.footer;
+  const { style, headerStyle, bodyStyle, footerStyle } = container;
+
+  const editorState = useContext(EditorContext);
+  const maxWidth = editorState.getAppSettings().maxWidth;
+  const isMobile = checkIsMobile(maxWidth);
+  const paddingWidth = isMobile ? 8 : 0;
+
+  let [shape, setShape] = useState({ value: "star", index: 0 });
+  useEffect(() => {
+    if (icon.props?.value) {
+      let shapeDetails = icon.props?.value;
+      setShape({
+        index: parseInt(shapeDetails?.split("_")[0]),
+        value: shapeDetails?.split("_")[1],
+      });
+    }
+  }, [icon.props]);
+
+  return (
+    <div style={{ padding: style.margin, height: "100%" }}>
+      <Wrapper $style={style}>
+        <BackgroundColorContext.Provider value={bodyStyle.background}>
+          <ScrollBar
+            style={{
+              height: container.autoHeight ? "auto" : "100%",
+              margin: "0px",
+              padding: "0px",
+            }}
+            hideScrollbar={!scrollbars}
+          >
+            <div style={{ position: "relative", height: "100%" }}>
+              <Coolshape
+                type={shape?.value as any}
+                index={shape.index}
+                styles={{
+                  position: "absolute",
+                  top: "0",
+                  left: "50%",
+                  transform: "translateX(-50%)",
+                }}
+              />
+              <BodyInnerGrid
+                $showBorder={false}
+                {...otherBodyProps}
+                items={gridItemCompToGridItems(bodyItems)}
+                autoHeight={container.autoHeight}
+                emptyRows={14}
+                minHeight={"142px"}
+                hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
+                $backgroundColor={bodyStyle?.background || "transparent"}
+                $borderColor={style?.border}
+                $borderWidth={style?.borderWidth}
+                $backgroundImage={bodyStyle?.backgroundImage}
+                $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
+                $backgroundImageSize={bodyStyle?.backgroundImageSize}
+                $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
+                $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
+                style={{
+                  zIndex: 999,
+                }}
+              />
+            </div>
+          </ScrollBar>
+        </BackgroundColorContext.Provider>
+      </Wrapper>
+    </div>
+  );
+}