Merge pull request #717 from lowcoder-org/dev

Dev -> Main - fixing Publishing behaviour

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

@@ -138,6 +138,7 @@ const childrenMap = {
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   themeId: valueComp<string>(DEFAULT_THEMEID),
   customShortcuts: CustomShortcutsComp,
+  disableCollision: valueComp<boolean>(false),
 };
 type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
   themeList: ThemeType[];

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -478,7 +478,6 @@ export function InnerGrid(props: ViewPropsWithSelect) {
       layout={props.layout}
       extraLayout={extraLayout}
       onDropDragOver={(e) => {
-
         const compType = draggingUtils.getData<UICompType>("compType");
         const compLayout = draggingUtils.getData<UICompLayoutInfo>("compLayout");
         if (compType) {

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

@@ -17,7 +17,7 @@ import { NameAndExposingInfo } from "./utils/exposingTypes";
 import { checkName } from "./utils/rename";
 import { trans } from "i18n";
 import { UiLayoutType } from "./comps/uiComp";
-import { getCollisionStatus, getEditorModeStatus } from "util/localStorageUtil";
+import { getEditorModeStatus, saveCollisionStatus } from "util/localStorageUtil";
 
 type RootComp = InstanceType<typeof RootCompTmp>;
 
@@ -47,7 +47,7 @@ export class EditorState {
   readonly showPropertyPane: boolean = false;
   readonly selectedCompNames: Set<string> = new Set();
   readonly editorModeStatus: string = "";
-  readonly collisionStatus: string = "";
+  readonly collisionStatus: boolean = false;
   readonly isDragging: boolean = false;
   readonly draggingCompType: string = "button";
   readonly forceShowGrid: boolean = false; // show grid lines
@@ -65,12 +65,13 @@ export class EditorState {
     rootComp: RootComp,
     setEditorState: (fn: (editorState: EditorState) => EditorState) => void,
     initialEditorModeStatus: string = getEditorModeStatus(),
-    initialCollisionStatus: string = getCollisionStatus()
   ) {
     this.rootComp = rootComp;
     this.setEditorState = setEditorState;
     this.editorModeStatus = initialEditorModeStatus;
-    this.collisionStatus = initialCollisionStatus;
+
+    // save collision status from app dsl to localstorage
+    saveCollisionStatus(this.getCollisionStatus());
   }
 
   /**
@@ -356,10 +357,6 @@ export class EditorState {
     this.changeState({ editorModeStatus: newEditorModeStatus });
   }
 
-  setCollisionStatus(newCollisionStatus: string) {
-    this.changeState({ collisionStatus: newCollisionStatus });
-  }
-
   setDragging(dragging: boolean) {
     if (this.isDragging === dragging) {
       return;
@@ -513,8 +510,9 @@ export class EditorState {
   getAppType(): UiLayoutType {
     return this.getUIComp().children.compType.getView();
   }
-  getCollisionStatus(): string {
-    return this.collisionStatus;
+  getCollisionStatus(): boolean {
+    const { disableCollision } = this.getAppSettings();
+    return disableCollision ?? false;
   }
 
 }

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -161,9 +161,6 @@ export const DisabledContext = React.createContext<boolean>(false);
  */
 function UIView(props: { comp: any; viewFn: any }) {
   const comp = props.comp;
-  console.log(comp);
-
-  console.log(comp.children);
 
   const childrenProps = childrenToProps(comp.children);
   const parentDisabled = useContext(DisabledContext);

client/packages/lowcoder/src/comps/hooks/drawerComp.tsx

@@ -1,12 +1,12 @@
-import { CloseOutlined } from "@ant-design/icons";
+import { CloseOutlined, PropertySafetyFilled } from "@ant-design/icons";
 import { default as Button } from "antd/es/button";
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
-import { PositionControl } from "comps/controls/dropdownControl";
+import { PositionControl, LeftRightControl } from "comps/controls/dropdownControl";
 import { closeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 import { DrawerStyle } from "comps/controls/styleControlConstants";
@@ -35,40 +35,22 @@ const DrawerWrapper = styled.div`
   pointer-events: auto;
 `;
 
-const ButtonStyle = styled(Button)`
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-  font-weight: 700;
-  box-shadow: none;
-  color: rgba(0, 0, 0, 0.45);
-  height: 54px;
-  width: 54px;
-
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-
-  &,
-  :hover,
-  :focus {
-    background-color: transparent;
-    border: none;
-  }
-
-  :hover,
-  :focus {
-    color: rgba(0, 0, 0, 0.75);
-  }
-`;
-
 // If it is a number, use the px unit by default
 function transToPxSize(size: string | number) {
   return isNumeric(size) ? size + "px" : (size as string);
 }
 
+const ClosePlacementOptions = [
+  {
+    label: trans("drawer.left"),
+    value: "left",
+  },
+  {
+    label: trans("drawer.right"),
+    value: "right",
+  },
+] as const;
+
 const PlacementOptions = [
   {
     label: trans("drawer.top"),
@@ -88,6 +70,7 @@ const PlacementOptions = [
   },
 ] as const;
 
+
 let TmpDrawerComp = (function () {
   return new ContainerCompBuilder(
     {
@@ -98,6 +81,7 @@ let TmpDrawerComp = (function () {
       autoHeight: AutoHeightControl,
       style: styleControl(DrawerStyle),
       placement: PositionControl,
+      closePosition: withDefault(LeftRightControl, "left"),
       maskClosable: withDefault(BoolControl, true),
       showMask: withDefault(BoolControl, true),
     },
@@ -119,6 +103,34 @@ let TmpDrawerComp = (function () {
         },
         [dispatch, isTopBom]
       );
+      const ButtonStyle = styled(Button)`
+        position: absolute;
+        ${props.closePosition === "right" ? "right: 0;" : "left: 0;"}
+        top: 0;
+        z-index: 10;
+        font-weight: 700;
+        box-shadow: none;
+        color: rgba(0, 0, 0, 0.45);
+        height: 54px;
+        width: 54px;
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+
+        &,
+        :hover,
+        :focus {
+          background-color: transparent;
+          border: none;
+        }
+
+        :hover,
+        :focus {
+          color: rgba(0, 0, 0, 0.75);
+        }
+      `;
       return (
         <BackgroundColorContext.Provider value={props.style.background}>
           <DrawerWrapper>
@@ -181,6 +193,7 @@ let TmpDrawerComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
+          {children.closePosition.propertyView({ label: trans("drawer.closePosition"), radioButton: true })}
           {children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true })}
           {["top", "bottom"].includes(children.placement.getView())
             ? children.autoHeight.getPropertyView()

client/packages/lowcoder/src/constants/applicationConstants.ts

@@ -11,6 +11,8 @@ export enum AppTypeEnum {
   NavLayout = 3,
   // 4 folder, 5 mobile
   MobileTabLayout = 6,
+  // WorkflowScreen = 7,
+  // Slide = 8,
 }
 
 export enum ApplicationCategoriesEnum {
@@ -52,6 +54,8 @@ export const AppUILayoutType: Record<AppTypeEnum, UiLayoutType> = {
   [AppTypeEnum.Module]: "module",
   [AppTypeEnum.NavLayout]: "nav",
   [AppTypeEnum.MobileTabLayout]: "mobileTabLayout",
+  // [AppTypeEnum.WorkflowScreen]: "module",
+  // [AppTypeEnum.Slide]: "normal",
 };
 
 export type ApplicationDSLType = "editing" | "published" | "view_marketplace";
@@ -61,6 +65,7 @@ export type ApplicationPermissionType = "USER" | "GROUP" | "ORG_ADMIN";
 export interface ApplicationExtra {
   moduleHeight?: number;
   moduleWidth?: number;
+  layers?: boolean;
 }
 
 export interface ApplicationMeta {

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -1347,6 +1347,7 @@ export const de = {
       "title": "Angezeigter Container-Titel"
   },
   "drawer": {
+      "closePosition": "Platzierung der Verschlusses",
       "placement": "Platzierung der Schubladen",
       "size": "Größe",
       "top": "Top",

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

@@ -1500,6 +1500,7 @@ export const en = {
     "title": "Displayed Container Title"
   },
   "drawer": {
+    "closePosition": "Close Button Placement",
     "placement": "Drawer Placement",
     "size": "Size",
     "top": "Top",

client/packages/lowcoder/src/i18n/locales/translation_files/de.json

@@ -1335,6 +1335,7 @@
         "title": "Angezeigter Container-Titel"
     },
     "drawer": {
+        "closePosition": "Platzierung der Verschlusses",
         "placement": "Platzierung der Schubladen",
         "size": "Größe",
         "top": "Top",

client/packages/lowcoder/src/i18n/locales/translation_files/en.json

@@ -1399,6 +1399,7 @@
     "title": "Displayed Container Title"
   },
   "drawer": {
+    "closePosition": "Close Button Placement",
     "placement": "Drawer Placement",
     "size": "Size",
     "top": "Top",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1469,6 +1469,7 @@ container: {
     title: "容器标题",
 },
 drawer: {
+    closePosition: "关闭位置",
     placement: "抽屉位置",
     size: "大小",
     top: "顶部",

client/packages/lowcoder/src/layout/utils.ts

@@ -5,7 +5,6 @@ import { DraggableEvent } from "react-draggable";
 import { PositionParams } from "./calculateUtils";
 import { draggingUtils } from "./draggingUtils";
 import { GridLayoutProps, ResizeHandleAxis } from "./gridLayoutPropTypes";
-
 import { getCollisionStatus } from "util/localStorageUtil";
 
 export type LayoutItem = {
@@ -172,12 +171,7 @@ export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
   if (l1.y + l1.h <= l2.y) return false; // l1 is above l2
   if (l1.y >= l2.y + l2.h) return false; // l1 is below l2
 
-  if (getCollisionStatus() === "true") {
-    return false;
-  }
-  else {
-    return true; // boxes overlap
-  }
+  return !getCollisionStatus();
 }
 
 /**

client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx

@@ -25,7 +25,7 @@ import { useLocation } from "react-use";
 import { TrashTableView } from "./TrashTableView";
 import { HomepageTourV2 } from "../tutorials/HomeTutorialsV2";
 import { HomeCardView } from "./HomeCardView";
-import { getHomeLayout, HomeLayoutType, saveHomeLayout } from "../../util/localStorageUtil";
+import { getHomeLayout, HomeLayoutType, removeCollisionStatus, saveHomeLayout } from "../../util/localStorageUtil";
 import { HomeTableView } from "./HomeTableView";
 import { Layers } from "../../constants/Layers";
 import { CreateDropdown } from "./CreateDropdown";
@@ -288,6 +288,11 @@ export function HomeLayout(props: HomeLayoutProps) {
 
   useEffect(() => saveHomeLayout(layout), [layout]);
 
+  useEffect(() => {
+    // remove collision status from localstorage
+    removeCollisionStatus();
+  }, []);
+
   const currentPath = useLocation().pathname;
 
   if (!user.currentOrgId) {

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

@@ -29,9 +29,7 @@ import { Button, Divider, Dropdown, Flex, Input, Menu, MenuProps, Space } from "
 import { Switch } from "antd";
 import {
   saveCollisionStatus,
-  getCollisionStatus,
 } from "util/localStorageUtil";
-import { check, withViewFn } from "@lowcoder-ee/index.sdk";
 import { DownOutlined } from "@ant-design/icons";
 import { ItemType } from "antd/es/menu/hooks/useItems";
 import ColorPicker, { configChangeParams } from "components/ColorPicker";
@@ -78,17 +76,18 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
   const applicationId = useApplicationId();
 
   // added by Falk Wolsky to support a Layers in Lowcoder
-  const [collisionStatus, setCollisionStatus] = useState(() => {
-    return getCollisionStatus();
-  });
-
-  const toggleCollisionStatus: ToggleCollisionStatus = useCallback(
-    (value) => {
-      setCollisionStatus(value ? value : ("false" as DisabledCollisionStatus));
-      saveCollisionStatus(value ? value : ("false" as DisabledCollisionStatus));
-    },
-    [collisionStatus]
-  );
+  const [collisionStatus, setCollisionStatus] = useState(editorState.getCollisionStatus());
+
+  useEffect(() => {
+    saveCollisionStatus(collisionStatus);
+  }, [collisionStatus])
+
+  const handleToggleLayer = (checked: boolean) => {
+    editorState.rootComp.children.settings.children.disableCollision.dispatchChangeValueAction(
+      checked
+    )
+    setCollisionStatus(checked);
+  }
 
   const getTree = (tree: CompTree, result: NodeItem[], key?: string) => {
     const { items, children } = tree;
@@ -429,7 +428,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
     // TODO: sort by category
     // TODO: sort by Types etc.
     const uiCompInfos = _.sortBy(editorState.uiCompInfoList(), [(x) => x.name]);
-    const isDraggable = editorState.collisionStatus === "true" ? true : false;
+    const isDraggable = editorState.getCollisionStatus();
 
     return (
       <>
@@ -439,11 +438,10 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
           <Switch 
             style={{margin : "0px 10px"}}
             size="small"
-            checked={editorState.collisionStatus == "true"}
+            defaultChecked={collisionStatus}
             disabled={false}
-            onChange={(value: any) => {
-              toggleCollisionStatus(value == true ? "true" : "false");
-              editorState.setCollisionStatus(value == true ? "true" : "false");
+            onChange={(value: boolean) => {
+              handleToggleLayer(value);
             }}
           />
         </div>