Replace the FormDialog by a toggle button for the axes helper (#726)

* Replace the FormDialog by a toggle button for the axes helper.
Set the material depthTest property to false in order to always render the axis on top of the shapes.

* Add a renderOrder
to the axesHelper and on the boudingBox too as for sake of safety.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Remove size property from AxeHelper type.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: HaudinFlorence

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

@@ -353,6 +353,7 @@ export function buildShape(options: {
   );
   boundingBox.position.copy(center);
   boundingBox.visible = false;
+  boundingBox.renderOrder = 1;
   boundingBox.name = SELECTION_BOUNDING_BOX;
   meshGroup.add(boundingBox);
 

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

@@ -1521,10 +1521,15 @@ export class MainView extends React.Component<IProps, IStates> {
   ): void {
     if (change.key === 'axes') {
       this._sceneAxe?.removeFromParent();
-      const axe = change.newValue as AxeHelper | undefined;
-
+      const axe = change.newValue as AxeHelper;
       if (change.type !== 'remove' && axe && axe.visible) {
-        this._sceneAxe = new THREE.AxesHelper(axe.size);
+        const axesHelper = new THREE.AxesHelper(
+          this._refLength ? this._refLength * 5 : 20
+        );
+        const material = axesHelper.material as THREE.LineBasicMaterial;
+        material.depthTest = false;
+        axesHelper.renderOrder = 1;
+        this._sceneAxe = axesHelper;
         this._scene.add(this._sceneAxe);
       }
     }

packages/base/src/commands.ts

@@ -41,12 +41,17 @@ import {
 } from './tools';
 import keybindings from './keybindings.json';
 import { DEFAULT_MESH_COLOR } from './3dview/helpers';
-import { JupyterCadPanel, JupyterCadWidget } from './widget';
+import { JupyterCadWidget } from './widget';
 import { PathExt } from '@jupyterlab/coreutils';
 import { MainViewModel } from './3dview/mainviewmodel';
 import { handleRemoveObject } from './panelview';
 import { v4 as uuid } from 'uuid';
-import { CameraSettings, ExplodedView, JupyterCadTracker } from './types';
+import {
+  AxeHelper,
+  CameraSettings,
+  ExplodedView,
+  JupyterCadTracker
+} from './types';
 import { JSONObject } from '@lumino/coreutils';
 import { JupyterCadDocumentWidget } from './widget';
 
@@ -520,40 +525,6 @@ const OPERATORS = {
   }
 };
 
-const AXES_FORM = {
-  title: 'Axes Helper',
-  schema: {
-    type: 'object',
-    required: ['Size', 'Visible'],
-    additionalProperties: false,
-    properties: {
-      Size: {
-        type: 'number',
-        description: 'Size of the axes'
-      },
-      Visible: {
-        type: 'boolean',
-        description: 'Whether the axes are visible or not'
-      }
-    }
-  },
-  default: (panel: JupyterCadPanel) => {
-    return {
-      Size: panel.axes?.size ?? 5,
-      Visible: panel.axes?.visible ?? true
-    };
-  },
-  syncData: (panel: JupyterCadPanel) => {
-    return (props: IDict) => {
-      const { Size, Visible } = props;
-      panel.axes = {
-        size: Size,
-        visible: Visible
-      };
-    };
-  }
-};
-
 const EXPORT_FORM = {
   title: 'Export to .jcad',
   schema: {
@@ -968,22 +939,29 @@ export function addCommands(
     label: trans.__('Axes Helper'),
     isEnabled: () => Boolean(tracker.currentWidget),
     icon: axesIcon,
+    isToggled: () => {
+      const current = tracker.currentWidget?.content;
+      return current?.axes.visible === true;
+    },
+
     execute: async () => {
       const current = tracker.currentWidget;
 
       if (!current) {
         return;
       }
-
-      const dialog = new FormDialog({
-        model: current.model,
-        title: AXES_FORM.title,
-        schema: AXES_FORM.schema,
-        sourceData: AXES_FORM.default(current.content),
-        syncData: AXES_FORM.syncData(current.content),
-        cancelButton: true
-      });
-      await dialog.launch();
+      const axes: AxeHelper = current.content.axes;
+      if (axes.visible === true) {
+        current.content.axes = {
+          ...current.content.axes,
+          visible: false
+        };
+      } else {
+        current.content.axes = {
+          ...current.content.axes,
+          visible: true
+        };
+      }
     }
   });
 

packages/base/src/types.ts

@@ -11,7 +11,6 @@ export type ValueOf<T> = T[keyof T];
  * Axe's dimensions
  */
 export type AxeHelper = {
-  size: number;
   visible: boolean;
 };
 

packages/base/src/widget.ts

@@ -114,9 +114,11 @@ export class JupyterCadPanel extends SplitPanel {
   }) {
     this._view = new ObservableMap<JSONValue>({});
     const cameraSettings: CameraSettings = { type: 'Perspective' };
+    const axes: AxeHelper = { visible: false };
     this._view.set('cameraSettings', cameraSettings);
     const explodedView: ExplodedView = { enabled: false, factor: 0 };
     this._view.set('explodedView', explodedView);
+    this._view.set('axes', axes);
     this._mainViewModel = new MainViewModel({
       jcadModel: options.model,
       workerRegistry: options.workerRegistry,
@@ -162,12 +164,12 @@ export class JupyterCadPanel extends SplitPanel {
     return this._mainViewModel;
   }
 
-  get axes(): AxeHelper | undefined {
-    return this._view.get('axes') as AxeHelper | undefined;
+  get axes(): AxeHelper {
+    return this._view.get('axes') as AxeHelper;
   }
 
-  set axes(value: AxeHelper | undefined) {
-    this._view.set('axes', value || null);
+  set axes(value: AxeHelper) {
+    this._view.set('axes', value);
   }
 
   get explodedView(): ExplodedView {