Removes grid

src/mainview.tsx

@@ -23,7 +23,6 @@ import { v4 as uuid } from 'uuid';
 import { JupyterCadModel } from './model';
 import {
   AxeHelper,
-  GridHelper,
   IDict,
   IDisplayShape,
   IJupyterCadClientState,
@@ -44,8 +43,6 @@ THREE.Mesh.prototype.raycast = acceleratedRaycast;
 
 const DARK_BG_COLOR = 'linear-gradient(rgb(0, 0, 42), rgb(82, 87, 110))';
 const LIGHT_BG_COLOR = 'radial-gradient(#efeded, #8f9091)';
-const DARK_GRID_COLOR = 0x4f6882;
-const LIGHT_GRID_COLOR = 0x888888;
 
 const DEFAULT_MESH_COLOR = new THREE.Color('#434442');
 const SELECTED_MESH_COLOR = new THREE.Color('#AB5118');
@@ -749,22 +746,6 @@ export class MainView extends React.Component<IProps, IStates> {
     sender: ObservableMap<JSONValue>,
     change: IObservableMap.IChangedArgs<JSONValue>
   ): void {
-    if (change.key === 'grid') {
-      this._gridHelper?.removeFromParent();
-      const grid = change.newValue as GridHelper | undefined;
-
-      if (change.type !== 'remove' && grid && grid.visible) {
-        this._gridHelper = new THREE.GridHelper(
-          grid.size,
-          grid.divisions,
-          this.state.lightTheme ? LIGHT_GRID_COLOR : DARK_GRID_COLOR,
-          this.state.lightTheme ? LIGHT_GRID_COLOR : DARK_GRID_COLOR
-        );
-        this._gridHelper.geometry.rotateX(Math.PI / 2);
-        this._scene.add(this._gridHelper);
-      }
-    }
-
     if (change.key === 'axe') {
       this._sceneAxe?.removeFromParent();
       const axe = change.newValue as AxeHelper | undefined;
@@ -874,7 +855,6 @@ export class MainView extends React.Component<IProps, IStates> {
   private _requestID: any = null; // ID of window.requestAnimationFrame
   private _geometry: THREE.BufferGeometry; // Threejs BufferGeometry
   private _refLength: number | null = null; // Length of bounding box of current object
-  private _gridHelper: THREE.GridHelper | null = null; // Threejs grid
   private _sceneAxe: THREE.Object3D | null; // Array of  X, Y and Z axe
   private _controls: OrbitControls; // Threejs control
   private _resizeTimeout: any;

src/toolbar/gridtoolbar.tsx → src/toolbar/helpertoolbar.tsx

@@ -2,7 +2,7 @@ import { Button } from '@jupyterlab/ui-components';
 
 import * as React from 'react';
 
-import { AxeHelper, GridHelper, IDict } from '../types';
+import { AxeHelper, IDict } from '../types';
 import { JupyterCadPanel } from '../widget';
 import { FormDialog } from './formdialog';
 import { ToolbarModel } from './model';
@@ -12,10 +12,28 @@ interface IProps {
 }
 
 interface IState {
-  Grid: IDict;
   Axe: IDict;
 }
 
+const FORM_SCHEMA = {
+  "type": "object",
+  "required": [
+    "Size",
+    "Visible"
+  ],
+  "additionalProperties": false,
+  "properties": {
+    "Size": {
+      "type": "number",
+      "description": "Axe's size"
+    },
+    "Visible": {
+      "type": "boolean",
+      "description": "Whether the axe is visible or not"
+    }
+  }
+};
+
 export class HelpersToolbarReact extends React.Component<IProps, IState> {
   private _panel: JupyterCadPanel;
 
@@ -34,45 +52,18 @@ export class HelpersToolbarReact extends React.Component<IProps, IState> {
   }
 
   private _createSchema(): IState {
-    const grid: GridHelper = {
-      size: 40,
-      divisions: 40,
-      visible: false
-    };
     const axe: AxeHelper = {
       size: 5,
       visible: false
     };
-    this._panel.setView('grid', grid);
     this._panel.setView('axe', axe);
 
     return {
-      Grid: {
-        title: 'Grid Helper',
-        shape: 'Grid::Helper',
-        schema: this.props.toolbarModel.formSchema['Grid::Helper'],
-        default: {
-          Name: 'Grid Helper',
-          Size: grid?.size ?? 40,
-          Divisions: grid?.divisions ?? 40,
-          Visible: grid?.visible ?? true
-        },
-        syncData: (props: IDict) => {
-          const { Size, Divisions, Visible } = props;
-          const grid: GridHelper = {
-            size: Size,
-            divisions: Divisions,
-            visible: Visible
-          };
-          this._panel.setView('grid', grid);
-        }
-      },
       Axe: {
         title: 'Axe Helper',
         shape: 'Axe::Helper',
-        schema: this.props.toolbarModel.formSchema['Axe::Helper'],
+        schema: FORM_SCHEMA,
         default: {
-          Name: 'Axe Helper',
           Size: axe?.size ?? 5,
           Visible: axe?.visible ?? true
         },
@@ -89,24 +80,14 @@ export class HelpersToolbarReact extends React.Component<IProps, IState> {
   }
 
   private _updateSchema(): void {
-    const grid = this._panel.getView('grid') as GridHelper | undefined;
     const axe = this._panel.getView('axe') as AxeHelper | undefined;
-
-    const { Grid, Axe } = this.state;
-    Grid['default'] = {
-      Name: 'Grid Helper',
-      Size: grid?.size ?? 40,
-      Divisions: grid?.divisions ?? 40,
-      Visible: grid?.visible ?? true
-    };
-
+    const { Axe } = this.state;
     Axe['default'] = {
-      Name: 'Axe Helper',
       Size: axe?.size ?? 5,
       Visible: axe?.visible ?? true
     };
 
-    this.setState({ Grid, Axe });
+    this.setState({ Axe });
   }
 
   render(): React.ReactNode {

src/toolbar/toolbar.tsx

@@ -5,7 +5,7 @@ import { ToolbarModel } from './model';
 import { OperatorToolbarReact } from './operatortoolbar';
 import { PartToolbarReact } from './parttoolbar';
 import { UserToolbarReact } from './usertoolbar';
-import { HelpersToolbarReact } from './gridtoolbar';
+import { HelpersToolbarReact } from './helpertoolbar';
 
 interface IProps {
   toolbarModel: ToolbarModel;

src/types.ts

@@ -109,15 +109,6 @@ export type Camera = {
   up: number[];
 };
 
-/**
- * Grid's dimensions
- */
-export type GridHelper = {
-  size: number;
-  divisions: number;
-  visible: boolean;
-};
-
 /**
  * Axe's dimensions
  */