Skip to content

Commit eeb6719

Browse files
liujupingJackLian
liujuping
authored and
JackLian
committed
feat: optimize outline tree performance and ts definition
1 parent 95a1137 commit eeb6719

File tree

10 files changed

+60
-44
lines changed

10 files changed

+60
-44
lines changed

‎packages/designer/src/project/project.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ import {
55
IPublicTypeProjectSchema,
66
IPublicTypeRootSchema,
77
IPublicTypeComponentsMap,
8-
IPublicApiProject,
9-
IPublicModelDocumentModel,
108
IPublicEnumTransformStage,
9+
IBaseApiProject,
1110
} from '@alilc/lowcode-types';
1211
import { isLowCodeComponentType, isProCodeComponentType } from '@alilc/lowcode-utils';
1312
import { ISimulatorHost } from '../simulator';
1413

15-
export interface IProject extends Omit< IPublicApiProject<
14+
export interface IProject extends Omit< IBaseApiProject<
1615
IDocumentModel
1716
>,
1817
'simulatorHost' |

‎packages/plugin-outline-pane/src/controllers/pane-controller.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
444444
event: e,
445445
detail: {
446446
type: IPublicTypeLocationDetailType.Children,
447-
index: index + 1,
447+
index: (index || 0) + 1,
448448
valid: document?.checkNesting(node.parent!, dragObject as any),
449449
near: { node, pos: 'after' },
450450
focus: checkRecursion(focusNode, dragObject) ? { type: 'node', node: focusNode } : undefined,

‎packages/plugin-outline-pane/src/views/filter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React, { PureComponent } from 'react';
22
import './style.less';
33
import { IconFilter } from '../icons/filter';
44
import { Search, Checkbox, Balloon, Divider } from '@alifd/next';
@@ -7,7 +7,7 @@ import { Tree } from '../controllers/tree';
77
import { matchTreeNode, FILTER_OPTIONS } from './filter-tree';
88
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
99

10-
export default class Filter extends Component<{
10+
export default class Filter extends PureComponent<{
1111
tree: Tree;
1212
pluginContext: IPublicModelPluginContext;
1313
}, {

‎packages/plugin-outline-pane/src/views/pane.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { Component } from 'react';
1+
import React, { PureComponent } from 'react';
22
import { PaneController } from '../controllers/pane-controller';
33
import TreeView from './tree';
44
import './style.less';
55
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
66
import Filter from './filter';
77
import { TreeMaster } from '../controllers/tree-master';
88

9-
export class Pane extends Component<{
9+
export class Pane extends PureComponent<{
1010
config: any;
1111
pluginContext: IPublicModelPluginContext;
1212
treeMaster: TreeMaster;

‎packages/plugin-outline-pane/src/views/tree-branches.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Component } from 'react';
1+
import { PureComponent } from 'react';
22
import classNames from 'classnames';
33
import TreeNode from '../controllers/tree-node';
44
import TreeNodeView from './tree-node';
5-
import { IPublicModelPluginContext, IPublicModelExclusiveGroup, IPublicTypeDisposable } from '@alilc/lowcode-types';
5+
import { IPublicModelPluginContext, IPublicModelExclusiveGroup, IPublicTypeDisposable, IPublicTypeLocationChildrenDetail } from '@alilc/lowcode-types';
66

7-
export default class TreeBranches extends Component<{
7+
export default class TreeBranches extends PureComponent<{
88
treeNode: TreeNode;
99
isModal?: boolean;
1010
pluginContext: IPublicModelPluginContext;
@@ -62,12 +62,19 @@ export default class TreeBranches extends Component<{
6262
}
6363
}
6464

65-
class TreeNodeChildren extends Component<{
65+
66+
interface ITreeNodeChildrenState {
67+
filterWorking: boolean;
68+
matchSelf: boolean;
69+
keywords: string | null;
70+
dropDetail: IPublicTypeLocationChildrenDetail | undefined | null;
71+
}
72+
class TreeNodeChildren extends PureComponent<{
6673
treeNode: TreeNode;
6774
isModal?: boolean;
6875
pluginContext: IPublicModelPluginContext;
69-
}> {
70-
state = {
76+
}, ITreeNodeChildrenState> {
77+
state: ITreeNodeChildrenState = {
7178
filterWorking: false,
7279
matchSelf: false,
7380
keywords: null,
@@ -144,7 +151,7 @@ class TreeNodeChildren extends Component<{
144151
/>
145152
);
146153
treeNode.children?.forEach((child, index) => {
147-
const childIsModal = child.node.componentMeta.isModal || false;
154+
const childIsModal = child.node.componentMeta?.isModal || false;
148155
if (isModal != childIsModal) {
149156
return;
150157
}
@@ -180,7 +187,7 @@ class TreeNodeChildren extends Component<{
180187
}
181188
}
182189

183-
class TreeNodeSlots extends Component<{
190+
class TreeNodeSlots extends PureComponent<{
184191
treeNode: TreeNode;
185192
pluginContext: IPublicModelPluginContext;
186193
}> {

‎packages/plugin-outline-pane/src/views/tree-node.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { Component } from 'react';
1+
import { PureComponent } from 'react';
22
import classNames from 'classnames';
33
import TreeNode from '../controllers/tree-node';
44
import TreeTitle from './tree-title';
55
import TreeBranches from './tree-branches';
66
import { IconEyeClose } from '../icons/eye-close';
77
import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicModelDocumentModel, IPublicTypeDisposable } from '@alilc/lowcode-types';
88

9-
class ModalTreeNodeView extends Component<{
9+
class ModalTreeNodeView extends PureComponent<{
1010
treeNode: TreeNode;
1111
pluginContext: IPublicModelPluginContext;
1212
}> {
@@ -59,11 +59,11 @@ class ModalTreeNodeView extends Component<{
5959
}
6060
}
6161

62-
export default class TreeNodeView extends Component<{
62+
export default class TreeNodeView extends PureComponent<{
6363
treeNode: TreeNode;
6464
isModal?: boolean;
6565
pluginContext: IPublicModelPluginContext;
66-
isRootNode: boolean;
66+
isRootNode?: boolean;
6767
}> {
6868
state = {
6969
expanded: false,

‎packages/plugin-outline-pane/src/views/tree-title.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
/* eslint-disable max-len */
2-
import { Component, KeyboardEvent, FocusEvent, Fragment } from 'react';
1+
import { KeyboardEvent, FocusEvent, Fragment, PureComponent } from 'react';
32
import classNames from 'classnames';
43
import { createIcon } from '@alilc/lowcode-utils';
54
import { IPublicModelPluginContext, IPublicApiEvent } from '@alilc/lowcode-types';
@@ -17,7 +16,7 @@ function emitOutlineEvent(event: IPublicApiEvent, type: string, treeNode: TreeNo
1716
});
1817
}
1918

20-
export default class TreeTitle extends Component<{
19+
export default class TreeTitle extends PureComponent<{
2120
treeNode: TreeNode;
2221
isModal?: boolean;
2322
expanded: boolean;
@@ -36,7 +35,7 @@ export default class TreeTitle extends Component<{
3635

3736
private lastInput?: HTMLInputElement;
3837

39-
private enableEdit = (e) => {
38+
private enableEdit = (e: MouseEvent) => {
4039
e.preventDefault();
4140
this.setState({
4241
editing: true,
@@ -205,7 +204,7 @@ export default class TreeTitle extends Component<{
205204
}
206205
}
207206

208-
class RenameBtn extends Component<{
207+
class RenameBtn extends PureComponent<{
209208
treeNode: TreeNode;
210209
pluginContext: IPublicModelPluginContext;
211210
onClick: (e: any) => void;
@@ -225,7 +224,7 @@ class RenameBtn extends Component<{
225224
}
226225
}
227226

228-
class LockBtn extends Component<{
227+
class LockBtn extends PureComponent<{
229228
treeNode: TreeNode;
230229
pluginContext: IPublicModelPluginContext;
231230
locked: boolean;
@@ -249,7 +248,7 @@ class LockBtn extends Component<{
249248
}
250249
}
251250

252-
class HideBtn extends Component<{
251+
class HideBtn extends PureComponent<{
253252
treeNode: TreeNode;
254253
hidden: boolean;
255254
pluginContext: IPublicModelPluginContext;
@@ -276,7 +275,7 @@ class HideBtn extends Component<{
276275
}
277276
}
278277

279-
class ExpandBtn extends Component<{
278+
class ExpandBtn extends PureComponent<{
280279
treeNode: TreeNode;
281280
pluginContext: IPublicModelPluginContext;
282281
expanded: boolean;

‎packages/plugin-outline-pane/src/views/tree.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Component, MouseEvent as ReactMouseEvent } from 'react';
1+
import { MouseEvent as ReactMouseEvent, PureComponent } from 'react';
22
import { isFormEvent, canClickNode, isShaken } from '@alilc/lowcode-utils';
33
import { Tree } from '../controllers/tree';
44
import TreeNodeView from './tree-node';
55
import { IPublicEnumDragObjectType, IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types';
6+
import TreeNode from '../controllers/tree-node';
67

78
function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string {
89
let target: Element | null = e.target as Element;
@@ -17,7 +18,7 @@ function getTreeNodeIdByEvent(e: ReactMouseEvent, stop: Element): null | string
1718
return (target as HTMLDivElement).dataset.id || null;
1819
}
1920

20-
export default class TreeView extends Component<{
21+
export default class TreeView extends PureComponent<{
2122
tree: Tree;
2223
pluginContext: IPublicModelPluginContext;
2324
}> {
@@ -60,12 +61,12 @@ export default class TreeView extends Component<{
6061
const { id } = node;
6162
const isMulti = e.metaKey || e.ctrlKey || e.shiftKey;
6263
canvas.activeTracker?.track(node);
63-
if (isMulti && !node.contains(focusNode) && selection.has(id)) {
64+
if (isMulti && focusNode && !node.contains(focusNode) && selection?.has(id)) {
6465
if (!isFormEvent(e.nativeEvent)) {
6566
selection.remove(id);
6667
}
6768
} else {
68-
selection.select(id);
69+
selection?.select(id);
6970
const selectedNode = selection?.getNodes()?.[0];
7071
const npm = selectedNode?.componentMeta?.npm;
7172
const selected =
@@ -134,21 +135,23 @@ export default class TreeView extends Component<{
134135
const isMulti = e.metaKey || e.ctrlKey || e.shiftKey;
135136
const isLeftButton = e.button === 0;
136137

137-
if (isLeftButton && !node.contains(focusNode)) {
138+
if (isLeftButton && focusNode && !node.contains(focusNode)) {
138139
let nodes: IPublicModelNode[] = [node];
139140
this.ignoreUpSelected = false;
140141
if (isMulti) {
141142
// multi select mode, directily add
142-
if (!selection.has(node.id)) {
143+
if (!selection?.has(node.id)) {
143144
canvas.activeTracker?.track(node);
144-
selection.add(node.id);
145+
selection?.add(node.id);
145146
this.ignoreUpSelected = true;
146147
}
147148
// todo: remove rootNodes id
148-
selection.remove(focusNode.id);
149+
selection?.remove(focusNode.id);
149150
// 获得顶层 nodes
150-
nodes = selection.getTopNodes();
151-
} else if (selection.has(node.id)) {
151+
if (selection) {
152+
nodes = selection.getTopNodes();
153+
}
154+
} else if (selection?.has(node.id)) {
152155
nodes = selection.getTopNodes();
153156
}
154157
this.boostEvent = e.nativeEvent;
@@ -169,7 +172,9 @@ export default class TreeView extends Component<{
169172
doc?.detecting.leave();
170173
};
171174

172-
state = {
175+
state: {
176+
root: TreeNode | null
177+
} = {
173178
root: null,
174179
};
175180

‎packages/types/src/shell/api/common.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import { Component, ReactNode } from 'react';
3-
import { IPublicTypeNodeSchema } from '../type';
3+
import { IPublicTypeNodeSchema, IPublicTypeTitleContent } from '../type';
44
import { IPublicEnumTransitionType } from '../enum';
55

66
export interface IPublicApiCommonUtils {
@@ -82,12 +82,16 @@ export interface IPublicApiCommonEditorCabin {
8282
* Title 组件
8383
* @experimental unstable API, pay extra caution when trying to use this
8484
*/
85-
get Tip(): Component;
85+
get Tip(): React.FC<{}>;
8686
/**
8787
* Tip 组件
8888
* @experimental unstable API, pay extra caution when trying to use this
8989
*/
90-
get Title(): Component;
90+
get Title(): React.FC<{
91+
title: IPublicTypeTitleContent | undefined;
92+
match?: boolean;
93+
keywords?: string | null;
94+
}>;
9195
}
9296

9397
export interface IPublicApiCommonDesignerCabin {

‎packages/types/src/shell/api/project.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { IPublicEnumTransformStage } from '../enum';
33
import { IPublicApiSimulatorHost } from './';
44
import { IPublicModelDocumentModel } from '../model';
55

6-
export interface IPublicApiProject<
7-
DocumentModel = IPublicModelDocumentModel
6+
export interface IBaseApiProject<
7+
DocumentModel
88
> {
99

1010
/**
@@ -133,3 +133,5 @@ export interface IPublicApiProject<
133133
*/
134134
setI18n(value: object): void;
135135
}
136+
137+
export interface IPublicApiProject extends IBaseApiProject<IPublicModelDocumentModel> {}

0 commit comments

Comments
 (0)