Replace the dialogform by a toggle button for the exploded view (#722)

* Replace the dialogform by a toggle button for the exploded view.
Add a slider to the view to set up the exploded view factor when the button is toggled.

* Rename _handleExplosionChange into handleExplodedViewChange.
Call _setupExplodedView in _handleExplodedViewChange method of MainView class to update the view after a factor change.

* Propose an alternative overlay view for the case where both isTransformOrClipEnabled and this.state.explodedViewEnabled are true. Set max value to 10 for the exploded view factor.

* Update the test related the exploded view in ui-spec.ts.

* Take review commands into account.

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

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

* Change the max value of the slider to 5 for the exploded view factor.
Integrate the fix for the snapshots name through rebase with main inclundin PR 723.

* Update Playwright Snapshots

* Apply suggestions from code review

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

* Update ui.spec.ts to try to have a more readable diff compared to main branch.

---------

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

Author: 4 people

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

@@ -77,6 +77,8 @@ interface IStates {
   wireframe: boolean;
   transform: boolean;
   clipEnabled: boolean;
+  explodedViewEnabled: boolean;
+  explodedViewFactor: number;
   rotationSnapValue: number;
   transformMode: string | undefined;
 }
@@ -124,6 +126,8 @@ export class MainView extends React.Component<IProps, IStates> {
       wireframe: false,
       transform: false,
       clipEnabled: false,
+      explodedViewEnabled: false,
+      explodedViewFactor: 0,
       rotationSnapValue: 10,
       transformMode: 'translate'
     };
@@ -1526,12 +1530,20 @@ export class MainView extends React.Component<IProps, IStates> {
     }
 
     if (change.key === 'explodedView') {
-      const explodedView = change.newValue as ExplodedView | undefined;
+      const explodedView = change.newValue as ExplodedView;
 
       if (change.type !== 'remove' && explodedView) {
-        this._explodedView = explodedView;
-
-        this._setupExplodedView();
+        this.setState(
+          oldState => ({
+            ...oldState,
+            explodedViewEnabled: explodedView.enabled,
+            explodedViewFactor: explodedView.factor
+          }),
+          () => {
+            this._explodedView = explodedView;
+            this._setupExplodedView();
+          }
+        );
       }
     }
 
@@ -1887,6 +1899,15 @@ export class MainView extends React.Component<IProps, IStates> {
     }
   };
 
+  private _handleExplodedViewChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const newValue = parseFloat(event.target.value);
+    this.setState({ explodedViewFactor: newValue });
+    this._explodedView.factor = newValue;
+    this._setupExplodedView();
+  };
+
   render(): JSX.Element {
     const isTransformOrClipEnabled =
       this.state.transform || this.state.clipEnabled;
@@ -1935,40 +1956,71 @@ export class MainView extends React.Component<IProps, IStates> {
             height: 'calc(100%)'
           }}
         />
-        {isTransformOrClipEnabled && (
+
+        {(isTransformOrClipEnabled || this.state.explodedViewEnabled) && (
           <div
             style={{
               position: 'absolute',
               bottom: '10px',
               left: '10px',
+              display: 'flex',
+              flexDirection: 'column',
               padding: '8px',
               backgroundColor: 'rgba(0, 0, 0, 0.5)',
               color: 'white',
               borderRadius: '4px',
-              fontSize: '12px'
+              fontSize: '12px',
+              gap: '8px'
             }}
           >
-            <div style={{ marginBottom: '2px' }}>Press R to switch mode</div>
-
-            {this.state.transformMode === 'rotate' && (
+            {isTransformOrClipEnabled && (
               <div>
-                <label style={{ marginRight: '8px' }}>Rotation Snap (°):</label>
-                <input
-                  type="number"
-                  value={this.state.rotationSnapValue}
-                  onChange={this._handleSnapChange}
-                  style={{
-                    width: '50px',
-                    padding: '4px',
-                    borderRadius: '4px',
-                    border: '1px solid #ccc',
-                    fontSize: '12px'
-                  }}
-                />
+                <div style={{ marginBottom: '2px' }}>
+                  Press R to switch mode
+                </div>
+                {this.state.transformMode === 'rotate' && (
+                  <div>
+                    <label style={{ marginRight: '8px' }}>
+                      Rotation Snap (°):
+                    </label>
+                    <input
+                      type="number"
+                      value={this.state.rotationSnapValue}
+                      onChange={this._handleSnapChange}
+                      style={{
+                        width: '50px',
+                        padding: '4px',
+                        borderRadius: '4px',
+                        border: '1px solid #ccc',
+                        fontSize: '12px'
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+            {this.state.explodedViewEnabled && (
+              <div>
+                <div style={{ marginBottom: '4px' }}>Exploded view factor:</div>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <input
+                    type="range"
+                    min="0"
+                    max="5"
+                    step="0.1"
+                    value={this.state.explodedViewFactor}
+                    onChange={this._handleExplodedViewChange}
+                    style={{ width: '120px', marginRight: '8px' }}
+                  />
+                  <span style={{ minWidth: '30px', textAlign: 'right' }}>
+                    {this.state.explodedViewFactor}
+                  </span>
+                </div>
               </div>
             )}
           </div>
         )}
+
         <div
           id={'split-label-left'}
           style={{

packages/base/src/commands.ts

@@ -554,40 +554,6 @@ const AXES_FORM = {
   }
 };
 
-const EXPLODED_VIEW_FORM = {
-  title: 'Exploded View Settings',
-  schema: {
-    type: 'object',
-    required: ['Enabled', 'Factor'],
-    additionalProperties: false,
-    properties: {
-      Enabled: {
-        type: 'boolean',
-        description: 'Whether the exploded view is enabled or not'
-      },
-      Factor: {
-        type: 'number',
-        description: 'The exploded view factor'
-      }
-    }
-  },
-  default: (panel: JupyterCadPanel) => {
-    return {
-      Enabled: panel.explodedView?.enabled ?? false,
-      Factor: panel.explodedView?.factor ?? 0.5
-    };
-  },
-  syncData: (panel: JupyterCadPanel) => {
-    return (props: IDict) => {
-      const { Enabled, Factor } = props;
-      panel.explodedView = {
-        enabled: Enabled,
-        factor: Factor
-      };
-    };
-  }
-};
-
 const EXPORT_FORM = {
   title: 'Export to .jcad',
   schema: {
@@ -1038,17 +1004,13 @@ export function addCommands(
       if (!current) {
         return;
       }
+      const panel = current.content;
 
-      const dialog = new FormDialog({
-        model: current.model,
-        title: EXPLODED_VIEW_FORM.title,
-        schema: EXPLODED_VIEW_FORM.schema,
-        sourceData: EXPLODED_VIEW_FORM.default(current.content),
-        syncData: EXPLODED_VIEW_FORM.syncData(current.content),
-        cancelButton: true
-      });
-      await dialog.launch();
-
+      if (panel.explodedView.enabled) {
+        panel.explodedView = { ...panel.explodedView, enabled: false };
+      } else {
+        panel.explodedView = { ...panel.explodedView, enabled: true };
+      }
       commands.notifyCommandChanged(CommandIDs.updateExplodedView);
 
       // Notify change so that toggle button for transform disables if needed

packages/base/src/widget.ts

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

ui-tests/tests/ui.spec.ts

@@ -280,14 +280,7 @@ test.describe('UI Test', () => {
       await page.sidebar.close('right');
       // Apply Exploded view
       await page.getByTitle('Exploded View').click();
-      await page.getByLabel('Enabled').click();
-      await page.locator('input#root_Factor').click();
-      await page.locator('input#root_Factor').fill('3.5');
-      await page
-        .locator('div.jp-Dialog-buttonLabel', {
-          hasText: 'Submit'
-        })
-        .click();
+      await page.getByRole('slider').fill('3.5');
 
       let main = await page.$('#jp-main-split-panel');
       if (main) {