Added board select toolbar item

fill context menu with connected boards

Signed-off-by: jbicker <jan.bicker@typefox.io>
This commit is contained in:
jbicker 2019-06-26 14:08:45 +02:00
parent ff336dccc5
commit 4c66dec36e
5 changed files with 105 additions and 36 deletions

View File

@ -40,4 +40,12 @@ export namespace ArduinoCommands {
label: "Refresh attached boards"
}
export const SELECT_BOARD: Command = {
id: "arduino-select-board"
}
export const OPEN_BOARDS_DIALOG: Command = {
id: "arduino-open-boards-dialog"
}
}

View File

@ -4,16 +4,21 @@ import { CommonMenus } from "@theia/core/lib/browser";
import { ArduinoCommands } from "./arduino-commands";
import { SketchesService, Sketch } from "../common/protocol/sketches-service";
import { AWorkspaceService } from "./arduino-workspace-service";
import { BoardsService, Board, AttachedSerialBoard, AttachedNetworkBoard } from "../common/protocol/boards-service";
export namespace ArduinoOpenSketchContextMenu {
export const PATH: MenuPath = ['arduino-open-sketch-context-menu'];
export const OPEN_GROUP: MenuPath = [...PATH, '1_open'];
export const WS_SKETCHES_GROUP: MenuPath = [...PATH, '2_sketches'];
export const EXAMPLE_SKETCHES_GROUP: MenuPath = [...PATH, '3_examples'];
export namespace ArduinoToolbarContextMenu {
export const OPEN_SKETCH_PATH: MenuPath = ['arduino-open-sketch-context-menu'];
export const OPEN_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '1_open'];
export const WS_SKETCHES_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '2_sketches'];
export const EXAMPLE_SKETCHES_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '3_examples'];
export const SELECT_BOARDS_PATH: MenuPath = ['arduino-select-boards-context-menu'];
export const CONNECTED_GROUP: MenuPath = [...SELECT_BOARDS_PATH, '1_connected'];
export const OPEN_BOARDS_DIALOG_GROUP: MenuPath = [...SELECT_BOARDS_PATH, '2_open_boards_dialog'];
}
@injectable()
export class ArduinoFileMenuContribution implements MenuContribution {
export class ArduinoToolbarMenuContribution implements MenuContribution {
@inject(CommandRegistry)
protected readonly commands: CommandRegistry;
@ -21,31 +26,64 @@ export class ArduinoFileMenuContribution implements MenuContribution {
@inject(SketchesService)
protected readonly sketches: SketchesService;
@inject(BoardsService)
protected readonly boardsService: BoardsService;
constructor(
@inject(AWorkspaceService) protected readonly workspaceService: AWorkspaceService,
@inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry) {
workspaceService.onWorkspaceChanged(() => {
if (this.workspaceService.workspace) {
this.registerSketchesInMenu(menuRegistry);
this.registerConnectedBoardsInMenu(menuRegistry);
}
})
}
protected registerSketchesInMenu(registry: MenuModelRegistry) {
this.getWorkspaceSketches().then(sketches => {
sketches.forEach(sketch => {
const command: Command = {
id: 'openSketch' + sketch.name
}
this.commands.registerCommand(command, {
execute: () => this.commands.executeCommand(ArduinoCommands.OPEN_SKETCH.id, sketch)
});
protected async registerConnectedBoardsInMenu(registry: MenuModelRegistry) {
const { boards } = await this.boardsService.getAttachedBoards();
const selectedBoard = await this.boardsService.getSelectBoard();
const selectedPort = selectedBoard ? this.getPort(selectedBoard) : '';
boards.forEach(board => {
const port = this.getPort(board);
const command: Command = {
id: 'selectBoard' + port
}
this.commands.registerCommand(command, {
execute: () => this.commands.executeCommand(ArduinoCommands.SELECT_BOARD.id, board)
});
registry.registerMenuAction(ArduinoToolbarContextMenu.CONNECTED_GROUP, {
commandId: command.id,
label: board.name + (selectedPort === port ? '*' : '')
});
});
}
registry.registerMenuAction(ArduinoOpenSketchContextMenu.WS_SKETCHES_GROUP, {
commandId: command.id,
label: sketch.name
});
})
protected getPort(board: Board): string {
if(AttachedSerialBoard.is(board)){
return board.port;
}
if(AttachedNetworkBoard.is(board)) {
return 'netport' + board.port;
}
return '';
}
protected async registerSketchesInMenu(registry: MenuModelRegistry) {
const sketches = await this.getWorkspaceSketches();
sketches.forEach(sketch => {
const command: Command = {
id: 'openSketch' + sketch.name
}
this.commands.registerCommand(command, {
execute: () => this.commands.executeCommand(ArduinoCommands.OPEN_SKETCH.id, sketch)
});
registry.registerMenuAction(ArduinoToolbarContextMenu.WS_SKETCHES_GROUP, {
commandId: command.id,
label: sketch.name
});
})
}
@ -59,9 +97,14 @@ export class ArduinoFileMenuContribution implements MenuContribution {
commandId: ArduinoCommands.NEW_SKETCH.id
})
registry.registerMenuAction(ArduinoOpenSketchContextMenu.OPEN_GROUP, {
registry.registerMenuAction(ArduinoToolbarContextMenu.OPEN_GROUP, {
commandId: ArduinoCommands.OPEN_FILE_NAVIGATOR.id,
label: 'Open...'
});
registry.registerMenuAction(ArduinoToolbarContextMenu.OPEN_BOARDS_DIALOG_GROUP, {
commandId: ArduinoCommands.OPEN_BOARDS_DIALOG.id,
label: 'Select Other Board & Port'
});
}
}

View File

@ -5,7 +5,7 @@ import { EditorWidget } from '@theia/editor/lib/browser/editor-widget';
import { MessageService } from '@theia/core/lib/common/message-service';
import { CommandContribution, CommandRegistry } from '@theia/core/lib/common/command';
import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
import { BoardsService } from '../common/protocol/boards-service';
import { BoardsService, Board } from '../common/protocol/boards-service';
import { ArduinoCommands } from './arduino-commands';
import { ConnectedBoards } from './components/connected-boards';
import { CoreService } from '../common/protocol/core-service';
@ -23,7 +23,7 @@ import { EditorManager } from '@theia/editor/lib/browser';
import { ContextMenuRenderer, OpenerService, Widget } from '@theia/core/lib/browser';
import { OpenFileDialogProps, FileDialogService } from '@theia/filesystem/lib/browser/file-dialog';
import { FileSystem } from '@theia/filesystem/lib/common';
import { ArduinoOpenSketchContextMenu } from './arduino-file-menu';
import { ArduinoToolbarContextMenu } from './arduino-file-menu';
import { Sketch, SketchesService } from '../common/protocol/sketches-service';
import { WindowService } from '@theia/core/lib/browser/window/window-service';
import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution'
@ -120,6 +120,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
registry.registerItem({
id: ConnectedBoards.TOOLBAR_ID,
render: () => <BoardsToolBarItem
contextMenuRenderer={this.contextMenuRenderer}
onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
onUnknownBoard={this.onUnknownBoard.bind(this)} />,
// render: () => <ConnectedBoards
@ -181,7 +182,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
execute: async (widget: Widget, event: React.MouseEvent<HTMLElement>) => {
const el = (event.target as HTMLElement).parentElement;
if (el) {
this.contextMenuRenderer.render(ArduinoOpenSketchContextMenu.PATH, {
this.contextMenuRenderer.render(ArduinoToolbarContextMenu.OPEN_SKETCH_PATH, {
x: el.getBoundingClientRect().left,
y: el.getBoundingClientRect().top + el.offsetHeight
});
@ -222,6 +223,18 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
registry.registerCommand(ArduinoCommands.REFRESH_BOARDS, {
isEnabled: () => true,
execute: () => this.boardsNotificationService.notifyBoardsInstalled()
});
registry.registerCommand(ArduinoCommands.SELECT_BOARD, {
isEnabled: () => true,
execute: (board: Board) => {
console.log("SELECT BOARD HERE", board);
}
})
registry.registerCommand(ArduinoCommands.OPEN_BOARDS_DIALOG, {
isEnabled: () => true,
execute: () => {
console.log("OPEN THE DIALOG HERE");
}
})
}

View File

@ -27,7 +27,7 @@ import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service
import { AWorkspaceService } from './arduino-workspace-service';
import { ThemeService } from '@theia/core/lib/browser/theming';
import { ArduinoTheme } from './arduino-theme';
import { ArduinoFileMenuContribution } from './arduino-file-menu';
import { ArduinoToolbarMenuContribution } from './arduino-file-menu';
import { MenuContribution } from '@theia/core';
import { SketchFactory } from './sketch-factory';
import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
@ -55,7 +55,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
bind(CommandContribution).toService(ArduinoFrontendContribution);
bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
bind(MenuContribution).to(ArduinoFileMenuContribution).inSingletonScope();
bind(MenuContribution).to(ArduinoToolbarMenuContribution).inSingletonScope();
bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);

View File

@ -1,35 +1,40 @@
import * as React from 'react';
import { Board } from '../../common/protocol/boards-service';
import { ContextMenuRenderer } from '@theia/core/lib/browser';
import { ArduinoToolbarContextMenu } from '../arduino-file-menu';
export namespace BoardsToolBarItem {
export interface Props {
readonly onNoBoardsInstalled: () => void;
readonly onUnknownBoard: (board: Board) => void;
}
export interface State {
showOpenButton: boolean;
readonly contextMenuRenderer: ContextMenuRenderer;
}
}
export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, BoardsToolBarItem.State> {
export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, {}> {
constructor(props: BoardsToolBarItem.Props) {
super(props);
}
this.state = {
showOpenButton: false
protected readonly doShowSelectBoardsMenu = (event: React.MouseEvent<HTMLElement>) => this.showSelectBoardsMenu(event);
protected showSelectBoardsMenu(event: React.MouseEvent<HTMLElement>) {
const el = (event.target as HTMLElement).parentElement;
if (el) {
this.props.contextMenuRenderer.render(ArduinoToolbarContextMenu.SELECT_BOARDS_PATH, {
x: el.getBoundingClientRect().left,
y: el.getBoundingClientRect().top + el.offsetHeight
});
}
}
render(): React.ReactNode {
return <React.Fragment>
<div className='arduino-boards-toolbar-item-container' onClick={() => this.setState({ showOpenButton: !this.state.showOpenButton })}>
<div className='arduino-boards-toolbar-item-container' onClick={this.doShowSelectBoardsMenu}>
<div className='arduino-boards-toolbar-item'>
<div className='inner-container'>
<div className='label'>Hallo</div>
{this.state.showOpenButton ? <div className='arduino-open-boards-button'> OPEN BOARDS DIALOG </div> : ''}
<div className='label'>Show selected Board here</div>
</div>
</div>
</div>