style: fix for plugin-outline-pane

packages/plugin-outline-pane/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: 'eslint-config-ali/typescript/react',
+  rules: {
+    'no-unused-expressions': 1,
+    'react/no-multi-comp': 1,
+  }
+}

packages/plugin-outline-pane/src/helper/dwell-timer.ts

@@ -10,7 +10,14 @@ export default class DwellTimer {
 
   private event?: LocateEvent;
 
-  constructor(private decide: (node: ParentalNode, event: LocateEvent) => void, private timeout: number = 500) {}
+  private decide: (node: ParentalNode, event: LocateEvent) => void;
+
+  private timeout: number = 500;
+
+  constructor(decide: (node: ParentalNode, event: LocateEvent) => void, timeout: number = 500) {
+    this.decide = decide;
+    this.timeout = timeout;
+  }
 
   focus(node: ParentalNode, event: LocateEvent) {
     this.event = event;

packages/plugin-outline-pane/src/helper/indent-track.ts

@@ -1,4 +1,4 @@
-import { DropLocation, ParentalNode, isLocationChildrenDetail, Node } from '@ali/lowcode-designer';
+import { DropLocation, ParentalNode, isLocationChildrenDetail } from '@ali/lowcode-designer';
 
 const IndentSensitive = 15;
 export class IndentTrack {

packages/plugin-outline-pane/src/main.ts

@@ -46,7 +46,13 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
     return this._visible;
   }
 
-  constructor(readonly editor: IEditor, readonly at: string | symbol) {
+  readonly editor: IEditor;
+
+  readonly at: string | symbol;
+
+  constructor(editor: IEditor, at: string | symbol) {
+    this.editor = editor;
+    this.at = at;
     let inited = false;
     const setup = async () => {
       if (inited) {
@@ -198,12 +204,10 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
         } else {
           this.dwell.reset();
         }
-      } else {
+      // FIXME: recreate new location
-        // FIXME: recreate new location
+      } else if ((originLoc.detail as LocationChildrenDetail).near) {
-        if ((originLoc.detail as LocationChildrenDetail).near) {
+        (originLoc.detail as LocationChildrenDetail).near = undefined;
-          (originLoc.detail as LocationChildrenDetail).near = undefined;
+        this.dwell.reset();
-          this.dwell.reset();
-        }
       }
       return;
     }
@@ -216,12 +220,12 @@ export class OutlineMain implements ISensor, ITreeBoard, IScrollable {
         let { focusSlots } = pos;
         let { node } = treeNode;
         if (isDragNodeObject(dragObject)) {
-          const nodes = operationalNodes;
+          const newNodes = operationalNodes;
-          let i = nodes.length;
+          let i = newNodes.length;
           let p: any = node;
           while (i-- > 0) {
-            if (contains(nodes[i], p)) {
+            if (contains(newNodes[i], p)) {
-              p = nodes[i].parent;
+              p = newNodes[i].parent;
             }
           }
           if (p !== node) {

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

@@ -11,7 +11,10 @@ export interface ITreeBoard {
 }
 
 export class TreeMaster {
-  constructor(readonly designer: Designer) {
+  readonly designer: Designer;
+
+  constructor(designer: Designer) {
+    this.designer = designer;
     let startTime: any;
     designer.dragon.onDragstart(() => {
       startTime = Date.now() / 1000;

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

@@ -218,7 +218,10 @@ export default class TreeNode {
     return this._node;
   }
 
-  constructor(readonly tree: Tree, node: Node) {
+  readonly tree: Tree;
+
+  constructor(tree: Tree, node: Node) {
+    this.tree = tree;
     this.document = node.document;
     this.designer = this.document.designer;
     this._node = node;

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

@@ -8,7 +8,10 @@ export class Tree {
 
   readonly id: string;
 
-  constructor(readonly document: DocumentModel) {
+  readonly document: DocumentModel;
+
+  constructor(document: DocumentModel) {
+    this.document = document;
     this.root = this.getTreeNode(document.rootNode);
     this.id = document.id;
   }

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

@@ -3,8 +3,6 @@ import classNames from 'classnames';
 import { observer, Title, Tip, globalContext, Editor } from '@ali/lowcode-editor-core';
 import { IconArrowRight } from '../icons/arrow-right';
 import { IconEyeClose } from '../icons/eye-close';
-import { IconLock } from '../icons/lock';
-import { IconUnlock } from '../icons/unlock';
 import { intl, intlNode } from '../locale';
 import TreeNode from '../tree-node';
 import { IconEye } from '../icons/eye';
@@ -14,7 +12,7 @@ import { IconRadioActive } from '../icons/radio-active';
 import { IconRadio } from '../icons/radio';
 import { createIcon } from '@ali/lowcode-utils';
 
-function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: object) {
+function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
   const editor = globalContext.get(Editor);
   const node = treeNode?.node;
   const npm = node?.componentMeta?.npm;
@@ -172,28 +170,28 @@ export default class TreeTitle extends Component<{
   }
 }
 
-@observer
+// @observer
-class LockBtn extends Component<{ treeNode: TreeNode }> {
+// class LockBtn extends Component<{ treeNode: TreeNode }> {
-  shouldComponentUpdate() {
+//   shouldComponentUpdate() {
-    return false;
+//     return false;
-  }
+//   }
 
-  render() {
+//   render() {
-    const { treeNode } = this.props;
+//     const { treeNode } = this.props;
-    return (
+//     return (
-      <div
+//       <div
-        className="tree-node-lock-btn"
+//         className="tree-node-lock-btn"
-        onClick={(e) => {
+//         onClick={(e) => {
-          e.stopPropagation();
+//           e.stopPropagation();
-          treeNode.setLocked(!treeNode.locked);
+//           treeNode.setLocked(!treeNode.locked);
-        }}
+//         }}
-      >
+//       >
-        {treeNode.locked ? <IconLock /> : <IconUnlock />}
+//         {treeNode.locked ? <IconLock /> : <IconUnlock />}
-        <Tip>{treeNode.locked ? intl('Unlock') : intl('Lock')}</Tip>
+//         <Tip>{treeNode.locked ? intl('Unlock') : intl('Lock')}</Tip>
-      </div>
+//       </div>
-    );
+//     );
-  }
+//   }
-}
+// }
 
 @observer
 class HideBtn extends Component<{ treeNode: TreeNode }> {

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

@@ -152,7 +152,7 @@ export default class TreeView extends Component<{ tree: Tree }> {
     return (
       <div
         className="lc-outline-tree"
-        ref={(shell) => (this.shell = shell)}
+        ref={(shell) => { this.shell = shell; }}
         onMouseDownCapture={this.onMouseDown}
         onMouseOver={this.onMouseOver}
         onClick={this.onClick}