Skip to content

Commit

Permalink
feat: display the editor line and column info on statusBar
Browse files Browse the repository at this point in the history
  • Loading branch information
wewoor committed Feb 19, 2021
1 parent 8e6b1af commit f502adb
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 52 deletions.
46 changes: 39 additions & 7 deletions src/controller/editor.ts → src/controller/editor.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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() {
Expand Down Expand Up @@ -51,7 +56,7 @@ export class EditorController extends Controller implements IEditorController {
};

public onUpdateEditorIns = (
editorInstance: IStandaloneCodeEditor,
editorInstance: monaco.editor.IStandaloneCodeEditor,
groupId: number
) => {
if (editorInstance) {
Expand Down Expand Up @@ -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();
Expand All @@ -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>
),
})
);
}
}
}
25 changes: 0 additions & 25 deletions src/controller/statusBar.ts

This file was deleted.

54 changes: 54 additions & 0 deletions src/controller/statusBar.tsx
Original file line number Diff line number Diff line change
@@ -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);
}
}
23 changes: 3 additions & 20 deletions src/extensions/statusBar/index.tsx
Original file line number Diff line number Diff line change
@@ -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);
});
}

Expand Down
1 change: 1 addition & 0 deletions src/services/workbench/statusBarService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export class StatusBarService
const original = this.findById(item.id);
if (original) {
Object.assign(original, item);
this.render();
}
}
}

0 comments on commit f502adb

Please sign in to comment.