feat: display the editor line and column info on statusBar

Author: wewoor

src/controller/editor.ts src/controller/editor.tsx

@@ -1,7 +1,11 @@
+import * as React from 'react';
 import { EditorEvent, IEditorTab } from 'mo/model/workbench/editor';
 import { Controller } from 'mo/react/controller';
-import { editorService } from 'mo/services';
+import { editorService, statusBarService } from 'mo/services';
 import { singleton } from 'tsyringe';
+import * as monaco from 'monaco-editor';
+import { editorLineColumnItem } from './statusBar';
+
 export interface IEditorController {
     groupSplitPos?: string[];
     onCloseAll?: (group: number) => void;
@@ -14,10 +18,11 @@ export interface IEditorController {
     onTabContextMenu?: (e: React.MouseEvent, tab: IEditorTab) => void;
 }
 
+type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
+
 @singleton()
 export class EditorController extends Controller implements IEditorController {
-    private editorInstance;
-    // Group Pos locate here temporary, we can move it to state or localStorage if you need
+    // Group Pos locate here temporary, we can move it to state or localStorage in future.
     public groupSplitPos: string[] = [];
 
     constructor() {
@@ -51,7 +56,7 @@ export class EditorController extends Controller implements IEditorController {
     };
 
     public onUpdateEditorIns = (
-        editorInstance: IStandaloneCodeEditor,
+        editorInstance: monaco.editor.IStandaloneCodeEditor,
         groupId: number
     ) => {
         if (editorInstance) {
@@ -79,7 +84,6 @@ export class EditorController extends Controller implements IEditorController {
         editorInstance: IStandaloneCodeEditor,
         groupId: number
     ) {
-        this.editorInstance = editorInstance;
         if (editorInstance) {
             editorInstance.onDidChangeModelContent((event: any) => {
                 const newValue = editorInstance.getValue();
@@ -97,19 +101,47 @@ export class EditorController extends Controller implements IEditorController {
                         },
                         groupId
                     );
+                    this.updateStatusBar(editorInstance);
                 }
             });
 
             editorInstance.onDidFocusEditorText(() => {
                 const group = editorService.getGroupById(groupId);
                 if (group?.tab!.id) {
                     editorService.setActive(groupId, group.tab.id);
+                    this.updateEditorLineColumnInfo(editorInstance);
                 }
             });
+
+            editorInstance.onDidChangeCursorSelection(() => {
+                this.updateEditorLineColumnInfo(editorInstance);
+            });
         }
     }
 
-    getEditorInstance() {
-        return this.editorInstance;
+    private updateStatusBar(editorInstance: IStandaloneCodeEditor) {
+        if (editorInstance) {
+            const model:
+                | monaco.editor.ITextModel
+                | null
+                | undefined = editorInstance?.getModel();
+            const decorations = model?.getAllDecorations();
+            console.log('decorations:', decorations);
+        }
+    }
+
+    public updateEditorLineColumnInfo(editorInstance: IStandaloneCodeEditor) {
+        if (editorInstance) {
+            const position = editorInstance.getPosition();
+            statusBarService.updateItem(
+                Object.assign(editorLineColumnItem, {
+                    render: () => (
+                        <span>
+                            Ln {position?.lineNumber}, Col {position?.column}
+                        </span>
+                    ),
+                })
+            );
+        }
     }
 }

src/controller/statusBar.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { IStatusBarItem, StatusBarEvent } from 'mo';
+import { Controller } from 'mo/react/controller';
+import { statusBarService } from 'mo/services';
+import { singleton } from 'tsyringe';
+import { Icon } from 'mo/components/icon';
+
+export interface IStatusBarController {
+    onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
+}
+
+const problems: IStatusBarItem = {
+    id: 'MoProblems',
+    sortIndex: 1,
+    name: 'Problems',
+};
+
+const notifications: IStatusBarItem = {
+    id: 'MoNotification',
+    sortIndex: 1,
+    name: 'Notification',
+    render: () => <Icon type="bell" />,
+};
+
+export const editorLineColumnItem: IStatusBarItem = {
+    id: 'EditorCountInfo',
+    sortIndex: 2,
+    name: 'Go to Line/Column',
+    render: () => <span>Ln 0, Col 0</span>,
+};
+
+@singleton()
+export class StatusBarController
+    extends Controller
+    implements IStatusBarController {
+    constructor() {
+        super();
+        this.initStatusBar();
+    }
+
+    public onClick = (e: React.MouseEvent, item: IStatusBarItem) => {
+        this.emit(StatusBarEvent.onClick, e, item);
+    };
+
+    public notify() {
+        console.log('service:', statusBarService);
+    }
+
+    private initStatusBar() {
+        statusBarService.appendLeftItem(problems);
+        statusBarService.appendRightItem(notifications);
+        statusBarService.appendRightItem(editorLineColumnItem);
+    }
+}

src/controller/statusBar.tsx

@@ -1,28 +1,11 @@
-import * as React from 'react';
-import { IExtensionService, IStatusBarItem } from 'mo';
+// import * as React from 'react';
+import { IExtensionService } from 'mo';
 import { IExtension } from 'mo/model/extension';
 import { statusBarService } from 'mo/services';
-import { Icon } from 'mo/components/icon';
 
 function init() {
-    const problems: IStatusBarItem = {
-        id: 'MoProblems',
-        sortIndex: 1,
-        name: 'Problems',
-    };
-
-    const notifications: IStatusBarItem = {
-        id: 'MoNotification',
-        sortIndex: 1,
-        name: 'Notification',
-        render: () => <Icon type="bell" />,
-    };
-
-    statusBarService.appendLeftItem(problems);
-    statusBarService.appendRightItem(notifications);
-
     statusBarService.onClick(function (e, item) {
-        console.log('statusBarService:', e, item, problems, notifications);
+        console.log('statusBarService:', e, item);
     });
 }
 

src/extensions/statusBar/index.tsx

@@ -87,6 +87,7 @@ export class StatusBarService
         const original = this.findById(item.id);
         if (original) {
             Object.assign(original, item);
+            this.render();
         }
     }
 }