Add python console to 3D view

.pre-commit-config.yaml

@@ -41,6 +41,7 @@ repos:
     rev: v4.0.0-alpha.8
     hooks:
       - id: prettier
+        entry: prettier --no-error-on-unmatched-pattern --write --ignore-unknown
 
   - repo: https://github.com/pre-commit/mirrors-eslint
     rev: v9.4.0

packages/base/package.json

@@ -42,6 +42,8 @@
     "@jupytercad/schema": "^2.0.2",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
+    "@jupyterlab/completer": "^4.2.4",
+    "@jupyterlab/console": "^4.2.4",
     "@jupyterlab/coreutils": "^6.0.0",
     "@jupyterlab/docregistry": "^4.0.0",
     "@jupyterlab/filebrowser": "^4.0.0",

packages/base/src/3dview/index.ts

@@ -1 +1,2 @@
 export * from './mainview';
+export * from './mainviewwidget';

packages/base/src/3dview/mainviewwidget.tsx

@@ -0,0 +1,24 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+import * as React from 'react';
+
+import { MainView } from './mainview';
+import { MainViewModel } from './mainviewmodel';
+
+export class JupyterCadMainViewPanel extends ReactWidget {
+  /**
+   * Construct a `JupyterCadPanel`.
+   *
+   * @param context - The documents context.
+   */
+  constructor(options: { mainViewModel: MainViewModel }) {
+    super();
+    this._mainViewModel = options.mainViewModel;
+    this.addClass('jp-jupytercad-panel');
+  }
+
+  render(): JSX.Element {
+    return <MainView viewModel={this._mainViewModel} />;
+  }
+
+  private _mainViewModel: MainViewModel;
+}

packages/base/src/commands.ts

@@ -15,7 +15,7 @@ import { JupyterFrontEnd } from '@jupyterlab/application';
 import { showErrorMessage, WidgetTracker } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
 import { redoIcon, undoIcon } from '@jupyterlab/ui-components';
-
+import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { FormDialog } from './formdialog';
 import { SketcherDialog } from './sketcher/sketcherdialog';
 import {
@@ -696,12 +696,69 @@ export function addCommands(
   tracker: WidgetTracker<JupyterCadWidget>,
   translator: ITranslator,
   formSchemaRegistry: IJCadFormSchemaRegistry,
-  workerRegistry: IJCadWorkerRegistry
+  workerRegistry: IJCadWorkerRegistry,
+  completionProviderManager: ICompletionProviderManager | undefined
 ): void {
   workerRegistry.getWorker;
   const trans = translator.load('jupyterlab');
   const { commands } = app;
   Private.updateFormSchema(formSchemaRegistry);
+
+  commands.addCommand(CommandIDs.toggleConsole, {
+    label: trans.__('Toggle console'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: async () => await Private.toggleConsole(tracker)
+  });
+  commands.addCommand(CommandIDs.executeConsole, {
+    label: trans.__('Execute console'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: () => Private.executeConsole(tracker)
+  });
+  commands.addCommand(CommandIDs.removeConsole, {
+    label: trans.__('Remove console'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: () => Private.removeConsole(tracker)
+  });
+
+  commands.addCommand(CommandIDs.invokeCompleter, {
+    label: trans.__('Display the completion helper.'),
+    execute: () => {
+      const currentWidget = tracker.currentWidget;
+      if (!currentWidget || !completionProviderManager) {
+        return;
+      }
+      const id = currentWidget.content.consolePanel?.id;
+      if (id) {
+        return completionProviderManager.invoke(id);
+      }
+    }
+  });
+
+  commands.addCommand(CommandIDs.selectCompleter, {
+    label: trans.__('Select the completion suggestion.'),
+    execute: () => {
+      const currentWidget = tracker.currentWidget;
+      if (!currentWidget || !completionProviderManager) {
+        return;
+      }
+      const id = currentWidget.content.consolePanel?.id;
+      if (id) {
+        return completionProviderManager.select(id);
+      }
+    }
+  });
   commands.addCommand(CommandIDs.redo, {
     label: trans.__('Redo'),
     isEnabled: () => {
@@ -1062,6 +1119,12 @@ export namespace CommandIDs {
   export const updateClipView = 'jupytercad:updateClipView';
 
   export const exportJcad = 'jupytercad:exportJcad';
+
+  export const toggleConsole = 'jupytercad:toggleConsole';
+  export const invokeCompleter = 'jupytercad:invokeConsoleCompleter';
+  export const removeConsole = 'jupytercad:removeConsole';
+  export const executeConsole = 'jupytercad:executeConsole';
+  export const selectCompleter = 'jupytercad:selectConsoleCompleter';
 }
 
 namespace Private {
@@ -1217,4 +1280,44 @@ namespace Private {
       await dialog.launch();
     };
   }
+
+  export function executeConsole(
+    tracker: WidgetTracker<JupyterCadWidget>
+  ): void {
+    const current = tracker.currentWidget;
+
+    if (!current) {
+      return;
+    }
+    current.content.executeConsole();
+  }
+
+  export function removeConsole(
+    tracker: WidgetTracker<JupyterCadWidget>
+  ): void {
+    const current = tracker.currentWidget;
+
+    if (!current) {
+      return;
+    }
+    current.content.removeConsole();
+  }
+
+  export async function toggleConsole(
+    tracker: WidgetTracker<JupyterCadWidget>
+  ): Promise<void> {
+    const current = tracker.currentWidget;
+
+    if (!current) {
+      return;
+    }
+    const currentPath = current.context.path.split(':');
+    let realPath = '';
+    if (currentPath.length > 1) {
+      realPath = currentPath[1];
+    } else {
+      realPath = currentPath[0];
+    }
+    await current.content.toggleConsole(realPath);
+  }
 }

packages/base/src/console/consoleview.ts

@@ -0,0 +1,87 @@
+import { ConsolePanel } from '@jupyterlab/console';
+import { ServiceManager } from '@jupyterlab/services';
+import { BoxPanel, Widget } from '@lumino/widgets';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
+import { debounce } from '../tools';
+import {
+  closeIcon,
+  CommandToolbarButton,
+  expandIcon,
+  Toolbar
+} from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+
+export class ConsoleView extends BoxPanel {
+  constructor(options: ConsoleView.IOptions) {
+    super({ direction: 'top-to-bottom' });
+    this.addClass('jpcad-console');
+    const { manager, contentFactory, mimeTypeService, rendermime } = options;
+    const clonedRendermime = rendermime.clone();
+    this._consolePanel = new ConsolePanel({
+      manager,
+      contentFactory,
+      mimeTypeService,
+      rendermime: clonedRendermime,
+      kernelPreference: { name: 'python3', shutdownOnDispose: true }
+    });
+    this._consolePanel.console.node.dataset.jpInteractionMode = 'notebook';
+    this.addWidget(this._consolePanel);
+    BoxPanel.setStretch(this._consolePanel, 1);
+
+    this._consolePanel.toolbar.addItem('spacer', Toolbar.createSpacerItem());
+
+    this._consolePanel.toolbar.addItem(
+      'toggle',
+      new CommandToolbarButton({
+        label: '',
+        icon: expandIcon,
+        id: 'jupytercad:toggleConsole',
+        commands: options.commandRegistry
+      })
+    );
+    this._consolePanel.toolbar.addItem(
+      'close',
+      new CommandToolbarButton({
+        label: '',
+        icon: closeIcon,
+        id: 'jupytercad:removeConsole',
+        commands: options.commandRegistry
+      })
+    );
+  }
+
+  get consolePanel() {
+    return this._consolePanel;
+  }
+
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._consolePanel.dispose();
+    super.dispose();
+  }
+  execute() {
+    this._consolePanel.console.execute(false);
+  }
+
+  protected onResize(msg: Widget.ResizeMessage): void {
+    super.onResize(msg);
+    this._resize();
+  }
+  private _consolePanel: ConsolePanel;
+  private _resize = debounce(() => {
+    window.dispatchEvent(new Event('resize'));
+  }, 200);
+}
+
+export namespace ConsoleView {
+  export interface IOptions {
+    manager: ServiceManager.IManager;
+    contentFactory: ConsolePanel.IContentFactory;
+    mimeTypeService: IEditorMimeTypeService;
+    rendermime: IRenderMimeRegistry;
+    commandRegistry: CommandRegistry;
+  }
+}

packages/base/src/console/index.ts

@@ -0,0 +1 @@
+export * from './consoleview';

packages/base/src/keybindings.json

@@ -13,5 +13,20 @@
     "command": "jupytercad:removeObject",
     "keys": ["Delete"],
     "selector": "body"
+  },
+  {
+    "command": "jupytercad:executeConsole",
+    "keys": ["Shift Enter"],
+    "selector": ".jpcad-console .jp-CodeConsole[data-jp-interaction-mode='notebook'] .jp-CodeConsole-promptCell"
+  },
+  {
+    "command": "jupytercad:invokeConsoleCompleter",
+    "keys": ["Tab"],
+    "selector": ".jpcad-console .jp-CodeConsole-promptCell .jp-mod-completer-enabled"
+  },
+  {
+    "command": "jupytercad:selectConsoleCompleter",
+    "keys": ["Enter"],
+    "selector": ".jpcad-console .jp-ConsolePanel .jp-mod-completer-active"
   }
 ]

packages/base/src/toolbar/usertoolbaritem.tsx

@@ -71,10 +71,21 @@ export class UsersItem extends React.Component<IProps, IState> {
     return el;
   }
 
+  private filterDuplicated(usersList: IUserData[]): IUserData[] {
+    const newList: IUserData[] = [];
+    const selected = new Set<string>();
+    for (const element of usersList) {
+      if (!selected.has(element.userData.username)) {
+        selected.add(element.userData.username);
+        newList.push(element);
+      }
+    }
+    return newList;
+  }
   render(): React.ReactNode {
     return (
       <div className="jpcad-toolbar-usertoolbar">
-        {this.state.usersList.map(item => {
+        {this.filterDuplicated(this.state.usersList).map(item => {
           if (item.userId !== this._model.currentUserId) {
             return this.createUserIcon(item);
           }

packages/base/src/toolbar/widget.tsx

@@ -4,7 +4,8 @@ import {
   ReactWidget,
   redoIcon,
   Toolbar,
-  undoIcon
+  undoIcon,
+  terminalIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Widget } from '@lumino/widgets';
@@ -200,7 +201,17 @@ export class ToolbarWidget extends Toolbar {
       );
 
       this.addItem('separator6', new Separator());
+      this.addItem(
+        'Toggle console',
+        new CommandToolbarButton({
+          id: CommandIDs.toggleConsole,
+          commands: options.commands,
+          label: '',
+          icon: terminalIcon
+        })
+      );
 
+      this.addItem('separator7', new Separator());
       (options.externalCommands ?? []).forEach(cmd => {
         this.addItem(
           cmd.name,