Skip to content

Commit 9ac931a

Browse files
author
FalkWolsky
committed
[WIP] Own Display for Layers
1 parent 5323da5 commit 9ac931a

File tree

6 files changed

+420
-338
lines changed

6 files changed

+420
-338
lines changed

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

Lines changed: 185 additions & 180 deletions
Large diffs are not rendered by default.

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,12 @@ export const en = {
104104
"components": "Active Components",
105105
"modals": "in-App Modals",
106106
"expandTip": "Click to Expand {component}'s Data",
107-
"collapseTip": "Click to Collapse {component}'s Data"
107+
"collapseTip": "Click to Collapse {component}'s Data",
108+
"layers": "Layers",
109+
"activatelayers": "Use Layers in this App",
110+
"selectedComponents": "Selected Components...",
111+
"displayComponents": "control Display",
112+
"lockComponents": "control Position",
108113
},
109114

110115
// second part

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,10 @@ leftPanel: {
106106
components: "组件",
107107
modals: "对话框",
108108
expandTip: "点击展开 {component} 的数据",
109-
collapseTip: "点击折叠 {component} 的数据"
109+
collapseTip: "点击折叠 {component} 的数据",
110+
layers: "图层",
111+
activatelayers: "激活图层",
112+
selectedComponents: "已选组件",
110113
},
111114
bottomPanel: {
112115
title: "查询",

‎client/packages/lowcoder/src/pages/editor/LeftContent.tsx

Lines changed: 28 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ import {
66
CollapseTitle as Title,
77
CopyTextButton,
88
FoldedIcon,
9+
LeftClose,
910
LeftCommon,
10-
LeftInfoFill,
11-
LeftInfoLine,
11+
LeftOpen,
1212
PadDiv,
1313
ScrollBar,
1414
Tooltip,
1515
UnfoldIcon,
1616
UnShow,
1717
} from "lowcoder-design";
18-
import React, { ReactNode, useCallback, useContext, useMemo, useState, useEffect } from "react";
18+
import React, { ReactNode, useCallback, useContext, useMemo, useState } from "react";
1919
import { hookCompCategory } from "comps/hooks/hookCompTypes";
2020
import _ from "lodash";
2121
import styled from "styled-components";
@@ -32,11 +32,6 @@ import { UICompType } from "comps/uiCompRegistry";
3232
import { CollapseWrapper, DirectoryTreeStyle, Node } from "./styledComponents";
3333
import { DataNode, EventDataNode } from "antd/lib/tree";
3434
import { isAggregationApp } from "util/appUtils";
35-
import cloneDeep from 'lodash/cloneDeep';
36-
import { useDispatch } from "react-redux";
37-
import { useApplicationId } from "util/hooks";
38-
import { updateApplication } from "redux/reduxActions/applicationActions";
39-
import { Divider } from "antd";
4035

4136
const CollapseTitleWrapper = styled.div`
4237
display: flex;
@@ -196,8 +191,6 @@ const CollapseView = React.memo(
196191

197192
interface LeftContentProps {
198193
uiComp: InstanceType<typeof UIComp>;
199-
checkable?: boolean;
200-
isDraggable?: boolean;
201194
}
202195

203196
enum LeftTabKey {
@@ -215,8 +208,6 @@ type NodeItem = {
215208
title: string;
216209
type?: UICompType;
217210
children: NodeItem[];
218-
pos?: number;
219-
disabled?: boolean;
220211
};
221212

222213
type NodeInfo = {
@@ -251,30 +242,25 @@ export const LeftContent = (props: LeftContentProps) => {
251242
const editorState = useContext(EditorContext);
252243
const [expandedKeys, setExpandedKeys] = useState<Array<React.Key>>([]);
253244
const [showData, setShowData] = useState<NodeInfo[]>([]);
254-
const dispatch = useDispatch();
255-
const applicationId = useApplicationId();
256-
const checkable = props.checkable || false;
257-
const isDraggable = props.isDraggable || false;
258245

259246
const getTree = (tree: CompTree, result: NodeItem[], key?: string) => {
260247
const { items, children } = tree;
261248
if (Object.keys(items).length) {
262249
for (const i in items) {
263-
const info: NodeItem = {
250+
const info = {
264251
title: items[i].children.name.getView(),
265252
type: items[i].children.compType.getView() as UICompType,
266253
key: i,
267254
children: [],
268255
};
269256
if (key) {
270257
const parent = getTreeNodeByKey(result, key);
271-
info.disabled = true;
272258
parent?.children.push(info);
273259
} else {
274260
result.push(info);
275261
}
276262
}
277-
// result = _.sortBy(result, [(x) => x.title]);
263+
result = _.sortBy(result, [(x) => x.title]);
278264
}
279265
if (Object.keys(children).length) {
280266
for (const i in children) {
@@ -367,7 +353,7 @@ export const LeftContent = (props: LeftContentProps) => {
367353
setShowData(newData);
368354
}}
369355
>
370-
<LeftInfoLine/>
356+
<LeftOpen />
371357
</div>
372358
</Tooltip>
373359
) : (
@@ -400,7 +386,7 @@ export const LeftContent = (props: LeftContentProps) => {
400386
setShowData(newData);
401387
}}
402388
>
403-
<LeftInfoFill />
389+
<LeftClose />
404390
</div>
405391
</Tooltip>
406392
))}
@@ -422,57 +408,17 @@ export const LeftContent = (props: LeftContentProps) => {
422408
);
423409
};
424410

425-
const [componentTreeData, setComponentTreeData] = useState<NodeItem[]>([]);
426-
const [modalsTreeData, setModalsTreeData] = useState<NodeItem[]>([]);
427-
428-
useEffect(() => {
429-
const compData = getTreeUIData(TreeUIKey.Components);
430-
setComponentTreeData(compData);
431-
}, [editorState]);
432-
433-
useEffect(() => {
434-
const modalsData = getTreeUIData(TreeUIKey.Modals);
435-
setModalsTreeData(modalsData);
436-
}, [editorState]);
437-
438-
const getTreeUIData = (type: TreeUIKey) => {
439-
const tree =
440-
type === TreeUIKey.Components
441-
? editorState.getUIComp().getTree()
442-
: editorState.getHooksComp().getUITree();
443-
const explorerData: NodeItem[] = getTree(tree, []);
444-
// TODO: handle sorting inside modals/drawers
445-
if(type === TreeUIKey.Modals) return explorerData;
446-
447-
const dsl = editorState.rootComp.toJsonValue();
448-
explorerData.forEach(data => {
449-
data['pos'] = dsl.ui.layout[data.key].pos;
450-
})
451-
explorerData.sort((a, b) => {
452-
const aPos = a?.pos || 0;
453-
const bPos = b?.pos || 0;
454-
if (aPos < bPos) return -1;
455-
if (aPos > bPos) return 1;
456-
return 0;
457-
});
458-
return explorerData;
459-
}
460-
461-
462411
const getTreeUI = (type: TreeUIKey) => {
463-
// here the components get sorted by name
464-
// TODO: sort by category
465-
// TODO: sort by Types etc.
466412
const uiCompInfos = _.sortBy(editorState.uiCompInfoList(), [(x) => x.name]);
467-
/* const tree =
413+
const tree =
468414
type === TreeUIKey.Components
469415
? editorState.getUIComp().getTree()
470416
: editorState.getHooksComp().getUITree();
471-
const explorerData: NodeItem[] = getTree(tree, []); */
417+
const explorerData: NodeItem[] = getTree(tree, []);
472418
let selectedKeys = [];
473419
if (editorState.selectedCompNames.size === 1) {
474420
const key = Object.keys(editorState.selectedComps())[0];
475-
const parentKeys = getParentNodeKeysByKey(type === TreeUIKey.Components ? componentTreeData : modalsTreeData, key);
421+
const parentKeys = getParentNodeKeysByKey(explorerData, key);
476422
if (parentKeys && parentKeys.length) {
477423
let needSet = false;
478424
parentKeys.forEach((key) => {
@@ -486,38 +432,38 @@ export const LeftContent = (props: LeftContentProps) => {
486432
}
487433

488434
return (
489-
<><DirectoryTreeStyle
490-
treeData={type === TreeUIKey.Components ? componentTreeData : modalsTreeData}
491-
icon={(props: any) => props.type && (
492-
<div style={{ margin: '3px 0 0 -3px'}}> {/* Adjust the margin as needed */}
493-
{CompStateIcon[props.type as UICompType] || <LeftCommon />}
494-
</div>
495-
)}
496-
switcherIcon={(props: any) => props.expanded ? <FoldedIcon /> : <UnfoldIcon />}
435+
<DirectoryTreeStyle
436+
treeData={explorerData}
437+
// icon={(props: NodeItem) => props.type && (CompStateIcon[props.type] || <LeftCommon />)}
438+
icon={(props: any) => props.type && (CompStateIcon[props.type as UICompType] || <LeftCommon />)}
439+
// switcherIcon={({ expanded }: { expanded: boolean }) =>
440+
// expanded ? <FoldedIcon /> : <UnfoldIcon />
441+
// }
442+
switcherIcon={(props: any) =>
443+
props.expanded ? <FoldedIcon /> : <UnfoldIcon />
444+
}
497445
expandedKeys={expandedKeys}
498446
onExpand={(keys) => setExpandedKeys(keys)}
499447
onClick={(e, node) => handleNodeClick(e, node, uiCompInfos)}
500448
selectedKeys={selectedKeys}
501-
titleRender={(nodeData) => getTreeNode(nodeData as NodeItem, uiCompInfos)} />
502-
<Divider />
503-
<div></div>
504-
</>
449+
titleRender={(nodeData) => getTreeNode(nodeData as NodeItem, uiCompInfos)}
450+
/>
505451
);
506452
};
507453

508454
const uiCollapse = useMemo(() => {
509455
if (isAggregationApp(editorState.getAppType())) {
510456
return;
511457
}
512-
return getTreeUI(TreeUIKey.Components); // Pass componentTreeData
513-
}, [editorState, uiCollapseClick, expandedKeys, showData, componentTreeData]);
514-
458+
return getTreeUI(TreeUIKey.Components);
459+
}, [editorState, uiCollapseClick, expandedKeys, showData]);
460+
515461
const modalsCollapse = useMemo(() => {
516462
if (isAggregationApp(editorState.getAppType())) {
517463
return;
518464
}
519-
return getTreeUI(TreeUIKey.Modals); // Pass modalsTreeData
520-
}, [editorState, uiCollapseClick, expandedKeys, showData, modalsTreeData]);
465+
return getTreeUI(TreeUIKey.Modals);
466+
}, [editorState, uiCollapseClick, expandedKeys, showData]);
521467

522468
const bottomResCollapse = useMemo(() => {
523469
return editorState
@@ -551,7 +497,6 @@ export const LeftContent = (props: LeftContentProps) => {
551497
}, [editorState]);
552498

553499
const moduleLayoutComp = uiComp.getModuleLayoutComp();
554-
555500
const stateContent = (
556501
<ScrollBar>
557502
<div style={{ paddingBottom: 80 }}>
@@ -604,4 +549,4 @@ export const LeftContent = (props: LeftContentProps) => {
604549
</LeftContentTabs>
605550
</LeftContentWrapper>
606551
);
607-
};
552+
};

0 commit comments

Comments
 (0)