Replace the formDialog by a toggle button for CameraSettings (#717)

* Modify updateCameraSettings command to use a toogle button instead of a formDialog.
Replace the camera icon by a video camera one.

* Take review comments into account.

* Update the label of updateCameraSettings command.

* Removed the possibility for cameraSettings to be undefined in the getter and setter, and update updateCameraSettings command accordingly.

* Update packages/base/src/commands.ts

Co-authored-by: martinRenou <[email protected]>

---------

Co-authored-by: martinRenou <[email protected]>

Author: HaudinFlorence

examples/jcad.ipynb

@@ -17,8 +17,22 @@
   }
  ],
  "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
   "language_info": {
-   "name": "python"
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.13.3"
   }
  },
  "nbformat": 4,

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

@@ -1536,7 +1536,7 @@ export class MainView extends React.Component<IProps, IStates> {
     }
 
     if (change.key === 'cameraSettings') {
-      const cameraSettings = change.newValue as CameraSettings | undefined;
+      const cameraSettings = change.newValue as CameraSettings;
 
       if (change.type !== 'remove' && cameraSettings) {
         this._cameraSettings = cameraSettings;

packages/base/src/commands.ts

@@ -37,7 +37,7 @@ import {
   wireframeIcon,
   transformIcon,
   pencilSolidIcon,
-  cameraSolidIcon
+  videoSolidIcon
 } from './tools';
 import keybindings from './keybindings.json';
 import { DEFAULT_MESH_COLOR } from './3dview/helpers';
@@ -46,7 +46,7 @@ import { PathExt } from '@jupyterlab/coreutils';
 import { MainViewModel } from './3dview/mainviewmodel';
 import { handleRemoveObject } from './panelview';
 import { v4 as uuid } from 'uuid';
-import { ExplodedView, JupyterCadTracker } from './types';
+import { CameraSettings, ExplodedView, JupyterCadTracker } from './types';
 import { JSONObject } from '@lumino/coreutils';
 import { JupyterCadDocumentWidget } from './widget';
 
@@ -588,36 +588,6 @@ const EXPLODED_VIEW_FORM = {
   }
 };
 
-const CAMERA_FORM = {
-  title: 'Camera Settings',
-  schema: {
-    type: 'object',
-    required: ['Type'],
-    additionalProperties: false,
-    properties: {
-      Type: {
-        title: 'Projection',
-        description: 'The projection type',
-        type: 'string',
-        enum: ['Perspective', 'Orthographic']
-      }
-    }
-  },
-  default: (panel: JupyterCadPanel) => {
-    return {
-      Type: panel.cameraSettings?.type ?? 'Perspective'
-    };
-  },
-  syncData: (panel: JupyterCadPanel) => {
-    return (props: IDict) => {
-      const { Type } = props;
-      panel.cameraSettings = {
-        type: Type
-      };
-    };
-  }
-};
-
 const EXPORT_FORM = {
   title: 'Export to .jcad',
   schema: {
@@ -1087,25 +1057,32 @@ export function addCommands(
   });
 
   commands.addCommand(CommandIDs.updateCameraSettings, {
-    label: trans.__('Camera Settings'),
+    label: () => {
+      const isOn =
+        tracker.currentWidget?.content?.cameraSettings?.type === 'Perspective';
+      return isOn
+        ? trans.__('Perspective projection is on')
+        : trans.__('Orthographic projection is on');
+    },
     isEnabled: () => Boolean(tracker.currentWidget),
-    icon: cameraSolidIcon,
+    icon: videoSolidIcon,
+    isToggled: () => {
+      const current = tracker.currentWidget?.content;
+      return current?.cameraSettings.type === 'Orthographic';
+    },
     execute: async () => {
       const current = tracker.currentWidget;
-
       if (!current) {
         return;
+      } else {
+        const currentSettings: CameraSettings = current.content.cameraSettings;
+        if (currentSettings.type === 'Perspective') {
+          current.content.cameraSettings.type = 'Orthographic';
+        } else {
+          current.content.cameraSettings.type = 'Perspective';
+        }
       }
-
-      const dialog = new FormDialog({
-        model: current.model,
-        title: CAMERA_FORM.title,
-        schema: CAMERA_FORM.schema,
-        sourceData: CAMERA_FORM.default(current.content),
-        syncData: CAMERA_FORM.syncData(current.content),
-        cancelButton: true
-      });
-      await dialog.launch();
+      commands.notifyCommandChanged(CommandIDs.updateCameraSettings);
     }
   });
 

packages/base/src/tools.ts

@@ -25,7 +25,7 @@ import filletIconStr from '../style/icon/fillet.svg';
 import wireframeIconStr from '../style/icon/wireframe.svg';
 import chevronRightStr from '../style/icon/chevron-right.svg';
 import pencilSolidStr from '../style/icon/pencil-solid.svg';
-import cameraSolidStr from '../style/icon/camera-solid.svg';
+import videoSolidStr from '../style/icon/video-solid.svg';
 import terminalToolbarStr from '../style/icon/terminal-toolbar.svg';
 
 import visibilitySvg from '../style/icon/visibility.svg';
@@ -150,9 +150,9 @@ export const pencilSolidIcon = new LabIcon({
   svgstr: pencilSolidStr
 });
 
-export const cameraSolidIcon = new LabIcon({
-  name: 'jupytercad:camera-solid-icon',
-  svgstr: cameraSolidStr
+export const videoSolidIcon = new LabIcon({
+  name: 'jupytercad:video-solid-icon',
+  svgstr: videoSolidStr
 });
 
 export const terminalToolbarIcon = new LabIcon({

packages/base/src/widget.ts

@@ -112,7 +112,9 @@ export class JupyterCadPanel extends SplitPanel {
     model: IJupyterCadModel;
     workerRegistry: IJCadWorkerRegistry;
   }) {
-    this._view = new ObservableMap<JSONValue>();
+    this._view = new ObservableMap<JSONValue>({});
+    const cameraSettings: CameraSettings = { type: 'Perspective' };
+    this._view.set('cameraSettings', cameraSettings);
     this._mainViewModel = new MainViewModel({
       jcadModel: options.model,
       workerRegistry: options.workerRegistry,
@@ -174,12 +176,12 @@ export class JupyterCadPanel extends SplitPanel {
     this._view.set('explodedView', value || null);
   }
 
-  get cameraSettings(): CameraSettings | undefined {
-    return this._view.get('cameraSettings') as CameraSettings | undefined;
+  get cameraSettings(): CameraSettings {
+    return this._view.get('cameraSettings') as CameraSettings;
   }
 
-  set cameraSettings(value: CameraSettings | undefined) {
-    this._view.set('cameraSettings', value || null);
+  set cameraSettings(value: CameraSettings) {
+    this._view.set('cameraSettings', value);
   }
 
   get clipView(): ClipSettings | undefined {