完善debug信息

Author: WeiWenda

src/components/layout/index.tsx

@@ -78,13 +78,8 @@ function LayoutComponent(props: {session: Session, config: Config, pluginManager
   const [curDocInfo, setCurDocInfo] = useState({});
   const [editor, setEditor] = useState<IDomEditor | null>(null);
   const [html, setHtml] = useState('<p>');
-  const [debugSelecting, setDebugSelecting] = useState(props.session.selecting);
   const [xml, setXml] = useState<string | undefined>();
   const [vd, setVd] = React.useState<Vditor>();
-  useEffect(() => {
-    console.log('found session change');
-    setDebugSelecting(props.session.selecting);
-  }, [props.session.selecting, props.session.hoverRow]);
   useEffect(() => {
     setCurPage(location.pathname.split('/')[1] || 'note');
   }, [location]);
@@ -403,24 +398,6 @@ function LayoutComponent(props: {session: Session, config: Config, pluginManager
                     }
                   }
                 }}/>
-          {
-            props.session.debugMode &&
-            <div style={{display: 'flex'}}>
-                {/*<div>*/}
-                {/*  <span>hover: {props.session.hoverRow?.row}</span>*/}
-                {/*  <span>anchor: {props.session.getAnchor()?.row}</span>*/}
-                {/*  <span>cursor: {props.session.cursor.row}</span>*/}
-                {/*  <span>selectInlinePath: {props.session.selectInlinePath?.row}</span>*/}
-                {/*</div>*/}
-                <div>
-                  <span>selecting: {debugSelecting ? 'true' : 'false'}</span>
-                  <span>dragging: {props.session.dragging}</span>
-                  <span>selectPopoverOpen: {props.session.selectPopoverOpen}</span>
-                  <span>selectMousePressing: {props.session.selectMousePressing}</span>
-                  <span>stopMonitor: {props.session.stopMonitor}</span>
-                </div>
-            </div>
-          }
           {
             curPage === 'note' &&
             <Button onClick={() => {

src/components/session/debugger.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {Session} from '../../share';
+type DebuggerProps = {
+  session: Session;
+};
+
+export class SessionDebugger extends React.Component<DebuggerProps, {}> {
+
+  public shouldComponentUpdate(nextProps: DebuggerProps) {
+    return true;
+  }
+
+  public render() {
+    return (
+      <div style={{position: 'fixed', top: '0px', left: '500px'}}>
+        {
+          this.props.session.stopMonitor &&
+          <div>
+              Stopping keydown monitor
+          </div>
+        }
+        {
+          this.props.session.hoverRow &&
+          <div>
+              Hovering {this.props.session.hoverRow.row}
+          </div>
+        }
+        {
+          this.props.session.selecting &&
+          <div>
+            <div>
+                Selecting anchor {this.props.session.getAnchor()?.row} cursor {this.props.session.cursor.row}
+            </div>
+            {
+              this.props.session.selectInlinePath &&
+              <div>
+                  Inline startCol {this.props.session.getAnchor()?.col} endCol {this.props.session.cursor.col}
+              </div>
+            }
+            {
+              this.props.session.selectPopoverOpen &&
+              <div>
+                  Popover Open
+              </div>
+            }
+          </div>
+        }
+      </div>
+    );
+  }
+}

src/share/components/Block/block.tsx

@@ -260,6 +260,9 @@ export default class BlockComponent extends React.Component<BlockProps, {}> {
     if (nextProps.filteredRows !== this.props.filteredRows) {
       return true;
     }
+    if (this.props.session.debugMode) {
+      return true;
+    }
     if (nextProps.session.lastHoverRow?.getAncestry().includes(nextProps.path.row) ||
       nextProps.session.hoverRow?.getAncestry().includes(nextProps.path.row)) {
       return true;

src/share/components/Session/Session.tsx

@@ -11,6 +11,7 @@ import { Col } from '../../ts/types';
 import Path from '../../ts/path';
 import $ from 'jquery';
 import { CursorsInfoTree } from '../../ts/cursor';
+import {SessionDebugger} from '../../../components/session/debugger';
 
 // TODO: move mode-specific logic into mode render functions
 
@@ -316,6 +317,10 @@ export default class SessionComponent extends React.Component<Props, State> {
              this.props.session.setHoverRow(null, 'mouse leave');
            }}
       >
+        {
+          this.props.session.debugMode &&
+            <SessionDebugger session={this.props.session}/>
+        }
         <BlockComponent
           iconNoTopLevel='fa-circle'
           iconDirFold='fa-circle'

src/share/ts/session.ts

@@ -185,6 +185,9 @@ export default class Session extends EventEmitter {
   public startKeyMonitor() {
     // console.log('startKeyMonitor');
     this.stopMonitor = this.clientStore.getClientSetting('curView') === 'discovery';
+    if (this.debugMode) {
+      this.emit('updateInner')
+    }
   }
 
   public markSelecting(selecting: boolean, callsite: string) {
@@ -195,6 +198,9 @@ export default class Session extends EventEmitter {
   public stopKeyMonitor(caller: string) {
     // console.log('stopKeyMonitor from:', caller);
     this.stopMonitor = true;
+    if (this.debugMode) {
+      this.emit('updateInner')
+    }
   }
 
   public applySearch(filterContent: string) {