github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-11 18:42:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix cant change the panel tree item title with prop api

Browse Source
This commit is contained in:
liujuping 2023-03-24 14:22:30 +08:00 committed by 林熠
parent fc964ec715
commit 80fc9766b1
2 changed files with 143 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
packages/plugin-outline-pane/src/controllers/tree-node.ts
View File

@ -41,43 +41,22 @@ export default class TreeNode {
readonly pluginContext: IPublicModelPluginContext;
event = new EventEmitter();
onFilterResultChanged(fn: () => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.filterResultChanged, fn);
return () => {
this.event.off(EVENT_NAMES.filterResultChanged, fn);
}
};
onExpandedChanged(fn: (expanded: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.expandedChanged, fn);
return () => {
this.event.off(EVENT_NAMES.expandedChanged, fn);
}
};
onHiddenChanged(fn: (hidden: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.hiddenChanged, fn);
return () => {
this.event.off(EVENT_NAMES.hiddenChanged, fn);
}
};
onLockedChanged(fn: (locked: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.lockedChanged, fn);
return () => {
this.event.off(EVENT_NAMES.lockedChanged, fn);
}
};
onTitleLabelChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.titleLabelChanged, fn);
private _node: IPublicModelNode;
return () => {
this.event.off(EVENT_NAMES.titleLabelChanged, fn);
}
readonly tree: Tree;
private _filterResult: FilterResult = {
filterWorking: false,
matchChild: false,
matchSelf: false,
keywords: '',
};
onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.expandableChanged, fn);
return () => {
this.event.off(EVENT_NAMES.expandableChanged, fn);
}
}
/**
* 默认为折叠状态
* 在初始化根节点时，设置为展开状态
*/
private _expanded = false;
get id(): string {
return this.node.id;
@ -91,11 +70,8 @@ export default class TreeNode {
return this.hasChildren() || this.hasSlots() || this.dropDetail?.index != null;
}
/**
* 触发 onExpandableChanged 回调
*/
notifyExpandableChanged(): void {
this.event.emit(EVENT_NAMES.expandableChanged, this.expandable);
get expanded(): boolean {
return this.isRoot(true) || (this.expandable && this._expanded);
}
/**
@ -110,47 +86,6 @@ export default class TreeNode {
return this.node.zLevel;
}
isRoot(includeOriginalRoot = false) {
const rootNode = this.pluginContext.project.getCurrentDocument()?.root;
return this.tree.root === this || (includeOriginalRoot && rootNode === this.node);
}
/**
* 是否是响应投放区
*/
isResponseDropping(): boolean {
const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation;
if (!loc) {
return false;
}
return loc.target?.id === this.id;
}
isFocusingNode(): boolean {
const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation;
if (!loc) {
return false;
}
return (
isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.id
);
}
/**
* 默认为折叠状态
* 在初始化根节点时，设置为展开状态
*/
private _expanded = false;
get expanded(): boolean {
return this.isRoot(true) || (this.expandable && this._expanded);
}
setExpanded(value: boolean) {
this._expanded = value;
this.event.emit(EVENT_NAMES.expandedChanged, value);
}
get detecting() {
const doc = this.pluginContext.project.currentDocument;
return !!(doc?.isDetectingNode(this.node));
@ -164,23 +99,10 @@ export default class TreeNode {
return !cv;
}
setHidden(flag: boolean) {
if (this.node.conditionGroup) {
return;
}
this.node.visible = !flag;
this.event.emit(EVENT_NAMES.hiddenChanged, flag);
}
get locked(): boolean {
return this.node.isLocked;
}
setLocked(flag: boolean) {
this.node.lock(flag);
this.event.emit(EVENT_NAMES.lockedChanged, flag);
}
get selected(): boolean {
// TODO: check is dragging
const selection = this.pluginContext.project.getCurrentDocument()?.selection;
@ -213,19 +135,6 @@ export default class TreeNode {
return this.node.componentName;
}
setTitleLabel(label: string) {
const origLabel = this.titleLabel;
if (label === origLabel) {
return;
}
if (label === '') {
this.node.getExtraProp('title', false)?.remove();
} else {
this.node.getExtraProp('title', true)?.setValue(label);
}
this.event.emit(EVENT_NAMES.titleLabelChanged, this);
}
get icon() {
return this.node.componentMeta?.icon;
}
@ -247,6 +156,123 @@ export default class TreeNode {
return this.node.children?.map((node) => this.tree.getTreeNode(node)) || null;
}
get node(): IPublicModelNode {
return this._node;
}
constructor(tree: Tree, node: IPublicModelNode, pluginContext: IPublicModelPluginContext) {
this.tree = tree;
this.pluginContext = pluginContext;
this._node = node;
}
setLocked(flag: boolean) {
this.node.lock(flag);
this.event.emit(EVENT_NAMES.lockedChanged, flag);
}
onFilterResultChanged(fn: () => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.filterResultChanged, fn);
return () => {
this.event.off(EVENT_NAMES.filterResultChanged, fn);
};
}
onExpandedChanged(fn: (expanded: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.expandedChanged, fn);
return () => {
this.event.off(EVENT_NAMES.expandedChanged, fn);
};
}
onHiddenChanged(fn: (hidden: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.hiddenChanged, fn);
return () => {
this.event.off(EVENT_NAMES.hiddenChanged, fn);
};
}
onLockedChanged(fn: (locked: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.lockedChanged, fn);
return () => {
this.event.off(EVENT_NAMES.lockedChanged, fn);
};
}
onTitleLabelChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.titleLabelChanged, fn);
return () => {
this.event.off(EVENT_NAMES.titleLabelChanged, fn);
};
}
onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable {
this.event.on(EVENT_NAMES.expandableChanged, fn);
return () => {
this.event.off(EVENT_NAMES.expandableChanged, fn);
};
}
/**
* 触发 onExpandableChanged 回调
*/
notifyExpandableChanged(): void {
this.event.emit(EVENT_NAMES.expandableChanged, this.expandable);
}
notifyTitleLabelChanged(): void {
this.event.emit(EVENT_NAMES.titleLabelChanged, this.title);
}
setHidden(flag: boolean) {
if (this.node.conditionGroup) {
return;
}
this.node.visible = !flag;
this.event.emit(EVENT_NAMES.hiddenChanged, flag);
}
isFocusingNode(): boolean {
const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation;
if (!loc) {
return false;
}
return (
isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.id
);
}
setExpanded(value: boolean) {
this._expanded = value;
this.event.emit(EVENT_NAMES.expandedChanged, value);
}
isRoot(includeOriginalRoot = false) {
const rootNode = this.pluginContext.project.getCurrentDocument()?.root;
return this.tree.root === this || (includeOriginalRoot && rootNode === this.node);
}
/**
* 是否是响应投放区
*/
isResponseDropping(): boolean {
const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation;
if (!loc) {
return false;
}
return loc.target?.id === this.id;
}
setTitleLabel(label: string) {
const origLabel = this.titleLabel;
if (label === origLabel) {
return;
}
if (label === '') {
this.node.getExtraProp('title', false)?.remove();
} else {
this.node.getExtraProp('title', true)?.setValue(label);
}
this.event.emit(EVENT_NAMES.titleLabelChanged, this);
}
/**
* 是否是容器，允许子节点拖入
*/
@ -298,39 +324,18 @@ export default class TreeNode {
}
}
private _node: IPublicModelNode;
get node(): IPublicModelNode {
return this._node;
}
readonly tree: Tree;
constructor(tree: Tree, node: IPublicModelNode, pluginContext: IPublicModelPluginContext) {
this.tree = tree;
this.pluginContext = pluginContext;
this._node = node;
}
setNode(node: IPublicModelNode) {
if (this._node !== node) {
this._node = node;
}
}
private _filterResult: FilterResult = {
filterWorking: false,
matchChild: false,
matchSelf: false,
keywords: '',
};
get filterReult(): FilterResult {
return this._filterResult;
}
setFilterReult(val: FilterResult) {
this._filterResult = val;
this.event.emit(EVENT_NAMES.filterResultChanged)
this.event.emit(EVENT_NAMES.filterResultChanged);
}
}

10
packages/plugin-outline-pane/src/controllers/tree.ts
View File

@ -1,5 +1,5 @@
import TreeNode from './tree-node';
import { IPublicModelNode, IPublicModelPluginContext } from '@alilc/lowcode-types';
import { IPublicModelNode, IPublicModelPluginContext, IPublicTypePropChangeOptions } from '@alilc/lowcode-types';
export class Tree {
private treeNodesMap = new Map<string, TreeNode>();
@ -25,6 +25,14 @@ export class Tree {
const treeNode = this.getTreeNodeById(node.id);
treeNode?.notifyExpandableChanged();
});
doc?.onChangeNodeProp((info: IPublicTypePropChangeOptions) => {
const { node, key } = info;
if (key === '___title___') {
const treeNode = this.getTreeNodeById(node.id);
treeNode?.notifyTitleLabelChanged();
}
});
}
setNodeSelected(nodeId: string): void {