diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx index f984860ba..9fa023cae 100644 --- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx @@ -138,6 +138,7 @@ const childrenMap = { maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"), themeId: valueComp(DEFAULT_THEMEID), customShortcuts: CustomShortcutsComp, + disableCollision: valueComp(false), }; type ChildrenInstance = RecordConstructorToComp & { themeList: ThemeType[]; diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx index d7ee0e421..f54f34308 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx +++ b/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("compType"); const compLayout = draggingUtils.getData("compLayout"); if (compType) { diff --git a/client/packages/lowcoder/src/comps/editorState.tsx b/client/packages/lowcoder/src/comps/editorState.tsx index ee9db5475..7cc7ee989 100644 --- a/client/packages/lowcoder/src/comps/editorState.tsx +++ b/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; @@ -47,7 +47,7 @@ export class EditorState { readonly showPropertyPane: boolean = false; readonly selectedCompNames: Set = 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; } } diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx index bfa0f20cf..7e360a2da 100644 --- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx +++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx @@ -161,9 +161,6 @@ export const DisabledContext = React.createContext(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); diff --git a/client/packages/lowcoder/src/layout/utils.ts b/client/packages/lowcoder/src/layout/utils.ts index 40ee0ed72..22ae8525e 100644 --- a/client/packages/lowcoder/src/layout/utils.ts +++ b/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(); } /** diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx index eccd53b21..1442e1620 100644 --- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx +++ b/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) { diff --git a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx index 93a66fc44..f2d6c6122 100644 --- a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx +++ b/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) => { { - toggleCollisionStatus(value == true ? "true" : "false"); - editorState.setCollisionStatus(value == true ? "true" : "false"); + onChange={(value: boolean) => { + handleToggleLayer(value); }} /> diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx index 01ba97c43..a38afd104 100644 --- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx +++ b/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() { {panelStatus.left && ( diff --git a/client/packages/lowcoder/src/util/localStorageUtil.ts b/client/packages/lowcoder/src/util/localStorageUtil.ts index 1c468be88..2eb1a3dfd 100644 --- a/client/packages/lowcoder/src/util/localStorageUtil.ts +++ b/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";