Merge pull request #714 from raheeliftikhar5/layers-collision

Added disabledCollision flag in app dsl to handle layers in editor

Author: FalkWolsky

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/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>

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

@@ -7,7 +7,7 @@ import {
   LeftPanel,
   MiddlePanel,
 } from "pages/common/styledComponent";
-import { getPanelStatus, getEditorModeStatus, getPanelStyle, getCollisionStatus } from "util/localStorageUtil";
+import { getPanelStatus, getEditorModeStatus, getPanelStyle } from "util/localStorageUtil";
 import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
 import RightPanel from "pages/editor/right/RightPanel";
 import _ from "lodash";
@@ -48,7 +48,6 @@ export const EditorLoadingSpin = (props: { height?: string | number }) => {
 export default function EditorSkeletonView() {
   const panelStatus = getPanelStatus();
   const editorModeStatus = getEditorModeStatus();
-  const collisionStatus = getCollisionStatus();
   const panelStyle = getPanelStyle();
   const isUserViewMode = useUserViewMode();
   const isTemplate = useTemplateViewMode();
@@ -70,7 +69,7 @@ export default function EditorSkeletonView() {
           <SiderStyled />
           {panelStatus.left && (
             <LeftPanel
-              collisionStatus={collisionStatus}
+              collisionStatus={false}
               toggleCollisionStatus={_.noop}
             >
               <StyledSkeleton active paragraph={{ rows: 10 }} />

client/packages/lowcoder/src/util/localStorageUtil.ts

@@ -47,18 +47,22 @@ export function saveEditorModeStatus(editorModeStatus: EditorModeStatus) {
 }
 //ADDED BY FRED TO SAVE enabledCollision
 export function saveCollisionStatus(
-  collisionStatus: DisabledCollisionStatus
+  collisionStatus: boolean
 ) {
-  localStorage.setItem("disable_collision", collisionStatus);
+  localStorage.setItem("disableCollision", String(collisionStatus));
 }
 
-export const DefaultCollisionStatus: DisabledCollisionStatus = "true";
-export function getCollisionStatus(): DisabledCollisionStatus {
-  const str = localStorage.getItem("disable_collision");
-  if (!str) {
-    return DefaultCollisionStatus;
+// export const DefaultCollisionStatus: DisabledCollisionStatus = "true";
+export function getCollisionStatus(): boolean {
+  const str = localStorage.getItem("disableCollision");
+  if (str === 'true') {
+    return true;
   }
-  return str as DisabledCollisionStatus;
+  return false;
+}
+
+export function removeCollisionStatus() {
+  localStorage.removeItem("disableCollision");
 }
 
 export const DefaultEditorModeStatus: EditorModeStatus = "both";