Enable toggling transform controls (#578)

* Enable toggling transform controls

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

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

* Attach and detach `transformControls` correctly

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

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

* Prevent edge selection while transforming

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

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

* Make switch mode text discoverable

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

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

* Now works without attach detach calls

* No need to re-render

* Remove rerendering

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

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

---------

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

Author: 3 people

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

@@ -71,6 +71,8 @@ interface IStates {
   annotations: IDict<IAnnotation>;
   firstLoad: boolean;
   wireframe: boolean;
+  transform: boolean;
+  clipEnabled: boolean;
 }
 
 interface ILineIntersection extends THREE.Intersection {
@@ -113,7 +115,9 @@ export class MainView extends React.Component<IProps, IStates> {
       loading: true,
       annotations: {},
       firstLoad: true,
-      wireframe: false
+      wireframe: false,
+      transform: false,
+      clipEnabled: true
     };
   }
 
@@ -641,7 +645,9 @@ export class MainView extends React.Component<IProps, IStates> {
         if (
           !intersect.object.visible ||
           !intersect.object.parent?.visible ||
-          intersect.object.name === SELECTION_BOUNDING_BOX
+          intersect.object.name === SELECTION_BOUNDING_BOX ||
+          (this._transformControls.enabled &&
+            intersect.object.name.startsWith('edge'))
         ) {
           continue;
         }
@@ -1192,8 +1198,8 @@ export class MainView extends React.Component<IProps, IStates> {
           this._transformControls.position.copy(positionVector);
         }
 
-        this._transformControls.visible = true;
-        this._transformControls.enabled = true;
+        this._transformControls.visible = this.state.transform;
+        this._transformControls.enabled = this.state.transform;
 
         return;
       }
@@ -1429,9 +1435,13 @@ export class MainView extends React.Component<IProps, IStates> {
       const clipSettings = change.newValue as ClipSettings | undefined;
 
       if (change.type !== 'remove' && clipSettings) {
-        this._clipSettings = clipSettings;
-
-        this._updateClipping();
+        this.setState(
+          oldState => ({ ...oldState, clipEnabled: clipSettings.enabled }),
+          () => {
+            this._clipSettings = clipSettings;
+            this._updateClipping();
+          }
+        );
       }
     }
 
@@ -1449,12 +1459,25 @@ export class MainView extends React.Component<IProps, IStates> {
                   child.material.needsUpdate = true;
                 }
               });
-              this._renderer.render(this._scene, this._camera);
             }
           }
         );
       }
     }
+
+    if (change.key === 'transform') {
+      const transformEnabled = change.newValue as boolean | undefined;
+
+      if (transformEnabled !== undefined) {
+        this.setState(
+          old => ({ ...old, transform: transformEnabled }),
+          () => {
+            this._transformControls.visible = transformEnabled;
+            this._transformControls.enabled = transformEnabled;
+          }
+        );
+      }
+    }
   }
 
   private _setupExplodedView() {
@@ -1621,6 +1644,8 @@ export class MainView extends React.Component<IProps, IStates> {
     return screenPosition;
   }
   render(): JSX.Element {
+    const isTransformOrClipEnabled =
+      this.state.transform || this._clipSettings.enabled;
     return (
       <div
         className="jcad-Mainview data-jcad-keybinding"
@@ -1665,6 +1690,22 @@ export class MainView extends React.Component<IProps, IStates> {
             height: 'calc(100%)'
           }}
         />
+        {isTransformOrClipEnabled && (
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '10px',
+              left: '10px',
+              padding: '8px',
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              color: 'white',
+              borderRadius: '4px',
+              fontSize: '12px'
+            }}
+          >
+            Press R to switch mode
+          </div>
+        )}
       </div>
     );
   }

packages/base/src/commands.ts

@@ -954,6 +954,32 @@ export function addCommands(
     commands.notifyCommandChanged(CommandIDs.wireframe);
   });
 
+  commands.addCommand(CommandIDs.transform, {
+    label: trans.__('Toggle Transform Controls'),
+    isEnabled: () => {
+      return tracker.currentWidget !== null;
+    },
+    isToggled: () => {
+      const current = tracker.currentWidget?.content;
+      return current?.transform || false;
+    },
+    execute: async () => {
+      const current = tracker.currentWidget?.content;
+
+      if (!current) {
+        return;
+      }
+
+      current.transform = !current.transform;
+      commands.notifyCommandChanged(CommandIDs.transform);
+    },
+    icon: axesIcon
+  });
+
+  tracker.currentChanged.connect(() => {
+    commands.notifyCommandChanged(CommandIDs.transform);
+  });
+
   commands.addCommand(CommandIDs.chamfer, {
     label: trans.__('Make chamfer'),
     isEnabled: () => {
@@ -1134,6 +1160,7 @@ export namespace CommandIDs {
   export const union = 'jupytercad:union';
   export const intersection = 'jupytercad:intersection';
   export const wireframe = 'jupytercad:wireframe';
+  export const transform = 'jupytercad:transform';
 
   export const chamfer = 'jupytercad:chamfer';
   export const fillet = 'jupytercad:fillet';

packages/base/src/toolbar/widget.tsx

@@ -192,6 +192,14 @@ export class ToolbarWidget extends ReactiveToolbar {
             commands: options.commands
           })
         );
+        this.addItem(
+          'Toggle Transform Controls',
+          new CommandToolbarButton({
+            id: CommandIDs.transform,
+            label: '',
+            commands: options.commands
+          })
+        );
         this.addItem('separator6', new Separator());
 
         this.addItem(

packages/base/src/widget.ts

@@ -145,6 +145,14 @@ export class JupyterCadPanel extends SplitPanel {
     this._view.set('wireframe', value);
   }
 
+  get transform(): boolean {
+    return this._view.get('transform') as boolean;
+  }
+
+  set transform(value: boolean) {
+    this._view.set('transform', value);
+  }
+
   executeConsole() {
     if (this._consoleView) {
       this._consoleView.execute();