fix: update outline tree when node loop property changes

Author: liukairui

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

@@ -37,6 +37,8 @@ enum EVENT_NAMES {
   expandableChanged = 'expandableChanged',
 
   conditionChanged = 'conditionChanged',
+
+  loopChanged = 'loopChanged',
 }
 
 export default class TreeNode {
@@ -160,6 +162,10 @@ export default class TreeNode {
     return this.node.hasCondition() && !this.node.conditionGroup;
   }
 
+  get loop(): boolean {
+    return this.node.hasLoop();
+  }
+
   get children(): TreeNode[] | null {
     return this.node.children?.map((node) => this.tree.getTreeNode(node)) || null;
   }
@@ -222,6 +228,14 @@ export default class TreeNode {
     };
   }
 
+  onLoopChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable {
+    this.event.on(EVENT_NAMES.loopChanged, fn);
+
+    return () => {
+      this.event.off(EVENT_NAMES.loopChanged, fn);
+    };
+  }
+
   onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable {
     this.event.on(EVENT_NAMES.expandableChanged, fn);
     return () => {
@@ -244,6 +258,10 @@ export default class TreeNode {
     this.event.emit(EVENT_NAMES.conditionChanged, this.condition);
   }
 
+  notifyLoopChanged(): void {
+    this.event.emit(EVENT_NAMES.loopChanged, this.loop);
+  }
+
   setHidden(flag: boolean) {
     if (this.node.conditionGroup) {
       return;

packages/plugin-outline-pane/src/controllers/tree.ts

@@ -36,12 +36,13 @@ export class Tree {
 
     doc?.onChangeNodeProp((info: IPublicTypePropChangeOptions) => {
       const { node, key } = info;
+      const treeNode = this.getTreeNodeById(node.id);
       if (key === '___title___') {
-        const treeNode = this.getTreeNodeById(node.id);
         treeNode?.notifyTitleLabelChanged();
       } else if (key === '___condition___') {
-        const treeNode = this.getTreeNodeById(node.id);
         treeNode?.notifyConditionChanged();
+      } else if (key === '___loop___') {
+        treeNode?.notifyLoopChanged();
       }
     });
 

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

@@ -28,6 +28,7 @@ export default class TreeTitle extends PureComponent<{
     editing: boolean;
     title: string;
     condition?: boolean;
+    loop?: boolean;
     visible?: boolean;
     filterWorking: boolean;
     keywords: string;
@@ -89,6 +90,7 @@ export default class TreeTitle extends PureComponent<{
       editing: false,
       title: treeNode.titleLabel,
       condition: treeNode.condition,
+      loop: treeNode.loop,
       visible: !treeNode.hidden,
     });
     treeNode.onTitleLabelChanged(() => {
@@ -101,6 +103,11 @@ export default class TreeTitle extends PureComponent<{
         condition: treeNode.condition,
       });
     });
+    treeNode.onLoopChanged(() => {
+      this.setState({
+        loop: treeNode.loop,
+      });
+    });
     treeNode.onHiddenChanged((hidden: boolean) => {
       this.setState({
         visible: !hidden,
@@ -207,7 +214,7 @@ export default class TreeTitle extends PureComponent<{
                   <Tip>{intlNode('Slot for {prop}', { prop: node.slotFor.key })}</Tip>
                 </a>
               )}
-              {node.hasLoop() && (
+              {this.state.loop && (
                 <a className="tree-node-tag loop">
                   {/* todo: click todo something */}
                   <IconLoop />